@visulima/tui 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/packem_shared/Canvas-COttmLPX.js

@@ -1,246 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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/Cell-DCg1kJY-.js

@@ -1,48 +0,0 @@
-const Cell = {
-  /** Read bg color from an attr slot value (buffer[idx*2+1]) — bits 15:8 */
-  getBg(attributeSlot) {
-    return attributeSlot >> 8 & 255;
-  },
-  /** Read the char character from a raw char slot value (buffer[idx*2]) */
-  getChar(charSlot) {
-    if (charSlot === 0) {
-      return " ";
-    }
-    if (charSlot > 1114111) {
-      return "";
-    }
-    return String.fromCodePoint(charSlot);
-  },
-  /** Read fg color from an attr slot value (buffer[idx*2+1]) — bits 7:0 */
-  getFg(attributeSlot) {
-    return attributeSlot & 255;
-  },
-  /** Read styles bitmask from an attr slot value (buffer[idx*2+1]) — bits 23:16 */
-  getStyles(attributeSlot) {
-    return attributeSlot >> 16 & 255;
-  },
-  /**
-   * Pack a cell into a [charCode, attrCode] tuple.
-   * charCode = char.codePointAt(0)
-   * attrCode = (styles & 0xFF) &lt;< 16 | (bg & 0xFF) &lt;< 8 | (fg & 0xFF)
-   *
-   * Write to buffer as: buffer[idx*2] = charCode; buffer[idx*2+1] = attrCode
-   */
-  pack(char, fg = 255, bg = 255, styles = 0) {
-    const charCode = char.codePointAt(0) ?? 32;
-    const attributeCode = (styles & 255) << 16 | (bg & 255) << 8 | fg & 255;
-    return [charCode, attributeCode];
-  }
-};
-const StyleMasks = {
-  BLINK: 16,
-  BOLD: 1,
-  DIM: 2,
-  HIDDEN: 64,
-  INVERT: 32,
-  ITALIC: 4,
-  STRIKETHROUGH: 128,
-  UNDERLINE: 8
-};
-
-export { Cell, StyleMasks };

package/dist/packem_shared/Checkbox-Dpy_4Lws.js

@@ -1,49 +0,0 @@
-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-CwzzbsLx.js

@@ -1,53 +0,0 @@
-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-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);
-  const cancelledRef = useRef(false);
-  useEffect(() => {
-    cancelledRef.current = false;
-    const lang = language ? resolveLanguage(language) : "text";
-    if (lang !== "text" && !isLanguageSupported(lang)) {
-      setTokens(null);
-      return;
-    }
-    void (async () => {
-      try {
-        const highlighter = await getHighlighter(lang === "text" ? [] : [lang], theme);
-        const result = getCachedTokens(highlighter, code, lang, theme);
-        if (!cancelledRef.current) {
-          setTokens(result.tokens);
-        }
-      } catch {
-        if (!cancelledRef.current) {
-          setTokens(null);
-        }
-      }
-    })();
-    return () => {
-      cancelledRef.current = true;
-    };
-  }, [code, language, theme]);
-  const renderOptions = { highlightLines, showLineNumbers, startLine };
-  if (tokens) {
-    return tokenLinesToElements(tokens, renderOptions);
-  }
-  const lines = code.split("\n");
-  const gutterWidth = showLineNumbers ? String(startLine + lines.length - 1).length : 0;
-  return jsx(Box, { flexDirection: "column", children: lines.map((line, index) => {
-    const lineNumber = startLine + index;
-    const isHighlighted = highlightLines?.has(lineNumber) ?? false;
-    return jsxs(Box, { children: [
-      showLineNumbers ? jsxs(Text, { color: isHighlighted ? "yellow" : void 0, dimColor: !isHighlighted, children: [
-        String(lineNumber).padStart(gutterWidth),
-        " "
-      ] }) : void 0,
-      jsx(Text, { children: line })
-    ] }, index);
-  }) });
-}
-
-export { Code as default };

package/dist/packem_shared/Collapsible-BMDrXf5C.js

@@ -1,45 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,146 +0,0 @@
-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 };