@axium/client 0.10.0 → 0.12.0

package/assets/styles.css

@@ -101,7 +101,54 @@ pre {
 	border-radius: 0.5em;
 }
 
-.error {
+dialog {
+	border-radius: 1em;
+	background: var(--bg-menu);
+	border: 1px solid #8888;
+	padding: 1em;
+	max-width: calc(100% - 2em);
+	word-wrap: normal;
+
+	form {
+		max-width: 100%;
+	}
+}
+
+dialog::backdrop {
+	background: #0003;
+}
+
+dialog[open] {
+	animation: zoom 0.25s cubic-bezier(0.35, 1.55, 0.65, 1);
+}
+
+@keyframes zoom {
+	from {
+		transform: scale(0.95);
+	}
+	to {
+		transform: scale(1);
+	}
+}
+
+dialog[open]::backdrop {
+	animation: fade 0.25s ease-out;
+}
+
+@keyframes fade {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+dialog form {
+	display: contents;
+}
+
+:not(input).error {
 	padding: 1em;
 	border-radius: 0.5em;
 	background-color: var(--bg-error);
@@ -111,6 +158,10 @@ pre {
 	color: hsl(0 50 50%);
 }
 
+input.error {
+	border: 1px solid var(--bg-error);
+}
+
 .success {
 	padding: 1em;
 	border-radius: 0.5em;
@@ -208,6 +259,9 @@ h6 {
 }
 
 @media (width < 700px) {
+	dialog {
+	}
+
 	.mobile-hide {
 		display: none !important;
 	}

package/dist/cli/config.d.ts

@@ -14,8 +14,10 @@ export declare function session(): {
             debug: boolean;
         };
         roles: string[];
+        tags: string[];
         registeredAt: Date;
         isAdmin: boolean;
+        isSuspended: boolean;
         emailVerified?: Date | null | undefined;
         image?: string | null | undefined;
     };

package/dist/config.d.ts

@@ -14,14 +14,16 @@ export declare const ClientConfig: z.ZodObject<{
                 id: z.ZodUUID;
                 name: z.ZodString;
                 email: z.ZodEmail;
-                emailVerified: z.ZodOptional<z.ZodNullable<z.ZodDate>>;
+                emailVerified: z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>;
                 image: z.ZodOptional<z.ZodNullable<z.ZodURL>>;
-                preferences: z.ZodObject<{
+                preferences: z.ZodLazy<z.ZodObject<{
                     debug: z.ZodDefault<z.ZodBoolean>;
-                }, z.core.$strip>;
+                }, z.core.$strip>>;
                 roles: z.ZodArray<z.ZodString>;
+                tags: z.ZodArray<z.ZodString>;
                 registeredAt: z.ZodCoercedDate<unknown>;
                 isAdmin: z.ZodBoolean;
+                isSuspended: z.ZodBoolean;
             }, z.core.$strip>;
         }, z.core.$strip>;
         apps: z.ZodArray<z.ZodObject<{

package/dist/requests.d.ts

@@ -1,7 +1,8 @@
-import type { $API, APIParameters, Endpoint, RequestBody } from '@axium/core/api';
+import type { APIParameters, APIValues, Endpoint, RequestBody } from '@axium/core/api';
+import { $API } from '@axium/core/api';
 import type { RequestMethod } from '@axium/core/requests';
 export declare let token: string | null;
 export declare function setToken(value: string | null): void;
 export declare let prefix: string;
 export declare function setPrefix(value: string): void;
-export declare function fetchAPI<const M extends RequestMethod, const E extends Endpoint>(method: M, endpoint: E, data?: RequestBody<M, E>, ...params: APIParameters<E>): Promise<M extends keyof $API[E] ? ($API[E][M] extends [unknown, infer R] ? R : $API[E][M]) : unknown>;
+export declare function fetchAPI<const E extends Endpoint, const M extends keyof $API[E] & RequestMethod>(method: M, endpoint: E, data?: RequestBody<M, E>, ...params: APIParameters<E>): Promise<M extends keyof APIValues[E] ? (APIValues[E][M] extends readonly [unknown, infer R] ? R : APIValues[E][M]) : unknown>;

package/dist/requests.js

@@ -1,3 +1,5 @@
+import { $API } from '@axium/core/api';
+import { prettifyError } from 'zod';
 export let token = null;
 export function setToken(value) {
     token = value;
@@ -14,6 +16,14 @@ export async function fetchAPI(method, endpoint, data, ...params) {
             Accept: 'application/json',
         },
     };
+    const schema = $API[endpoint]?.[method];
+    if (schema && Array.isArray(schema))
+        try {
+            data = schema[0].parse(data);
+        }
+        catch (e) {
+            throw prettifyError(e);
+        }
     if (method !== 'GET' && method !== 'HEAD')
         options.body = JSON.stringify(data);
     const search = method != 'GET' || typeof data != 'object' || data == null || !Object.keys(data).length
@@ -39,5 +49,13 @@ export async function fetchAPI(method, endpoint, data, ...params) {
     const json = await response.json().catch(() => ({ message: 'Unknown server error (invalid JSON response)' }));
     if (!response.ok)
         throw new Error(json.message);
-    return json;
+    if (!schema)
+        return json;
+    const Output = Array.isArray(schema) ? schema[1] : schema;
+    try {
+        return Output.parse(json);
+    }
+    catch (e) {
+        throw prettifyError(e);
+    }
 }

package/dist/user.d.ts

@@ -19,7 +19,11 @@ export declare function updateUser(userId: string, data: Record<string, FormData
 export declare function fullUserInfo(userId: string): Promise<User & {
     sessions: Session[];
 }>;
-export declare function deleteUser(userId: string): Promise<User>;
+/**
+ * @param userId The UUID of the user to delete
+ * @param deletingId The UUID of the user performing the deletion (for authentication). Defaults to userId.
+ */
+export declare function deleteUser(userId: string, deletingId?: string): Promise<User>;
 export declare function emailVerificationEnabled(userId: string): Promise<boolean>;
 export declare function sendVerificationEmail(userId: string): Promise<Verification>;
 export declare function verifyEmail(userId: string, token: string): Promise<void>;

package/dist/user.js

@@ -1,4 +1,3 @@
-import { UserChangeable } from '@axium/core';
 import { startAuthentication, startRegistration } from '@simplewebauthn/browser';
 import * as z from 'zod';
 import { fetchAPI } from './requests.js';
@@ -23,38 +22,20 @@ export async function loginByEmail(email) {
     return await login(userId);
 }
 export async function getCurrentSession() {
-    const result = await fetchAPI('GET', 'session');
-    result.created = new Date(result.created);
-    result.expires = new Date(result.expires);
-    return result;
+    return await fetchAPI('GET', 'session');
 }
 export async function getSessions(userId) {
     _checkId(userId);
-    const result = await fetchAPI('GET', 'users/:id/sessions', {}, userId);
-    for (const session of result) {
-        session.created = new Date(session.created);
-        session.expires = new Date(session.expires);
-    }
-    return result;
+    return await fetchAPI('GET', 'users/:id/sessions', {}, userId);
 }
 export async function logout(userId, ...sessionId) {
     _checkId(userId);
-    const result = await fetchAPI('DELETE', 'users/:id/sessions', { id: sessionId }, userId);
-    for (const session of result) {
-        session.created = new Date(session.created);
-        session.expires = new Date(session.expires);
-    }
-    return result;
+    return await fetchAPI('DELETE', 'users/:id/sessions', { id: sessionId }, userId);
 }
 export async function logoutAll(userId) {
     _checkId(userId);
     await elevate(userId);
-    const result = await fetchAPI('DELETE', 'users/:id/sessions', { confirm_all: true }, userId);
-    for (const session of result) {
-        session.created = new Date(session.created);
-        session.expires = new Date(session.expires);
-    }
-    return result;
+    return await fetchAPI('DELETE', 'users/:id/sessions', { confirm_all: true }, userId);
 }
 export async function logoutCurrentSession() {
     return await fetchAPI('DELETE', 'session');
@@ -80,59 +61,43 @@ function _checkId(userId) {
 }
 export async function userInfo(userId) {
     _checkId(userId);
-    const user = await fetchAPI('GET', 'users/:id', {}, userId);
-    user.registeredAt = new Date(user.registeredAt);
-    user.emailVerified = user.emailVerified ? new Date(user.emailVerified) : null;
-    return user;
+    return await fetchAPI('GET', 'users/:id', {}, userId);
 }
 export async function updateUser(userId, data) {
     _checkId(userId);
-    const body = await UserChangeable.parseAsync(data).catch(e => {
-        throw e instanceof z.core.$ZodError ? z.prettifyError(e) : e;
-    });
-    const result = await fetchAPI('PATCH', 'users/:id', body, userId);
-    result.registeredAt = new Date(result.registeredAt);
-    if (result.emailVerified)
-        result.emailVerified = new Date(result.emailVerified);
-    return result;
+    return await fetchAPI('PATCH', 'users/:id', data, userId);
 }
 export async function fullUserInfo(userId) {
     _checkId(userId);
-    const result = await fetchAPI('GET', 'users/:id/full', {}, userId);
-    result.registeredAt = new Date(result.registeredAt);
-    result.emailVerified = new Date(result.emailVerified);
-    return result;
+    return await fetchAPI('GET', 'users/:id/full', {}, userId);
 }
-export async function deleteUser(userId) {
+/**
+ * @param userId The UUID of the user to delete
+ * @param deletingId The UUID of the user performing the deletion (for authentication). Defaults to userId.
+ */
+export async function deleteUser(userId, deletingId = userId) {
     _checkId(userId);
-    const options = await fetchAPI('OPTIONS', 'users/:id/auth', { type: 'action' }, userId);
+    const options = await fetchAPI('OPTIONS', 'users/:id/auth', { type: 'action' }, deletingId);
     const response = await startAuthentication({ optionsJSON: options });
-    await fetchAPI('POST', 'users/:id/auth', response, userId);
-    const result = await fetchAPI('DELETE', 'users/:id', response, userId);
-    result.registeredAt = new Date(result.registeredAt);
-    result.emailVerified = new Date(result.emailVerified);
-    return result;
+    await fetchAPI('POST', 'users/:id/auth', response, deletingId);
+    return await fetchAPI('DELETE', 'users/:id', response, userId);
 }
 export async function emailVerificationEnabled(userId) {
     _checkId(userId);
-    const { enabled } = await fetchAPI('OPTIONS', 'users/:id/verify_email', {}, userId);
+    const { enabled } = await fetchAPI('OPTIONS', 'users/:id/verify/email', {}, userId);
     return enabled;
 }
 export async function sendVerificationEmail(userId) {
     _checkId(userId);
-    return await fetchAPI('GET', 'users/:id/verify_email', {}, userId);
+    return await fetchAPI('GET', 'users/:id/verify/email', {}, userId);
 }
 export async function verifyEmail(userId, token) {
     _checkId(userId);
-    await fetchAPI('POST', 'users/:id/verify_email', { token }, userId);
+    await fetchAPI('POST', 'users/:id/verify/email', { token }, userId);
 }
 export async function getPasskeys(userId) {
     _checkId(userId);
-    const result = await fetchAPI('GET', 'users/:id/passkeys', {}, userId);
-    for (const passkey of result) {
-        passkey.createdAt = new Date(passkey.createdAt);
-    }
-    return result;
+    return await fetchAPI('GET', 'users/:id/passkeys', {}, userId);
 }
 /**
  * Create a new passkey for an existing user.

package/lib/FormDialog.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Dialog from './Dialog.svelte';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
 
 	let {
@@ -59,7 +58,7 @@
 	<button type="submit" class={['submit', submitDanger && 'danger']}>{submitText}</button>
 {/snippet}
 
-<Dialog bind:dialog {onclose} {...rest}>
+<dialog bind:this={dialog} {onclose} {...rest}>
 	{@render header?.()}
 	<form {onsubmit} class="main" method="dialog">
 		{#if error}
@@ -76,7 +75,7 @@
 		{/if}
 	</form>
 	{@render footer?.()}
-</Dialog>
+</dialog>
 
 <style>
 	.actions {

package/lib/URLText.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import ClipboardCopy from './ClipboardCopy.svelte';
+
+	const { url }: { url: string } = $props();
+
+	const href = $derived(new URL(url, location.origin).href);
+</script>
+
+<pre class="URLText"><span>{href}</span><ClipboardCopy value={href} --size="16px" /></pre>
+
+<style>
+	.URLText {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		span {
+			overflow-x: scroll;
+		}
+	}
+</style>

package/lib/ZodForm.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { ZodObject } from 'zod';
+	import ZodInput from './ZodInput.svelte';
+
+	interface Props {
+		rootValue: any;
+		schema: ZodObject;
+		labels: Record<string, string>;
+		updateValue(value: any): void;
+		idPrefix?: string;
+	}
+
+	let { rootValue = $bindable(), schema, labels, updateValue, idPrefix }: Props = $props();
+</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} />
+	{/each}
+</div>
+
+<style>
+	.ZodForm {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 1em;
+	}
+</style>

package/lib/ZodInput.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+	import type { ZodPref } from '@axium/core';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getByString, pick, setByString } from 'utilium';
+	import Icon from './Icon.svelte';
+	import ZodInput from './ZodInput.svelte';
+	import { prettifyError } from 'zod';
+
+	interface Props {
+		idPrefix?: string;
+		rootValue: any;
+		path: string;
+		label?: string;
+		schema: ZodPref;
+		defaultValue?: any;
+		optional?: boolean;
+		updateValue(value: any): void;
+	}
+
+	let { rootValue = $bindable(), label, path, schema, optional = false, defaultValue, idPrefix, updateValue }: Props = $props();
+	const id = (idPrefix ? idPrefix + ':' : '') + path.replaceAll(' ', '_');
+
+	let input = $state<HTMLInputElement | HTMLSelectElement>()!;
+	let value = $state<any>(getByString(rootValue, path));
+
+	let error = $state();
+
+	function dateAttr(date: Date | null, format: 'date' | 'time' | 'datetime' | 'time+sec') {
+		if (!date) return null;
+
+		const pad = (n: number) => String(n).padStart(2, '0');
+
+		const yyyy = date.getFullYear();
+		const mm = pad(date.getMonth() + 1);
+		const dd = pad(date.getDate());
+		const dateStr = `${yyyy}-${mm}-${dd}`;
+
+		const HH = pad(date.getHours());
+		const MM = pad(date.getMinutes());
+		const timeStr = `${HH}:${MM}`;
+
+		switch (format) {
+			case 'date':
+				return dateStr;
+			case 'time':
+				return timeStr;
+			case 'time+sec':
+				return `${timeStr}:${pad(date.getSeconds())}`;
+			case 'datetime':
+			default:
+				return `${dateStr}T${timeStr}`;
+		}
+	}
+
+	function onchange(e: Event) {
+		let val;
+
+		try {
+			val = schema.parse(value);
+			error = null;
+		} catch (e: any) {
+			error = prettifyError(e);
+			return;
+		}
+
+		if (e instanceof KeyboardEvent && e.key !== 'Enter') return;
+
+		const oldValue = getByString(rootValue, path);
+		if (val == oldValue) return;
+
+		if (defaultValue == val) {
+			const parts = path.split('.');
+			const prop = parts.pop()!;
+			delete getByString<Record<string, any>>(rootValue, parts.join('.'))[prop];
+		} else setByString(rootValue, path, val);
+
+		updateValue(rootValue);
+	}
+
+	const onkeyup = onchange;
+</script>
+
+{#snippet _in(rest: HTMLInputAttributes)}
+	<div class="ZodInput">
+		<label for={id}>{label || path}</label>
+		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
+		<input
+			bind:this={input}
+			{id}
+			{...rest}
+			bind:value
+			{onchange}
+			{onkeyup}
+			required={!optional}
+			{defaultValue}
+			class={[error && 'error']}
+		/>
+	</div>
+{/snippet}
+
+{#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 })}
+{:else if schema.type == 'bigint'}
+	{@render _in({ type: 'number', min: Number(schema.minValue), max: Number(schema.maxValue), step: 1 })}
+{:else if schema.type == 'boolean'}
+	<div class="ZodInput">
+		<label for="{id}:checkbox">{label || path}</label>
+		<input bind:checked={value} bind:this={input} id="{id}:checkbox" type="checkbox" {onchange} {onkeyup} required={!optional} />
+		<label for="{id}:checkbox" {id} class="checkbox">
+			{#if value}<Icon i="check" --size="1.3em" />{/if}
+		</label>
+	</div>
+{:else if schema.type == 'date'}
+	{@render _in({
+		type: 'date',
+		min: dateAttr(schema.minDate, 'date'),
+		max: dateAttr(schema.maxDate, 'date'),
+	})}
+{:else if schema.type == 'file'}
+	<!-- todo -->
+{:else if schema.type == 'literal'}
+	<div class="ZodInput">
+		<label for={id}>{label || path}</label>
+		<select bind:this={input} bind:value {id} {onchange} {onkeyup} required={!optional}>
+			{#each schema.values as value}
+				<option {value} selected={value === value}>{value}</option>
+			{/each}
+		</select>
+	</div>
+{: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} />
+{: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} />
+{:else if schema.type == 'array'}
+	<div class="ZodInput">
+		<label for={id}>{label || path}</label>
+		{#each value, i}
+			<div class="ZodInput-element">
+				<ZodInput bind:rootValue {updateValue} {idPrefix} {defaultValue} path="{path}.{i}" schema={schema.element} />
+			</div>
+		{:else}
+			<i>Empty</i>
+		{/each}
+	</div>
+{:else if schema.type == 'record'}
+	<div class="ZodInput-record">
+		{#each Object.keys(value) as key}
+			<div class="ZodInput-record-entry">
+				<label for={id}>{key}</label>
+				<ZodInput bind:rootValue {updateValue} {idPrefix} {defaultValue} 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} />
+	{/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} />
+		{/each}
+	</div>
+{:else if schema.type == 'enum'}
+	<div class="ZodInput">
+		<label for={id}>{label || path}</label>
+		<select bind:this={input} {id} {onchange} {onkeyup} bind:value required={!optional}>
+			{#each Object.entries(schema.enum) as [key, value]}
+				<option {value} selected={value === value}>{key}</option>
+			{/each}
+		</select>
+	</div>
+{:else}
+	<!-- No idea how to render this -->
+	<i class="error-text">Invalid preference type: {JSON.stringify((schema as ZodPref)?.def?.type)}</i>
+{/if}
+
+<style>
+	input[type='checkbox'] {
+		display: none;
+	}
+
+	label.checkbox {
+		cursor: pointer;
+		width: 1.5em;
+		height: 1.5em;
+		border: 1px solid var(--border-accent);
+		border-radius: 0.5em;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.ZodInput-error {
+		position: fixed;
+		position-anchor: --zod-input;
+		bottom: calc(anchor(top) - 0.3em);
+		left: anchor(left);
+	}
+
+	.ZodInput {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1em;
+		anchor-scope: --zod-input;
+
+		input {
+			anchor-name: --zod-input;
+		}
+	}
+
+	.ZodInput-object,
+	.ZodInput-record,
+	.ZodInput-array,
+	.ZodInput-tuple {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 0.25em;
+	}
+</style>

package/lib/index.ts

@@ -1,20 +1,20 @@
 export { default as AccessControlDialog } from './AccessControlDialog.svelte';
 export { default as AppMenu } from './AppMenu.svelte';
 export { default as ClipboardCopy } from './ClipboardCopy.svelte';
-export { default as Dialog } from './Dialog.svelte';
 export { default as FormDialog } from './FormDialog.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as Login } from './Login.svelte';
 export { default as Logout } from './Logout.svelte';
 export { default as NumberBar } from './NumberBar.svelte';
 export { default as Popover } from './Popover.svelte';
-export { default as Preference } from './Preference.svelte';
-export { default as Preferences } from './Preferences.svelte';
 export { default as Register } from './Register.svelte';
 export { default as SessionList } from './SessionList.svelte';
 export { default as Toast } from './Toast.svelte';
 export { default as Upload } from './Upload.svelte';
+export { default as URLText } from './URLText.svelte';
 export { default as UserCard } from './UserCard.svelte';
 export { default as UserMenu } from './UserMenu.svelte';
 export { default as Version } from './Version.svelte';
 export { default as WithContextMenu } from './WithContextMenu.svelte';
+export { default as ZodForm } from './ZodForm.svelte';
+export { default as ZodInput } from './ZodInput.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.10.0",
+	"version": "0.12.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -40,7 +40,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/core": ">=0.16.0",
+		"@axium/core": ">=0.18.0",
 		"utilium": "^2.3.8",
 		"zod": "^4.0.5",
 		"svelte": "^5.36.0"

package/lib/Dialog.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-	import type { HTMLDialogAttributes } from 'svelte/elements';
-
-	let { children, dialog = $bindable(), ...rest }: { children(): any; dialog?: HTMLDialogElement } & HTMLDialogAttributes = $props();
-</script>
-
-<dialog bind:this={dialog} {...rest}>
-	{@render children()}
-</dialog>
-
-<!-- svelte-ignore css_unused_selector -->
-<style>
-	dialog {
-		border-radius: 1em;
-		background: var(--bg-menu);
-		border: 1px solid #8888;
-		padding: 1em;
-
-		form {
-			display: contents;
-		}
-	}
-
-	dialog::backdrop {
-		background: #0003;
-	}
-
-	dialog[open] {
-		animation: zoom 0.25s cubic-bezier(0.35, 1.55, 0.65, 1);
-	}
-
-	@keyframes zoom {
-		from {
-			transform: scale(0.95);
-		}
-		to {
-			transform: scale(1);
-		}
-	}
-
-	dialog[open]::backdrop {
-		animation: fade 0.25s ease-out;
-	}
-
-	@keyframes fade {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-</style>

package/lib/Preference.svelte

@@ -1,159 +0,0 @@
-<script lang="ts">
-	import { fetchAPI } from '@axium/client/requests';
-	import type { Preferences, ZodPref } from '@axium/core';
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { getByString, pick, setByString } from 'utilium';
-	import Icon from './Icon.svelte';
-	import Preference from './Preference.svelte';
-
-	interface Props {
-		userId: string;
-		preferences: Preferences;
-		path: string;
-		schema: ZodPref;
-		defaultValue?: any;
-		optional?: boolean;
-	}
-
-	let { preferences = $bindable(), userId, path, schema, optional = false, defaultValue }: Props = $props();
-	const id = $props.id();
-
-	let input = $state<HTMLInputElement | HTMLSelectElement>()!;
-	let checked = $state(schema.def.type == 'boolean' && getByString<boolean>(preferences, path));
-	const initialValue = $derived<any>(getByString(preferences, path));
-
-	function dateAttr(date: Date | null, format: 'date' | 'time' | 'datetime' | 'time+sec') {
-		if (!date) return null;
-
-		const pad = (n: number) => String(n).padStart(2, '0');
-
-		const yyyy = date.getFullYear();
-		const mm = pad(date.getMonth() + 1);
-		const dd = pad(date.getDate());
-		const dateStr = `${yyyy}-${mm}-${dd}`;
-
-		const HH = pad(date.getHours());
-		const MM = pad(date.getMinutes());
-		const timeStr = `${HH}:${MM}`;
-
-		switch (format) {
-			case 'date':
-				return dateStr;
-			case 'time':
-				return timeStr;
-			case 'time+sec':
-				return `${timeStr}:${pad(date.getSeconds())}`;
-			case 'datetime':
-			default:
-				return `${dateStr}T${timeStr}`;
-		}
-	}
-
-	function onchange(e: Event) {
-		const value = schema.parse(input instanceof HTMLInputElement && input.type === 'checkbox' ? input.checked : input.value);
-		const oldValue = getByString(preferences, path);
-		if (value == oldValue) return;
-
-		if (defaultValue == value) {
-			const parts = path.split('.');
-			const prop = parts.pop()!;
-			delete getByString<Record<string, any>>(preferences, parts.join('.'))[prop];
-		} else setByString(preferences, path, value);
-
-		fetchAPI('PATCH', 'users/:id', { preferences }, userId);
-	}
-</script>
-
-{#snippet _in(rest: HTMLInputAttributes)}
-	<input bind:this={input} {id} {...rest} value={initialValue} {onchange} required={!optional} {defaultValue} />
-{/snippet}
-
-{#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 })}
-{:else if schema.type == 'bigint'}
-	{@render _in({ type: 'number', min: Number(schema.minValue), max: Number(schema.maxValue), step: 1 })}
-{:else if schema.type == 'boolean'}
-	<input bind:checked bind:this={input} {id} type="checkbox" {onchange} required={!optional} />
-	<label for={id} class="checkbox">
-		{#if checked}<Icon i="check" --size="1.3em" />{/if}
-	</label>
-{:else if schema.type == 'date'}
-	{@render _in({
-		type: 'date',
-		min: dateAttr(schema.minDate, 'date'),
-		max: dateAttr(schema.maxDate, 'date'),
-	})}
-{:else if schema.type == 'file'}
-	<!-- todo -->
-{:else if schema.type == 'literal'}
-	<select bind:this={input} {id} {onchange} required={!optional}>
-		{#each schema.values as value}
-			<option {value} selected={initialValue === value}>{value}</option>
-		{/each}
-	</select>
-{:else if schema.type == 'template_literal'}
-	<!-- todo -->
-{:else if schema.type == 'default'}
-	<Preference {userId} bind:preferences {path} schema={schema.def.innerType} defaultValue={schema.def.defaultValue} />
-{:else if schema.type == 'nullable' || schema.type == 'optional'}
-	<!-- defaults are handled differently -->
-	<Preference {userId} bind:preferences {path} {defaultValue} schema={schema.def.innerType} optional={true} />
-{:else if schema.type == 'array'}
-	<div class="pref-sub">
-		{#each initialValue, i}
-			<div class="pref-record-entry">
-				<Preference {userId} bind:preferences {defaultValue} path="{path}.{i}" schema={schema.element} />
-			</div>
-		{/each}
-	</div>
-{:else if schema.type == 'record'}
-	<div class="pref-sub">
-		{#each Object.keys(initialValue) as key}
-			<div class="pref-record-entry">
-				<label for={id}>{key}</label>
-				<Preference {userId} bind:preferences {defaultValue} path="{path}.{key}" schema={schema.valueType} />
-			</div>
-		{/each}
-	</div>
-{:else if schema.type == 'object'}
-	{#each Object.entries(schema.shape) as [key, value]}
-		<div class="pref-sub">
-			<label for={id}>{key}</label>
-			<Preference {userId} bind:preferences {defaultValue} path="{path}.{key}" schema={value} />
-		</div>
-	{/each}
-{:else if schema.type == 'tuple'}
-	<div class="pref-sub" data-rest={schema.def.rest}>
-		{#each schema.def.items as item, i}
-			<Preference {userId} bind:preferences {defaultValue} path="{path}.{i}" schema={item} />
-		{/each}
-	</div>
-{:else if schema.type == 'enum'}
-	<select bind:this={input} {id} {onchange} required={!optional}>
-		{#each Object.entries(schema.enum) as [key, value]}
-			<option {value} selected={initialValue === value}>{key}</option>
-		{/each}
-	</select>
-{:else}
-	<!-- No idea how to render this -->
-	<i class="error-text">Invalid preference type: {JSON.stringify((schema as ZodPref)?.def?.type)}</i>
-{/if}
-
-<style>
-	input[type='checkbox'] {
-		display: none;
-	}
-
-	label.checkbox {
-		cursor: pointer;
-		width: 1.5em;
-		height: 1.5em;
-		border: 1px solid var(--border-accent);
-		border-radius: 0.5em;
-		display: inline-flex;
-		justify-content: center;
-		align-items: center;
-	}
-</style>

package/lib/Preferences.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { preferenceLabels, Preferences } from '@axium/core';
-	import Preference from './Preference.svelte';
-
-	interface Props {
-		userId: string;
-		preferences: Preferences;
-	}
-
-	let { preferences = $bindable(), userId }: Props = $props();
-	const id = $props.id();
-</script>
-
-{#each Object.keys(Preferences.shape) as (keyof Preferences)[] as path}
-	<div class="pref">
-		<label for={id}>{preferenceLabels[path]}</label>
-		<Preference {userId} bind:preferences {path} schema={Preferences.shape[path]} />
-	</div>
-{/each}
-
-<style>
-	.pref {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 1em;
-	}
-</style>