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

package/dist/packem_shared/Heatmap-_jqISOU0.js

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import Box from './Box-W1w_NGin.js';
+import Canvas from './Canvas-COttmLPX.js';
+import Text from './Text-CtUwV89_.js';
+
+const DEFAULT_PALETTE = ["#0b1e4f", "#1f3b96", "#3258c8", "#4e84ec", "#78b0ff"];
+function Heatmap({
+  cellWidth = 2,
+  character = "█",
+  columnLabels,
+  data,
+  max: maxOverride,
+  min: minOverride,
+  palette = DEFAULT_PALETTE,
+  rowLabels,
+  textColor
+}) {
+  const { cols, colWidth, extent, rows } = useMemo(() => {
+    const rowCount = data.length;
+    const colCount = data.reduce((widest, row) => Math.max(widest, row.length), 0);
+    let min = minOverride ?? Infinity;
+    let max = maxOverride ?? -Infinity;
+    if (minOverride === void 0 || maxOverride === void 0) {
+      for (const row of data) {
+        for (const value of row) {
+          if (minOverride === void 0 && value < min) {
+            min = value;
+          }
+          if (maxOverride === void 0 && value > max) {
+            max = value;
+          }
+        }
+      }
+    }
+    return {
+      cols: colCount,
+      colWidth: cellWidth,
+      extent: { max, min },
+      rows: rowCount
+    };
+  }, [data, minOverride, maxOverride, cellWidth]);
+  const width = cols * colWidth;
+  const height = rows;
+  return jsxs(Box, { children: [
+    rowLabels === void 0 ? void 0 : jsx(Box, { flexDirection: "column", marginRight: 1, children: Array.from({ length: rows }, (_, index) => jsx(Text, { dimColor: true, children: rowLabels[index] ?? "" }, index)) }),
+    jsxs(Box, { flexDirection: "column", children: [
+      jsx(
+        Canvas,
+        {
+          draw: (context) => {
+            context.clear();
+            const { max, min } = extent;
+            const range = max - min || 1;
+            const paletteLast = palette.length - 1;
+            for (let row = 0; row < rows; row += 1) {
+              for (let col = 0; col < cols; col += 1) {
+                const value = data[row]?.[col];
+                const background = value === void 0 ? void 0 : palette[Math.max(0, Math.min(paletteLast, Math.round((value - min) / range * paletteLast)))];
+                for (let offset = 0; offset < colWidth; offset += 1) {
+                  context.setCell(col * colWidth + offset, row, character, {
+                    background,
+                    color: textColor
+                  });
+                }
+              }
+            }
+          },
+          height,
+          version: [data, palette, cellWidth, minOverride, maxOverride],
+          width
+        }
+      ),
+      columnLabels === void 0 ? void 0 : jsx(Box, { children: columnLabels.map((label, index) => jsx(Box, { width: colWidth, children: jsx(Text, { dimColor: true, wrap: "truncate-end", children: label }) }, index)) })
+    ] })
+  ] });
+}
+
+export { Heatmap as default };

package/dist/packem_shared/{Help-6wanGG38.js → Help-0yZ_IcQg.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import useWindowSize from './useWindowSize-ugEmGZJm.js';
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
+import useWindowSize from './useWindowSize-D3UU41mv.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
 
 const keyLabels = {
   backspace: "backspace",
@@ -31,14 +31,7 @@ function formatKeys(key) {
   const keys = typeof key === "string" ? [key] : key;
   return keys.map((k) => formatKeyLabel(k)).join("/");
 }
-function Help({
-  bindings,
-  descriptionColor,
-  keyColor = "cyan",
-  maxColumns = 3,
-  mode = "short",
-  separator = " · "
-}) {
+function Help({ bindings, descriptionColor, keyColor = "cyan", maxColumns = 3, mode = "short", separator = " · " }) {
   const { columns } = useWindowSize();
   if (mode === "full") {
     return renderFull(bindings, { columns, descriptionColor, keyColor, maxColumns });

package/dist/packem_shared/Histogram-cgAjY5AJ.js

@@ -0,0 +1,92 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import BarChart from './BarChart-DWRae67P.js';
+
+const computeThresholds = (min, max, bins) => {
+  if (bins <= 0 || min >= max) {
+    return [min, max];
+  }
+  const step = (max - min) / bins;
+  return Array.from({ length: bins + 1 }, (_, index) => min + index * step);
+};
+const binData = (data, thresholds) => {
+  if (thresholds.length < 2) {
+    return [];
+  }
+  const counts = Array.from({ length: thresholds.length - 1 }, () => 0);
+  const lowerBound = thresholds[0];
+  const upperBound = thresholds[thresholds.length - 1];
+  for (const value of data) {
+    if (value < lowerBound || value > upperBound) {
+      continue;
+    }
+    for (let index = 0; index < thresholds.length - 1; index += 1) {
+      const isLastBin = index === thresholds.length - 2;
+      const upper = thresholds[index + 1];
+      const withinBin = value < upper || isLastBin && value <= upper;
+      if (withinBin) {
+        counts[index] = (counts[index] ?? 0) + 1;
+        break;
+      }
+    }
+  }
+  return counts.map((count, index) => {
+    const low = thresholds[index];
+    const high = thresholds[index + 1];
+    return {
+      count,
+      label: `${Math.round(low)}-${Math.round(high)}`
+    };
+  });
+};
+function Histogram({
+  bins = 10,
+  color,
+  data,
+  height = 10,
+  max: maxOverride,
+  min: minOverride,
+  showValues = false,
+  thresholds,
+  width
+}) {
+  const buckets = useMemo(() => {
+    if (thresholds && thresholds.length >= 2) {
+      return binData(data, thresholds);
+    }
+    if (data.length === 0) {
+      return [];
+    }
+    let min = minOverride ?? Infinity;
+    let max = maxOverride ?? -Infinity;
+    if (minOverride === void 0 || maxOverride === void 0) {
+      for (const value of data) {
+        if (minOverride === void 0 && value < min) {
+          min = value;
+        }
+        if (maxOverride === void 0 && value > max) {
+          max = value;
+        }
+      }
+    }
+    if (min === max) {
+      return [{ count: data.length, label: `${min}` }];
+    }
+    return binData(data, computeThresholds(min, max, bins));
+  }, [data, thresholds, bins, minOverride, maxOverride]);
+  return jsx(
+    BarChart,
+    {
+      data: buckets.map((bucket) => {
+        return { color, label: bucket.label, value: bucket.count };
+      }),
+      height,
+      orientation: "vertical",
+      showLabels: true,
+      showValues,
+      width
+    }
+  );
+}
+
+export { Histogram as default };

package/dist/packem_shared/{InputParser-BKHpWfvN.js → InputParser-BlsfeY9J.js}

@@ -130,21 +130,23 @@ class InputParser extends EventEmitter {
         const ctrl = (buttonCode & 16) !== 0;
         const base = buttonCode & -29;
         let button = null;
-        if (base === 0 && !isRelease)
+        if (base === 0 && !isRelease) {
           button = "left";
-        else if (base === 1 && !isRelease)
+        } else if (base === 1 && !isRelease) {
           button = "middle";
-        else if (base === 2 && !isRelease)
+        } else if (base === 2 && !isRelease) {
           button = "right";
-        else if (base === 64)
+        } else if (base === 64) {
           button = "scrollUp";
-        else if (base === 65)
+        } else if (base === 65) {
           button = "scrollDown";
+        }
         if (button) {
           const event = { button, ctrl, meta, shift, x, y };
           this.emit("mouse", event);
-          if (button === "left")
+          if (button === "left") {
             this.emit("click", { x, y });
+          }
         }
       }
       return;

package/dist/packem_shared/KEY-STOdi-nc.js

@@ -0,0 +1,74 @@
+const KEY = {
+  backspace: "",
+  ctrlC: "",
+  delete: "\x1B[3~",
+  down: "\x1B[B",
+  end: "\x1B[F",
+  escape: "\x1B",
+  home: "\x1B[H",
+  left: "\x1B[D",
+  pageDown: "\x1B[6~",
+  pageUp: "\x1B[5~",
+  return: "\r",
+  right: "\x1B[C",
+  space: " ",
+  tab: "	",
+  up: "\x1B[A"
+};
+const createKeySender = (write) => {
+  return {
+    backspace: () => {
+      write(KEY.backspace);
+    },
+    delete: () => {
+      write(KEY.delete);
+    },
+    down: () => {
+      write(KEY.down);
+    },
+    end: () => {
+      write(KEY.end);
+    },
+    enter: () => {
+      write(KEY.return);
+    },
+    escape: () => {
+      write(KEY.escape);
+    },
+    home: () => {
+      write(KEY.home);
+    },
+    left: () => {
+      write(KEY.left);
+    },
+    pageDown: () => {
+      write(KEY.pageDown);
+    },
+    pageUp: () => {
+      write(KEY.pageUp);
+    },
+    press(char) {
+      write(char);
+    },
+    raw: write,
+    right: () => {
+      write(KEY.right);
+    },
+    space: () => {
+      write(KEY.space);
+    },
+    tab: () => {
+      write(KEY.tab);
+    },
+    type(text) {
+      for (const char of text) {
+        write(char);
+      }
+    },
+    up: () => {
+      write(KEY.up);
+    }
+  };
+};
+
+export { KEY, createKeySender };

package/dist/packem_shared/Kbd-BNDXQgey.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+function Kbd({ children, color = "gray", variant = "solid" }) {
+  if (variant === "solid") {
+    return jsxs(Text, { backgroundColor: color, color: "black", children: [
+      " ",
+      children,
+      " "
+    ] });
+  }
+  if (variant === "outline") {
+    return jsx(Box, { borderColor: color, borderStyle: "round", paddingX: 1, children: jsx(Text, { color, children }) });
+  }
+  return jsx(Text, { dimColor: true, children });
+}
+
+export { Kbd as default };

package/dist/packem_shared/{LayoutNode-Cjnsodiy.js → LayoutNode-DAkKg9TE.js}

@@ -1,5 +1,5 @@
 import Yoga from 'yoga-layout';
-import { m as measureTextBlock } from './text-width-DhuarWcB.js';
+import { m as measureTextBlock } from './text-width-Db-AxMea.js';
 
 const yogaOwner = /* @__PURE__ */ new Map();
 class LayoutNode {
@@ -23,8 +23,9 @@ class LayoutNode {
       this.yogaNode.unsetMeasureFunc();
     } else {
       this.yogaNode.setMeasureFunc((width, widthMode, height, heightMode) => {
-        if (value.length === 0)
+        if (value.length === 0) {
           return { height: 0, width: 0 };
+        }
         const unconstrained = measureTextBlock(value, Number.MAX_SAFE_INTEGER);
         let targetWidth = unconstrained.maxLineWidth;
         if (widthMode === Yoga.MEASURE_MODE_EXACTLY) {
@@ -103,8 +104,9 @@ class LayoutNode {
     }
     this._destroyed = true;
     for (const child of this.children) {
-      if (child.parent === this)
+      if (child.parent === this) {
         child.parent = null;
+      }
     }
     this.children = [];
     yogaOwner.delete(this.yogaNode);
@@ -122,10 +124,6 @@ class LayoutNode {
   getLayout() {
     return this.yogaNode.getComputedLayout();
   }
-  /** @deprecated use destroy() */
-  free() {
-    this.destroy();
-  }
 }
 
 export { LayoutNode };

package/dist/packem_shared/LineChart-ef3HF816.js

@@ -0,0 +1,7 @@
+import 'react/jsx-runtime';
+import 'react';
+import './braille-BoEWoH2I.js';
+import './Box-W1w_NGin.js';
+import './Canvas-COttmLPX.js';
+export { L as default, d as drawSeriesOnCanvas, a as projectPoint } from './line-chart-VGU2l7pu.js';
+import './Text-CtUwV89_.js';

package/dist/packem_shared/{Link-COcKYfGT.js → Link-DZ2Tiq1m.js}

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { hyperlink } from '@visulima/ansi';
 import { useCallback } from 'react';
-import Text from './Text-DvAUdZcK.js';
-import Transform from './Transform-BHxY_dAM.js';
+import Text from './Text-CtUwV89_.js';
+import Transform from './Transform-Cfyva2wd.js';
 
 let cachedSupportsHyperlinks;
 const detectHyperlinkSupport = () => {

package/dist/packem_shared/LoadingIndicator-DzbLGfyJ.js

@@ -0,0 +1,13 @@
+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';
+
+function LoadingIndicator({ children, color = "cyan", type = "dots" }) {
+  return jsxs(Box, { gap: 1, children: [
+    jsx(Text, { color, children: jsx(Spinner, { type }) }),
+    children === void 0 ? void 0 : jsx(Text, { color, children })
+  ] });
+}
+
+export { LoadingIndicator as default };

package/dist/packem_shared/{Markdown-y1ISztof.js → Markdown-33bpCUoe.js}

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Lexer } from 'marked';
 import React, { useMemo } from 'react';
-import useWindowSize from './useWindowSize-ugEmGZJm.js';
-import Box from './Box-D_pSJ9Jp.js';
-import Code from './Code-DjQvPBD9.js';
-import Link from './Link-COcKYfGT.js';
+import useWindowSize from './useWindowSize-D3UU41mv.js';
+import Box from './Box-W1w_NGin.js';
+import Code from './Code-CwzzbsLx.js';
+import Link from './Link-DZ2Tiq1m.js';
 import Newline from './Newline-DBtYEg8x.js';
-import OrderedList from './OrderedList-Cp7pXr6m.js';
-import TableComponent from './Table-D-rSVlzb.js';
-import Text from './Text-DvAUdZcK.js';
-import UnorderedList from './UnorderedList-DhnadWjX.js';
+import OrderedList from './OrderedList-VsvSmHUC.js';
+import TableComponent from './Table-Bgxo87Df.js';
+import Text from './Text-CtUwV89_.js';
+import UnorderedList from './UnorderedList-D8RPaEAW.js';
 
 const HEADING_COLORS = {
   1: "cyan",

package/dist/packem_shared/MaskedInput-Ctr6v2dO.js

@@ -0,0 +1,119 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useState, useCallback } from 'react';
+import useInput from './useInput-DKZbqMRc.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const buildTokenIndex = (mask, token) => {
+  const indices = [];
+  let rawPosition = 0;
+  for (const [maskColumn, maskChar] of [...mask].entries()) {
+    if (maskChar === token) {
+      indices.push({ maskColumn, rawPosition });
+      rawPosition += 1;
+    }
+  }
+  return indices;
+};
+const formatValue = (raw, mask, token, placeholderChar) => {
+  let rawIndex = 0;
+  let output = "";
+  for (const maskChar of mask) {
+    if (maskChar === token) {
+      const rawChar = raw[rawIndex];
+      if (rawChar === void 0) {
+        output += placeholderChar;
+      } else {
+        output += rawChar;
+        rawIndex += 1;
+      }
+    } else {
+      output += maskChar;
+    }
+  }
+  return output;
+};
+function MaskedInput({
+  defaultValue = "",
+  isDisabled = false,
+  mask,
+  onChange,
+  onSubmit,
+  placeholderChar = "_",
+  token = "#"
+}) {
+  const tokenIndex = useMemo(() => buildTokenIndex(mask, token), [mask, token]);
+  const maxLength = tokenIndex.length;
+  const clampedDefault = defaultValue.slice(0, maxLength);
+  const [raw, setRaw] = useState(clampedDefault);
+  const [cursor, setCursor] = useState(clampedDefault.length);
+  const emit = useCallback(
+    (next, nextCursor) => {
+      setRaw(next);
+      setCursor(Math.max(0, Math.min(maxLength, nextCursor)));
+      onChange?.(next);
+    },
+    [maxLength, onChange]
+  );
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (key.return) {
+          onSubmit?.(raw);
+          return;
+        }
+        if (key.leftArrow) {
+          setCursor((previous) => Math.max(0, previous - 1));
+          return;
+        }
+        if (key.rightArrow) {
+          setCursor((previous) => Math.min(raw.length, previous + 1));
+          return;
+        }
+        if (key.home || key.ctrl && input === "a") {
+          setCursor(0);
+          return;
+        }
+        if (key.end || key.ctrl && input === "e") {
+          setCursor(raw.length);
+          return;
+        }
+        if (key.backspace) {
+          if (cursor === 0) {
+            return;
+          }
+          const next2 = raw.slice(0, cursor - 1) + raw.slice(cursor);
+          emit(next2, cursor - 1);
+          return;
+        }
+        if (key.delete) {
+          if (cursor >= raw.length) {
+            return;
+          }
+          const next2 = raw.slice(0, cursor) + raw.slice(cursor + 1);
+          emit(next2, cursor);
+          return;
+        }
+        if (input?.length !== 1 || raw.length >= maxLength) {
+          return;
+        }
+        const next = raw.slice(0, cursor) + input + raw.slice(cursor);
+        emit(next, cursor + 1);
+      },
+      [raw, cursor, maxLength, emit, onSubmit]
+    ),
+    { isActive: !isDisabled }
+  );
+  const display = formatValue(raw, mask, token, placeholderChar);
+  const cursorMaskColumn = tokenIndex[cursor]?.maskColumn ?? mask.length;
+  const before = display.slice(0, cursorMaskColumn);
+  const atCursor = display.charAt(cursorMaskColumn) || " ";
+  const after = display.slice(cursorMaskColumn + 1);
+  return jsxs(Box, { children: [
+    jsx(Text, { dimColor: isDisabled, children: before }),
+    jsx(Text, { dimColor: isDisabled, inverse: !isDisabled, children: atCursor }),
+    jsx(Text, { dimColor: isDisabled, children: after })
+  ] });
+}
+
+export { MaskedInput as default };

package/dist/packem_shared/Menu-CeKxhEix.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useState, useRef, useEffect, 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 flatten = (items, sections) => {
+  if (sections && sections.length > 0) {
+    const rows = [];
+    for (const section of sections) {
+      if (section.title !== void 0) {
+        rows.push({ kind: "section-header", sectionId: section.id, title: section.title });
+      }
+      for (const item of section.items) {
+        rows.push({ item, kind: "item", sectionId: section.id });
+      }
+    }
+    return rows;
+  }
+  return (items ?? []).map((item) => ({ item, kind: "item", sectionId: void 0 }));
+};
+const findNextIndex = (rows, from, direction) => {
+  const total = rows.length;
+  if (total === 0) {
+    return from;
+  }
+  for (let step = 1; step <= total; step += 1) {
+    const candidate = (from + direction * step + total * step) % total;
+    const row = rows[candidate];
+    if (row?.kind === "item" && !row.item.isDisabled) {
+      return candidate;
+    }
+  }
+  return from;
+};
+const firstEnabledIndex = (rows) => {
+  for (const [index, row] of rows.entries()) {
+    if (row.kind === "item" && !row.item.isDisabled) {
+      return index;
+    }
+  }
+  return 0;
+};
+function Menu({ accentColor = "blue", autoFocus = false, bordered = true, items, onSelect, sections, title }) {
+  const { isFocused } = useFocus({ autoFocus });
+  const rows = useMemo(() => flatten(items, sections), [items, sections]);
+  const initialIndex = useMemo(() => firstEnabledIndex(rows), [rows]);
+  const [focusedIndex, setFocusedIndex] = useState(initialIndex);
+  const focusedIndexRef = useRef(focusedIndex);
+  focusedIndexRef.current = focusedIndex;
+  useEffect(() => {
+    const { current } = focusedIndexRef;
+    const row = rows[current];
+    const stillValid = row?.kind === "item" && !row.item.isDisabled;
+    if (!stillValid) {
+      const next = firstEnabledIndex(rows);
+      setFocusedIndex(next);
+      focusedIndexRef.current = next;
+    }
+  }, [rows]);
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (!isFocused) {
+          return;
+        }
+        if (key.downArrow || input === "j") {
+          setFocusedIndex(findNextIndex(rows, focusedIndexRef.current, 1));
+        } else if (key.upArrow || input === "k") {
+          setFocusedIndex(findNextIndex(rows, focusedIndexRef.current, -1));
+        } else if (key.return) {
+          const row = rows[focusedIndexRef.current];
+          if (row?.kind === "item" && !row.item.isDisabled) {
+            onSelect(row.item.id);
+          }
+        }
+      },
+      [isFocused, rows, onSelect]
+    ),
+    { isActive: isFocused }
+  );
+  const content = jsxs(Box, { flexDirection: "column", children: [
+    title === void 0 ? void 0 : jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, color: accentColor, children: title }) }),
+    rows.map((row, index) => {
+      if (row.kind === "section-header") {
+        return jsx(Box, { marginTop: index === 0 ? 0 : 1, children: jsx(Text, { dimColor: true, children: row.title.toUpperCase() }) }, `header:${row.sectionId}`);
+      }
+      const { item } = row;
+      const isRowFocused = isFocused && index === focusedIndex;
+      const color = isRowFocused ? accentColor : void 0;
+      return jsxs(Box, { children: [
+        jsx(Text, { color, dimColor: item.isDisabled, children: isRowFocused ? "▸ " : "  " }),
+        item.icon === void 0 ? void 0 : jsxs(Text, { color, dimColor: item.isDisabled, children: [
+          item.icon,
+          " "
+        ] }),
+        jsx(Box, { flexGrow: 1, flexShrink: 1, minWidth: 0, children: jsx(Text, { bold: isRowFocused, color, dimColor: item.isDisabled, wrap: "truncate-end", children: item.label }) }),
+        item.hotkey === void 0 ? void 0 : jsx(Box, { flexShrink: 0, children: jsxs(Text, { dimColor: true, children: [
+          " ",
+          item.hotkey
+        ] }) })
+      ] }, `item:${item.id}`);
+    })
+  ] });
+  if (!bordered) {
+    return content;
+  }
+  return jsx(Box, { borderColor: isFocused ? accentColor : void 0, borderStyle: "round", paddingX: 1, children: content });
+}
+
+export { Menu as default };

package/dist/packem_shared/MessageBubble-BMoU8L2Q.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const ROLE_CONFIG = {
+  assistant: { align: "flex-start", color: "blueBright", icon: "" },
+  system: { align: "flex-start", color: "gray", icon: "" },
+  tool: { align: "flex-start", color: "magentaBright", icon: "" },
+  user: { align: "flex-end", color: "greenBright", icon: "" }
+};
+function MessageBubble({ children, color, flat = false, label, meta, role = "assistant" }) {
+  const preset = ROLE_CONFIG[role];
+  const accent = color ?? preset.color;
+  return jsxs(Box, { alignSelf: preset.align, flexDirection: "column", marginBottom: 1, children: [
+    label === void 0 && meta === void 0 ? void 0 : jsxs(Box, { gap: 1, paddingX: 1, children: [
+      label === void 0 ? void 0 : jsx(Text, { bold: true, color: accent, children: label }),
+      meta === void 0 ? void 0 : jsx(Text, { dimColor: true, children: meta })
+    ] }),
+    flat ? jsxs(Box, { paddingX: 1, children: [
+      jsx(Text, { color: accent, children: "│ " }),
+      jsx(Box, { flexDirection: "column", flexGrow: 1, children: typeof children === "string" ? jsx(Text, { children }) : children })
+    ] }) : jsx(Box, { borderColor: accent, borderStyle: "round", flexDirection: "column", paddingX: 1, children: typeof children === "string" ? jsx(Text, { children }) : children })
+  ] });
+}
+
+export { MessageBubble as default };