@askdkc/dsh-cli 0.11.3

package/lib/types/components/WorkspacePicker.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../ui.js';
+import { t } from '../i18n.js';
+import { Pane } from './design-system/Pane.js';
+import { ListItem } from './design-system/ListItem.js';
+import { HintLine } from './design-system/HintLine.js';
+const WINDOW = 8;
+/** `/workspace` target picker contributed by local and optional providers. */
+export function WorkspacePicker({ targets, focusIndex, currentCwd, onPick, }) {
+    const start = Math.max(0, Math.min(focusIndex - Math.floor(WINDOW / 2), targets.length - WINDOW));
+    const visible = targets.slice(start, start + WINDOW);
+    return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: t('workspace-picker-title') }) }), visible.map((target, index) => (_jsxs(ListItem, { isFocused: start + index === focusIndex, isSelected: target.cwd === currentCwd, description: target.description ?? target.uri, showScrollUp: index === 0 && start > 0, showScrollDown: index === visible.length - 1 && start + visible.length < targets.length, onClick: onPick === undefined ? undefined : () => onPick(start + index), children: [target.badge, " \u00B7 ", target.label] }, target.uri)))] }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('workspace-picker-hint') }) })] }));
+}

package/lib/types/components/activityFrames.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Working-activity indicator presets — thin re-export of the single source
+ * of truth in the `dsh-working-activity` package (`src/frames.ts`). The TUI
+ * keeps this shim so existing importers (`/activity` picker, status line,
+ * channel, activity prefs) resolve the same names without moving; all preset
+ * data (the pi-extension union, 35 presets) lives upstream.
+ * @module dsh-tui/components/activityFrames
+ */
+import { type FramePreset } from 'dsh-working-activity/frames';
+export type { FramePreset };
+export declare const DEFAULT_PRESET = "moon8";
+/**
+ * Read compatibility for saved preferences; the picker only offers current
+ * names. `claude` is a pre-rename preset id (kept upstream by
+ * dsh-working-activity for its own history): saved choices normalize to the
+ * moon8 default instead of rendering the retired brand preset.
+ */
+export declare function normalizeActivityPreset(name: string | undefined): string | undefined;
+export declare const FRAME_PRESETS: Record<string, FramePreset>;
+export declare const PRESET_NAMES: readonly string[];
+export declare function isPresetName(name: string): boolean;
+export declare function resolvePreset(name: string | undefined): FramePreset;
+//# sourceMappingURL=activityFrames.d.ts.map

package/lib/types/components/activityFrames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activityFrames.d.ts","sourceRoot":"","sources":["../../../src/components/activityFrames.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAoC,KAAK,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAChG,YAAY,EAAE,WAAW,EAAE,CAAA;AAE3B,eAAO,MAAM,cAAc,UAAU,CAAA;AAErC;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAEpF;AAED,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAErD,CAAA;AACD,eAAO,MAAM,YAAY,EAAE,SAAS,MAAM,EAA8C,CAAA;AAExF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAGlD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAKnE"}

package/lib/types/components/activityFrames.js

@@ -0,0 +1,31 @@
+/**
+ * Working-activity indicator presets — thin re-export of the single source
+ * of truth in the `dsh-working-activity` package (`src/frames.ts`). The TUI
+ * keeps this shim so existing importers (`/activity` picker, status line,
+ * channel, activity prefs) resolve the same names without moving; all preset
+ * data (the pi-extension union, 35 presets) lives upstream.
+ * @module dsh-tui/components/activityFrames
+ */
+import { FRAME_PRESETS as upstreamPresets } from 'dsh-working-activity/frames';
+export const DEFAULT_PRESET = 'moon8';
+/**
+ * Read compatibility for saved preferences; the picker only offers current
+ * names. `claude` is a pre-rename preset id (kept upstream by
+ * dsh-working-activity for its own history): saved choices normalize to the
+ * moon8 default instead of rendering the retired brand preset.
+ */
+export function normalizeActivityPreset(name) {
+    return name === 'claude' ? DEFAULT_PRESET : name;
+}
+export const FRAME_PRESETS = Object.fromEntries(Object.entries(upstreamPresets).filter(([name]) => normalizeActivityPreset(name) === name));
+export const PRESET_NAMES = ['random', ...Object.keys(FRAME_PRESETS)];
+export function isPresetName(name) {
+    const current = normalizeActivityPreset(name);
+    return current === 'random' || Object.hasOwn(FRAME_PRESETS, current);
+}
+export function resolvePreset(name) {
+    const current = normalizeActivityPreset(name);
+    const names = Object.keys(FRAME_PRESETS);
+    return FRAME_PRESETS[current === 'random' ? names[Math.floor(Math.random() * names.length)] : current ?? DEFAULT_PRESET]
+        ?? FRAME_PRESETS[DEFAULT_PRESET];
+}

package/lib/types/components/approvals/ApprovalPanel.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The approval panel — permission prompt for the DSH
+ * approval seam (`ctx.approval`). One ask per panel: a permission-colored
+ * divider header naming the tool, the gated command recovered from the
+ * paired tool call, the asker's reason,
+ * "Allow this operation?", and a numbered Yes/No list.
+ *
+ * The protocol's outcome set is closed (allowed-once / rejected /
+ * cancelled / unavailable) with no allow-always or feedback channel, so
+ * the panel deliberately offers exactly two rows; Esc and Ctrl+C reject
+ * (fail closed; Esc cancels the request).
+ */
+import React from 'react';
+import type { ApprovalSnapshot } from '../../dsh-adapter/approvals.js';
+export type ApprovalPanelProps = {
+    /** The approval to render (from the ApprovalStore snapshot). */
+    readonly approval: ApprovalSnapshot;
+    /** True when the asking agent is NOT the attached session — a background
+     *  (agent view) session's ask, answered from the same single panel. */
+    readonly background?: boolean;
+    readonly onDecide: (outcome: 'allowed-once' | 'rejected') => void;
+};
+export declare function ApprovalPanel({ approval, background, onDecide }: ApprovalPanelProps): React.ReactNode;
+//# sourceMappingURL=ApprovalPanel.d.ts.map

package/lib/types/components/approvals/ApprovalPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApprovalPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/approvals/ApprovalPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AAEtE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAA;IACnC;2EACuE;IACvE,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,UAAU,KAAK,IAAI,CAAA;CAClE,CAAA;AAID,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,UAAkB,EAAE,QAAQ,EAAE,EAAE,kBAAkB,GAAG,KAAK,CAAC,SAAS,CAuF7G"}

package/lib/types/components/approvals/ApprovalPanel.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The approval panel — permission prompt for the DSH
+ * approval seam (`ctx.approval`). One ask per panel: a permission-colored
+ * divider header naming the tool, the gated command recovered from the
+ * paired tool call, the asker's reason,
+ * "Allow this operation?", and a numbered Yes/No list.
+ *
+ * The protocol's outcome set is closed (allowed-once / rejected /
+ * cancelled / unavailable) with no allow-always or feedback channel, so
+ * the panel deliberately offers exactly two rows; Esc and Ctrl+C reject
+ * (fail closed; Esc cancels the request).
+ */
+import React from 'react';
+import { t } from '../../i18n.js';
+import { Box, Text, useInput } from '../../ui.js';
+import { isPlainReturnInput } from '../../utils/modifiers.js';
+import { Divider } from '../design-system/Divider.js';
+import { POINTER } from '../../terminal-utils/figures.js';
+const OUTCOMES = ['allowed-once', 'rejected'];
+export function ApprovalPanel({ approval, background = false, onDecide }) {
+    const [focusIndex, setFocusIndex] = React.useState(0);
+    // Hover highlight per decision row (mouse affordance; the click handler
+    // below mirrors the keyboard Enter on the focused row).
+    const [hoverIndex, setHoverIndex] = React.useState(-1);
+    useInput((input, key) => {
+        if (key.escape || (key.ctrl && input === 'c')) {
+            onDecide('rejected');
+            return;
+        }
+        if (key.upArrow) {
+            setFocusIndex(index => (index + OUTCOMES.length - 1) % OUTCOMES.length);
+            return;
+        }
+        if (key.downArrow) {
+            setFocusIndex(index => (index + 1) % OUTCOMES.length);
+            return;
+        }
+        if (input === '1' || input === '2') {
+            onDecide(OUTCOMES[Number(input) - 1]);
+            return;
+        }
+        if (isPlainReturnInput(input, key)) {
+            onDecide(OUTCOMES[focusIndex]);
+        }
+    }, { isActive: true });
+    const optionLabels = [t('approval-yes'), t('approval-no')];
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 2, paddingRight: 2, width: "100%", children: [_jsx(Divider, { color: "permission", title: t('approval-waiting', { tool: approval.toolName }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [background && (_jsx(Text, { color: "warning", children: t('approval-background-agent', { id: approval.agentId.slice(0, 8) }) })), approval.external === true && (_jsxs(Text, { color: "warning", wrap: "wrap", children: ["[external] ", t('approval-external-hint')] })), approval.command !== undefined && (_jsx(Box, { flexDirection: "column", paddingX: 2, children: _jsx(Text, { dimColor: true, wrap: "wrap", children: approval.command }) })), approval.reason !== undefined && (_jsx(Text, { dimColor: true, wrap: "wrap", children: approval.reason })), _jsx(Text, { dimColor: true, children: t('approval-proceed') })] }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: optionLabels.map((label, index) => {
+                    const focused = index === focusIndex;
+                    const hovered = index === hoverIndex;
+                    return (_jsxs(Box, { flexDirection: "row", marginTop: focused ? 1 : 0, onClick: () => onDecide(OUTCOMES[index]), onMouseEnter: () => setHoverIndex(index), onMouseLeave: () => setHoverIndex(current => (current === index ? -1 : current)), backgroundColor: hovered && !focused ? 'userMessageBackgroundHover' : undefined, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: focused ? 'accent' : undefined, bold: focused, children: focused ? POINTER : ' ' }) }), _jsxs(Text, { bold: focused, color: focused ? 'accent' : undefined, wrap: "wrap", children: [index + 1, ". ", label] })] }, label));
+                }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: t('approval-hint') }) })] }));
+}

package/lib/types/components/bigfont.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A 5-row block font for the header tagline, painted with a horizontal
+ * color gradient plus a moving highlight window (the same sweep cadence as
+ * the wordmark shimmer — see the `stepMs` parameter). Glyphs are 5 columns wide so curves
+ * and diagonals stay legible; only the letters the tagline needs are
+ * defined, and unknown characters fall back to a hollow box so a typo
+ * fails visibly instead of crashing the splash.
+ */
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Render `text` in the 5-row block font. The gradient runs `from` → `to`
+ * across the full line width; a SWEEP_WINDOW-wide highlight mixed toward
+ * `flash` travels left to right (one column per `stepMs`, matching the
+ * wordmark shimmer's cadence). Returns 5 ANSI rows.
+ * @param text - Text to render; only D, E, P, S, K, H, A, R, N have glyphs, unknown letters fall back to a hollow box.
+ * @param time - Elapsed time in milliseconds; drives the sweep position and the brightness pulse.
+ * @param from - Gradient start color at the left edge.
+ * @param to - Gradient end color at the right edge.
+ * @param flash - Highlight color mixed into the moving sweep window.
+ * @param stepMs - Milliseconds per column of sweep advance (default 60).
+ * @returns Five ANSI rows, one per block-font line.
+ */
+export declare function renderBigText(text: string, time: number, from: Rgb, to: Rgb, flash: Rgb, stepMs?: number): string[];
+//# sourceMappingURL=bigfont.d.ts.map

package/lib/types/components/bigfont.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bigfont.d.ts","sourceRoot":"","sources":["../../../src/components/bigfont.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAiCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,GAAG,EACT,EAAE,EAAE,GAAG,EACP,KAAK,EAAE,GAAG,EACV,MAAM,SAAK,GACV,MAAM,EAAE,CA+CV"}

package/lib/types/components/bigfont.js

@@ -0,0 +1,91 @@
+import { interpolateColor } from './Spinner/spinnerUtils.js';
+/** Glyph rows are 5 columns wide; `·` is a transparent cell. */
+const GLYPHS = {
+    D: ['█▀▀▀▄', '█···█', '█···█', '█···█', '█▄▄▄▀'],
+    E: ['█▀▀▀▀', '█····', '█▀▀▀·', '█····', '█▄▄▄▄'],
+    P: ['█▀▀▀▄', '█···█', '█▄▄▄▀', '█····', '█····'],
+    S: ['█▀▀▀▀', '█····', '·▀▀▀▄', '····█', '█▄▄▄▀'],
+    K: ['█···█', '█·█··', '██···', '█·█··', '█···█'],
+    H: ['█···█', '█···█', '█▀▀▀█', '█···█', '█···█'],
+    A: ['·▄▀▄·', '█···█', '█▀▀▀█', '█···█', '█···█'],
+    R: ['█▀▀▀▄', '█···█', '█▄▄▄▀', '█·█··', '█···█'],
+    N: ['█···█', '██··█', '█·█·█', '█··██', '█···█'],
+};
+const FALLBACK = [
+    '▄▄▄▄▄',
+    '█···█',
+    '█···█',
+    '█···█',
+    '▀▀▀▀▀',
+];
+/** Per-glyph advance (5 glyph columns + 1 kerning column). */
+const ADVANCE = 6;
+/** Space between words. */
+const WORD_GAP = 2;
+/** Sweep highlight window width, in terminal columns. */
+const SWEEP_WINDOW = 8;
+const esc = (rgb) => `\x1b[38;2;${rgb.r};${rgb.g};${rgb.b}m`;
+const RESET = '\x1b[39m';
+/**
+ * Render `text` in the 5-row block font. The gradient runs `from` → `to`
+ * across the full line width; a SWEEP_WINDOW-wide highlight mixed toward
+ * `flash` travels left to right (one column per `stepMs`, matching the
+ * wordmark shimmer's cadence). Returns 5 ANSI rows.
+ * @param text - Text to render; only D, E, P, S, K, H, A, R, N have glyphs, unknown letters fall back to a hollow box.
+ * @param time - Elapsed time in milliseconds; drives the sweep position and the brightness pulse.
+ * @param from - Gradient start color at the left edge.
+ * @param to - Gradient end color at the right edge.
+ * @param flash - Highlight color mixed into the moving sweep window.
+ * @param stepMs - Milliseconds per column of sweep advance (default 60).
+ * @returns Five ANSI rows, one per block-font line.
+ */
+export function renderBigText(text, time, from, to, flash, stepMs = 60) {
+    const width = text.length * ADVANCE + (text.includes(' ') ? WORD_GAP - 1 : 0);
+    const cycle = width + SWEEP_WINDOW * 2;
+    const sweepStart = (Math.floor(time / stepMs) % cycle) - SWEEP_WINDOW;
+    const pulse = (Math.sin(time / (stepMs * 2)) + 1) / 2;
+    const rows = [];
+    for (let row = 0; row < 5; row++) {
+        let out = '';
+        let current = '';
+        let x = 0;
+        const emit = (ch) => {
+            if (ch === ' ' || ch === '·') {
+                if (current !== '') {
+                    out += RESET;
+                    current = '';
+                }
+                out += ' ';
+                x += 1;
+                return;
+            }
+            const t = width <= 1 ? 0 : x / (width - 1);
+            let color = interpolateColor(from, to, t);
+            if (x >= sweepStart && x < sweepStart + SWEEP_WINDOW) {
+                color = interpolateColor(color, flash, pulse);
+            }
+            const seq = esc(color);
+            if (seq !== current) {
+                out += seq;
+                current = seq;
+            }
+            out += ch;
+            x += 1;
+        };
+        for (const ch of text) {
+            if (ch === ' ') {
+                for (let i = 0; i < WORD_GAP; i++)
+                    emit(' ');
+                continue;
+            }
+            const glyph = GLYPHS[ch] ?? FALLBACK;
+            for (const cell of glyph[row])
+                emit(cell);
+            emit(' ');
+        }
+        if (current !== '')
+            out += RESET;
+        rows.push(out);
+    }
+    return rows;
+}

package/lib/types/components/design-system/Byline.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type Props = {
+    /** The items to join with a middot separator */
+    children: React.ReactNode;
+};
+/**
+ * Joins children with a middot separator (" · ") for inline metadata display
+ * (in the dsh-TUI visual language). Automatically filters out
+ * null/undefined/false children and only renders separators between valid
+ * elements.
+ */
+export declare function Byline({ children }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=Byline.d.ts.map

package/lib/types/components/design-system/Byline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Byline.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/Byline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAA;AAGvD,KAAK,KAAK,GAAG;IACX,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAoB3D"}

package/lib/types/components/design-system/Byline.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { Children, isValidElement } from 'react';
+import Text from './ThemedText.js';
+/**
+ * Joins children with a middot separator (" · ") for inline metadata display
+ * (in the dsh-TUI visual language). Automatically filters out
+ * null/undefined/false children and only renders separators between valid
+ * elements.
+ */
+export function Byline({ children }) {
+    // Children.toArray already filters out null, undefined, and booleans
+    const validChildren = Children.toArray(children);
+    if (validChildren.length === 0) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: validChildren.map((child, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Text, { dimColor: true, children: " \u00B7 " }), child] }, isValidElement(child) ? (child.key ?? index) : index))) }));
+}

package/lib/types/components/design-system/Divider.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import type { Theme } from '../../theme.js';
+type DividerProps = {
+    /**
+     * Width of the divider in characters.
+     * Defaults to the available layout width.
+     */
+    width?: number;
+    /**
+     * Theme color for the divider.
+     * If not provided, dimColor is used.
+     */
+    color?: keyof Theme;
+    /**
+     * Character to use for the divider line.
+     * @default '─'
+     */
+    char?: string;
+    /**
+     * Padding to subtract from the width (e.g., for indentation).
+     * @default 0
+     */
+    padding?: number;
+    /**
+     * Title shown in the middle of the divider.
+     * May contain ANSI codes (e.g., chalk-styled text).
+     */
+    title?: string;
+    /**
+     * Full-bleed: extend the rule into the page margins to the terminal
+     * edges (page-level structural hairline — the page-margin convention:
+     * TEXT stays inside the content column, structural lines bleed). Use for
+     * screen-level dividers only; dividers inside cards, panels, or the
+     * transcript stay at content width. No-op outside PageMargin.
+     */
+    bleed?: boolean;
+};
+/**
+ * A horizontal divider line, optionally with a title in the middle
+ * in the dsh-TUI visual language.
+ *
+ * The rule fills the width Yoga actually grants it: the Box is measured
+ * after layout (SearchBox pattern — a resize re-layouts without any prop
+ * change, so measure on every commit) and the terminal column count only
+ * seeds the first frame. A full-terminal-width rule nested in a narrower
+ * container (e.g., the transcript beside the 2-column timeline rail)
+ * would otherwise wrap onto a second row.
+ *
+ * Because the rendered rule width feeds back into the width Yoga grants
+ * the Box, the measurement negotiation is bounded per terminal-width
+ * generation (MAX_APPLIED_MEASUREMENTS below): a non-converging layout
+ * degrades to a frozen, truncated rule instead of tripping React's max
+ * update depth (error #185, a hard process crash).
+ *
+ * @example
+ * // ─────────── Title ───────────
+ * <Divider title="Title" />
+ */
+export declare function Divider({ width, color, char, padding, title, bleed, }: DividerProps): React.ReactNode;
+export {};
+//# sourceMappingURL=Divider.d.ts.map

package/lib/types/components/design-system/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAQhE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C,KAAK,YAAY,GAAG;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,KAAK,CAAA;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AASD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,IAAU,EACV,OAAW,EACX,KAAK,EACL,KAAa,GACd,EAAE,YAAY,GAAG,KAAK,CAAC,SAAS,CAoFhC"}

package/lib/types/components/design-system/Divider.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import Box from '../../ink/components/Box.js';
+import Text from './ThemedText.js';
+import measureElement from '../../ink/measure-element.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+import { useTerminalSize } from '../../ink/hooks/use-terminal-size.js';
+import { usePageInset } from '../PageMargin.js';
+// Upper bound on distinct measurements applied per terminal-width
+// generation. Converging layouts apply one or two; a non-converging
+// context (content-sized Box, or a sibling negotiating space the same
+// way) would keep changing the measured width once per commit forever,
+// so freeze well before the reconciler's 50-nested-update limit.
+const MAX_APPLIED_MEASUREMENTS = 8;
+/**
+ * A horizontal divider line, optionally with a title in the middle
+ * in the dsh-TUI visual language.
+ *
+ * The rule fills the width Yoga actually grants it: the Box is measured
+ * after layout (SearchBox pattern — a resize re-layouts without any prop
+ * change, so measure on every commit) and the terminal column count only
+ * seeds the first frame. A full-terminal-width rule nested in a narrower
+ * container (e.g., the transcript beside the 2-column timeline rail)
+ * would otherwise wrap onto a second row.
+ *
+ * Because the rendered rule width feeds back into the width Yoga grants
+ * the Box, the measurement negotiation is bounded per terminal-width
+ * generation (MAX_APPLIED_MEASUREMENTS below): a non-converging layout
+ * degrades to a frozen, truncated rule instead of tripping React's max
+ * update depth (error #185, a hard process crash).
+ *
+ * @example
+ * // ─────────── Title ───────────
+ * <Divider title="Title" />
+ */
+export function Divider({ width, color, char = '─', padding = 0, title, bleed = false, }) {
+    const { columns } = useTerminalSize();
+    const inset = usePageInset();
+    // Full-bleed: the rule spans the terminal columns, shifted left by the
+    // page inset via a negative margin (the box reaches into the margin
+    // area; the parent does not clip). `columns` here is the CONTENT width
+    // (PageMargin narrows TerminalSizeContext), so +2·inset.x = terminal.
+    const bleedX = bleed ? inset.x : 0;
+    const bleedWidth = columns + 2 * bleedX;
+    const [measuredWidth, setMeasuredWidth] = useState(null);
+    const boxRef = useRef(null);
+    // Measurement feedback guard: the rule width rendered from
+    // `measuredWidth` feeds back into the width Yoga grants the Box, so
+    // the measured value can drift or ping-pong without ever converging —
+    // one setState per commit then trips React's max update depth (error
+    // #185) and kills the process. Apply at most MAX_APPLIED_MEASUREMENTS
+    // distinct widths per terminal-width generation and freeze once a
+    // value repeats (A→B→A). truncate-end keeps an over-wide frozen rule
+    // on one row, so freezing degrades gracefully; a resize (columns
+    // change) reopens the negotiation.
+    const negotiation = useRef({ columns, applied: [], frozen: false });
+    useLayoutEffect(() => {
+        const node = boxRef.current;
+        if (!node)
+            return;
+        const state = negotiation.current;
+        if (state.columns !== columns) {
+            state.columns = columns;
+            state.applied = [];
+            state.frozen = false;
+            // The current Yoga layout was rendered from the previous terminal
+            // width. Clear it and let the next render seed from the new columns;
+            // measuring this stale pass would keep a grown terminal permanently
+            // pinned to its old narrow width.
+            setMeasuredWidth(null);
+            return;
+        }
+        if (state.frozen)
+            return;
+        const w = measureElement(node).width;
+        if (w <= 0)
+            return;
+        const applied = state.applied;
+        if (w === applied[applied.length - 1])
+            return;
+        if (applied.includes(w) || applied.length >= MAX_APPLIED_MEASUREMENTS) {
+            state.frozen = true;
+            return;
+        }
+        applied.push(w);
+        setMeasuredWidth(w);
+    });
+    const available = measuredWidth ?? bleedWidth;
+    const target = bleed ? bleedWidth : (width ?? columns);
+    const lineWidth = Math.max(0, Math.min(available, target) - padding);
+    const titleWidth = title ? stringWidth(title) : 0;
+    let text;
+    if (title) {
+        if (titleWidth < lineWidth) {
+            const lineLength = lineWidth - titleWidth;
+            const leftLength = Math.floor(lineLength / 2);
+            const rightLength = Math.ceil(lineLength / 2);
+            text = char.repeat(leftLength) + title + char.repeat(rightLength);
+        }
+        else {
+            // Title wider than the line (long turn-error notices on narrow
+            // windows): keep the message — truncate-end clips it to the
+            // available width instead of dropping it for a bare rule.
+            text = title;
+        }
+    }
+    else {
+        text = char.repeat(lineWidth);
+    }
+    return (_jsx(Box, { ref: boxRef, ...(bleed
+            ? { width: bleedWidth, marginLeft: -bleedX }
+            : width !== undefined
+                ? { width }
+                : {}), children: _jsx(Text, { dimColor: !color, color: color, wrap: "truncate-end", children: text }) }));
+}

package/lib/types/components/design-system/HintLine.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Localized shortcut-hint line: renders a `t('hint-*')` string, with the
+ * `**primary shortcut**` segment (the main action's key, wrapped in `**` in
+ * the dict) in bold. Wrap in `<Text dimColor italic>` for the common dim
+ * styling, like the Byline it replaces.
+ */
+export declare function HintLine({ text }: {
+    text: string;
+}): React.ReactNode;
+//# sourceMappingURL=HintLine.d.ts.map

package/lib/types/components/design-system/HintLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HintLine.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/HintLine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAUpE"}

package/lib/types/components/design-system/HintLine.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import Text from './ThemedText.js';
+/**
+ * Localized shortcut-hint line: renders a `t('hint-*')` string, with the
+ * `**primary shortcut**` segment (the main action's key, wrapped in `**` in
+ * the dict) in bold. Wrap in `<Text dimColor italic>` for the common dim
+ * styling, like the Byline it replaces.
+ */
+export function HintLine({ text }) {
+    const parts = text.split('**');
+    if (parts.length < 3)
+        return _jsx(_Fragment, { children: text });
+    return (_jsx(_Fragment, { children: parts.map((part, index) => index % 2 === 1 ? _jsx(Text, { bold: true, children: part }, index) : part) }));
+}

package/lib/types/components/design-system/ListItem.d.ts

@@ -0,0 +1,42 @@
+import React, { type ReactNode } from 'react';
+import type { ClickEvent } from '../../ink/events/click-event.js';
+export type ListItemProps = {
+    /** Whether this item is currently focused (keyboard selection).
+     *  Shows the pointer indicator (❯) when true. */
+    isFocused: boolean;
+    /** Whether this item is selected (chosen/checked).
+     *  Shows the checkmark indicator (✓) when true. */
+    isSelected?: boolean;
+    /** The content to display for this item. */
+    children: ReactNode;
+    /** Optional description text displayed below the main content. */
+    description?: string;
+    /** Show a down arrow indicator instead of pointer (scroll hints). */
+    showScrollDown?: boolean;
+    /** Show an up arrow indicator instead of pointer (scroll hints). */
+    showScrollUp?: boolean;
+    /** Whether to apply automatic styling based on focus/selection state. */
+    styled?: boolean;
+    /** Disabled items show dimmed text and no indicators. */
+    disabled?: boolean;
+    /**
+     * Whether this ListItem should declare the terminal cursor position.
+     * Set false when a child (e.g. BaseTextInput) declares its own cursor.
+     * @default true
+     */
+    declareCursor?: boolean;
+    /**
+     * Mouse click handler (fullscreen mode). When provided the row becomes
+     * clickable and gains a subtle hover background so the affordance is
+     * visible; when absent the row renders exactly as before.
+     */
+    onClick?: (event: ClickEvent) => void;
+};
+/**
+ * A list item for selection UIs: `❯` marks the focused row, `✓`
+ * checkmark for the selected row, description on an indented second line,
+ * and its color states (focused = suggestion blue, selected = success
+ * green).
+ */
+export declare function ListItem({ isFocused, isSelected, children, description, showScrollDown, showScrollUp, styled, disabled, declareCursor, onClick, }: ListItemProps): React.ReactNode;
+//# sourceMappingURL=ListItem.d.ts.map

package/lib/types/components/design-system/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAGjE,MAAM,MAAM,aAAa,GAAG;IAC1B;qDACiD;IACjD,SAAS,EAAE,OAAO,CAAA;IAClB;uDACmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACtC,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,UAAkB,EAClB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,MAAa,EACb,QAAgB,EAChB,aAAa,EACb,OAAO,GACR,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS,CAoFjC"}