@joewinke/jatui 0.39.0 → 0.41.0

package/dist/components/ThemeSelector.svelte

@@ -6,6 +6,7 @@
 	 * By default includes all 33 standard DaisyUI themes. Pass custom `themes` prop to override.
 	 */
 	import { onMount } from 'svelte';
+	import { themeWipe } from '../utils/themeWipe';
 
 	interface ThemeOption {
 		name: string;
@@ -55,6 +56,7 @@
 		onThemeChange,
 		compact = false,
 		inline = false,
+		reveal = false,
 	}: {
 		dropUp?: boolean;
 		themes?: ThemeOption[];
@@ -65,6 +67,12 @@
 		compact?: boolean;
 		/** Render a collapsible `<details>` theme list instead of a dropdown — for embedding inside another menu. */
 		inline?: boolean;
+		/**
+		 * Reveal the new theme with a circular View Transition wipe from the
+		 * clicked item (`themeWipe`). `true`/'hard' = crisp edge, 'soft' =
+		 * feathered. Level-scaled; instant under reduced motion. Default off.
+		 */
+		reveal?: boolean | 'hard' | 'soft';
 	} = $props();
 
 	// svelte-ignore state_referenced_locally
@@ -87,9 +95,26 @@
 		}
 	});
 
-	function handleThemeChange(themeName: string) {
+	function applyTheme(themeName: string) {
+		currentTheme = themeName;
+		document.documentElement.setAttribute('data-theme', themeName);
+		localStorage.setItem(storageKey, themeName);
+		onThemeChange?.(themeName);
+	}
+
+	function handleThemeChange(themeName: string, event?: MouseEvent) {
 		if (themeName === currentTheme) return;
 
+		if (reveal) {
+			// Close the menu first so the snapshot doesn't freeze it open. The
+			// origin (pointer, or the item's centre on keyboard) is read now.
+			if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
+			void themeWipe(event ?? null, () => applyTheme(themeName), {
+				edge: reveal === 'soft' ? 'soft' : 'hard'
+			});
+			return;
+		}
+
 		// Close dropdown first so the trigger is visible during animation
 		if (document.activeElement instanceof HTMLElement) {
 			document.activeElement.blur();
@@ -97,12 +122,7 @@
 
 		isAnimating = true;
 
-		setTimeout(() => {
-			currentTheme = themeName;
-			document.documentElement.setAttribute('data-theme', themeName);
-			localStorage.setItem(storageKey, themeName);
-			onThemeChange?.(themeName);
-		}, 150);
+		setTimeout(() => applyTheme(themeName), 150);
 
 		setTimeout(() => {
 			isAnimating = false;
@@ -133,7 +153,7 @@
 			{#each themes as theme}
 				<button
 					class="flex items-center gap-2 w-full px-2 py-1 rounded transition-colors hover:bg-base-300 {currentTheme === theme.name ? 'bg-primary/20' : ''}"
-					onclick={() => handleThemeChange(theme.name)}
+					onclick={(e) => handleThemeChange(theme.name, e)}
 				>
 					<div
 						data-theme={theme.name}
@@ -193,7 +213,7 @@
 				<li>
 					<button
 						class="gap-3 px-2"
-						onclick={() => handleThemeChange(theme.name)}
+						onclick={(e) => handleThemeChange(theme.name, e)}
 						class:active={currentTheme === theme.name}
 					>
 						<div

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

@@ -12,6 +12,12 @@ type $$ComponentProps = {
     compact?: boolean;
     /** Render a collapsible `<details>` theme list instead of a dropdown — for embedding inside another menu. */
     inline?: boolean;
+    /**
+     * Reveal the new theme with a circular View Transition wipe from the
+     * clicked item (`themeWipe`). `true`/'hard' = crisp edge, 'soft' =
+     * feathered. Level-scaled; instant under reduced motion. Default off.
+     */
+    reveal?: boolean | 'hard' | 'soft';
 };
 declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemeSelector = ReturnType<typeof ThemeSelector>;

package/dist/components/ThemeToggle.svelte

@@ -19,12 +19,16 @@
 	 * motion.css global floor and a component-local guard, since not every
 	 * consumer loads motion.css). Colours are token-only — no literals.
 	 */
+	import { flushSync } from 'svelte';
+	import { themeWipe } from '../utils/themeWipe';
+
 	let {
 		theme = $bindable('light'),
 		lightTheme = 'light',
 		darkTheme = 'dark',
 		onchange,
-		size = 'md'
+		size = 'md',
+		reveal = false
 	}: {
 		/** Current theme name (bindable). Anything that is not `darkTheme` reads as light. */
 		theme?: string;
@@ -36,6 +40,15 @@
 		onchange?: (theme: string) => void;
 		/** Hit-target size — sm 40px, md 44px, lg 48px. Never below the 40px touch floor. */
 		size?: 'sm' | 'md' | 'lg';
+		/**
+		 * Reveal the new theme with a circular View Transition wipe from the
+		 * button (`themeWipe`): `true`/'hard' = crisp edge, 'soft' = feathered.
+		 * The flip (bound `theme` + `onchange`) runs inside the transition, so
+		 * the consumer's theme write must be synchronous in `onchange` or in an
+		 * effect (it is flushed). Keyboard activation grows from the button's
+		 * centre; reduced motion swaps instantly. Default off.
+		 */
+		reveal?: boolean | 'hard' | 'soft';
 	} = $props();
 
 	let isDark = $derived(theme === darkTheme);
@@ -50,11 +63,23 @@
 
 	const label = $derived(isDark ? 'Switch to light mode' : 'Switch to dark mode');
 
-	function toggle() {
-		const next = isDark ? lightTheme : darkTheme;
+	function flip(next: string) {
 		theme = next;
 		onchange?.(next);
 	}
+
+	function toggle(event: MouseEvent) {
+		const next = isDark ? lightTheme : darkTheme;
+		if (!reveal) {
+			flip(next);
+			return;
+		}
+		// The origin is read synchronously: pointer position, or this button's
+		// centre for a keyboard activation.
+		void themeWipe(event, () => flushSync(() => flip(next)), {
+			edge: reveal === 'soft' ? 'soft' : 'hard'
+		});
+	}
 </script>
 
 <button

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

@@ -9,6 +9,15 @@ type $$ComponentProps = {
     onchange?: (theme: string) => void;
     /** Hit-target size — sm 40px, md 44px, lg 48px. Never below the 40px touch floor. */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Reveal the new theme with a circular View Transition wipe from the
+     * button (`themeWipe`): `true`/'hard' = crisp edge, 'soft' = feathered.
+     * The flip (bound `theme` + `onchange`) runs inside the transition, so
+     * the consumer's theme write must be synchronous in `onchange` or in an
+     * effect (it is flushed). Keyboard activation grows from the button's
+     * centre; reduced motion swaps instantly. Default off.
+     */
+    reveal?: boolean | 'hard' | 'soft';
 };
 declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "theme">;
 type ThemeToggle = ReturnType<typeof ThemeToggle>;

package/dist/components/basic/Breadcrumb.svelte

@@ -1,27 +1,242 @@
 <script lang="ts">
+	/**
+	 * Breadcrumb — hierarchical location trail.
+	 *
+	 *   <Breadcrumb items={[{ label: 'Home', href: '/' }, …, { label: 'README.md' }]} />
+	 *   <Breadcrumb {items} maxItems={4} />          Home / … / y / z
+	 *   <Breadcrumb items={[{ label: 'Home', href: '/', icon: HomeIcon }, …]} />
+	 *
+	 * `maxItems` (BoardUI wave 1, jatui-owg2z) keeps the root and the last
+	 * `maxItems - 1` items and folds the middle into an ellipsis button whose
+	 * menu lists the hidden levels (arrow keys, Escape, click-outside). The last
+	 * item is the current page (`aria-current="page"`). Icons come from
+	 * `item.icon` (any component taking `{ size, class }`, e.g. lucide-svelte)
+	 * or the `icon` snippet for full control.
+	 */
+	import { tick, type Component, type Snippet } from 'svelte';
+	import { floating } from '../../actions/floating';
+	import { collapseBreadcrumb } from './breadcrumbCollapse';
+
 	export interface BreadcrumbItem {
 		label: string;
 		href?: string;
+		/** Leading icon component (receives `size` and `class`). */
+		icon?: Component<{ size?: number; class?: string }>;
 	}
 
 	interface Props {
 		items: BreadcrumbItem[];
+		/** Collapse long trails to root / … / last (maxItems - 1). Unset = never collapse. */
+		maxItems?: number;
+		/** Custom leading icon per item — overrides `item.icon`. */
+		icon?: Snippet<[BreadcrumbItem, number]>;
+		/** Accessible name of the nav landmark. Default "Breadcrumb". */
+		ariaLabel?: string;
 		class?: string;
 	}
 
-	let { items, class: className = '' }: Props = $props();
+	let { items, maxItems, icon, ariaLabel = 'Breadcrumb', class: className = '' }: Props = $props();
+
+	const slots = $derived(collapseBreadcrumb(items, maxItems));
+
+	let menuOpen = $state(false);
+	let triggerEl: HTMLButtonElement | undefined = $state();
+	let menuEl: HTMLUListElement | undefined = $state();
+
+	function openMenu() {
+		menuOpen = true;
+		// Focus the first hidden level once the menu has mounted.
+		void tick().then(() => menuEl?.querySelector<HTMLElement>('[role="menuitem"]')?.focus());
+	}
+
+	function closeMenu(refocus = true) {
+		menuOpen = false;
+		if (refocus) triggerEl?.focus();
+	}
+
+	// use:floating dismisses on a capture-phase click outside the menu — which
+	// includes the trigger, so a click meant to CLOSE would re-open it.
+	let dismissedAt = 0;
+	function dismiss() {
+		dismissedAt = performance.now();
+		closeMenu(false);
+	}
+	function onTriggerClick() {
+		if (performance.now() - dismissedAt < 100) return;
+		if (menuOpen) closeMenu();
+		else openMenu();
+	}
+
+	function onMenuKeydown(e: KeyboardEvent) {
+		const entries = [...(menuEl?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])];
+		const at = entries.indexOf(document.activeElement as HTMLElement);
+		let next = -1;
+		if (e.key === 'ArrowDown') next = (at + 1) % entries.length;
+		else if (e.key === 'ArrowUp') next = (at - 1 + entries.length) % entries.length;
+		else if (e.key === 'Home') next = 0;
+		else if (e.key === 'End') next = entries.length - 1;
+		else if (e.key === 'Escape') {
+			e.preventDefault();
+			e.stopPropagation();
+			closeMenu();
+			return;
+		} else if (e.key === 'Tab') {
+			closeMenu(false);
+			return;
+		}
+		if (next >= 0) {
+			e.preventDefault();
+			entries[next]?.focus();
+		}
+	}
+
+	function onTriggerKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown' && !menuOpen) {
+			e.preventDefault();
+			openMenu();
+		}
+	}
 </script>
 
-<div class="breadcrumbs text-sm {className}">
+{#snippet lead(item: BreadcrumbItem, i: number)}
+	{#if icon}
+		{@render icon(item, i)}
+	{:else if item.icon}
+		{@const Icon = item.icon}
+		<Icon size={14} class="jatui-crumb-icon" />
+	{/if}
+{/snippet}
+
+<nav class="breadcrumbs text-sm {className}" aria-label={ariaLabel}>
 	<ul>
-		{#each items as item, i}
-			<li>
-				{#if item.href && i < items.length - 1}
-					<a href={item.href}>{item.label}</a>
-				{:else}
-					<span>{item.label}</span>
-				{/if}
-			</li>
+		{#each slots as slot (slot.kind === 'item' ? slot.index : 'ellipsis')}
+			{#if slot.kind === 'item'}
+				{@const isLast = slot.index === items.length - 1}
+				<li>
+					{#if slot.item.href && !isLast}
+						<a href={slot.item.href} class="jatui-crumb">
+							{@render lead(slot.item, slot.index)}{slot.item.label}
+						</a>
+					{:else}
+						<span class="jatui-crumb" aria-current={isLast ? 'page' : undefined}>
+							{@render lead(slot.item, slot.index)}{slot.item.label}
+						</span>
+					{/if}
+				</li>
+			{:else}
+				<li>
+					<button
+						bind:this={triggerEl}
+						type="button"
+						class="jatui-crumb-more"
+						aria-haspopup="menu"
+						aria-expanded={menuOpen}
+						aria-label="Show {slot.hidden.length} hidden {slot.hidden.length === 1 ? 'level' : 'levels'}"
+						onclick={onTriggerClick}
+						onkeydown={onTriggerKeydown}
+					>
+						<span aria-hidden="true">…</span>
+					</button>
+					{#if menuOpen}
+						<ul
+							bind:this={menuEl}
+							role="menu"
+							aria-label="Hidden levels"
+							class="jatui-crumb-menu bg-base-100 border-base-300 z-50 border p-1"
+							use:floating={{
+								anchor: triggerEl ?? null,
+								placement: 'bottom-start',
+								offset: 4,
+								onDismiss: dismiss
+							}}
+							onkeydown={onMenuKeydown}
+						>
+							{#each slot.hidden as h (h.index)}
+								<li role="none">
+									{#if h.item.href}
+										<a
+											role="menuitem"
+											href={h.item.href}
+											class="jatui-crumb-menuitem"
+											onclick={() => closeMenu(false)}
+										>
+											{@render lead(h.item, h.index)}{h.item.label}
+										</a>
+									{:else}
+										<span role="menuitem" tabindex="-1" aria-disabled="true" class="jatui-crumb-menuitem">
+											{@render lead(h.item, h.index)}{h.item.label}
+										</span>
+									{/if}
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				</li>
+			{/if}
 		{/each}
 	</ul>
-</div>
+</nav>
+
+<style>
+	.jatui-crumb,
+	.jatui-crumb-menuitem {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-md, 6px);
+	}
+	.jatui-crumb-more {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 1.75rem;
+		height: 1.5rem;
+		padding: 0 var(--jatui-space-sm, 4px);
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		color: inherit;
+		cursor: pointer;
+		transition: background-color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.jatui-crumb-more:hover,
+	.jatui-crumb-more[aria-expanded='true'] {
+		background-color: var(
+			--jatui-hover-bg,
+			color-mix(in oklab, var(--color-base-content) 6%, transparent)
+		);
+	}
+	.jatui-crumb-more:focus-visible,
+	.jatui-crumb-menuitem:focus-visible {
+		outline: var(--jatui-focus-ring-width, 2px) solid
+			var(--jatui-focus-ring, color-mix(in oklab, var(--color-primary) 70%, transparent));
+		outline-offset: var(--jatui-focus-ring-offset, 2px);
+	}
+	.jatui-crumb-menu {
+		min-width: 10rem;
+		max-width: 20rem;
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		list-style: none;
+	}
+	/* DaisyUI's breadcrumbs paints a separator before every li — not inside the menu. */
+	.jatui-crumb-menu :global(li::before) {
+		display: none !important;
+	}
+	.jatui-crumb-menuitem {
+		display: flex;
+		width: 100%;
+		padding: var(--jatui-space-sm, 4px) var(--jatui-space-base, 8px);
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-decoration: none;
+	}
+	.jatui-crumb-menuitem:hover,
+	.jatui-crumb-menuitem:focus-visible {
+		background-color: var(
+			--jatui-hover-bg,
+			color-mix(in oklab, var(--color-base-content) 6%, transparent)
+		);
+	}
+	.jatui-crumb-menuitem[aria-disabled='true'] {
+		opacity: 0.6;
+	}
+</style>

package/dist/components/basic/Breadcrumb.svelte.d.ts

@@ -1,11 +1,37 @@
+/**
+     * Breadcrumb — hierarchical location trail.
+     *
+     *   <Breadcrumb items={[{ label: 'Home', href: '/' }, …, { label: 'README.md' }]} />
+     *   <Breadcrumb {items} maxItems={4} />          Home / … / y / z
+     *   <Breadcrumb items={[{ label: 'Home', href: '/', icon: HomeIcon }, …]} />
+     *
+     * `maxItems` (BoardUI wave 1, jatui-owg2z) keeps the root and the last
+     * `maxItems - 1` items and folds the middle into an ellipsis button whose
+     * menu lists the hidden levels (arrow keys, Escape, click-outside). The last
+     * item is the current page (`aria-current="page"`). Icons come from
+     * `item.icon` (any component taking `{ size, class }`, e.g. lucide-svelte)
+     * or the `icon` snippet for full control.
+     */
+import { type Component, type Snippet } from 'svelte';
 export interface BreadcrumbItem {
     label: string;
     href?: string;
+    /** Leading icon component (receives `size` and `class`). */
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
 }
 interface Props {
     items: BreadcrumbItem[];
+    /** Collapse long trails to root / … / last (maxItems - 1). Unset = never collapse. */
+    maxItems?: number;
+    /** Custom leading icon per item — overrides `item.icon`. */
+    icon?: Snippet<[BreadcrumbItem, number]>;
+    /** Accessible name of the nav landmark. Default "Breadcrumb". */
+    ariaLabel?: string;
     class?: string;
 }
-declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+declare const Breadcrumb: Component<Props, {}, "">;
 type Breadcrumb = ReturnType<typeof Breadcrumb>;
 export default Breadcrumb;

package/dist/components/basic/breadcrumbCollapse.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Breadcrumb overflow collapse (jatui-owg2z). Pure.
+ *
+ * Keeps the first item and the last `maxItems - 1`, folding the middle into
+ * one ellipsis entry: "Home / … / y / z". The current page (last item) is
+ * always visible; the root is visible whenever maxItems ≥ 2.
+ */
+export type BreadcrumbSlot<T> = {
+    kind: 'item';
+    item: T;
+    index: number;
+} | {
+    kind: 'ellipsis';
+    hidden: {
+        item: T;
+        index: number;
+    }[];
+};
+export declare function collapseBreadcrumb<T>(items: readonly T[], maxItems?: number): BreadcrumbSlot<T>[];

package/dist/components/basic/breadcrumbCollapse.js

@@ -0,0 +1,12 @@
+export function collapseBreadcrumb(items, maxItems) {
+    const all = items.map((item, index) => ({ kind: 'item', item, index }));
+    if (maxItems == null || !(maxItems > 0) || items.length <= maxItems)
+        return all;
+    const max = Math.max(1, Math.floor(maxItems));
+    if (max === 1) {
+        return [{ kind: 'ellipsis', hidden: all.slice(0, -1) }, all[all.length - 1]];
+    }
+    const tail = all.slice(items.length - (max - 1));
+    const hidden = all.slice(1, items.length - (max - 1));
+    return [all[0], { kind: 'ellipsis', hidden }, ...tail];
+}

package/dist/components/graph/GraphCanvas.svelte.d.ts

@@ -76,7 +76,7 @@ declare function $$render<N extends Node = Node, E extends Edge = Edge>(): {
         screenToFlowPosition: (p: import("@xyflow/system").XYPosition) => import("@xyflow/system").XYPosition;
         getViewport: () => Viewport;
     };
-    bindings: "viewport" | "nodes" | "edges";
+    bindings: "viewport" | "edges" | "nodes";
     slots: {};
     events: {};
 };
@@ -84,7 +84,7 @@ declare class __sveltets_Render<N extends Node = Node, E extends Edge = Edge> {
     props(): ReturnType<typeof $$render<N, E>>['props'];
     events(): ReturnType<typeof $$render<N, E>>['events'];
     slots(): ReturnType<typeof $$render<N, E>>['slots'];
-    bindings(): "viewport" | "nodes" | "edges";
+    bindings(): "viewport" | "edges" | "nodes";
     exports(): {
         /**
              * Imperative handle (`bind:this={canvas}` → `canvas.api.fitView()`). Every