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

package/dist/packem_shared/{ConsoleOverlay-DBNa4vtj.js → ConsoleOverlay-BvnCEgjG.js}

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import useConsoleCapture from './useConsoleCapture-Dvt7G1W1.js';
-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 LEVEL_COLORS = {
   debug: "gray",

package/dist/packem_shared/ContentSwitcher-BHFpO5Za.js

@@ -0,0 +1,81 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, 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 ContentSwitcher({
+  accentColor = "blue",
+  autoFocus = false,
+  defaultValue,
+  isDisabled = false,
+  onChange,
+  options,
+  value
+}) {
+  const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });
+  const initialId = defaultValue ?? options[0]?.id;
+  const [internal, setInternal] = useState(initialId);
+  const current = value ?? internal;
+  const currentIndex = useMemo(() => {
+    if (current === void 0) {
+      return 0;
+    }
+    const index = options.findIndex((option) => option.id === current);
+    return Math.max(index, 0);
+  }, [options, current]);
+  const commit = useCallback(
+    (index) => {
+      const target = options[index];
+      if (!target) {
+        return;
+      }
+      const currentId = value ?? internal;
+      if (target.id === currentId) {
+        return;
+      }
+      if (value === void 0) {
+        setInternal(target.id);
+      }
+      onChange?.(target.id);
+    },
+    [options, value, internal, onChange]
+  );
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (!isFocused) {
+          return;
+        }
+        if (key.leftArrow || input === "h") {
+          commit(Math.max(0, currentIndex - 1));
+        } else if (key.rightArrow || input === "l") {
+          commit(Math.min(options.length - 1, currentIndex + 1));
+        }
+      },
+      [isFocused, currentIndex, options.length, commit]
+    ),
+    { isActive: !isDisabled && isFocused }
+  );
+  const activeOption = options[currentIndex];
+  return jsxs(Box, { flexDirection: "column", children: [
+    jsx(Box, { children: options.map((option, index) => {
+      const isActive = index === currentIndex;
+      const background = isActive ? accentColor : void 0;
+      const color = isActive ? "black" : void 0;
+      return jsxs(Text, { backgroundColor: background, color, dimColor: isDisabled && !isActive, children: [
+        " ",
+        option.icon === void 0 ? void 0 : jsxs(Fragment, { children: [
+          option.icon,
+          " "
+        ] }),
+        option.label,
+        " "
+      ] }, option.id);
+    }) }),
+    activeOption === void 0 ? void 0 : jsx(Box, { flexDirection: "column", marginTop: 1, children: activeOption.content })
+  ] });
+}
+
+export { ContentSwitcher as default };

package/dist/packem_shared/ControlledScrollView-C2wOOlJO.js

@@ -0,0 +1,5 @@
+import 'react/jsx-runtime';
+import 'react';
+import './measure-element-Bc6PEaIe.js';
+import './Box-W1w_NGin.js';
+export { C as ControlledScrollView } from './controlled-scroll-view-DJXfdWMm.js';

package/dist/packem_shared/DatePicker-CPejKoqS.js

@@ -0,0 +1,73 @@
+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 Calendar from './Calendar-C2Qxt-LA.js';
+import Text from './Text-CtUwV89_.js';
+
+const defaultFormat = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+function DatePicker({
+  accentColor = "blue",
+  autoFocus = false,
+  defaultValue,
+  formatValue = defaultFormat,
+  isDisabled = false,
+  maxDate,
+  minDate,
+  onChange,
+  placeholder = "Pick a date",
+  value
+}) {
+  const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });
+  const [isOpen, setIsOpen] = useState(false);
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value ?? internal;
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (!isFocused || isOpen) {
+          return;
+        }
+        if (key.return || input === " ") {
+          setIsOpen(true);
+        }
+      },
+      [isFocused, isOpen]
+    ),
+    { isActive: !isDisabled && isFocused && !isOpen }
+  );
+  useInput(
+    useCallback((_input, key) => {
+      if (key.escape) {
+        setIsOpen(false);
+      }
+    }, []),
+    { isActive: !isDisabled && isFocused && isOpen }
+  );
+  const handleCalendarSubmit = useCallback(
+    (date) => {
+      if (value === void 0) {
+        setInternal(date);
+      }
+      setIsOpen(false);
+      onChange?.(date);
+    },
+    [value, onChange]
+  );
+  return jsxs(Box, { flexDirection: "column", children: [
+    jsxs(Box, { borderColor: isFocused ? accentColor : void 0, borderStyle: "round", paddingX: 1, children: [
+      jsx(Text, { color: accentColor, children: "📅 " }),
+      current === void 0 ? jsx(Text, { dimColor: true, children: placeholder }) : jsx(Text, { bold: true, children: formatValue(current) }),
+      isFocused && !isOpen ? jsx(Box, { marginLeft: 1, children: jsx(Text, { dimColor: true, children: "(Enter to open)" }) }) : void 0
+    ] }),
+    isOpen ? jsx(Box, { marginTop: 1, children: jsx(Calendar, { accentColor, autoFocus: true, defaultValue: current, maxDate, minDate, onSubmit: handleCalendarSubmit }) }) : void 0
+  ] });
+}
+
+export { DatePicker as default };

package/dist/packem_shared/DefinitionList-BAwr0l5J.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+function DefinitionList({ columnGap = 2, items, layout = "inline", termColor = "cyan", termWidth }) {
+  if (layout === "stacked") {
+    return jsx(Box, { flexDirection: "column", gap: 1, children: items.map((item, index) => jsxs(Box, { flexDirection: "column", children: [
+      jsx(Text, { bold: true, color: termColor, children: item.term }),
+      jsx(Text, { children: item.description })
+    ] }, item.key ?? index)) });
+  }
+  return jsx(Box, { flexDirection: "column", children: items.map((item, index) => jsxs(Box, { gap: columnGap, children: [
+    jsx(Box, { flexShrink: 0, width: termWidth, children: jsx(Text, { color: termColor, children: item.term }) }),
+    jsx(Box, { flexGrow: 1, flexShrink: 1, children: jsx(Text, { children: item.description }) })
+  ] }, item.key ?? index)) });
+}
+
+export { DefinitionList as default };

package/dist/packem_shared/{DevTools-aMPIsaHx.js → DevTools-BdxRSkhL.js}

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
-import { useWindowSize, useTuiContext } from './TuiContext-CqEjMyXd.js';
-import { _Box, _Spacer, _Text } from './render-Bpjhf0lD.js';
+import { useWindowSize, useTuiContext } from './TuiContext-lXmJFd-x.js';
+import { _Box, _Spacer, _Text } from './render-CjlKdg4m.js';
 
 function useFpsCounter() {
   const { app } = useTuiContext();
@@ -11,8 +11,9 @@ function useFpsCounter() {
   const idleTimer = useRef(null);
   useEffect(() => {
     const onRender = () => {
-      if (idleTimer.current)
+      if (idleTimer.current) {
         clearTimeout(idleTimer.current);
+      }
       idleTimer.current = setTimeout(() => {
         setFps(0);
         frames.current = 0;
@@ -32,8 +33,9 @@ function useFpsCounter() {
     });
     return () => {
       unsub();
-      if (idleTimer.current)
+      if (idleTimer.current) {
         clearTimeout(idleTimer.current);
+      }
     };
   }, [app]);
   return fps;

package/dist/packem_shared/{Dialog-DsSNAVgC.js → Dialog-S9r7Izff.js}

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef } from 'react';
-import useTerminalPalette from './useTerminalPalette-BaWO2c4Q.js';
-import useWindowSize from './useWindowSize-ugEmGZJm.js';
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
-import { ScrollView } from './ScrollView-v3MCNIyX.js';
+import useTerminalPalette from './useTerminalPalette-CtFG2JTq.js';
+import useWindowSize from './useWindowSize-D3UU41mv.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+import { ScrollView } from './ScrollView-C6rdlGwU.js';
 
 const Dialog = ({
   backgroundColor: backgroundColorProp,

package/dist/packem_shared/{DiffView-hqaw-2S6.js → DiffView-BR4T6-Sj.js}

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPatch, parsePatch, diffWords, diffChars } from 'diff';
 import { useMemo, useState, useRef, useEffect } from 'react';
-import { r as resolveLanguage, i as isLanguageSupported, g as getHighlighter, a as getCachedTokens, b as renderTokenLine } from './token-to-elements-BRFl_rzw.js';
-import useWindowSize from './useWindowSize-ugEmGZJm.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, b as renderTokenLine } from './token-to-elements-CK4s8MJd.js';
+import useWindowSize from './useWindowSize-D3UU41mv.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
 
 const renderHighlightedContent = (content, highlightedLines, lineNumber, fallbackColor) => {
   if (!highlightedLines || lineNumber === void 0 || lineNumber < 1 || lineNumber > highlightedLines.length) {

package/dist/packem_shared/Divider-DocXIqNn.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import useWindowSize from './useWindowSize-D3UU41mv.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+function Divider({ character, color, dimColor = false, label, labelPadding = 1, length, orientation = "horizontal" }) {
+  const { columns } = useWindowSize();
+  const char = character ?? (orientation === "horizontal" ? "─" : "│");
+  if (orientation === "vertical") {
+    const rows = length ?? 1;
+    return jsx(Box, { flexDirection: "column", height: rows, children: Array.from({ length: rows }, (_, index) => jsx(Text, { color, dimColor, children: char }, `divider-row-${index}`)) });
+  }
+  const MAX_FILL = 500;
+  const fillLength = Math.min(MAX_FILL, length ?? Math.max(columns, 1));
+  if (label === void 0) {
+    return jsx(Box, { flexGrow: length === void 0 ? 1 : 0, width: length, children: jsx(Text, { color, dimColor, wrap: "truncate", children: char.repeat(fillLength) }) });
+  }
+  const padding = " ".repeat(labelPadding);
+  return jsxs(Box, { flexGrow: length === void 0 ? 1 : 0, width: length, children: [
+    jsx(Box, { flexGrow: 1, flexShrink: 1, children: jsx(Text, { color, dimColor, wrap: "truncate", children: char.repeat(fillLength) }) }),
+    jsx(Box, { flexShrink: 0, children: jsxs(Text, { color, dimColor, children: [
+      padding,
+      label,
+      padding
+    ] }) }),
+    jsx(Box, { flexGrow: 1, flexShrink: 1, children: jsx(Text, { color, dimColor, wrap: "truncate", children: char.repeat(fillLength) }) })
+  ] });
+}
+
+export { Divider as default };

package/dist/packem_shared/{FilePicker-DNwFxRhq.js → FilePicker-BZ55oF_n.js}

@@ -19,10 +19,10 @@ const __cjs_getBuiltinModule = (module) => {
 
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback } from 'react';
-import useInput from './useInput-Cfp5zB2s.js';
-import Box from './Box-D_pSJ9Jp.js';
-import Spinner from './Spinner-BuI-kN4p.js';
-import Text from './Text-DvAUdZcK.js';
+import useInput from './useInput-DKZbqMRc.js';
+import Box from './Box-W1w_NGin.js';
+import Spinner from './Spinner-BcO5BCAa.js';
+import Text from './Text-CtUwV89_.js';
 const {
   readdir,
   stat
@@ -35,9 +35,10 @@ const {
 } = __cjs_getBuiltinModule("node:path");
 
 function formatPermissions(mode) {
-  const rwx = (m) => {
-    return `${m & 4 ? "r" : "-"}${m & 2 ? "w" : "-"}${m & 1 ? "x" : "-"}`;
-  };
+  const rwx = (m) => (
+    // eslint-disable-next-line no-bitwise
+    `${m & 4 ? "r" : "-"}${m & 2 ? "w" : "-"}${m & 1 ? "x" : "-"}`
+  );
   return `${rwx(mode >> 6 & 7)}${rwx(mode >> 3 & 7)}${rwx(mode & 7)}`;
 }
 function matchesFilter(entry, filter) {
@@ -51,8 +52,8 @@ function matchesFilter(entry, filter) {
     return false;
   }
   if (filter.extensions && filter.extensions.length > 0 && !entry.isDirectory) {
-    const ext = extname(entry.name);
-    if (!filter.extensions.includes(ext)) {
+    const extension = extname(entry.name);
+    if (!filter.extensions.includes(extension)) {
       return false;
     }
   }
@@ -73,33 +74,36 @@ function useFileSystem(options) {
       setIsLoading(true);
       setError(void 0);
       try {
-        const dirEntries = await readdir(currentPath, { withFileTypes: true });
-        const fileEntries = [];
-        for (const entry of dirEntries) {
+        const directoryEntries = await readdir(currentPath, { withFileTypes: true });
+        const statsResults = await Promise.all(
+          directoryEntries.map(async (entry) => {
+            try {
+              return await stat(join(currentPath, entry.name));
+            } catch {
+              return void 0;
+            }
+          })
+        );
+        const fileEntries = directoryEntries.map((entry, index) => {
           const entryPath = join(currentPath, entry.name);
           const isDirectory = entry.isDirectory();
           const isHidden = entry.name.startsWith(".");
-          let size = 0;
-          let permissions = "---------";
-          try {
-            const stats = await stat(entryPath);
-            size = stats.size;
-            permissions = formatPermissions(stats.mode);
-          } catch {
-          }
-          fileEntries.push({
+          const stats = statsResults[index];
+          const size = stats?.size ?? 0;
+          const permissions = stats ? formatPermissions(stats.mode) : "---------";
+          return {
             isDirectory,
             isHidden,
             name: entry.name,
             path: entryPath,
             permissions,
             size
-          });
-        }
+          };
+        });
         if (cancelled) {
           return;
         }
-        const filtered = fileEntries.filter((e) => matchesFilter(e, filterRef.current));
+        const filtered = fileEntries.filter((entry) => matchesFilter(entry, filterRef.current));
         filtered.sort((a, b) => {
           if (a.isDirectory !== b.isDirectory) {
             return a.isDirectory ? -1 : 1;
@@ -118,7 +122,7 @@ function useFileSystem(options) {
         }
       }
     };
-    void loadDirectory();
+    loadDirectory().catch(() => void 0);
     return () => {
       cancelled = true;
     };
@@ -150,20 +154,23 @@ function formatSize(bytes) {
   }
   return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)}G`;
 }
-function FilePicker({
+const EMPTY_FILTER = {};
+const getDefaultInitialPath = () => process.cwd();
+const FilePicker = ({
   accentColor = "cyan",
   directoryColor = "blue",
   fileColor = "white",
-  filter = {},
-  initialPath = process.cwd(),
+  filter = EMPTY_FILTER,
+  initialPath,
   isFocused = true,
   limit = 10,
   onCancel,
   onSelect,
   showPermissions = false,
   showSize = false
-}) {
-  const fs = useFileSystem({ filter, initialPath });
+}) => {
+  const resolvedInitialPath = initialPath ?? getDefaultInitialPath();
+  const fs = useFileSystem({ filter, initialPath: resolvedInitialPath });
   const [focusedIndex, setFocusedIndex] = useState(0);
   const maxIndex = Math.max(0, fs.entries.length - 1);
   const safeIndex = Math.min(focusedIndex, maxIndex);
@@ -217,7 +224,7 @@ function FilePicker({
       jsx(Text, { children: " Loading..." })
     ] }),
     fs.error && jsxs(Text, { color: "red", children: [
-      "Error: ",
+      "Error:",
       fs.error
     ] }),
     !fs.isLoading && !fs.error && fs.entries.length === 0 && jsx(Text, { dimColor: true, children: "(empty directory)" }),
@@ -249,6 +256,6 @@ function FilePicker({
       fs.entries.length
     ] })
   ] });
-}
+};
 
 export { FilePicker as default };

package/dist/packem_shared/FormField-BSG16cnA.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const FormField = ({ children, description, error, isDisabled = false, label, required = false }) => jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+  jsxs(Box, { children: [
+    jsx(Text, { bold: true, dimColor: isDisabled, children: label }),
+    required ? jsx(Text, { color: "red", children: " *" }) : void 0
+  ] }),
+  jsx(Box, { marginTop: 0, children }),
+  error === void 0 ? description === void 0 ? void 0 : jsx(Text, { dimColor: true, children: description }) : jsx(Text, { color: "red", children: error })
+] });
+const Form = Object.assign(
+  ({ accentColor = "blue", bordered = true, children, description, footer, title, width }) => {
+    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 }) }),
+      description === void 0 ? void 0 : jsx(Box, { marginBottom: 1, children: jsx(Text, { dimColor: true, children: description }) }),
+      jsx(Box, { flexDirection: "column", children }),
+      footer === void 0 ? void 0 : jsx(Box, { marginTop: 1, children: footer })
+    ] });
+    if (!bordered) {
+      return jsx(Box, { flexDirection: "column", width, children: content });
+    }
+    return jsx(Box, { borderColor: accentColor, borderStyle: "round", flexDirection: "column", paddingX: 1, paddingY: 1, width, children: content });
+  },
+  { Field: FormField }
+);
+
+export { FormField, Form as default };

package/dist/packem_shared/{Fullscreen-DrElAE1o.js → Fullscreen-DO7voOq5.js}

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
-import Box from './Box-D_pSJ9Jp.js';
-import useWindowSize from './useWindowSize-ugEmGZJm.js';
+import Box from './Box-W1w_NGin.js';
+import useWindowSize from './useWindowSize-D3UU41mv.js';
 
 const Fullscreen = ({ children }) => {
   const { columns, rows } = useWindowSize();

package/dist/packem_shared/Gauge-CKXUXxft.js

@@ -0,0 +1,122 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { c as createBrailleGrid } from './braille-BoEWoH2I.js';
+import Box from './Box-W1w_NGin.js';
+import Canvas from './Canvas-COttmLPX.js';
+import Text from './Text-CtUwV89_.js';
+
+const SIZES = {
+  large: { cols: 40, rows: 10 },
+  medium: { cols: 24, rows: 6 },
+  small: { cols: 16, rows: 4 }
+};
+const NEEDLE_RATIO = 0.9;
+const ARC_ANGLE_STEPS_PER_PIXEL = 2;
+const defaultFormat = (value) => String(Math.round(value));
+const thresholdAtRatio = (thresholds, min, max, ratio) => {
+  const value = min + (max - min) * ratio;
+  for (const threshold of thresholds) {
+    if (value <= threshold.max) {
+      return threshold;
+    }
+  }
+  return thresholds[thresholds.length - 1];
+};
+function Gauge({
+  backgroundColor = "gray",
+  formatValue = defaultFormat,
+  label,
+  max = 100,
+  min = 0,
+  showLegend = false,
+  showValue = true,
+  size = "medium",
+  thresholds,
+  value
+}) {
+  const { cols, rows } = SIZES[size];
+  const clampedValue = Math.max(min, Math.min(max, value));
+  const range = max - min || 1;
+  const ratio = (clampedValue - min) / range;
+  const sortedThresholds = useMemo(() => {
+    if (thresholds === void 0 || thresholds.length === 0) {
+      return void 0;
+    }
+    return [...thresholds].sort((a, b) => a.max - b.max);
+  }, [thresholds]);
+  const activeThreshold = useMemo(() => {
+    if (sortedThresholds === void 0) {
+      return void 0;
+    }
+    return thresholdAtRatio(sortedThresholds, min, max, ratio);
+  }, [sortedThresholds, min, max, ratio]);
+  const readout = formatValue(clampedValue);
+  return jsxs(Box, { flexDirection: "column", children: [
+    jsx(
+      Canvas,
+      {
+        draw: (context) => {
+          context.clear();
+          const pixelWidth = context.width * 2;
+          const pixelHeight = context.height * 4;
+          const cx = pixelWidth / 2;
+          const cy = pixelHeight - 1;
+          const rx = pixelWidth / 2 - 1;
+          const ry = pixelHeight - 1;
+          const radius = Math.max(1, Math.min(rx, ry));
+          const gridsByColor = /* @__PURE__ */ new Map();
+          const gridFor = (color) => {
+            const existing = gridsByColor.get(color);
+            if (existing !== void 0) {
+              return existing;
+            }
+            const grid = createBrailleGrid(context.width, context.height);
+            gridsByColor.set(color, grid);
+            return grid;
+          };
+          const arcSteps = Math.max(32, Math.round(Math.PI * radius) * ARC_ANGLE_STEPS_PER_PIXEL);
+          for (let step = 0; step <= arcSteps; step += 1) {
+            const stepRatio = step / arcSteps;
+            const angle = Math.PI * (1 - stepRatio);
+            const px = Math.round(cx + radius * Math.cos(angle));
+            const py = Math.round(cy - radius * Math.sin(angle));
+            let color;
+            if (stepRatio > ratio) {
+              color = backgroundColor;
+            } else if (sortedThresholds) {
+              const segment = thresholdAtRatio(sortedThresholds, min, max, stepRatio);
+              color = segment?.color ?? "cyan";
+            } else {
+              color = "cyan";
+            }
+            const grid = gridFor(color);
+            grid.plotPoint(px, py);
+          }
+          const needleRadius = radius * NEEDLE_RATIO;
+          const needleAngle = Math.PI * (1 - ratio);
+          const nx = Math.round(cx + needleRadius * Math.cos(needleAngle));
+          const ny = Math.round(cy - needleRadius * Math.sin(needleAngle));
+          const needleColor = activeThreshold?.color ?? "white";
+          const needleGrid = gridFor(needleColor);
+          needleGrid.plotLine(Math.round(cx), Math.round(cy), nx, ny);
+          for (const [color, grid] of gridsByColor) {
+            grid.flush(context, { color });
+          }
+        },
+        height: rows,
+        version: [value, min, max, size, thresholds, backgroundColor],
+        width: cols
+      }
+    ),
+    showValue || label ? jsxs(Box, { flexDirection: "column", children: [
+      label === void 0 ? void 0 : jsx(Box, { justifyContent: "center", children: jsx(Text, { dimColor: true, children: label }) }),
+      showValue ? jsx(Box, { justifyContent: "center", children: jsx(Text, { bold: true, color: activeThreshold?.color ?? "white", children: readout }) }) : void 0
+    ] }) : void 0,
+    showLegend && thresholds && thresholds.length > 0 ? jsx(Box, { gap: 2, justifyContent: "center", marginTop: 1, children: thresholds.map((threshold, index) => jsxs(Box, { gap: 1, children: [
+      jsx(Text, { color: threshold.color, children: "●" }),
+      jsx(Text, { dimColor: true, children: threshold.label ?? `≤ ${threshold.max}` })
+    ] }, index)) }) : void 0
+  ] });
+}
+
+export { Gauge as default };

package/dist/packem_shared/{Gradient-Ql5P0GUd.js → Gradient-Dg0NezWc.js}

@@ -2,9 +2,9 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { strip } from '@visulima/ansi';
 import { multilineGradient } from '@visulima/colorize/gradient';
 import { useMemo, Children, isValidElement, cloneElement } from 'react';
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
-import Transform from './Transform-BHxY_dAM.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+import Transform from './Transform-Cfyva2wd.js';
 
 const presets = {
   atlas: { colors: ["#feac5e", "#c779d0", "#4bc0c8"] },

package/dist/packem_shared/Heading-BnR7McmP.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const LEVEL_COLOR = {
+  1: "blueBright",
+  2: "cyanBright",
+  3: "magentaBright",
+  4: "yellowBright",
+  5: "green",
+  6: "white"
+};
+const LEVEL_PREFIX = {
+  1: "# ",
+  2: "## ",
+  3: "### ",
+  4: "#### ",
+  5: "##### ",
+  6: "###### "
+};
+function Heading({ children, color, level = 1, underline = false }) {
+  const resolvedColor = color ?? LEVEL_COLOR[level];
+  return jsx(Box, { flexDirection: "column", children: jsxs(Text, { bold: level <= 2, color: resolvedColor, underline, children: [
+    LEVEL_PREFIX[level],
+    children
+  ] }) });
+}
+
+export { Heading as default };