@joewinke/jatui 0.1.31 → 0.2.0

package/dist/index.js

@@ -82,7 +82,7 @@ export { default as AvailabilityModal } from './components/AvailabilityModal.sve
 export { default as BookingForm } from './components/BookingForm.svelte';
 export { DAYS_OF_WEEK, DAYS_SHORT, LOCATION_LABELS, LOCATION_ICONS } from './types/booking';
 // Utilities — date formatting
-export { normalizeTimestamp, parseTimestamp, formatRelativeTime, formatFullDate, formatShortDate, formatLastActivity, formatDate, getTimeSinceMs, getTimeSinceMinutes, isWithinMinutes, formatDateTime, taskAge, } from './utils/dateFormatters';
+export { normalizeTimestamp, parseTimestamp, formatRelativeTime, formatFullDate, formatShortDate, formatLastActivity, formatDate, getTimeSinceMs, getTimeSinceMinutes, isWithinMinutes, formatDateTime, taskAge, pacingColor, } from './utils/dateFormatters';
 // Utilities — task display helpers
 export { statusColor, priorityColor, typeIcon, statusLabel, } from './utils/taskUtils';
 // Utilities — phone formatting (legacy US-only)
@@ -141,8 +141,75 @@ export { default as LocationMap } from './components/LocationMap.svelte';
 export { default as GPSTracker } from './components/GPSTracker.svelte';
 // Utilities — Google Maps loader
 export { loadGoogleMapsAPI, isGoogleMapsLoaded, isPlacesLoaded, isGeometryLoaded, } from './utils/googleMapsLoader';
-// DnD — pragmatic-drag-and-drop wrappers (peerDep: @atlaskit/pragmatic-drag-and-drop*)
-export { draggable, dropTarget, autoScroll, announce, cleanupAnnouncements, monitorForElements, attachClosestEdge, extractClosestEdge, } from './dnd/index';
-export { createDndBoard } from './dnd/createDndBoard.svelte';
-export { default as DropIndicator } from './dnd/DropIndicator.svelte';
-export { makeItemData, isItemData } from './dnd/types';
+// DnD — pragmatic-drag-and-drop wrappers live behind the `@joewinke/jatui/dnd`
+// subpath export, NOT this barrel. Re-exporting them here forced every barrel
+// consumer to install the optional @atlaskit/pragmatic-drag-and-drop* peer deps
+// (and broke bundlers that stub the unresolved optional peer). Import DnD via:
+//   import { draggable, DropIndicator } from '@joewinke/jatui/dnd';
+// ============================================================
+// Wave 1+2 (jatui-pk6jz / jatui-x2hyv) — kinetics motion port,
+// research-verified gap fills, generative-pipeline era exports.
+// ============================================================
+// Motion primitives
+export { tooltip } from './actions/tooltip';
+export { staggerEntrance } from './actions/staggerEntrance';
+export { attention } from './actions/attention';
+export { floating, makeVirtualAnchor } from './actions/floating';
+export { glide } from './transitions/glide';
+// View Transitions kit
+export { themeWipe } from './utils/themeWipe';
+export { viewTransition } from './utils/viewTransition';
+// Sound kit (functional feedback, opt-in)
+export { play as playSound, registerSound, isSoundEnabled, setSoundEnabled } from './utils/sound';
+// Text utilities
+export { splitText } from './utils/splitText';
+// Toast system
+export { default as ToastHost } from './components/toast/ToastHost.svelte';
+export { showToast, dismissToast, getToasts } from './stores/toast.svelte';
+// Loading & progress family
+export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as ProgressBar } from './components/progress/ProgressBar.svelte';
+export { default as ProgressRing } from './components/progress/ProgressRing.svelte';
+export { default as Steps } from './components/progress/Steps.svelte';
+// Navigation & overlays
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as CommandPalette } from './components/CommandPalette.svelte';
+export { commandPalette } from './stores/commandPalette.svelte';
+// Micro primitives
+export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
+export { default as CopyButton } from './components/CopyButton.svelte';
+export { default as HoldToConfirm } from './components/HoldToConfirm.svelte';
+// Form gaps
+export { default as PinInput } from './components/PinInput.svelte';
+export { default as PasswordMeter } from './components/PasswordMeter.svelte';
+export { default as QuantityStepper } from './components/QuantityStepper.svelte';
+// Messaging
+export { default as TypingIndicator } from './components/messaging/TypingIndicator.svelte';
+// Data table
+export { default as DataTable } from './components/table/DataTable.svelte';
+export { flexRender } from './components/table/flexRender';
+// Graph canvas (Svelte Flow)
+export { default as GraphCanvas } from './components/graph/GraphCanvas.svelte';
+export { default as JatuiNode } from './components/graph/JatuiNode.svelte';
+export { getStatusColor, applyXyflowTheme, watchAndApplyTheme } from './components/graph/theme';
+// App shell
+export { default as Sidebar } from './components/shell/Sidebar.svelte';
+export { default as SidebarGroup } from './components/shell/SidebarGroup.svelte';
+export { default as SidebarItem } from './components/shell/SidebarItem.svelte';
+export { default as NavigationMenu } from './components/shell/NavigationMenu.svelte';
+export { createSidebarState } from './components/shell/shell';
+// Carousel
+export { default as Carousel } from './components/Carousel.svelte';
+// Basic primitives (thin DaisyUI wraps — layering policy)
+export { default as Kbd } from './components/basic/Kbd.svelte';
+export { default as Empty } from './components/basic/Empty.svelte';
+export { default as Breadcrumb } from './components/basic/Breadcrumb.svelte';
+export { default as Alert } from './components/basic/Alert.svelte';
+export { default as ButtonGroup } from './components/basic/ButtonGroup.svelte';
+export { default as Switch } from './components/basic/Switch.svelte';
+export { default as Checkbox } from './components/basic/Checkbox.svelte';
+export { default as RadioGroup } from './components/basic/RadioGroup.svelte';
+export { default as Toggle } from './components/basic/Toggle.svelte';
+export { default as Separator } from './components/basic/Separator.svelte';
+export { default as Slider } from './components/basic/Slider.svelte';
+export { default as Pagination } from './components/basic/Pagination.svelte';

package/dist/showcase/AnimatedBeam.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	// pattern after magicui.design (MIT)
+	import { onMount, onDestroy } from 'svelte';
+
+	interface Props {
+		/** ID of the start element */
+		fromId: string;
+		/** ID of the end element */
+		toId: string;
+		/** Containing element for coordinate calculations (defaults to document.body) */
+		containerId?: string;
+		/** Gradient start color */
+		colorFrom?: string;
+		/** Gradient end color */
+		colorTo?: string;
+		/** Stroke width */
+		strokeWidth?: number;
+		/** Beam sweep duration in seconds */
+		duration?: number;
+		/** Dash length as fraction of path (0–1) */
+		dashLength?: number;
+		/** Curvature 0–1 (0 = straight, 1 = very curved) */
+		curvature?: number;
+		/** Reverse beam direction */
+		reverse?: boolean;
+		class?: string;
+	}
+
+	let {
+		fromId,
+		toId,
+		containerId,
+		colorFrom = 'oklch(var(--p))',
+		colorTo = 'oklch(var(--a))',
+		strokeWidth = 2,
+		duration = 3,
+		dashLength = 0.25,
+		curvature = 0.5,
+		reverse = false,
+		class: className = ''
+	}: Props = $props();
+
+	let svgEl: SVGSVGElement | undefined = $state();
+	let pathD = $state('');
+	let pathLength = $state(0);
+	let reducedMotion = $state(false);
+
+	const uid = Math.random().toString(36).slice(2, 8);
+	const gradId = `beam-grad-${uid}`;
+	const pathId = `beam-path-${uid}`;
+
+	function getCenter(el: Element, container: Element): { x: number; y: number } {
+		const elR = el.getBoundingClientRect();
+		const cR = container.getBoundingClientRect();
+		return {
+			x: elR.left + elR.width / 2 - cR.left,
+			y: elR.top + elR.height / 2 - cR.top
+		};
+	}
+
+	function updatePath() {
+		const root = containerId ? document.getElementById(containerId) : svgEl?.parentElement;
+		if (!root || !svgEl) return;
+
+		const fromEl = document.getElementById(fromId);
+		const toEl = document.getElementById(toId);
+		if (!fromEl || !toEl) return;
+
+		const from = getCenter(fromEl, root);
+		const to = getCenter(toEl, root);
+
+		// Resize SVG to container
+		const rr = root.getBoundingClientRect();
+		svgEl.style.width = rr.width + 'px';
+		svgEl.style.height = rr.height + 'px';
+
+		// Cubic bezier: control points offset vertically by curvature
+		const dy = Math.abs(to.y - from.y) * curvature;
+		const cx1 = from.x;
+		const cy1 = from.y - dy;
+		const cx2 = to.x;
+		const cy2 = to.y + dy;
+
+		const d = `M ${from.x},${from.y} C ${cx1},${cy1} ${cx2},${cy2} ${to.x},${to.y}`;
+		pathD = d;
+
+		// Measure path length after DOM update
+		requestAnimationFrame(() => {
+			const pathEl = svgEl?.querySelector(`#${pathId}`) as SVGPathElement | null;
+			if (pathEl) pathLength = pathEl.getTotalLength();
+		});
+	}
+
+	let resizeObs: ResizeObserver | undefined;
+
+	onMount(() => {
+		reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		updatePath();
+
+		const root = containerId ? document.getElementById(containerId) : svgEl?.parentElement;
+		if (root) {
+			resizeObs = new ResizeObserver(updatePath);
+			resizeObs.observe(root);
+		}
+	});
+
+	onDestroy(() => {
+		resizeObs?.disconnect();
+	});
+
+	const dashArr = $derived(
+		pathLength > 0 ? `${pathLength * dashLength} ${pathLength * (1 - dashLength)}` : '0 1'
+	);
+	const dashOffset = $derived(pathLength > 0 ? (reverse ? -pathLength : pathLength) : 0);
+</script>
+
+<!-- svelte-ignore a11y_aria_hidden_on_focusable -->
+<svg
+	bind:this={svgEl}
+	class="animated-beam {className}"
+	xmlns="http://www.w3.org/2000/svg"
+	style="pointer-events:none; position:absolute; inset:0; overflow:visible;"
+	aria-hidden="true"
+>
+	<defs>
+		<linearGradient id={gradId} gradientUnits="userSpaceOnUse">
+			<stop offset="0%" stop-color={colorFrom} stop-opacity="0" />
+			<stop offset="20%" stop-color={colorFrom} />
+			<stop offset="80%" stop-color={colorTo} />
+			<stop offset="100%" stop-color={colorTo} stop-opacity="0" />
+		</linearGradient>
+	</defs>
+
+	<!-- Static base line -->
+	{#if pathD}
+		<path d={pathD} stroke="oklch(var(--bc) / 0.08)" stroke-width={strokeWidth} fill="none" />
+
+		<!-- Animated beam -->
+		{#if !reducedMotion}
+			<path
+				id={pathId}
+				d={pathD}
+				stroke="url(#{gradId})"
+				stroke-width={strokeWidth}
+				fill="none"
+				stroke-linecap="round"
+				stroke-dasharray={dashArr}
+				stroke-dashoffset="0"
+				style="animation: beam-sweep-{uid} {duration}s linear infinite var(--motion-glide);"
+			/>
+		{:else}
+			<!-- Reduced motion: static gradient line -->
+			<path
+				id={pathId}
+				d={pathD}
+				stroke="url(#{gradId})"
+				stroke-width={strokeWidth}
+				fill="none"
+				stroke-linecap="round"
+				opacity="0.6"
+			/>
+		{/if}
+	{/if}
+</svg>
+
+<style>
+	.animated-beam {
+		position: absolute;
+		inset: 0;
+		overflow: visible;
+		pointer-events: none;
+	}
+</style>
+
+<!-- Keyframes injected per-instance via a style tag to use the dynamic dashOffset -->
+{#if pathLength > 0 && !reducedMotion}
+	{@html `<style>
+		@keyframes beam-sweep-${uid} {
+			0%   { stroke-dashoffset: ${dashOffset}; }
+			100% { stroke-dashoffset: ${-dashOffset}; }
+		}
+	</style>`}
+{/if}

package/dist/showcase/AnimatedBeam.svelte.d.ts

@@ -0,0 +1,26 @@
+interface Props {
+    /** ID of the start element */
+    fromId: string;
+    /** ID of the end element */
+    toId: string;
+    /** Containing element for coordinate calculations (defaults to document.body) */
+    containerId?: string;
+    /** Gradient start color */
+    colorFrom?: string;
+    /** Gradient end color */
+    colorTo?: string;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Beam sweep duration in seconds */
+    duration?: number;
+    /** Dash length as fraction of path (0–1) */
+    dashLength?: number;
+    /** Curvature 0–1 (0 = straight, 1 = very curved) */
+    curvature?: number;
+    /** Reverse beam direction */
+    reverse?: boolean;
+    class?: string;
+}
+declare const AnimatedBeam: import("svelte").Component<Props, {}, "">;
+type AnimatedBeam = ReturnType<typeof AnimatedBeam>;
+export default AnimatedBeam;

package/dist/showcase/AuroraDrift.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		duration?: number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { duration = 12, class: className = '', children }: Props = $props();
+</script>
+
+<div
+	class="aurora-drift-root {className}"
+	style="--aurora-duration: {duration}s;"
+>
+	<div class="aurora-drift-backdrop" aria-hidden="true"></div>
+	<div class="aurora-drift-content">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.aurora-drift-root {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.aurora-drift-backdrop {
+		position: absolute;
+		inset: -40%;
+		background:
+			radial-gradient(
+				40% 50% at 30% 38%,
+				color-mix(in srgb, oklch(var(--p)) 30%, transparent),
+				transparent 60%
+			),
+			radial-gradient(
+				45% 55% at 72% 62%,
+				color-mix(in srgb, oklch(var(--s)) 30%, transparent),
+				transparent 60%
+			),
+			radial-gradient(
+				40% 50% at 50% 82%,
+				color-mix(in srgb, oklch(var(--a)) 25%, transparent),
+				transparent 60%
+			);
+		filter: blur(16px);
+		pointer-events: none;
+		animation: aurora-drift var(--aurora-duration) ease-in-out infinite alternate;
+	}
+
+	.aurora-drift-content {
+		position: relative;
+		z-index: 1;
+	}
+
+	@keyframes aurora-drift {
+		0% {
+			transform: translate(-6%, -4%) rotate(0deg) scale(1.1);
+		}
+		100% {
+			transform: translate(6%, 4%) rotate(8deg) scale(1.3);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.aurora-drift-backdrop {
+			animation: none;
+		}
+	}
+</style>

package/dist/showcase/AuroraDrift.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    duration?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const AuroraDrift: import("svelte").Component<Props, {}, "">;
+type AuroraDrift = ReturnType<typeof AuroraDrift>;
+export default AuroraDrift;

package/dist/showcase/BentoCard.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	// pattern after magicui.design (MIT)
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Column span (default 1) */
+		colSpan?: number;
+		/** Row span (default 1) */
+		rowSpan?: number;
+		/** Hover tint color (CSS color). No tint if omitted (house rule: no shadows). */
+		hoverTint?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { colSpan = 1, rowSpan = 1, hoverTint, class: className = '', children }: Props = $props();
+</script>
+
+<div
+	class="bento-card {className}"
+	role="listitem"
+	style="
+		grid-column: span {colSpan};
+		grid-row: span {rowSpan};
+		{hoverTint ? `--bento-tint: ${hoverTint};` : ''}
+	"
+>
+	{@render children()}
+</div>
+
+<style>
+	.bento-card {
+		position: relative;
+		border-radius: var(--jatui-radius-box);
+		border: var(--jatui-border-w) solid oklch(var(--bc) / 0.1);
+		background: oklch(var(--b1));
+		overflow: hidden;
+		transition: background var(--motion-fast) var(--motion-glide);
+	}
+
+	.bento-card:hover {
+		background: var(--bento-tint, oklch(var(--b2, var(--b1))));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.bento-card {
+			transition: none;
+		}
+	}
+</style>

package/dist/showcase/BentoCard.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Column span (default 1) */
+    colSpan?: number;
+    /** Row span (default 1) */
+    rowSpan?: number;
+    /** Hover tint color (CSS color). No tint if omitted (house rule: no shadows). */
+    hoverTint?: string;
+    class?: string;
+    children: Snippet;
+}
+declare const BentoCard: import("svelte").Component<Props, {}, "">;
+type BentoCard = ReturnType<typeof BentoCard>;
+export default BentoCard;

package/dist/showcase/BentoGrid.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	// pattern after magicui.design (MIT)
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Number of columns in the grid (default 3) */
+		cols?: number;
+		/** Gap between cells */
+		gap?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { cols = 3, gap = '1rem', class: className = '', children }: Props = $props();
+</script>
+
+<div
+	class="bento-grid {className}"
+	style="--bento-cols: {cols}; --bento-gap: {gap};"
+	role="list"
+>
+	{@render children()}
+</div>
+
+<style>
+	.bento-grid {
+		display: grid;
+		grid-template-columns: repeat(var(--bento-cols), 1fr);
+		gap: var(--bento-gap);
+	}
+
+	@media (max-width: 768px) {
+		.bento-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	@media (min-width: 769px) and (max-width: 1024px) {
+		.bento-grid {
+			grid-template-columns: repeat(min(var(--bento-cols), 2), 1fr);
+		}
+	}
+</style>

package/dist/showcase/BentoGrid.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Number of columns in the grid (default 3) */
+    cols?: number;
+    /** Gap between cells */
+    gap?: string;
+    class?: string;
+    children: Snippet;
+}
+declare const BentoGrid: import("svelte").Component<Props, {}, "">;
+type BentoGrid = ReturnType<typeof BentoGrid>;
+export default BentoGrid;

package/dist/showcase/BorderBeam.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		duration?: number;
+		colorFrom?: string;
+		colorTo?: string;
+		borderRadius?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		duration = 3,
+		colorFrom = 'oklch(var(--p))',
+		colorTo = 'oklch(var(--a))',
+		borderRadius = '0.75rem',
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<div
+	class="border-beam-root {className}"
+	style="--beam-duration: {duration}s; --beam-color-from: {colorFrom}; --beam-color-to: {colorTo}; --beam-radius: {borderRadius};"
+>
+	<div class="border-beam-inner">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.border-beam-root {
+		position: relative;
+		padding: 1.5px;
+		overflow: hidden;
+		border-radius: var(--beam-radius);
+	}
+
+	.border-beam-root::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 200%;
+		height: 200%;
+		transform: translate(-50%, -50%);
+		background: conic-gradient(
+			from 0deg,
+			transparent 0 72%,
+			var(--beam-color-from) 84%,
+			var(--beam-color-to) 90%,
+			transparent 96% 100%
+		);
+		animation: beam-spin var(--beam-duration) linear infinite;
+	}
+
+	.border-beam-inner {
+		position: relative;
+		z-index: 1;
+		width: 100%;
+		height: 100%;
+		border-radius: calc(var(--beam-radius) - 1.5px);
+	}
+
+	@keyframes beam-spin {
+		to {
+			transform: translate(-50%, -50%) rotate(1turn);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.border-beam-root::before {
+			animation: none;
+		}
+	}
+</style>

package/dist/showcase/BorderBeam.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    duration?: number;
+    colorFrom?: string;
+    colorTo?: string;
+    borderRadius?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const BorderBeam: import("svelte").Component<Props, {}, "">;
+type BorderBeam = ReturnType<typeof BorderBeam>;
+export default BorderBeam;

package/dist/showcase/ClipWipe.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  type Direction = 'left' | 'right' | 'top' | 'bottom';
+  type TriggerMode = 'mount' | 'intersect';
+
+  interface Props {
+    direction?: Direction;
+    triggerMode?: TriggerMode;
+    duration?: number;
+    class?: string;
+    children: import('svelte').Snippet;
+  }
+
+  let {
+    direction = 'left',
+    triggerMode = 'mount',
+    duration = 500,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const startClip: Record<Direction, string> = {
+    left: 'inset(0 100% 0 0)',
+    right: 'inset(0 0 0 100%)',
+    top: 'inset(100% 0 0 0)',
+    bottom: 'inset(0 0 100% 0)',
+  };
+
+  const endClip = 'inset(0 0 0 0)';
+
+  let prefersReducedMotion = false;
+  let revealed = $state(false);
+  let el: HTMLDivElement | undefined = $state();
+
+  function trigger() {
+    revealed = true;
+  }
+
+  onMount(() => {
+    prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    if (prefersReducedMotion) {
+      revealed = true;
+      return;
+    }
+
+    if (triggerMode === 'mount') {
+      // Defer one frame so the initial clip-path is painted before transitioning
+      requestAnimationFrame(() => {
+        trigger();
+      });
+    } else {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.intersectionRatio >= 0.5) {
+              trigger();
+              observer.disconnect();
+            }
+          }
+        },
+        { threshold: 0.5 }
+      );
+
+      if (el) {
+        observer.observe(el);
+      }
+
+      return () => observer.disconnect();
+    }
+  });
+</script>
+
+<div
+  bind:this={el}
+  class={className}
+  style:clip-path={prefersReducedMotion ? endClip : revealed ? endClip : startClip[direction]}
+  style:transition={prefersReducedMotion ? 'none' : `clip-path ${duration}ms var(--motion-glide)`}
+>
+  {@render children()}
+</div>