@axium/server 0.37.2 → 0.38.0

package/dist/acl.d.ts

@@ -2,11 +2,14 @@ import { type AccessControl, type AccessControllable, type AccessTarget, type Us
 import type * as kysely from 'kysely';
 import type { WithRequired } from 'utilium';
 import * as db from './database.js';
+export interface DBAccessControllable extends Omit<AccessControllable, 'id'> {
+    id: string | kysely.Generated<string>;
+}
 type _TableNames = keyof {
     [K in keyof db.Schema as db.Schema[K] extends db.DBAccessControl ? K : never]: null;
 };
 type _TargetNames = keyof db.Schema & keyof {
-    [K in keyof db.Schema as db.Schema[K] extends AccessControllable ? (`acl.${K}` extends keyof db.Schema ? K : never) : never]: null;
+    [K in keyof db.Schema as db.Schema[K] extends DBAccessControllable ? `acl.${K}` extends keyof db.Schema ? K : never : never]: null;
 };
 /**
  * `never` causes a ton of problems, so we use `string` if none of the tables are shareable.
@@ -28,16 +31,19 @@ export interface ACLSelectionOptions {
     /** Instead of using the `id` from `table`, use the `id` from this instead */
     alias?: string;
 }
+/** Match ACL entries, optionally selecting for a given user-like object */
+export declare function match(user?: Pick<UserInternal, 'id' | 'roles' | 'tags'>): (eb: kysely.ExpressionBuilder<db.Schema, any>) => kysely.ExpressionWrapper<db.Schema, any, kysely.SqlBool>;
 /**
  * Helper to select all access controls for a given table, including the user information.
  * Optionally filter for the entries applicable to a specific user.
  * This includes entries matching the user's ID, roles, or tags along with the "public" entry where all three "target" columns are null.
  */
-export declare function from<const TB extends TargetName>(table: TB, opt?: ACLSelectionOptions): (eb: kysely.ExpressionBuilder<db.Schema, any>) => kysely.AliasedRawBuilder<Result<`acl.${TB}`>[], 'acl'>;
+export declare function from<const TB extends TargetName, const DB = db.Schema>(table: TB, opt?: ACLSelectionOptions): (eb: kysely.ExpressionBuilder<DB, any>) => kysely.AliasedRawBuilder<Result<`acl.${TB}`>[], 'acl'>;
 export declare function get<const TB extends TableName>(table: TB, itemId: string): Promise<WithRequired<Result<TB>, 'user'>[]>;
 export declare function update<const TB extends TableName>(table: TB, itemId: string, target: AccessTarget, permissions: PermissionsFor<TB>): Promise<Result<TB>>;
 export declare function remove<const TB extends TableName>(table: TB, itemId: string, target: AccessTarget): Promise<Result<TB>>;
 export declare function add<const TB extends TableName>(table: TB, itemId: string, target: AccessTarget): Promise<Result<TB>>;
+/** Check an ACL against a set of permissions. */
 export declare function check<const TB extends TableName>(acl: Result<TB>[], permissions: Partial<PermissionsFor<TB>>): Set<keyof PermissionsFor<TB>>;
 export declare function listTables(): Record<string, TableName>;
 export interface OptionsForWhere<TB extends TargetName> {

package/dist/acl.js

@@ -1,6 +1,20 @@
 import { fromTarget } from '@axium/core';
 import { jsonArrayFrom } from 'kysely/helpers/postgres';
 import * as db from './database.js';
+/** Match ACL entries, optionally selecting for a given user-like object */
+export function match(user) {
+    return function (eb) {
+        const allNull = eb.and([eb('userId', 'is', null), eb('role', 'is', null), eb('tag', 'is', null)]);
+        if (!user)
+            return allNull;
+        const ors = [allNull, eb('userId', '=', user.id)];
+        if (user.roles.length)
+            ors.push(eb('role', 'in', user.roles));
+        if (user.tags.length)
+            ors.push(eb('tag', 'in', user.tags));
+        return eb.or(ors);
+    };
+}
 /**
  * Helper to select all access controls for a given table, including the user information.
  * Optionally filter for the entries applicable to a specific user.
@@ -12,17 +26,7 @@ export function from(table, opt = {}) {
         .selectAll()
         .$if(!opt.user, qb => qb.select(db.userFromId))
         .whereRef('_acl.itemId', '=', `${opt.alias || table}.id`)
-        .$if(!!opt.user, qb => qb.where(eb => {
-        const allNull = eb.and([eb('userId', 'is', null), eb('role', 'is', null), eb('tag', 'is', null)]);
-        if (!opt.user)
-            return allNull;
-        const ors = [allNull, eb('userId', '=', opt.user.id)];
-        if (opt.user.roles.length)
-            ors.push(eb('role', 'in', opt.user.roles));
-        if (opt.user.tags.length)
-            ors.push(eb('tag', 'in', opt.user.tags));
-        return eb.or(ors);
-    })))
+        .where(match(opt.user)))
         .$castTo()
         .as('acl');
 }
@@ -62,6 +66,7 @@ export async function add(table, itemId, target) {
         .$castTo()
         .executeTakeFirstOrThrow();
 }
+/** Check an ACL against a set of permissions. */
 export function check(acl, permissions) {
     const allowed = new Set();
     const all = new Set(Object.keys(permissions));
@@ -91,14 +96,7 @@ export function existsIn(table, user, options = {}) {
         .selectFrom(`acl.${table}`)
         // @ts-expect-error 2349
         .whereRef('itemId', '=', `${options.alias || `public.${table}`}.${options.itemId || 'id'}`)
-        .where((eb) => {
-        const ors = [eb('userId', '=', user.id)];
-        if (user.roles.length)
-            ors.push(eb('role', 'in', user.roles));
-        if (user.tags.length)
-            ors.push(eb('tag', 'in', user.tags));
-        return eb.or(ors);
-    }));
+        .where(match(user)));
 }
 /**
  * Use in a `where` to filter by items a user has access to

package/dist/api/admin.js

@@ -1,12 +1,14 @@
+import client from '@axium/client/package.json' with { type: 'json' };
 import { AuditFilter, Severity, UserAdminChange } from '@axium/core';
 import { debug, errorText, writeJSON } from '@axium/core/node/io';
-import { getVersionInfo } from '@axium/core/node/packages';
+import core from '@axium/core/package.json' with { type: 'json' };
 import { _findPlugin, plugins, PluginUpdate, serverConfigs } from '@axium/core/plugins';
 import { jsonObjectFrom } from 'kysely/helpers/postgres';
 import { mkdirSync } from 'node:fs';
 import { dirname } from 'node:path/posix';
 import { deepAssign, omit } from 'utilium';
 import * as z from 'zod';
+import $pkg from '../../package.json' with { type: 'json' };
 import { audit, events, getEvents } from '../audit.js';
 import { createVerification, requireSession } from '../auth.js';
 import { config } from '../config.js';
@@ -40,9 +42,9 @@ addRoute({
             configFiles: config.files.size,
             plugins: plugins.size,
             versions: {
-                server: await getVersionInfo('@axium/server'),
-                core: await getVersionInfo('@axium/core'),
-                client: await getVersionInfo('@axium/client'),
+                server: $pkg.version,
+                core: core.version,
+                client: client.version,
             },
         };
     },
@@ -51,9 +53,7 @@ addRoute({
     path: '/api/admin/plugins',
     async GET(req) {
         await assertAdmin(this, req);
-        return await Array.fromAsync(plugins
-            .values()
-            .map(async (p) => Object.assign(omit(p, '_hooks', '_client'), p.update_checks ? await getVersionInfo(p.specifier, p.loadedBy) : { latest: null })));
+        return await Array.fromAsync(plugins.values().map(p => omit(p, '_hooks', '_client')));
     },
     async POST(req) {
         await assertAdmin(this, req);

package/dist/auth.js

@@ -118,7 +118,7 @@ export async function authSessionForItem(itemType, itemId, permissions, session,
         .selectFrom(itemType)
         .selectAll()
         .where('id', '=', itemId)
-        .$if(!!userId, eb => eb.select(acl.from(itemType, { user })))
+        .select(acl.from(itemType, { user }))
         .executeTakeFirstOrThrow()
         .catch(e => {
         if (e.message.includes('no rows'))
@@ -138,33 +138,40 @@ export async function authSessionForItem(itemType, itemId, permissions, session,
     if (userId == item.userId)
         return result;
     result.fromACL = true;
-    let current = item;
-    for (let i = 0; i < 25; i++) {
-        try {
-            if (!current.acl || !current.acl.length)
-                error(403, 'Item is not shared with you');
-            const missing = Array.from(acl.check(current.acl, permissions));
-            if (missing.length)
-                error(403, 'Missing permissions: ' + missing.join(', '));
-            return result;
-        }
-        catch (e) {
-            if (!current.parentId || !recursive)
+    const matchingControls = recursive
+        ? await db
+            .withRecursive('parents', qc => qc.selectFrom(itemType)
+            .select(['id', 'parentId'])
+            .$castTo()
+            .select(acl.from(itemType, { user }))
+            .select(eb => eb.lit(0).as('depth'))
+            .where('id', '=', itemId)
+            .unionAll(qc.selectFrom(`${itemType} as item`)
+            .select(['item.id', 'item.parentId'])
+            .innerJoin('parents as p', 'item.id', 'p.parentId')
+            .select(eb => eb(eb.ref('p.depth'), '+', eb.lit(1)).as('depth'))
+            .select(acl.from(itemType, { user, alias: 'item' }))))
+            .selectFrom('parents')
+            .select('acl')
+            .execute()
+            .then(parents => parents.flatMap(p => p.acl))
+            .catch(e => {
+            if (!(e instanceof Error))
                 throw e;
-            current = (await db
-                .selectFrom(itemType)
-                .selectAll()
-                .where('id', '=', current.parentId)
-                .$if(!!userId, eb => eb.select(acl.from(itemType, { user })))
-                .executeTakeFirstOrThrow()
-                .catch(e => {
-                if (e.message.includes('no rows'))
-                    error(404, itemType + ' not found');
-                throw e;
-            }));
-        }
-    }
-    error(403, 'You do not have permissions for any of the last 25 parent items');
+            switch (e.message) {
+                case 'column "parentId" does not exist':
+                    error(500, `${itemType} does not support recursive ACLs`);
+                default:
+                    throw e;
+            }
+        })
+        : item.acl;
+    if (!matchingControls.length)
+        error(403, 'Item is not shared with you');
+    const missing = Array.from(acl.check(matchingControls, permissions));
+    if (missing.length)
+        error(403, 'Missing permissions: ' + missing.join(', '));
+    return result;
 }
 /**
  * Authenticate a request against an "item" which has an ACL table.

package/dist/database.d.ts

@@ -29,7 +29,7 @@ export type TablesMatching<T> = (string & keyof Schema) & keyof {
  */
 export declare function userFromId<TB extends TablesMatching<{
     userId: string;
-}>>(builder: kysely.ExpressionBuilder<Schema, TB>): kysely.AliasedRawBuilder<UserInternal, 'user' | TB>;
+}>, const DB extends Schema = Schema>(builder: kysely.ExpressionBuilder<DB, TB>): kysely.AliasedRawBuilder<UserInternal, 'user' | TB>;
 /**
  * Used for `update ... set ... from`
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/server",
-	"version": "0.37.2",
+	"version": "0.38.0",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -47,8 +47,8 @@
 		"clean": "rm -rf build .svelte-kit node_modules/{.vite,.vite-temp}"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.13.0",
-		"@axium/core": ">=0.20.0",
+		"@axium/client": ">=0.17.0",
+		"@axium/core": ">=0.21.0",
 		"kysely": "^0.28.0",
 		"utilium": "^2.6.0",
 		"zod": "^4.0.5"

package/routes/account/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { fetchAPI, text } from '@axium/client';
 	import { ClipboardCopy, FormDialog, Icon, Logout, SessionList, ZodForm } from '@axium/client/components';
-	import { fetchAPI } from '@axium/client/requests';
 	import '@axium/client/styles/account';
 	import { createPasskey, deletePasskey, deleteUser, sendVerificationEmail, updatePasskey, updateUser } from '@axium/client/user';
 	import { preferenceLabels, Preferences } from '@axium/core/preferences';
@@ -23,7 +23,7 @@
 </script>
 
 <svelte:head>
-	<title>Your Account</title>
+	<title>{text('page.account.title')}</title>
 </svelte:head>
 
 {#snippet action(name: string, i: string = 'pen')}
@@ -34,95 +34,101 @@
 
 <div class="Account flex-content">
 	<div id="pfp-container">
-		<img id="pfp" src={getUserImage(user)} alt="User profile" width="100px" height="100px" />
+		<img id="pfp" src={getUserImage(user)} alt={text('page.account.profile_alt')} width="100px" height="100px" />
 	</div>
-	<p class="greeting">Welcome, {user.name}</p>
+	<p class="greeting">{text('page.account.greeting', { name: user.name })}</p>
 
 	<div id="info" class="section main">
-		<h3>Personal Information</h3>
+		<h3>{text('page.account.personal_info')}</h3>
 		<div class="item info">
-			<p class="subtle">Name</p>
+			<p class="subtle">{text('generic.username')}</p>
 			<p>{user.name}</p>
 			{@render action('edit_name')}
 		</div>
-		<FormDialog id="edit_name" submit={_editUser} submitText="Change">
+		<FormDialog id="edit_name" submit={_editUser} submitText={text('generic.change')}>
 			<div>
-				<label for="name">What do you want to be called?</label>
+				<label for="name">{text('page.account.edit_name')}</label>
 				<input name="name" type="text" value={user.name || ''} required />
 			</div>
 		</FormDialog>
 		<div class="item info">
-			<p class="subtle">Email</p>
+			<p class="subtle">{text('generic.email')}</p>
 			<p>
 				{user.email}
 				{#if user.emailVerified}
-					<dfn title="Email verified on {user.emailVerified.toLocaleDateString()}">
+					<dfn title={text('page.account.email_verified_on', { date: user.emailVerified.toLocaleDateString() })}>
 						<Icon i="regular/circle-check" />
 					</dfn>
 				{:else if canVerify}
 					<button onclick={() => sendVerificationEmail(user.id).then(() => (verificationSent = true))}>
-						{verificationSent ? 'Verification email sent' : 'Verify'}
+						{verificationSent ? text('page.account.verification_sent') : text('page.account.verify')}
 					</button>
 				{/if}
 			</p>
 			{@render action('edit_email')}
 		</div>
-		<FormDialog id="edit_email" submit={_editUser} submitText="Change">
+		<FormDialog id="edit_email" submit={_editUser} submitText={text('generic.change')}>
 			<div>
-				<label for="email">Email Address</label>
+				<label for="email">{text('page.account.edit_email')}</label>
 				<input name="email" type="email" value={user.email || ''} required />
 			</div>
 		</FormDialog>
 
 		<div class="item info">
-			<p class="subtle">User ID <dfn title="This is your UUID. It can't be changed."><Icon i="regular/circle-info" /></dfn></p>
+			<p class="subtle">
+				{text('page.account.user_id')} <dfn title={text('page.account.user_id_hint')}><Icon i="regular/circle-info" /></dfn>
+			</p>
 			<p>{user.id}</p>
 			<ClipboardCopy value={user.id} --size="16px" />
 		</div>
 		<div class="inline-button-container">
-			<button command="show-modal" commandfor="logout" class="inline-button signout">Sign Out</button>
-			<button command="show-modal" commandfor="delete" class="inline-button danger">Delete Account</button>
+			<button command="show-modal" commandfor="logout" class="inline-button logout">{text('generic.logout')}</button>
+			<button command="show-modal" commandfor="delete" class="inline-button danger">{text('page.account.delete_account')}</button>
 			<Logout />
 			<FormDialog
 				id="delete"
 				submit={() => deleteUser(user.id).then(() => (window.location.href = '/'))}
-				submitText="Delete Account"
+				submitText={text('page.account.delete_account')}
 				submitDanger
 			>
-				<p>Are you sure you want to delete your account?<br />This action can't be undone.</p>
+				<p>{text('page.account.delete_account_confirm')}<br />{text('generic.action_irreversible')}</p>
 			</FormDialog>
 		</div>
 	</div>
 
 	<div id="passkeys" class="section main">
-		<h3>Passkeys</h3>
+		<h3>{text('page.account.passkeys.title')}</h3>
 		{#each passkeys as passkey}
 			<div class="item passkey">
 				<p>
-					<dfn title={passkey.deviceType == 'multiDevice' ? 'Multiple devices' : 'Single device'}>
+					<dfn
+						title={passkey.deviceType == 'multiDevice'
+							? text('page.account.passkeys.multi_device')
+							: text('page.account.passkeys.single_device')}
+					>
 						<Icon i={passkey.deviceType == 'multiDevice' ? 'laptop-mobile' : 'mobile'} --size="16px" />
 					</dfn>
-					<dfn title="This passkey is {passkey.backedUp ? '' : 'not '}backed up">
+					<dfn title={passkey.backedUp ? text('page.account.passkeys.backed_up') : text('page.account.passkeys.not_backed_up')}>
 						<Icon i={passkey.backedUp ? 'circle-check' : 'circle-xmark'} --size="16px" />
 					</dfn>
 					{#if passkey.name}
 						<p>{passkey.name}</p>
 					{:else}
-						<p class="subtle"><i>Unnamed</i></p>
+						<p class="subtle"><i>{text('generic.unnamed')}</i></p>
 					{/if}
 				</p>
-				<p>Created {passkey.createdAt.toLocaleString()}</p>
+				<p>{text('page.account.passkeys.created', { date: passkey.createdAt.toLocaleString() })}</p>
 				<button commandfor="edit_passkey:{passkey.id}" command="show-modal" class="icon-text">
 					<Icon i="pen" --size="16px" />
-					<span class="mobile-only">Rename</span>
+					<span class="mobile-only">{text('page.account.passkeys.rename')}</span>
 				</button>
 				{#if passkeys.length > 1}
 					<button commandfor="delete_passkey:{passkey.id}" command="show-modal" class="icon-text">
 						<Icon i="trash" --size="16px" />
-						<span class="mobile-only">Delete</span>
+						<span class="mobile-only">{text('page.account.passkeys.delete')}</span>
 					</button>
 				{:else}
-					<dfn title="You must have at least one passkey" class="disabled icon-text mobile-hide">
+					<dfn title={text('page.account.passkeys.min_one')} class="disabled icon-text mobile-hide">
 						<Icon i="trash-slash" --fill="#888" --size="16px" />
 					</dfn>
 				{/if}
@@ -130,39 +136,40 @@
 			<FormDialog
 				id={'edit_passkey:' + passkey.id}
 				submit={data => {
-					if (typeof data.name != 'string') throw 'Passkey name must be a string';
+					if (typeof data.name != 'string') throw text('page.account.passkeys.name_type_error');
 					passkey.name = data.name;
 					return updatePasskey(passkey.id, data);
 				}}
-				submitText="Change"
+				submitText={text('generic.change')}
 			>
 				<div>
-					<label for="name">Passkey Name</label>
+					<label for="name">{text('page.account.passkeys.edit_name')}</label>
 					<input name="name" type="text" value={passkey.name || ''} />
 				</div>
 			</FormDialog>
 			<FormDialog
 				id={'delete_passkey:' + passkey.id}
 				submit={() => deletePasskey(passkey.id).then(() => passkeys.splice(passkeys.indexOf(passkey), 1))}
-				submitText="Delete"
+				submitText={text('page.account.passkeys.delete')}
 				submitDanger={true}
 			>
-				<p>Are you sure you want to delete this passkey?<br />This action can't be undone.</p>
+				<p>{text('page.account.passkeys.delete_confirm')}<br />{text('generic.action_irreversible')}</p>
 			</FormDialog>
 		{/each}
 
 		<button onclick={() => createPasskey(user.id).then(passkeys.push.bind(passkeys))} class="inline-button icon-text">
-			<Icon i="plus" /> Create
+			<Icon i="plus" />
+			{text('page.account.passkeys.create')}
 		</button>
 	</div>
 
 	<div id="sessions" class="section main">
-		<h3>Sessions</h3>
+		<h3>{text('page.account.sessions')}</h3>
 		<SessionList {sessions} {currentSession} {user} redirectAfterLogoutAll />
 	</div>
 
 	<div id="preferences" class="section main">
-		<h3>Preferences</h3>
+		<h3>{text('page.account.preferences')}</h3>
 		<ZodForm
 			bind:rootValue={user.preferences}
 			idPrefix="preferences"

package/routes/admin/+page.svelte

@@ -1,40 +1,45 @@
-<script>
+<script lang="ts">
+	import { text } from '@axium/client';
 	import { Version } from '@axium/client/components';
 	import { Severity } from '@axium/core';
-	import { capitalize } from 'utilium';
+	import { getPackage } from '@axium/core/packages';
+	import { _throw, capitalize } from 'utilium';
 
 	const { data } = $props();
+	const packages = ['server', 'core', 'client'] as const;
 </script>
 
 <svelte:head>
-	<title>Admin — Dashboard</title>
+	<title>{text('page.admin.dashboard.title')}</title>
 </svelte:head>
 
-<h2>Administration</h2>
+<h2>{text('page.admin.heading')}</h2>
 
-{#each ['server', 'core', 'client'] as name}
-	{@const info = data.versions[name]}
-	<p>Axium {capitalize(name)} <Version v={info.version} latest={info.latest} /></p>
+{#each packages as name}
+	<p>
+		Axium {capitalize(name)}
+		<Version v={data.versions[name]} latest={getPackage('@axium/' + name).then(pkg => pkg?._latest || _throw(null))} />
+	</p>
 {/each}
 
-<h3><a href="/admin/users">Users</a></h3>
+<h3><a href="/admin/users">{text('page.admin.dashboard.users_link')}</a></h3>
 
-<p>{data.users} users, {data.sessions} sessions, {data.passkeys} passkeys.</p>
+<p>{text('page.admin.dashboard.stats', { users: data.users, sessions: data.sessions, passkeys: data.passkeys })}</p>
 
-<h3><a href="/admin/config">Configuration</a></h3>
+<h3><a href="/admin/config">{text('page.admin.dashboard.config_link')}</a></h3>
 
-<p>{data.configFiles} files loaded.</p>
+<p>{text('page.admin.dashboard.config_files', { count: data.configFiles })}</p>
 
-<h3><a href="/admin/plugins">Plugins</a></h3>
+<h3><a href="/admin/plugins">{text('page.admin.dashboard.plugins_link')}</a></h3>
 
-<p>{data.plugins} plugins loaded.</p>
+<p>{text('page.admin.dashboard.plugins_loaded', { count: data.plugins })}</p>
 
-<h3><a href="/admin/audit">Audit Log</a></h3>
+<h3><a href="/admin/audit">{text('page.admin.audit.heading')}</a></h3>
 
 <p>
-	{Object.entries(data.auditEvents)
-		.filter(([, count]) => count)
-		.map(([severity, count]) => `${count} ${Severity[severity].toUpperCase()} events`)
+	{data.auditEvents
+		.map((count, severity) => count && `${count} ${Severity[severity].toUpperCase()} events`)
+		.filter(v => v)
 		.join(', ')}.
 </p>
 

package/routes/admin/audit/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { Icon } from '@axium/client/components';
 	import '@axium/client/styles/list';
 	import './styles.css';
@@ -9,14 +10,14 @@
 </script>
 
 <svelte:head>
-	<title>Admin — Audit Log</title>
+	<title>{text('page.admin.audit.title')}</title>
 </svelte:head>
 
-<h2>Audit Log</h2>
+<h2>{text('page.admin.audit.heading')}</h2>
 
 {#if data.filterError}
 	<div class="error">
-		<strong>Invalid Filter:</strong>
+		<strong>{text('page.admin.audit.invalid_filter')}</strong>
 		{#each data.filterError.split('\n') as line}
 			<p>{line}</p>
 		{/each}
@@ -24,10 +25,10 @@
 {/if}
 
 <form id="filter" method="dialog">
-	<h4>Filters</h4>
+	<h4>{text('page.admin.audit.filters')}</h4>
 
 	<div class="filter-field">
-		<span>Minimum Severity:</span>
+		<span>{text('page.admin.audit.filter.severity')}</span>
 		<select name="severity" value={data.filter.severity}>
 			{#each severityNames as value}
 				<option {value} selected={value == 'info'}>{capitalize(value)}</option>
@@ -36,25 +37,25 @@
 	</div>
 
 	<div class="filter-field">
-		<span>Since:</span>
+		<span>{text('page.admin.audit.filter.since')}</span>
 		<input type="date" name="since" value={data.filter.since} />
 	</div>
 
 	<div class="filter-field">
-		<span>Until:</span>
+		<span>{text('page.admin.audit.filter.until')}</span>
 		<input type="date" name="until" value={data.filter.until} />
 	</div>
 
 	<div class="filter-field">
-		<span>Tags:</span>
+		<span>{text('page.admin.audit.filter.tags')}</span>
 		<input type="text" name="tags" value={data.filter.tags} />
 	</div>
 
 	<div class="filter-field">
-		<span>Event Name:</span>
+		<span>{text('page.admin.audit.filter.event')}</span>
 		{#if data.configured}
 			<select name="event">
-				<option value="">Any</option>
+				<option value="">{text('page.admin.audit.any')}</option>
 				{#each data.configured.name as name}
 					<option value={name} selected={data.filter.event == name}>{name}</option>
 				{/each}
@@ -65,10 +66,10 @@
 	</div>
 
 	<div class="filter-field">
-		<span>Source:</span>
+		<span>{text('page.admin.audit.filter.source')}</span>
 		{#if data.configured}
 			<select name="source">
-				<option value="">Any</option>
+				<option value="">{text('page.admin.audit.any')}</option>
 				{#each data.configured.source as source}
 					<option value={source} selected={data.filter.source == source}>{source}</option>
 				{/each}
@@ -79,7 +80,7 @@
 	</div>
 
 	<div class="filter-field">
-		<span>User UUID:</span>
+		<span>{text('page.admin.audit.filter.user')}</span>
 		<input type="text" name="user" size="36" value={data.filter.user} />
 	</div>
 
@@ -112,14 +113,14 @@
 					}
 				}
 				location.search = params ? '?' + params.toString() : '';
-			}}>Apply</button
+			}}>{text('page.admin.audit.apply')}</button
 		>
 		<button
 			class="inline-button"
 			onclick={e => {
 				e.preventDefault();
 				location.search = '';
-			}}>Reset</button
+			}}>{text('page.admin.audit.reset')}</button
 		>
 	</div>
 </form>
@@ -127,17 +128,17 @@
 <div class="list-container">
 	<div class="list">
 		<div class="list-item list-header">
-			<span>Timestamp</span>
-			<span>Severity</span>
-			<span>Source</span>
-			<span>Name</span>
-			<span>Tags</span>
-			<span>User</span>
+			<span>{text('page.admin.audit.timestamp')}</span>
+			<span>{text('page.admin.audit.severity')}</span>
+			<span>{text('page.admin.audit.source')}</span>
+			<span>{text('page.admin.audit.name')}</span>
+			<span>{text('page.admin.audit.tags')}</span>
+			<span>{text('page.admin.audit.user')}</span>
 		</div>
 
 		{#each data.events as event}
 			<div class="list-item" onclick={e => e.currentTarget === e.target && (location.href = '/admin/audit/' + event.id)}>
-				<span>{new Date(event.timestamp).toLocaleString()}</span>
+				<span>{event.timestamp.toLocaleString()}</span>
 				<span class="severity--{Severity[event.severity].toLowerCase()}">{Severity[event.severity]}</span>
 				<span>{event.source}</span>
 				<span>{event.name}</span>
@@ -148,12 +149,12 @@
 						{#if event.userId === data.session?.userId}<span class="subtle">(You)</span>{/if}
 					</a>
 				{:else}
-					<i>Unknown</i>
+					<i>{text('generic.unknown')}</i>
 				{/if}
 				<a href="/admin/audit/{event.id}"><Icon i="chevron-right" /></a>
 			</div>
 		{:else}
-			<p class="list-empty">No audit log events found</p>
+			<p class="list-empty">{text('page.admin.audit.no_events')}</p>
 		{/each}
 	</div>
 </div>

package/routes/admin/audit/[id]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { Severity } from '@axium/core/audit';
 	import '../styles.css';
 	import UserCard from '@axium/client/components/UserCard';
@@ -8,40 +9,40 @@
 </script>
 
 <svelte:head>
-	<title>Admin — Audit Log Event #{event.id}</title>
+	<title>{text('page.admin.audit.event_title', { id: event.id })}</title>
 </svelte:head>
 
-<h2>Audit Event</h2>
+<h2>{text('page.admin.audit.event_heading')}</h2>
 
-<h4>UUID</h4>
+<h4>{text('page.admin.audit.uuid')}</h4>
 <p>{event.id}</p>
 
-<h4>Severity</h4>
+<h4>{text('page.admin.audit.severity')}</h4>
 <p class="severity--{Severity[event.severity].toLowerCase()}">{Severity[event.severity]}</p>
 
-<h4>Name</h4>
+<h4>{text('page.admin.audit.name')}</h4>
 <p>{event.name}</p>
 
-<h4>Timestamp</h4>
-<p>{new Date(event.timestamp).toLocaleString()}</p>
+<h4>{text('page.admin.audit.timestamp')}</h4>
+<p>{event.timestamp.toLocaleString()}</p>
 
-<h4>Source</h4>
+<h4>{text('page.admin.audit.source')}</h4>
 <p>{event.source}</p>
 
-<h4>Tags</h4>
+<h4>{text('page.admin.audit.tags')}</h4>
 <p>{event.tags.join(', ')}</p>
 
-<h4>User</h4>
+<h4>{text('page.admin.audit.user')}</h4>
 {#if event.user}
 	<UserCard user={event.user} href="/admin/users/{event.user.id}" />
 {:else}
-	<i>Unknown</i>
+	<i>{text('generic.unknown')}</i>
 {/if}
 
-<h4>Extra Data</h4>
+<h4>{text('page.admin.audit.extra_data')}</h4>
 
 {#if event.name == 'response_error'}
-	<h5>Error Stack</h5>
+	<h5>{text('page.admin.audit.error_stack')}</h5>
 	<pre>{event.extra.stack}</pre>
 {:else}
 	<pre>{JSON.stringify(event.extra, null, 4)}</pre>

package/routes/admin/config/+page.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	const { data } = $props();
 </script>
 
 <svelte:head>
-	<title>Admin — Configuration</title>
+	<title>{text('page.admin.config.title')}</title>
 </svelte:head>
 
-<h2>Active Configuration</h2>
+<h2>{text('page.admin.config.active')}</h2>
 
 <pre>{JSON.stringify(data.config, null, 4)}</pre>
 
-<h2 id="files">Loaded Files</h2>
+<h2 id="files">{text('page.admin.config.loaded_files')}</h2>
 
 {#each Object.entries(data.files) as [path, config]}
 	<details>

package/routes/admin/plugins/+page.svelte

@@ -1,23 +1,31 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { Version, ZodForm } from '@axium/client/components';
 	import { fetchAPI } from '@axium/client/requests';
 	import { serverConfigs } from '@axium/core';
+	import { getPackage } from '@axium/core/packages';
+	import { _throw } from 'utilium';
 
 	const { data } = $props();
 </script>
 
 <svelte:head>
-	<title>Admin — Plugins</title>
+	<title>{text('page.admin.plugins.title')}</title>
 </svelte:head>
 
-<h2>Plugins</h2>
+<h2>{text('page.admin.plugins.heading')}</h2>
 
 {#each data.plugins as plugin}
 	{@const cfg = serverConfigs.get(plugin.name)}
 	<div class="plugin">
-		<h3>{plugin.name}<Version v={plugin.version} latest={plugin.latest} /></h3>
+		<h3>
+			{plugin.name}<Version
+				v={plugin.version}
+				latest={plugin.update_checks ? getPackage(plugin.name).then(p => p?._latest || _throw(null)) : null}
+			/>
+		</h3>
 		<p>
-			<strong>Loaded from</strong>
+			<strong>{text('page.admin.plugins.loaded_from')}</strong>
 			{#if plugin.path.endsWith('/package.json')}
 				<span class="path plugin-path">{plugin.path.slice(0, -13)}</span>
 			{:else}
@@ -28,18 +36,18 @@
 				<a class="path" href="/admin/config#{plugin.loadedBy}">{plugin.loadedBy}</a>
 			{/if}
 		</p>
-		<p><strong>Author:</strong> {plugin.author}</p>
+		<p><strong>{text('page.admin.plugins.author')}</strong> {plugin.author}</p>
 		<p class="apps">
-			<strong>Provided apps:</strong>
+			<strong>{text('page.admin.plugins.provided_apps')}</strong>
 			{#if plugin.apps?.length}
 				{#each plugin.apps as app, i}
 					<a href="/{app.id}">{app.name}</a>{i != plugin.apps.length - 1 ? ', ' : ''}
 				{/each}
-			{:else}<i>None</i>{/if}
+			{:else}<i>{text('generic.none')}</i>{/if}
 		</p>
 		<p>{plugin.description}</p>
 		{#if cfg && plugin.config}
-			<h4>Configuration</h4>
+			<h4>{text('page.admin.plugins.configuration')}</h4>
 			{@const { schema, labels } = cfg}
 			<ZodForm
 				rootValue={plugin.config}
@@ -51,7 +59,7 @@
 		{/if}
 	</div>
 {:else}
-	<i>No plugins loaded.</i>
+	<i>{text('page.admin.plugins.none')}</i>
 {/each}
 
 <style>

package/routes/admin/users/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { FormDialog, Icon, URLText } from '@axium/client/components';
 	import { fetchAPI } from '@axium/client/requests';
 	import '@axium/client/styles/list';
@@ -13,10 +14,10 @@
 </script>
 
 <svelte:head>
-	<title>Admin — Users</title>
+	<title>{text('page.admin.users.title')}</title>
 </svelte:head>
 
-<h2>Users</h2>
+<h2>{text('page.admin.users.heading')}</h2>
 
 {#snippet attr(i: string, text: string, color: string = colorHashRGB(text))}
 	<span class="attribute" style:background-color={color}><Icon {i} />{text}</span>
@@ -24,12 +25,12 @@
 
 <button command="show-modal" commandfor="create-user" class="icon-text">
 	<Icon i="plus" />
-	Create User
+	{text('page.admin.users.create')}
 </button>
 
 <FormDialog
 	id="create-user"
-	submitText="Create"
+	submitText={text('generic.create')}
 	submit={(data: { email: string; name: string }) =>
 		fetchAPI('PUT', 'admin/users', data).then(res => {
 			verification = res.verification;
@@ -38,30 +39,30 @@
 		})}
 >
 	<div>
-		<label for="email">Email</label>
+		<label for="email">{text('generic.email')}</label>
 		<input name="email" type="email" required />
 	</div>
 	<div>
-		<label for="name">Name</label>
+		<label for="name">{text('generic.username')}</label>
 		<input name="name" type="text" required />
 	</div>
 </FormDialog>
 
 <dialog bind:this={createdUserDialog} id="created-user-verification">
-	<h3>New User Created</h3>
+	<h3>{text('page.admin.users.created_title')}</h3>
 
-	<p>They can log in using this URL:</p>
+	<p>{text('page.admin.users.created_url')}</p>
 
 	<URLText url="/login/token?user={verification?.userId}&token={verification?.token}" />
 
-	<button onclick={() => createdUserDialog?.close()}>Okay</button>
+	<button onclick={() => createdUserDialog?.close()}>{text('generic.ok')}</button>
 </dialog>
 
 <div id="user-list" class="list">
 	<div class="list-item list-header">
-		<span>Name</span>
-		<span>Email</span>
-		<span>Attributes</span>
+		<span>{text('generic.username')}</span>
+		<span>{text('generic.email')}</span>
+		<span>{text('page.admin.users.attributes')}</span>
 	</div>
 	{#each users as user}
 		<div class="user list-item" onclick={e => e.currentTarget === e.target && (location.href = '/admin/users/' + user.id)}>
@@ -69,7 +70,7 @@
 			<span>{user.email}</span>
 			<span class="mobile-hide">
 				{#if user.isAdmin}
-					{@render attr('crown', 'Admin', '#710')}
+					{@render attr('crown', text('page.admin.users.admin_tag'), '#710')}
 				{/if}
 				{#each user.tags as tag}
 					{@render attr('hashtag', tag)}
@@ -80,15 +81,15 @@
 			</span>
 			<a class="icon-text mobile-button" href="/admin/audit?user={user.id}">
 				<Icon i="file-shield" />
-				<span class="mobile-only">Audit</span>
+				<span class="mobile-only">{text('page.admin.users.audit')}</span>
 			</a>
 			<a class="icon-text mobile-button" href="/admin/users/{user.id}">
 				<Icon i="chevron-right" />
-				<span class="mobile-only">Manage</span>
+				<span class="mobile-only">{text('page.admin.users.manage')}</span>
 			</a>
 		</div>
 	{:else}
-		<div class="error">No users!</div>
+		<div class="error">{text('page.admin.users.none')}</div>
 	{/each}
 </div>
 

package/routes/admin/users/[id]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { ClipboardCopy, FormDialog, Icon, SessionList, ZodForm, ZodInput } from '@axium/client/components';
 	import { fetchAPI } from '@axium/client/requests';
 	import '@axium/client/styles/account';
@@ -19,108 +20,110 @@
 </script>
 
 <svelte:head>
-	<title>Admin — User Management</title>
+	<title>{text('page.admin.users.manage_title')}</title>
 </svelte:head>
 
 <a href="/admin/users">
 	<button class="icon-text">
-		<Icon i="up-left" /> Back to all users
+		<Icon i="up-left" />
+		{text('page.admin.users.back')}
 	</button>
 </a>
 
-<h2>User Management</h2>
+<h2>{text('page.admin.users.manage_heading')}</h2>
 
 <div id="info" class="section main">
 	<div class="item info">
-		<p>UUID</p>
+		<p>{text('page.admin.users.uuid')}</p>
 		<p>{user.id}</p>
 		<ClipboardCopy value={user.id} --size="16px" />
 	</div>
 
 	<div class="item info">
-		<p>Display Name</p>
+		<p>{text('page.admin.users.display_name')}</p>
 		<p>{user.name}</p>
 		<ClipboardCopy value={user.name} --size="16px" />
 	</div>
 
 	<div class="item info">
-		<p>Email</p>
+		<p>{text('generic.email')}</p>
 		<p>
 			<a href="mailto:{user.email}">{user.email}</a>, {user.emailVerified
-				? 'verified ' + user.emailVerified.toLocaleString()
-				: 'not verified'}
+				? text('page.admin.users.email_verified', { date: user.emailVerified.toLocaleString() })
+				: text('page.admin.users.email_not_verified')}
 		</p>
 		<ClipboardCopy value={user.email} --size="16px" />
 	</div>
 
 	<div class="item info">
-		<p>Registered</p>
+		<p>{text('page.admin.users.registered')}</p>
 		<p>{formatDateRange(user.registeredAt)}</p>
 		<ClipboardCopy value={user.registeredAt.toISOString()} --size="16px" />
 	</div>
 	<div class="item info">
-		<p>Administrator</p>
+		<p>{text('page.admin.users.administrator')}</p>
 		{#if user.isAdmin}
-			<strong>Yes</strong>
+			<strong>{text('generic.yes')}</strong>
 		{:else}
-			<p>No</p>
+			<p>{text('generic.no')}</p>
 		{/if}
 		<p></p>
 	</div>
 	<div class="item info">
-		<p>Suspended</p>
+		<p>{text('page.admin.users.suspended')}</p>
 		{#if user.isSuspended}
-			<strong>Yes</strong>
+			<strong>{text('generic.yes')}</strong>
 		{:else}
-			<p>No</p>
+			<p>{text('generic.no')}</p>
 		{/if}
 		<button
 			onclick={async () => {
 				const { isSuspended } = await fetchAPI('PATCH', 'admin/users', { isSuspended: !user.isSuspended, id: user.id });
 				user.isSuspended = isSuspended;
-			}}>{user.isSuspended ? 'Unsuspend' : 'Suspend'}</button
+			}}>{user.isSuspended ? text('page.admin.users.unsuspend') : text('page.admin.users.suspend')}</button
 		>
 	</div>
 	<div class="item info">
-		<p>Profile Image</p>
+		<p>{text('page.admin.users.profile_image')}</p>
 		{#if user.image}
 			<a href={user.image} target="_blank" rel="noopener noreferrer">{user.image}</a>
 			<ClipboardCopy value={user.image} --size="16px" />
 		{:else}
-			<i>Default</i>
+			<i>{text('page.admin.users.default_image')}</i>
 			<p></p>
 		{/if}
 	</div>
 	<div class="item info">
-		<p>Roles</p>
+		<p>{text('page.admin.users.roles')}</p>
 		<ZodInput bind:rootValue={user} path="roles" schema={User.shape.roles} {updateValue} noLabel />
 	</div>
 	<div class="item info">
-		<p>Tags</p>
+		<p>{text('page.admin.users.tags')}</p>
 		<ZodInput bind:rootValue={user} path="tags" schema={User.shape.tags} {updateValue} noLabel />
 	</div>
 
 	<button class="inline-button icon-text danger" command="show-modal" commandfor="delete-user">
-		<Icon i="trash" /> Delete User
+		<Icon i="trash" />
+		{text('page.admin.users.delete_user')}
 	</button>
 
 	<FormDialog
 		id="delete-user"
 		submit={() => deleteUser(user.id, session?.userId).then(() => (window.location.href = '/admin/users'))}
-		submitText="Delete User"
+		submitText={text('page.admin.users.delete_user')}
 		submitDanger
 	>
-		<p>Are you sure you want to delete this user?<br />This action can't be undone.</p>
+		<p>{text('page.admin.users.delete_confirm')}<br />{text('generic.action_irreversible')}</p>
 	</FormDialog>
 </div>
 
 <div id="sessions" class="section main">
-	<h3>Sessions</h3>
+	<h3>{text('generic.sessions')}</h3>
 	<SessionList {sessions} {user} />
 </div>
 
 <div id="preferences" class="section main">
-	<h3>Preferences</h3>
+	<h3>{text('generic.preferences')}</h3>
 	<ZodForm
 		bind:rootValue={user.preferences}
 		schema={Preferences}

package/routes/login/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import Login from '@axium/client/components/Login';
 </script>
 
 <svelte:head>
-	<title>Login</title>
+	<title>{text('generic.login')}</title>
 </svelte:head>
 
 <Login fullPage />

package/routes/login/client/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import Icon from '@axium/client/components/Icon';
 	import { fetchAPI } from '@axium/client/requests';
 	import { startAuthentication } from '@simplewebauthn/browser';
@@ -28,7 +29,7 @@
 </script>
 
 <svelte:head>
-	<title>Local Client Login</title>
+	<title>{text('page.login.client.title')}</title>
 </svelte:head>
 
 {#if error}
@@ -36,15 +37,15 @@
 {:else if authDone}
 	<div class="center success">
 		<h1><Icon i="check" /></h1>
-		<p>Login successful! You can close this tab.</p>
+		<p>{text('page.login.client.success')}</p>
 	</div>
 {:else}
 	<div id="local-login" class="center">
-		<h2>Local Client Login</h2>
-		<p>Are you sure you want to log in to this local client?</p>
+		<h2>{text('page.login.client.title')}</h2>
+		<p>{text('page.login.client.confirm')}</p>
 		<div>
-			<button>Cancel</button>
-			<button class="danger" {onclick}>Authorize</button>
+			<button>{text('generic.cancel')}</button>
+			<button class="danger" {onclick}>{text('page.login.client.authorize')}</button>
 		</div>
 	</div>
 {/if}
@@ -67,6 +68,6 @@
 
 	#local-login {
 		background-color: var(--bg-menu);
-		border: 1px solid var(--border-accent);
+		border: var(--border-accent);
 	}
 </style>

package/routes/login/token/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	const { data } = $props();
 </script>
 
 <svelte:head>
-	<title>Login Failed</title>
+	<title>{text('page.login.failed')}</title>
 </svelte:head>
 
 <div class="error center">

package/routes/logout/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import Logout from '@axium/client/components/Logout';
 </script>
 
 <svelte:head>
-	<title>Logout</title>
+	<title>{text('generic.logout')}</title>
 </svelte:head>
 
 <Logout fullPage />

package/routes/register/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import Register from '@axium/client/components/Register';
 </script>
 
 <svelte:head>
-	<title>Sign Up</title>
+	<title>{text('generic.register')}</title>
 </svelte:head>
 
 <Register fullPage />