@axium/client 0.20.2 → 0.22.0

package/dist/cli/config.d.ts

@@ -19,7 +19,6 @@ export declare function session(): {
         isAdmin: boolean;
         isSuspended: boolean;
         emailVerified?: Date | null | undefined;
-        image?: string | null | undefined;
     };
     name?: string | null | undefined;
 };

package/dist/config.d.ts

@@ -16,7 +16,6 @@ export declare const ClientConfig: z.ZodObject<{
                 name: z.ZodString;
                 email: z.ZodEmail;
                 emailVerified: z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>;
-                image: z.ZodOptional<z.ZodNullable<z.ZodURL>>;
                 preferences: z.ZodLazy<z.ZodObject<{
                     debug: z.ZodDefault<z.ZodBoolean>;
                 }, z.core.$strip>>;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './access.js';
+export * from './cache.js';
 export * from './config.js';
 export * from './locales.js';
 export * from './requests.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './access.js';
+export * from './cache.js';
 export * from './config.js';
 export * from './locales.js';
 export * from './requests.js';

package/dist/locales.d.ts

@@ -112,8 +112,13 @@ declare let currentLoaded: {
                 readonly title: "Passkeys";
             };
             readonly personal_info: "Personal Information";
+            readonly pfp: {
+                readonly update: "Upload";
+                readonly remove: "Remove";
+                readonly toast_removed: "Profile picture removed";
+                readonly toast_updated: "Profile picture updated";
+            };
             readonly preferences: "Preferences";
-            readonly profile_alt: "User profile";
             readonly sessions: "Sessions";
             readonly title: "Your Account";
             readonly user_id: "User ID";
@@ -230,10 +235,19 @@ declare let currentLoaded: {
             readonly failed: "Login Failed";
         };
     };
+    readonly location: {
+        readonly country: "Country";
+        readonly subdivision: "State / province";
+        readonly locality: "City / town";
+        readonly postal_code: "Postal code";
+        readonly street1: "Street address";
+        readonly street2: "Street address line 2";
+    };
     readonly preference: {
         readonly debug: "Debug mode";
     };
 };
+export declare let currentMonthNames: string[];
 /**
  * Current locale
  */
@@ -254,6 +268,8 @@ type _ArgsValue<V extends string[]> = UnionToIntersection<{
 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 countryName(code: string): string | undefined;
+export declare function dateField(name: string): string | undefined;
 export declare function escape(text: string): string;
 /**
  * Get localized text for a given translation key

package/dist/locales.js

@@ -15,7 +15,8 @@ export function extendLocale(locale, data) {
         debug('Extending locale: ' + locale);
     deepAssign(loadedLocales[locale], data);
 }
-let currentLoaded = en;
+let currentLoaded = en, currentRegionNames, currentDateFields;
+export let currentMonthNames;
 /**
  * Current locale
  */
@@ -25,6 +26,17 @@ export function useLocale(newLocale) {
         throw new Error('Locale is not available: ' + newLocale);
     currentLocale = newLocale;
     currentLoaded = loadedLocales[newLocale];
+    currentRegionNames = new Intl.DisplayNames(newLocale, { type: 'region' });
+    currentDateFields = new Intl.DisplayNames(newLocale, { type: 'dateTimeField' });
+    const formatter = new Intl.DateTimeFormat(newLocale, { month: 'long' });
+    currentMonthNames = Array.from({ length: 12 }, (_, monthIndex) => formatter.format(new Date(Date.UTC(2000, monthIndex + 1, 1))));
+}
+useLocale('en');
+export function countryName(code) {
+    return currentRegionNames.of(code);
+}
+export function dateField(name) {
+    return currentDateFields.of(name);
 }
 const localeReplacement = /\{(\w+)\}/g;
 const escapePattern = /[&<>"']/g;

package/lib/Icon.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	const { i, ...rest } = $props();
+	import type { SVGAttributes } from 'svelte/elements';
+	const { i, ...rest }: { i: string } & SVGAttributes<SVGSVGElement> = $props();
 	const [style, id] = $derived(i.includes('/') ? i.split('/') : ['solid', i]);
 	const href = $derived(`/icons/${style}.svg#${id}`);
 </script>

package/lib/LocationSelect.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { countryName, text } from '@axium/client';
+	import { countries, type LocationInit } from '@axium/core';
+
+	let { value = $bindable<LocationInit>() }: { value: LocationInit } = $props();
+</script>
+
+<select bind:value={value.country} placeholder={text('location.country')}>
+	{#each countries as country}
+		<option value={country}>{countryName(country)}</option>
+	{/each}
+</select>
+
+<input type="text" placeholder={text('location.street1')} bind:value={value.street1} />
+<input type="text" placeholder={text('location.street2')} bind:value={value.street2} />
+<input type="text" placeholder={text('location.locality')} bind:value={value.locality} />
+<div>
+	<input type="text" placeholder={text('location.subdivision')} bind:value={value.subdivision} />
+	<input type="text" placeholder={text('location.postal_code')} bind:value={value.postalCode} />
+</div>

package/lib/UserCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { text } from '@axium/client';
-	import { getUserImage } from '@axium/core';
-	import type { User } from '@axium/core/user';
+	import type { UserPublic } from '@axium/core/user';
+	import UserPFP from './UserPFP.svelte';
 
 	const {
 		user,
@@ -10,7 +10,7 @@
 		href,
 		you = false,
 	}: {
-		user: Partial<User>;
+		user: UserPublic;
 		/** If true, don't show the picture */
 		compact?: boolean;
 		/** Whether the user is viewing their own profile */
@@ -24,7 +24,7 @@
 
 <a class={['User', self && 'self']} {href}>
 	{#if !compact}
-		<img src={getUserImage(user)} alt={user.name} />
+		<UserPFP {user} />
 	{/if}
 	{user.name}
 	{#if self && you}
@@ -38,12 +38,4 @@
 		width: max-content;
 		height: max-content;
 	}
-
-	img {
-		width: 2em;
-		height: 2em;
-		border-radius: 50%;
-		vertical-align: middle;
-		margin-right: 0.5em;
-	}
 </style>

package/lib/UserDiscovery.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { text } from '@axium/client';
 	import { fetchAPI } from '@axium/client/requests';
-	import { getUserImage, type UserPublic } from '@axium/core';
+	import type { UserPublic } from '@axium/core';
 	import { errorText } from 'ioium';
 	import Icon from './Icon.svelte';
+	import UserPFP from './UserPFP.svelte';
 
 	const {
 		onSelect,
@@ -63,7 +64,7 @@
 			{#if !excludeTargets.includes(result.target)}
 				<div class="result" onclick={select(result.target)}>
 					{#if result.type == 'user'}
-						<span><img src={getUserImage(result.value)} alt={result.value.name} />{result.value.name}</span>
+						<span><UserPFP user={result.value} /> {result.value.name}</span>
 					{:else if result.type == 'role'}
 						<span>
 							<span class="icon-text non-user"><Icon i="at" />{result.value}</span>
@@ -135,12 +136,4 @@
 		cursor: pointer;
 		background-color: var(--bg-strong);
 	}
-
-	img {
-		width: 2em;
-		height: 2em;
-		border-radius: 50%;
-		vertical-align: middle;
-		margin-right: 0.5em;
-	}
 </style>

package/lib/UserMenu.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { fetchAPI, text } from '@axium/client';
-	import { getUserImage } from '@axium/core';
 	import type { UserPublic } from '@axium/core/user';
 	import Icon from './Icon.svelte';
 	import Logout from './Logout.svelte';
 	import Popover from './Popover.svelte';
+	import UserPFP from './UserPFP.svelte';
 
 	const { user }: { user?: UserPublic } = $props();
 </script>
@@ -13,7 +13,7 @@
 	<Popover>
 		{#snippet toggle()}
 			<div class="UserMenu toggle">
-				<img src={getUserImage(user)} alt={user.name} />
+				<UserPFP {user} />
 				{user.name}
 			</div>
 		{/snippet}
@@ -73,14 +73,6 @@
 		background-color: var(--bg-alt);
 	}
 
-	img {
-		width: 2em;
-		height: 2em;
-		border-radius: 50%;
-		vertical-align: middle;
-		margin-right: 0.5em;
-	}
-
 	.logout {
 		color: hsl(0 33 var(--fg-light));
 		font-size: 16px;

package/lib/UserPFP.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { UserPublic } from '@axium/core';
+	import { colorHashRGB } from '@axium/core/color';
+
+	let { user, isDefault = $bindable() }: { user: UserPublic; isDefault?: boolean } = $props();
+
+	const defaultImage = $derived(
+		`data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="background-color:${colorHashRGB(user.name ?? '\0')};display:flex;align-items:center;justify-content:center;">
+		<text x="23" y="28" style="font-family:sans-serif;font-weight:bold;" fill="white">${(user.name.replaceAll(/\W/g, '') || '?')[0]}</text>
+	</svg>`.replaceAll(/[\t\n]/g, '')
+	);
+
+	let src = $state(`/raw/pfp/${user.id}`);
+
+	$effect(() => {
+		// Reset the attempted source when the user changes
+		src = `/raw/pfp/${user.id}`;
+	});
+</script>
+
+<img
+	class="UserPFP"
+	{src}
+	alt={user.name}
+	onerror={() => {
+		isDefault = true;
+		src = defaultImage;
+	}}
+/>
+
+<style>
+	img.UserPFP {
+		width: var(--size, 2em);
+		height: var(--size, 2em);
+		border-radius: 50%;
+		border: 1px solid #8888;
+		vertical-align: middle;
+		margin-right: 0.5em;
+		/* see https://drafts.csswg.org/css-image-animation-1/ */
+		image-animation: stopped;
+	}
+</style>

package/lib/ZodForm.svelte

@@ -5,7 +5,7 @@
 	interface Props {
 		rootValue: any;
 		schema: ZodObject;
-		labels: Record<string, string>;
+		labels?: Record<string, string>;
 		updateValue(value: any): void;
 		idPrefix?: string;
 	}
@@ -15,7 +15,7 @@
 
 <div class="ZodForm">
 	{#each Object.keys(schema.shape).sort((a, b) => a.localeCompare(b)) as path}
-		<ZodInput bind:rootValue {updateValue} {idPrefix} {path} schema={schema.shape[path]} label={labels[path] || path} />
+		<ZodInput bind:rootValue {updateValue} {idPrefix} {path} schema={schema.shape[path]} label={labels?.[path] || path} />
 	{/each}
 </div>
 

package/lib/ZodInput.svelte

@@ -14,15 +14,17 @@
 		path: string;
 		label?: string;
 		schema: ZodPref;
+		_parseSchema?: ZodPref;
 		defaultValue?: any;
 		optional?: boolean;
-		noLabel?: boolean;
+		readonly?: boolean;
+		noLabel?: boolean | 'placeholder';
 		updateValue(value: any): void;
 	}
 
 	let { rootValue = $bindable(), ...props }: Props = $props();
 
-	let { label, path, schema, optional, defaultValue, idPrefix, updateValue, noLabel } = props;
+	let { label, path, schema, _parseSchema = schema, optional, readonly, defaultValue, idPrefix, updateValue, noLabel } = props;
 
 	const id = (idPrefix ? idPrefix + ':' : '') + path.replaceAll(' ', '_');
 
@@ -85,13 +87,28 @@
 	const oninput = onchange;
 
 	const labelText = $derived(zKeys.has(props.schema) ? text(zKeys.get(props.schema)!.key) : label || path);
+	const placeholder = noLabel == 'placeholder' ? labelText : undefined;
+
+	/** Array element types that indicate the array should put elements on their own lines */
+	const largeArrayTypes = ['object', 'array', 'record', 'tuple'];
 </script>
 
 {#snippet _in(rest: HTMLInputAttributes)}
 	<div class="ZodInput">
 		{#if !noLabel}<label for={id}>{labelText}</label>{/if}
 		{#if error}<span class="ZodInput-error">{error}</span>{/if}
-		<input {id} {...rest} bind:value {onchange} {oninput} required={!optional} {defaultValue} class={[error && 'error']} />
+		<input
+			{id}
+			{...rest}
+			bind:value
+			{onchange}
+			{oninput}
+			required={!optional}
+			{defaultValue}
+			{placeholder}
+			{readonly}
+			class={[error && 'error']}
+		/>
 	</div>
 {/snippet}
 
@@ -104,7 +121,7 @@
 {:else if schema.type == 'boolean'}
 	<div class="ZodInput">
 		{#if !noLabel}<label for="{id}:checkbox">{labelText}</label>{/if}
-		<input bind:checked={value} id="{id}:checkbox" type="checkbox" {onchange} required={!optional} />
+		<input bind:checked={value} id="{id}:checkbox" type="checkbox" {onchange} required={!optional} {placeholder} />
 		<label for="{id}:checkbox" {id} class="checkbox">
 			{#if value}<Icon i="check" --size="1.3em" />{/if}
 		</label>
@@ -128,19 +145,22 @@
 	</div>
 {:else if schema.type == 'template_literal'}
 	<!-- todo -->
+{:else if schema.type == 'readonly'}
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.innerType} readonly />
 {:else if schema.type == 'default'}
 	<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 {...props} label={labelText} schema={schema.def.innerType} optional={true} />
+{:else if schema.type == 'nonoptional'}
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.innerType} optional={false} />
 {:else if schema.type == 'array'}
 	<div class="ZodInput">
 		{#if !noLabel}<label for={id}>{labelText}</label>{/if}
-		{#if error}<span class="ZodInput-error">{error}</span>{/if}
-		<div class="ZodInput-array">
+		<div class={['ZodInput-array', largeArrayTypes.includes(schema.element.type) && 'large']}>
 			{#each value, i}
 				<div class="ZodInput-element">
-					<input id="{id}.{i}" bind:value={value[i]} {oninput} required={!optional} {defaultValue} class={[error && 'error']} />
+					<ZodInput bind:rootValue {updateValue} {idPrefix} path="{path}.{i}" schema={schema.element} noLabel={noLabel || true} />
 					<button
 						onclick={e => {
 							value.splice(i, 1);
@@ -151,8 +171,11 @@
 					</button>
 				</div>
 			{/each}
-			<button onclick={() => value.push('')}>
+			<button class="icon-text" onclick={() => value.push('')}>
 				<Icon i="plus" --size="16px" />
+				{#if noLabel == 'placeholder'}
+					<span>{labelText}</span>
+				{/if}
 			</button>
 		</div>
 	</div>
@@ -161,14 +184,14 @@
 		{#each Object.keys(value) as key}
 			<div class="ZodInput-record-entry">
 				{#if !noLabel}<label for={id}>{key}</label>{/if}
-				<ZodInput bind:rootValue {updateValue} {idPrefix} path="{path}.{key}" schema={schema.valueType} />
+				<ZodInput bind:rootValue {updateValue} {idPrefix} {noLabel} 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} path="{path}.{key}" schema={value} />
+		<ZodInput bind:rootValue {updateValue} {idPrefix} {noLabel} path="{path}.{key}" schema={value} />
 	{/each}
 	<!-- </div> -->
 {:else if schema.type == 'tuple'}
@@ -187,6 +210,14 @@
 			{/each}
 		</select>
 	</div>
+{:else if schema.type == 'success'}
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.innerType} {_parseSchema} />
+{:else if schema.type == 'pipe'}
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.in} {_parseSchema} />
+{:else if schema.type == 'union'}
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.options[0]} {_parseSchema} />
+{:else if schema.type == 'intersection'}
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.left} {_parseSchema} />
 {:else}
 	<!-- No idea how to render this -->
 	<i class="error">{text('ZodInput.invalid_type', { type: JSON.stringify((schema as ZodPref)?.def?.type) })}</i>
@@ -217,9 +248,14 @@
 		gap: 0.5em;
 		align-items: center;
 
-		button {
-			position: relative;
-			right: 1em;
+		& > button {
+			display: contents;
+		}
+
+		& > .ZodInput {
+			gap: 0.25em;
+			display: flex;
+			flex-direction: column;
 		}
 	}
 
@@ -227,6 +263,10 @@
 		display: flex;
 		gap: 0.5em;
 		align-items: center;
+
+		&.large {
+			flex-direction: column;
+		}
 	}
 
 	.ZodInput-object,

package/lib/index.ts

@@ -4,6 +4,7 @@ export { default as ColorPicker } from './ColorPicker.svelte';
 export { default as ClipboardCopy } from './ClipboardCopy.svelte';
 export { default as FormDialog } from './FormDialog.svelte';
 export { default as Icon } from './Icon.svelte';
+export { default as LocationSelect } from './LocationSelect.svelte';
 export { default as Login } from './Login.svelte';
 export { default as Logout } from './Logout.svelte';
 export { default as NumberBar } from './NumberBar.svelte';
@@ -15,6 +16,7 @@ export { default as Upload } from './Upload.svelte';
 export { default as URLText } from './URLText.svelte';
 export { default as UserCard } from './UserCard.svelte';
 export { default as UserDiscovery } from './UserDiscovery.svelte';
+export { default as UserPFP } from './UserPFP.svelte';
 export { default as UserMenu } from './UserMenu.svelte';
 export { default as Version } from './Version.svelte';
 export { default as ZodForm } from './ZodForm.svelte';

package/locales/en.json

@@ -106,8 +106,13 @@
 				"title": "Passkeys"
 			},
 			"personal_info": "Personal Information",
+			"pfp": {
+				"update": "Upload",
+				"remove": "Remove",
+				"toast_removed": "Profile picture removed",
+				"toast_updated": "Profile picture updated"
+			},
 			"preferences": "Preferences",
-			"profile_alt": "User profile",
 			"sessions": "Sessions",
 			"title": "Your Account",
 			"user_id": "User ID",
@@ -224,6 +229,14 @@
 			"failed": "Login Failed"
 		}
 	},
+	"location": {
+		"country": "Country",
+		"subdivision": "State / province",
+		"locality": "City / town",
+		"postal_code": "Postal code",
+		"street1": "Street address",
+		"street2": "Street address line 2"
+	},
 	"preference": {
 		"debug": "Debug mode"
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.20.2",
+	"version": "0.22.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -45,7 +45,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/core": ">=0.24.0",
+		"@axium/core": ">=0.26.0",
 		"svelte": "^5.36.0",
 		"utilium": "^2.8.0",
 		"zod": "^4.0.5"