silvery 0.17.0 → 0.17.2

package/dist/ui/display.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.d.mts","names":[],"sources":["../../packages/ag-react/src/ui/display/Table.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+CgB,KAAA,CAAA;EAAQ,OAAA;EAAS,IAAA;EAAM;AAAA,GAAkB,UAAA,GAAa,KAAA,CAAM,YAAA"}

package/dist/ui/display.mjs

@@ -0,0 +1,123 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ag-react/src/ui/display/Table.tsx
+/**
+* Unicode box drawing characters for borders
+*/
+const BOX = {
+	topLeft: "┌",
+	topRight: "┐",
+	bottomLeft: "└",
+	bottomRight: "┘",
+	horizontal: "─",
+	vertical: "│",
+	leftT: "├",
+	rightT: "┤",
+	topT: "┬",
+	bottomT: "┴",
+	cross: "┼"
+};
+/**
+* Data grid display component for React TUI apps
+*
+* @example
+* ```tsx
+* import { Table } from "@silvery/ag-react/ui/display";
+*
+* const columns = [
+*   { key: "name", header: "Name", width: 20 },
+*   { key: "status", header: "Status", width: 10, align: "center" },
+*   { key: "count", header: "Count", width: 8, align: "right" },
+* ];
+*
+* const data = [
+*   { name: "Item 1", status: "active", count: 42 },
+*   { name: "Item 2", status: "pending", count: 7 },
+* ];
+*
+* function DataView() {
+*   return <Table columns={columns} data={data} border />;
+* }
+* ```
+*/
+function Table({ columns, data, border = false }) {
+	const effectiveColumns = calculateColumnWidths(columns, data);
+	const lines = [];
+	if (border) lines.push(buildBorderLine(effectiveColumns, "top"));
+	lines.push(buildDataRow(effectiveColumns, getHeaderRow(effectiveColumns), border));
+	if (border) lines.push(buildBorderLine(effectiveColumns, "middle"));
+	for (const row of data) lines.push(buildDataRow(effectiveColumns, row, border));
+	if (border) lines.push(buildBorderLine(effectiveColumns, "bottom"));
+	return /* @__PURE__ */ jsx("span", {
+		"data-table": true,
+		"data-border": border,
+		children: lines.join("\n")
+	});
+}
+/**
+* Calculate effective column widths based on content if not specified
+*/
+function calculateColumnWidths(columns, data) {
+	return columns.map((col) => {
+		if (col.width !== void 0) return {
+			...col,
+			effectiveWidth: col.width
+		};
+		let maxWidth = col.header.length;
+		for (const row of data) {
+			const value = String(row[col.key] ?? "");
+			maxWidth = Math.max(maxWidth, value.length);
+		}
+		return {
+			...col,
+			effectiveWidth: maxWidth
+		};
+	});
+}
+/**
+* Create header row object from columns
+*/
+function getHeaderRow(columns) {
+	const row = {};
+	for (const col of columns) row[col.key] = col.header;
+	return row;
+}
+/**
+* Build a border line (top, middle, or bottom)
+*/
+function buildBorderLine(columns, position) {
+	const left = position === "top" ? BOX.topLeft : position === "bottom" ? BOX.bottomLeft : BOX.leftT;
+	const right = position === "top" ? BOX.topRight : position === "bottom" ? BOX.bottomRight : BOX.rightT;
+	const join = position === "top" ? BOX.topT : position === "bottom" ? BOX.bottomT : BOX.cross;
+	return left + columns.map((col) => BOX.horizontal.repeat(col.effectiveWidth + 2)).join(join) + right;
+}
+/**
+* Build a data row (header or content)
+*/
+function buildDataRow(columns, row, border) {
+	const cells = columns.map((col) => {
+		return formatCell(String(row[col.key] ?? ""), col.effectiveWidth, col.align ?? "left");
+	});
+	if (border) return BOX.vertical + " " + cells.join(" " + BOX.vertical + " ") + " " + BOX.vertical;
+	return cells.join("  ");
+}
+/**
+* Format a cell value with alignment and truncation
+*/
+function formatCell(value, width, align) {
+	if (value.length > width) return value.slice(0, width - 1) + "…";
+	const padding = width - value.length;
+	switch (align) {
+		case "right": return " ".repeat(padding) + value;
+		case "center": {
+			const leftPad = Math.floor(padding / 2);
+			const rightPad = padding - leftPad;
+			return " ".repeat(leftPad) + value + " ".repeat(rightPad);
+		}
+		default: return value + " ".repeat(padding);
+	}
+}
+//#endregion
+export { Table };
+
+//# sourceMappingURL=display.mjs.map

package/dist/ui/display.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.mjs","names":[],"sources":["../../packages/ag-react/src/ui/display/Table.tsx"],"sourcesContent":["/**\n * React Table component for silvery/Ink TUI apps\n */\n\nimport React from \"react\"\nimport type { TableProps, TableColumn } from \"../types.js\"\n\n/**\n * Unicode box drawing characters for borders\n */\nconst BOX = {\n  topLeft: \"┌\",\n  topRight: \"┐\",\n  bottomLeft: \"└\",\n  bottomRight: \"┘\",\n  horizontal: \"─\",\n  vertical: \"│\",\n  leftT: \"├\",\n  rightT: \"┤\",\n  topT: \"┬\",\n  bottomT: \"┴\",\n  cross: \"┼\",\n} as const\n\n/**\n * Data grid display component for React TUI apps\n *\n * @example\n * ```tsx\n * import { Table } from \"@silvery/ag-react/ui/display\";\n *\n * const columns = [\n *   { key: \"name\", header: \"Name\", width: 20 },\n *   { key: \"status\", header: \"Status\", width: 10, align: \"center\" },\n *   { key: \"count\", header: \"Count\", width: 8, align: \"right\" },\n * ];\n *\n * const data = [\n *   { name: \"Item 1\", status: \"active\", count: 42 },\n *   { name: \"Item 2\", status: \"pending\", count: 7 },\n * ];\n *\n * function DataView() {\n *   return <Table columns={columns} data={data} border />;\n * }\n * ```\n */\nexport function Table({ columns, data, border = false }: TableProps): React.ReactElement {\n  // Calculate effective column widths\n  const effectiveColumns = calculateColumnWidths(columns, data)\n\n  const lines: string[] = []\n\n  if (border) {\n    // Top border\n    lines.push(buildBorderLine(effectiveColumns, \"top\"))\n  }\n\n  // Header row\n  lines.push(buildDataRow(effectiveColumns, getHeaderRow(effectiveColumns), border))\n\n  if (border) {\n    // Separator after header\n    lines.push(buildBorderLine(effectiveColumns, \"middle\"))\n  }\n\n  // Data rows\n  for (const row of data) {\n    lines.push(buildDataRow(effectiveColumns, row, border))\n  }\n\n  if (border) {\n    // Bottom border\n    lines.push(buildBorderLine(effectiveColumns, \"bottom\"))\n  }\n\n  return (\n    <span data-table data-border={border}>\n      {lines.join(\"\\n\")}\n    </span>\n  )\n}\n\n/**\n * Calculate effective column widths based on content if not specified\n */\nfunction calculateColumnWidths(\n  columns: TableColumn[],\n  data: Array<Record<string, unknown>>,\n): Array<TableColumn & { effectiveWidth: number }> {\n  return columns.map((col) => {\n    if (col.width !== undefined) {\n      return { ...col, effectiveWidth: col.width }\n    }\n\n    // Calculate width from content\n    let maxWidth = col.header.length\n\n    for (const row of data) {\n      const value = String(row[col.key] ?? \"\")\n      maxWidth = Math.max(maxWidth, value.length)\n    }\n\n    return { ...col, effectiveWidth: maxWidth }\n  })\n}\n\n/**\n * Create header row object from columns\n */\nfunction getHeaderRow(columns: Array<TableColumn & { effectiveWidth: number }>): Record<string, unknown> {\n  const row: Record<string, unknown> = {}\n  for (const col of columns) {\n    row[col.key] = col.header\n  }\n  return row\n}\n\n/**\n * Build a border line (top, middle, or bottom)\n */\nfunction buildBorderLine(\n  columns: Array<TableColumn & { effectiveWidth: number }>,\n  position: \"top\" | \"middle\" | \"bottom\",\n): string {\n  const left = position === \"top\" ? BOX.topLeft : position === \"bottom\" ? BOX.bottomLeft : BOX.leftT\n  const right = position === \"top\" ? BOX.topRight : position === \"bottom\" ? BOX.bottomRight : BOX.rightT\n  const join = position === \"top\" ? BOX.topT : position === \"bottom\" ? BOX.bottomT : BOX.cross\n\n  const segments = columns.map((col) => BOX.horizontal.repeat(col.effectiveWidth + 2))\n\n  return left + segments.join(join) + right\n}\n\n/**\n * Build a data row (header or content)\n */\nfunction buildDataRow(\n  columns: Array<TableColumn & { effectiveWidth: number }>,\n  row: Record<string, unknown>,\n  border: boolean,\n): string {\n  const cells = columns.map((col) => {\n    const value = String(row[col.key] ?? \"\")\n    return formatCell(value, col.effectiveWidth, col.align ?? \"left\")\n  })\n\n  if (border) {\n    return BOX.vertical + \" \" + cells.join(\" \" + BOX.vertical + \" \") + \" \" + BOX.vertical\n  }\n\n  return cells.join(\"  \")\n}\n\n/**\n * Format a cell value with alignment and truncation\n */\nfunction formatCell(value: string, width: number, align: \"left\" | \"center\" | \"right\"): string {\n  // Truncate if too long\n  if (value.length > width) {\n    return value.slice(0, width - 1) + \"…\"\n  }\n\n  // Pad according to alignment\n  const padding = width - value.length\n\n  switch (align) {\n    case \"right\":\n      return \" \".repeat(padding) + value\n    case \"center\": {\n      const leftPad = Math.floor(padding / 2)\n      const rightPad = padding - leftPad\n      return \" \".repeat(leftPad) + value + \" \".repeat(rightPad)\n    }\n    case \"left\":\n    default:\n      return value + \" \".repeat(padding)\n  }\n}\n"],"mappings":";;;;;;AAUA,MAAM,MAAM;CACV,SAAS;CACT,UAAU;CACV,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,UAAU;CACV,OAAO;CACP,QAAQ;CACR,MAAM;CACN,SAAS;CACT,OAAO;CACR;;;;;;;;;;;;;;;;;;;;;;;;AAyBD,SAAgB,MAAM,EAAE,SAAS,MAAM,SAAS,SAAyC;CAEvF,MAAM,mBAAmB,sBAAsB,SAAS,KAAK;CAE7D,MAAM,QAAkB,EAAE;AAE1B,KAAI,OAEF,OAAM,KAAK,gBAAgB,kBAAkB,MAAM,CAAC;AAItD,OAAM,KAAK,aAAa,kBAAkB,aAAa,iBAAiB,EAAE,OAAO,CAAC;AAElF,KAAI,OAEF,OAAM,KAAK,gBAAgB,kBAAkB,SAAS,CAAC;AAIzD,MAAK,MAAM,OAAO,KAChB,OAAM,KAAK,aAAa,kBAAkB,KAAK,OAAO,CAAC;AAGzD,KAAI,OAEF,OAAM,KAAK,gBAAgB,kBAAkB,SAAS,CAAC;AAGzD,QACE,oBAAC,QAAD;EAAM,cAAA;EAAW,eAAa;YAC3B,MAAM,KAAK,KAAK;EACZ,CAAA;;;;;AAOX,SAAS,sBACP,SACA,MACiD;AACjD,QAAO,QAAQ,KAAK,QAAQ;AAC1B,MAAI,IAAI,UAAU,KAAA,EAChB,QAAO;GAAE,GAAG;GAAK,gBAAgB,IAAI;GAAO;EAI9C,IAAI,WAAW,IAAI,OAAO;AAE1B,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,QAAQ,OAAO,IAAI,IAAI,QAAQ,GAAG;AACxC,cAAW,KAAK,IAAI,UAAU,MAAM,OAAO;;AAG7C,SAAO;GAAE,GAAG;GAAK,gBAAgB;GAAU;GAC3C;;;;;AAMJ,SAAS,aAAa,SAAmF;CACvG,MAAM,MAA+B,EAAE;AACvC,MAAK,MAAM,OAAO,QAChB,KAAI,IAAI,OAAO,IAAI;AAErB,QAAO;;;;;AAMT,SAAS,gBACP,SACA,UACQ;CACR,MAAM,OAAO,aAAa,QAAQ,IAAI,UAAU,aAAa,WAAW,IAAI,aAAa,IAAI;CAC7F,MAAM,QAAQ,aAAa,QAAQ,IAAI,WAAW,aAAa,WAAW,IAAI,cAAc,IAAI;CAChG,MAAM,OAAO,aAAa,QAAQ,IAAI,OAAO,aAAa,WAAW,IAAI,UAAU,IAAI;AAIvF,QAAO,OAFU,QAAQ,KAAK,QAAQ,IAAI,WAAW,OAAO,IAAI,iBAAiB,EAAE,CAAC,CAE7D,KAAK,KAAK,GAAG;;;;;AAMtC,SAAS,aACP,SACA,KACA,QACQ;CACR,MAAM,QAAQ,QAAQ,KAAK,QAAQ;AAEjC,SAAO,WADO,OAAO,IAAI,IAAI,QAAQ,GAAG,EACf,IAAI,gBAAgB,IAAI,SAAS,OAAO;GACjE;AAEF,KAAI,OACF,QAAO,IAAI,WAAW,MAAM,MAAM,KAAK,MAAM,IAAI,WAAW,IAAI,GAAG,MAAM,IAAI;AAG/E,QAAO,MAAM,KAAK,KAAK;;;;;AAMzB,SAAS,WAAW,OAAe,OAAe,OAA4C;AAE5F,KAAI,MAAM,SAAS,MACjB,QAAO,MAAM,MAAM,GAAG,QAAQ,EAAE,GAAG;CAIrC,MAAM,UAAU,QAAQ,MAAM;AAE9B,SAAQ,OAAR;EACE,KAAK,QACH,QAAO,IAAI,OAAO,QAAQ,GAAG;EAC/B,KAAK,UAAU;GACb,MAAM,UAAU,KAAK,MAAM,UAAU,EAAE;GACvC,MAAM,WAAW,UAAU;AAC3B,UAAO,IAAI,OAAO,QAAQ,GAAG,QAAQ,IAAI,OAAO,SAAS;;EAG3D,QACE,QAAO,QAAQ,IAAI,OAAO,QAAQ"}

package/dist/ui/image.d.mts

@@ -0,0 +1,2 @@
+import { a as isSixelSupported, c as encodeKittyImage, i as encodeSixel, l as isKittyGraphicsSupported, n as ImageProps, o as KittyImageOptions, r as SixelImageData, s as deleteKittyImage, t as Image } from "../index-p-wBs_wH.mjs";
+export { Image, ImageProps, KittyImageOptions, SixelImageData, deleteKittyImage, encodeKittyImage, encodeSixel, isKittyGraphicsSupported, isSixelSupported };

package/dist/ui/image.mjs

@@ -0,0 +1,2 @@
+import { a as encodeKittyImage, i as deleteKittyImage, n as encodeSixel, o as isKittyGraphicsSupported, r as isSixelSupported, t as Image } from "../image-Dx7gYjkq.mjs";
+export { Image, deleteKittyImage, encodeKittyImage, encodeSixel, isKittyGraphicsSupported, isSixelSupported };

package/dist/ui/input.d.mts

@@ -0,0 +1,184 @@
+import { _ as TextInputOptions, o as SelectOption, s as SelectProps, v as TextInputProps } from "../types-CDgkE-Rw.mjs";
+import React from "react";
+
+//#region packages/ag-react/src/ui/input/TextInput.d.ts
+/**
+ * Single-line text input component for React TUI apps
+ *
+ * This is a controlled component that renders the current input state.
+ * It does NOT handle keyboard input directly - that's the caller's responsibility
+ * (via useInput hook in Ink, or similar).
+ *
+ * @example
+ * ```tsx
+ * import { TextInput } from "@silvery/ag-react/ui/input";
+ * import { useInput } from "ink";
+ *
+ * function MyForm() {
+ *   const [value, setValue] = useState("");
+ *
+ *   useInput((input, key) => {
+ *     if (key.backspace || key.delete) {
+ *       setValue(v => v.slice(0, -1));
+ *     } else if (!key.ctrl && !key.meta && input) {
+ *       setValue(v => v + input);
+ *     }
+ *   });
+ *
+ *   return <TextInput value={value} onChange={setValue} placeholder="Type here..." />;
+ * }
+ *
+ * // With password masking
+ * <TextInput value={password} onChange={setPassword} mask="*" />
+ *
+ * // With autocomplete
+ * <TextInput
+ *   value={query}
+ *   onChange={setQuery}
+ *   autocomplete={["apple", "apricot", "avocado"]}
+ * />
+ * ```
+ */
+declare function TextInput({
+  value,
+  onChange,
+  placeholder,
+  mask,
+  autocomplete,
+  onAutocomplete,
+  onSubmit,
+  cursorPosition,
+  focused
+}: TextInputProps): React.ReactElement;
+/**
+ * Hook for managing text input state with autocomplete support
+ *
+ * @example
+ * ```tsx
+ * function SearchInput() {
+ *   const { value, displayValue, suggestion, handleInput, acceptSuggestion, clear } =
+ *     useTextInput({ autocomplete: ["apple", "banana", "cherry"] });
+ *
+ *   useInput((input, key) => {
+ *     if (key.tab && suggestion) {
+ *       acceptSuggestion();
+ *     } else {
+ *       handleInput(input, key);
+ *     }
+ *   });
+ *
+ *   return <Text>{displayValue}</Text>;
+ * }
+ * ```
+ */
+declare function useTextInput(options?: {
+  initialValue?: string;
+  mask?: string;
+  autocomplete?: string[];
+  onSubmit?: (value: string) => void;
+}): {
+  value: string;
+  setValue: (value: string) => void;
+  displayValue: string;
+  suggestion: string | undefined;
+  cursorPosition: number;
+  setCursorPosition: (pos: number) => void;
+  handleInput: (input: string, key: InputKey) => void;
+  acceptSuggestion: () => void;
+  clear: () => void;
+};
+/** Key object type (matches Ink's Key interface) */
+interface InputKey {
+  return?: boolean;
+  backspace?: boolean;
+  delete?: boolean;
+  leftArrow?: boolean;
+  rightArrow?: boolean;
+  upArrow?: boolean;
+  downArrow?: boolean;
+  tab?: boolean;
+  escape?: boolean;
+  ctrl?: boolean;
+  meta?: boolean;
+  shift?: boolean;
+  text?: string;
+}
+//#endregion
+//#region packages/ag-react/src/ui/input/Select.d.ts
+/**
+ * Scrollable single-choice selection list
+ *
+ * @example
+ * ```tsx
+ * import { Select } from "@silvery/ag-react/ui/input";
+ *
+ * function SettingsView() {
+ *   const [theme, setTheme] = useState("light");
+ *
+ *   return (
+ *     <Select
+ *       options={[
+ *         { label: "Light", value: "light" },
+ *         { label: "Dark", value: "dark" },
+ *         { label: "System", value: "system" },
+ *       ]}
+ *       value={theme}
+ *       onChange={setTheme}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function Select<T>({
+  options,
+  value,
+  onChange,
+  maxVisible,
+  highlightIndex: controlledHighlightIndex,
+  onHighlightChange
+}: SelectProps<T>): React.ReactElement;
+/**
+ * Hook for managing select state with keyboard navigation
+ *
+ * @example
+ * ```tsx
+ * function MySelect() {
+ *   const options = [
+ *     { label: "Option A", value: "a" },
+ *     { label: "Option B", value: "b" },
+ *   ];
+ *
+ *   const { highlightIndex, moveUp, moveDown, select, value } = useSelect({
+ *     options,
+ *     initialValue: "a",
+ *   });
+ *
+ *   useInput((input, key) => {
+ *     if (key.upArrow) moveUp();
+ *     if (key.downArrow) moveDown();
+ *     if (key.return) select();
+ *   });
+ *
+ *   return <Select options={options} value={value} highlightIndex={highlightIndex} />;
+ * }
+ * ```
+ */
+declare function useSelect<T>({
+  options,
+  initialValue,
+  onChange
+}: {
+  options: SelectOption<T>[];
+  initialValue?: T;
+  onChange?: (value: T) => void;
+}): {
+  value: T | undefined;
+  highlightIndex: number;
+  moveUp: () => void;
+  moveDown: () => void;
+  select: () => void;
+  setHighlightIndex: (index: number) => void;
+};
+//#endregion
+export { Select, type SelectOption, type SelectProps, TextInput, type TextInputOptions, type TextInputProps, useSelect, useTextInput };
+//# sourceMappingURL=input.d.mts.map

package/dist/ui/input.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.mts","names":[],"sources":["../../packages/ag-react/src/ui/input/TextInput.tsx","../../packages/ag-react/src/ui/input/Select.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4CgB,SAAA,CAAA;EACd,KAAA;EACA,QAAA;EACA,WAAA;EACA,IAAA;EACA,YAAA;EACA,cAAA;EACA,QAAA;EACA,cAAA;EACA;AAAA,GACC,cAAA,GAAiB,KAAA,CAAM,YAAA;AA2D1B;;;;;;;;;;;;;;;;;;;;;AAAA,iBAAgB,YAAA,CACd,OAAA;EACE,YAAA;EACA,IAAA;EACA,YAAA;EACA,QAAA,IAAY,KAAA;AAAA;EAGd,KAAA;EACA,QAAA,GAAW,KAAA;EACX,YAAA;EACA,UAAA;EACA,cAAA;EACA,iBAAA,GAAoB,GAAA;EACpB,WAAA,GAAc,KAAA,UAAe,GAAA,EAAK,QAAA;EAClC,gBAAA;EACA,KAAA;AAAA;;UA2EQ,QAAA;EACR,MAAA;EACA,SAAA;EACA,MAAA;EACA,SAAA;EACA,UAAA;EACA,OAAA;EACA,SAAA;EACA,GAAA;EACA,MAAA;EACA,IAAA;EACA,IAAA;EACA,KAAA;EACA,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCxLc,MAAA,GAAA,CAAA;EACd,OAAA;EACA,KAAA;EACA,QAAA;EACA,UAAA;EACA,cAAA,EAAgB,wBAAA;EAChB;AAAA,GACC,WAAA,CAAY,CAAA,IAAK,KAAA,CAAM,YAAA;;;;;;;;;;;;ADyE1B;;;;;;;;;;;;;;;iBCJgB,SAAA,GAAA,CAAA;EACd,OAAA;EACA,YAAA;EACA;AAAA;EAEA,OAAA,EAAS,YAAA,CAAa,CAAA;EACtB,YAAA,GAAe,CAAA;EACf,QAAA,IAAY,KAAA,EAAO,CAAA;AAAA;EAEnB,KAAA,EAAO,CAAA;EACP,cAAA;EACA,MAAA;EACA,QAAA;EACA,MAAA;EACA,iBAAA,GAAoB,KAAA;AAAA"}

package/dist/ui/input.mjs

@@ -0,0 +1,285 @@
+import { useCallback, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ag-react/src/ui/input/TextInput.tsx
+/**
+* React TextInput component for silvery/Ink TUI apps
+*/
+/**
+* Single-line text input component for React TUI apps
+*
+* This is a controlled component that renders the current input state.
+* It does NOT handle keyboard input directly - that's the caller's responsibility
+* (via useInput hook in Ink, or similar).
+*
+* @example
+* ```tsx
+* import { TextInput } from "@silvery/ag-react/ui/input";
+* import { useInput } from "ink";
+*
+* function MyForm() {
+*   const [value, setValue] = useState("");
+*
+*   useInput((input, key) => {
+*     if (key.backspace || key.delete) {
+*       setValue(v => v.slice(0, -1));
+*     } else if (!key.ctrl && !key.meta && input) {
+*       setValue(v => v + input);
+*     }
+*   });
+*
+*   return <TextInput value={value} onChange={setValue} placeholder="Type here..." />;
+* }
+*
+* // With password masking
+* <TextInput value={password} onChange={setPassword} mask="*" />
+*
+* // With autocomplete
+* <TextInput
+*   value={query}
+*   onChange={setQuery}
+*   autocomplete={["apple", "apricot", "avocado"]}
+* />
+* ```
+*/
+function TextInput({ value, onChange, placeholder, mask, autocomplete, onAutocomplete, onSubmit, cursorPosition, focused = true }) {
+	const displayValue = mask ? mask.repeat(value.length) : value;
+	const suggestion = getAutocompleteSuggestion(value, autocomplete);
+	const cursor = cursorPosition ?? value.length;
+	const beforeCursor = displayValue.slice(0, cursor);
+	const afterCursor = displayValue.slice(cursor);
+	const suggestionSuffix = suggestion ? suggestion.slice(value.length) : "";
+	const showPlaceholder = !value && placeholder;
+	return /* @__PURE__ */ jsx("span", {
+		"data-silvery-ui-text-input": true,
+		"data-focused": focused,
+		children: showPlaceholder ? /* @__PURE__ */ jsx("span", {
+			"data-color": "dim",
+			children: placeholder
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", { children: beforeCursor }),
+			focused && /* @__PURE__ */ jsx("span", {
+				"data-cursor": true,
+				"data-inverse": true,
+				children: afterCursor[0] || " "
+			}),
+			/* @__PURE__ */ jsx("span", { children: afterCursor.slice(1) }),
+			suggestionSuffix && /* @__PURE__ */ jsx("span", {
+				"data-color": "dim",
+				children: suggestionSuffix
+			})
+		] })
+	});
+}
+/**
+* Hook for managing text input state with autocomplete support
+*
+* @example
+* ```tsx
+* function SearchInput() {
+*   const { value, displayValue, suggestion, handleInput, acceptSuggestion, clear } =
+*     useTextInput({ autocomplete: ["apple", "banana", "cherry"] });
+*
+*   useInput((input, key) => {
+*     if (key.tab && suggestion) {
+*       acceptSuggestion();
+*     } else {
+*       handleInput(input, key);
+*     }
+*   });
+*
+*   return <Text>{displayValue}</Text>;
+* }
+* ```
+*/
+function useTextInput(options = {}) {
+	const [value, setValue] = useState(options.initialValue ?? "");
+	const [cursorPosition, setCursorPosition] = useState(value.length);
+	const displayValue = options.mask ? options.mask.repeat(value.length) : value;
+	const suggestion = getAutocompleteSuggestion(value, options.autocomplete);
+	return {
+		value,
+		setValue,
+		displayValue,
+		suggestion,
+		cursorPosition,
+		setCursorPosition,
+		handleInput: useCallback((input, key) => {
+			if (key.return) {
+				options.onSubmit?.(value);
+				return;
+			}
+			if (key.backspace || key.delete) {
+				if (cursorPosition > 0) {
+					setValue((v) => v.slice(0, cursorPosition - 1) + v.slice(cursorPosition));
+					setCursorPosition((p) => Math.max(0, p - 1));
+				}
+				return;
+			}
+			if (key.leftArrow) {
+				setCursorPosition((p) => Math.max(0, p - 1));
+				return;
+			}
+			if (key.rightArrow) {
+				setCursorPosition((p) => Math.min(value.length, p + 1));
+				return;
+			}
+			if (key.ctrl || !input) return;
+			const char = key.text ?? input;
+			if (key.meta && !char) return;
+			setValue((v) => v.slice(0, cursorPosition) + char + v.slice(cursorPosition));
+			setCursorPosition((p) => p + char.length);
+		}, [
+			value,
+			cursorPosition,
+			options.onSubmit
+		]),
+		acceptSuggestion: useCallback(() => {
+			if (suggestion) {
+				setValue(suggestion);
+				setCursorPosition(suggestion.length);
+			}
+		}, [suggestion]),
+		clear: useCallback(() => {
+			setValue("");
+			setCursorPosition(0);
+		}, [])
+	};
+}
+/**
+* Find a matching autocomplete suggestion for the current input
+*/
+function getAutocompleteSuggestion(value, autocomplete) {
+	if (!value || !autocomplete?.length) return;
+	const lowerValue = value.toLowerCase();
+	return autocomplete.find((item) => item.toLowerCase().startsWith(lowerValue) && item.length > value.length);
+}
+//#endregion
+//#region packages/ag-react/src/ui/input/Select.tsx
+/**
+* React Select component for silvery/Ink TUI apps
+*
+* Single-choice selection list with keyboard navigation.
+*/
+/**
+* Scrollable single-choice selection list
+*
+* @example
+* ```tsx
+* import { Select } from "@silvery/ag-react/ui/input";
+*
+* function SettingsView() {
+*   const [theme, setTheme] = useState("light");
+*
+*   return (
+*     <Select
+*       options={[
+*         { label: "Light", value: "light" },
+*         { label: "Dark", value: "dark" },
+*         { label: "System", value: "system" },
+*       ]}
+*       value={theme}
+*       onChange={setTheme}
+*     />
+*   );
+* }
+* ```
+*/
+function Select({ options, value, onChange, maxVisible = 10, highlightIndex: controlledHighlightIndex, onHighlightChange }) {
+	const selectedIndex = options.findIndex((opt) => opt.value === value);
+	const [internalHighlightIndex, setInternalHighlightIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+	const highlightIndex = controlledHighlightIndex ?? internalHighlightIndex;
+	const scrollOffset = Math.max(0, Math.min(highlightIndex - Math.floor(maxVisible / 2), options.length - maxVisible));
+	const visibleOptions = options.slice(scrollOffset, scrollOffset + maxVisible);
+	const hasMoreAbove = scrollOffset > 0;
+	const hasMoreBelow = scrollOffset + maxVisible < options.length;
+	useEffect(() => {
+		if (controlledHighlightIndex === void 0 && selectedIndex >= 0) setInternalHighlightIndex(selectedIndex);
+	}, [selectedIndex, controlledHighlightIndex]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-silvery-select": true,
+		children: [
+			hasMoreAbove && /* @__PURE__ */ jsx("div", {
+				"data-silvery-select-scroll-indicator": "up",
+				children: "..."
+			}),
+			visibleOptions.map((option, visibleIdx) => {
+				const actualIndex = scrollOffset + visibleIdx;
+				const isSelected = option.value === value;
+				const isHighlighted = actualIndex === highlightIndex;
+				return /* @__PURE__ */ jsxs("div", {
+					"data-silvery-select-option": true,
+					"data-selected": isSelected,
+					"data-highlighted": isHighlighted,
+					children: [/* @__PURE__ */ jsx("span", {
+						"data-silvery-select-indicator": true,
+						children: isSelected ? ">" : " "
+					}), /* @__PURE__ */ jsx("span", {
+						"data-silvery-select-label": true,
+						children: option.label
+					})]
+				}, actualIndex);
+			}),
+			hasMoreBelow && /* @__PURE__ */ jsx("div", {
+				"data-silvery-select-scroll-indicator": "down",
+				children: "..."
+			})
+		]
+	});
+}
+/**
+* Hook for managing select state with keyboard navigation
+*
+* @example
+* ```tsx
+* function MySelect() {
+*   const options = [
+*     { label: "Option A", value: "a" },
+*     { label: "Option B", value: "b" },
+*   ];
+*
+*   const { highlightIndex, moveUp, moveDown, select, value } = useSelect({
+*     options,
+*     initialValue: "a",
+*   });
+*
+*   useInput((input, key) => {
+*     if (key.upArrow) moveUp();
+*     if (key.downArrow) moveDown();
+*     if (key.return) select();
+*   });
+*
+*   return <Select options={options} value={value} highlightIndex={highlightIndex} />;
+* }
+* ```
+*/
+function useSelect({ options, initialValue, onChange }) {
+	const initialIndex = initialValue !== void 0 ? options.findIndex((opt) => opt.value === initialValue) : 0;
+	const [highlightIndex, setHighlightIndex] = useState(Math.max(0, initialIndex));
+	const [value, setValue] = useState(initialValue);
+	return {
+		value,
+		highlightIndex,
+		moveUp: useCallback(() => {
+			setHighlightIndex((i) => Math.max(0, i - 1));
+		}, []),
+		moveDown: useCallback(() => {
+			setHighlightIndex((i) => Math.min(options.length - 1, i + 1));
+		}, [options.length]),
+		select: useCallback(() => {
+			const option = options[highlightIndex];
+			if (option) {
+				setValue(option.value);
+				onChange?.(option.value);
+			}
+		}, [
+			highlightIndex,
+			options,
+			onChange
+		]),
+		setHighlightIndex
+	};
+}
+//#endregion
+export { Select, TextInput, useSelect, useTextInput };
+
+//# sourceMappingURL=input.mjs.map

package/dist/ui/input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.mjs","names":[],"sources":["../../packages/ag-react/src/ui/input/TextInput.tsx","../../packages/ag-react/src/ui/input/Select.tsx"],"sourcesContent":["/**\n * React TextInput component for silvery/Ink TUI apps\n */\n\nimport React, { useState, useCallback } from \"react\"\nimport type { TextInputProps } from \"../types.js\"\n\n/**\n * Single-line text input component for React TUI apps\n *\n * This is a controlled component that renders the current input state.\n * It does NOT handle keyboard input directly - that's the caller's responsibility\n * (via useInput hook in Ink, or similar).\n *\n * @example\n * ```tsx\n * import { TextInput } from \"@silvery/ag-react/ui/input\";\n * import { useInput } from \"ink\";\n *\n * function MyForm() {\n *   const [value, setValue] = useState(\"\");\n *\n *   useInput((input, key) => {\n *     if (key.backspace || key.delete) {\n *       setValue(v => v.slice(0, -1));\n *     } else if (!key.ctrl && !key.meta && input) {\n *       setValue(v => v + input);\n *     }\n *   });\n *\n *   return <TextInput value={value} onChange={setValue} placeholder=\"Type here...\" />;\n * }\n *\n * // With password masking\n * <TextInput value={password} onChange={setPassword} mask=\"*\" />\n *\n * // With autocomplete\n * <TextInput\n *   value={query}\n *   onChange={setQuery}\n *   autocomplete={[\"apple\", \"apricot\", \"avocado\"]}\n * />\n * ```\n */\nexport function TextInput({\n  value,\n  onChange,\n  placeholder,\n  mask,\n  autocomplete,\n  onAutocomplete,\n  onSubmit,\n  cursorPosition,\n  focused = true,\n}: TextInputProps): React.ReactElement {\n  // Calculate display value (masked or plain)\n  const displayValue = mask ? mask.repeat(value.length) : value\n\n  // Find matching autocomplete suggestion\n  const suggestion = getAutocompleteSuggestion(value, autocomplete)\n\n  // Cursor position defaults to end of input\n  const cursor = cursorPosition ?? value.length\n\n  // Build the display: value + cursor + suggestion suffix\n  const beforeCursor = displayValue.slice(0, cursor)\n  const afterCursor = displayValue.slice(cursor)\n  const suggestionSuffix = suggestion ? suggestion.slice(value.length) : \"\"\n\n  // Show placeholder if empty and not focused or no value\n  const showPlaceholder = !value && placeholder\n\n  return (\n    <span data-silvery-ui-text-input data-focused={focused}>\n      {showPlaceholder ? (\n        <span data-color=\"dim\">{placeholder}</span>\n      ) : (\n        <>\n          <span>{beforeCursor}</span>\n          {focused && (\n            <span data-cursor data-inverse>\n              {afterCursor[0] || \" \"}\n            </span>\n          )}\n          <span>{afterCursor.slice(1)}</span>\n          {suggestionSuffix && <span data-color=\"dim\">{suggestionSuffix}</span>}\n        </>\n      )}\n    </span>\n  )\n}\n\n/**\n * Hook for managing text input state with autocomplete support\n *\n * @example\n * ```tsx\n * function SearchInput() {\n *   const { value, displayValue, suggestion, handleInput, acceptSuggestion, clear } =\n *     useTextInput({ autocomplete: [\"apple\", \"banana\", \"cherry\"] });\n *\n *   useInput((input, key) => {\n *     if (key.tab && suggestion) {\n *       acceptSuggestion();\n *     } else {\n *       handleInput(input, key);\n *     }\n *   });\n *\n *   return <Text>{displayValue}</Text>;\n * }\n * ```\n */\nexport function useTextInput(\n  options: {\n    initialValue?: string\n    mask?: string\n    autocomplete?: string[]\n    onSubmit?: (value: string) => void\n  } = {},\n): {\n  value: string\n  setValue: (value: string) => void\n  displayValue: string\n  suggestion: string | undefined\n  cursorPosition: number\n  setCursorPosition: (pos: number) => void\n  handleInput: (input: string, key: InputKey) => void\n  acceptSuggestion: () => void\n  clear: () => void\n} {\n  const [value, setValue] = useState(options.initialValue ?? \"\")\n  const [cursorPosition, setCursorPosition] = useState(value.length)\n\n  const displayValue = options.mask ? options.mask.repeat(value.length) : value\n\n  const suggestion = getAutocompleteSuggestion(value, options.autocomplete)\n\n  const handleInput = useCallback(\n    (input: string, key: InputKey) => {\n      if (key.return) {\n        options.onSubmit?.(value)\n        return\n      }\n\n      if (key.backspace || key.delete) {\n        if (cursorPosition > 0) {\n          setValue((v) => v.slice(0, cursorPosition - 1) + v.slice(cursorPosition))\n          setCursorPosition((p) => Math.max(0, p - 1))\n        }\n        return\n      }\n\n      if (key.leftArrow) {\n        setCursorPosition((p) => Math.max(0, p - 1))\n        return\n      }\n\n      if (key.rightArrow) {\n        setCursorPosition((p) => Math.min(value.length, p + 1))\n        return\n      }\n\n      // Ignore control characters (but allow opt+key composed chars via key.text)\n      if (key.ctrl || !input) {\n        return\n      }\n\n      // Insert the actual typed character (pre-normalization), not the keybinding key.\n      // E.g., Shift+3 should insert '#', not '3'.\n      const char = key.text ?? input\n      if (key.meta && !char) return // opt+key with no text output\n      setValue((v) => v.slice(0, cursorPosition) + char + v.slice(cursorPosition))\n      setCursorPosition((p) => p + char.length)\n    },\n    [value, cursorPosition, options.onSubmit],\n  )\n\n  const acceptSuggestion = useCallback(() => {\n    if (suggestion) {\n      setValue(suggestion)\n      setCursorPosition(suggestion.length)\n    }\n  }, [suggestion])\n\n  const clear = useCallback(() => {\n    setValue(\"\")\n    setCursorPosition(0)\n  }, [])\n\n  return {\n    value,\n    setValue,\n    displayValue,\n    suggestion,\n    cursorPosition,\n    setCursorPosition,\n    handleInput,\n    acceptSuggestion,\n    clear,\n  }\n}\n\n/** Key object type (matches Ink's Key interface) */\ninterface InputKey {\n  return?: boolean\n  backspace?: boolean\n  delete?: boolean\n  leftArrow?: boolean\n  rightArrow?: boolean\n  upArrow?: boolean\n  downArrow?: boolean\n  tab?: boolean\n  escape?: boolean\n  ctrl?: boolean\n  meta?: boolean\n  shift?: boolean\n  text?: string\n}\n\n/**\n * Find a matching autocomplete suggestion for the current input\n */\nfunction getAutocompleteSuggestion(value: string, autocomplete?: string[]): string | undefined {\n  if (!value || !autocomplete?.length) {\n    return undefined\n  }\n\n  const lowerValue = value.toLowerCase()\n  return autocomplete.find((item) => item.toLowerCase().startsWith(lowerValue) && item.length > value.length)\n}\n","/**\n * React Select component for silvery/Ink TUI apps\n *\n * Single-choice selection list with keyboard navigation.\n */\n\nimport React, { useState, useEffect, useCallback } from \"react\"\nimport type { SelectProps, SelectOption } from \"../types.js\"\n\n/**\n * Scrollable single-choice selection list\n *\n * @example\n * ```tsx\n * import { Select } from \"@silvery/ag-react/ui/input\";\n *\n * function SettingsView() {\n *   const [theme, setTheme] = useState(\"light\");\n *\n *   return (\n *     <Select\n *       options={[\n *         { label: \"Light\", value: \"light\" },\n *         { label: \"Dark\", value: \"dark\" },\n *         { label: \"System\", value: \"system\" },\n *       ]}\n *       value={theme}\n *       onChange={setTheme}\n *     />\n *   );\n * }\n * ```\n */\nexport function Select<T>({\n  options,\n  value,\n  onChange,\n  maxVisible = 10,\n  highlightIndex: controlledHighlightIndex,\n  onHighlightChange,\n}: SelectProps<T>): React.ReactElement {\n  // Find the index of the currently selected value\n  const selectedIndex = options.findIndex((opt) => opt.value === value)\n\n  // Internal highlight state (for uncontrolled mode)\n  const [internalHighlightIndex, setInternalHighlightIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0)\n\n  // Use controlled or internal highlight index\n  const highlightIndex = controlledHighlightIndex ?? internalHighlightIndex\n\n  // Calculate scroll window\n  const scrollOffset = Math.max(0, Math.min(highlightIndex - Math.floor(maxVisible / 2), options.length - maxVisible))\n  const visibleOptions = options.slice(scrollOffset, scrollOffset + maxVisible)\n  const hasMoreAbove = scrollOffset > 0\n  const hasMoreBelow = scrollOffset + maxVisible < options.length\n\n  // Sync internal highlight when value changes externally\n  useEffect(() => {\n    if (controlledHighlightIndex === undefined && selectedIndex >= 0) {\n      setInternalHighlightIndex(selectedIndex)\n    }\n  }, [selectedIndex, controlledHighlightIndex])\n\n  return (\n    <div data-silvery-select>\n      {hasMoreAbove && <div data-silvery-select-scroll-indicator=\"up\">...</div>}\n      {visibleOptions.map((option, visibleIdx) => {\n        const actualIndex = scrollOffset + visibleIdx\n        const isSelected = option.value === value\n        const isHighlighted = actualIndex === highlightIndex\n\n        return (\n          <div key={actualIndex} data-silvery-select-option data-selected={isSelected} data-highlighted={isHighlighted}>\n            <span data-silvery-select-indicator>{isSelected ? \">\" : \" \"}</span>\n            <span data-silvery-select-label>{option.label}</span>\n          </div>\n        )\n      })}\n      {hasMoreBelow && <div data-silvery-select-scroll-indicator=\"down\">...</div>}\n    </div>\n  )\n}\n\n/**\n * Hook for managing select state with keyboard navigation\n *\n * @example\n * ```tsx\n * function MySelect() {\n *   const options = [\n *     { label: \"Option A\", value: \"a\" },\n *     { label: \"Option B\", value: \"b\" },\n *   ];\n *\n *   const { highlightIndex, moveUp, moveDown, select, value } = useSelect({\n *     options,\n *     initialValue: \"a\",\n *   });\n *\n *   useInput((input, key) => {\n *     if (key.upArrow) moveUp();\n *     if (key.downArrow) moveDown();\n *     if (key.return) select();\n *   });\n *\n *   return <Select options={options} value={value} highlightIndex={highlightIndex} />;\n * }\n * ```\n */\nexport function useSelect<T>({\n  options,\n  initialValue,\n  onChange,\n}: {\n  options: SelectOption<T>[]\n  initialValue?: T\n  onChange?: (value: T) => void\n}): {\n  value: T | undefined\n  highlightIndex: number\n  moveUp: () => void\n  moveDown: () => void\n  select: () => void\n  setHighlightIndex: (index: number) => void\n} {\n  const initialIndex = initialValue !== undefined ? options.findIndex((opt) => opt.value === initialValue) : 0\n\n  const [highlightIndex, setHighlightIndex] = useState(Math.max(0, initialIndex))\n  const [value, setValue] = useState<T | undefined>(initialValue)\n\n  const moveUp = useCallback(() => {\n    setHighlightIndex((i) => Math.max(0, i - 1))\n  }, [])\n\n  const moveDown = useCallback(() => {\n    setHighlightIndex((i) => Math.min(options.length - 1, i + 1))\n  }, [options.length])\n\n  const select = useCallback(() => {\n    const option = options[highlightIndex]\n    if (option) {\n      setValue(option.value)\n      onChange?.(option.value)\n    }\n  }, [highlightIndex, options, onChange])\n\n  return {\n    value,\n    highlightIndex,\n    moveUp,\n    moveDown,\n    select,\n    setHighlightIndex,\n  }\n}\n"],"mappings":"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"}