@joewinke/jatui 0.23.0 → 0.25.0

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

@@ -23,7 +23,23 @@
      *
      * Precedence: `sections` > `registry` > `shortcuts`. The overlay owns `?` —
      * don't register it in the registry too.
+     *
+     * App-specific sections (marks, list motions, cockpit panels…) that the
+     * overlay itself doesn't know about come in via `extraSections` — they
+     * render after the primary content, before the meta rows, in EVERY mode:
+     *
+     *   <KeyboardShortcutsOverlay {registry} extraSections={[
+     *     { title: 'Marks & jumps (Vim)', shortcuts: [{ key: "m{a-z}", description: 'Drop a mark' }] },
+     *   ]} />
+     *
+     * For content the section renderer can't express, an `extra` snippet is
+     * rendered last (just above the meta rows):
+     *
+     *   <KeyboardShortcutsOverlay {registry}>
+     *     {#snippet extra()}<div>…custom footer…</div>{/snippet}
+     *   </KeyboardShortcutsOverlay>
      */
+import type { Snippet } from 'svelte';
 import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 export interface KeyboardShortcut {
     key: string;
@@ -52,6 +68,20 @@ type $$ComponentProps = {
      * the stack first). Ignored when `sections` is given.
      */
     registry?: ShortcutRegistry;
+    /**
+     * Extra app-provided sections (e.g. marks, list motions, cockpit
+     * panels) appended after the primary content and before the meta
+     * rows, regardless of whether the primary content came from
+     * `sections`, `registry` or the flat `shortcuts` list. Same shape
+     * as `sections`, with per-key `color` tinting supported.
+     */
+    extraSections?: ShortcutSection[];
+    /**
+     * Fully custom footer content, rendered after `extraSections` and
+     * just above the built-in meta rows. Use when the section renderer
+     * (title + key/description rows) can't express the markup.
+     */
+    extra?: Snippet;
     title?: string;
     open?: boolean;
 };

package/dist/components/bulkActionBarKeys.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Pure hotkey resolution for `BulkActionBar` (jatui-is2ow.6) — ported from
+ * the IDE's fork (`ide/src/lib/components/BulkActionBar.svelte`, audit
+ * jat-1alfp row 15).
+ *
+ * The IDE fork keeps key handling in the host page; here it lives in the
+ * component, but the DECIDING logic is this pure function so it can be
+ * unit-tested without a DOM. The component's keydown handler calls
+ * `matchBulkHotkey(event, actions)` and invokes the returned action's
+ * `onSelect`.
+ *
+ * Rules (mirroring the shortcut registry's sharp edges):
+ *  - single printable keys only (`event.key.length === 1`) — an action
+ *    declaring a multi-char `key` is never matched;
+ *  - matched case-insensitively (`'C'` on the action fires on `'c'`);
+ *  - ignored while the focus is in a text entry target (`isTypingTarget`);
+ *  - ignored for modifier combos (Ctrl/⌘/Alt) and already-handled events.
+ */
+/** The subset of `BulkAction` the resolver needs. */
+export interface BulkHotkeyAction {
+    /** Single-key binding (e.g. 'c'). Multi-char values never match. */
+    key?: string;
+    /** Click handler — fired by the component when the hotkey matches. */
+    onSelect: () => void;
+}
+/** Minimal structural subset of `KeyboardEvent` — real events satisfy it. */
+export interface BulkHotkeyEvent {
+    key: string;
+    target: EventTarget | null;
+    defaultPrevented?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    altKey?: boolean;
+}
+/**
+ * Resolve a keydown to the bulk action whose single-key binding matches,
+ * or return null when the event must not fire a hotkey (typing target,
+ * modifier combo, defaultPrevented, non-printable key, no match).
+ */
+export declare function matchBulkHotkey(event: BulkHotkeyEvent, actions: readonly BulkHotkeyAction[]): BulkHotkeyAction | null;

package/dist/components/bulkActionBarKeys.js

@@ -0,0 +1,38 @@
+/**
+ * Pure hotkey resolution for `BulkActionBar` (jatui-is2ow.6) — ported from
+ * the IDE's fork (`ide/src/lib/components/BulkActionBar.svelte`, audit
+ * jat-1alfp row 15).
+ *
+ * The IDE fork keeps key handling in the host page; here it lives in the
+ * component, but the DECIDING logic is this pure function so it can be
+ * unit-tested without a DOM. The component's keydown handler calls
+ * `matchBulkHotkey(event, actions)` and invokes the returned action's
+ * `onSelect`.
+ *
+ * Rules (mirroring the shortcut registry's sharp edges):
+ *  - single printable keys only (`event.key.length === 1`) — an action
+ *    declaring a multi-char `key` is never matched;
+ *  - matched case-insensitively (`'C'` on the action fires on `'c'`);
+ *  - ignored while the focus is in a text entry target (`isTypingTarget`);
+ *  - ignored for modifier combos (Ctrl/⌘/Alt) and already-handled events.
+ */
+import { isTypingTarget } from '../utils/keyboardShortcutRegistry';
+/**
+ * Resolve a keydown to the bulk action whose single-key binding matches,
+ * or return null when the event must not fire a hotkey (typing target,
+ * modifier combo, defaultPrevented, non-printable key, no match).
+ */
+export function matchBulkHotkey(event, actions) {
+    if (event.defaultPrevented)
+        return null;
+    if (event.ctrlKey || event.metaKey || event.altKey)
+        return null;
+    if (isTypingTarget(event.target))
+        return null;
+    // Single printable keys only — 'Escape', 'ArrowDown', 'Enter' etc. are
+    // navigation keys owned by listNav and must never trigger a bulk action.
+    if (!event.key || event.key.length !== 1)
+        return null;
+    const wanted = event.key.toLowerCase();
+    return (actions.find((a) => a.key && a.key.length === 1 && a.key.toLowerCase() === wanted) ?? null);
+}

package/dist/components/linked-columns/LinkedColumns.svelte

@@ -1,17 +1,3 @@
-<script module lang="ts">
-	// Declared in the module script so `import type { ColumnLink } from
-	// './LinkedColumns.svelte'` resolves (instance-script exports are not module members).
-	/** Describes which left items a single right (anchor) item covers. */
-	export interface ColumnLink {
-		/** The right item's id this link belongs to. */
-		rightId: string | number;
-		/** First left item id in the covered range (inclusive). */
-		leftStartId: string | number;
-		/** Last left item id in the covered range (inclusive). */
-		leftEndId: string | number;
-	}
-</script>
-
 <script lang="ts" generics="L extends { id: string | number }, R extends { id: string | number }">
 	/**
 	 * LinkedColumns — generic two-column ink-up ribbon primitive.
@@ -64,8 +50,7 @@
 	 */
 
 	import type { Snippet } from 'svelte';
-
-	// ColumnLink is declared in the module <script> above so it's importable as a module member.
+	import type { ColumnLink } from './types.js';
 
 	let {
 		leftItems,
@@ -410,12 +395,15 @@
 </div>
 
 <style>
+	/* Theme tokens (jatui-is2ow.3): fallbacks chain token → token (never a
+	   hard-coded oklch). --n-16 is a jat-IDE neutral; its inline fallback keeps
+	   standalone consumers (no app.css) rendering the same value. */
 	.lc-wrap {
 		position: relative;
 		display: flex;
 		height: 100%;
 		min-height: 0;
-		background: var(--color-base-100, oklch(0.16 0.01 250));
+		background: var(--color-base-100, var(--color-base-300));
 		border-radius: 0.75rem;
 		overflow: hidden;
 	}
@@ -431,7 +419,7 @@
 		transition: stroke-opacity 0.25s ease, stroke-width 0.25s ease;
 	}
 	.lc-ribbon-active {
-		filter: drop-shadow(0 0 6px var(--color-success, oklch(0.7 0.18 145)));
+		filter: drop-shadow(0 0 6px var(--color-success));
 	}
 
 	/* Columns */
@@ -473,10 +461,10 @@
 		font-weight: 700;
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--color-base-content, oklch(0.85 0.02 250));
+		color: var(--color-base-content);
 		opacity: 0.55;
 		background: linear-gradient(
-			var(--color-base-100, oklch(0.16 0.01 250)) 70%,
+			var(--color-base-100, var(--n-16, oklch(0.16 0.01 250))) 70%,
 			transparent
 		);
 	}
@@ -489,8 +477,8 @@
 		transition: background-color 0.2s ease, box-shadow 0.2s ease;
 	}
 	.lc-left-item-active {
-		background: color-mix(in oklch, var(--color-success, oklch(0.7 0.18 145)) 8%, transparent);
-		box-shadow: inset 2px 0 0 var(--color-success, oklch(0.7 0.18 145));
+		background: color-mix(in oklch, var(--color-success) 8%, transparent);
+		box-shadow: inset 2px 0 0 var(--color-success);
 	}
 
 	/* Right item wrapper — consumers style via snippet; provides CSS vars */

package/dist/components/linked-columns/LinkedColumns.svelte.d.ts

@@ -1,12 +1,3 @@
-/** Describes which left items a single right (anchor) item covers. */
-export interface ColumnLink {
-    /** The right item's id this link belongs to. */
-    rightId: string | number;
-    /** First left item id in the covered range (inclusive). */
-    leftStartId: string | number;
-    /** Last left item id in the covered range (inclusive). */
-    leftEndId: string | number;
-}
 /**
      * LinkedColumns — generic two-column ink-up ribbon primitive.
      *
@@ -57,6 +48,7 @@ export interface ColumnLink {
      * ```
      */
 import type { Snippet } from 'svelte';
+import type { ColumnLink } from './types.js';
 declare function $$render<L extends {
     id: string | number;
 }, R extends {

package/dist/components/linked-columns/types.d.ts

@@ -0,0 +1,9 @@
+/** Describes which left items a single right (anchor) item covers. */
+export interface ColumnLink {
+    /** The right item's id this link belongs to. */
+    rightId: string | number;
+    /** First left item id in the covered range (inclusive). */
+    leftStartId: string | number;
+    /** Last left item id in the covered range (inclusive). */
+    leftEndId: string | number;
+}

package/dist/components/linked-columns/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/replay/ChapterTimeline.svelte

@@ -11,7 +11,12 @@
 	 * on the full IDE codebase (jat-jj79f.16 G1).
 	 *
 	 * The IDE-specific `SESSION_STATE_VISUALS` import has been replaced with
-	 * an inline `SIGNAL_COLORS` map that covers the same canonical signal types.
+	 * an inline `SIGNAL_COLORS` map that covers the same canonical signal types,
+	 * plus an optional `stateVisual(state)` resolver prop (jatui-is2ow.4): a
+	 * caller — e.g. the jat IDE with its own SESSION_STATE_VISUALS — can supply
+	 * its own colour resolver and the built-in palette is only used as the
+	 * default / fallback. `ChapterBlock.itemRange` matches the IDE's WorkBlock
+	 * shape so IDE callers can pass blocks straight through without remapping.
 	 */
 
 	export interface ChapterBlock {
@@ -22,17 +27,20 @@
 		filesTouched: { path: string; how: string }[];
 		checkpoint: { timestamp: string | null };
 		summary: string | null;
+		/** Index span of the transcript items this block owns (IDE WorkBlock shape). */
+		itemRange?: { start: number; end: number };
 	}
 
-	/** Minimal color descriptors for each canonical signal state. */
-	interface SignalColor {
+	/** Colour descriptors the timeline needs per canonical signal state. */
+	export interface ChapterStateVisual {
 		accent: string;
 		bgTint: string;
 		glow: string;
 		shortLabel: string;
 	}
 
-	const SIGNAL_COLORS: Record<string, SignalColor> = {
+	/** Default palette for each canonical signal state — kept for standalone consumers without a resolver. */
+	const SIGNAL_COLORS: Record<string, ChapterStateVisual> = {
 		starting:         { accent: 'oklch(0.70 0.16 250)', bgTint: 'oklch(0.70 0.16 250 / 0.10)', glow: 'oklch(0.70 0.16 250 / 0.45)', shortLabel: '🚀 Starting' },
 		working:          { accent: 'oklch(0.75 0.16 85)',  bgTint: 'oklch(0.75 0.16 85 / 0.08)',  glow: 'oklch(0.75 0.16 85 / 0.45)',  shortLabel: '🔧 Working' },
 		'needs-input':    { accent: 'oklch(0.68 0.19 25)',  bgTint: 'oklch(0.68 0.19 25 / 0.08)',  glow: 'oklch(0.68 0.19 25 / 0.4)',   shortLabel: '❓ Needs Input' },
@@ -49,10 +57,19 @@
 		blocks = [],
 		activeBlockId = null,
 		onSeek = (_blockId: string) => {},
+		stateVisual,
 	}: {
 		blocks: ChapterBlock[];
 		activeBlockId: string | null;
 		onSeek?: (blockId: string) => void;
+		/**
+		 * Optional colour resolver: canonical state name → visual. Receives the
+		 * NORMALIZED state (e.g. `'needs-input'`, not the raw `'needs_input'`),
+		 * so a caller can pass `(state) => SESSION_STATE_VISUALS[state]` directly.
+		 * Return `undefined` for unknown states — the built-in palette (then
+		 * idle) is used as the fallback, matching the IDE's `?? idle` behaviour.
+		 */
+		stateVisual?: (state: string) => ChapterStateVisual | undefined;
 	} = $props();
 
 	function rawTypeToState(raw: string): string {
@@ -65,8 +82,9 @@
 		}
 	}
 
-	function visual(signalType: string): SignalColor {
-		return SIGNAL_COLORS[rawTypeToState(signalType)] ?? DEFAULT_COLOR;
+	function visual(signalType: string): ChapterStateVisual {
+		const state = rawTypeToState(signalType);
+		return stateVisual?.(state) ?? SIGNAL_COLORS[state] ?? DEFAULT_COLOR;
 	}
 
 	function glyph(signalType: string): string {
@@ -183,7 +201,7 @@
 
 	.empty {
 		font-size: 0.75rem;
-		color: oklch(0.55 0.02 250);
+		color: oklch(from var(--color-base-content) l c h / 60%);
 		padding: 0.5rem;
 		text-align: center;
 	}
@@ -193,8 +211,8 @@
 		height: 2.25rem;
 		border-radius: 0.5rem;
 		overflow: hidden;
-		background: oklch(0.14 0.01 250);
-		border: 1px solid oklch(0.22 0.02 250);
+		background: var(--color-base-300);
+		border: 1px solid var(--color-base-100);
 		gap: 1px;
 	}
 
@@ -203,9 +221,9 @@
 		align-items: center;
 		gap: 0.3rem;
 		padding: 0 0.5rem;
-		background: var(--chapter-tint, oklch(0.18 0.01 250));
+		background: var(--chapter-tint, var(--color-base-200));
 		border: none;
-		border-right: 1px solid oklch(0.20 0.02 250);
+		border-right: 1px solid var(--color-base-100);
 		cursor: pointer;
 		transition: background 0.12s ease, box-shadow 0.12s ease;
 		overflow: hidden;
@@ -218,12 +236,12 @@
 	}
 
 	.chapter:hover {
-		background: color-mix(in oklch, var(--chapter-accent) 18%, oklch(0.16 0.01 250));
+		background: color-mix(in oklch, var(--chapter-accent) 18%, var(--color-base-300));
 		box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--chapter-accent) 40%, transparent);
 	}
 
 	.chapter.active {
-		background: color-mix(in oklch, var(--chapter-accent) 22%, oklch(0.16 0.01 250));
+		background: color-mix(in oklch, var(--chapter-accent) 22%, var(--color-base-300));
 		box-shadow:
 			inset 0 0 0 2px color-mix(in oklch, var(--chapter-accent) 70%, transparent),
 			0 0 12px color-mix(in oklch, var(--chapter-glow) 30%, transparent);
@@ -247,20 +265,20 @@
 
 	.ch-label {
 		font-size: 0.7rem;
-		color: oklch(0.78 0.04 250);
+		color: oklch(from var(--color-base-content) l c h / 90%);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		min-width: 0;
 	}
 
 	.chapter.active .ch-label {
-		color: oklch(0.92 0.06 250);
+		color: oklch(from var(--color-primary) 0.92 0.06 h);
 		font-weight: 600;
 	}
 
 	.ch-meta {
 		font-size: 0.6rem;
-		color: oklch(0.50 0.02 250);
+		color: oklch(from var(--color-base-content) l c h / 55%);
 		margin-left: auto;
 		flex-shrink: 0;
 		font-family: monospace;
@@ -273,10 +291,10 @@
 		gap: 0.6rem;
 		padding: 0.25rem 0.5rem;
 		font-size: 0.72rem;
-		color: oklch(0.70 0.04 250);
-		background: oklch(0.15 0.01 250);
+		color: oklch(from var(--color-base-content) l c h / 80%);
+		background: var(--color-base-300);
 		border-radius: 0.375rem;
-		border: 1px solid oklch(0.22 0.02 250);
+		border: 1px solid var(--color-base-100);
 		min-height: 1.75rem;
 		flex-wrap: wrap;
 		gap-y: 0.15rem;
@@ -285,7 +303,7 @@
 	.ch-detail-idx {
 		font-size: 0.65rem;
 		font-family: monospace;
-		color: oklch(0.50 0.02 250);
+		color: oklch(from var(--color-base-content) l c h / 55%);
 		flex-shrink: 0;
 	}
 
@@ -297,7 +315,7 @@
 	}
 
 	.ch-detail-summary.muted {
-		color: oklch(0.55 0.02 250);
+		color: oklch(from var(--color-base-content) l c h / 60%);
 		font-style: italic;
 	}
 
@@ -310,17 +328,17 @@
 	.ch-file {
 		font-size: 0.64rem;
 		font-family: monospace;
-		background: oklch(0.19 0.02 250);
-		border: 1px solid oklch(0.25 0.02 250);
+		background: var(--color-base-200);
+		border: 1px solid var(--color-base-100);
 		border-radius: 0.2rem;
 		padding: 0.1rem 0.35rem;
-		color: oklch(0.70 0.08 200);
+		color: var(--color-info);
 	}
 
 	.ch-detail-ts {
 		font-size: 0.62rem;
 		font-family: monospace;
-		color: oklch(0.48 0.02 250);
+		color: oklch(from var(--color-base-content) l c h / 50%);
 		flex-shrink: 0;
 	}
 </style>

package/dist/components/replay/ChapterTimeline.svelte.d.ts

@@ -10,7 +10,12 @@
  * on the full IDE codebase (jat-jj79f.16 G1).
  *
  * The IDE-specific `SESSION_STATE_VISUALS` import has been replaced with
- * an inline `SIGNAL_COLORS` map that covers the same canonical signal types.
+ * an inline `SIGNAL_COLORS` map that covers the same canonical signal types,
+ * plus an optional `stateVisual(state)` resolver prop (jatui-is2ow.4): a
+ * caller — e.g. the jat IDE with its own SESSION_STATE_VISUALS — can supply
+ * its own colour resolver and the built-in palette is only used as the
+ * default / fallback. `ChapterBlock.itemRange` matches the IDE's WorkBlock
+ * shape so IDE callers can pass blocks straight through without remapping.
  */
 export interface ChapterBlock {
     id: string;
@@ -28,11 +33,31 @@ export interface ChapterBlock {
         timestamp: string | null;
     };
     summary: string | null;
+    /** Index span of the transcript items this block owns (IDE WorkBlock shape). */
+    itemRange?: {
+        start: number;
+        end: number;
+    };
+}
+/** Colour descriptors the timeline needs per canonical signal state. */
+export interface ChapterStateVisual {
+    accent: string;
+    bgTint: string;
+    glow: string;
+    shortLabel: string;
 }
 type $$ComponentProps = {
     blocks: ChapterBlock[];
     activeBlockId: string | null;
     onSeek?: (blockId: string) => void;
+    /**
+     * Optional colour resolver: canonical state name → visual. Receives the
+     * NORMALIZED state (e.g. `'needs-input'`, not the raw `'needs_input'`),
+     * so a caller can pass `(state) => SESSION_STATE_VISUALS[state]` directly.
+     * Return `undefined` for unknown states — the built-in palette (then
+     * idle) is used as the fallback, matching the IDE's `?? idle` behaviour.
+     */
+    stateVisual?: (state: string) => ChapterStateVisual | undefined;
 };
 declare const ChapterTimeline: import("svelte").Component<$$ComponentProps, {}, "">;
 type ChapterTimeline = ReturnType<typeof ChapterTimeline>;

package/dist/components/session-nav/transcriptModel.d.ts

@@ -34,6 +34,8 @@ export interface TranscriptItem {
     srcLines: number;
     /** id of the signal node that owns this item (assigned after parse) */
     signalId: string | null;
+    /** ISO write time of the first source message (null on line-parsed/live items) */
+    timestamp?: string | null;
 }
 export interface FileTouchedEntry {
     path: string;
@@ -65,11 +67,46 @@ export interface SignalNode {
     /** Net lines changed across all diffs for this block */
     linesAdded: number;
     linesRemoved: number;
+    /**
+     * Original signal JSON payload (full data for rich card rendering). Always
+     * set by the builders below; optional so SignalNodes constructed by hand
+     * (pre-0.25 callers) still type-check.
+     */
+    payload?: Record<string, unknown> | null;
+    /**
+     * True when this node represents the OPEN, in-progress turn — either a
+     * server-marked open block (`WorkBlockClient.open === true`) or the
+     * synthesized live node owning the trailing items past the last block.
+     * SessionNavigator uses this to render a ● live affordance. Optional so
+     * existing SignalNode consumers are unaffected.
+     */
+    isLive?: boolean;
 }
 export interface LinkedSession {
     items: TranscriptItem[];
     signals: SignalNode[];
 }
+/** Tone drives the marker's hue; deliberately NOT a session-state key. */
+export type MarkerTone = 'success' | 'error' | 'warn' | 'neutral' | 'info';
+/** What a card detector declares when its event deserves a rail marker. */
+export interface TimelineMarkerSpec {
+    /** glyph shown on the rail — keep it non-emoji so state glyphs stay distinct */
+    glyph: string;
+    /** short rail label, e.g. "subtask completed" */
+    label: string;
+    /** longer text for the title/tooltip */
+    detail?: string;
+    tone: MarkerTone;
+}
+/** A content event promoted onto the signal timeline, anchored to its row. */
+export interface TimelineMarker extends TimelineMarkerSpec {
+    /** rail id — "mrk-<itemId>" */
+    id: string;
+    /** transcript item this marker anchors to (its `[data-row]`) */
+    itemId: number;
+    /** signal owning that item — clicking a marker inks this signal's ribbon */
+    signalId: string | null;
+}
 export declare function rawTypeToState(raw: string): string;
 /** Build the linked model from rendered transcript lines. */
 export declare function buildLinkedSession(lines: string[]): LinkedSession;
@@ -99,6 +136,14 @@ export interface WorkBlockClient {
     }>;
     linesAdded?: number;
     linesRemoved?: number;
+    /**
+     * True when the server marks this block as the OPEN in-progress turn
+     * (populated by the navigator/sessionWork layer — sibling task jat-difet).
+     * Read defensively: may be undefined on blocks from older payloads. When
+     * true on the last block, that block's node becomes the live node (it
+     * absorbs any trailing items instead of synthesizing a separate one).
+     */
+    open?: boolean;
 }
 export interface WorkTranscriptItemClient {
     id: number;
@@ -107,6 +152,7 @@ export interface WorkTranscriptItemClient {
     detail: string[];
     srcLines: number;
     blockId: string | null;
+    timestamp?: string | null;
 }
 /**
  * Build a LinkedSession from the WorkBlock substrate (B1).