Replace Angular OTP example with Svelte OTP example

wrappers/wasm/example/otp-example/.gitignore

@@ -1,46 +1,23 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+node_modules
 
-# compiled output
-/dist
-/tmp
-/out-tsc
-# Only exists if Bazel was run
-/bazel-out
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
 
-# dependencies
-/node_modules
-
-# profiling files
-chrome-profiler-events*.json
-speed-measure-plugin*.json
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-.history/*
-
-# misc
-/.sass-cache
-/connect.lock
-/coverage
-/libpeerconnection.log
-npm-debug.log
-yarn-error.log
-testem.log
-/typings
-
-# System Files
+# OS
 .DS_Store
 Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

wrappers/wasm/example/otp-example/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

wrappers/wasm/example/otp-example/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

wrappers/wasm/example/otp-example/.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

wrappers/wasm/example/otp-example/README.md

@@ -1,27 +1,101 @@
-# OtpExample
+# Svelte Slauth WASM OTP Example
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.5.
+A modern, interactive TOTP (Time-based One-Time Password) authenticator built with Svelte, TypeScript, and the Devolutions slauth library.
 
-## Development server
+## Features
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+- 🔐 **TOTP Generation** - Generates time-based one-time passwords using SHA-256
+- ⏱️ **Real-time Countdown** - Visual radial progress bar showing time remaining for the current code
+- 📱 **Phone Mockup UI** - Displays the authenticator code in a stylized phone interface
+- 🎨 **Modern Design** - Built with DaisyUI for a polished, responsive UI
+- ⚡ **Svelte 5 Reactivity** - Uses Svelte's latest rune syntax for state management
 
-## Code scaffolding
+## Getting Started
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+### Prerequisites
 
-## Build
+- Node.js 16+
+- Bun or npm/pnpm/yarn
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+### Installation
 
-## Running unit tests
+1. Clone the repository
+2. Install dependencies:
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```bash
+bun install
+# or npm install / pnpm install / yarn install
+```
 
-## Running end-to-end tests
+### Development
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Start the development server:
 
-## Further help
+```bash
+bun run dev
+# or npm run dev
+```
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+Open [http://localhost:5173](http://localhost:5173) in your browser.
+
+### Building
+
+Create a production build:
+
+```bash
+bun run build
+```
+
+Preview the production build:
+
+```bash
+bun run preview
+```
+
+## How It Works
+
+### TOTP Configuration
+
+The authenticator uses a TOTP configuration with the following defaults:
+
+```typescript
+const config: Config = {
+	secret: 'GEZDGNBVGY', // Base32-encoded secret
+	period: 30, // 30-second validity period
+	digits: 6, // 6-digit codes
+	algo: OtpAlgorithm.sha256() // SHA-256 hashing
+};
+```
+
+### Code Generation
+
+- Codes are generated using the `@devolutions/slauth` library
+- A new code is automatically generated by default every 30 seconds
+- The system tracks time remaining in the current period and updates the progress bar every second
+
+### UI Components
+
+- **Phone Mockup**: Displays the current 6-digit code
+- **Radial Progress Bar**: Shows percentage of time remaining (0-100%)
+- **Login Form**: Email, password, and authenticator code inputs (UI placeholder)
+
+## Project Structure
+
+```
+src/
+├── routes/
+│   ├── +layout.svelte   # Root layout
+│   └── +page.svelte     # Main authenticator page
+├── app.html             # HTML entry point
+├── app.css              # Global styles
+└── app.d.ts             # Type definitions
+```
+
+## Technologies
+
+- **[Svelte 5](https://svelte.dev)** - Reactive UI framework
+- **[SvelteKit](https://svelte.dev/docs/kit)** - Full-stack framework
+- **[TypeScript](https://www.typescriptlang.org)** - Type safety
+- **[Slauth](https://github.com/devolutions/slauth)** - Auth Library
+- **[DaisyUI](https://daisyui.com)** - Tailwind CSS component library
+- **[Vite](https://vitejs.dev)** - Build tool