@visulima/tui 1.0.0-alpha.2 → 1.0.0-alpha.3

package/dist/packem_shared/Canvas-COttmLPX.js

@@ -0,0 +1,246 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, Fragment } from 'react';
+import { c as colorize } from './colorize-88_Vk8cn.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const STYLE_BOLD = Math.trunc(1);
+const STYLE_DIM = 1 << 1;
+const SPACE_CODEPOINT = 32;
+const EMPTY_COLOR = 0;
+const createColorCoders = () => {
+  const encoded = /* @__PURE__ */ new Map();
+  const decoded = [void 0];
+  return {
+    decode: (id) => decoded[id],
+    encode: (color) => {
+      if (color === void 0 || color === null) {
+        return EMPTY_COLOR;
+      }
+      const key = typeof color === "number" ? `n:${color}` : `s:${color}`;
+      const existing = encoded.get(key);
+      if (existing !== void 0) {
+        return existing;
+      }
+      const next = decoded.length;
+      decoded.push(color);
+      encoded.set(key, next);
+      return next;
+    }
+  };
+};
+const V_BAR_GLYPHS = [9601, 9602, 9603, 9604, 9605, 9606, 9607, 9608];
+const H_BAR_GLYPHS = [9615, 9614, 9613, 9612, 9611, 9610, 9609, 9608];
+const FULL_BLOCK = 9608;
+const flagsFromStyle = (style) => {
+  if (!style) {
+    return 0;
+  }
+  let flags = 0;
+  if (style.bold) {
+    flags |= STYLE_BOLD;
+  }
+  if (style.dim) {
+    flags |= STYLE_DIM;
+  }
+  return flags;
+};
+const toCodepoint = (char) => {
+  if (typeof char === "number") {
+    return char;
+  }
+  return char.codePointAt(0) ?? SPACE_CODEPOINT;
+};
+const createCanvasBuffer = (width, height) => {
+  const cells = Math.max(0, width * height);
+  const chars = new Uint32Array(cells);
+  const styles = new Uint32Array(cells);
+  const fg = new Int32Array(cells);
+  const bg = new Int32Array(cells);
+  const dirty = new Uint8Array(height);
+  const { decode, encode } = createColorCoders();
+  chars.fill(SPACE_CODEPOINT);
+  const markDirty = (y) => {
+    if (y >= 0 && y < height) {
+      dirty[y] = 1;
+    }
+  };
+  const setCellImpl = (x, y, char, style) => {
+    if (x < 0 || x >= width || y < 0 || y >= height) {
+      return;
+    }
+    const index = y * width + x;
+    const codepoint = toCodepoint(char);
+    const fgId = encode(style?.color);
+    const bgId = encode(style?.background);
+    const flags = flagsFromStyle(style);
+    if (chars[index] === codepoint && styles[index] === flags && fg[index] === fgId && bg[index] === bgId) {
+      return;
+    }
+    chars[index] = codepoint;
+    styles[index] = flags;
+    fg[index] = fgId;
+    bg[index] = bgId;
+    dirty[y] = 1;
+  };
+  const context = {
+    clear: () => {
+      chars.fill(SPACE_CODEPOINT);
+      styles.fill(0);
+      fg.fill(0);
+      bg.fill(0);
+      dirty.fill(1);
+    },
+    drawHBar: (x, y, w, fillRatio, style) => {
+      if (w <= 0 || y < 0 || y >= height) {
+        return;
+      }
+      const ratio = Math.max(0, Math.min(1, fillRatio));
+      const total = w * H_BAR_GLYPHS.length;
+      const filled = Math.round(ratio * total);
+      const fullChars = Math.floor(filled / H_BAR_GLYPHS.length);
+      const remainder = filled % H_BAR_GLYPHS.length;
+      for (let column = 0; column < w; column += 1) {
+        const px = x + column;
+        if (column < fullChars) {
+          setCellImpl(px, y, FULL_BLOCK, style);
+        } else if (column === fullChars && remainder > 0) {
+          setCellImpl(px, y, H_BAR_GLYPHS[remainder - 1], style);
+        } else {
+          setCellImpl(px, y, SPACE_CODEPOINT, style);
+        }
+      }
+      markDirty(y);
+    },
+    drawRect: (x, y, w, h, char, style) => {
+      if (w <= 0 || h <= 0) {
+        return;
+      }
+      const codepoint = toCodepoint(char);
+      for (let dy = 0; dy < h; dy += 1) {
+        for (let dx = 0; dx < w; dx += 1) {
+          setCellImpl(x + dx, y + dy, codepoint, style);
+        }
+        markDirty(y + dy);
+      }
+    },
+    drawText: (x, y, text, style) => {
+      if (y < 0 || y >= height || text.length === 0) {
+        return;
+      }
+      let column = 0;
+      for (const char of text) {
+        setCellImpl(x + column, y, char, style);
+        column += 1;
+      }
+      markDirty(y);
+    },
+    drawVBar: (x, y, h, fillRatio, style) => {
+      if (h <= 0 || x < 0 || x >= width) {
+        return;
+      }
+      const ratio = Math.max(0, Math.min(1, fillRatio));
+      const total = h * V_BAR_GLYPHS.length;
+      const filled = Math.round(ratio * total);
+      const fullRows = Math.floor(filled / V_BAR_GLYPHS.length);
+      const remainder = filled % V_BAR_GLYPHS.length;
+      for (let row = 0; row < h; row += 1) {
+        const distanceFromBottom = h - row - 1;
+        const py = y + row;
+        if (distanceFromBottom < fullRows) {
+          setCellImpl(x, py, FULL_BLOCK, style);
+        } else if (distanceFromBottom === fullRows && remainder > 0) {
+          setCellImpl(x, py, V_BAR_GLYPHS[remainder - 1], style);
+        } else {
+          setCellImpl(x, py, SPACE_CODEPOINT, style);
+        }
+        markDirty(py);
+      }
+    },
+    height,
+    setCell: setCellImpl,
+    width
+  };
+  return {
+    bg,
+    chars,
+    colorDecoder: decode,
+    context,
+    dirty,
+    fg,
+    height,
+    styles,
+    width
+  };
+};
+const serializeRow = (buffer, row) => {
+  const { bg, chars, colorDecoder, fg, styles, width } = buffer;
+  const base = row * width;
+  let output = "";
+  let spanStart = 0;
+  let spanStyles = styles[base];
+  let spanFg = fg[base];
+  let spanBg = bg[base];
+  const flush = (end) => {
+    let text = "";
+    for (let index = spanStart; index < end; index += 1) {
+      text += String.fromCodePoint(chars[base + index]);
+    }
+    const fgColor = colorDecoder(spanFg);
+    const bgColor = colorDecoder(spanBg);
+    let rendered = text;
+    if (fgColor !== void 0 && fgColor !== null) {
+      rendered = colorize(rendered, typeof fgColor === "number" ? String(fgColor) : fgColor, "foreground");
+    }
+    if (bgColor !== void 0 && bgColor !== null) {
+      rendered = colorize(rendered, typeof bgColor === "number" ? String(bgColor) : bgColor, "background");
+    }
+    if ((spanStyles & STYLE_BOLD) !== 0) {
+      rendered = `\x1B[1m${rendered}\x1B[22m`;
+    }
+    if ((spanStyles & STYLE_DIM) !== 0) {
+      rendered = `\x1B[2m${rendered}\x1B[22m`;
+    }
+    output += rendered;
+  };
+  for (let column = 1; column < width; column += 1) {
+    const nextStyles = styles[base + column];
+    const nextFg = fg[base + column];
+    const nextBg = bg[base + column];
+    if (nextStyles !== spanStyles || nextFg !== spanFg || nextBg !== spanBg) {
+      flush(column);
+      spanStart = column;
+      spanStyles = nextStyles;
+      spanFg = nextFg;
+      spanBg = nextBg;
+    }
+  }
+  flush(width);
+  return output;
+};
+
+function Canvas({ draw, height, version, width }) {
+  const bufferRef = useRef(void 0);
+  const rowCacheRef = useRef(void 0);
+  if (bufferRef.current?.width !== width || bufferRef.current.height !== height) {
+    bufferRef.current = createCanvasBuffer(width, height);
+    rowCacheRef.current = { hasRendered: false, lines: new Array(height).fill("") };
+  }
+  const buffer = bufferRef.current;
+  const cache = rowCacheRef.current;
+  const rows = useMemo(() => {
+    draw(buffer.context);
+    for (let row = 0; row < buffer.height; row += 1) {
+      if (cache.hasRendered && buffer.dirty[row] === 0) {
+        continue;
+      }
+      cache.lines[row] = serializeRow(buffer, row);
+      buffer.dirty[row] = 0;
+    }
+    cache.hasRendered = true;
+    return [...cache.lines];
+  }, [version, width, height]);
+  return jsx(Box, { flexDirection: "column", flexShrink: 0, height, width, children: rows.map((line, index) => jsx(Fragment, { children: jsx(Text, { wrap: "truncate-end", children: line }) }, index)) });
+}
+
+export { Canvas as default };

package/dist/packem_shared/Card-D3tGkNCm.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Divider from './Divider-DocXIqNn.js';
+import Text from './Text-CtUwV89_.js';
+
+function Card({ borderColor, borderStyle = "round", children, footer, headerRight, subtitle, title, titleColor, width }) {
+  const hasHeader = title !== void 0 || subtitle !== void 0 || headerRight !== void 0;
+  return jsxs(Box, { borderColor, borderStyle, flexDirection: "column", paddingX: 1, width, children: [
+    hasHeader ? jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+      jsxs(Box, { justifyContent: "space-between", children: [
+        jsx(Box, { children: title === void 0 ? void 0 : jsx(Text, { bold: true, color: titleColor, children: title }) }),
+        headerRight === void 0 ? void 0 : jsx(Box, { children: headerRight })
+      ] }),
+      subtitle === void 0 ? void 0 : jsx(Text, { dimColor: true, children: subtitle })
+    ] }) : void 0,
+    jsx(Box, { flexDirection: "column", children }),
+    footer === void 0 ? void 0 : jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+      jsx(Divider, { dimColor: true, length: typeof width === "number" ? Math.max(1, width - 4) : void 0 }),
+      jsx(Box, { marginTop: 1, children: footer })
+    ] })
+  ] });
+}
+
+export { Card as default };

package/dist/packem_shared/Checkbox-Dpy_4Lws.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import useFocus from './useFocus-DLoGQJd9.js';
+import useInput from './useInput-DKZbqMRc.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const CHECKED_ICON = "☒";
+const UNCHECKED_ICON = "☐";
+function Checkbox({
+  accentColor = "blue",
+  autoFocus = false,
+  children,
+  defaultChecked = false,
+  isChecked,
+  isDisabled = false,
+  onChange
+}) {
+  const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const checked = isChecked ?? internalChecked;
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (!isFocused) {
+          return;
+        }
+        if (key.return || input === " ") {
+          const next = !checked;
+          if (isChecked === void 0) {
+            setInternalChecked(next);
+          }
+          onChange?.(next);
+        }
+      },
+      [isFocused, checked, isChecked, onChange]
+    ),
+    { isActive: !isDisabled && isFocused }
+  );
+  return jsxs(Box, { gap: 1, children: [
+    jsxs(Text, { color: isFocused ? accentColor : void 0, dimColor: isDisabled, children: [
+      isFocused ? "▸ " : "  ",
+      checked ? CHECKED_ICON : UNCHECKED_ICON
+    ] }),
+    children === void 0 ? void 0 : jsx(Text, { color: isFocused ? accentColor : void 0, dimColor: isDisabled, children })
+  ] });
+}
+
+export { Checkbox as default };

package/dist/packem_shared/{Code-DjQvPBD9.js → Code-CwzzbsLx.js}

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
-import { r as resolveLanguage, i as isLanguageSupported, g as getHighlighter, a as getCachedTokens, t as tokenLinesToElements } from './token-to-elements-BRFl_rzw.js';
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
+import { r as resolveLanguage, i as isLanguageSupported, g as getHighlighter, a as getCachedTokens, t as tokenLinesToElements } from './token-to-elements-CK4s8MJd.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
 
 function Code({ code, highlightLines, language, showLineNumbers = false, startLine = 1, theme = "github-dark-default" }) {
   const [tokens, setTokens] = useState(null);

package/dist/packem_shared/Collapsible-BMDrXf5C.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import useFocus from './useFocus-DLoGQJd9.js';
+import useInput from './useInput-DKZbqMRc.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+function Collapsible({
+  accentColor = "blue",
+  autoFocus = false,
+  children,
+  defaultOpen = false,
+  isDisabled = false,
+  isOpen,
+  onToggle,
+  title
+}) {
+  const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });
+  const [internal, setInternal] = useState(defaultOpen);
+  const open = isOpen ?? internal;
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (key.return || input === " ") {
+          const next = !open;
+          if (isOpen === void 0) {
+            setInternal(next);
+          }
+          onToggle?.(next);
+        }
+      },
+      [open, isOpen, onToggle]
+    ),
+    { isActive: !isDisabled && isFocused }
+  );
+  return jsxs(Box, { flexDirection: "column", children: [
+    jsxs(Box, { children: [
+      jsx(Text, { color: isFocused ? accentColor : void 0, dimColor: isDisabled, children: open ? "▼ " : "▶ " }),
+      jsx(Text, { bold: isFocused, color: isFocused ? accentColor : void 0, dimColor: isDisabled, children: title })
+    ] }),
+    open ? jsx(Box, { flexDirection: "column", marginLeft: 2, children }) : void 0
+  ] });
+}
+
+export { Collapsible as default };

package/dist/packem_shared/CommandBlock-jdOGJPjY.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Spinner from './Spinner-BcO5BCAa.js';
+import Text from './Text-CtUwV89_.js';
+
+const STATUS_COLOR = {
+  error: "red",
+  idle: "gray",
+  running: "cyan",
+  success: "green"
+};
+const formatDuration = (ms) => {
+  if (ms < 1e3) {
+    return `${Math.round(ms)}ms`;
+  }
+  return `${(ms / 1e3).toFixed(2)}s`;
+};
+const resolveStatusIcon = (status) => {
+  if (status === "running") {
+    return jsx(Spinner, { type: "dots" });
+  }
+  const ICONS = {
+    error: "✖",
+    idle: "$",
+    success: "✔"
+  };
+  return ICONS[status];
+};
+const truncateOutput = (output, maxRows) => {
+  if (!Number.isFinite(maxRows)) {
+    return output;
+  }
+  const rows = output.split("\n");
+  if (rows.length <= maxRows) {
+    return output;
+  }
+  const kept = rows.slice(0, maxRows).join("\n");
+  const hidden = rows.length - maxRows;
+  return `${kept}
+… ${hidden} more line${hidden === 1 ? "" : "s"}`;
+};
+function CommandBlock({ command, cwd, durationMs, exitCode, maxOutputRows = 12, output, status = "idle" }) {
+  const color = STATUS_COLOR[status];
+  const statusIcon = resolveStatusIcon(status);
+  const trailing = [];
+  if (durationMs !== void 0) {
+    trailing.push(
+      jsxs(Text, { dimColor: true, children: [
+        " ",
+        formatDuration(durationMs)
+      ] }, "duration")
+    );
+  }
+  if (exitCode !== void 0 && status !== "running") {
+    trailing.push(
+      jsxs(Text, { color: exitCode === 0 ? "green" : "red", children: [
+        " ",
+        "exit",
+        " ",
+        exitCode
+      ] }, "exit")
+    );
+  }
+  return jsxs(Box, { borderColor: color, borderStyle: "round", flexDirection: "column", paddingX: 1, children: [
+    jsxs(Box, { children: [
+      jsx(Text, { color, children: statusIcon }),
+      jsx(Text, { children: " " }),
+      jsx(Box, { flexGrow: 1, flexShrink: 1, minWidth: 0, children: jsx(Text, { bold: true, wrap: "truncate-end", children: command }) }),
+      cwd === void 0 ? void 0 : jsxs(Text, { dimColor: true, children: [
+        " ",
+        "@",
+        cwd
+      ] }),
+      trailing.length === 0 ? void 0 : jsx(Box, { flexShrink: 0, children: trailing })
+    ] }),
+    output === void 0 ? void 0 : jsx(Box, { flexDirection: "column", marginTop: 1, children: typeof output === "string" ? jsx(Text, { children: truncateOutput(output, maxOutputRows) }) : output })
+  ] });
+}
+
+export { CommandBlock as default };

package/dist/packem_shared/CommandPalette-B5IfUQwi.js

@@ -0,0 +1,146 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import useFocus from './useFocus-DLoGQJd9.js';
+import useInput from './useInput-DKZbqMRc.js';
+import { i as isInsertableInput } from './input-utils-ViAEXa0Z.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const scoreCommand = (query, command) => {
+  if (query.length === 0) {
+    return 1;
+  }
+  const haystacks = [command.label, command.description ?? "", ...command.keywords ?? []].map((text) => text.toLowerCase()).filter((text) => text.length > 0);
+  const needle = query.toLowerCase();
+  let best = 0;
+  for (const haystack of haystacks) {
+    if (haystack.includes(needle)) {
+      const index = haystack.indexOf(needle);
+      best = Math.max(best, 100 - index);
+      continue;
+    }
+    let haystackIndex = 0;
+    let matched = 0;
+    for (const char of needle) {
+      const found = haystack.indexOf(char, haystackIndex);
+      if (found === -1) {
+        matched = 0;
+        break;
+      }
+      matched += 1;
+      haystackIndex = found + 1;
+    }
+    if (matched === needle.length) {
+      best = Math.max(best, 20);
+    }
+  }
+  return best;
+};
+function CommandPalette({
+  accentColor = "cyan",
+  autoFocus = true,
+  commands,
+  emptyText = "No results",
+  limit = 8,
+  onCancel,
+  onSelect,
+  placeholder = "Type a command or search..."
+}) {
+  const { isFocused } = useFocus({ autoFocus });
+  const [query, setQuery] = useState("");
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const focusedIndexRef = useRef(focusedIndex);
+  focusedIndexRef.current = focusedIndex;
+  const filtered = useMemo(() => {
+    const scored = commands.map((command) => {
+      return { command, score: scoreCommand(query, command) };
+    }).filter(({ score }) => score > 0);
+    scored.sort((a, b) => b.score - a.score);
+    return scored.slice(0, limit).map(({ command }) => command);
+  }, [commands, query, limit]);
+  useEffect(() => {
+    const maxIndex = Math.max(0, filtered.length - 1);
+    if (focusedIndexRef.current > maxIndex) {
+      focusedIndexRef.current = maxIndex;
+      setFocusedIndex(maxIndex);
+    }
+  }, [filtered]);
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (!isFocused) {
+          return;
+        }
+        if (key.escape) {
+          onCancel?.();
+          return;
+        }
+        if (key.downArrow) {
+          if (filtered.length === 0) {
+            return;
+          }
+          setFocusedIndex((previous) => Math.min(filtered.length - 1, previous + 1));
+          return;
+        }
+        if (key.upArrow) {
+          setFocusedIndex((previous) => Math.max(0, previous - 1));
+          return;
+        }
+        if (key.return) {
+          const target = filtered[focusedIndexRef.current];
+          if (target) {
+            onSelect(target.id, query);
+          }
+          return;
+        }
+        if (key.backspace || key.delete) {
+          setQuery((previous) => previous.slice(0, -1));
+          setFocusedIndex(0);
+          return;
+        }
+        if (isInsertableInput(input, key)) {
+          setQuery((previous) => previous + input);
+          setFocusedIndex(0);
+        }
+      },
+      [isFocused, filtered, query, onSelect, onCancel]
+    ),
+    { isActive: isFocused }
+  );
+  return jsxs(Box, { borderColor: accentColor, borderStyle: "round", flexDirection: "column", paddingX: 1, children: [
+    jsxs(Box, { children: [
+      jsx(Text, { color: accentColor, children: "❯" }),
+      jsxs(Text, { children: [
+        " ",
+        query.length === 0 ? jsx(Text, { dimColor: true, children: placeholder }) : query
+      ] }),
+      jsx(Text, { inverse: true, children: " " })
+    ] }),
+    jsx(Box, { marginTop: 1, children: jsxs(Text, { dimColor: true, children: [
+      filtered.length,
+      " of ",
+      commands.length
+    ] }) }),
+    jsx(Box, { flexDirection: "column", marginTop: 1, children: filtered.length === 0 ? jsx(Text, { dimColor: true, children: emptyText }) : filtered.map((command, index) => {
+      const isRowFocused = index === focusedIndex;
+      const color = isRowFocused ? accentColor : void 0;
+      return jsxs(Box, { flexDirection: "column", children: [
+        jsxs(Box, { children: [
+          jsx(Text, { color, children: isRowFocused ? "▸ " : "  " }),
+          command.icon === void 0 ? void 0 : jsxs(Text, { color, children: [
+            command.icon,
+            " "
+          ] }),
+          jsx(Box, { flexGrow: 1, flexShrink: 1, minWidth: 0, children: jsx(Text, { bold: isRowFocused, color, wrap: "truncate-end", children: command.label }) }),
+          command.hotkey === void 0 ? void 0 : jsx(Box, { flexShrink: 0, children: jsxs(Text, { dimColor: true, children: [
+            " ",
+            command.hotkey
+          ] }) })
+        ] }),
+        command.description === void 0 ? void 0 : jsx(Box, { marginLeft: 2, children: jsx(Text, { dimColor: true, wrap: "truncate-end", children: command.description }) })
+      ] }, command.id);
+    }) })
+  ] });
+}
+
+export { CommandPalette as default };

package/dist/packem_shared/ConfirmDialog-5XJv3Cc4.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import useFocus from './useFocus-DLoGQJd9.js';
+import useInput from './useInput-DKZbqMRc.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const TONE_COLOR = {
+  danger: "red",
+  info: "blue",
+  warning: "yellow"
+};
+const ButtonLabel = ({ color, isFocused, label }) => jsx(Box, { backgroundColor: isFocused ? color : void 0, borderColor: isFocused ? color : void 0, borderStyle: "round", paddingX: 1, children: jsx(Text, { bold: isFocused, color: isFocused ? "black" : void 0, children: label }) });
+function ConfirmDialog({
+  autoFocus = true,
+  cancelLabel = "Cancel",
+  children,
+  confirmLabel = "Confirm",
+  defaultFocus = "confirm",
+  isDisabled = false,
+  onCancel,
+  onConfirm,
+  title,
+  tone = "info",
+  width
+}) {
+  const [focus, setFocus] = useState(defaultFocus);
+  const color = TONE_COLOR[tone];
+  const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (key.leftArrow || key.rightArrow || input === "h" || input === "l") {
+          setFocus((previous) => previous === "confirm" ? "cancel" : "confirm");
+          return;
+        }
+        if (key.return) {
+          if (focus === "confirm") {
+            onConfirm();
+          } else {
+            onCancel();
+          }
+          return;
+        }
+        if (key.escape || input === "n") {
+          onCancel();
+          return;
+        }
+        if (input === "y") {
+          onConfirm();
+        }
+      },
+      [focus, onConfirm, onCancel]
+    ),
+    { isActive: !isDisabled && isFocused }
+  );
+  return jsxs(Box, { borderColor: color, borderStyle: "round", flexDirection: "column", paddingX: 1, paddingY: 1, width, children: [
+    title === void 0 ? void 0 : jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, color, children: title }) }),
+    children === void 0 ? void 0 : jsx(Box, { flexDirection: "column", marginBottom: 1, children: typeof children === "string" ? jsx(Text, { children }) : children }),
+    jsxs(Box, { gap: 2, justifyContent: "flex-end", children: [
+      jsx(ButtonLabel, { color, isFocused: focus === "cancel", label: cancelLabel }),
+      jsx(ButtonLabel, { color, isFocused: focus === "confirm", label: confirmLabel })
+    ] })
+  ] });
+}
+
+export { ConfirmDialog as default };

package/dist/packem_shared/{ConfirmInput-85Y4kRQW.js → ConfirmInput-CxUS0XAA.js}

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useCallback } from 'react';
-import useInput from './useInput-Cfp5zB2s.js';
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
+import useInput from './useInput-DKZbqMRc.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
 
 function ConfirmInput({ defaultChoice = "confirm", isDisabled = false, onCancel, onConfirm, submitOnEnter = true }) {
   const onConfirmRef = useRef(onConfirm);