@swoff/cli 0.4.3 → 0.4.5

package/templates/react/{useOfflineAnalytics.tsx → useSwoffAnalytics.tsx}

@@ -10,7 +10,7 @@ export interface OfflineFallbackEvent {
  * Tracks offline navigation fallback events dispatched by the Service Worker.
  *
  * Usage:
- *   const { lastEvent, events } = useOfflineAnalytics();
+ *   const { lastEvent, events } = useSwoffAnalytics();
  *
  *   // Render an offline indicator when a fallback was served:
  *   if (lastEvent) {
@@ -18,11 +18,11 @@ export interface OfflineFallbackEvent {
  *   }
  *
  *   // Or pass a callback:
- *   useOfflineAnalytics((event) => console.log("Fallback:", event));
+ *   useSwoffAnalytics((event) => console.log("Fallback:", event));
  *
  * @returns {{ lastEvent: OfflineFallbackEvent | null, events: OfflineFallbackEvent[], clear: () => void }}
  */
-export function useOfflineAnalytics(callback?: (event: OfflineFallbackEvent) => void) {
+export function useSwoffAnalytics(callback?: (event: OfflineFallbackEvent) => void) {
   const [events, setEvents] = useState<OfflineFallbackEvent[]>([]);
   const [lastEvent, setLastEvent] = useState<OfflineFallbackEvent | null>(null);
 

package/templates/react/{useAuth.jsx → useSwoffAuth.jsx}

@@ -6,7 +6,7 @@ import { setAuth, clearAuth, ensureValidAuth } from "../auth/store.js";
  * Reactive auth state with actions: setAuth, clearAuth, ensureValid.
  *
  * Usage:
- *   const { authenticated, auth, online, isLoading, error, setAuth, clearAuth, ensureValid } = useAuth();
+ *   const { authenticated, auth, online, isLoading, error, setAuth, clearAuth, ensureValid } = useSwoffAuth();
  *
  *   // Login — call setAuth with the response from your login endpoint:
  *   const res = await fetch("/api/login", { method: "POST", body });
@@ -22,7 +22,7 @@ import { setAuth, clearAuth, ensureValidAuth } from "../auth/store.js";
  *   // Silent session restore:
  *   const authData = await ensureValid();
  */
-export function useAuth() {
+export function useSwoffAuth() {
   const [state, setState] = useState(() => ({
     authenticated: false,
     auth: null,

package/templates/react/{useAuth.tsx → useSwoffAuth.tsx}

@@ -10,7 +10,7 @@ import type { AuthData } from "../auth/adapter.ts";
  * setAuth(), or the SW's AUTH_CLEARED broadcast).
  *
  * Usage:
- *   const { authenticated, auth, online, isLoading, error, setAuth, clearAuth, ensureValid } = useAuth();
+ *   const { authenticated, auth, online, isLoading, error, setAuth, clearAuth, ensureValid } = useSwoffAuth();
  *
  *   // Login:
  *   const res = await fetch("/api/login", { method: "POST", body });
@@ -28,7 +28,7 @@ import type { AuthData } from "../auth/adapter.ts";
  *
  * @returns {{ authenticated, auth, online, isLoading, error, setAuth, clearAuth, ensureValid }}
  */
-export function useAuth() {
+export function useSwoffAuth() {
   const [state, setState] = useState(() => ({
     authenticated: false,
     auth: null as AuthData | null,

package/templates/react/{useCachedFetch.jsx → useSwoffFetch.jsx}

@@ -6,27 +6,27 @@ import { generateTags } from "../cache/tags.js";
  * Fetch and cache data with automatic invalidation, revalidation, and offline support.
  *
  * Usage:
- *   const { data, error, loading, refetch } = useCachedFetch("/api/todos");
+ *   const { data, error, loading, refetch } = useSwoffFetch("/api/todos");
  *
  *   // Select/transform data
- *   const { data: names } = useCachedFetch("/api/users", {
+ *   const { data: names } = useSwoffFetch("/api/users", {
  *     select: (users) => users.map(u => u.name),
  *   });
  *
  *   // Keep previous data while fetching next page
- *   const { data } = useCachedFetch(`/api/items?page=${page}`, {
+ *   const { data } = useSwoffFetch(`/api/items?page=${page}`, {
  *     keepPreviousData: true,
  *   });
  *
  *   // Retry on failure
- *   const { data } = useCachedFetch("/api/todos", { retry: 3 });
+ *   const { data } = useSwoffFetch("/api/todos", { retry: 3 });
  *
  *   // Placeholder data while loading
- *   const { data } = useCachedFetch("/api/todos", {
+ *   const { data } = useSwoffFetch("/api/todos", {
  *     placeholderData: { items: [] },
  *   });
  */
-export function useCachedFetch(url, options = {}) {
+export function useSwoffFetch(url, options = {}) {
   const {
     select,
     retry: retryOpt,

package/templates/react/{useCachedFetch.tsx → useSwoffFetch.tsx}

@@ -7,35 +7,35 @@ import type { FetchWithCacheOptions } from "../fetch/core.ts";
  * Fetch and cache data with automatic invalidation, revalidation, and offline support.
  *
  * Usage:
- *   const { data, error, loading, refetch } = useCachedFetch<MyType>("/api/todos");
+ *   const { data, error, loading, refetch } = useSwoffFetch<MyType>("/api/todos");
  *
  *   // Select/transform data — skips re-render if selected value hasn't changed
- *   const { data: names } = useCachedFetch("/api/users", {
+ *   const { data: names } = useSwoffFetch("/api/users", {
  *     select: (users) => users.map(u => u.name),
  *   });
  *
  *   // Keep previous data while fetching the next page
- *   const { data } = useCachedFetch(`/api/items?page=${page}`, {
+ *   const { data } = useSwoffFetch(`/api/items?page=${page}`, {
  *     keepPreviousData: true,
  *   });
  *
  *   // Retry on failure (default 0 retries)
- *   const { data } = useCachedFetch("/api/todos", { retry: 3 });
+ *   const { data } = useSwoffFetch("/api/todos", { retry: 3 });
  *
  *   // Placeholder data while loading for the first time
- *   const { data } = useCachedFetch("/api/todos", {
+ *   const { data } = useSwoffFetch("/api/todos", {
  *     placeholderData: { items: [] },
  *   });
  *
  *   // Callbacks on success/error
- *   const { data, refetch } = useCachedFetch("/api/todos", {
+ *   const { data, refetch } = useSwoffFetch("/api/todos", {
  *     onSuccess: (data) => console.log("Loaded", data),
  *   });
  *
  * @param url - URL to fetch. Pass null to skip fetching.
  * @param options - Fetch options plus: select, keepPreviousData, retry, placeholderData, onSuccess, onError
  */
-export function useCachedFetch<T = unknown, R = T>(
+export function useSwoffFetch<T = unknown, R = T>(
   url: string | null,
   options: FetchWithCacheOptions & {
     enabled?: boolean;

package/templates/react/{useMutation.jsx → useSwoffMutation.jsx}

@@ -11,7 +11,7 @@ import {
  * optimistic updates, and dual-level callbacks.
  *
  * Usage:
- *   const { mutate, isLoading, error, data } = useMutation("/api/todos", {
+ *   const { mutate, isLoading, error, data } = useSwoffMutation("/api/todos", {
  *     method: "POST",
  *     onSuccess: (data) => navigate(`/item/${data.id}`),
  *   });
@@ -23,7 +23,7 @@ import {
  *   });
  *
  *   // Optimistic update with rollback:
- *   const { mutate } = useMutation("/api/todos", {
+ *   const { mutate } = useSwoffMutation("/api/todos", {
  *     method: "POST",
  *     onMutate: () => { /* set optimistic state *\\/ },
  *     onError: () => { /* rollback *\\/ },
@@ -35,7 +35,7 @@ import {
  *   if (result.status === "queued") navigate("/items");
  *   if (result.status === "error") setError(result.error.message);
  */
-export function useMutation(url, options = {}) {
+export function useSwoffMutation(url, options = {}) {
   const [lastResult, setLastResult] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [mutationId, setMutationId] = useState(null);

package/templates/react/{useMutation.tsx → useSwoffMutation.tsx}

@@ -36,7 +36,7 @@ export type MutateResult<T> =
  * optimistic updates, and dual-level callbacks.
  *
  * Usage:
- *   const { mutate, isLoading, error, data } = useMutation<CreateTodoResponse>(
+ *   const { mutate, isLoading, error, data } = useSwoffMutation<CreateTodoResponse>(
  *     "/api/todos",
  *     { method: "POST", onSuccess: (data) => navigate(`/item/${data.id}`) },
  *   );
@@ -48,7 +48,7 @@ export type MutateResult<T> =
  *   });
  *
  *   // Optimistic update with rollback:
- *   const { mutate } = useMutation("/api/todos", {
+ *   const { mutate } = useSwoffMutation("/api/todos", {
  *     method: "POST",
  *     onMutate: () => { /* set optimistic state *\\/ },
  *     onError: () => { /* rollback *\\/ },
@@ -60,7 +60,7 @@ export type MutateResult<T> =
  *   if (result.status === "queued") navigate("/items");
  *   if (result.status === "error") setError(result.error.message);
  */
-export function useMutation<TData = unknown>(
+export function useSwoffMutation<TData = unknown>(
   url: string,
   options: UseMutationOptions<TData> = {},
 ) {

package/templates/react/{useMutationState.jsx → useSwoffMutationState.jsx}

@@ -5,7 +5,7 @@ function subscribeToMutations(cb) {
   return onMutationStateChange(() => cb());
 }
 
-export function useMutationState(id) {
+export function useSwoffMutationState(id) {
   return useSyncExternalStore(subscribeToMutations, () =>
     id ? (getMutationState(id) ?? null) : null,
   );

package/templates/react/{useMutationState.tsx → useSwoffMutationState.tsx}

@@ -11,10 +11,10 @@ function subscribeToMutations(cb: () => void) {
  * Useful for showing per-mutation loading spinners, error states, etc.
  *
  * Usage:
- *   const mutation = useMutationState(mutationId);
+ *   const mutation = useSwoffMutationState(mutationId);
  *   if (mutation?.status === "error") { ... }
  */
-export function useMutationState(id: string | null): MutationState | null {
+export function useSwoffMutationState(id: string | null): MutationState | null {
   return useSyncExternalStore(subscribeToMutations, () =>
     id ? (getMutationState(id) ?? null) : null,
   );

package/templates/react/{useNetworkStatus.jsx → useSwoffNetwork.jsx}

@@ -9,7 +9,7 @@ import {
  * Reactive network information: online status, connection type, and bandwidth.
  *
  * Usage:
- *   const { online, wasOffline, lastChangedAt, effectiveType, downlink } = useNetworkStatus();
+ *   const { online, wasOffline, lastChangedAt, effectiveType, downlink } = useSwoffNetwork();
  *
  *   // Show offline indicator:
  *   if (!online) return <OfflineBanner />;
@@ -17,7 +17,7 @@ import {
  *   // Warn on slow connection:
  *   if (online && effectiveType === "2g") return <SlowConnectionWarning />;
  */
-export function useNetworkStatus() {
+export function useSwoffNetwork() {
   const wasOfflineRef = useRef(false);
   const [isRetrying, setIsRetrying] = useState(false);
 

package/templates/react/{useNetworkStatus.tsx → useSwoffNetwork.tsx}

@@ -9,7 +9,7 @@ import {
  * Reactive network information: online status, connection type, and bandwidth.
  *
  * Usage:
- *   const { online, wasOffline, lastChangedAt, effectiveType, downlink } = useNetworkStatus();
+ *   const { online, wasOffline, lastChangedAt, effectiveType, downlink } = useSwoffNetwork();
  *
  *   // Show offline indicator:
  *   if (!online) return <OfflineBanner />;
@@ -19,7 +19,7 @@ import {
  *
  * @returns {{ online: boolean, wasOffline: boolean, lastChangedAt: number | null, effectiveType: string | null, downlink: number | null, isRetrying: boolean, retry: () => Promise<void> }}
  */
-export function useNetworkStatus() {
+export function useSwoffNetwork() {
   const wasOfflineRef = useRef(false);
   const [isRetrying, setIsRetrying] = useState(false);
 

package/templates/react/{usePrecacheProgress.jsx → useSwoffPrecache.jsx}

@@ -1,14 +1,11 @@
 import { useState, useEffect } from "react";
 
-export function usePrecacheProgress() {
-  const [state, setState] = useState(() => ({
-    status: "idle",
-    progress: 0,
-  }));
+export function useSwoffPrecache() {
+  const [progress, setProgress] = useState(0);
 
   useEffect(() => {
     const onProgress = (e) =>
-      setState({ status: "installing", progress: e.detail.percent });
+      setProgress(e.detail.percent);
 
     window.addEventListener("sw-progress", onProgress);
     return () => {
@@ -16,5 +13,5 @@ export function usePrecacheProgress() {
     };
   }, []);
 
-  return state;
+  return { progress };
 }

package/templates/react/{usePrecacheProgress.tsx → useSwoffPrecache.tsx}

@@ -1,14 +1,11 @@
 import { useState, useEffect } from "react";
 
-export function usePrecacheProgress() {
-  const [state, setState] = useState(() => ({
-    status: "idle" as "idle" | "installing",
-    progress: 0,
-  }));
+export function useSwoffPrecache() {
+  const [progress, setProgress] = useState(0);
 
   useEffect(() => {
     const onProgress = (e: WindowEventMap["sw-progress"]) =>
-      setState({ status: "installing", progress: e.detail.percent });
+      setProgress(e.detail.percent);
 
     window.addEventListener("sw-progress", onProgress);
     return () => {
@@ -16,5 +13,5 @@ export function usePrecacheProgress() {
     };
   }, []);
 
-  return state;
+  return { progress };
 }

package/templates/react/{usePrefetch.jsx → useSwoffPrefetch.jsx}

@@ -5,7 +5,7 @@ import { prefetchCache } from "../fetch/core.js";
  * Hook that returns a stable prefetch callback, observable prefetch list, and clear function.
  *
  * Usage:
- *   const { prefetch, prefetchList, clear } = usePrefetch();
+ *   const { prefetch, prefetchList, clear } = useSwoffPrefetch();
  *
  *   // Prefetch when user hovers a link:
  *   <Link onMouseEnter={() => prefetch("/api/todos")} to="/todos" />
@@ -16,7 +16,7 @@ import { prefetchCache } from "../fetch/core.js";
  *   // Clear prefetched data:
  *   <button onClick={clear}>Clear prefetch</button>
  */
-export function usePrefetch() {
+export function useSwoffPrefetch() {
   const [prefetchList, setPrefetchList] = useState([]);
 
   const prefetch = useCallback((url, options) => {

package/templates/react/{usePrefetch.tsx → useSwoffPrefetch.tsx}

@@ -6,7 +6,7 @@ import type { FetchWithCacheOptions } from "../fetch/core.ts";
  * Hook that returns a stable prefetch callback, observable prefetch list, and clear function.
  *
  * Usage:
- *   const { prefetch, prefetchList, clear } = usePrefetch();
+ *   const { prefetch, prefetchList, clear } = useSwoffPrefetch();
  *
  *   // Prefetch when user hovers a link:
  *   <Link onMouseEnter={() => prefetch("/api/todos")} to="/todos" />
@@ -19,7 +19,7 @@ import type { FetchWithCacheOptions } from "../fetch/core.ts";
  *
  * @returns {{ prefetch: (url: string, options?: FetchWithCacheOptions) => void, prefetchList: string[], clear: () => void }}
  */
-export function usePrefetch(): {
+export function useSwoffPrefetch(): {
   prefetch: (url: string, options?: FetchWithCacheOptions) => void;
   prefetchList: string[];
   clear: () => void;

package/templates/react/{usePushSubscription.jsx → useSwoffPush.jsx}

@@ -6,7 +6,7 @@ import {
   getPushSubscription,
 } from "../realtime/notifications.js";
 
-export function usePushSubscription() {
+export function useSwoffPush() {
   const [state, setState] = useState(() => ({
     subscribed: false,
     subscription: null,

package/templates/react/{usePushSubscription.tsx → useSwoffPush.tsx}

@@ -6,7 +6,7 @@ import {
   getPushSubscription,
 } from "../realtime/notifications.ts";
 
-export function usePushSubscription() {
+export function useSwoffPush() {
   const [state, setState] = useState(() => ({
     subscribed: false,
     subscription: null as PushSubscription | null,

package/templates/react/{usePwaInstall.jsx → useSwoffPwa.jsx}

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { isInstallable, promptInstall } from "../pwa/prompt.js";
 
-export function usePwaInstall() {
+export function useSwoffPwa() {
   const [canInstall, setCanInstall] = useState(false);
 
   useEffect(() => {

package/templates/react/{usePwaInstall.tsx → useSwoffPwa.tsx}

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { isInstallable, promptInstall } from "../pwa/prompt.ts";
 
-export function usePwaInstall() {
+export function useSwoffPwa() {
   const [canInstall, setCanInstall] = useState(false);
 
   useEffect(() => {

package/templates/react/{useMutationQueue.jsx → useSwoffQueue.jsx}

@@ -9,7 +9,7 @@ import {
  * Reactive mutation queue state: pending count, items, last sync info, and processing flag.
  *
  * Usage:
- *   const { pending, items, lastSync, isProcessing, retryAll } = useMutationQueue();
+ *   const { pending, items, lastSync, isProcessing, retryAll } = useSwoffQueue();
  *
  *   // Show pending badge:
  *   {pending > 0 && <Badge>{pending}</Badge>}
@@ -19,7 +19,7 @@ import {
  *     {isProcessing ? "Syncing..." : "Retry All"}
  *   </button>
  */
-export function useMutationQueue() {
+export function useSwoffQueue() {
   const [state, setState] = useState({
     pending: 0,
     items: [],

package/templates/react/{useMutationQueue.tsx → useSwoffQueue.tsx}

@@ -17,7 +17,7 @@ export interface MutationQueueState {
  * Reactive mutation queue state: pending count, items, last sync info, and processing flag.
  *
  * Usage:
- *   const { pending, items, lastSync, isProcessing, retryAll } = useMutationQueue();
+ *   const { pending, items, lastSync, isProcessing, retryAll } = useSwoffQueue();
  *
  *   // Show pending badge:
  *   {pending > 0 && <Badge>{pending}</Badge>}
@@ -29,7 +29,7 @@ export interface MutationQueueState {
  *
  * @returns {{ pending, items, lastSync, isProcessing, retryAll }}
  */
-export function useMutationQueue(): MutationQueueState & {
+export function useSwoffQueue(): MutationQueueState & {
   retryAll: () => Promise<void>;
 } {
   const [state, setState] = useState<MutationQueueState>({

package/templates/react/{useStorageEstimate.jsx → useSwoffStorage.jsx}

@@ -5,13 +5,13 @@ import { getStorageEstimate, formatBytes } from "../storage";
  * Reactive storage estimate. Shows available quota and usage.
  *
  * Usage:
- *   const { usage, quota, percentUsed, formattedUsage, formattedQuota, loading } = useStorageEstimate();
+ *   const { usage, quota, percentUsed, formattedUsage, formattedQuota, loading } = useSwoffStorage();
  *
  *   if (!loading && percentUsed > 80) return <StorageWarning />;
  *
  * @param autoRefresh - Re-check on visibility change (default true)
  */
-export function useStorageEstimate(autoRefresh = true) {
+export function useSwoffStorage(autoRefresh = true) {
   const [state, setState] = useState({
     usage: 0,
     quota: 0,

package/templates/react/{useStorageEstimate.tsx → useSwoffStorage.tsx}

@@ -15,14 +15,14 @@ interface StorageEstimateState {
  * Reactive storage estimate. Shows available quota and usage.
  *
  * Usage:
- *   const { usage, quota, percentUsed, formattedUsage, formattedQuota, loading } = useStorageEstimate();
+ *   const { usage, quota, percentUsed, formattedUsage, formattedQuota, loading } = useSwoffStorage();
  *
  *   if (!loading && percentUsed > 80) return <StorageWarning />;
  *
  * @param autoRefresh - Re-check on visibility change (default true)
  * @returns {{ usage: number, quota: number, percentUsed: number, formattedUsage: string, formattedQuota: string, loading: boolean, error: string | null }}
  */
-export function useStorageEstimate(autoRefresh = true): StorageEstimateState {
+export function useSwoffStorage(autoRefresh = true): StorageEstimateState {
   const [state, setState] = useState<StorageEstimateState>({
     usage: 0,
     quota: 0,

package/templates/react/{useBackgroundSync.jsx → useSwoffSync.jsx}

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { retrySync } from "../mutation/sync.js";
 
-export function useBackgroundSync() {
+export function useSwoffSync() {
   const [state, setState] = useState(() => ({
     supported:
       typeof window !== "undefined" && typeof navigator !== "undefined"

package/templates/react/{useBackgroundSync.tsx → useSwoffSync.tsx}

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { retrySync } from "../mutation/sync.ts";
 
-export function useBackgroundSync() {
+export function useSwoffSync() {
   const [state, setState] = useState(() => ({
     supported:
       typeof window !== "undefined" && typeof navigator !== "undefined"

package/templates/svelte/useSwoffAnalytics.js

@@ -0,0 +1,31 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+
+export function useSwoffAnalytics(callback) {
+  const events = writable([]);
+  const lastEvent = writable(null);
+
+  function handler(e) {
+    if (e.data?.type === "OFFLINE_FALLBACK_ACTIVATED" && e.data?.detail) {
+      const detail = e.data.detail;
+      events.update((prev) => [...prev, detail]);
+      lastEvent.set(detail);
+      callback?.(detail);
+    }
+  }
+
+  onMount(() => {
+    if (typeof navigator === "undefined" || !navigator.serviceWorker) return;
+    navigator.serviceWorker.addEventListener("message", handler);
+    return () => {
+      navigator.serviceWorker.removeEventListener("message", handler);
+    };
+  });
+
+  function clear() {
+    events.set([]);
+    lastEvent.set(null);
+  }
+
+  return { lastEvent, events, clear };
+}

package/templates/svelte/useSwoffAnalytics.ts

@@ -0,0 +1,37 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+
+export interface OfflineFallbackEvent {
+  route: string;
+  fallbackLevel: "route-fallback" | "offline-page" | "spa-shell" | "inline-503";
+  timestamp: number;
+}
+
+export function useSwoffAnalytics(callback?: (event: OfflineFallbackEvent) => void) {
+  const events = writable<OfflineFallbackEvent[]>([]);
+  const lastEvent = writable<OfflineFallbackEvent | null>(null);
+
+  function handler(e: MessageEvent) {
+    if (e.data?.type === "OFFLINE_FALLBACK_ACTIVATED" && e.data?.detail) {
+      const detail = e.data.detail as OfflineFallbackEvent;
+      events.update((prev) => [...prev, detail]);
+      lastEvent.set(detail);
+      callback?.(detail);
+    }
+  }
+
+  onMount(() => {
+    if (typeof navigator === "undefined" || !navigator.serviceWorker) return;
+    navigator.serviceWorker.addEventListener("message", handler);
+    return () => {
+      navigator.serviceWorker.removeEventListener("message", handler);
+    };
+  });
+
+  function clear() {
+    events.set([]);
+    lastEvent.set(null);
+  }
+
+  return { lastEvent, events, clear };
+}

package/templates/svelte/useSwoffAuth.js

@@ -0,0 +1,95 @@
+import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { getAuthState } from "../auth/state.js";
+import { setAuth, clearAuth, ensureValidAuth } from "../auth/store.js";
+
+export function useSwoffAuth() {
+  const authenticated = writable(false);
+  const auth = writable(null);
+  const online = writable(
+    typeof navigator !== "undefined" ? navigator.onLine : true,
+  );
+  const isLoading = writable(false);
+  const error = writable(null);
+
+  async function refreshState() {
+    try {
+      const authState = await getAuthState();
+      authenticated.set(authState.authenticated);
+      auth.set(authState.auth);
+      error.set(null);
+    } catch {
+      // ignore — auth not initialized
+    }
+  }
+
+  onMount(() => {
+    refreshState();
+
+    function onOnline() { online.set(true); }
+    function onOffline() { online.set(false); }
+    function onAuthChange() { refreshState(); }
+
+    window.addEventListener("online", onOnline);
+    window.addEventListener("offline", onOffline);
+    window.addEventListener("sw-auth-state-change", onAuthChange);
+
+    return () => {
+      window.removeEventListener("online", onOnline);
+      window.removeEventListener("offline", onOffline);
+      window.removeEventListener("sw-auth-state-change", onAuthChange);
+    };
+  });
+
+  async function doSetAuth(authData) {
+    isLoading.set(true);
+    error.set(null);
+    try {
+      await setAuth(authData);
+      await refreshState();
+    } catch (err) {
+      error.set(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      isLoading.set(false);
+    }
+  }
+
+  async function doClearAuth() {
+    isLoading.set(true);
+    error.set(null);
+    try {
+      await clearAuth();
+      await refreshState();
+    } catch (err) {
+      error.set(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      isLoading.set(false);
+    }
+  }
+
+  async function doEnsureValid() {
+    isLoading.set(true);
+    error.set(null);
+    try {
+      const result = await ensureValidAuth();
+      await refreshState();
+      return result;
+    } catch (err) {
+      error.set(err instanceof Error ? err : new Error(String(err)));
+      return null;
+    } finally {
+      isLoading.set(false);
+    }
+  }
+
+  return {
+    authenticated,
+    auth,
+    online,
+    isLoading,
+    error,
+    setAuth: doSetAuth,
+    clearAuth: doClearAuth,
+    ensureValid: doEnsureValid,
+  };
+}