@fuzdev/fuz_app 0.121.0 → 0.123.0

package/dist/ui/AccountSessions.svelte

@@ -43,7 +43,7 @@
 	<h2>
 		Sessions
 		{#if account_sessions.active_count > 0}
-			<span class="chip color_a">{account_sessions.active_count} active</span>
+			<span class="chip palette_a">{account_sessions.active_count} active</span>
 		{/if}
 	</h2>
 
@@ -64,7 +64,7 @@
 		<Datatable {columns} rows={account_sessions.sessions} height="300px">
 			{#snippet cell(column, row)}
 				{#if column.key === 'id'}
-					<span class="chip color_b">active</span>
+					<span class="chip palette_b">active</span>
 					<code class="text_50">{truncate_uuid(row.id)}</code>
 				{:else if column.key === 'created_at'}
 					<span title={format_datetime_local(row.created_at)}>

package/dist/ui/AdminAccounts.svelte

@@ -47,7 +47,7 @@
 	<h1>Accounts</h1>
 	{#if admin_accounts.account_count > 0}
 		<p>
-			<span class="chip color_a">
+			<span class="chip palette_a">
 				{admin_accounts.account_count} account{admin_accounts.account_count === 1 ? '' : 's'}
 			</span>
 		</p>
@@ -79,7 +79,7 @@
 						<span class="text_50 font_size_sm">
 							{row.account.email}
 							{#if row.account.email_verified}
-								<span class="chip font_size_sm color_b">verified</span>
+								<span class="chip font_size_sm palette_b">verified</span>
 							{:else}
 								<span class="chip font_size_sm">unverified</span>
 							{/if}
@@ -97,7 +97,7 @@
 					{#each row.role_grants as role_grant (role_grant.id)}
 						{@const scope = scope_label(role_grant.scope_id, role_grant.role)}
 						<div class="row">
-							<span class="chip color_b">{role_grant.role}</span>
+							<span class="chip palette_b">{role_grant.role}</span>
 							{#if scope !== null}
 								<span class="text_50 font_size_sm" title={role_grant.scope_id ?? undefined}>
 									{scope}
@@ -117,7 +117,7 @@
 								<ConfirmButton
 									onconfirm={() => admin_accounts.submit_revoke(actor_id, role_grant.id)}
 									title="revoke {role_grant.role}"
-									class="sm"
+									class="sized_sm"
 									label="revoke"
 									pending={admin_accounts.revoke.loading(role_grant.id)}
 								/>
@@ -145,7 +145,7 @@
 							<ConfirmButton
 								onconfirm={() => admin_accounts.submit_retract(offer.id)}
 								title="retract offer"
-								class="sm"
+								class="sized_sm"
 								label="retract"
 								pending={admin_accounts.retract.loading(offer.id)}
 							/>
@@ -165,12 +165,16 @@
 							<ConfirmButton
 								onconfirm={() => admin_accounts.submit_grant(row.account.id, role)}
 								title="offer {role}"
-								class="sm"
+								class="sized_sm"
 								label={`+ ${role}`}
 								pending={admin_accounts.grant.loading(key)}
 							>
 								{#snippet popover_content(_popover, do_confirm)}
-									<button type="button" class="color_b bg_100" onclick={() => do_confirm()}>
+									<button
+										type="button"
+										class="palette_b background-color:var(--bg_100)"
+										onclick={() => do_confirm()}
+									>
 										<span class="py_sm">offer '{role}' to @{row.account.username}</span>
 									</button>
 								{/snippet}
@@ -184,14 +188,14 @@
 					{#if row.account.deleted_at}
 						{@const undelete_error = admin_accounts.undelete.error(row.account.id)}
 						<span
-							class="chip font_size_sm color_c"
+							class="chip font_size_sm palette_c"
 							title={format_datetime_local(row.account.deleted_at)}
 						>
 							deleted {format_relative_time(row.account.deleted_at)}
 						</span>
 						<button
 							type="button"
-							class="sm"
+							class="sized_sm"
 							disabled={admin_accounts.undelete.loading(row.account.id)}
 							onclick={() => admin_accounts.submit_undelete(row.account.id)}
 						>
@@ -205,12 +209,16 @@
 						<ConfirmButton
 							onconfirm={() => admin_accounts.submit_delete(row.account.id)}
 							title="soft-delete @{row.account.username}"
-							class="sm"
+							class="sized_sm"
 							label="delete"
 							pending={admin_accounts.soft_delete.loading(row.account.id)}
 						>
 							{#snippet popover_content(_popover, do_confirm)}
-								<button type="button" class="color_c bg_100" onclick={() => do_confirm()}>
+								<button
+									type="button"
+									class="palette_c background-color:var(--bg_100)"
+									onclick={() => do_confirm()}
+								>
 									<span class="py_sm">soft-delete @{row.account.username} (reversible)</span>
 								</button>
 							{/snippet}

package/dist/ui/AdminAuditLog.svelte

@@ -88,7 +88,7 @@
 			</select>
 		</label>
 		<button type="button" onclick={load}>refresh</button>
-		<button type="button" onclick={toggle_streaming} class:color_b={streaming}>
+		<button type="button" onclick={toggle_streaming} class:palette_b={streaming}>
 			{streaming ? 'stop' : 'stream'}
 		</button>
 		{#if streaming}
@@ -114,8 +114,8 @@
 				{:else if column.key === 'outcome'}
 					<span
 						class="chip"
-						class:color_b={row.outcome === 'success'}
-						class:color_c={row.outcome === 'failure'}
+						class:palette_b={row.outcome === 'success'}
+						class:palette_c={row.outcome === 'failure'}
 					>
 						{row.outcome}
 					</span>

package/dist/ui/AdminInvites.svelte

@@ -60,7 +60,7 @@
 	</fieldset>
 	{#if admin_invites.invite_count > 0}
 		<p>
-			<span class="chip color_a">
+			<span class="chip palette_a">
 				{admin_invites.unclaimed_count} unclaimed / {admin_invites.invite_count} total
 			</span>
 		</p>
@@ -75,7 +75,7 @@
 	>
 		<fieldset class="row gap_sm">
 			<legend>Invite Target</legend>
-			<label class="grow">
+			<label class="flex-grow:1">
 				<div class="title">email</div>
 				<input
 					type="email"
@@ -84,7 +84,7 @@
 					disabled={admin_invites.create.loading}
 				/>
 			</label>
-			<label class="grow">
+			<label class="flex-grow:1">
 				<div class="title">username</div>
 				<input
 					type="text"
@@ -114,7 +114,7 @@
 			{#snippet cell(column, row)}
 				{#if column.key === 'claimed_at'}
 					{#if row.claimed_at}
-						<span class="chip color_b">claimed</span>
+						<span class="chip palette_b">claimed</span>
 						<span class="text_50 font_size_sm" title={format_datetime_local(row.claimed_at)}>
 							{#if row.claimed_by_username}
 								by {row.claimed_by_username}
@@ -138,7 +138,7 @@
 						<ConfirmButton
 							onconfirm={() => admin_invites.submit_delete(row.id)}
 							title="delete invite"
-							class="sm"
+							class="sized_sm"
 							label="delete"
 							pending={admin_invites.remove.loading(row.id)}
 						/>

package/dist/ui/AdminOverview.svelte

@@ -169,7 +169,7 @@
 			<div class="baseline-row gap_sm">
 				<span class="text_50">public signup</span>
 				{#if app_settings.settings?.open_signup}
-					<span class="chip color_b">open</span>
+					<span class="chip palette_b">open</span>
 				{:else}
 					<span class="chip">closed</span>
 				{/if}
@@ -187,7 +187,7 @@
 						<li>
 							<span>{invite.email || invite.username || '—'}</span>
 							{#if invite.claimed_at}
-								<span class="chip font_size_sm color_b">claimed</span>
+								<span class="chip font_size_sm palette_b">claimed</span>
 							{:else}
 								<span class="chip font_size_sm">unclaimed</span>
 							{/if}
@@ -221,7 +221,7 @@
 						</span>
 						<code class="font_size_sm">{event.event_type}</code>
 						{#if event.outcome === 'failure'}
-							<span class="chip font_size_sm color_c">fail</span>
+							<span class="chip font_size_sm palette_c">fail</span>
 						{/if}
 					</li>
 				{/each}
@@ -279,7 +279,7 @@
 			<div class="baseline-row gap_sm">
 				<span class="text_50">public signup</span>
 				{#if app_settings.settings?.open_signup}
-					<span class="chip color_b">open</span>
+					<span class="chip palette_b">open</span>
 				{:else}
 					<span class="chip">invite-only</span>
 				{/if}

package/dist/ui/AdminRoleGrantHistory.svelte

@@ -50,8 +50,8 @@
 				{#if column.key === 'event_type'}
 					<span
 						class="chip"
-						class:color_b={row.event_type === 'role_grant_create'}
-						class:color_c={row.event_type === 'role_grant_revoke'}
+						class:palette_b={row.event_type === 'role_grant_create'}
+						class:palette_c={row.event_type === 'role_grant_revoke'}
 					>
 						{row.event_type === 'role_grant_create' ? 'grant' : 'revoke'}
 					</span>

package/dist/ui/AdminSessions.svelte

@@ -35,7 +35,7 @@
 	<h1>Active Sessions</h1>
 	{#if admin_sessions.active_count > 0}
 		<p>
-			<span class="chip color_a">{admin_sessions.active_count} active</span>
+			<span class="chip palette_a">{admin_sessions.active_count} active</span>
 		</p>
 	{/if}
 
@@ -62,7 +62,7 @@
 					<ConfirmButton
 						onconfirm={() => admin_sessions.submit_revoke_sessions(row.account_id)}
 						title="revoke all sessions for {row.username}"
-						class="sm"
+						class="sized_sm"
 						label="revoke sessions"
 						pending={admin_sessions.revoke_sessions.loading(row.account_id)}
 					/>
@@ -72,7 +72,7 @@
 					<ConfirmButton
 						onconfirm={() => admin_sessions.submit_revoke_tokens(row.account_id)}
 						title="revoke all tokens for {row.username}"
-						class="sm"
+						class="sized_sm"
 						label="revoke tokens"
 						pending={admin_sessions.revoke_tokens.loading(row.account_id)}
 					/>

package/dist/ui/BootstrapForm.svelte

@@ -147,7 +147,7 @@
 			disabled={false}
 			aria-disabled={auth_state.verifying}
 			onclick={handle_bootstrap}
-			class={auth_state.verify_error ? 'color_c' : ''}
+			class={auth_state.verify_error ? 'palette_c' : ''}
 		>
 			create account
 		</PendingButton>

package/dist/ui/CLAUDE.md

@@ -221,7 +221,21 @@ pattern rather than reintroducing prop-drilling.
     to keep narrow mode at `0px`. To change only the wide open offset, target
     `.app-shell.wide-open > .app-shell-content`, also inside that negation.
 - `ColumnLayout.svelte` — fixed `aside` column + fluid `children`
-  column; `column_width = '280px'`.
+  column; `column_width = '280px'`, `aside_label = 'menu'`. Below 64rem of
+  its own width (an `inline-size` container query named `column_layout`;
+  64rem under fuz_css's 62.5% root is fuz_css's `sm` breakpoint, 640px at
+  the default font size) the columns stack and the aside collapses behind a
+  sticky `type="button"` toggle (`menuitem plain` with a `chevron`, text
+  `aside_label`, `aria-expanded`/`aria-controls`); opened, the aside sits in flow above the content (scrolled into view under the toggle when scroll anchoring would leave it above the view), and `afterNavigate` closes it. With a bounded height, the stacked layout
+  scrolls as one column and the toggle sticks to its top; under a parent
+  that grows with its content, the page scrolls and the toggle scrolls away
+  with it. Above the threshold the toggle is `display: none`. The switch is
+  CSS alone, so the server render shows the right form at any width and
+  hydration changes nothing. The
+  `<aside>` takes `aria-label={aside_label}`; consumers wrap links in their
+  own `<nav>`. Hooks: `--column_width`, `--column_toggle_bg` (default
+  `--shade_00`). The container can't size from its content, so a
+  shrink-to-fit placement collapses it to zero width.
 - `MenuLink.svelte` — SvelteKit `<a>` with `selected` derived from
   `page.url.pathname` (fires for exact match + descendant pages).
   Exact matches additionally get `aria-current="page"`. Takes `path`

package/dist/ui/ColumnLayout.svelte

@@ -1,18 +1,52 @@
 <script lang="ts">
 	/**
-	 * Two-column layout — fixed-width `aside` on the left, fluid `children`
+	 * Two-column layout - fixed-width `aside` on the left, fluid `children`
 	 * column on the right. Both columns scroll independently.
 	 *
+	 * Below a threshold of the layout's own width - a container query, not a
+	 * media query, so a nested layout decides for itself - the columns stack:
+	 * the aside collapses behind a toggle button labelled `aside_label`, and
+	 * when opened it sits in flow above the content, pushing it down, until
+	 * the toggle closes it or a navigation does. Opening scrolls the aside
+	 * into view, under the toggle, when it would land above the view.
+	 *
+	 * With a bounded height, the stacked layout scrolls as one column and the
+	 * toggle sticks to its top; under a parent that grows with its content,
+	 * the page scrolls and the toggle scrolls away with it.
+	 *
+	 * The threshold matches fuz_css's `sm` breakpoint. Above it the toggle is
+	 * `display: none`. The switch is CSS alone, so the server render shows the
+	 * right form at any width and hydration changes nothing.
+	 *
+	 * The root is an `inline-size` query container, so its width can't come
+	 * from its content: a layout placed where it would shrink to fit (an
+	 * inline-block, an absolutely positioned or floated box without a width,
+	 * a flex row item that doesn't grow) collapses to zero width. Give it a
+	 * width from its context, as a block or a stretched or growing flex item.
+	 *
+	 * Requires the SvelteKit runtime - it closes the aside from
+	 * `afterNavigate`. Without JS the stacked aside can't be opened, since the
+	 * toggle is client state; above the threshold it's always shown.
+	 *
+	 * Renders a generic `<aside>` named by `aside_label`; wrap navigation
+	 * links in a `<nav>` inside the `aside` snippet.
+	 *
+	 * Styling hooks: `--column_width` (set from `column_width`) and
+	 * `--column_toggle_bg`, the stacked toggle bar's opaque background so
+	 * content scrolls under it unseen (default `--shade_00`, the page ground).
+	 *
 	 * @module
 	 */
 
-	import type { Snippet } from 'svelte';
+	import { tick, type Snippet } from 'svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { afterNavigate } from '$app/navigation';
 
 	const {
 		aside,
 		children,
 		column_width = '280px',
+		aside_label = 'menu',
 		class: class_name = '',
 		...rest
 	}: SvelteHTMLElements['div'] & {
@@ -23,24 +57,85 @@
 		 * @default '280px'
 		 */
 		column_width?: string;
+		/**
+		 * The stacked toggle's text and the aside's accessible name.
+		 * @default 'menu'
+		 */
+		aside_label?: string;
 	} = $props();
+
+	const uid = $props.id();
+	const aside_id = `${uid}-aside`;
+
+	let aside_open = $state(false);
+
+	let toggle_bar_el: HTMLDivElement;
+	let aside_el: HTMLElement;
+
+	const toggle_aside = async (): Promise<void> => {
+		aside_open = !aside_open;
+		await tick();
+		// closed, or closed again before the DOM settled
+		if (!aside_open) return;
+		// the aside goes in above the content, and scroll anchoring keeps the
+		// content where it was, so opening while scrolled - the stacked body,
+		// or the page past a toggle half out of view - leaves the aside above
+		// the view; bring its start back under the toggle, whether the toggle
+		// sticks (bounded) or sits just above it (growing)
+		const bar = toggle_bar_el.getBoundingClientRect();
+		if (aside_el.getBoundingClientRect().top >= Math.max(0, bar.bottom)) return;
+		aside_el.style.scrollMarginTop = `${bar.height}px`;
+		aside_el.scrollIntoView({ block: 'start' });
+	};
+
+	afterNavigate(() => {
+		aside_open = false;
+	});
 </script>
 
 <div class="column-layout {class_name}" style:--column_width={column_width} {...rest}>
-	<aside class="column-fixed unstyled">
-		{@render aside()}
-	</aside>
-	<div class="column-fluid">
-		{@render children()}
+	<div class={['column-layout-body', { 'aside-open': aside_open }]}>
+		<div class="column-toggle-bar" bind:this={toggle_bar_el}>
+			<button
+				type="button"
+				class="column-toggle menuitem plain"
+				aria-expanded={aside_open}
+				aria-controls={aside_id}
+				onclick={toggle_aside}
+			>
+				{aside_label}
+				<span class="chevron" aria-hidden="true"></span>
+			</button>
+		</div>
+		<aside
+			id={aside_id}
+			class="column-fixed unstyled"
+			aria-label={aside_label}
+			bind:this={aside_el}
+		>
+			{@render aside()}
+		</aside>
+		<div class="column-fluid">
+			{@render children()}
+		</div>
 	</div>
 </div>
 
 <style>
 	.column-layout {
+		container: column_layout / inline-size;
+		height: 100%;
+	}
+
+	.column-layout-body {
 		display: flex;
 		height: 100%;
 	}
 
+	.column-toggle-bar {
+		display: none;
+	}
+
 	.column-fixed {
 		width: var(--column_width, 280px);
 		min-width: var(--column_width, 280px);
@@ -54,4 +149,40 @@
 		min-width: 0;
 		overflow: auto;
 	}
+
+	/* fuz_css's `sm` breakpoint is the media query `40rem`, where `rem` is the
+	   initial font size; in a container query `rem` reads the root, which
+	   fuz_css sets to 62.5%, so `64rem` is the same width at any user font
+	   size - keep in sync with `sm` in fuz_css's `modifiers.ts` */
+	@container column_layout (width < 64rem) {
+		.column-layout-body {
+			flex-direction: column;
+			overflow: auto;
+		}
+		.column-toggle-bar {
+			display: block;
+			position: sticky;
+			top: 0;
+			z-index: 1;
+			background-color: var(--column_toggle_bg, var(--shade_00));
+		}
+		/* `flex: none` because the aside scrolls, so it would otherwise shrink
+		   to nothing in the body's fixed height */
+		.column-layout-body > .column-fixed {
+			flex: none;
+			width: auto;
+			min-width: 0;
+			height: auto;
+		}
+		.column-layout-body:not(.aside-open) > .column-fixed {
+			display: none;
+		}
+		.column-fluid {
+			flex: none;
+			height: auto;
+		}
+		.column-layout-body.aside-open > .column-toggle-bar .chevron {
+			rotate: 90deg;
+		}
+	}
 </style>

package/dist/ui/ColumnLayout.svelte.d.ts

@@ -1,10 +1,42 @@
 /**
-     * Two-column layout — fixed-width `aside` on the left, fluid `children`
+     * Two-column layout - fixed-width `aside` on the left, fluid `children`
      * column on the right. Both columns scroll independently.
      *
+     * Below a threshold of the layout's own width - a container query, not a
+     * media query, so a nested layout decides for itself - the columns stack:
+     * the aside collapses behind a toggle button labelled `aside_label`, and
+     * when opened it sits in flow above the content, pushing it down, until
+     * the toggle closes it or a navigation does. Opening scrolls the aside
+     * into view, under the toggle, when it would land above the view.
+     *
+     * With a bounded height, the stacked layout scrolls as one column and the
+     * toggle sticks to its top; under a parent that grows with its content,
+     * the page scrolls and the toggle scrolls away with it.
+     *
+     * The threshold matches fuz_css's `sm` breakpoint. Above it the toggle is
+     * `display: none`. The switch is CSS alone, so the server render shows the
+     * right form at any width and hydration changes nothing.
+     *
+     * The root is an `inline-size` query container, so its width can't come
+     * from its content: a layout placed where it would shrink to fit (an
+     * inline-block, an absolutely positioned or floated box without a width,
+     * a flex row item that doesn't grow) collapses to zero width. Give it a
+     * width from its context, as a block or a stretched or growing flex item.
+     *
+     * Requires the SvelteKit runtime - it closes the aside from
+     * `afterNavigate`. Without JS the stacked aside can't be opened, since the
+     * toggle is client state; above the threshold it's always shown.
+     *
+     * Renders a generic `<aside>` named by `aside_label`; wrap navigation
+     * links in a `<nav>` inside the `aside` snippet.
+     *
+     * Styling hooks: `--column_width` (set from `column_width`) and
+     * `--column_toggle_bg`, the stacked toggle bar's opaque background so
+     * content scrolls under it unseen (default `--shade_00`, the page ground).
+     *
      * @module
      */
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
 type $$ComponentProps = SvelteHTMLElements['div'] & {
     aside: Snippet;
@@ -14,6 +46,11 @@ type $$ComponentProps = SvelteHTMLElements['div'] & {
      * @default '280px'
      */
     column_width?: string;
+    /**
+     * The stacked toggle's text and the aside's accessible name.
+     * @default 'menu'
+     */
+    aside_label?: string;
 };
 declare const ColumnLayout: import("svelte").Component<$$ComponentProps, {}, "">;
 type ColumnLayout = ReturnType<typeof ColumnLayout>;

package/dist/ui/ColumnLayout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnLayout.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/ColumnLayout.svelte"],"names":[],"mappings":"AAGA;;;;;OAKI;AACJ,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA6BH,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ColumnLayout.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/ColumnLayout.svelte"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCI;AACJ,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAmEH,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/ui/ConfirmButton.svelte

@@ -130,7 +130,7 @@
 		{:else}
 			<button
 				type="button"
-				class="color_c bg_100"
+				class="palette_c background-color:var(--bg_100)"
 				class:icon_button={!popover_button_content}
 				onclick={() => confirm(popover)}
 				title={rest.title ? `confirm ${rest.title}` : 'confirm'}

package/dist/ui/Datatable.svelte

@@ -156,7 +156,7 @@
 		position: sticky;
 		top: 0;
 		z-index: 1;
-		background: var(--bg, Canvas);
+		background: var(--shade_00, Canvas);
 		border-bottom: var(--border_width, 1px) solid var(--border_color);
 	}
 
@@ -178,7 +178,7 @@
 	}
 
 	.datatable-resize-handle:hover {
-		background: var(--color_a_10);
+		background: var(--palette_a_10);
 	}
 
 	.datatable-row {

package/dist/ui/LoginForm.svelte

@@ -103,7 +103,7 @@
 			disabled={false}
 			aria-disabled={auth_state.verifying}
 			onclick={handle_login}
-			class={auth_state.verify_error ? 'color_c' : ''}
+			class={auth_state.verify_error ? 'palette_c' : ''}
 		>
 			log in
 		</PendingButton>

package/dist/ui/RoleGrantOfferHistory.svelte

@@ -56,14 +56,14 @@
 	const status_chip_class = (status: string): string => {
 		switch (status) {
 			case 'accepted':
-				return 'chip color_b';
+				return 'chip palette_b';
 			case 'pending':
-				return 'chip color_a';
+				return 'chip palette_a';
 			case 'declined':
 			case 'retracted':
 			case 'superseded':
 			case 'expired':
-				return 'chip color_c';
+				return 'chip palette_c';
 			default:
 				return 'chip';
 		}

package/dist/ui/RoleGrantOfferInbox.svelte

@@ -65,8 +65,8 @@
 		<ul class="column gap_md">
 			{#each role_grant_offers.incoming as offer (offer.id)}
 				<li class="box p_md column gap_sm">
-					<div class="row gap_sm align_center">
-						<span class="chip color_a">{format_role(offer.role)}</span>
+					<div class="row gap_sm">
+						<span class="chip palette_a">{format_role(offer.role)}</span>
 						<span class="text_50 font_size_sm">{scope_label(offer.scope_id, offer.role)}</span>
 						<span class="text_50 font_size_sm">from {format_actor(offer.from_actor_id)}</span>
 						<span
@@ -86,7 +86,7 @@
 							pending={role_grant_offers.accept.loading}
 							disabled={role_grant_offers.accept.loading}
 							onclick={() => role_grant_offers.submit_accept(offer.id)}
-							class="color_b"
+							class="palette_b"
 						>
 							accept
 						</PendingButton>
@@ -117,7 +117,11 @@
 										></textarea>
 									</label>
 									<div class="row gap_sm">
-										<button type="button" class="color_c bg_100" onclick={confirm}>
+										<button
+											type="button"
+											class="palette_c background-color:var(--bg_100)"
+											onclick={confirm}
+										>
 											confirm decline
 										</button>
 										<button type="button" onclick={() => popover.hide()}>cancel</button>

package/dist/ui/SignupForm.svelte

@@ -142,7 +142,7 @@
 			disabled={false}
 			aria-disabled={auth_state.verifying}
 			onclick={handle_signup}
-			class={auth_state.verify_error ? 'color_c' : ''}
+			class={auth_state.verify_error ? 'palette_c' : ''}
 		>
 			sign up
 		</PendingButton>

package/dist/ui/SurfaceExplorer.svelte

@@ -90,11 +90,11 @@
 	};
 
 	const auth_chip_class = (auth: RouteAuth): string => {
-		if (is_public_auth(auth)) return 'chip color_b';
-		if (is_keeper_auth(auth)) return 'chip color_c';
-		if (is_role_auth(auth)) return 'chip color_d';
-		if (is_credential_gated_auth(auth)) return 'chip color_e';
-		if (is_plain_authenticated_auth(auth)) return 'chip color_a';
+		if (is_public_auth(auth)) return 'chip palette_b';
+		if (is_keeper_auth(auth)) return 'chip palette_c';
+		if (is_role_auth(auth)) return 'chip palette_d';
+		if (is_credential_gated_auth(auth)) return 'chip palette_e';
+		if (is_plain_authenticated_auth(auth)) return 'chip palette_a';
 		return 'chip';
 	};
 
@@ -107,15 +107,15 @@
 <section>
 	<div class="row" style:gap="var(--space_md)" style:flex-wrap="wrap" style:align-items="center">
 		<span class="chip">{surface.routes.length} routes</span>
-		{#if summary.none > 0}<span class="chip color_b">{summary.none} public</span>{/if}
+		{#if summary.none > 0}<span class="chip palette_b">{summary.none} public</span>{/if}
 		{#if summary.authenticated > 0}
-			<span class="chip color_a">{summary.authenticated} authenticated</span>
+			<span class="chip palette_a">{summary.authenticated} authenticated</span>
 		{/if}
-		{#if role_count > 0}<span class="chip color_d">{role_count} role</span>{/if}
+		{#if role_count > 0}<span class="chip palette_d">{role_count} role</span>{/if}
 		{#if credential_count > 0}
-			<span class="chip color_e">{credential_count} credential-gated</span>
+			<span class="chip palette_e">{credential_count} credential-gated</span>
 		{/if}
-		{#if summary.keeper > 0}<span class="chip color_c">{summary.keeper} keeper</span>{/if}
+		{#if summary.keeper > 0}<span class="chip palette_c">{summary.keeper} keeper</span>{/if}
 		<span class="chip">{surface.middleware.length} middleware</span>
 		{#if rpc_method_count > 0}<span class="chip">{rpc_method_count} rpc methods</span>{/if}
 		{#if ws_method_count > 0}<span class="chip">{ws_method_count} ws methods</span>{/if}
@@ -126,7 +126,7 @@
 				(d: AppSurfaceDiagnostic) => d.level === 'warning'
 			)}
 			{#if warnings.length}
-				<span class="chip color_e">
+				<span class="chip palette_e">
 					{warnings.length} warning{warnings.length === 1 ? '' : 's'}
 				</span>
 			{/if}
@@ -391,10 +391,10 @@
 				<code>{endpoint.path}</code>
 				<span class="chip">{endpoint.methods.length} methods</span>
 				{#each endpoint.required_roles as role (role)}
-					<span class="chip color_d">role:{role}</span>
+					<span class="chip palette_d">role:{role}</span>
 				{/each}
 				{#each endpoint.allowed_origins as origin (origin)}
-					<span class="chip color_b"><code>{origin}</code></span>
+					<span class="chip palette_b"><code>{origin}</code></span>
 				{/each}
 			</div>
 			{#if endpoint.methods.length === 0}
@@ -473,7 +473,7 @@
 					{#each surface.diagnostics as d, i (i)}
 						<tr>
 							<td>
-								<span class={d.level === 'warning' ? 'chip color_e' : 'chip'}>{d.level}</span>
+								<span class={d.level === 'warning' ? 'chip palette_e' : 'chip'}>{d.level}</span>
 							</td>
 							<td><code>{d.category}</code></td>
 							<td>{d.message}</td>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_app",
-  "version": "0.121.0",
+  "version": "0.123.0",
   "description": "fullstack app library",
   "glyph": "🗝",
   "logo": "logo.svg",
@@ -33,6 +33,7 @@
   "peerDependencies": {
     "@electric-sql/pglite": ">=0.4",
     "@fuzdev/blake3-wasm": ">=0.2.0",
+    "@fuzdev/fuz_css": ">=0.65.0",
     "@fuzdev/fuz_util": ">=0.70.0",
     "@hono/node-server": ">=1",
     "@hono/node-ws": ">=1",
@@ -49,6 +50,9 @@
     "@electric-sql/pglite": {
       "optional": true
     },
+    "@fuzdev/fuz_css": {
+      "optional": true
+    },
     "@hono/node-server": {
       "optional": true
     },
@@ -74,10 +78,10 @@
   "devDependencies": {
     "@electric-sql/pglite": "^0.4.5",
     "@fuzdev/blake3-wasm": "^0.2.0",
-    "@fuzdev/fuz_code": "^0.48.0",
-    "@fuzdev/fuz_css": "^0.64.0",
-    "@fuzdev/fuz_ui": "^0.208.0",
-    "@fuzdev/fuz_util": "^0.70.0",
+    "@fuzdev/fuz_code": "^0.50.0",
+    "@fuzdev/fuz_css": "^0.65.0",
+    "@fuzdev/fuz_ui": "^0.210.0",
+    "@fuzdev/fuz_util": "^0.71.0",
     "@fuzdev/gro": "^0.213.0",
     "@fuzdev/mdz": "^0.3.0",
     "@hono/node-server": "^1.19.14",