capacitor-ota 1.0.0

package/README.md

@@ -0,0 +1,290 @@
+# OTA Service
+
+Capacitor uygulamaları için Over-The-Air (OTA) güncelleme servisi.
+
+## Mimari
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│                     ADMIN (Nadir)                            │
+├──────────────────────────────────────────────────────────────┤
+│  CLI/Panel → POST /api/versions/upload (Workers)             │
+│       ↓                                                      │
+│  1. Bundle → R2: ota.silgi.dev/app/production/1.0.0.zip     │
+│  2. JSON  → R2: ota.silgi.dev/updates/com.example.app.json  │
+└──────────────────────────────────────────────────────────────┘
+
+┌──────────────────────────────────────────────────────────────┐
+│                     CİHAZ (Sık)                              │
+├──────────────────────────────────────────────────────────────┤
+│  App açılış → GET ota.silgi.dev/updates/com.example.app.json│
+│       ↓         (CDN HIT - Workers YOK)                      │
+│  Güncelleme var mı?                                          │
+│       ↓ evet                                                 │
+│  GET ota.silgi.dev/bundle.zip (CDN HIT - Workers YOK)       │
+│       ↓                                                      │
+│  CapacitorUpdater.download() → set()                        │
+└──────────────────────────────────────────────────────────────┘
+```
+
+**Sonuç:** Cihazlar için 0 Workers request, sadece R2 + CDN.
+
+---
+
+## CLI Kullanımı
+
+### Kurulum
+
+```bash
+cd ota-service
+pnpm install
+```
+
+### Komutlar
+
+#### Login
+```bash
+pnpm cli login <username> <password>
+```
+Token `~/.ota-cli.json` dosyasına kaydedilir.
+
+#### Uygulamaları Listele
+```bash
+pnpm cli apps
+```
+
+Çıktı:
+```
+📱 Apps:
+
+ID            Name          Created
+──────────────────────────────────────────────────
+9fa3a103d8d0   MyApp         1/22/2026
+```
+
+#### Versiyonları Listele
+```bash
+pnpm cli versions <app_id>
+```
+
+Çıktı:
+```
+📦 Versions:
+
+ID    Version    Channel      Active  Downloads  Created
+─────────────────────────────────────────────────────────────────
+1     1.0.0      production   ✅      150        1/20/2026
+2     1.0.1      production           45         1/22/2026
+```
+
+#### Yeni Versiyon Yükle
+```bash
+pnpm cli upload <app_id> <path> [options]
+```
+
+`<path>` bir dizin veya `.zip` dosyası olabilir. Dizin verilirse CLI otomatik zipleyecektir.
+
+**Seçenekler:**
+| Flag | Kısa | Açıklama | Varsayılan |
+|------|------|----------|------------|
+| `--version` | `-v` | Versiyon numarası | 1.0.0 |
+| `--channel` | `-c` | Kanal | production |
+| `--capacitor-app-id` | | Capacitor app ID (static JSON için) | - |
+| `--min-native` | | Minimum native versiyon | - |
+| `--notes` | | Release notes | - |
+
+**Örnekler:**
+```bash
+# Dizin ile (otomatik ziplenir)
+pnpm cli upload 9fa3a103d8d0 ./dist \
+  -v 1.0.5 \
+  --capacitor-app-id com.example.app
+
+# Zip dosyası ile
+pnpm cli upload 9fa3a103d8d0 ./bundle.zip -v 1.0.5
+```
+
+Çıktı:
+```
+📦 Zipping directory: dist...
+📤 Uploading...
+
+✅ Upload successful!
+   Version:  1.0.5
+   Checksum: a1b2c3d4...
+```
+
+#### Versiyon Sil
+```bash
+pnpm cli delete <version_id>
+```
+
+#### Rollback
+```bash
+pnpm cli rollback <version_id>
+```
+Belirtilen versiyonu aktif yapar.
+
+#### Konfigürasyon
+```bash
+# Mevcut ayarları göster
+pnpm cli config
+
+# API URL değiştir
+pnpm cli set-url https://my-ota.workers.dev
+```
+
+---
+
+## API Endpoints
+
+### Public (Auth Gerektirmez)
+
+| Method | Endpoint | Açıklama |
+|--------|----------|----------|
+| GET | `/api/updates` | Update check (legacy) |
+
+### Protected (Auth Gerektirir)
+
+| Method | Endpoint | Açıklama |
+|--------|----------|----------|
+| POST | `/api/auth/login` | Login |
+| GET | `/api/apps` | App listesi |
+| POST | `/api/apps` | App oluştur |
+| DELETE | `/api/apps/:id` | App sil |
+| GET | `/api/versions` | Versiyon listesi |
+| POST | `/api/versions/upload` | Versiyon yükle |
+| DELETE | `/api/versions/:id` | Versiyon sil |
+| POST | `/api/versions/:id/activate` | Versiyonu aktif yap |
+| POST | `/api/versions/:id/rollback` | Rollback |
+
+---
+
+## Capacitor Entegrasyonu
+
+### 1. Plugin Kur
+```bash
+npm install @capgo/capacitor-updater
+npx cap sync
+```
+
+### 2. Capacitor Config
+```typescript
+// capacitor.config.ts
+const config: CapacitorConfig = {
+  plugins: {
+    CapacitorUpdater: {
+      autoUpdate: false, // Manuel kontrol
+    },
+  },
+}
+```
+
+### 3. Vue Composable
+```typescript
+// src/composables/useOtaUpdate.ts
+import { CapacitorUpdater } from '@capgo/capacitor-updater'
+
+const CONFIG = {
+  staticUrl: 'https://ota.silgi.dev',
+  appId: 'com.example.app',
+}
+
+export function useOtaUpdate() {
+  async function checkForUpdate() {
+    const url = `${CONFIG.staticUrl}/updates/${CONFIG.appId}.json`
+    const response = await fetch(url)
+    const data = await response.json()
+    // ... version karşılaştırma ve indirme
+  }
+
+  async function downloadUpdate(url: string, version: string, checksum: string) {
+    const bundle = await CapacitorUpdater.download({ url, version, checksum })
+    return bundle
+  }
+
+  async function applyUpdate(bundleId: string) {
+    await CapacitorUpdater.set({ id: bundleId })
+    // Otomatik reload
+  }
+
+  return { checkForUpdate, downloadUpdate, applyUpdate }
+}
+```
+
+### 4. App.vue
+```vue
+<script setup>
+import { onMounted } from 'vue'
+import { useOtaUpdate } from '@/composables/useOtaUpdate'
+
+const ota = useOtaUpdate()
+
+onMounted(async () => {
+  await ota.notifyAppReady() // Rollback'i önle
+  await ota.checkForUpdate()
+})
+</script>
+```
+
+---
+
+## Static JSON Format
+
+R2'de saklanan güncelleme bilgisi:
+
+```
+GET https://ota.silgi.dev/updates/com.example.app.json
+```
+
+```json
+{
+  "version": "1.0.5",
+  "url": "https://ota.silgi.dev/9fa3a103d8d0/production/1.0.5.zip",
+  "checksum": "a1b2c3d4e5f6...",
+  "min_native_version": "1.0.0",
+  "release_notes": "Bug fixes",
+  "updated_at": "2026-01-22T10:30:00.000Z"
+}
+```
+
+---
+
+## Deployment
+
+```bash
+# Local development
+pnpm dev
+
+# Deploy to Cloudflare Workers
+pnpm build
+npx wrangler deploy
+```
+
+---
+
+## Environment Variables
+
+### Workers (wrangler.toml)
+```toml
+[vars]
+ADMIN_PASSWORD_HASH = "bcrypt_hash_here"
+R2_PUBLIC_URL = "https://ota.silgi.dev"
+```
+
+### Client (.env)
+```env
+VITE_OTA_STATIC_URL=https://ota.silgi.dev
+```
+
+---
+
+## Maliyet Avantajı
+
+| Senaryo | Workers Request | R2 Request |
+|---------|-----------------|------------|
+| 1000 kullanıcı, 10 açılış/gün | 0 | 10,000 |
+| Admin upload (ayda ~10) | 10 | 10 |
+
+**Workers:** Neredeyse ücretsiz (sadece admin)
+**R2:** İlk 10M request/ay ücretsiz

package/dist/index.d.mts

@@ -0,0 +1,86 @@
+//#region src/types.d.ts
+interface OtaConfig {
+  staticUrl: string;
+  appId: string;
+  appVersion: string;
+  theme?: OtaTheme;
+  texts?: OtaTexts;
+  autoApply?: boolean;
+  showUI?: boolean;
+}
+interface OtaTheme {
+  primaryColor?: string;
+  gradientFrom?: string;
+  gradientTo?: string;
+  textColor?: string;
+}
+interface OtaTexts {
+  title?: string;
+  downloading?: string;
+  downloadComplete?: string;
+  applyButton?: string;
+  applying?: string;
+  errorTitle?: string;
+  retryButton?: string;
+}
+interface RemoteVersion {
+  version: string;
+  url: string;
+  checksum: string;
+  min_native_version?: string;
+  release_notes?: string | null;
+}
+type OtaStatus = 'idle' | 'checking' | 'downloading' | 'ready' | 'applying' | 'error';
+interface OtaState {
+  status: OtaStatus;
+  progress: number;
+  currentVersion: string;
+  newVersion: string | null;
+  error: string | null;
+}
+interface DownloadedBundle {
+  id: string;
+  version: string;
+}
+//#endregion
+//#region src/OtaUpdater.d.ts
+type EventCallback = (data?: any) => void;
+declare class OtaUpdater {
+  private config;
+  private listeners;
+  private downloadedBundle;
+  state: OtaState;
+  constructor(config: OtaConfig);
+  on(event: string, callback: EventCallback): void;
+  off(event: string, callback: EventCallback): void;
+  private emit;
+  private setState;
+  notifyAppReady(): Promise<void>;
+  check(): Promise<boolean>;
+  download(): Promise<boolean>;
+  apply(): Promise<void>;
+}
+declare function getOtaUpdater(): OtaUpdater | null;
+//#endregion
+//#region src/OtaUpdateElement.d.ts
+declare class OtaUpdateElement extends HTMLElement {
+  private shadow;
+  private texts;
+  private theme?;
+  private visible;
+  constructor();
+  setTexts(texts?: OtaTexts): void;
+  setTheme(theme?: OtaTheme): void;
+  show(): void;
+  hide(): void;
+  connectedCallback(): void;
+  private getProgressOffset;
+  private render;
+  private renderContent;
+  private attachEventListeners;
+}
+//#endregion
+//#region src/index.d.ts
+declare function initOtaUpdate(config: OtaConfig): Promise<OtaUpdater>;
+//#endregion
+export { DownloadedBundle, OtaConfig, OtaState, OtaStatus, OtaTexts, OtaTheme, OtaUpdateElement, OtaUpdater, RemoteVersion, getOtaUpdater, initOtaUpdate };

package/dist/index.mjs

@@ -0,0 +1,582 @@
+//#region src/utils.ts
+function compareVersions(a, b) {
+	const pa = a.split(".").map(Number);
+	const pb = b.split(".").map(Number);
+	for (let i = 0; i < Math.max(pa.length, pb.length); i++) {
+		const na = pa[i] || 0;
+		const nb = pb[i] || 0;
+		if (na > nb) return 1;
+		if (na < nb) return -1;
+	}
+	return 0;
+}
+function isNativePlatform() {
+	try {
+		return typeof Capacitor !== "undefined" && Capacitor.isNativePlatform();
+	} catch {
+		return false;
+	}
+}
+
+//#endregion
+//#region src/OtaUpdater.ts
+var OtaUpdater = class {
+	config;
+	listeners = /* @__PURE__ */ new Map();
+	downloadedBundle = null;
+	state = {
+		status: "idle",
+		progress: 0,
+		currentVersion: "",
+		newVersion: null,
+		error: null
+	};
+	constructor(config) {
+		this.config = config;
+		this.state.currentVersion = config.appVersion;
+	}
+	on(event, callback) {
+		if (!this.listeners.has(event)) this.listeners.set(event, /* @__PURE__ */ new Set());
+		this.listeners.get(event).add(callback);
+	}
+	off(event, callback) {
+		this.listeners.get(event)?.delete(callback);
+	}
+	emit(event, data) {
+		this.listeners.get(event)?.forEach((cb) => cb(data));
+	}
+	setState(partial) {
+		Object.assign(this.state, partial);
+		this.emit("stateChange", { ...this.state });
+		if (partial.progress !== void 0) this.emit("progress", partial.progress);
+		if (partial.error) this.emit("error", partial.error);
+	}
+	async notifyAppReady() {
+		if (!isNativePlatform()) return;
+		try {
+			const { CapacitorUpdater } = await import("@capgo/capacitor-updater");
+			await CapacitorUpdater.notifyAppReady();
+		} catch {}
+	}
+	async check() {
+		this.setState({
+			status: "checking",
+			error: null
+		});
+		try {
+			const url = `${this.config.staticUrl}/updates/${this.config.appId}.json?_=${Date.now()}`;
+			const response = await fetch(url);
+			if (!response.ok) {
+				if (response.status === 404) {
+					this.setState({ status: "idle" });
+					return false;
+				}
+				throw new Error(`HTTP ${response.status}`);
+			}
+			const data = await response.json();
+			if (compareVersions(data.version, this.config.appVersion) > 0) {
+				this.setState({ newVersion: data.version });
+				return true;
+			}
+			this.setState({ status: "idle" });
+			return false;
+		} catch (e) {
+			const error = e instanceof Error ? e.message : "Update check failed";
+			this.setState({
+				status: "error",
+				error
+			});
+			return false;
+		}
+	}
+	async download() {
+		if (!this.state.newVersion) {
+			this.setState({
+				status: "error",
+				error: "No update info available"
+			});
+			return false;
+		}
+		this.setState({
+			status: "downloading",
+			progress: 0,
+			error: null
+		});
+		if (!isNativePlatform()) {
+			for (let i = 0; i <= 100; i += 5) {
+				this.setState({ progress: i });
+				await new Promise((r) => setTimeout(r, 50));
+			}
+			this.downloadedBundle = {
+				id: "web-sim",
+				version: this.state.newVersion
+			};
+			this.setState({ status: "ready" });
+			this.emit("updateReady");
+			return true;
+		}
+		try {
+			const url = `${this.config.staticUrl}/updates/${this.config.appId}.json`;
+			const data = await (await fetch(url)).json();
+			const { CapacitorUpdater } = await import("@capgo/capacitor-updater");
+			const listener = await CapacitorUpdater.addListener("download", (event) => {
+				this.setState({ progress: event.percent });
+			});
+			const bundle = await CapacitorUpdater.download({
+				url: data.url,
+				version: data.version,
+				checksum: data.checksum
+			});
+			listener.remove();
+			this.downloadedBundle = {
+				id: bundle.id,
+				version: bundle.version
+			};
+			this.setState({ status: "ready" });
+			this.emit("updateReady");
+			return true;
+		} catch (e) {
+			const error = e instanceof Error ? e.message : "Download failed";
+			this.setState({
+				status: "error",
+				error
+			});
+			return false;
+		}
+	}
+	async apply() {
+		this.setState({ status: "applying" });
+		if (!isNativePlatform()) {
+			await new Promise((r) => setTimeout(r, 500));
+			this.emit("updateApplied");
+			window.location.reload();
+			return;
+		}
+		if (!this.downloadedBundle) {
+			this.setState({
+				status: "error",
+				error: "No downloaded bundle"
+			});
+			return;
+		}
+		try {
+			const { CapacitorUpdater } = await import("@capgo/capacitor-updater");
+			await CapacitorUpdater.set({ id: this.downloadedBundle.id });
+			this.emit("updateApplied");
+		} catch (e) {
+			const error = e instanceof Error ? e.message : "Apply failed";
+			this.setState({
+				status: "error",
+				error
+			});
+		}
+	}
+};
+let instance = null;
+function getOtaUpdater() {
+	return instance;
+}
+function createOtaUpdater(config) {
+	instance = new OtaUpdater(config);
+	return instance;
+}
+
+//#endregion
+//#region src/styles.ts
+function getStyles(theme) {
+	return `
+    :host {
+      --ota-primary: ${theme?.primaryColor || "#10b981"};
+      --ota-gradient-from: ${theme?.gradientFrom || "#10b981"};
+      --ota-gradient-to: ${theme?.gradientTo || "#059669"};
+      --ota-text: ${theme?.textColor || "#ffffff"};
+      --ota-text-muted: rgba(255, 255, 255, 0.7);
+      --ota-overlay-bg: linear-gradient(to bottom, var(--ota-gradient-from), var(--ota-gradient-to));
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 9999;
+      background: var(--ota-overlay-bg);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+      color: var(--ota-text);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      animation: fadeIn 0.3s ease;
+    }
+
+    .overlay.hidden {
+      display: none;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    .safe-area-top {
+      padding-top: env(safe-area-inset-top);
+    }
+
+    .safe-area-bottom {
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      width: 100%;
+      max-width: 320px;
+    }
+
+    .icon {
+      width: 96px;
+      height: 96px;
+      background: white;
+      border-radius: 22px;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 2rem;
+    }
+
+    .icon svg {
+      width: 56px;
+      height: 56px;
+      color: var(--ota-primary);
+    }
+
+    h1 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+    }
+
+    .version {
+      color: var(--ota-text-muted);
+      margin-bottom: 2rem;
+    }
+
+    .content {
+      width: 100%;
+    }
+
+    /* Progress Circle */
+    .progress-container {
+      position: relative;
+      width: 128px;
+      height: 128px;
+      margin: 0 auto 1.5rem;
+    }
+
+    .progress-svg {
+      width: 100%;
+      height: 100%;
+      transform: rotate(-90deg);
+    }
+
+    .progress-bg {
+      fill: none;
+      stroke: rgba(255, 255, 255, 0.2);
+      stroke-width: 8;
+    }
+
+    .progress-bar {
+      fill: none;
+      stroke: white;
+      stroke-width: 8;
+      stroke-linecap: round;
+      transition: stroke-dashoffset 0.3s ease;
+    }
+
+    .progress-text {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.875rem;
+      font-weight: 700;
+    }
+
+    .status-text {
+      color: var(--ota-text-muted);
+    }
+
+    /* Ready State */
+    .check-icon {
+      width: 64px;
+      height: 64px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 1.5rem;
+    }
+
+    .check-icon svg {
+      width: 32px;
+      height: 32px;
+    }
+
+    .apply-btn {
+      width: 100%;
+      padding: 1rem;
+      background: white;
+      color: var(--ota-primary);
+      font-size: 1rem;
+      font-weight: 600;
+      border: none;
+      border-radius: 1rem;
+      cursor: pointer;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+      transition: transform 0.15s ease;
+    }
+
+    .apply-btn:active {
+      transform: scale(0.95);
+    }
+
+    /* Applying State */
+    .spinner {
+      width: 32px;
+      height: 32px;
+      border: 3px solid rgba(255, 255, 255, 0.3);
+      border-top-color: white;
+      border-radius: 50%;
+      margin: 0 auto 1rem;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Error State */
+    .error-icon {
+      width: 64px;
+      height: 64px;
+      background: rgba(239, 68, 68, 0.2);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 1.5rem;
+    }
+
+    .error-icon svg {
+      width: 32px;
+      height: 32px;
+    }
+
+    .error-title {
+      color: #fecaca;
+      margin-bottom: 0.5rem;
+    }
+
+    .error-message {
+      color: var(--ota-text-muted);
+      font-size: 0.875rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .retry-btn {
+      width: 100%;
+      padding: 1rem;
+      background: rgba(255, 255, 255, 0.2);
+      color: white;
+      font-size: 1rem;
+      font-weight: 600;
+      border: none;
+      border-radius: 1rem;
+      cursor: pointer;
+      transition: transform 0.15s ease;
+    }
+
+    .retry-btn:active {
+      transform: scale(0.95);
+    }
+  `;
+}
+
+//#endregion
+//#region src/OtaUpdateElement.ts
+const DEFAULT_TEXTS = {
+	title: "Güncelleme Mevcut",
+	downloading: "İndiriliyor...",
+	downloadComplete: "İndirme tamamlandı!",
+	applyButton: "Şimdi Güncelle",
+	applying: "Güncelleme uygulanıyor...",
+	errorTitle: "Güncelleme başarısız",
+	retryButton: "Tekrar Dene"
+};
+var OtaUpdateElement = class extends HTMLElement {
+	shadow;
+	texts;
+	theme;
+	visible = false;
+	constructor() {
+		super();
+		this.shadow = this.attachShadow({ mode: "open" });
+		this.texts = { ...DEFAULT_TEXTS };
+	}
+	setTexts(texts) {
+		this.texts = {
+			...DEFAULT_TEXTS,
+			...texts
+		};
+		this.render();
+	}
+	setTheme(theme) {
+		this.theme = theme;
+		this.render();
+	}
+	show() {
+		this.visible = true;
+		this.render();
+	}
+	hide() {
+		this.visible = false;
+		this.render();
+	}
+	connectedCallback() {
+		const ota = getOtaUpdater();
+		if (ota) ota.on("stateChange", () => this.render());
+		this.render();
+	}
+	getProgressOffset(progress) {
+		const circumference = 2 * Math.PI * 45;
+		return circumference - circumference * progress / 100;
+	}
+	render() {
+		const state = getOtaUpdater()?.state || {
+			status: "idle",
+			progress: 0,
+			currentVersion: "",
+			newVersion: null,
+			error: null
+		};
+		const circumference = 2 * Math.PI * 45;
+		this.shadow.innerHTML = `
+      <style>${getStyles(this.theme)}</style>
+      <div class="overlay ${this.visible ? "" : "hidden"}">
+        <div class="safe-area-top"></div>
+        <div class="container">
+          <!-- App Icon -->
+          <div class="icon">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+            </svg>
+          </div>
+
+          <!-- Title -->
+          <h1>${this.texts.title}</h1>
+
+          <!-- Version -->
+          <p class="version">v${state.currentVersion} → v${state.newVersion || "..."}</p>
+
+          <!-- Content -->
+          <div class="content">
+            ${this.renderContent(state, circumference)}
+          </div>
+        </div>
+        <div class="safe-area-bottom"></div>
+      </div>
+    `;
+		this.attachEventListeners();
+	}
+	renderContent(state, circumference) {
+		switch (state.status) {
+			case "downloading": return `
+          <div class="progress-container">
+            <svg class="progress-svg" viewBox="0 0 100 100">
+              <circle class="progress-bg" cx="50" cy="50" r="45" />
+              <circle
+                class="progress-bar"
+                cx="50" cy="50" r="45"
+                stroke-dasharray="${circumference}"
+                stroke-dashoffset="${this.getProgressOffset(state.progress)}"
+              />
+            </svg>
+            <div class="progress-text">${state.progress}%</div>
+          </div>
+          <p class="status-text">${this.texts.downloading}</p>
+        `;
+			case "ready": return `
+          <div class="check-icon">
+            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <p class="status-text" style="margin-bottom: 1.5rem;">${this.texts.downloadComplete}</p>
+          <button class="apply-btn" data-action="apply">${this.texts.applyButton}</button>
+        `;
+			case "applying": return `
+          <div class="spinner"></div>
+          <p class="status-text">${this.texts.applying}</p>
+        `;
+			case "error": return `
+          <div class="error-icon">
+            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </div>
+          <p class="error-title">${this.texts.errorTitle}</p>
+          <p class="error-message">${state.error || ""}</p>
+          <button class="retry-btn" data-action="retry">${this.texts.retryButton}</button>
+        `;
+			default: return "";
+		}
+	}
+	attachEventListeners() {
+		const ota = getOtaUpdater();
+		if (!ota) return;
+		const applyBtn = this.shadow.querySelector("[data-action=\"apply\"]");
+		const retryBtn = this.shadow.querySelector("[data-action=\"retry\"]");
+		applyBtn?.addEventListener("click", () => {
+			ota.apply();
+		});
+		retryBtn?.addEventListener("click", async () => {
+			if (!await ota.download()) this.render();
+		});
+	}
+};
+function registerOtaUpdateElement() {
+	if (!customElements.get("ota-update")) customElements.define("ota-update", OtaUpdateElement);
+}
+
+//#endregion
+//#region src/index.ts
+async function initOtaUpdate(config) {
+	const ota = createOtaUpdater(config);
+	if (config.showUI !== false) {
+		registerOtaUpdateElement();
+		const element = document.createElement("ota-update");
+		element.setTheme(config.theme);
+		element.setTexts(config.texts);
+		document.body.appendChild(element);
+		await ota.notifyAppReady();
+		if (await ota.check()) {
+			element.show();
+			if (await ota.download() && config.autoApply) await ota.apply();
+		}
+	} else await ota.notifyAppReady();
+	return ota;
+}
+
+//#endregion
+export { OtaUpdateElement, OtaUpdater, getOtaUpdater, initOtaUpdate };

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "capacitor-ota",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown src/index.ts --format esm --dts",
+    "dev": "tsdown src/index.ts --format esm --dts --watch",
+    "panel:dev": "vite dev --host",
+    "panel:build": "vite build",
+    "panel:preview": "vite preview",
+    "db:migrate": "wrangler d1 migrations apply ota-db --local",
+    "db:migrate:remote": "wrangler d1 migrations apply ota-db --remote",
+    "cli": "tsx cli/ota.ts"
+  },
+  "peerDependencies": {
+    "@capgo/capacitor-updater": ">=6.0.0",
+    "@capacitor/core": ">=8.0.0"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20260123.0",
+    "@tailwindcss/vite": "^4.1.18",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "nitro": "3.0.1-alpha.2",
+    "pinia": "^3.0.4",
+    "tailwindcss": "^4.1.18",
+    "tsdown": "^0.20.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "vite": "8.0.0-beta.8",
+    "vue": "^3.5.27",
+    "vue-router": "^4.6.4",
+    "wrangler": "^4.60.0"
+  }
+}