omkit 0.4.3 → 0.4.4

package/dist/cli/ui/views/OmList.d.ts

@@ -1,7 +1,5 @@
 import { type ReactElement } from "react";
 import type { DiscoveredOm } from "../../client/registry.ts";
-/** Case-insensitive substring filter on om names. */
-export declare function filterOms(oms: DiscoveredOm[], query: string): DiscoveredOm[];
 /** A searchable, arrow-navigable list of oms; Enter selects the highlighted one. */
 export declare function OmList({ oms, onSelect, }: {
     oms: DiscoveredOm[];

package/dist/cli/ui/views/OmList.js

@@ -1,36 +1,16 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Box, Text, useInput } from "ink";
-/** Case-insensitive substring filter on om names. */
-export function filterOms(oms, query) {
-    const q = query.toLowerCase();
-    return oms.filter((o) => o.name.toLowerCase().includes(q));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import path from "node:path";
+import {} from "react";
+import { Text } from "ink";
+import { SearchableList } from "./SearchableList.js";
+/** Show the om's path relative to cwd when it's inside the project; else the absolute path. */
+function displayPath(file) {
+    const rel = path.relative(process.cwd(), file);
+    return rel && !rel.startsWith("..") && !path.isAbsolute(rel) ? rel : file;
 }
 /** A searchable, arrow-navigable list of oms; Enter selects the highlighted one. */
 export function OmList({ oms, onSelect, }) {
-    const [query, setQuery] = useState("");
-    const [index, setIndex] = useState(0);
-    const filtered = filterOms(oms, query);
-    useInput((input, key) => {
-        if (key.upArrow) {
-            setIndex((i) => Math.max(0, i - 1));
-        }
-        else if (key.downArrow) {
-            setIndex((i) => Math.min(filtered.length - 1, i + 1));
-        }
-        else if (key.return) {
-            const picked = filtered[index];
-            if (picked)
-                onSelect(picked);
-        }
-        else if (key.backspace || key.delete) {
-            setQuery((q) => q.slice(0, -1));
-            setIndex(0);
-        }
-        else if (input && !key.ctrl && !key.meta) {
-            setQuery((q) => q + input);
-            setIndex(0);
-        }
-    });
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["search: ", query] }), filtered.map((o, i) => (_jsxs(Text, { inverse: i === index, children: [o.name, " ", o.file] }, o.name)))] }));
+    // Column width so paths line up; capped so one long name can't push paths off-screen.
+    const nameWidth = Math.min(30, oms.reduce((w, o) => Math.max(w, o.name.length), 0));
+    return (_jsx(SearchableList, { items: oms, getKey: (o) => o.name, getSearchText: (o) => o.name, onSelect: onSelect, renderRow: (o, selected) => (_jsxs(Text, { children: [_jsx(Text, { color: selected ? "cyan" : undefined, children: selected ? "❯ " : "  " }), _jsx(Text, { bold: selected, children: o.name.padEnd(nameWidth) }), "  ", _jsx(Text, { dimColor: true, children: displayPath(o.file) })] })) }));
 }

package/dist/cli/ui/views/RunView.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
 import type { PromptRequest, Verdict } from "../../client/types.ts";
-/** Answer one pending prompt — free-text input, or arrow-navigable choices. */
+/** Answer one pending prompt — free-text input, or searchable choices. */
 export declare function PromptView({ request, onAnswer, }: {
     request: PromptRequest;
     onAnswer: (value: string) => void;

package/dist/cli/ui/views/RunView.js

@@ -1,31 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { Box, Text, useInput } from "ink";
-/** Answer one pending prompt — free-text input, or arrow-navigable choices. */
-export function PromptView({ request, onAnswer, }) {
+import { SearchableList } from "./SearchableList.js";
+/** A choice prompt: searchable, arrow-navigable options, Enter picks the highlighted one. */
+function ChoicePrompt({ request, onAnswer, }) {
     const { spec } = request;
     const choices = spec.choices ?? [];
-    // Refs hold the authoritative value: Ink can deliver several key events before React
-    // re-renders, so the Enter handler must read a ref, not a possibly-stale render closure.
-    // State mirrors the ref only to drive the display.
+    const defaultIndex = Math.max(0, choices.findIndex((c) => c.value === spec.default));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", paddingX: 1, children: [_jsx(Text, { children: spec.message }), _jsx(SearchableList, { items: choices, getKey: (c) => c.value, getSearchText: (c) => c.label, initialIndex: defaultIndex, onSelect: (c) => onAnswer(c.value), renderRow: (c, selected) => (_jsxs(Text, { inverse: selected, children: [c.value === spec.default ? "* " : "  ", c.label] })) })] }));
+}
+/** A free-text prompt: a bordered field with a block cursor and a dim default/enter hint. */
+function InputPrompt({ request, onAnswer, }) {
+    const { spec } = request;
+    // Ref holds the authoritative text: Ink can deliver several key events before React re-renders,
+    // so the Enter handler must read a ref, not a possibly-stale render closure.
     const textRef = useRef("");
-    const indexRef = useRef(0);
     const [text, setText] = useState("");
-    const [index, setIndex] = useState(0);
-    const onChoiceKey = (key) => {
-        if (key.upArrow) {
-            indexRef.current = Math.max(0, indexRef.current - 1);
-            setIndex(indexRef.current);
-        }
-        else if (key.downArrow) {
-            indexRef.current = Math.min(choices.length - 1, indexRef.current + 1);
-            setIndex(indexRef.current);
-        }
-        else if (key.return) {
-            onAnswer(choices[indexRef.current]?.value ?? spec.default);
-        }
-    };
-    const onInputKey = (input, key) => {
+    useInput((input, key) => {
         if (key.return) {
             onAnswer(textRef.current === "" ? spec.default : textRef.current);
         }
@@ -37,9 +28,12 @@ export function PromptView({ request, onAnswer, }) {
             textRef.current += input;
             setText(textRef.current);
         }
-    };
-    useInput((input, key) => (spec.kind === "choice" ? onChoiceKey(key) : onInputKey(input, key)));
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", paddingX: 1, children: [_jsx(Text, { children: spec.message }), spec.kind === "choice" ? (choices.map((c, i) => (_jsxs(Text, { inverse: i === index, children: [c.value === spec.default ? "* " : "  ", c.label] }, c.value)))) : (_jsxs(Text, { children: ["> ", text] }))] }));
+    });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", paddingX: 1, children: [_jsx(Text, { children: spec.message }), _jsxs(Text, { children: ["› ", text, _jsx(Text, { inverse: true, children: " " })] }), _jsxs(Text, { dimColor: true, children: ["enter \u23CE", spec.default ? ` · default: ${spec.default}` : ""] })] }));
+}
+/** Answer one pending prompt — free-text input, or searchable choices. */
+export function PromptView({ request, onAnswer, }) {
+    return request.spec.kind === "choice" ? (_jsx(ChoicePrompt, { request: request, onAnswer: onAnswer })) : (_jsx(InputPrompt, { request: request, onAnswer: onAnswer }));
 }
 /** The live run surface: milestone lines, a pending prompt, and the final verdict. */
 export function RunView({ lines, prompt, verdict, onAnswer, }) {

package/dist/cli/ui/views/SearchableList.d.ts

@@ -0,0 +1,24 @@
+import { type ReactElement, type ReactNode } from "react";
+export interface SearchableListProps<T> {
+    items: T[];
+    /** Stable React key per item. */
+    getKey: (item: T) => string;
+    /** Text the type-to-filter search matches against (case-insensitive substring). */
+    getSearchText: (item: T) => string;
+    /** Draw one row; `selected` is the highlighted item. */
+    renderRow: (item: T, selected: boolean) => ReactNode;
+    onSelect: (item: T) => void;
+    /** Where the highlight starts (e.g. a prompt's default). Default 0. */
+    initialIndex?: number;
+    /** Viewport size; clamped to {@link MAX_VISIBLE}. Default {@link MAX_VISIBLE}. */
+    max?: number;
+    /** Prefix for the search line. Default "search: ". */
+    searchLabel?: string;
+}
+/**
+ * A searchable, arrow-navigable list with a scrolling viewport. Owns search, selection, and
+ * windowing; the caller owns row rendering via {@link SearchableListProps.renderRow}. The
+ * `search:` line and the `+N more` footer only appear once the list overflows the viewport
+ * (or the user starts typing), so short lists stay a plain arrow list.
+ */
+export declare function SearchableList<T>({ items, getKey, getSearchText, renderRow, onSelect, initialIndex, max, searchLabel, }: SearchableListProps<T>): ReactElement;

package/dist/cli/ui/views/SearchableList.js

@@ -0,0 +1,66 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Box, Text, useInput } from "ink";
+/** Hard cap on visible rows, regardless of `max`. */
+const MAX_VISIBLE = 15;
+/**
+ * A searchable, arrow-navigable list with a scrolling viewport. Owns search, selection, and
+ * windowing; the caller owns row rendering via {@link SearchableListProps.renderRow}. The
+ * `search:` line and the `+N more` footer only appear once the list overflows the viewport
+ * (or the user starts typing), so short lists stay a plain arrow list.
+ */
+export function SearchableList({ items, getKey, getSearchText, renderRow, onSelect, initialIndex = 0, max = MAX_VISIBLE, searchLabel = "search: ", }) {
+    // Refs hold the authoritative query/index: Ink can deliver several key events before React
+    // re-renders, so the Enter handler must read refs, not a possibly-stale render closure. State
+    // mirrors the refs only to drive the display.
+    const queryRef = useRef("");
+    const indexRef = useRef(initialIndex);
+    const [query, setQuery] = useState("");
+    const [index, setIndex] = useState(initialIndex);
+    const match = (q) => {
+        const needle = q.toLowerCase();
+        return needle ? items.filter((it) => getSearchText(it).toLowerCase().includes(needle)) : items;
+    };
+    const clampIndex = (i, len) => Math.min(i, Math.max(0, len - 1));
+    useInput((input, key) => {
+        if (key.upArrow) {
+            indexRef.current = Math.max(0, indexRef.current - 1);
+            setIndex(indexRef.current);
+        }
+        else if (key.downArrow) {
+            const len = match(queryRef.current).length;
+            indexRef.current = Math.min(len - 1, clampIndex(indexRef.current, len) + 1);
+            setIndex(indexRef.current);
+        }
+        else if (key.return) {
+            const list = match(queryRef.current);
+            const picked = list[clampIndex(indexRef.current, list.length)];
+            if (picked)
+                onSelect(picked);
+        }
+        else if (key.backspace || key.delete) {
+            queryRef.current = queryRef.current.slice(0, -1);
+            indexRef.current = 0;
+            setQuery(queryRef.current);
+            setIndex(0);
+        }
+        else if (input && !key.ctrl && !key.meta) {
+            queryRef.current += input;
+            indexRef.current = 0;
+            setQuery(queryRef.current);
+            setIndex(0);
+        }
+    });
+    const filtered = match(query);
+    const selected = clampIndex(index, filtered.length);
+    const window = Math.min(max, MAX_VISIBLE, filtered.length);
+    // Slide the viewport so the selected row stays visible, without overscrolling the end.
+    let start = selected >= window ? selected - window + 1 : 0;
+    start = Math.min(start, Math.max(0, filtered.length - window));
+    const visible = filtered.slice(start, start + window);
+    const above = start;
+    const below = filtered.length - (start + window);
+    const overflows = items.length > Math.min(max, MAX_VISIBLE);
+    const showSearch = overflows || query.length > 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [showSearch ? (_jsxs(Text, { dimColor: true, children: [searchLabel, query] })) : null, above > 0 ? _jsx(Text, { dimColor: true, children: `↑ ${above} more` }) : null, filtered.length === 0 ? _jsx(Text, { dimColor: true, children: "no matches" }) : null, visible.map((it, vi) => (_jsx(Box, { children: renderRow(it, start + vi === selected) }, getKey(it)))), below > 0 ? _jsx(Text, { dimColor: true, children: `+${below} more` }) : null] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omkit",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "A tiny runtime for developer workflows: typed actions that pass runtime capabilities and emit typed events, under one run and one shared log. The operational/runtime layer to tskb's knowledge layer.",
   "type": "module",
   "main": "./dist/index.js",