@joewinke/jatui 0.22.0 → 0.24.0

package/dist/components/ConfirmDialog.svelte

@@ -151,10 +151,15 @@
 {/if}
 
 <style>
+	/* Theme tokens (jatui-is2ow.3): every colour derives from var(--color-*) —
+	   relative-color `oklch(from var(--x) l c h / a)` keeps the token's hue/chroma
+	   and only swaps alpha, so light and dark themes both render correctly.
+	   --n-00 (pure black) is a jat-IDE neutral; the inline fallback keeps
+	   standalone consumers (no app.css) rendering the same value. */
 	.cd-scrim {
 		position: fixed;
 		inset: 0;
-		background: oklch(0 0 0 / 0.45);
+		background: oklch(from var(--n-00, oklch(0 0 0)) l c h / 0.45);
 		z-index: 9990;
 		backdrop-filter: blur(2px);
 	}
@@ -175,21 +180,21 @@
 		flex-direction: column;
 		gap: 0.625rem;
 		padding: 1rem 1.125rem 0.625rem;
-		background: color-mix(in oklch, var(--color-base-100) 98%, transparent);
-		border: 1px solid var(--color-base-300);
+		background: oklch(from var(--color-base-200) l c h / 98%);
+		border: 1px solid var(--color-base-100);
 		border-radius: 0.875rem;
 		box-shadow:
-			0 20px 60px oklch(0 0 0 / 0.55),
-			0 0 0 1px color-mix(in oklch, var(--color-base-300) 50%, transparent);
+			0 20px 60px oklch(from var(--n-00, oklch(0 0 0)) l c h / 0.55),
+			0 0 0 1px oklch(from var(--color-base-100) l c h / 50%);
 		backdrop-filter: blur(16px);
 	}
 
 	.cd-box.cd-danger {
-		border-color: color-mix(in oklch, var(--color-error) 55%, transparent);
+		border-color: oklch(from var(--color-error) l c h / 55%);
 		box-shadow:
-			0 20px 60px oklch(0 0 0 / 0.6),
-			0 0 0 1px color-mix(in oklch, var(--color-error) 25%, transparent),
-			0 0 30px color-mix(in oklch, var(--color-error) 12%, transparent);
+			0 20px 60px oklch(from var(--n-00, oklch(0 0 0)) l c h / 0.6),
+			0 0 0 1px oklch(from var(--color-error) l c h / 25%),
+			0 0 30px oklch(from var(--color-error) l c h / 12%);
 	}
 
 	.cd-header {
@@ -206,7 +211,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: color-mix(in oklch, var(--color-info) 35%, transparent);
+		background: color-mix(in oklch, var(--color-info) 20%, transparent);
 		border: 1px solid color-mix(in oklch, var(--color-info) 40%, transparent);
 		color: var(--color-info);
 	}
@@ -217,9 +222,9 @@
 	}
 
 	.cd-icon.cd-icon-danger {
-		background: color-mix(in oklch, var(--color-error) 35%, transparent);
-		border-color: color-mix(in oklch, var(--color-error) 40%, transparent);
-		color: var(--color-error-content);
+		background: color-mix(in oklch, var(--color-error) 20%, transparent);
+		border-color: oklch(from var(--color-error) l c h / 40%);
+		color: var(--color-error);
 	}
 
 	.cd-title-group {
@@ -241,13 +246,12 @@
 	.cd-body {
 		margin: 0;
 		font-size: 0.8rem;
-		color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+		color: oklch(from var(--color-base-content) l c h / 70%);
 		line-height: 1.5;
 	}
 
 	.cd-actions {
 		display: flex;
-		justify-content: flex-end;
 		align-items: center;
 		gap: 0.375rem;
 		padding-top: 0.125rem;
@@ -263,15 +267,15 @@
 		border-radius: 0.5rem;
 		border: 1px solid transparent;
 		background: transparent;
-		color: color-mix(in oklch, var(--color-base-content) 85%, transparent);
+		color: oklch(from var(--color-base-content) l c h / 95%);
 		cursor: pointer;
 		transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
 		white-space: nowrap;
 	}
 
 	.cd-btn:hover {
-		background: var(--color-base-200);
-		border-color: var(--color-base-300);
+		background: var(--color-base-100);
+		border-color: var(--color-base-100);
 	}
 
 	.cd-btn-cancel:focus-visible {
@@ -280,25 +284,25 @@
 	}
 
 	.cd-btn-confirm {
-		background: color-mix(in oklch, var(--color-base-300) 60%, transparent);
-		border-color: var(--color-base-300);
+		background: oklch(from var(--color-base-100) l c h / 60%);
+		border-color: color-mix(in oklch, var(--color-primary) 40%, transparent);
 	}
 
 	.cd-btn-confirm:hover {
-		background: var(--color-base-200);
-		border-color: color-mix(in oklch, var(--color-base-content) 30%, transparent);
+		background: color-mix(in oklch, var(--color-primary) 20%, var(--color-base-200));
+		border-color: color-mix(in oklch, var(--color-primary) 50%, transparent);
 	}
 
 	.cd-btn-danger {
-		background: color-mix(in oklch, var(--color-error) 45%, transparent);
-		border-color: color-mix(in oklch, var(--color-error) 55%, transparent);
-		color: var(--color-error-content);
+		background: color-mix(in oklch, var(--color-error) 30%, transparent);
+		border-color: oklch(from var(--color-error) l c h / 55%);
+		color: oklch(from var(--color-error) calc(l + 0.2) c h);
 	}
 
 	.cd-btn-danger:hover {
-		background: color-mix(in oklch, var(--color-error) 65%, transparent);
-		border-color: color-mix(in oklch, var(--color-error) 70%, transparent);
-		color: var(--color-error-content);
+		background: color-mix(in oklch, var(--color-error) 45%, transparent);
+		border-color: oklch(from var(--color-error) l c h / 70%);
+		color: oklch(from var(--color-error) calc(l + 0.25) c h);
 	}
 
 	.cd-btn-confirm:focus-visible,
@@ -311,11 +315,11 @@
 		font-family: ui-monospace, monospace;
 		font-size: 0.65rem;
 		padding: 0.0625rem 0.3125rem;
-		background: var(--color-base-200);
-		border: 1px solid var(--color-base-300);
+		background: var(--color-base-100);
+		border: 1px solid var(--color-base-100);
 		border-bottom-width: 2px;
 		border-radius: 0.25rem;
-		color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+		color: oklch(from var(--color-base-content) l c h / 85%);
 		line-height: 1.6;
 	}
 
@@ -323,7 +327,7 @@
 		margin-left: auto;
 		font-family: ui-monospace, monospace;
 		font-size: 0.7rem;
-		color: color-mix(in oklch, var(--color-base-content) 45%, transparent);
+		color: oklch(from var(--color-base-content) l c h / 55%);
 		font-variant-numeric: tabular-nums;
 		min-width: 2ch;
 		text-align: right;
@@ -331,20 +335,20 @@
 
 	.cd-progress {
 		height: 2px;
-		background: var(--color-base-200);
+		background: var(--color-base-100);
 		border-radius: 999px;
 		overflow: hidden;
 	}
 
 	.cd-progress-fill {
 		height: 100%;
-		background: linear-gradient(90deg, var(--color-info), var(--color-info));
+		background: linear-gradient(90deg, var(--color-primary), var(--color-info));
 		border-radius: 999px;
 		transition: width 60ms linear;
 	}
 
 	.cd-progress-fill.cd-progress-danger {
-		background: linear-gradient(90deg, var(--color-error), var(--color-error));
+		background: linear-gradient(90deg, var(--color-error), var(--color-warning));
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/dist/components/CopyButton.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { copyText } from '../utils/clipboard';
+
 	interface Props {
 		text?: string;
 		getText?: () => string | Promise<string>;
@@ -42,14 +44,15 @@
 		if (copied) return;
 		try {
 			const value = getText ? await getText() : (text ?? '');
-			await navigator.clipboard.writeText(value);
+			const ok = await copyText(value);
+			if (!ok) return;
 			copied = true;
 			clearTimeout(timer);
 			timer = setTimeout(() => {
 				copied = false;
 			}, 1400);
 		} catch {
-			// clipboard not available — no-op
+			// clipboard unavailable — no-op
 		}
 	}
 </script>

package/dist/components/FloatingActionBar.svelte

@@ -11,6 +11,11 @@
 	 *     loading={bulkActionLoading}
 	 *     onClear={clearSelection}
 	 *   />
+	 *
+	 * Per-action `key` renders a <kbd> hotkey hint on the button (advisory —
+	 * the matching keydown handling lives in the host/BulkActionBar). While
+	 * `loading` with a `loadingMessage` set, the buttons are replaced by a
+	 * spinner + message row (matching the IDE's fork, audit jat-1alfp #15).
 	 */
 
 	import { fade } from 'svelte/transition';
@@ -24,6 +29,8 @@
 		icon?: string;
 		/** Color variant */
 		variant?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+		/** Single-key hotkey hint rendered as a <kbd> chip (advisory only). */
+		key?: string;
 		/** Called when clicked */
 		onclick: () => void;
 	}
@@ -59,8 +66,13 @@
 		actions?: ActionButton[];
 		/** Dropdown menus (open upward from the bar) */
 		dropdowns?: ActionDropdown[];
-		/** Disables all buttons while true and shows a spinner */
+		/** While loading, disables all buttons. With `loadingMessage` also set,
+		 * the buttons are replaced by a spinner + message row. */
 		loading?: boolean;
+		/** When set, replaces the action buttons with a spinner + this message
+		 * (role="status", aria-live="polite") — matching the IDE's fork, where
+		 * this alone signals the in-flight state. */
+		loadingMessage?: string | null;
 		/** Called when the "Clear" button is clicked */
 		onClear?: () => void;
 		/** Label for the selection count (default: "selected") */
@@ -72,6 +84,7 @@
 		actions = [],
 		dropdowns = [],
 		loading = false,
+		loadingMessage = null,
 		onClear,
 		countLabel = 'selected',
 	}: Props = $props();
@@ -110,6 +123,12 @@
 	<div class="fab" transition:fade={{ duration: 150 }}>
 		<span class="fab-count">{count} {countLabel}</span>
 
+		{#if loadingMessage}
+			<div class="fab-loading" role="status" aria-live="polite">
+				<span class="fab-spinner"></span>
+				<span class="fab-loading-msg">{loadingMessage}</span>
+			</div>
+		{:else}
 		{#if actions.length > 0}
 			<div class="fab-divider"></div>
 			{#each actions as action}
@@ -118,6 +137,7 @@
 					class="fab-btn {variantClass(action.variant)}"
 					onclick={action.onclick}
 					disabled={loading}
+					title={action.key ? `${action.label} (${action.key})` : undefined}
 				>
 					{#if action.icon}
 						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
@@ -126,6 +146,9 @@
 						</svg>
 					{/if}
 					{action.label}
+					{#if action.key}
+						<kbd class="fab-key">{action.key}</kbd>
+					{/if}
 				</button>
 			{/each}
 		{/if}
@@ -175,6 +198,7 @@
 				</div>
 			{/each}
 		{/if}
+		{/if}
 
 		{#if onClear}
 			<div class="fab-divider"></div>
@@ -310,6 +334,36 @@
 		to { transform: rotate(360deg); }
 	}
 
+	.fab-key {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 1.125rem;
+		height: 1.125rem;
+		padding: 0 0.25rem;
+		background: var(--color-base-100);
+		border: 1px solid oklch(from var(--color-base-content) l c h / 35%);
+		border-radius: 0.25rem;
+		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		line-height: 1;
+		color: oklch(from var(--color-base-content) l c h / 80%);
+	}
+
+	.fab-loading {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.125rem 0.375rem;
+	}
+
+	.fab-loading-msg {
+		font-size: 0.8125rem;
+		color: var(--color-primary);
+		white-space: nowrap;
+	}
+
 	/* Dropdown */
 	.fab-dropdown-wrapper {
 		position: relative;

package/dist/components/FloatingActionBar.svelte.d.ts

@@ -7,6 +7,8 @@ export interface ActionButton {
     icon?: string;
     /** Color variant */
     variant?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+    /** Single-key hotkey hint rendered as a <kbd> chip (advisory only). */
+    key?: string;
     /** Called when clicked */
     onclick: () => void;
 }
@@ -39,8 +41,13 @@ interface Props {
     actions?: ActionButton[];
     /** Dropdown menus (open upward from the bar) */
     dropdowns?: ActionDropdown[];
-    /** Disables all buttons while true and shows a spinner */
+    /** While loading, disables all buttons. With `loadingMessage` also set,
+     * the buttons are replaced by a spinner + message row. */
     loading?: boolean;
+    /** When set, replaces the action buttons with a spinner + this message
+     * (role="status", aria-live="polite") — matching the IDE's fork, where
+     * this alone signals the in-flight state. */
+    loadingMessage?: string | null;
     /** Called when the "Clear" button is clicked */
     onClear?: () => void;
     /** Label for the selection count (default: "selected") */