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

package/dist/packem_shared/ModelBadge-CNIxPs7v.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+function ModelBadge({ color = "magenta", icon, model, provider, variant = "solid" }) {
+  const chip = (content) => {
+    const renderedIcon = icon === void 0 ? void 0 : jsxs(Fragment, { children: [
+      icon,
+      " "
+    ] });
+    if (variant === "outline") {
+      return jsx(Box, { borderColor: color, borderStyle: "round", paddingX: 1, children: jsxs(Text, { color, children: [
+        renderedIcon,
+        content
+      ] }) });
+    }
+    if (variant === "subtle") {
+      return jsxs(Text, { color, children: [
+        renderedIcon,
+        content
+      ] });
+    }
+    return jsxs(Text, { backgroundColor: color, color: "black", children: [
+      " ",
+      renderedIcon,
+      content,
+      " "
+    ] });
+  };
+  if (provider === void 0) {
+    return chip(model);
+  }
+  return jsxs(Box, { children: [
+    jsx(Text, { dimColor: true, children: provider }),
+    jsx(Text, { dimColor: true, children: "/" }),
+    chip(model)
+  ] });
+}
+
+export { ModelBadge as default };

package/dist/packem_shared/{MouseProvider-Y9TSSEGl.js → MouseProvider-CekPbXCh.js}

@@ -23,9 +23,9 @@ const {
 } = __cjs_getBuiltinModule("node:events");
 const process = __cjs_getProcess;
 import { useRef, useReducer, useEffect, useMemo } from 'react';
-import { useStdinContext } from './useStdin-X-O0kd-n.js';
-import useStdout from './useStdout-DyF6DSH0.js';
-import { A as ANSI_CODES, p as parseSgrMouse } from './ansi-parser-0BdVTKho.js';
+import { useStdinContext } from './useStdin-Rf0zPzVA.js';
+import useStdout from './useStdout-B5yRcg9N.js';
+import { A as ANSI_CODES, p as parseSgrMouse } from './ansi-parser-BOP8fNdT.js';
 import { M as MouseContext } from './mouse-context-BUHWKEIe.js';
 
 const initialMouseState = {

package/dist/packem_shared/{MultiSelect-ChoLUcDI.js → MultiSelect-yz7-w0Zv.js}

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useReducer, useState, useRef, useMemo, useCallback } from 'react';
-import useInput from './useInput-Cfp5zB2s.js';
-import useWindowSize from './useWindowSize-ugEmGZJm.js';
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
+import useInput from './useInput-DKZbqMRc.js';
+import useWindowSize from './useWindowSize-D3UU41mv.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
 
 const EMPTY_DEFAULT = [];
 const multiSelectReducer = (state, action) => {

package/dist/packem_shared/{NAMED_COLORS-a4QBvb5r.js → NAMED_COLORS-DcI3erCu.js}

@@ -86,61 +86,83 @@ const applyPositionStyles = (node, style) => {
   }
 };
 const applyMarginStyles = (node, style) => {
-  if ("margin" in style)
+  if ("margin" in style) {
     node.setMargin(Yoga.EDGE_ALL, style.margin ?? 0);
-  if ("marginX" in style)
+  }
+  if ("marginX" in style) {
     node.setMargin(Yoga.EDGE_HORIZONTAL, style.marginX ?? 0);
-  if ("marginY" in style)
+  }
+  if ("marginY" in style) {
     node.setMargin(Yoga.EDGE_VERTICAL, style.marginY ?? 0);
-  if ("marginLeft" in style)
+  }
+  if ("marginLeft" in style) {
     node.setMargin(Yoga.EDGE_LEFT, style.marginLeft ?? 0);
-  if ("marginRight" in style)
+  }
+  if ("marginRight" in style) {
     node.setMargin(Yoga.EDGE_RIGHT, style.marginRight ?? 0);
-  if ("marginTop" in style)
+  }
+  if ("marginTop" in style) {
     node.setMargin(Yoga.EDGE_TOP, style.marginTop ?? 0);
-  if ("marginBottom" in style)
+  }
+  if ("marginBottom" in style) {
     node.setMargin(Yoga.EDGE_BOTTOM, style.marginBottom ?? 0);
+  }
 };
 const applyPaddingStyles = (node, style) => {
-  if ("padding" in style)
+  if ("padding" in style) {
     node.setPadding(Yoga.EDGE_ALL, style.padding ?? 0);
-  if ("paddingX" in style)
+  }
+  if ("paddingX" in style) {
     node.setPadding(Yoga.EDGE_HORIZONTAL, style.paddingX ?? 0);
-  if ("paddingY" in style)
+  }
+  if ("paddingY" in style) {
     node.setPadding(Yoga.EDGE_VERTICAL, style.paddingY ?? 0);
-  if ("paddingLeft" in style)
+  }
+  if ("paddingLeft" in style) {
     node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft ?? 0);
-  if ("paddingRight" in style)
+  }
+  if ("paddingRight" in style) {
     node.setPadding(Yoga.EDGE_RIGHT, style.paddingRight ?? 0);
-  if ("paddingTop" in style)
+  }
+  if ("paddingTop" in style) {
     node.setPadding(Yoga.EDGE_TOP, style.paddingTop ?? 0);
-  if ("paddingBottom" in style)
+  }
+  if ("paddingBottom" in style) {
     node.setPadding(Yoga.EDGE_BOTTOM, style.paddingBottom ?? 0);
+  }
 };
 const applyFlexStyles = (node, style) => {
-  if ("flexGrow" in style)
+  if ("flexGrow" in style) {
     node.setFlexGrow(style.flexGrow ?? 0);
-  if ("flexShrink" in style)
+  }
+  if ("flexShrink" in style) {
     node.setFlexShrink(style.flexShrink ?? 1);
+  }
   if ("flexWrap" in style) {
     node.setFlexWrap(style.flexWrap === "nowrap" ? Yoga.WRAP_NO_WRAP : style.flexWrap === "wrap" ? Yoga.WRAP_WRAP : Yoga.WRAP_WRAP_REVERSE);
   }
   if ("flexDirection" in style) {
-    if (style.flexDirection === "row")
+    if (style.flexDirection === "row") {
       node.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
-    if (style.flexDirection === "row-reverse")
+    }
+    if (style.flexDirection === "row-reverse") {
       node.setFlexDirection(Yoga.FLEX_DIRECTION_ROW_REVERSE);
-    if (style.flexDirection === "column")
+    }
+    if (style.flexDirection === "column") {
       node.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN);
-    if (style.flexDirection === "column-reverse")
+    }
+    if (style.flexDirection === "column-reverse") {
       node.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN_REVERSE);
+    }
   }
   if ("flexBasis" in style) {
-    if (typeof style.flexBasis === "number")
+    if (typeof style.flexBasis === "number") {
       node.setFlexBasis(style.flexBasis);
-    else if (typeof style.flexBasis === "string")
+    } else if (typeof style.flexBasis === "string") {
       node.setFlexBasisPercent(Number.parseInt(style.flexBasis, 10));
-    else node.setFlexBasis(Number.NaN);
+    } else {
+      node.setFlexBasis(Number.NaN);
+    }
   }
   if ("alignItems" in style) {
     const map = {
@@ -188,41 +210,54 @@ const applyFlexStyles = (node, style) => {
 };
 const applyDimensionStyles = (node, style) => {
   if ("width" in style) {
-    if (typeof style.width === "number")
+    if (typeof style.width === "number") {
       node.setWidth(style.width);
-    else if (typeof style.width === "string")
+    } else if (typeof style.width === "string") {
       node.setWidthPercent(Number.parseInt(style.width, 10));
-    else node.setWidthAuto();
+    } else {
+      node.setWidthAuto();
+    }
   }
   if ("height" in style) {
-    if (typeof style.height === "number")
+    if (typeof style.height === "number") {
       node.setHeight(style.height);
-    else if (typeof style.height === "string")
+    } else if (typeof style.height === "string") {
       node.setHeightPercent(Number.parseInt(style.height, 10));
-    else node.setHeightAuto();
+    } else {
+      node.setHeightAuto();
+    }
   }
   if ("minWidth" in style) {
-    if (typeof style.minWidth === "string")
+    if (typeof style.minWidth === "string") {
       node.setMinWidthPercent(Number.parseInt(style.minWidth, 10));
-    else node.setMinWidth(style.minWidth ?? 0);
+    } else {
+      node.setMinWidth(style.minWidth ?? 0);
+    }
   }
   if ("minHeight" in style) {
-    if (typeof style.minHeight === "string")
+    if (typeof style.minHeight === "string") {
       node.setMinHeightPercent(Number.parseInt(style.minHeight, 10));
-    else node.setMinHeight(style.minHeight ?? 0);
+    } else {
+      node.setMinHeight(style.minHeight ?? 0);
+    }
   }
   if ("maxWidth" in style) {
-    if (typeof style.maxWidth === "string")
+    if (typeof style.maxWidth === "string") {
       node.setMaxWidthPercent(Number.parseInt(style.maxWidth, 10));
-    else node.setMaxWidth(style.maxWidth);
+    } else {
+      node.setMaxWidth(style.maxWidth);
+    }
   }
   if ("maxHeight" in style) {
-    if (typeof style.maxHeight === "string")
+    if (typeof style.maxHeight === "string") {
       node.setMaxHeightPercent(Number.parseInt(style.maxHeight, 10));
-    else node.setMaxHeight(style.maxHeight);
+    } else {
+      node.setMaxHeight(style.maxHeight);
+    }
   }
-  if ("aspectRatio" in style)
+  if ("aspectRatio" in style) {
     node.setAspectRatio(style.aspectRatio);
+  }
 };
 const applyDisplayStyles = (node, style) => {
   if ("display" in style) {
@@ -241,12 +276,15 @@ const applyBorderStyles = (node, style, currentStyle) => {
   node.setBorder(Yoga.EDGE_RIGHT, currentStyle.borderRight === false ? 0 : borderWidth);
 };
 const applyGapStyles = (node, style) => {
-  if ("gap" in style)
+  if ("gap" in style) {
     node.setGap(Yoga.GUTTER_ALL, style.gap ?? 0);
-  if ("columnGap" in style)
+  }
+  if ("columnGap" in style) {
     node.setGap(Yoga.GUTTER_COLUMN, style.columnGap ?? 0);
-  if ("rowGap" in style)
+  }
+  if ("rowGap" in style) {
     node.setGap(Yoga.GUTTER_ROW, style.rowGap ?? 0);
+  }
 };
 const applyStyles = (node, style = {}, currentStyle = style) => {
   applyPositionStyles(node, style);

package/dist/packem_shared/OperationTree-Dudx5o1o.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs, Fragment } 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 = {
+  completed: "green",
+  error: "red",
+  pending: "gray",
+  running: "cyan",
+  skipped: "yellow"
+};
+const STATUS_ICON = {
+  completed: "✔",
+  error: "✖",
+  pending: "○",
+  skipped: "⊘"
+};
+const formatDuration = (ms) => {
+  if (ms < 1e3) {
+    return `${Math.round(ms)}ms`;
+  }
+  if (ms < 6e4) {
+    return `${(ms / 1e3).toFixed(1)}s`;
+  }
+  const totalSeconds = Math.round(ms / 1e3);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}m ${seconds}s`;
+};
+const NodeLine = ({ isLast, node, prefix, showSpinner }) => {
+  const color = STATUS_COLOR[node.status];
+  const connector = prefix.length === 0 ? "" : isLast ? "└─ " : "├─ ";
+  const childPrefix = prefix + (isLast ? "   " : "│  ");
+  return jsxs(Fragment, { children: [
+    jsxs(Box, { children: [
+      jsx(Text, { dimColor: true, children: prefix }),
+      jsx(Text, { dimColor: true, children: connector }),
+      jsx(Box, { flexShrink: 0, children: jsx(Text, { color, children: node.status === "running" ? showSpinner ? jsx(Spinner, { type: "dots" }) : "…" : STATUS_ICON[node.status] }) }),
+      jsx(Text, { children: " " }),
+      jsx(Box, { flexGrow: 1, flexShrink: 1, minWidth: 0, children: jsx(
+        Text,
+        {
+          bold: node.status === "running",
+          color: node.status === "pending" ? "gray" : void 0,
+          dimColor: node.status === "skipped",
+          wrap: "truncate-end",
+          children: node.label
+        }
+      ) }),
+      node.durationMs === void 0 ? void 0 : jsx(Box, { flexShrink: 0, children: jsxs(Text, { dimColor: true, children: [
+        " ",
+        formatDuration(node.durationMs)
+      ] }) })
+    ] }),
+    node.details === void 0 ? void 0 : jsxs(Box, { children: [
+      jsx(Text, { dimColor: true, children: childPrefix }),
+      jsx(Text, { dimColor: true, children: node.details })
+    ] }),
+    node.children?.map((child, index, all) => jsx(NodeLine, { isLast: index === all.length - 1, node: child, prefix: childPrefix, showSpinner }, child.id))
+  ] });
+};
+function OperationTree({ nodes, showSpinner = true }) {
+  return jsx(Box, { flexDirection: "column", children: nodes.map((node, index) => jsx(NodeLine, { isLast: index === nodes.length - 1, node, prefix: "", showSpinner }, node.id)) });
+}
+
+export { OperationTree as default };

package/dist/packem_shared/OptionList-CTyqQaZ1.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+function OptionList({ accentColor = "blue", bordered = false, currentId, iconColumnWidth = 2, options }) {
+  const list = jsx(Box, { flexDirection: "column", children: options.map((option) => {
+    const isCurrent = option.id === currentId;
+    const color = isCurrent ? accentColor : void 0;
+    return jsxs(Box, { flexDirection: "column", children: [
+      jsxs(Box, { children: [
+        jsx(Box, { flexShrink: 0, width: iconColumnWidth, children: jsx(Text, { color, children: option.icon ?? (isCurrent ? "▸" : " ") }) }),
+        jsx(Box, { flexGrow: 1, flexShrink: 1, minWidth: 0, children: jsx(Text, { bold: isCurrent, color, wrap: "truncate-end", children: option.label }) }),
+        option.trailing === void 0 ? void 0 : jsx(Box, { flexShrink: 0, children: option.trailing })
+      ] }),
+      option.description === void 0 ? void 0 : jsx(Box, { marginLeft: iconColumnWidth, children: jsx(Text, { dimColor: true, wrap: "truncate-end", children: option.description }) })
+    ] }, option.id);
+  }) });
+  if (!bordered) {
+    return list;
+  }
+  return jsx(Box, { borderStyle: "round", paddingX: 1, children: list });
+}
+
+export { OptionList as default };

package/dist/packem_shared/{OrderedList-Cp7pXr6m.js → OrderedList-VsvSmHUC.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
 
 const renderList = (items, parentMarker) => {
   const maxWidth = String(items.length).length;

package/dist/packem_shared/{Paginator-D1AuD-kj.js → Paginator-DmGogvEI.js}

@@ -1,10 +1,47 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback } from 'react';
-import useInput from './useInput-Cfp5zB2s.js';
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
+import { useState, useCallback } from 'react';
+import useInput from './useInput-DKZbqMRc.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
 
-function Paginator({
+const Indicator = ({
+  color,
+  currentPage,
+  style,
+  totalPages
+}) => {
+  if (style === "fraction") {
+    return jsxs(Text, { children: [
+      jsx(Text, { color, children: currentPage + 1 }),
+      jsxs(Text, { dimColor: true, children: [
+        "/",
+        totalPages
+      ] })
+    ] });
+  }
+  if (style === "numeric") {
+    const previousArrow = currentPage > 0 ? jsx(Text, { color, children: "‹ " }) : jsx(Text, { dimColor: true, children: "‹ " });
+    const nextArrow = currentPage < totalPages - 1 ? jsx(Text, { color, children: " ›" }) : jsx(Text, { dimColor: true, children: " ›" });
+    return jsxs(Box, { children: [
+      previousArrow,
+      jsx(Text, { color, children: currentPage + 1 }),
+      jsxs(Text, { dimColor: true, children: [
+        " ",
+        "/",
+        totalPages
+      ] }),
+      nextArrow
+    ] });
+  }
+  const dots = Array.from({ length: totalPages }, (_, i) => {
+    if (i === currentPage) {
+      return jsx(Text, { color, children: "●" }, i);
+    }
+    return jsx(Text, { dimColor: true, children: "○" }, i);
+  });
+  return jsx(Box, { gap: 1, children: dots });
+};
+const Paginator = ({
   children,
   defaultPage = 0,
   indicatorColor = "cyan",
@@ -14,17 +51,12 @@ function Paginator({
   page: controlledPage,
   pageSize,
   style = "dots"
-}) {
+}) => {
   const isControlled = controlledPage !== void 0;
   const [internalPage, setInternalPage] = useState(defaultPage);
   const currentPage = isControlled ? controlledPage : internalPage;
   const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
   const safePage = Math.max(0, Math.min(currentPage, totalPages - 1));
-  useEffect(() => {
-    if (isControlled) {
-      setInternalPage(controlledPage);
-    }
-  }, [isControlled, controlledPage]);
   const setPage = useCallback(
     (newPage) => {
       const clamped = Math.max(0, Math.min(newPage, totalPages - 1));
@@ -67,38 +99,6 @@ function Paginator({
     children(pageItems, meta),
     totalPages > 1 && jsx(Indicator, { color: indicatorColor, currentPage: safePage, style, totalPages })
   ] });
-}
-function Indicator({
-  color,
-  currentPage,
-  style,
-  totalPages
-}) {
-  if (style === "fraction") {
-    return jsxs(Text, { children: [
-      jsx(Text, { color, children: currentPage + 1 }),
-      jsxs(Text, { dimColor: true, children: [
-        "/",
-        totalPages
-      ] })
-    ] });
-  }
-  if (style === "numeric") {
-    return jsxs(Box, { children: [
-      currentPage > 0 ? jsx(Text, { color, children: "‹ " }) : jsx(Text, { dimColor: true, children: "‹ " }),
-      jsx(Text, { color, children: currentPage + 1 }),
-      jsxs(Text, { dimColor: true, children: [
-        " / ",
-        totalPages
-      ] }),
-      currentPage < totalPages - 1 ? jsx(Text, { color, children: " ›" }) : jsx(Text, { dimColor: true, children: " ›" })
-    ] });
-  }
-  const dots = Array.from(
-    { length: totalPages },
-    (_, i) => i === currentPage ? jsx(Text, { color, children: "●" }, i) : jsx(Text, { dimColor: true, children: "○" }, i)
-  );
-  return jsx(Box, { gap: 1, children: dots });
-}
+};
 
 export { Paginator as default };

package/dist/packem_shared/Paragraph-CNNhfepo.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+function Paragraph({ children, color, dimColor = false, marginBottom = 1, marginTop = 0 }) {
+  return jsx(Box, { flexDirection: "column", marginBottom, marginTop, children: jsx(Text, { color, dimColor, children }) });
+}
+
+export { Paragraph as default };

package/dist/packem_shared/Placeholder-DkM69Q8Z.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import useAnimation from './useAnimation-DV22qxiJ.js';
+import useWindowSize from './useWindowSize-D3UU41mv.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const DEFAULT_WIDTHS = [1, 0.85, 0.6];
+function Placeholder({
+  animated = true,
+  character = "█",
+  color = "gray",
+  interval = 500,
+  rows = 3,
+  width,
+  widths = DEFAULT_WIDTHS
+}) {
+  const { frame } = useAnimation({ interval, isActive: animated });
+  const { columns } = useWindowSize();
+  const dim = animated && frame % 2 === 0;
+  const baseWidth = width ?? Math.max(1, columns);
+  return jsx(Box, { flexDirection: "column", width, children: Array.from({ length: rows }, (_, index) => {
+    const ratio = widths.length > 0 ? widths[index % widths.length] ?? 1 : 1;
+    const effectiveWidth = Math.max(1, Math.round(baseWidth * ratio));
+    const fill = character.repeat(effectiveWidth);
+    return jsx(Box, { width: effectiveWidth, children: jsx(Text, { color, dimColor: dim, wrap: "truncate-end", children: fill }) }, index);
+  }) });
+}
+
+export { Placeholder as default };

package/dist/packem_shared/{ProgressBar-DOfpVagn.js → ProgressBar-B7cS4uQm.js}

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import useWindowSize from './useWindowSize-ugEmGZJm.js';
-import Text from './Text-DvAUdZcK.js';
+import useWindowSize from './useWindowSize-D3UU41mv.js';
+import Text from './Text-CtUwV89_.js';
 
 function ProgressBar({
   character = "█",

package/dist/packem_shared/RadioGroup-B4F9PUyL.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, 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 initialFocusIndex = (options, selectedValue) => {
+  if (selectedValue === void 0) {
+    return 0;
+  }
+  const index = options.findIndex((option) => option.value === selectedValue);
+  return Math.max(index, 0);
+};
+function RadioGroup({
+  accentColor = "blue",
+  autoFocus = false,
+  commitOnNavigate = true,
+  defaultValue,
+  isDisabled = false,
+  onChange,
+  onSubmit,
+  options,
+  orientation = "vertical",
+  value
+}) {
+  const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });
+  const [internal, setInternal] = useState(defaultValue ?? options[0]?.value);
+  const current = value ?? internal;
+  const [focusedIndex, setFocusedIndex] = useState(() => initialFocusIndex(options, current));
+  const focusedIndexRef = useRef(focusedIndex);
+  focusedIndexRef.current = focusedIndex;
+  const commit = useCallback(
+    (index) => {
+      const target = options[index];
+      if (!target) {
+        return;
+      }
+      const currentValue = value ?? internal;
+      if (target.value === currentValue) {
+        return;
+      }
+      if (value === void 0) {
+        setInternal(target.value);
+      }
+      onChange?.(target.value);
+    },
+    [options, value, internal, onChange]
+  );
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (!isFocused) {
+          return;
+        }
+        const total = options.length;
+        if (total === 0) {
+          return;
+        }
+        const moveNext = key.downArrow && orientation === "vertical" || key.rightArrow && orientation === "horizontal" || input === "j";
+        const movePrevious = key.upArrow && orientation === "vertical" || key.leftArrow && orientation === "horizontal" || input === "k";
+        if (moveNext) {
+          const nextIndex = Math.min(total - 1, focusedIndexRef.current + 1);
+          setFocusedIndex(nextIndex);
+          if (commitOnNavigate) {
+            commit(nextIndex);
+          }
+          return;
+        }
+        if (movePrevious) {
+          const nextIndex = Math.max(0, focusedIndexRef.current - 1);
+          setFocusedIndex(nextIndex);
+          if (commitOnNavigate) {
+            commit(nextIndex);
+          }
+          return;
+        }
+        if (input === " ") {
+          commit(focusedIndexRef.current);
+          return;
+        }
+        if (key.return) {
+          if (!commitOnNavigate) {
+            commit(focusedIndexRef.current);
+          }
+          const submitValue = options[focusedIndexRef.current]?.value ?? current;
+          if (submitValue !== void 0) {
+            onSubmit?.(submitValue);
+          }
+        }
+      },
+      [isFocused, options, orientation, commit, commitOnNavigate, current, onSubmit]
+    ),
+    { isActive: !isDisabled && isFocused }
+  );
+  return jsx(Box, { flexDirection: orientation === "vertical" ? "column" : "row", gap: orientation === "vertical" ? 0 : 2, children: options.map((option, index) => {
+    const isSelected = option.value === current;
+    const isItemFocused = isFocused && index === focusedIndex;
+    const color = (isSelected || isItemFocused) && isFocused ? accentColor : void 0;
+    return jsxs(Box, { gap: 1, children: [
+      jsx(Text, { color, dimColor: isDisabled, children: isSelected ? "●" : "○" }),
+      jsx(Text, { bold: isItemFocused, color, dimColor: isDisabled, children: option.label }),
+      option.description === void 0 ? void 0 : jsx(Text, { dimColor: true, children: option.description })
+    ] }, option.key ?? option.value);
+  }) });
+}
+
+export { RadioGroup as default };

package/dist/packem_shared/{ResizeObserverEntry-Br4seLeQ.js → ResizeObserverEntry-Vr8GZ74x.js}

@@ -21,8 +21,8 @@ class ResizeObserver {
     element.resizeObservers.add(this);
     let lastMeasuredSize = element.internal_lastMeasuredSize;
     if (lastMeasuredSize === void 0 && element.yogaNode) {
-      const width = element.yogaNode.getComputedWidth();
-      const height = element.yogaNode.getComputedHeight();
+      const width = Math.round(element.yogaNode.getComputedWidth());
+      const height = Math.round(element.yogaNode.getComputedHeight());
       if (!Number.isNaN(width) && !Number.isNaN(height)) {
         lastMeasuredSize = { height, width };
         element.internal_lastMeasuredSize = lastMeasuredSize;
@@ -61,8 +61,8 @@ class ResizeObserver {
 function measureAndExtractObservers(node, observerEntries, forceCache = false) {
   const hasObservers = node.resizeObservers && node.resizeObservers.size > 0;
   if ((hasObservers || forceCache) && node.yogaNode) {
-    const width = node.yogaNode.getComputedWidth();
-    const height = node.yogaNode.getComputedHeight();
+    const width = Math.round(node.yogaNode.getComputedWidth());
+    const height = Math.round(node.yogaNode.getComputedHeight());
     if (!Number.isNaN(width) && !Number.isNaN(height)) {
       const lastSize = node.internal_lastMeasuredSize;
       if (lastSize?.width !== width || lastSize.height !== height) {