@axium/client 0.36.7 → 0.37.0

package/dist/web/hooks.d.ts

@@ -0,0 +1,21 @@
+export declare function init(): Promise<void>;
+interface SK_ErrorData {
+    error: Error & {
+        status?: number;
+    };
+    event: {
+        params: Record<string, unknown>;
+        route: {
+            id: string;
+        };
+        url: URL;
+    };
+    status: number;
+    message: string;
+}
+export declare function handleError({ error, status }: SK_ErrorData): {
+    message: string;
+    stack: string | undefined;
+    status: number;
+};
+export {};

package/dist/web/hooks.js

@@ -0,0 +1,33 @@
+import feature from '@axium/core/features';
+import { errorText } from 'ioium';
+import { themeStyles } from '../themes.js';
+import { extendCurrentSession, getCurrentSession } from '../user.js';
+import { loadFeatures } from './features.js';
+import { loadLocale } from './locales.js';
+import * as pwa from './pwa.js';
+const day = 86400_000;
+export async function init() {
+    await loadLocale().catch(() => { });
+    const session = await getCurrentSession().catch(() => null);
+    await loadFeatures(session?.userId).catch(() => { });
+    if (session && session.expires.getTime() < Date.now() + day)
+        try {
+            await extendCurrentSession(session.userId);
+        }
+        catch {
+            console.debug('Failed to extend current session');
+        }
+    if (feature('pwa'))
+        void pwa.register().catch(e => console.debug('Failed to register service worker:', errorText(e)));
+    else
+        void pwa.unregister().catch(() => { });
+    if (feature('themes')) {
+        const theme = themeStyles[session?.user?.preferences?.theme || 'default'] || {};
+        for (const [prop, value] of Object.entries(theme))
+            document.documentElement.style.setProperty('--' + prop, value);
+    }
+}
+export function handleError({ error, status }) {
+    console.error(error);
+    return { message: errorText(error), stack: error.stack, status: error.status || status };
+}

package/dist/{gui → web}/index.d.ts

@@ -1,4 +1,8 @@
 export * from './animate.js';
 export * from './clipboard.js';
 export * as controls from './controls.js';
+export * from './features.js';
+export * from './locales.js';
 export * from './mobile.js';
+export * as pwa from './pwa.js';
+export * from './utils.js';

package/dist/{gui → web}/index.js

@@ -1,4 +1,8 @@
 export * from './animate.js';
 export * from './clipboard.js';
 export * as controls from './controls.js';
+export * from './features.js';
+export * from './locales.js';
 export * from './mobile.js';
+export * as pwa from './pwa.js';
+export * from './utils.js';

package/dist/web/locales.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Fetch the translations the server has for a language and start using them.
+ * The server resolves the language, so for example asking for `en-US` may give you `en`.
+ * @returns the locale that is now in use
+ */
+export declare function loadLocale(language?: string): Promise<string>;

package/dist/web/locales.js

@@ -0,0 +1,21 @@
+import { extendLocale } from '@axium/core/locales';
+import { debug, warn } from 'ioium';
+import { currentLocale, useLocale } from '../locales.js';
+import { origin } from '../requests.js';
+/**
+ * Fetch the translations the server has for a language and start using them.
+ * The server resolves the language, so for example asking for `en-US` may give you `en`.
+ * @returns the locale that is now in use
+ */
+export async function loadLocale(language = globalThis.navigator?.language || currentLocale) {
+    const response = await fetch(new URL('/locales/' + encodeURIComponent(language), origin));
+    if (!response.ok) {
+        warn(`No translations for ${language}:`, response.headers.get('content-type') == 'application/json' ? (await response.json()).message : response.statusText);
+        return currentLocale;
+    }
+    const resolved = response.headers.get('Content-Language') || language;
+    extendLocale(resolved, await response.json());
+    useLocale(resolved);
+    debug('Using locale: ' + resolved);
+    return resolved;
+}

package/dist/web/pwa.d.ts

@@ -0,0 +1,44 @@
+export type InstallPhase = 'installing' | 'pending' | 'active' | 'failed' | 'none';
+/** A message sent from a page to the service worker. */
+export type PageMessage = {
+    type: 'activate';
+} | {
+    type: 'status';
+};
+export interface WorkerInstalled {
+    type: 'install';
+    version: string;
+    base: string;
+    error: string | null;
+}
+export interface WorkerUpdateActivated {
+    type: 'update';
+    version: string;
+    base: string;
+}
+export type WorkerMessage = WorkerInstalled | WorkerUpdateActivated;
+export interface Status {
+    /** Whether a worker is serving this page. False until the first registration activates. */
+    controlled: boolean;
+    /** A new build is downloading right now. */
+    downloading: boolean;
+    /** A new build has finished downloading and is waiting for {@link activate}. */
+    updateReady: boolean;
+    /** The last registration or precache failure. */
+    error: string | null;
+    readonly installPhase: InstallPhase;
+}
+export declare const supported: boolean;
+export declare const state: Status;
+export declare function subscribe(listener: (status: Status) => void): () => void;
+/** Register the service worker. Idempotent. */
+export declare function register(url?: string, options?: RegistrationOptions): Promise<ServiceWorkerRegistration | null>;
+/** Remove the worker and everything it cached. Used when the `pwa` feature is turned off. */
+export declare function unregister(): Promise<void>;
+export declare function update(): Promise<void>;
+/**
+ * Apply a downloaded update.
+ * Tell the waiting worker to take over then reload.
+ * Does nothing when no update is pending.
+ */
+export declare function activate(): void;

package/dist/web/pwa.js

@@ -0,0 +1,138 @@
+import { errorText, warn } from 'ioium';
+export const supported = typeof navigator != 'undefined' && 'serviceWorker' in navigator;
+export const state = {
+    controlled: supported && !!navigator.serviceWorker.controller,
+    downloading: false,
+    updateReady: false,
+    error: null,
+    get installPhase() {
+        if (state.downloading)
+            return 'installing';
+        if (state.updateReady)
+            return 'pending';
+        return state.controlled ? 'active' : 'none';
+    },
+};
+const listeners = new Set();
+export function subscribe(listener) {
+    listeners.add(listener);
+    listener(state);
+    return () => listeners.delete(listener);
+}
+function change(changes) {
+    Object.assign(state, changes);
+    for (const listener of listeners)
+        listener(state);
+}
+let registration = null;
+/** Set by {@link activate}, so only an update the user asked for reloads the page. */
+let needsReload = false;
+function track(worker) {
+    const check = () => {
+        switch (worker.state) {
+            case 'installing':
+                change({ downloading: true, updateReady: false });
+                break;
+            case 'installed':
+                change({ downloading: false, updateReady: !!navigator.serviceWorker.controller });
+                break;
+            case 'activated':
+                change({ downloading: false, updateReady: false, controlled: true });
+                break;
+            case 'redundant':
+                change({ downloading: false, updateReady: false });
+                break;
+        }
+    };
+    worker.addEventListener('statechange', check);
+    check();
+}
+function formatVersion(timestamp) {
+    if (!/^\d+$/.test(timestamp))
+        return timestamp;
+    const pretty = new Date(Number(timestamp)).toISOString().split('.')[0];
+    return `${pretty} (${timestamp})`;
+}
+/** Register the service worker. Idempotent. */
+export async function register(url = '/service-worker.js', options = {}) {
+    if (!supported)
+        return null;
+    console.debug('pwa: registering service worker');
+    navigator.serviceWorker.addEventListener('message', event => {
+        const message = event.data;
+        switch (message?.type) {
+            case 'install':
+                console.debug('pwa: installed', formatVersion(message.version));
+                change({ error: message.error ?? null });
+                break;
+            case 'update':
+                console.debug('pwa: updated service worker to', formatVersion(message.version));
+                break;
+            default:
+                warn('Unknown message from service worker:', message);
+        }
+    });
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+        change({ controlled: !!navigator.serviceWorker.controller, updateReady: false });
+        if (needsReload)
+            location.reload();
+    });
+    try {
+        registration = await navigator.serviceWorker.register(url, { ...options, type: 'module' });
+    }
+    catch (e) {
+        console.error(e);
+        change({ error: errorText(e) });
+        return null;
+    }
+    if (registration.installing)
+        track(registration.installing);
+    if (registration.waiting)
+        change({ updateReady: true });
+    registration.addEventListener('updatefound', () => {
+        console.debug('pwa: updating');
+        if (registration?.installing)
+            track(registration.installing);
+    });
+    try {
+        const cacheKeys = await caches.keys();
+        const timestamps = cacheKeys.filter(k => k.startsWith('axium@')).map(k => k.slice('axium@'.length));
+        console.debug('pwa: service worker version(s):', timestamps.map(formatVersion).join(', '));
+    }
+    catch (e) {
+        console.debug('pwa: could not get service worker versions,', errorText(e));
+    }
+    return registration;
+}
+/** Remove the worker and everything it cached. Used when the `pwa` feature is turned off. */
+export async function unregister() {
+    if (!supported)
+        return;
+    registration ??= await navigator.serviceWorker.getRegistration();
+    await registration?.unregister();
+    registration = null;
+    for (const key of await caches.keys()) {
+        if (key.startsWith('axium@'))
+            await caches.delete(key);
+    }
+    change({ controlled: false, downloading: false, updateReady: false });
+}
+export async function update() {
+    if (!navigator.onLine)
+        console.debug('pwa: can not check for updates while offline');
+    console.debug('pwa: checking for updates');
+    await registration?.update();
+}
+/**
+ * Apply a downloaded update.
+ * Tell the waiting worker to take over then reload.
+ * Does nothing when no update is pending.
+ */
+export function activate() {
+    const waiting = registration?.waiting;
+    if (!waiting)
+        return;
+    console.debug('pwa: activating service worker update');
+    needsReload = true;
+    waiting.postMessage({ type: 'activate' });
+}

package/dist/web/service-worker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/web/service-worker.js

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+import { base, build, files, version } from '$service-worker';
+const cacheName = 'axium@' + version;
+const versionFile = `${base}/_app/version.json`;
+const precache = new Set([...build, ...files]);
+async function install() {
+    let error = null;
+    try {
+        const cache = await caches.open(cacheName);
+        await Promise.all(Array.from(precache).map(url => cache.add(new Request(url, files.includes(url) ? { cache: 'no-cache' } : {}))));
+    }
+    catch (e) {
+        error = e instanceof Error ? e.message : String(e);
+        await caches.delete(cacheName);
+        throw e;
+    }
+    finally {
+        const clients = await globalThis.clients.matchAll({ includeUncontrolled: true, type: 'window' });
+        for (const client of clients)
+            client.postMessage({ type: 'install', version, base, error });
+    }
+}
+globalThis.addEventListener('install', event => event.waitUntil(install()));
+async function activate() {
+    await Promise.all((await caches.keys()).filter(key => key.startsWith('axium@') && key !== cacheName).map(key => caches.delete(key)));
+    await globalThis.clients.claim();
+    const clients = await globalThis.clients.matchAll({ includeUncontrolled: true, type: 'window' });
+    for (const client of clients)
+        client.postMessage({ type: 'update', version, base });
+}
+globalThis.addEventListener('activate', event => event.waitUntil(activate()));
+globalThis.addEventListener('fetch', async (event) => {
+    const { request } = event;
+    if (request.method != 'GET')
+        return;
+    const url = new URL(request.url);
+    if (url.origin != location.origin)
+        return;
+    if (url.pathname == versionFile)
+        return;
+    // @todo API responses, `/raw`.
+    if (!precache.has(url.pathname))
+        return;
+    const cache = await caches.open(cacheName);
+    const hit = await cache.match(url.pathname);
+    if (hit)
+        return event.respondWith(hit);
+    const response = await fetch(request);
+    if (response.ok && response.status != 206)
+        await cache.put(url.pathname, response.clone());
+    return event.respondWith(response);
+});
+globalThis.addEventListener('message', (event) => {
+    if (!event.data)
+        console.warn('Ignoring invalid message (no data)');
+    switch (event.data?.type) {
+        case 'status':
+            event.source?.postMessage(status);
+            break;
+        case 'activate':
+            console.log('activating update');
+            void globalThis.skipWaiting();
+            break;
+    }
+});
+console.log('version is', version);

package/dist/web/utils.d.ts

@@ -0,0 +1 @@
+export declare function hasActiveInput(): boolean;

package/dist/web/utils.js

@@ -0,0 +1,4 @@
+export function hasActiveInput() {
+    const active = document.activeElement;
+    return active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement;
+}

package/lib/ClipboardCopy.svelte

@@ -2,7 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import { wait } from 'utilium';
 	import Icon from './Icon.svelte';
-	import * as clip from '@axium/client/gui';
+	import * as clip from '@axium/client/web';
 
 	const { value, type = 'text/plain' }: { value: BlobPart; type?: string } = $props();
 

package/lib/PWAIndicator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { pwa } from '@axium/client/web';
+	import feature from '@axium/core/features';
+	import Icon from './Icon.svelte';
+
+	const iconMap = {
+		installing: 'regular/cloud-arrow-down',
+		pending: 'circle-arrow-up',
+		active: 'regular/cloud-check',
+		failed: 'cloud-xmark',
+		none: 'regular/cloud-slash',
+	} satisfies Record<pwa.InstallPhase, string>;
+
+	function onclick() {
+		if ($pwa.updateReady) pwa.activate();
+		else pwa.update();
+	}
+</script>
+
+{#if pwa.supported && feature('pwa')}
+	<Icon class="PWAIndicator" i={iconMap[$pwa.installPhase]} {onclick} />
+{/if}

package/lib/ZodForm.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { type ReplacementOptions, text } from '@axium/client/locales';
+	import { zKeys } from '@axium/core/locales';
 	import type { ZodObject } from 'zod';
 	import ZodInput from './ZodInput.svelte';
 
@@ -11,11 +13,18 @@
 	}
 
 	let { rootValue = $bindable(), schema, labels, updateValue, idPrefix }: Props = $props();
+
+	const localeInfo = zKeys.get(schema);
+
+	function subText(name: string, replacements?: ReplacementOptions & Record<string, any>): string | undefined {
+		if (!localeInfo?.prefix) return replacements?.$default || labels?.[name] || name;
+		return text(`${localeInfo.prefix}.${name}`, replacements);
+	}
 </script>
 
 <div class="ZodForm">
 	{#each Object.keys(schema.shape).sort((a, b) => a.localeCompare(b)) as path}
-		<ZodInput bind:rootValue {updateValue} {idPrefix} {path} schema={schema.shape[path]} label={labels?.[path] || path} />
+		<ZodInput bind:rootValue {updateValue} {idPrefix} {path} schema={schema.shape[path]} label={subText(path)} />
 	{/each}
 </div>
 

package/lib/ZodInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { text, type ReplacementOptions } from '@axium/client';
 	import type { ZodPref } from '@axium/core';
+	import feature from '@axium/core/features';
 	import { zKeys, type ZodLocaleInfo } from '@axium/core/locales';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getByString, pick, setByString } from 'utilium';
@@ -138,7 +139,9 @@
 	</div>
 {/snippet}
 
-{#if schema.type == 'string'}
+{#if localeInfo?.feature && !feature(localeInfo.feature)}
+	<meta data-feature={localeInfo.feature} />
+{:else if schema.type == 'string'}
 	{@render _in({ type: schema.format == 'email' ? 'email' : 'text', ...pick(schema, 'minLength', 'maxLength') })}
 {:else if schema.type == 'number'}
 	{@render _in({ type: 'number', min: schema.minValue, max: schema.maxValue, step: schema.format?.includes('int') ? 1 : 0.1 })}

package/lib/attachments/context-menu.ts

@@ -1,4 +1,4 @@
-import { isMobile } from '@axium/client/gui';
+import { isMobile } from '@axium/client/web';
 import { mount, unmount } from 'svelte';
 import type { Attachment } from 'svelte/attachments';
 import Icon from '../Icon.svelte';

package/lib/attachments/selection.ts

@@ -1,4 +1,4 @@
-import { controls } from '@axium/client/gui';
+import { controls } from '@axium/client/web';
 import type { Attachment } from 'svelte/attachments';
 import { SvelteSet } from 'svelte/reactivity';
 

package/lib/index.ts

@@ -16,6 +16,7 @@ export { default as Logout } from './Logout.svelte';
 export { default as MediaControls } from './MediaControls.svelte';
 export { default as NumberBar } from './NumberBar.svelte';
 export { default as Popover } from './Popover.svelte';
+export { default as PWAIndicator } from './PWAIndicator.svelte';
 export { default as Register } from './Register.svelte';
 export { default as SessionList } from './SessionList.svelte';
 export { default as SidebarLayout } from './SidebarLayout.svelte';

package/lib/reactive/index.svelte.ts

@@ -1,2 +1,3 @@
 export * from './clipboard.svelte.js';
 export * from './media.svelte.js';
+export * from './sync.svelte.js';

package/lib/reactive/sync.svelte.ts

@@ -0,0 +1,45 @@
+import type { SyncDiff, SyncDiffObject } from '@axium/core';
+import { hasActiveInput } from '@axium/client/web/utils';
+import { applyDiff, onSync } from '@axium/client/sync';
+
+export function syncObjects<T extends { id: string }>(objects: T[], type?: string) {
+	let deferred: SyncDiffObject[] = [];
+
+	function applySync(diff: SyncDiff): void {
+		const updated = [...deferred, ...diff.updated];
+		const typing = hasActiveInput();
+
+		deferred = typing ? updated : [];
+
+		applyDiff(objects, { ...diff, updated: typing ? [] : updated }, type);
+	}
+
+	$effect(() => onSync(applySync));
+
+	return function onfocusout() {
+		// Focus moves after this event, so wait for it to settle before checking whether the user is still typing
+		setTimeout(() => {
+			if (deferred.length && !hasActiveInput()) applySync({ created: [], updated: [], deleted: [], index: 0n });
+		});
+	};
+}
+
+export function syncObject<T extends { id: string }>(object: T, onDelete?: () => void, type?: string) {
+	let deferred: SyncDiffObject[] = [];
+
+	function applySync(diff: SyncDiff): void {
+		if (diff.deleted.includes(object.id)) {
+			onDelete?.();
+			return;
+		}
+
+		const updated = [...deferred, ...diff.updated];
+		const typing = hasActiveInput();
+
+		deferred = typing ? updated : [];
+
+		applyDiff([object], { ...diff, created: [], updated: typing ? [] : updated }, type);
+	}
+
+	$effect(() => onSync(applySync));
+}

package/lib/toast.ts

@@ -1,6 +1,6 @@
 import { debug, errorText, useProgress } from 'ioium';
 import { text } from '@axium/client/locales';
-import { animate, onAnimationEnd } from '@axium/client/gui';
+import { animate, onAnimationEnd } from '@axium/client/web';
 import Icon from './Icon.svelte';
 import { mount } from 'svelte';
 import { $ZodError, prettifyError } from 'zod/v4/core';

package/lib/tsconfig.json

@@ -7,6 +7,6 @@
 		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"types": ["@sveltejs/kit"]
 	},
-	"include": ["./**/*"],
+	"include": ["./**/*", "../src/.*.ts"],
 	"references": [{ "path": ".." }]
 }

package/locales/en.json

@@ -249,6 +249,16 @@
 	},
 	"audit_severity": ["Emergency", "Alert", "Critical", "Error", "Warning", "Notice", "Info", "Debug"],
 	"preference": {
-		"debug": "Debug mode"
+		"debug": "Debug mode",
+		"theme": "Theme"
+	},
+	"themes": {
+		"default": "Default",
+		"light": "Light",
+		"forest": "Forest",
+		"midnight": "Midnight",
+		"beach": "Beach",
+		"cherry": "Cherry",
+		"volcano": "Volcano"
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.36.7",
+	"version": "0.37.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -33,7 +33,7 @@
 	"exports": {
 		"./package.json": "./package.json",
 		".": "./dist/index.js",
-		"./gui": "./dist/gui/index.js",
+		"./web": "./dist/web/index.js",
 		"./*": "./dist/*.js",
 		"./components": "./lib/index.js",
 		"./components/*": "./lib/*.svelte",
@@ -49,7 +49,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/core": ">=0.38.0",
+		"@axium/core": ">=0.39.0",
 		"ioium": "^1.7.0",
 		"semver": "^7.7.4",
 		"svelte": "^5.36.0",