@fuzdev/fuz_app 0.121.0 → 0.122.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/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.122.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.209.0",
+    "@fuzdev/fuz_util": "^0.71.0",
     "@fuzdev/gro": "^0.213.0",
     "@fuzdev/mdz": "^0.3.0",
     "@hono/node-server": "^1.19.14",