@joewinke/jatui 0.1.31 → 0.2.0

package/dist/components/progress/Steps.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	interface Step {
+		label?: string;
+		description?: string;
+	}
+
+	interface Props {
+		steps: Step[] | string[];
+		current?: number;
+		color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+	}
+
+	let {
+		steps,
+		current = 1,
+		color = 'primary',
+		size = 'md',
+		class: className = ''
+	}: Props = $props();
+
+	const normalized = $derived(
+		steps.map((s) => (typeof s === 'string' ? { label: s } : s))
+	);
+
+	const count = $derived(normalized.length);
+	const trackFill = $derived(count > 1 ? (current - 1) / (count - 1) : 1);
+
+	const colorMap: Record<NonNullable<Props['color']>, string> = {
+		primary: 'oklch(var(--p))',
+		secondary: 'oklch(var(--s))',
+		accent: 'oklch(var(--a))',
+		success: 'oklch(var(--su))',
+		warning: 'oklch(var(--wa))',
+		error: 'oklch(var(--er))',
+		info: 'oklch(var(--in))'
+	};
+	const colorFg: Record<NonNullable<Props['color']>, string> = {
+		primary: 'oklch(var(--pc))',
+		secondary: 'oklch(var(--sc))',
+		accent: 'oklch(var(--ac))',
+		success: 'oklch(var(--suc))',
+		warning: 'oklch(var(--wac))',
+		error: 'oklch(var(--erc))',
+		info: 'oklch(var(--inc))'
+	};
+
+	const fillColor = $derived(colorMap[color]);
+	const fgColor = $derived(colorFg[color]);
+
+	const nodeSize: Record<NonNullable<Props['size']>, number> = { sm: 24, md: 32, lg: 40 };
+	const nodePx = $derived(nodeSize[size]);
+	const fontSize: Record<NonNullable<Props['size']>, string> = { sm: '0.6875rem', md: '0.8125rem', lg: '1rem' };
+	const labelSize = $derived(fontSize[size]);
+</script>
+
+<div
+	class="steps-wrap {className}"
+	role="list"
+	aria-label="Progress steps"
+	style="--fill:{fillColor};--fg:{fgColor};--node:{nodePx}px"
+>
+	<!-- Connector track -->
+	<div class="steps-track" aria-hidden="true">
+		<div class="steps-track-fill" style="transform:scaleX({trackFill})"></div>
+	</div>
+
+	<!-- Step nodes -->
+	{#each normalized as step, i}
+		{@const stepNum = i + 1}
+		{@const isComplete = stepNum < current}
+		{@const isActive = stepNum === current}
+		<div
+			class="step"
+			class:step--complete={isComplete}
+			class:step--active={isActive}
+			role="listitem"
+			aria-current={isActive ? 'step' : undefined}
+		>
+			<div class="step-node" style="font-size:{labelSize}">
+				{#if isComplete}
+					<!-- Check mark drawn in on complete -->
+					<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="step-check" aria-hidden="true">
+						<polyline points="3,8 6.5,12 13,4" />
+					</svg>
+				{:else}
+					<span>{stepNum}</span>
+				{/if}
+			</div>
+			{#if step.label}
+				<span class="step-label" style="font-size:{labelSize}">{step.label}</span>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.steps-wrap {
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		width: 100%;
+		padding-top: calc(var(--node) / 2);
+	}
+
+	/* The connector track runs behind the nodes */
+	.steps-track {
+		position: absolute;
+		top: calc(var(--node) / 2);
+		left: calc(var(--node) / 2);
+		right: calc(var(--node) / 2);
+		height: 3px;
+		border-radius: 9999px;
+		background: oklch(var(--b3) / 1);
+		overflow: hidden;
+		transform: translateY(-50%);
+	}
+
+	.steps-track-fill {
+		height: 100%;
+		background: var(--fill);
+		transform-origin: left;
+		transition: transform 0.5s var(--motion-spring);
+	}
+
+	/* Nodes */
+	.step {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.375rem;
+		z-index: 1;
+		position: relative;
+	}
+
+	.step-node {
+		width: var(--node);
+		height: var(--node);
+		border-radius: 9999px;
+		background: oklch(var(--b3) / 1);
+		color: oklch(var(--bc) / 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: 600;
+		border: 2px solid oklch(var(--b3) / 1);
+		transition:
+			background 0.2s var(--motion-glide),
+			color 0.2s var(--motion-glide),
+			border-color 0.2s var(--motion-glide),
+			transform 0.4s var(--motion-spring);
+	}
+
+	.step--active .step-node {
+		background: oklch(var(--b1) / 1);
+		border-color: var(--fill);
+		color: var(--fill);
+		transform: scale(1.18);
+	}
+
+	.step--complete .step-node {
+		background: var(--fill);
+		border-color: var(--fill);
+		color: var(--fg);
+	}
+
+	.step-check {
+		width: 55%;
+		height: 55%;
+	}
+
+	.step-label {
+		color: oklch(var(--bc) / 0.6);
+		text-align: center;
+		max-width: 5rem;
+		line-height: 1.2;
+		transition: color 0.2s var(--motion-glide);
+	}
+
+	.step--active .step-label,
+	.step--complete .step-label {
+		color: oklch(var(--bc) / 1);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.steps-track-fill {
+			transition: none;
+		}
+		.step-node {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/progress/Steps.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Step {
+    label?: string;
+    description?: string;
+}
+interface Props {
+    steps: Step[] | string[];
+    current?: number;
+    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const Steps: import("svelte").Component<Props, {}, "">;
+type Steps = ReturnType<typeof Steps>;
+export default Steps;

package/dist/components/session-nav/transcriptModel.js

@@ -22,6 +22,17 @@
  *                 transcript shows just the headline by default and the body is
  *                 a drill-down. This is what keeps the left column readable.
  */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 export function rawTypeToState(raw) {
     switch (raw) {
         case 'needs_input':
@@ -37,27 +48,28 @@ export function rawTypeToState(raw) {
 }
 /** Detect a `jat-signal <type> '<json>'` invocation in a tool-call body. */
 function parseSignalBody(body) {
-    const m = body.match(/jat-signal\s+(starting|working|needs_input|review|completing|complete|completed|paused|idle)\b/);
+    var m = body.match(/jat-signal\s+(starting|working|needs_input|review|completing|complete|completed|paused|idle)\b/);
     if (!m)
         return null;
-    let label = '';
-    const pick = body.match(/"(?:approach|question|reviewFocus|currentStep|summary|reason|taskTitle)"\s*:\s*"([^"]{3,90})/);
+    var label = '';
+    var pick = body.match(/"(?:approach|question|reviewFocus|currentStep|summary|reason|taskTitle)"\s*:\s*"([^"]{3,90})/);
     if (pick)
         label = pick[1];
-    return { rawType: m[1], label };
+    return { rawType: m[1], label: label };
 }
 /** Build the linked model from rendered transcript lines. */
 export function buildLinkedSession(lines) {
-    const items = [];
-    const emits = [];
-    let cur = null;
-    const flush = () => {
+    var items = [];
+    var emits = [];
+    var cur = null;
+    var flush = function () {
         if (cur) {
-            items.push({ id: items.length, ...cur, signalId: null });
+            items.push(__assign(__assign({ id: items.length }, cur), { signalId: null }));
             cur = null;
         }
     };
-    for (const line of lines) {
+    for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
+        var line = lines_1[_i];
         if (!line.trim()) {
             flush();
             continue;
@@ -68,8 +80,8 @@ export function buildLinkedSession(lines) {
             continue;
         }
         if (line.startsWith('⏺ ')) {
-            const body = line.slice(2);
-            const sig = parseSignalBody(body);
+            var body = line.slice(2);
+            var sig = parseSignalBody(body);
             if (sig) {
                 // signal emission = boundary; consume it, don't render as an item
                 flush();
@@ -81,7 +93,7 @@ export function buildLinkedSession(lines) {
             continue;
         }
         if (line.startsWith('  ⎿ ')) {
-            const body = line.slice(4);
+            var body = line.slice(4);
             if (cur) {
                 cur.detail.push(body);
                 cur.srcLines++;
@@ -90,7 +102,7 @@ export function buildLinkedSession(lines) {
         }
         if (line.startsWith('   ')) {
             // continuation: tool detail for actions, prose for prompt/assistant
-            const body = line.trimStart();
+            var body = line.trimStart();
             if (cur && cur.kind === 'action') {
                 cur.detail.push(body);
                 cur.srcLines++;
@@ -113,21 +125,21 @@ export function buildLinkedSession(lines) {
     }
     flush();
     // Build signal nodes from emission boundaries.
-    const signals = [];
-    let prevBoundary = -1;
-    emits.forEach((e, i) => {
-        const rowStart = Math.max(0, prevBoundary + 1);
-        const rowEnd = Math.max(rowStart, e.afterIdx);
-        let lineCount = 0;
-        for (let k = rowStart; k <= rowEnd && k < items.length; k++)
+    var signals = [];
+    var prevBoundary = -1;
+    emits.forEach(function (e, i) {
+        var rowStart = Math.max(0, prevBoundary + 1);
+        var rowEnd = Math.max(rowStart, e.afterIdx);
+        var lineCount = 0;
+        for (var k = rowStart; k <= rowEnd && k < items.length; k++)
             lineCount += items[k].srcLines;
         signals.push({
-            id: `sig-${i}`,
+            id: "sig-".concat(i),
             state: rawTypeToState(e.rawType),
             rawType: e.rawType,
             label: e.label,
-            rowStart,
-            rowEnd,
+            rowStart: rowStart,
+            rowEnd: rowEnd,
             lineCount: Math.max(1, lineCount),
             // No WorkBlock substrate data in the raw-lines path
             blockId: null,
@@ -139,12 +151,13 @@ export function buildLinkedSession(lines) {
         });
         prevBoundary = e.afterIdx;
     });
-    for (const sig of signals) {
-        for (let k = sig.rowStart; k <= sig.rowEnd && k < items.length; k++) {
+    for (var _a = 0, signals_1 = signals; _a < signals_1.length; _a++) {
+        var sig = signals_1[_a];
+        for (var k = sig.rowStart; k <= sig.rowEnd && k < items.length; k++) {
             items[k].signalId = sig.id;
         }
     }
-    return { items, signals };
+    return { items: items, signals: signals };
 }
 /**
  * Build a LinkedSession from the WorkBlock substrate (B1).
@@ -162,45 +175,49 @@ export function buildLinkedSession(lines) {
  */
 export function buildLinkedSessionFromWork(blocks, items) {
     // Map WorkTranscriptItem → TranscriptItem (blockId → signalId mapping happens after)
-    const transcriptItems = items.map((it) => ({
+    var transcriptItems = items.map(function (it) { return ({
         id: it.id,
         kind: it.kind,
         headline: it.headline,
         detail: it.detail,
         srcLines: it.srcLines,
         signalId: null // filled in below
-    }));
+    }); });
     // Map WorkBlock → SignalNode
-    const signals = blocks.map((blk) => ({
-        id: blk.id,
-        state: rawTypeToState(blk.signal.type),
-        rawType: blk.signal.type,
-        label: blk.signal.label,
-        rowStart: blk.itemRange.start,
-        rowEnd: blk.itemRange.end,
-        lineCount: blk.lineCount,
-        // WorkBlock substrate fields
-        blockId: blk.id,
-        summary: blk.summary,
-        filesTouched: blk.filesTouched,
-        commits: blk.commits ?? [],
-        linesAdded: blk.linesAdded ?? 0,
-        linesRemoved: blk.linesRemoved ?? 0
-    }));
+    var signals = blocks.map(function (blk) {
+        var _a, _b, _c;
+        return ({
+            id: blk.id,
+            state: rawTypeToState(blk.signal.type),
+            rawType: blk.signal.type,
+            label: blk.signal.label,
+            rowStart: blk.itemRange.start,
+            rowEnd: blk.itemRange.end,
+            lineCount: blk.lineCount,
+            // WorkBlock substrate fields
+            blockId: blk.id,
+            summary: blk.summary,
+            filesTouched: blk.filesTouched,
+            commits: (_a = blk.commits) !== null && _a !== void 0 ? _a : [],
+            linesAdded: (_b = blk.linesAdded) !== null && _b !== void 0 ? _b : 0,
+            linesRemoved: (_c = blk.linesRemoved) !== null && _c !== void 0 ? _c : 0
+        });
+    });
     // Assign signalId to transcript items via block ownership
-    for (const sig of signals) {
-        for (let k = sig.rowStart; k <= sig.rowEnd && k < transcriptItems.length; k++) {
+    for (var _i = 0, signals_2 = signals; _i < signals_2.length; _i++) {
+        var sig = signals_2[_i];
+        for (var k = sig.rowStart; k <= sig.rowEnd && k < transcriptItems.length; k++) {
             transcriptItems[k].signalId = sig.id;
         }
     }
-    return { items: transcriptItems, signals };
+    return { items: transcriptItems, signals: signals };
 }
 /**
  * A baked, realistic sample so /sankey always demos beautifully even with no live
  * session. Authored as raw transcript lines with real `jat-signal` calls, so it
  * flows through the EXACT same parser as live data.
  */
-export const SAMPLE_TRANSCRIPT_LINES = [
+export var SAMPLE_TRANSCRIPT_LINES = [
     '',
     '› /jat:start GentleCoast jat-7h2k',
     '⏺ Bash(get-current-session-id)',