@joewinke/jatui 0.26.0 → 0.27.0

package/dist/components/basic/PageHeader.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+	/**
+	 * PageHeader — the STANDARD route header (title + meta + actions).
+	 * Upstreamed from the JAT IDE `ui/PageHeader.svelte` (adoption audit U7,
+	 * jatui-rl7w6.5). The audit scored page headers 3/10 for consistency:
+	 * title sizes ranged from `text-sm` to `text-2xl`, weights and spacing all
+	 * varied, few had a place for actions or a subtitle. This standardizes on
+	 * JAT's dominant operator pattern — the small, uppercase, letter-spaced
+	 * "instrument label" — and gives it slots for a count chip, a subtitle, an
+	 * actions cluster, and a metrics/meta strip.
+	 *
+	 * Layering rules: all color flows through `var(--color-*)` DaisyUI tokens
+	 * feeding the component's own classes, so it themes cleanly; no
+	 * DaisyUI class names in the public API.
+	 *
+	 * Usage:
+	 *   <PageHeader title="Sessions" count={activeCount} subtitle="tmux + agents">
+	 *     {#snippet actions()}
+	 *       <Button size="sm" onclick={create}>New</Button>
+	 *     {/snippet}
+	 *   </PageHeader>
+	 *
+	 *   <PageHeader title="Task History" sticky>
+	 *     {#snippet meta()}<Sparkline data={load} />{/snippet}
+	 *     {#snippet children()}<FilterBar … />{/snippet}
+	 *   </PageHeader>
+	 */
+	import type { Snippet } from 'svelte';
+
+	let {
+		title,
+		subtitle = '',
+		count,
+		size = 'md',
+		sticky = false,
+		animate = false,
+		icon,
+		actions,
+		meta,
+		children
+	}: {
+		/** Route title. Rendered uppercase / tracked per the JAT page-title convention. */
+		title: string;
+		/** Optional secondary line under the title (lowercase, dimmer). */
+		subtitle?: string;
+		/** Optional count chip beside the title (e.g. number of rows). */
+		count?: number | string;
+		/** `md` = standard instrument label; `lg` = larger title for landing/first-run screens. */
+		size?: 'md' | 'lg';
+		/** Stick the header to the top of the scroll container. */
+		sticky?: boolean;
+		/** Play the letter-tracking entrance on the title (gated for reduced motion). */
+		animate?: boolean;
+		/** Optional leading icon snippet. */
+		icon?: Snippet;
+		/** Right-aligned action cluster (buttons, filters). */
+		actions?: Snippet;
+		/** Metrics / instrument strip rendered on the title row's trailing edge or below. */
+		meta?: Snippet;
+		/** Content rendered below the header row (e.g. a filter bar). */
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div
+	class="page-header"
+	class:page-header--sticky={sticky}
+	class:page-header--lg={size === 'lg'}
+>
+	<div class="page-header__bar">
+		<div class="page-header__lead">
+			{#if icon}
+				<span class="page-header__icon text-base-content/60">{@render icon()}</span>
+			{/if}
+			<h1 class="page-header__title" class:page-header__title--animate={animate}>{title}</h1>
+			{#if count !== undefined && count !== null}
+				<span class="page-header__count">{count}</span>
+			{/if}
+			{#if subtitle}
+				<span class="page-header__subtitle">{subtitle}</span>
+			{/if}
+		</div>
+
+		{#if meta}
+			<div class="page-header__meta">{@render meta()}</div>
+		{/if}
+
+		{#if actions}
+			<div class="page-header__actions">{@render actions()}</div>
+		{/if}
+	</div>
+
+	{#if children}
+		<div class="page-header__below">{@render children()}</div>
+	{/if}
+</div>
+
+<style>
+	.page-header {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-2xl, 24px);
+		padding: var(--jatui-space-xl, 16px) 1rem;
+	}
+	.page-header--sticky {
+		position: sticky;
+		top: 0;
+		z-index: 30; /* page-level sticky header */
+		background: var(--color-base-100);
+		border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+	}
+
+	.page-header__bar {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-xl, 16px);
+		min-width: 0;
+	}
+
+	.page-header__lead {
+		display: flex;
+		align-items: baseline;
+		gap: 0.625rem;
+		min-width: 0;
+		flex-wrap: wrap;
+	}
+
+	.page-header__icon {
+		display: inline-flex;
+		align-self: center;
+	}
+
+	/* The canonical JAT page-title: small, uppercase, tracked instrument label. */
+	.page-header__title {
+		font-size: 0.875rem;
+		font-weight: 700;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		margin: 0;
+		font-family: system-ui, -apple-system, sans-serif;
+		white-space: nowrap;
+	}
+	.page-header--lg .page-header__title {
+		font-size: 1.25rem;
+		letter-spacing: 0.04em;
+		color: color-mix(in oklch, var(--color-base-content) 85%, transparent);
+	}
+
+	.page-header__title--animate {
+		animation: page-header-tracking-in 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both;
+	}
+	@keyframes page-header-tracking-in {
+		0% {
+			letter-spacing: -0.5em;
+			opacity: 0;
+		}
+		40% {
+			opacity: 0.6;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	.page-header__count {
+		font-family: ui-monospace, monospace;
+		font-size: 0.7rem;
+		font-weight: 600;
+		line-height: 1;
+		padding: 0.2rem 0.45rem;
+		border-radius: var(--jatui-radius-selector, 999px);
+		color: var(--color-primary);
+		background: color-mix(in oklch, var(--color-primary) 14%, transparent);
+		border: 1px solid color-mix(in oklch, var(--color-primary) 30%, transparent);
+		align-self: center;
+	}
+
+	.page-header__subtitle {
+		font-size: 0.75rem;
+		color: color-mix(in oklch, var(--color-base-content) 42%, transparent);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		min-width: 0;
+	}
+
+	.page-header__meta {
+		margin-left: auto;
+		display: flex;
+		align-items: center;
+		min-width: 0;
+	}
+	/* When both meta and actions exist, meta keeps the auto margin and actions
+	   sit at the trailing edge. When only actions exist, actions take the margin. */
+	.page-header__meta ~ .page-header__actions {
+		margin-left: var(--jatui-space-xl, 16px);
+	}
+	.page-header__actions {
+		margin-left: auto;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-shrink: 0;
+	}
+
+	.page-header__below {
+		min-width: 0;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.page-header__title--animate {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,52 @@
+/**
+     * PageHeader — the STANDARD route header (title + meta + actions).
+     * Upstreamed from the JAT IDE `ui/PageHeader.svelte` (adoption audit U7,
+     * jatui-rl7w6.5). The audit scored page headers 3/10 for consistency:
+     * title sizes ranged from `text-sm` to `text-2xl`, weights and spacing all
+     * varied, few had a place for actions or a subtitle. This standardizes on
+     * JAT's dominant operator pattern — the small, uppercase, letter-spaced
+     * "instrument label" — and gives it slots for a count chip, a subtitle, an
+     * actions cluster, and a metrics/meta strip.
+     *
+     * Layering rules: all color flows through `var(--color-*)` DaisyUI tokens
+     * feeding the component's own classes, so it themes cleanly; no
+     * DaisyUI class names in the public API.
+     *
+     * Usage:
+     *   <PageHeader title="Sessions" count={activeCount} subtitle="tmux + agents">
+     *     {#snippet actions()}
+     *       <Button size="sm" onclick={create}>New</Button>
+     *     {/snippet}
+     *   </PageHeader>
+     *
+     *   <PageHeader title="Task History" sticky>
+     *     {#snippet meta()}<Sparkline data={load} />{/snippet}
+     *     {#snippet children()}<FilterBar … />{/snippet}
+     *   </PageHeader>
+     */
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Route title. Rendered uppercase / tracked per the JAT page-title convention. */
+    title: string;
+    /** Optional secondary line under the title (lowercase, dimmer). */
+    subtitle?: string;
+    /** Optional count chip beside the title (e.g. number of rows). */
+    count?: number | string;
+    /** `md` = standard instrument label; `lg` = larger title for landing/first-run screens. */
+    size?: 'md' | 'lg';
+    /** Stick the header to the top of the scroll container. */
+    sticky?: boolean;
+    /** Play the letter-tracking entrance on the title (gated for reduced motion). */
+    animate?: boolean;
+    /** Optional leading icon snippet. */
+    icon?: Snippet;
+    /** Right-aligned action cluster (buttons, filters). */
+    actions?: Snippet;
+    /** Metrics / instrument strip rendered on the title row's trailing edge or below. */
+    meta?: Snippet;
+    /** Content rendered below the header row (e.g. a filter bar). */
+    children?: Snippet;
+};
+declare const PageHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/basic/ProgressButton.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+	/**
+	 * ProgressButton — a button that narrates a multi-step async action inline.
+	 * Upstreamed from the JAT IDE `ui/ProgressButton.svelte` (adoption audit
+	 * U7, jatui-rl7w6.5).
+	 *
+	 * The "advanced dev UX" button: instead of a single generic spinner, the
+	 * button walks through the *named phases* of the work it kicked off
+	 * (e.g. analyzing → creating → spawning → closing), showing the current
+	 * phase label, an animated fill that tracks progress across the phases, and
+	 * a brief success flash when it lands. Use it anywhere a click triggers a
+	 * sequence of steps the user would otherwise stare at a blank spinner for.
+	 *
+	 * Idle  → renders `idleLabel` (or the `children` snippet).
+	 * Busy  → set `phase` to one of `phases[].key`; shows spinner + that phase's
+	 *         label and fills to (index+1)/phases.length. The button disables
+	 *         itself while a phase is active so it can't double-fire.
+	 * Done  → set `success` true for a green check-flash; clear `phase` + reset
+	 *         `success` (typically in your form reset) to return to idle.
+	 *
+	 * Drives only presentation — the caller owns the state machine:
+	 *
+	 *   <ProgressButton
+	 *     idleLabel="Save & Start"
+	 *     {phase}                  // 'analyzing' | 'creating' | … | null
+	 *     phases={SUBMIT_PHASES}   // [{ key, label }] in order
+	 *     {success}
+	 *     onclick={submit}
+	 *   />
+	 *
+	 * Renders through the shared `Button` (DaisyUI `btn`), so `class`
+	 * (e.g. `join-item font-mono`) composes with split-button / join patterns.
+	 */
+	import type { Snippet } from 'svelte';
+	import Button from '../Button.svelte';
+
+	type Phase = { key: string; label: string };
+
+	let {
+		phase = null,
+		phases = [],
+		idleLabel = '',
+		success = false,
+		successLabel = 'Done',
+		variant = 'primary',
+		size = 'md',
+		disabled = false,
+		type = 'button',
+		class: klass = '',
+		onclick,
+		children
+	}: {
+		/** Current active phase key (must match a `phases[].key`); `null` = idle. */
+		phase?: string | null;
+		/** Ordered phases — drives the fill width and the active label lookup. */
+		phases?: Phase[];
+		/** Text shown when idle (used if no `children` snippet is provided). */
+		idleLabel?: string;
+		/** Flash a success state (green fill + check) over the button. */
+		success?: boolean;
+		/** Label shown alongside the check during the success flash. */
+		successLabel?: string;
+		/** Button color (the shared Button variants, minus outline/ghost which hide the fill). */
+		variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		/** Disable from the outside; the button also self-disables while busy. */
+		disabled?: boolean;
+		type?: 'button' | 'submit';
+		/** Extra classes merged after the base `btn` classes (e.g. `join-item`). */
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		/** Idle content; overrides `idleLabel` when provided. */
+		children?: Snippet;
+	} = $props();
+
+	const SPIN = { xs: 'loading-xs', sm: 'loading-xs', md: 'loading-sm', lg: 'loading-md' } as const;
+
+	// Presentation-only busy state: the button self-disables while a phase is
+	// active (the shared Button carries its own spinner for a `state="loading"`
+	// submit flow, so we never use that here — ProgressButton owns the visuals).
+	const isBusy = $derived(phase != null);
+	const activeIndex = $derived(phase != null ? phases.findIndex((p) => p.key === phase) : -1);
+	const currentLabel = $derived(activeIndex >= 0 ? phases[activeIndex].label : (phase ?? ''));
+	// Fraction of the bar to fill: complete on success, (index+1)/N while a known
+	// phase is active, a small head-start for an unlisted phase, else empty.
+	const progress = $derived(
+		success
+			? 1
+			: activeIndex >= 0 && phases.length > 0
+				? (activeIndex + 1) / phases.length
+				: isBusy
+					? 0.35
+					: 0
+	);
+</script>
+
+<Button
+	{type}
+	{variant}
+	{size}
+	class="pb {klass}"
+	disabled={disabled || isBusy}
+	aria-busy={isBusy}
+	{onclick}
+>
+	<span class="pb-fill" style="width: {progress * 100}%" aria-hidden="true"></span>
+	<span class="pb-content" aria-live="polite">
+		{#if success}
+			<svg class="pb-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+			</svg>
+			<span>{successLabel}</span>
+		{:else if isBusy}
+			<span class="loading loading-spinner {SPIN[size]}" aria-hidden="true"></span>
+			<span class="pb-shimmer">{currentLabel}</span>
+		{:else if children}
+			{@render children()}
+		{:else}
+			{idleLabel}
+		{/if}
+	</span>
+</Button>
+
+<style>
+	.pb {
+		position: relative;
+		overflow: hidden;
+		isolation: isolate;
+	}
+
+	/* Keep the label/spinner above the animated fill. */
+	.pb-content {
+		position: relative;
+		z-index: 1;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+	}
+
+	/* Translucent bar that grows left→right as phases advance, lightening the
+	   button so it reads as "filling up". currentColor = the button's content
+	   color, so it stays theme- and variant-correct. */
+	.pb-fill {
+		position: absolute;
+		inset: 0 auto 0 0;
+		z-index: 0;
+		width: 0;
+		background: color-mix(in oklch, currentColor 20%, transparent);
+		transition: width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+		pointer-events: none;
+	}
+
+	/* Phase label shimmer (self-contained: no host app.css dependency). */
+	.pb-shimmer {
+		color: transparent;
+		background-image:
+			linear-gradient(90deg, transparent calc(50% - 30px), oklch(1 0.05 200), transparent calc(50% + 30px)),
+			linear-gradient(oklch(0.85 0.02 250), oklch(0.85 0.02 250));
+		background-size: 300px 100%, 100% 100%;
+		background-repeat: no-repeat;
+		-webkit-background-clip: text;
+		background-clip: text;
+		animation: pb-shimmer-slide 3s linear infinite;
+	}
+	@keyframes pb-shimmer-slide {
+		0% {
+			background-position: -150px center, 0 0;
+		}
+		100% {
+			background-position: calc(100% + 150px) center, 0 0;
+		}
+	}
+
+	/* Success flash: fill snaps to a full green wash regardless of variant,
+	   recolors the content to match, and pops once. */
+	.pb-success .pb-fill,
+	.pb:has(.pb-check) .pb-fill {
+		background: var(--color-success);
+	}
+	.pb:has(.pb-check) .pb-content {
+		color: var(--color-success-content);
+		animation: pb-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	.pb-check {
+		width: 1rem;
+		height: 1rem;
+		animation: pb-check-in 0.28s ease-out;
+	}
+
+	@keyframes pb-pop {
+		0% {
+			transform: scale(1);
+		}
+		45% {
+			transform: scale(1.04);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+	@keyframes pb-check-in {
+		0% {
+			transform: scale(0.4);
+			opacity: 0;
+		}
+		100% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.pb-fill,
+		.pb-content,
+		.pb-check,
+		.pb-shimmer {
+			transition: none;
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,63 @@
+/**
+     * ProgressButton — a button that narrates a multi-step async action inline.
+     * Upstreamed from the JAT IDE `ui/ProgressButton.svelte` (adoption audit
+     * U7, jatui-rl7w6.5).
+     *
+     * The "advanced dev UX" button: instead of a single generic spinner, the
+     * button walks through the *named phases* of the work it kicked off
+     * (e.g. analyzing → creating → spawning → closing), showing the current
+     * phase label, an animated fill that tracks progress across the phases, and
+     * a brief success flash when it lands. Use it anywhere a click triggers a
+     * sequence of steps the user would otherwise stare at a blank spinner for.
+     *
+     * Idle  → renders `idleLabel` (or the `children` snippet).
+     * Busy  → set `phase` to one of `phases[].key`; shows spinner + that phase's
+     *         label and fills to (index+1)/phases.length. The button disables
+     *         itself while a phase is active so it can't double-fire.
+     * Done  → set `success` true for a green check-flash; clear `phase` + reset
+     *         `success` (typically in your form reset) to return to idle.
+     *
+     * Drives only presentation — the caller owns the state machine:
+     *
+     *   <ProgressButton
+     *     idleLabel="Save & Start"
+     *     {phase}                  // 'analyzing' | 'creating' | … | null
+     *     phases={SUBMIT_PHASES}   // [{ key, label }] in order
+     *     {success}
+     *     onclick={submit}
+     *   />
+     *
+     * Renders through the shared `Button` (DaisyUI `btn`), so `class`
+     * (e.g. `join-item font-mono`) composes with split-button / join patterns.
+     */
+import type { Snippet } from 'svelte';
+type Phase = {
+    key: string;
+    label: string;
+};
+type $$ComponentProps = {
+    /** Current active phase key (must match a `phases[].key`); `null` = idle. */
+    phase?: string | null;
+    /** Ordered phases — drives the fill width and the active label lookup. */
+    phases?: Phase[];
+    /** Text shown when idle (used if no `children` snippet is provided). */
+    idleLabel?: string;
+    /** Flash a success state (green fill + check) over the button. */
+    success?: boolean;
+    /** Label shown alongside the check during the success flash. */
+    successLabel?: string;
+    /** Button color (the shared Button variants, minus outline/ghost which hide the fill). */
+    variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Disable from the outside; the button also self-disables while busy. */
+    disabled?: boolean;
+    type?: 'button' | 'submit';
+    /** Extra classes merged after the base `btn` classes (e.g. `join-item`). */
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    /** Idle content; overrides `idleLabel` when provided. */
+    children?: Snippet;
+};
+declare const ProgressButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProgressButton = ReturnType<typeof ProgressButton>;
+export default ProgressButton;

package/dist/components/graph/GraphApiBridge.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	// Internal: rendered inside <SvelteFlow> so useSvelteFlow()/useViewport()
+	// resolve. Hands the helpers up to GraphCanvas and mirrors the live
+	// viewport out (xyflow only writes a bound viewport back when the caller
+	// seeded one, so an initially-undefined bind:viewport would never update).
+	import { useStore, useSvelteFlow, useViewport, type Viewport } from '@xyflow/svelte'
+	import { zoomViewportAround, type GraphFlowHelpers } from './api.js'
+
+	interface Props {
+		onready: (helpers: GraphFlowHelpers | null) => void
+		onviewport: (viewport: Viewport) => void
+	}
+
+	let { onready, onviewport }: Props = $props()
+
+	const flow = useSvelteFlow()
+	const live = useViewport()
+	const store = useStore()
+
+	$effect(() => {
+		onready({
+			fitView: (options) => flow.fitView(options),
+			zoomTo: (zoom, options) =>
+				flow.setViewport(zoomViewportAround(flow.getViewport(), zoom, store.width, store.height), options),
+			getZoom: () => flow.getZoom(),
+			setCenter: (x, y, options) => flow.setCenter(x, y, options),
+			screenToFlowPosition: (p) => flow.screenToFlowPosition(p),
+			getViewport: () => flow.getViewport(),
+		})
+		return () => onready(null)
+	})
+
+	$effect(() => {
+		onviewport(live.current)
+	})
+</script>

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

@@ -0,0 +1,9 @@
+import { type Viewport } from '@xyflow/svelte';
+import { type GraphFlowHelpers } from './api.js';
+interface Props {
+    onready: (helpers: GraphFlowHelpers | null) => void;
+    onviewport: (viewport: Viewport) => void;
+}
+declare const GraphApiBridge: import("svelte").Component<Props, {}, "">;
+type GraphApiBridge = ReturnType<typeof GraphApiBridge>;
+export default GraphApiBridge;