@joewinke/jatui 0.1.27 → 0.1.28

package/dist/components/SignaturePad.svelte

@@ -4,6 +4,8 @@
 	 *
 	 * Exports `clear()` and `isEmpty()` methods. Outputs signature as base64 PNG data URL
 	 * via the bindable `signatureData` prop or `onSignatureChange` callback.
+	 *
+	 * Pass `disabled` to render a non-interactive, dimmed pad (e.g. form-builder previews).
 	 */
 	import { onMount } from 'svelte';
 
@@ -17,6 +19,7 @@
 		label = 'Signature',
 		required = false,
 		placeholder = 'Sign here',
+		disabled = false,
 	}: {
 		signatureData?: string;
 		onSignatureChange?: (data: string) => void;
@@ -27,6 +30,7 @@
 		label?: string;
 		required?: boolean;
 		placeholder?: string;
+		disabled?: boolean;
 	} = $props();
 
 	let canvas: HTMLCanvasElement;
@@ -68,6 +72,7 @@
 		}
 
 		function startDrawing(e: MouseEvent | TouchEvent) {
+			if (disabled) return;
 			e.preventDefault();
 			isDrawing = true;
 			const coords = getCoordinates(e);
@@ -76,7 +81,7 @@
 		}
 
 		function draw(e: MouseEvent | TouchEvent) {
-			if (!isDrawing || !ctx) return;
+			if (disabled || !isDrawing || !ctx) return;
 			e.preventDefault();
 
 			const coords = getCoordinates(e);
@@ -145,19 +150,21 @@
 					<span class="text-error">*</span>
 				{/if}
 			</span>
-			<button type="button" onclick={() => clear()} class="btn btn-ghost btn-xs">
-				Clear
-			</button>
+			{#if !disabled}
+				<button type="button" onclick={() => clear()} class="btn btn-ghost btn-xs">
+					Clear
+				</button>
+			{/if}
 		</div>
 	{/if}
 
 	<div class="rounded-lg bg-base-100 overflow-hidden relative transition-all duration-300
-		{hasDrawn ? 'border-2 border-success/60' : 'border-2 border-base-300'}">
+		{disabled ? 'opacity-50 border-2 border-base-300' : hasDrawn ? 'border-2 border-success/60' : 'border-2 border-base-300'}">
 		<canvas
 			bind:this={canvas}
 			{width}
 			{height}
-			class="w-full touch-none cursor-crosshair"
+			class="w-full touch-none {disabled ? 'cursor-not-allowed' : 'cursor-crosshair'}"
 		></canvas>
 
 		{#if !hasDrawn}

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

@@ -8,6 +8,7 @@ type $$ComponentProps = {
     label?: string;
     required?: boolean;
     placeholder?: string;
+    disabled?: boolean;
 };
 declare const SignaturePad: import("svelte").Component<$$ComponentProps, {
     clear: () => void;

package/dist/components/ThemeSelector.svelte

@@ -53,12 +53,18 @@
 		defaultTheme = 'light',
 		storageKey = 'theme',
 		onThemeChange,
+		compact = false,
+		inline = false,
 	}: {
 		dropUp?: boolean;
 		themes?: ThemeOption[];
 		defaultTheme?: string;
 		storageKey?: string;
 		onThemeChange?: (theme: string) => void;
+		/** Icon-only trigger (label hidden, shown as tooltip). Dropdown mode only. */
+		compact?: boolean;
+		/** Render a collapsible `<details>` theme list instead of a dropdown — for embedding inside another menu. */
+		inline?: boolean;
 	} = $props();
 
 	// svelte-ignore state_referenced_locally
@@ -104,6 +110,51 @@
 	}
 </script>
 
+{#if inline}
+	<!-- Inline mode: collapsible theme list with color previews, for embedding inside another menu -->
+	<details class="w-full theme-details">
+		<summary class="flex items-center gap-2 cursor-pointer hover:bg-base-300 transition-colors px-2 py-1.5 rounded list-none">
+			<div
+				data-theme={currentTheme}
+				class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded p-0.5 w-4 h-4 transition-transform duration-300 ease-out"
+				class:theme-spin={isAnimating}
+			>
+				<div class="bg-base-content size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 0ms"></div>
+				<div class="bg-primary size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 50ms"></div>
+				<div class="bg-secondary size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 100ms"></div>
+				<div class="bg-accent size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 150ms"></div>
+			</div>
+			<span class="text-[0.75rem] flex-1 text-left text-base-content/70">{currentThemeLabel}</span>
+			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3 h-3 text-base-content/45 transition-transform duration-200 details-chevron">
+				<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+			</svg>
+		</summary>
+		<div class="max-h-48 overflow-y-auto mt-1 ml-2 border-l border-base-content/10 pl-2">
+			{#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)}
+				>
+					<div
+						data-theme={theme.name}
+						class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded p-0.5 w-4 h-4"
+					>
+						<div class="bg-base-content size-1 rounded-full"></div>
+						<div class="bg-primary size-1 rounded-full"></div>
+						<div class="bg-secondary size-1 rounded-full"></div>
+						<div class="bg-accent size-1 rounded-full"></div>
+					</div>
+					<span class="text-[0.75rem] text-base-content/70 flex-1 text-left">{theme.label}</span>
+					{#if currentTheme === theme.name}
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3 text-primary">
+							<path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"></path>
+						</svg>
+					{/if}
+				</button>
+			{/each}
+		</div>
+	</details>
+{:else}
 <div class="dropdown dropdown-end" class:dropdown-top={dropUp}>
 	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 	<div
@@ -111,7 +162,7 @@
 		role="button"
 		class="flex items-center gap-2 cursor-pointer hover:bg-base-300 transition-colors px-2 py-1 rounded"
 		aria-label="Change Theme"
-		title="Change Theme"
+		title={compact ? currentThemeLabel : 'Change Theme'}
 	>
 		<div
 			data-theme={currentTheme}
@@ -123,7 +174,9 @@
 			<div class="bg-secondary size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 100ms"></div>
 			<div class="bg-accent size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 150ms"></div>
 		</div>
-		<span class="text-sm font-medium transition-opacity duration-200" class:opacity-50={isAnimating}>{currentThemeLabel}</span>
+		{#if !compact}
+			<span class="text-sm font-medium transition-opacity duration-200" class:opacity-50={isAnimating}>{currentThemeLabel}</span>
+		{/if}
 	</div>
 
 	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -171,8 +224,14 @@
 		</ul>
 	</div>
 </div>
+{/if}
 
 <style>
+	/* Rotate chevron when the inline details list is open */
+	.theme-details[open] .details-chevron {
+		transform: rotate(180deg);
+	}
+
 	/* NOTE: DaisyUI v5.0.0 has a stuck-animation bug on `.dropdown-content`
 	   (`@keyframes dropdown { 0% { opacity: 0 } }` pins opacity to 0). If the
 	   theme dropdown opens but stays invisible, the consuming project needs

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

@@ -8,6 +8,10 @@ type $$ComponentProps = {
     defaultTheme?: string;
     storageKey?: string;
     onThemeChange?: (theme: string) => void;
+    /** Icon-only trigger (label hidden, shown as tooltip). Dropdown mode only. */
+    compact?: boolean;
+    /** Render a collapsible `<details>` theme list instead of a dropdown — for embedding inside another menu. */
+    inline?: boolean;
 };
 declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemeSelector = ReturnType<typeof ThemeSelector>;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { railNav, createRailNav, cycle } from './actions/railNav';
 export type { RailNavOptions, RailNavController } from './actions/railNav';
+export { listNav, createListNav } from './actions/listNav';
+export type { ListNavOptions, ListNavController } from './actions/listNav';
 export { collapse } from './actions/collapse';
 export type { CollapseOptions } from './actions/collapse';
 export { default as Collapse } from './components/Collapse.svelte';

package/dist/index.js

@@ -1,5 +1,6 @@
 // Actions
 export { railNav, createRailNav, cycle } from './actions/railNav';
+export { listNav, createListNav } from './actions/listNav';
 export { collapse } from './actions/collapse';
 export { default as Collapse } from './components/Collapse.svelte';
 // Components — Session primitives (from JAT IDE, jat-jj79f.16 G1)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -20,10 +20,13 @@
     "README.md"
   ],
   "scripts": {
-    "dev": "vite dev --port 5180",
+    "dev": "npm run package && vite dev --port 5180",
     "build": "vite build",
+    "build:site": "npm run package && vite build",
     "preview": "vite preview",
     "package": "svelte-package --input src/lib --output dist",
+    "check:demos": "node scripts/check-demo-coverage.mjs",
+    "guard": "node scripts/check-demo-coverage.mjs",
     "prepublishOnly": "npm run package"
   },
   "peerDependencies": {
@@ -45,6 +48,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.21.0",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",