@axium/client 0.16.7 → 0.17.0

package/assets/styles.css

@@ -54,7 +54,7 @@ input,
 button,
 select,
 textarea {
-	border: 1px solid var(--border-accent);
+	border: var(--border-accent);
 	background-color: var(--bg-normal);
 	font-family: inherit;
 	color: hsl(0 0 var(--fg-light));
@@ -84,7 +84,7 @@ label.checkbox {
 	cursor: pointer;
 	width: 1.5em;
 	height: 1.5em;
-	border: 1px solid var(--border-accent);
+	border: var(--border-accent);
 	border-radius: 0.5em;
 	display: inline-flex;
 	justify-content: center;
@@ -101,7 +101,7 @@ select,
 }
 
 ::picker(select) {
-	border: 1px solid var(--border-accent);
+	border: var(--border-accent);
 	padding: 1em;
 	border-radius: 0.5em;
 	background-color: var(--bg-menu);
@@ -158,7 +158,7 @@ progress {
 	border-radius: 0.5em;
 	overflow: hidden;
 	background-color: var(--bg-normal);
-	border: 1px solid var(--border-accent);
+	border: var(--border-accent);
 }
 
 progress::-webkit-progress-bar {
@@ -212,7 +212,7 @@ input.error {
 }
 
 .danger {
-	border: 1px solid hsl(0 50 var(--fg-light));
+	border: var(--border-error);
 	background-color: hsl(0 20 calc(var(--bg-light) + var(--light-step)));
 	color: hsl(0 33 var(--fg-light));
 	accent-color: hsl(0 33 var(--fg-light));
@@ -321,7 +321,7 @@ h6 {
 
 	.mobile-button {
 		border-radius: 0.5em;
-		border: 1px solid var(--border-accent);
+		border: var(--border-accent);
 		background-color: var(--bg-normal);
 		padding: 0.5em 1em;
 		cursor: pointer;

package/assets/theme.css

@@ -39,5 +39,6 @@ html {
 	--bg-success: hsl(120 40 var(--bg-light-status));
 	--fg-accent: hsl(var(--hue) 15 var(--fg-light));
 	--fg-strong: hsl(var(--hue) 25 calc(var(--fg-light) - var(--light-step)));
-	--border-accent: hsl(var(--hue) 10 calc(var(--bg-light) + (var(--light-step) * 3)));
+	--border-accent: 1px solid hsl(var(--hue) 10 calc(var(--bg-light) + (var(--light-step) * 3)));
+	--border-error: 1px solid hsl(0 50 var(--fg-light));
 }

package/dist/index.d.ts

@@ -1 +1,5 @@
-export {};
+export * from './access.js';
+export * from './config.js';
+export * from './locales.js';
+export * from './requests.js';
+export * from './user.js';

package/dist/index.js

@@ -1 +1,5 @@
-export {};
+export * from './access.js';
+export * from './config.js';
+export * from './locales.js';
+export * from './requests.js';
+export * from './user.js';

package/dist/locales.d.ts

@@ -0,0 +1,249 @@
+import type { FlattenKeys, GetByString, Split, UnionToIntersection } from 'utilium';
+/**
+ * Add translations to a locale.
+ * Note that translations are rendered as HTML, only replacements are escaped.
+ */
+export declare function extendLocale(locale: string, data: object): void;
+declare let currentLoaded: {
+    readonly component: {
+        readonly AccessControlDialog: {
+            readonly named_title: "Permissions for <strong>{name}</strong>";
+            readonly owner: "Owner";
+            readonly title: "Permissions";
+        };
+        readonly AppMenu: {
+            readonly failed: "Couldn't load apps.";
+            readonly none: "No apps available.";
+        };
+        readonly Login: {
+            readonly email: "Email";
+            readonly register: "Register instead";
+        };
+        readonly Logout: {
+            readonly back: "Take me back";
+            readonly question: "Are you sure you want to log out?";
+        };
+        readonly Register: {
+            readonly email: "Email";
+            readonly login: "Login instead";
+            readonly name: "Display Name";
+        };
+        readonly SessionList: {
+            readonly created: "Created {date}";
+            readonly current: "Current";
+            readonly elevated: "Elevated";
+            readonly expires: "Expires {date}";
+            readonly logout_all_question: "Are you sure you want to log out all sessions?";
+            readonly logout_all_submit: "Logout All Sessions";
+            readonly logout_all_trigger: "Logout All";
+            readonly logout_single: "Are you sure you want to log out this session?";
+        };
+        readonly Upload: {
+            readonly upload: "Upload";
+        };
+        readonly UserCard: {
+            readonly you: "(You)";
+        };
+        readonly UserDiscovery: {
+            readonly no_results: "No results";
+            readonly placeholder: "Add users and roles";
+        };
+        readonly UserMenu: {
+            readonly account: "Your Account";
+            readonly admin: "Administration";
+        };
+        readonly Version: {
+            readonly error: "Latest unknown";
+            readonly latest: "Latest";
+            readonly upgrade: "<span class=\"version\">{latest}</span> available";
+        };
+        readonly ZodInput: {
+            readonly invalid_type: "Invalid input type: {type}";
+        };
+    };
+    readonly generic: {
+        readonly action_irreversible: "This action can't be undone.";
+        readonly cancel: "Cancel";
+        readonly change: "Change";
+        readonly create: "Create";
+        readonly delete: "Delete";
+        readonly done: "Done";
+        readonly email: "Email";
+        readonly loading: "Loading...";
+        readonly login: "Login";
+        readonly logout: "Logout";
+        readonly no: "No";
+        readonly none: "None";
+        readonly ok: "Okay";
+        readonly preferences: "Preferences";
+        readonly register: "Register";
+        readonly sessions: "Sessions";
+        readonly unknown: "Unknown";
+        readonly unnamed: "Unnamed";
+        readonly username: "Name";
+        readonly yes: "Yes";
+    };
+    readonly page: {
+        readonly account: {
+            readonly delete_account: "Delete Account";
+            readonly delete_account_confirm: "Are you sure you want to delete your account?";
+            readonly edit_email: "Email Address";
+            readonly edit_name: "What do you want to be called?";
+            readonly email_verified_on: "Email verified on {date}";
+            readonly greeting: "Welcome, {name}";
+            readonly passkeys: {
+                readonly backed_up: "This passkey is backed up";
+                readonly create: "Create";
+                readonly created: "Created {date}";
+                readonly delete: "Delete";
+                readonly delete_confirm: "Are you sure you want to delete this passkey?";
+                readonly edit_name: "Passkey Name";
+                readonly min_one: "You must have at least one passkey";
+                readonly multi_device: "Multiple devices";
+                readonly name_type_error: "Passkey name must be a string";
+                readonly not_backed_up: "This passkey is not backed up";
+                readonly rename: "Rename";
+                readonly single_device: "Single device";
+                readonly title: "Passkeys";
+            };
+            readonly personal_info: "Personal Information";
+            readonly preferences: "Preferences";
+            readonly profile_alt: "User profile";
+            readonly sessions: "Sessions";
+            readonly title: "Your Account";
+            readonly user_id: "User ID";
+            readonly user_id_hint: "This is your UUID. It can't be changed.";
+            readonly verification_sent: "Verification email sent";
+            readonly verify: "Verify";
+        };
+        readonly admin: {
+            readonly heading: "Administration";
+            readonly audit: {
+                readonly any: "Any";
+                readonly apply: "Apply";
+                readonly error_stack: "Error Stack";
+                readonly event_heading: "Audit Event";
+                readonly event_title: "Admin — Audit Log Event #{id}";
+                readonly extra_data: "Extra Data";
+                readonly filter: {
+                    readonly event: "Event Name:";
+                    readonly severity: "Minimum Severity:";
+                    readonly since: "Since:";
+                    readonly source: "Source:";
+                    readonly tags: "Tags:";
+                    readonly until: "Until:";
+                    readonly user: "User UUID:";
+                };
+                readonly filters: "Filters";
+                readonly heading: "Audit Log";
+                readonly invalid_filter: "Invalid Filter:";
+                readonly name: "Name";
+                readonly no_events: "No audit log events found";
+                readonly reset: "Reset";
+                readonly severity: "Severity";
+                readonly source: "Source";
+                readonly tags: "Tags";
+                readonly timestamp: "Timestamp";
+                readonly title: "Admin — Audit Log";
+                readonly user: "User";
+                readonly uuid: "UUID";
+            };
+            readonly config: {
+                readonly active: "Active Configuration";
+                readonly loaded_files: "Loaded Files";
+                readonly title: "Admin — Configuration";
+            };
+            readonly dashboard: {
+                readonly audit_link: "Audit Log";
+                readonly config_files: "{count} files loaded.";
+                readonly config_link: "Configuration";
+                readonly plugins_link: "Plugins";
+                readonly plugins_loaded: "{count} plugins loaded.";
+                readonly stats: "{users} users, {sessions} sessions, {passkeys} passkeys.";
+                readonly title: "Admin — Dashboard";
+                readonly users_link: "Users";
+            };
+            readonly plugins: {
+                readonly author: "Author:";
+                readonly configuration: "Configuration";
+                readonly heading: "Plugins";
+                readonly loaded_from: "Loaded from";
+                readonly none: "No plugins loaded.";
+                readonly provided_apps: "Provided apps:";
+                readonly title: "Admin — Plugins";
+            };
+            readonly users: {
+                readonly admin_tag: "Admin";
+                readonly administrator: "Administrator";
+                readonly attributes: "Attributes";
+                readonly audit: "Audit";
+                readonly back: "Back to all users";
+                readonly create: "Create User";
+                readonly created_title: "New User Created";
+                readonly created_url: "They can log in using this URL:";
+                readonly default_image: "Default";
+                readonly delete_confirm: "Are you sure you want to delete this user?";
+                readonly delete_user: "Delete User";
+                readonly display_name: "Display Name";
+                readonly email_not_verified: "not verified";
+                readonly email_verified: "verified {date}";
+                readonly heading: "Users";
+                readonly manage: "Manage";
+                readonly manage_heading: "User Management";
+                readonly manage_title: "Admin — User Management";
+                readonly none: "No users!";
+                readonly profile_image: "Profile Image";
+                readonly registered: "Registered";
+                readonly roles: "Roles";
+                readonly suspend: "Suspend";
+                readonly suspended: "Suspended";
+                readonly tags: "Tags";
+                readonly title: "Admin — Users";
+                readonly unsuspend: "Unsuspend";
+                readonly uuid: "UUID";
+            };
+        };
+        readonly login: {
+            readonly client: {
+                readonly authorize: "Authorize";
+                readonly confirm: "Are you sure you want to log in to this local client?";
+                readonly success: "Login successful! You can close this tab.";
+                readonly title: "Local Client Login";
+            };
+            readonly failed: "Login Failed";
+        };
+    };
+    readonly preference: {
+        readonly debug: "Debug mode";
+    };
+};
+/**
+ * Current locale
+ */
+export declare let currentLocale: string;
+type _locale = typeof currentLoaded;
+export interface Locale extends _locale {
+}
+export interface ReplacementOptions {
+    $default?: string;
+    /**  */
+    $html?: boolean;
+}
+type _ArgsValue<V extends string[]> = UnionToIntersection<{
+    [I in keyof V]: Split<V[I], '}'> extends [infer Name extends string, string] ? {
+        [N in Name]: string;
+    } : {};
+}[keyof V & number]>;
+type Replacements<K extends string> = ReplacementOptions & (GetByString<Locale, K> extends string ? _ArgsValue<Split<GetByString<Locale, K> & string, '{'>> : Record<string, any>);
+type ReplacementsArgs<K extends string> = {} extends Replacements<K> ? [replacements?: Replacements<K>] : [replacements: Replacements<K>];
+export declare function useLocale(newLocale: string): void;
+export declare function escape(text: string): string;
+/**
+ * Get localized text for a given translation key
+ * @example
+ * ```ts
+ * text(`example.translation.key.${dynamicPart}`, { a: 1, b: 2 });
+ * ```
+ */
+export declare function text<const K extends string = FlattenKeys<Locale>>(key: K, ...args: ReplacementsArgs<K>): string;
+export {};

package/dist/locales.js

@@ -0,0 +1,70 @@
+import { debug, error, info, warn } from '@axium/core/io';
+import { deepAssign, getByString } from 'utilium';
+import en from '../locales/en.json' with { type: 'json' };
+const loadedLocales = Object.assign(Object.create(null), { en });
+/**
+ * Add translations to a locale.
+ * Note that translations are rendered as HTML, only replacements are escaped.
+ */
+export function extendLocale(locale, data) {
+    if (!loadedLocales[locale]) {
+        info('Adding new locale (no built-in): ' + locale);
+        loadedLocales[locale] = {};
+    }
+    else
+        debug('Extending locale: ' + locale);
+    deepAssign(loadedLocales[locale], data);
+}
+let currentLoaded = en;
+/**
+ * Current locale
+ */
+export let currentLocale = 'en';
+export function useLocale(newLocale) {
+    if (!loadedLocales[newLocale])
+        throw new Error('Locale is not available: ' + newLocale);
+    currentLocale = newLocale;
+    currentLoaded = loadedLocales[newLocale];
+}
+const localeReplacement = /\{(\w+)\}/g;
+const escapePattern = /[&<>"']/g;
+const escapes = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+export function escape(text) {
+    return text.replaceAll(escapePattern, ch => escapes[ch]);
+}
+/**
+ * Get localized text for a given translation key
+ * @example
+ * ```ts
+ * text(`example.translation.key.${dynamicPart}`, { a: 1, b: 2 });
+ * ```
+ */
+export function text(key, ...args) {
+    const values = Object.assign(Object.create(null), args[0]);
+    let text = getByString(currentLoaded, key) || values.$default;
+    if (!text && currentLocale != 'en') {
+        warn(`Missing translation in ${currentLocale}: ` + key);
+        text = getByString(en, key);
+    }
+    if (!text) {
+        error('Missing translation for key: ' + key);
+        text = `?${key}?`;
+    }
+    if (typeof text == 'object') {
+        error('Invalid translation key: ' + key);
+        text = values.$default || `!${key}!`;
+    }
+    return text.replaceAll(localeReplacement, (_, name) => {
+        if (!Object.hasOwn(values, name)) {
+            console.error(new Error(`Missing replacement value for ${key}: ${name}`));
+            values[name] = `<missing: ${name}>`;
+        }
+        return values.$html ? escape(String(values[name])) : String(values[name]);
+    });
+}

package/dist/user.js

@@ -112,9 +112,7 @@ export async function createPasskey(userId) {
     _checkId(userId);
     const options = await fetchAPI('OPTIONS', 'users/:id/passkeys', {}, userId);
     const response = await startRegistration({ optionsJSON: options });
-    const passkey = await fetchAPI('PUT', 'users/:id/passkeys', response, userId);
-    passkey.createdAt = new Date(passkey.createdAt);
-    return passkey;
+    return await fetchAPI('PUT', 'users/:id/passkeys', response, userId);
 }
 export async function updatePasskey(passkeyId, data) {
     return await fetchAPI('PATCH', 'passkeys/:id', data, passkeyId);

package/lib/AccessControlDialog.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { addToACL, getACL, updateACL } from '@axium/client/access';
-	import { userInfo } from '@axium/client/user';
+	import { addToACL, getACL, text, updateACL, userInfo } from '@axium/client';
 	import type { AccessControllable, AccessTarget, User } from '@axium/core';
-	import { getTarget, pickPermissions } from '@axium/core/access';
+	import { getTarget, pickPermissions } from '@axium/core';
 	import { errorText } from '@axium/core/io';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
 	import Icon from './Icon.svelte';
@@ -30,9 +29,9 @@
 
 <dialog bind:this={dialog} {...rest}>
 	{#if item.name}
-		<h3>Permissions for <strong>{item.name}</strong></h3>
+		<h3>{@html text('component.AccessControlDialog.named_title', { $html: true, name: item.name })}</h3>
 	{:else}
-		<h3>Permissions</h3>
+		<h3>{text('component.AccessControlDialog.title')}</h3>
 	{/if}
 
 	{#if error}
@@ -45,7 +44,7 @@
 		{:else if item}
 			{#await userInfo(item.userId) then user}<UserCard {user} />{/await}
 		{/if}
-		<span>Owner</span>
+		<span>{text('component.AccessControlDialog.owner')}</span>
 	</div>
 
 	{#each acl as control}
@@ -66,7 +65,7 @@
 					<span>{control.role}</span>
 				</span>
 			{:else}
-				<i>Unknown</i>
+				<i>{text('generic.unknown')}</i>
 			{/if}
 			<div class="permissions">
 				{#each Object.entries(pickPermissions(control) as Record<string, boolean>) as [key, value]}
@@ -90,7 +89,7 @@
 	<UserDiscovery {onSelect} excludeTargets={acl.map(getTarget)} />
 
 	<div>
-		<button class="done" onclick={() => dialog!.close()}>Done</button>
+		<button class="done" onclick={() => dialog!.close()}>{text('generic.done')}</button>
 	</div>
 </dialog>
 
@@ -119,7 +118,7 @@
 		padding: 1em 2em;
 
 		&:not(.public) {
-			border-bottom: 1px solid var(--border-accent);
+			border-bottom: var(--border-accent);
 		}
 	}
 </style>

package/lib/AppMenu.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client/locales';
 	import { fetchAPI } from '@axium/client/requests';
 	import Icon from './Icon.svelte';
 	import Popover from './Popover.svelte';
@@ -12,7 +13,7 @@
 	{/snippet}
 
 	{#await fetchAPI('GET', 'apps')}
-		<i>Loading...</i>
+		<i>{text('generic.loading')}</i>
 	{:then apps}
 		{#each apps as app}
 			<a class="menu-item" href="/{app.id}">
@@ -23,12 +24,12 @@
 				{:else}
 					<Icon i="image-circle-xmark" --size="1.5em" />
 				{/if}
-				<span>{app.name}</span>
+				<span>{text('app_name.' + app.id, { $default: app.name })}</span>
 			</a>
 		{:else}
-			<i>No apps available.</i>
+			<i>{text('component.AppMenu.none')}</i>
 		{/each}
 	{:catch}
-		<i>Couldn't load apps.</i>
+		<i>{text('component.AppMenu.failed')}</i>
 	{/await}
 </Popover>

package/lib/ColorPicker.svelte

@@ -87,7 +87,7 @@
 		gap: 0.25em;
 
 		border-radius: 0.5em;
-		border: 1px solid var(--border-accent);
+		border: var(--border-accent);
 		background-color: var(--bg-normal);
 		padding: 0.25em 0.75em;
 	}

package/lib/FormDialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
 
 	let {
@@ -72,7 +73,7 @@
 			{@render submitButton()}
 		{:else}
 			<div class="actions">
-				<button type="button" onclick={() => dialog!.close()}>Cancel</button>
+				<button type="button" onclick={() => dialog!.close()}>{text('generic.cancel')}</button>
 				{@render submitButton()}
 			</div>
 		{/if}

package/lib/Login.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { loginByEmail } from '@axium/client/user';
+	import { loginByEmail, text } from '@axium/client';
 	import FormDialog from './FormDialog.svelte';
 	import authRedirect from './auth_redirect.js';
 
@@ -16,15 +16,15 @@
 	}
 </script>
 
-<FormDialog bind:dialog submitText="Login" {submit} pageMode={fullPage}>
+<FormDialog bind:dialog submitText={text('generic.login')} {submit} pageMode={fullPage}>
 	<div>
-		<label for="email">Email</label>
+		<label for="email">{text('component.Login.email')}</label>
 		<input name="email" type="email" required />
 	</div>
 	{#snippet footer()}
 		{#if fullPage}
 			<div class="footer">
-				<a href="/register">Register instead</a>
+				<a href="/register">{text('component.Login.register')}</a>
 			</div>
 		{/if}
 	{/snippet}

package/lib/Logout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { logoutCurrentSession } from '@axium/client/user';
+	import { logoutCurrentSession, text } from '@axium/client';
 	import FormDialog from './FormDialog.svelte';
 
 	let { fullPage = false }: { fullPage?: boolean } = $props();
@@ -8,10 +8,10 @@
 <FormDialog
 	pageMode={fullPage}
 	id="logout"
-	submitText="Log Out"
+	submitText={text('generic.logout')}
 	submit={() => logoutCurrentSession().then(() => (window.location.href = '/'))}
 >
-	<p>Are you sure you want to log out?</p>
+	<p>{text('component.Logout.question')}</p>
 	{#if fullPage}
 		<button
 			command="close"
@@ -19,7 +19,7 @@
 			onclick={e => {
 				e.preventDefault();
 				history.back();
-			}}>Take me back</button
+			}}>{text('component.Logout.back')}</button
 		>
 	{/if}
 </FormDialog>

package/lib/Register.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { register } from '@axium/client/user';
+	import { register, text } from '@axium/client';
 	import FormDialog from './FormDialog.svelte';
 	import authRedirect from './auth_redirect.js';
 
@@ -12,19 +12,19 @@
 	}
 </script>
 
-<FormDialog bind:dialog submitText="Register" {submit} pageMode={fullPage}>
+<FormDialog bind:dialog submitText={text('generic.register')} {submit} pageMode={fullPage}>
 	<div>
-		<label for="name">Display Name</label>
+		<label for="name">{text('component.Register.name')}</label>
 		<input name="name" type="text" required />
 	</div>
 	<div>
-		<label for="email">Email</label>
+		<label for="email">{text('component.Register.email')}</label>
 		<input name="email" type="email" required />
 	</div>
 	{#snippet footer()}
 		{#if fullPage}
 			<div class="footer">
-				<a href="/login">Login instead</a>
+				<a href="/login">{text('component.Register.login')}</a>
 			</div>
 		{/if}
 	{/snippet}

package/lib/SessionList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { logout, logoutAll } from '@axium/client/user';
+	import { logout, logoutAll, text } from '@axium/client';
 	import type { Session, User } from '@axium/core';
 	import FormDialog from './FormDialog.svelte';
 	import Icon from './Icon.svelte';
@@ -17,17 +17,17 @@
 		<p>
 			{session.name ?? `${session.id.slice(0, 4)}...${session.id.slice(-4)}`}
 			{#if session.id == currentSession?.id}
-				<span class="current">Current</span>
+				<span class="current">{text('component.SessionList.current')}</span>
 			{/if}
 			{#if session.elevated}
-				<span class="elevated">Elevated</span>
+				<span class="elevated">{text('component.SessionList.elevated')}</span>
 			{/if}
 		</p>
-		<p class="timestamp">Created {session.created.toLocaleString()}</p>
-		<p class="timestamp">Expires {session.expires.toLocaleString()}</p>
+		<p class="timestamp">{text('component.SessionList.created', { date: session.created.toLocaleString() })}</p>
+		<p class="timestamp">{text('component.SessionList.expires', { date: session.expires.toLocaleString() })}</p>
 		<button command="show-modal" commandfor={'logout-session:' + session.id} class="logout icon-text">
 			<Icon i="right-from-bracket" --size="16px" />
-			<span class="mobile-only">Logout</span>
+			<span class="mobile-only">{text('generic.logout')}</span>
 		</button>
 	</div>
 	<FormDialog
@@ -37,19 +37,20 @@
 			sessions.splice(sessions.indexOf(session), 1);
 			if (session.id == currentSession?.id) window.location.href = '/';
 		}}
-		submitText="Logout"
+		submitText={text('generic.logout')}
 	>
-		<p>Are you sure you want to log out this session?</p>
+		<p>{text('component.SessionList.logout_single')}</p>
 	</FormDialog>
 {/each}
-<button command="show-modal" commandfor="logout-all" class="danger inline-button">Logout All</button>
+<button command="show-modal" commandfor="logout-all" class="danger inline-button">{text('component.SessionList.logout_all_trigger')}</button
+>
 <FormDialog
 	id="logout-all"
 	submit={() => logoutAll(user.id).then(() => (redirectAfterLogoutAll ? (window.location.href = '/') : null))}
-	submitText="Logout All Sessions"
+	submitText={text('component.SessionList.logout_all_submit')}
 	submitDanger
 >
-	<p>Are you sure you want to log out all sessions?</p>
+	<p>{text('component.SessionList.logout_all_question')}</p>
 </FormDialog>
 
 <style>

package/lib/SidebarLayout.svelte

@@ -15,8 +15,7 @@
 <div class="sidebar-container">
 	<div class="sidebar">
 		{#each tabs as { href, name, icon: i, active }}
-			<a {href} class={['item', 'icon-text', active && 'active']}><Icon {i} /> <span class="sidebar-text">{capitalize(name)}</span></a
-			>
+			<a {href} class={['item', 'icon-text', active && 'active']}><Icon {i} /> <span class="sidebar-text">{name}</span></a>
 		{/each}
 
 		{#if bottom}

package/lib/Upload.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { forMime } from '@axium/core/icons';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import Icon from './Icon.svelte';
@@ -45,7 +46,7 @@
 				<Icon i="cloud-arrow-up" />
 			{/if}
 		{:else}
-			<Icon i="upload" /> Upload
+			<Icon i="upload" /> {text('component.Upload.upload')}
 		{/each}
 	</label>
 

package/lib/UserCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import type { User } from '@axium/core/user';
+	import { text } from '@axium/client';
 	import { getUserImage } from '@axium/core';
+	import type { User } from '@axium/core/user';
 
 	const {
 		user,
@@ -27,7 +28,7 @@
 	{/if}
 	{user.name}
 	{#if self && you}
-		<span class="subtle">(You)</span>
+		<span class="subtle">{text('component.UserCard.you')}</span>
 	{/if}
 </a>
 

package/lib/UserDiscovery.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { fetchAPI } from '@axium/client/requests';
 	import { getUserImage, type UserPublic } from '@axium/core';
 	import { colorHashRGB } from '@axium/core/color';
@@ -55,7 +56,7 @@
 	}
 </script>
 
-<input bind:value type="text" placeholder="Add users and roles" {oninput} />
+<input bind:value type="text" placeholder={text('component.UserDiscovery.placeholder')} {oninput} />
 {#if !gotError && value}
 	<!-- Don't show results when we can't use the discovery API -->
 	<div class="results">
@@ -82,7 +83,7 @@
 				</div>
 			{/if}
 		{:else}
-			<i>No results</i>
+			<i>{text('component.UserDiscovery.no_results')}</i>
 		{/each}
 	</div>
 {/if}
@@ -114,7 +115,7 @@
 		background-color: var(--bg-accent);
 		border-radius: 0.25em 0.25em 0.75em 0.75em;
 		padding: 1em;
-		border: 1px solid var(--border-accent);
+		border: var(--border-accent);
 		align-items: stretch;
 
 		i {

package/lib/UserMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fetchAPI } from '@axium/client/requests';
+	import { fetchAPI, text } from '@axium/client';
 	import { getUserImage } from '@axium/core';
 	import type { UserPublic } from '@axium/core/user';
 	import Icon from './Icon.svelte';
@@ -20,18 +20,18 @@
 
 		<a class="menu-item" href="/account">
 			<Icon i="user" --size="1.5em" />
-			<span>Your Account</span>
+			<span>{text('component.UserMenu.account')}</span>
 		</a>
 
 		{#if user.isAdmin}
 			<a class="menu-item" href="/admin">
 				<Icon i="gear-complex" --size="1.5em" />
-				<span>Administration</span>
+				<span>{text('component.UserMenu.admin')}</span>
 			</a>
 		{/if}
 
 		{#await fetchAPI('GET', 'apps')}
-			<i>Loading...</i>
+			<i>{text('generic.loading')}</i>
 		{:then apps}
 			{#each apps as app}
 				<a class="menu-item" href="/{app.id}">
@@ -42,18 +42,18 @@
 					{:else}
 						<Icon i="image-circle-xmark" --size="1.5em" />
 					{/if}
-					<span>{app.name}</span>
+					<span>{text('app_name.' + app.id, { $default: app.name })}</span>
 				</a>
 			{:else}
-				<i>No apps available.</i>
+				<i>{text('component.AppMenu.none')}</i>
 			{/each}
 		{:catch}
-			<i>Couldn't load apps.</i>
+			<i>{text('component.AppMenu.failed')}</i>
 		{/await}
 
 		<button class="menu-item logout reset" command="show-modal" commandfor="logout">
 			<Icon i="right-from-bracket" --size="1.5em" --fill="hsl(0 33 var(--fg-light))" />
-			<span>Logout</span>
+			<span>{text('generic.logout')}</span>
 		</button>
 	</Popover>
 
@@ -68,7 +68,7 @@
 	.UserMenu {
 		border-radius: 0.5em;
 		padding: 0.5em;
-		border: 1px solid var(--border-accent);
+		border: var(--border-accent);
 		cursor: pointer;
 		background-color: var(--bg-alt);
 	}

package/lib/Version.svelte

@@ -1,18 +1,27 @@
 <script lang="ts">
-	const { v, latest }: { v: string; latest?: string | null } = $props();
+	import { text } from '@axium/client';
+	import { error } from '@axium/core/io';
 	import { lt as ltVersion } from 'semver';
+
+	const { v, latest: _latest }: { v: string; latest?: string | null | Promise<string> } = $props();
+
+	if (_latest && typeof _latest != 'string') _latest.catch(error);
 </script>
 
 <span class="version">{v}</span>
 
-{#if latest}
-	<span class="latest">
-		{#if ltVersion(v, latest)}
-			<span class="version">{latest}</span> available
-		{:else}
-			Latest
-		{/if}
-	</span>
+{#if _latest}
+	{#await _latest then latest}
+		<span class="latest">
+			{#if ltVersion(v, latest)}
+				{@html text('component.Version.upgrade', { $html: true, latest })}
+			{:else}
+				{text('component.Version.latest')}
+			{/if}
+		</span>
+	{:catch}
+		<span class="latest error">{text('component.Version.error')}</span>
+	{/await}
 {/if}
 
 <style>
@@ -23,6 +32,10 @@
 		border-radius: 1em;
 	}
 
+	.error {
+		border: var(--border-error);
+	}
+
 	:global(h1 h2, h3, h4, h5, h6) {
 		.latest {
 			margin-left: 1em;

package/lib/ZodInput.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import type { ZodPref } from '@axium/core';
+	import { zKeys } from '@axium/core/locales';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getByString, pick, setByString } from 'utilium';
+	import { prettifyError } from 'zod';
 	import Icon from './Icon.svelte';
 	import ZodInput from './ZodInput.svelte';
-	import { prettifyError } from 'zod';
 
 	interface Props {
 		idPrefix?: string;
@@ -18,17 +20,10 @@
 		updateValue(value: any): void;
 	}
 
-	let {
-		rootValue = $bindable(),
-		label,
-		path,
-		schema,
-		optional = false,
-		defaultValue,
-		idPrefix,
-		updateValue,
-		noLabel = false,
-	}: Props = $props();
+	let { rootValue = $bindable(), ...props }: Props = $props();
+
+	let { label, path, schema, optional, defaultValue, idPrefix, updateValue, noLabel } = props;
+
 	const id = (idPrefix ? idPrefix + ':' : '') + path.replaceAll(' ', '_');
 
 	let value = $state<any>(getByString(rootValue, path));
@@ -81,18 +76,20 @@
 		if (defaultValue == val) {
 			const parts = path.split('.');
 			const prop = parts.pop()!;
-			delete getByString<Record<string, any>>(rootValue, parts.join('.'))[prop];
+			delete getByString<Record<string, any>>(rootValue, parts.join('.'))![prop];
 		} else setByString(rootValue, path, val);
 
 		updateValue(rootValue);
 	}
 
 	const oninput = onchange;
+
+	const labelText = $derived(zKeys.has(props.schema) ? text(zKeys.get(props.schema)!.key) : label || path);
 </script>
 
 {#snippet _in(rest: HTMLInputAttributes)}
 	<div class="ZodInput">
-		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
+		{#if !noLabel}<label for={id}>{labelText}</label>{/if}
 		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
 		<input {id} {...rest} bind:value {onchange} {oninput} required={!optional} {defaultValue} class={[error && 'error']} />
 	</div>
@@ -106,7 +103,7 @@
 	{@render _in({ type: 'number', min: Number(schema.minValue), max: Number(schema.maxValue), step: 1 })}
 {:else if schema.type == 'boolean'}
 	<div class="ZodInput">
-		{#if !noLabel}<label for="{id}:checkbox">{label || path}</label>{/if}
+		{#if !noLabel}<label for="{id}:checkbox">{labelText}</label>{/if}
 		<input bind:checked={value} id="{id}:checkbox" type="checkbox" {onchange} required={!optional} />
 		<label for="{id}:checkbox" {id} class="checkbox">
 			{#if value}<Icon i="check" --size="1.3em" />{/if}
@@ -122,7 +119,7 @@
 	<!-- todo -->
 {:else if schema.type == 'literal'}
 	<div class="ZodInput">
-		<label for={id}>{label || path}</label>
+		<label for={id}>{labelText}</label>
 		<select bind:value {id} {oninput} required={!optional}>
 			{#each schema.values as value}
 				<option {value} selected={value === value}>{value}</option>
@@ -132,13 +129,13 @@
 {:else if schema.type == 'template_literal'}
 	<!-- todo -->
 {:else if schema.type == 'default'}
-	<ZodInput bind:rootValue {updateValue} {idPrefix} {path} schema={schema.def.innerType} defaultValue={schema.def.defaultValue} />
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.innerType} defaultValue={schema.def.defaultValue} />
 {:else if schema.type == 'nullable' || schema.type == 'optional'}
 	<!-- defaults are handled differently -->
-	<ZodInput bind:rootValue {updateValue} {idPrefix} {path} {defaultValue} schema={schema.def.innerType} optional={true} />
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.innerType} optional={true} />
 {:else if schema.type == 'array'}
 	<div class="ZodInput">
-		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
+		{#if !noLabel}<label for={id}>{labelText}</label>{/if}
 		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
 		<div class="ZodInput-array">
 			{#each value, i}
@@ -164,25 +161,25 @@
 		{#each Object.keys(value) as key}
 			<div class="ZodInput-record-entry">
 				{#if !noLabel}<label for={id}>{key}</label>{/if}
-				<ZodInput bind:rootValue {updateValue} {idPrefix} {defaultValue} path="{path}.{key}" schema={schema.valueType} />
+				<ZodInput bind:rootValue {updateValue} {idPrefix} path="{path}.{key}" schema={schema.valueType} />
 			</div>
 		{/each}
 	</div>
 {:else if schema.type == 'object'}
 	<!-- <div class="ZodInput-object"> -->
 	{#each Object.entries(schema.shape) as [key, value]}
-		<ZodInput bind:rootValue {updateValue} {idPrefix} {defaultValue} path="{path}.{key}" schema={value} />
+		<ZodInput bind:rootValue {updateValue} {idPrefix} path="{path}.{key}" schema={value} />
 	{/each}
 	<!-- </div> -->
 {:else if schema.type == 'tuple'}
 	<div class="ZodInput-tuple" data-rest={schema.def.rest}>
 		{#each schema.def.items as item, i}
-			<ZodInput bind:rootValue {updateValue} {idPrefix} {defaultValue} path="{path}.{i}" schema={item} />
+			<ZodInput bind:rootValue {updateValue} {idPrefix} defaultValue={defaultValue?.[i]} path="{path}.{i}" schema={item} />
 		{/each}
 	</div>
 {:else if schema.type == 'enum'}
 	<div class="ZodInput">
-		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
+		{#if !noLabel}<label for={id}>{labelText}</label>{/if}
 		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
 		<select {id} {onchange} bind:value required={!optional}>
 			{#each Object.entries(schema.enum) as [key, value]}
@@ -192,7 +189,7 @@
 	</div>
 {:else}
 	<!-- No idea how to render this -->
-	<i class="error-text">Invalid preference type: {JSON.stringify((schema as ZodPref)?.def?.type)}</i>
+	<i class="error-text">{text('component.ZodInput.invalid_type', { type: JSON.stringify((schema as ZodPref)?.def?.type) })}</i>
 {/if}
 
 <style>

package/lib/tsconfig.json

@@ -3,7 +3,7 @@
 	"compilerOptions": {
 		"target": "ES2023",
 		"strict": true,
-		"rootDir": ".",
+		"rootDir": "..",
 		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"types": ["@sveltejs/kit"]
 	},

package/locales/en.json

@@ -0,0 +1,213 @@
+{
+	"component": {
+		"AccessControlDialog": {
+			"named_title": "Permissions for <strong>{name}</strong>",
+			"owner": "Owner",
+			"title": "Permissions"
+		},
+		"AppMenu": {
+			"failed": "Couldn't load apps.",
+			"none": "No apps available."
+		},
+		"Login": {
+			"email": "Email",
+			"register": "Register instead"
+		},
+		"Logout": {
+			"back": "Take me back",
+			"question": "Are you sure you want to log out?"
+		},
+		"Register": {
+			"email": "Email",
+			"login": "Login instead",
+			"name": "Display Name"
+		},
+		"SessionList": {
+			"created": "Created {date}",
+			"current": "Current",
+			"elevated": "Elevated",
+			"expires": "Expires {date}",
+			"logout_all_question": "Are you sure you want to log out all sessions?",
+			"logout_all_submit": "Logout All Sessions",
+			"logout_all_trigger": "Logout All",
+			"logout_single": "Are you sure you want to log out this session?"
+		},
+		"Upload": {
+			"upload": "Upload"
+		},
+		"UserCard": {
+			"you": "(You)"
+		},
+		"UserDiscovery": {
+			"no_results": "No results",
+			"placeholder": "Add users and roles"
+		},
+		"UserMenu": {
+			"account": "Your Account",
+			"admin": "Administration"
+		},
+		"Version": {
+			"error": "Latest unknown",
+			"latest": "Latest",
+			"upgrade": "<span class=\"version\">{latest}</span> available"
+		},
+		"ZodInput": {
+			"invalid_type": "Invalid input type: {type}"
+		}
+	},
+	"generic": {
+		"action_irreversible": "This action can't be undone.",
+		"cancel": "Cancel",
+		"change": "Change",
+		"create": "Create",
+		"delete": "Delete",
+		"done": "Done",
+		"email": "Email",
+		"loading": "Loading...",
+		"login": "Login",
+		"logout": "Logout",
+		"no": "No",
+		"none": "None",
+		"ok": "Okay",
+		"preferences": "Preferences",
+		"register": "Register",
+		"sessions": "Sessions",
+		"unknown": "Unknown",
+		"unnamed": "Unnamed",
+		"username": "Name",
+		"yes": "Yes"
+	},
+	"page": {
+		"account": {
+			"delete_account": "Delete Account",
+			"delete_account_confirm": "Are you sure you want to delete your account?",
+			"edit_email": "Email Address",
+			"edit_name": "What do you want to be called?",
+			"email_verified_on": "Email verified on {date}",
+			"greeting": "Welcome, {name}",
+			"passkeys": {
+				"backed_up": "This passkey is backed up",
+				"create": "Create",
+				"created": "Created {date}",
+				"delete": "Delete",
+				"delete_confirm": "Are you sure you want to delete this passkey?",
+				"edit_name": "Passkey Name",
+				"min_one": "You must have at least one passkey",
+				"multi_device": "Multiple devices",
+				"name_type_error": "Passkey name must be a string",
+				"not_backed_up": "This passkey is not backed up",
+				"rename": "Rename",
+				"single_device": "Single device",
+				"title": "Passkeys"
+			},
+			"personal_info": "Personal Information",
+			"preferences": "Preferences",
+			"profile_alt": "User profile",
+			"sessions": "Sessions",
+			"title": "Your Account",
+			"user_id": "User ID",
+			"user_id_hint": "This is your UUID. It can't be changed.",
+			"verification_sent": "Verification email sent",
+			"verify": "Verify"
+		},
+		"admin": {
+			"heading": "Administration",
+			"audit": {
+				"any": "Any",
+				"apply": "Apply",
+				"error_stack": "Error Stack",
+				"event_heading": "Audit Event",
+				"event_title": "Admin — Audit Log Event #{id}",
+				"extra_data": "Extra Data",
+				"filter": {
+					"event": "Event Name:",
+					"severity": "Minimum Severity:",
+					"since": "Since:",
+					"source": "Source:",
+					"tags": "Tags:",
+					"until": "Until:",
+					"user": "User UUID:"
+				},
+				"filters": "Filters",
+				"heading": "Audit Log",
+				"invalid_filter": "Invalid Filter:",
+				"name": "Name",
+				"no_events": "No audit log events found",
+				"reset": "Reset",
+				"severity": "Severity",
+				"source": "Source",
+				"tags": "Tags",
+				"timestamp": "Timestamp",
+				"title": "Admin — Audit Log",
+				"user": "User",
+				"uuid": "UUID"
+			},
+			"config": {
+				"active": "Active Configuration",
+				"loaded_files": "Loaded Files",
+				"title": "Admin — Configuration"
+			},
+			"dashboard": {
+				"audit_link": "Audit Log",
+				"config_files": "{count} files loaded.",
+				"config_link": "Configuration",
+				"plugins_link": "Plugins",
+				"plugins_loaded": "{count} plugins loaded.",
+				"stats": "{users} users, {sessions} sessions, {passkeys} passkeys.",
+				"title": "Admin — Dashboard",
+				"users_link": "Users"
+			},
+			"plugins": {
+				"author": "Author:",
+				"configuration": "Configuration",
+				"heading": "Plugins",
+				"loaded_from": "Loaded from",
+				"none": "No plugins loaded.",
+				"provided_apps": "Provided apps:",
+				"title": "Admin — Plugins"
+			},
+			"users": {
+				"admin_tag": "Admin",
+				"administrator": "Administrator",
+				"attributes": "Attributes",
+				"audit": "Audit",
+				"back": "Back to all users",
+				"create": "Create User",
+				"created_title": "New User Created",
+				"created_url": "They can log in using this URL:",
+				"default_image": "Default",
+				"delete_confirm": "Are you sure you want to delete this user?",
+				"delete_user": "Delete User",
+				"display_name": "Display Name",
+				"email_not_verified": "not verified",
+				"email_verified": "verified {date}",
+				"heading": "Users",
+				"manage": "Manage",
+				"manage_heading": "User Management",
+				"manage_title": "Admin — User Management",
+				"none": "No users!",
+				"profile_image": "Profile Image",
+				"registered": "Registered",
+				"roles": "Roles",
+				"suspend": "Suspend",
+				"suspended": "Suspended",
+				"tags": "Tags",
+				"title": "Admin — Users",
+				"unsuspend": "Unsuspend",
+				"uuid": "UUID"
+			}
+		},
+		"login": {
+			"client": {
+				"authorize": "Authorize",
+				"confirm": "Are you sure you want to log in to this local client?",
+				"success": "Login successful! You can close this tab.",
+				"title": "Local Client Login"
+			},
+			"failed": "Login Failed"
+		}
+	},
+	"preference": {
+		"debug": "Debug mode"
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.16.7",
+	"version": "0.17.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -26,10 +26,12 @@
 		"assets",
 		"dist",
 		"lib",
+		"locales",
 		"styles",
 		"axium-client.service"
 	],
 	"exports": {
+		"./package.json": "./package.json",
 		".": "./dist/index.js",
 		"./*": "./dist/*.js",
 		"./components": "./lib/index.js",
@@ -42,9 +44,9 @@
 	},
 	"peerDependencies": {
 		"@axium/core": ">=0.20.3",
-		"utilium": "^2.6.3",
-		"zod": "^4.0.5",
-		"svelte": "^5.36.0"
+		"svelte": "^5.36.0",
+		"utilium": "^2.8.0",
+		"zod": "^4.0.5"
 	},
 	"dependencies": {
 		"@simplewebauthn/browser": "^13.1.0",