@axium/client 0.14.5 → 0.15.1

package/assets/styles.css

@@ -2,9 +2,6 @@
 
 * {
 	box-sizing: border-box;
-	color: hsl(0 0 var(--fg-light));
-	accent-color: hsl(0 0 var(--fg-light));
-	font-family: sans-serif;
 }
 
 body {
@@ -16,6 +13,11 @@ body {
 	overflow-y: scroll;
 }
 
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
 .main {
 	padding: 2em;
 	border-radius: 1em;
@@ -57,9 +59,18 @@ select {
 	padding: 0.5em 1em;
 }
 
+button.reset {
+	border-radius: unset;
+	border: none;
+	background-color: unset;
+	padding: unset;
+}
+
 textarea {
 	background: var(--bg-normal);
 	border: 1px solid var(--border-accent);
+	font-family: inherit;
+	font-size: inherit;
 }
 
 input,
@@ -219,19 +230,19 @@ input.error {
 	display: flex;
 	flex-direction: column;
 	gap: 0.1em;
-}
 
-[popover] .menu-item {
-	display: inline-flex;
-	align-items: center;
-	padding: 0.5em 0.75em;
-	gap: 1em;
-	border-radius: 0.5em;
-	user-select: none;
+	.menu-item {
+		display: inline-flex;
+		align-items: center;
+		padding: 0.5em 0.75em;
+		gap: 1em;
+		border-radius: 0.5em;
+		user-select: none;
 
-	&:hover {
-		background-color: var(--bg-strong);
-		cursor: pointer;
+		&:hover {
+			background-color: var(--bg-strong);
+			cursor: pointer;
+		}
 	}
 }
 

package/lib/Icon.svelte

@@ -4,7 +4,7 @@
 	const href = $derived(`/icons/${style}.svg#${id}`);
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" {...rest}>
+<svg class="Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" {...rest}>
 	<use {href} />
 </svg>
 

package/lib/Popover.svelte

@@ -11,11 +11,11 @@
 	}
 </script>
 
-<div {onclick}>
+<div class="Popover" {onclick} style:display="contents">
 	{#if toggle}
 		{@render toggle()}
 	{:else}
-		<span class={['popover-toggle', showToggle == 'hover' && 'toggle-hover']}>
+		<span class={[showToggle == 'hover' && 'toggle-hover']}>
 			<Icon i="ellipsis" />
 		</span>
 	{/if}
@@ -26,12 +26,17 @@
 </div>
 
 <style>
-	.popover-toggle:hover {
-		cursor: pointer;
-	}
+	div.Popover {
+		anchor-scope: --popover;
+
+		> :global(:first-child:hover) {
+			cursor: pointer;
+		}
 
-	.popover-toggle {
-		user-select: none;
+		> :global(:first-child) {
+			user-select: none;
+			anchor-name: --popover;
+		}
 	}
 
 	@media (width > 700px) {
@@ -44,7 +49,8 @@
 		}
 	}
 
-	.popover-toggle + [popover] {
+	:popover-open {
+		position-anchor: --popover;
 		position-try-fallbacks:
 			flip-inline,
 			flip-block,

package/lib/UserDiscovery.svelte

@@ -24,7 +24,7 @@
 	let value = $state<string>();
 	let gotError = $state<boolean>(false);
 
-	async function onchange() {
+	async function oninput() {
 		if (!value || !value.length) {
 			results = [];
 			return;
@@ -55,7 +55,7 @@
 	}
 </script>
 
-<input bind:value type="text" placeholder="Add users and roles" {onchange} onkeyup={onchange} />
+<input bind:value type="text" placeholder="Add users and roles" {oninput} />
 {#if !gotError && value}
 	<!-- Don't show results when we can't use the discovery API -->
 	<div class="results">

package/lib/UserMenu.svelte

@@ -1,66 +1,78 @@
 <script lang="ts">
-	import type { User } from '@axium/core/user';
-	import { getUserImage } from '@axium/core';
 	import { fetchAPI } from '@axium/client/requests';
+	import { getUserImage } from '@axium/core';
+	import type { UserPublic } from '@axium/core/user';
 	import Icon from './Icon.svelte';
-	import Popover from './Popover.svelte';
 	import Logout from './Logout.svelte';
+	import Popover from './Popover.svelte';
 
-	const { user }: { user: Partial<User> } = $props();
+	const { user }: { user?: UserPublic } = $props();
 </script>
 
-<Popover>
-	{#snippet toggle()}
-		<div style:display="contents">
-			<img src={getUserImage(user)} alt={user.name} />
-			{user.name}
-		</div>
-	{/snippet}
-
-	<a class="menu-item" href="/account">
-		<Icon i="user" --size="1.5em" />
-		<span>Your Account</span>
-	</a>
+{#if user}
+	<Popover>
+		{#snippet toggle()}
+			<div class="UserMenu toggle">
+				<img src={getUserImage(user)} alt={user.name} />
+				{user.name}
+			</div>
+		{/snippet}
 
-	{#if user.isAdmin}
-		<a class="menu-item" href="/admin">
-			<Icon i="gear-complex" --size="1.5em" />
-			<span>Administration</span>
+		<a class="menu-item" href="/account">
+			<Icon i="user" --size="1.5em" />
+			<span>Your Account</span>
 		</a>
-	{/if}
 
-	{#await fetchAPI('GET', 'apps')}
-		<i>Loading...</i>
-	{:then apps}
-		{#each apps as app}
-			<a class="menu-item" href="/{app.id}">
-				{#if app.image}
-					<img src={app.image} alt={app.name} width="1em" height="1em" />
-				{:else if app.icon}
-					<Icon i={app.icon} --size="1.5em" />
-				{:else}
-					<Icon i="image-circle-xmark" --size="1.5em" />
-				{/if}
-				<span>{app.name}</span>
+		{#if user.isAdmin}
+			<a class="menu-item" href="/admin">
+				<Icon i="gear-complex" --size="1.5em" />
+				<span>Administration</span>
 			</a>
-		{:else}
-			<i>No apps available.</i>
-		{/each}
-	{:catch}
-		<i>Couldn't load apps.</i>
-	{/await}
+		{/if}
 
-	<button style:display="contents" command="show-modal" commandfor="logout">
-		<span class="menu-item logout">
+		{#await fetchAPI('GET', 'apps')}
+			<i>Loading...</i>
+		{:then apps}
+			{#each apps as app}
+				<a class="menu-item" href="/{app.id}">
+					{#if app.image}
+						<img src={app.image} alt={app.name} width="1em" height="1em" />
+					{:else if app.icon}
+						<Icon i={app.icon} --size="1.5em" />
+					{:else}
+						<Icon i="image-circle-xmark" --size="1.5em" />
+					{/if}
+					<span>{app.name}</span>
+				</a>
+			{:else}
+				<i>No apps available.</i>
+			{/each}
+		{:catch}
+			<i>Couldn't load apps.</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>
-	</button>
-</Popover>
+		</button>
+	</Popover>
 
-<Logout />
+	<Logout />
+{:else}
+	<div class="UserMenu login">
+		<a href="/login?after={location.pathname}">Login</a>
+	</div>
+{/if}
 
 <style>
+	.UserMenu {
+		border-radius: 0.5em;
+		padding: 0.5em;
+		border: 1px solid var(--border-accent);
+		cursor: pointer;
+		background-color: var(--bg-alt);
+	}
+
 	img {
 		width: 2em;
 		height: 2em;
@@ -69,7 +81,18 @@
 		margin-right: 0.5em;
 	}
 
-	span.logout > span {
+	.logout {
 		color: hsl(0 33 var(--fg-light));
+		font-size: 16px;
+	}
+
+	:global(.UserMenu + div:popover-open) {
+		position: fixed;
+		left: unset;
+		right: anchor(right);
+		top: calc(anchor(bottom) + 0.5em);
+		width: fit-content;
+		height: fit-content;
+		cursor: default;
 	}
 </style>

package/lib/ZodInput.svelte

@@ -87,14 +87,14 @@
 		updateValue(rootValue);
 	}
 
-	const onkeyup = onchange;
+	const oninput = onchange;
 </script>
 
 {#snippet _in(rest: HTMLInputAttributes)}
 	<div class="ZodInput">
 		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
 		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
-		<input {id} {...rest} bind:value {onchange} {onkeyup} required={!optional} {defaultValue} class={[error && 'error']} />
+		<input {id} {...rest} bind:value {onchange} {oninput} required={!optional} {defaultValue} class={[error && 'error']} />
 	</div>
 {/snippet}
 
@@ -107,7 +107,7 @@
 {:else if schema.type == 'boolean'}
 	<div class="ZodInput">
 		{#if !noLabel}<label for="{id}:checkbox">{label || path}</label>{/if}
-		<input bind:checked={value} id="{id}:checkbox" type="checkbox" {onchange} {onkeyup} required={!optional} />
+		<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}
 		</label>
@@ -123,7 +123,7 @@
 {:else if schema.type == 'literal'}
 	<div class="ZodInput">
 		<label for={id}>{label || path}</label>
-		<select bind:value {id} {onchange} {onkeyup} required={!optional}>
+		<select bind:value {id} {oninput} required={!optional}>
 			{#each schema.values as value}
 				<option {value} selected={value === value}>{value}</option>
 			{/each}
@@ -143,15 +143,7 @@
 		<div class="ZodInput-array">
 			{#each value, i}
 				<div class="ZodInput-element">
-					<input
-						id="{id}.{i}"
-						bind:value={value[i]}
-						{onchange}
-						{onkeyup}
-						required={!optional}
-						{defaultValue}
-						class={[error && 'error']}
-					/>
+					<input id="{id}.{i}" bind:value={value[i]} {oninput} required={!optional} {defaultValue} class={[error && 'error']} />
 					<button
 						onclick={e => {
 							value.splice(i, 1);
@@ -192,7 +184,7 @@
 	<div class="ZodInput">
 		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
 		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
-		<select {id} {onchange} {onkeyup} bind:value required={!optional}>
+		<select {id} {onchange} bind:value required={!optional}>
 			{#each Object.entries(schema.enum) as [key, value]}
 				<option {value} selected={value === value}>{key}</option>
 			{/each}

package/lib/index.ts

@@ -14,6 +14,7 @@ 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 UserDiscovery } from './UserDiscovery.svelte';
 export { default as UserMenu } from './UserMenu.svelte';
 export { default as Version } from './Version.svelte';
 export { default as ZodForm } from './ZodForm.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.14.5",
+	"version": "0.15.1",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -42,7 +42,7 @@
 	},
 	"peerDependencies": {
 		"@axium/core": ">=0.19.0",
-		"utilium": "^2.3.8",
+		"utilium": "^2.6.3",
 		"zod": "^4.0.5",
 		"svelte": "^5.36.0"
 	},