@axium/client 0.17.3 → 0.18.0

package/assets/animations.css

@@ -16,15 +16,54 @@
 	}
 }
 
-:root {
-	--A-zoom: zoom 0.25s cubic-bezier(0.35, 1.55, 0.65, 1);
-	--A-fade: fade 0.25s ease-out;
+@keyframes fade-subtle {
+	from {
+		opacity: 0.75;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes slide-up {
+	from {
+		translate: 0 var(--A-slide-amount, 100%);
+	}
+	to {
+		translate: 0 0;
+	}
 }
 
-dialog[open] {
+@keyframes slide-right {
+	from {
+		translate: 0 0;
+	}
+	to {
+		translate: var(--A-slide-amount, 100%) 0;
+	}
+}
+
+@media not (prefers-reduced-motion) {
+	:root {
+		/* CSS variables to make using the animations easier.
+		Prefixed with `A-` to avoid namespace pollution. */
+		--A-zoom: zoom 0.25s cubic-bezier(0.35, 1.55, 0.65, 1);
+		--A-fade: fade 0.25s ease-out;
+		--A-slide-up: slide-up 0.25s ease;
+		--A-slide-right: slide-right 0.25s ease;
+		--A-slide-out-right: slide-right 0.25s ease forwards, var(--A-fade) reverse forwards;
+	}
+}
+
+dialog:open {
 	animation: var(--A-zoom);
 }
 
-dialog[open]::backdrop {
+dialog:open::backdrop {
 	animation: var(--A-fade);
 }
+
+.toast {
+	--A-slide-amount: 100px;
+	animation: var(--A-slide-up);
+}

package/assets/styles.css

@@ -120,7 +120,7 @@ button {
 	cursor: pointer;
 }
 
-button:hover {
+button:not(.reset):hover {
 	background-color: hsl(var(--hue) 15 calc(var(--bg-light) + (var(--light-step) * 2)));
 }
 
@@ -144,7 +144,7 @@ dialog {
 	}
 }
 
-dialog::backdrop {
+dialog:modal::backdrop {
 	background: #0003;
 }
 
@@ -178,24 +178,33 @@ progress::-moz-progress-bar {
 	background-color: var(--bg-accent);
 }
 
-:not(input).error {
+:is(p, span, i).error {
+	color: var(--fg-error);
+}
+
+input.error {
+	border: var(--border-error);
+}
+
+div.error {
 	padding: 1em;
 	border-radius: 0.5em;
 	background-color: var(--bg-error);
+	border: var(--border-error);
 }
 
-.error-text {
-	color: hsl(0 50 50%);
-}
-
-input.error {
-	border: 1px solid var(--bg-error);
+div.warning {
+	padding: 1em;
+	border-radius: 0.5em;
+	background-color: var(--bg-warning);
+	border: var(--border-warning);
 }
 
-.success {
+div.success {
 	padding: 1em;
 	border-radius: 0.5em;
 	background-color: var(--bg-success);
+	border: var(--border-success);
 }
 
 .subtle {
@@ -215,6 +224,7 @@ input.error {
 	border: var(--border-error);
 	background-color: hsl(0 20 calc(var(--bg-light) + var(--light-step)));
 	color: hsl(0 33 var(--fg-light));
+	--fill: hsl(0 33 var(--fg-light));
 	accent-color: hsl(0 33 var(--fg-light));
 }
 
@@ -308,6 +318,36 @@ h6 {
 	}
 }
 
+#toasts {
+	position: absolute;
+	right: 1em;
+	top: 1em;
+	width: 0;
+	height: 0;
+	overflow: visible;
+	display: flex;
+	flex-direction: column;
+	gap: 1em;
+	text-align: right;
+	align-items: end;
+}
+
+div.toast {
+	width: max-content;
+	padding: 0.4em 0.8em;
+	border-radius: 0.5em;
+
+	&:hover {
+		animation-play-state: paused;
+	}
+
+	&.plain,
+	&.info {
+		border: var(--border-accent);
+		background-color: var(--bg-accent);
+	}
+}
+
 @media (width >= 700px) {
 	.mobile-only {
 		display: none;
@@ -333,7 +373,7 @@ h6 {
 	}
 
 	.mobile-button:hover {
-		background-color: hsl(var(--hue) 15 calc(var(--bg-light) + (var(--light-step) * 2)));
+		background-color: var(--bg-accent);
 	}
 
 	.mobile-float-left {

package/assets/theme.css

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

package/dist/gui/animate.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns whether an element currently has an animation.
+ * This will be empty or `none` when prefers-reduced-motion is enabled
+ */
+export declare function hasAnimation(element: HTMLElement): boolean;
+export declare function onAnimationEnd(element: HTMLElement): Promise<void>;
+/** Waits for an animation to complete on an element, after any other animations. */
+export declare function animate(element: HTMLElement, animation: string): Promise<void>;

package/dist/gui/animate.js

@@ -0,0 +1,27 @@
+/**
+ * Returns whether an element currently has an animation.
+ * This will be empty or `none` when prefers-reduced-motion is enabled
+ */
+export function hasAnimation(element) {
+    const { animationName } = getComputedStyle(element);
+    return !!animationName && animationName !== 'none';
+}
+const pending = new WeakMap();
+export function onAnimationEnd(element) {
+    if (!hasAnimation(element))
+        return Promise.resolve();
+    const { promise, resolve } = Promise.withResolvers();
+    element.addEventListener('animationend', () => resolve(), { once: true });
+    element.addEventListener('animationcancel', () => resolve(), { once: true });
+    return promise;
+}
+/** Waits for an animation to complete on an element, after any other animations. */
+export async function animate(element, animation) {
+    await pending.get(element);
+    element.style.animation = animation;
+    const ended = onAnimationEnd(element);
+    pending.set(element, ended);
+    await ended;
+    if (pending.get(element) === ended)
+        pending.delete(element);
+}

package/dist/gui/index.d.ts

@@ -0,0 +1,2 @@
+export * from './animate.js';
+export * from './clipboard.js';

package/dist/gui/index.js

@@ -0,0 +1,2 @@
+export * from './animate.js';
+export * from './clipboard.js';

package/dist/locales.d.ts

@@ -10,6 +10,8 @@ declare let currentLoaded: {
             readonly named_title: "Permissions for <strong>{name}</strong>";
             readonly owner: "Owner";
             readonly title: "Permissions";
+            readonly remove: "Remove";
+            readonly toast_removed: "Removed access";
         };
         readonly AppMenu: {
             readonly failed: "Couldn't load apps.";
@@ -78,6 +80,7 @@ declare let currentLoaded: {
         readonly preferences: "Preferences";
         readonly register: "Register";
         readonly sessions: "Sessions";
+        readonly success: "Success";
         readonly unknown: "Unknown";
         readonly unnamed: "Unnamed";
         readonly username: "Name";

package/lib/AccessControlDialog.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { addToACL, getACL, text, updateACL, userInfo } from '@axium/client';
+	import { addToACL, getACL, removeFromACL, text, updateACL, userInfo } from '@axium/client';
 	import type { AccessControllable, AccessTarget, User } from '@axium/core';
 	import { getTarget, pickPermissions } from '@axium/core';
 	import { errorText } from '@axium/core/io';
+	import { toastStatus } from './toast.js';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
 	import Icon from './Icon.svelte';
 	import UserCard from './UserCard.svelte';
@@ -27,7 +28,7 @@
 	}
 </script>
 
-<dialog bind:this={dialog} {...rest}>
+<dialog bind:this={dialog} {...rest} onclick={e => e.stopPropagation()}>
 	{#if item.name}
 		<h3>{@html text('component.AccessControlDialog.named_title', { $html: true, name: item.name })}</h3>
 	{:else}
@@ -38,16 +39,16 @@
 		<div class="error">{error}</div>
 	{/if}
 
-	<div class="AccessControl">
+	<div class="AccessControl text">
 		{#if item.user}
 			<UserCard user={item.user} />
 		{:else if item}
-			{#await userInfo(item.userId) then user}<UserCard {user} />{/await}
+			{#await userInfo(item.userId) then user}<UserCard {user} />{:catch}<i>{text('generic.unknown')}</i>{/await}
 		{/if}
 		<span>{text('component.AccessControlDialog.owner')}</span>
 	</div>
 
-	{#each acl as control}
+	{#each acl as control, i (control.userId || control.role || control.tag)}
 		{@const update = (key: string) => async (e: Event & { currentTarget: HTMLInputElement }) => {
 			try {
 				const updated = await updateACL(itemType, item.id, getTarget(control), { [key]: e.currentTarget.checked });
@@ -57,16 +58,36 @@
 			}
 		}}
 		<div class="AccessControl">
-			{#if control.user}
-				<UserCard user={control.user} />
-			{:else if control.role}
-				<span class="icon-text">
-					<Icon i="at" />
-					<span>{control.role}</span>
-				</span>
-			{:else}
-				<i>{text('generic.unknown')}</i>
-			{/if}
+			<div class="target">
+				{#if control.user}
+					<UserCard user={control.user} />
+				{:else if control.role}
+					<span class="icon-text">
+						<Icon i="at" />
+						<span>{control.role}</span>
+					</span>
+				{:else if control.tag}
+					<span class="icon-text">
+						<Icon i="hashtag" />
+						<span>{control.tag}</span>
+					</span>
+				{:else}
+					<i>{text('generic.unknown')}</i>
+				{/if}
+				{#if editable}
+					<button
+						class="icon-text danger"
+						onclick={() =>
+							toastStatus(
+								removeFromACL(itemType, item.id, getTarget(control)).then(() => acl.splice(i, 1)),
+								text('component.AccessControlDialog.toast_removed')
+							)}
+					>
+						<Icon i="user-minus" />
+						<span>{text('component.AccessControlDialog.remove')}</span>
+					</button>
+				{/if}
+			</div>
 			<div class="permissions">
 				{#each Object.entries(pickPermissions(control) as Record<string, boolean>) as [key, value]}
 					{@const id = `${item.id}.${getTarget(control)}.${key}`}
@@ -79,7 +100,7 @@
 						{:else}
 							<Icon i={value ? 'check' : 'xmark'} />
 						{/if}
-						<span>{key}</span>
+						<span>{text(`permission.${itemType}.${key}`, { $default: key })}</span>
 					</span>
 				{/each}
 			</div>
@@ -113,12 +134,23 @@
 	.AccessControl {
 		display: grid;
 		gap: 1em;
-		grid-template-columns: 1fr 10em;
-		min-width: 30em;
+		grid-template-columns: 1fr 1fr;
 		padding: 1em 2em;
+		border-bottom: var(--border-accent);
+
+		&.text {
+			align-items: center;
+		}
+
+		.target {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+			gap: 1em;
+		}
 
-		&:not(.public) {
-			border-bottom: var(--border-accent);
+		@media (width > 700px) {
+			min-width: 30em;
 		}
 	}
 </style>

package/lib/ClipboardCopy.svelte

@@ -2,7 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import { wait } from 'utilium';
 	import Icon from './Icon.svelte';
-	import * as clip from '@axium/client/clipboard';
+	import * as clip from '@axium/client/gui';
 
 	const { value, type = 'text/plain' }: { value: BlobPart; type?: string } = $props();
 

package/lib/FormDialog.svelte

@@ -62,7 +62,7 @@
 	<button type="submit" class={['submit', submitDanger && 'danger']}>{submitText}</button>
 {/snippet}
 
-<dialog bind:this={dialog} {onclose} {...rest}>
+<dialog bind:this={dialog} {onclose} {...rest} onclick={e => e.stopPropagation()}>
 	{@render header?.()}
 	<form {onsubmit} class="main" method="dialog">
 		{#if error}

package/lib/UserDiscovery.svelte

@@ -67,15 +67,11 @@
 						<span><img src={getUserImage(result.value)} alt={result.value.name} />{result.value.name}</span>
 					{:else if result.type == 'role'}
 						<span>
-							<span class="icon-text tag-or-role" style:background-color={colorHashRGB(result.value)}
-								><Icon i="at" />{result.value}</span
-							>
+							<span class="icon-text non-user"><Icon i="at" />{result.value}</span>
 						</span>
 					{:else if result.type == 'tag'}
 						<span>
-							<span class="icon-text tag-or-role" style:background-color={colorHashRGB(result.value)}
-								><Icon i="hashtag" />{result.value}</span
-							>
+							<span class="icon-text non-user"><Icon i="hashtag" />{result.value}</span>
 						</span>
 					{:else if result.type == 'exact'}
 						<span class="non-user">{result.value}</span>

package/lib/ZodInput.svelte

@@ -90,7 +90,7 @@
 {#snippet _in(rest: HTMLInputAttributes)}
 	<div class="ZodInput">
 		{#if !noLabel}<label for={id}>{labelText}</label>{/if}
-		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
+		{#if error}<span class="ZodInput-error">{error}</span>{/if}
 		<input {id} {...rest} bind:value {onchange} {oninput} required={!optional} {defaultValue} class={[error && 'error']} />
 	</div>
 {/snippet}
@@ -136,7 +136,7 @@
 {:else if schema.type == 'array'}
 	<div class="ZodInput">
 		{#if !noLabel}<label for={id}>{labelText}</label>{/if}
-		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
+		{#if error}<span class="ZodInput-error">{error}</span>{/if}
 		<div class="ZodInput-array">
 			{#each value, i}
 				<div class="ZodInput-element">
@@ -180,7 +180,7 @@
 {:else if schema.type == 'enum'}
 	<div class="ZodInput">
 		{#if !noLabel}<label for={id}>{labelText}</label>{/if}
-		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
+		{#if error}<span class="ZodInput-error">{error}</span>{/if}
 		<select {id} {onchange} bind:value required={!optional}>
 			{#each Object.entries(schema.enum) as [key, value]}
 				<option {value} selected={value === value}>{key}</option>
@@ -189,7 +189,7 @@
 	</div>
 {:else}
 	<!-- No idea how to render this -->
-	<i class="error-text">{text('component.ZodInput.invalid_type', { type: JSON.stringify((schema as ZodPref)?.def?.type) })}</i>
+	<i class="error">{text('component.ZodInput.invalid_type', { type: JSON.stringify((schema as ZodPref)?.def?.type) })}</i>
 {/if}
 
 <style>
@@ -198,6 +198,7 @@
 		position-anchor: --zod-input;
 		bottom: calc(anchor(top) - 0.3em);
 		left: anchor(left);
+		color: var(--fg-error);
 	}
 
 	.ZodInput {

package/lib/attachments.ts

@@ -49,6 +49,10 @@ export function contextMenu(...menuItems: (ContextMenuItem | false | null | unde
 		let _forcePopover = false;
 
 		element.oncontextmenu = (e: MouseEvent) => {
+			for (let node = e.target as HTMLElement | null; node && node !== element; node = node.parentElement) {
+				if (node instanceof HTMLDialogElement || (node.popover && node !== menu)) return;
+			}
+
 			e.preventDefault();
 			e.stopPropagation();
 

package/lib/index.ts

@@ -11,7 +11,6 @@ export { default as Popover } from './Popover.svelte';
 export { default as Register } from './Register.svelte';
 export { default as SessionList } from './SessionList.svelte';
 export { default as SidebarLayout } from './SidebarLayout.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';

package/lib/toast.ts

@@ -0,0 +1,81 @@
+import { debug, errorText } from '@axium/core/io';
+import { text } from '@axium/client/locales';
+import { animate } from '@axium/client/gui';
+import Icon from './Icon.svelte';
+import { mount } from 'svelte';
+
+const list = document.querySelector<HTMLDivElement>('#toasts')!;
+
+const toastIcons = {
+	success: 'check',
+	warning: 'regular/triangle-exclamation',
+	error: 'octagon-xmark',
+	info: 'regular/circle-info',
+};
+
+/** Used to determine icon and styling */
+export type ToastType = 'plain' | keyof typeof toastIcons;
+
+const durationMultiplier = {
+	warning: 1.25,
+	error: 1.5,
+} as Record<ToastType, number>;
+
+export async function toast(type: ToastType, message: any): Promise<void> {
+	const text = errorText(message);
+
+	const toast = document.createElement('div');
+	toast.classList.add('toast', 'icon-text', type);
+	if (type != 'plain') mount(Icon, { target: toast, props: { i: toastIcons[type] } });
+
+	const span = document.createElement('span');
+	span.textContent = text;
+	toast.appendChild(span);
+
+	list.appendChild(toast);
+
+	async function dismiss() {
+		debug('Toast dismissed');
+		await animate(toast, 'var(--A-slide-out-right)');
+		toast.remove();
+	}
+
+	let persisted = false;
+
+	function persist() {
+		debug('Toast persisted');
+		persisted = true;
+		toast.onclick = null;
+		toast.style.animation = 'none';
+		toast.style.opacity = '1';
+
+		const button = document.createElement('button');
+		button.classList.add('reset');
+		button.onclick = dismiss;
+		mount(Icon, { target: button, props: { i: 'xmark-large' } });
+		toast.appendChild(button);
+	}
+
+	if (message && message instanceof Error) return persist();
+
+	/**
+	 * @see https://ux.stackexchange.com/a/85898
+	 */
+	const duration = Math.min(Math.max(text.length * 50 * (durationMultiplier[type] || 1), 2000), 7000);
+
+	toast.onclick = persist;
+	await animate(toast, `fade-subtle ${duration}ms ease reverse forwards`);
+	if (!persisted) await dismiss();
+	else debug('Toast not auto-dismissed due to persistence');
+}
+
+export async function toastStatus(promise: Promise<unknown>, successMessage: string = text('generic.success')): Promise<void> {
+	try {
+		await promise;
+		await toast('success', successMessage);
+	} catch (err) {
+		await toast('error', err);
+	}
+}
+
+Object.assign(globalThis, { toast, toastStatus });

package/locales/en.json

@@ -3,7 +3,9 @@
 		"AccessControlDialog": {
 			"named_title": "Permissions for <strong>{name}</strong>",
 			"owner": "Owner",
-			"title": "Permissions"
+			"title": "Permissions",
+			"remove": "Remove",
+			"toast_removed": "Removed access"
 		},
 		"AppMenu": {
 			"failed": "Couldn't load apps.",
@@ -72,6 +74,7 @@
 		"preferences": "Preferences",
 		"register": "Register",
 		"sessions": "Sessions",
+		"success": "Success",
 		"unknown": "Unknown",
 		"unnamed": "Unnamed",
 		"username": "Name",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.17.3",
+	"version": "0.18.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -33,6 +33,7 @@
 	"exports": {
 		"./package.json": "./package.json",
 		".": "./dist/index.js",
+		"./gui": "./dist/gui/index.js",
 		"./*": "./dist/*.js",
 		"./components": "./lib/index.js",
 		"./components/*": "./lib/*.svelte",

package/lib/Toast.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-
-	const { enabled, children, delay = 5000, duration = 1000, ...rest } = $props();
-
-	let hiding = $state(false);
-
-	const show = $derived(enabled && !hiding);
-</script>
-
-{#if show}
-	<div
-		class="Toast"
-		in:fade|global={{ duration }}
-		onintroend={() => (hiding = true)}
-		out:fade|global={{ delay, duration }}
-		onoutroend={() => (hiding = false)}
-		{...rest}
-	>
-		{@render children()}
-	</div>
-{/if}
-
-<style>
-	.Toast {
-		position: fixed;
-		bottom: 1em;
-		left: calc(50% - 10em);
-		right: calc(50% - 10em);
-		width: 20em;
-		padding: 0.5em 1em;
-		border-radius: 1em;
-		opacity: 0.5;
-	}
-</style>