@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-O76QXRBV.js

@@ -0,0 +1,431 @@
+import { CopyButton } from './chunk-TYOSA7JG.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { View, Text, TextInput, Pressable, ScrollView } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/code-block/tokenize.ts
+var RE = /(\/\*[\s\S]*?\*\/|\/\/[^\n]*|(?:^|\n)[ \t]*#[^\n!][^\n]*)|("(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*'|`(?:[^`\\]|\\.)*`)|(<\/?[A-Za-z][\w.-]*|\/?>)|(--[a-z][a-z0-9-]*|@[A-Za-z_]\w*)|(#[0-9a-fA-F]{3,8}\b|\b0[xXbBoO][0-9a-fA-F]+\b|\b\d+(?:\.\d+)?(?:px|em|rem|ch|ms|s|%)?\b)|\b(?:import|from|export|default|const|let|var|function|func|fn|def|return|new|await|async|yield|if|elif|else|for|while|do|switch|case|match|when|break|continue|class|struct|interface|enum|trait|impl|extends|implements|typeof|instanceof|in|of|is|as|and|or|not|true|false|null|nil|none|undefined|void|public|private|protected|internal|static|final|abstract|readonly|type|namespace|module|package|use|using|require|include|pub|mut|self|super|throw|throws|try|catch|finally|with|lambda|print|echo|npm|pnpm|yarn|install)\b/g;
+function tokenizeLine(line) {
+  const out = [];
+  let last = 0;
+  for (const m of line.matchAll(RE)) {
+    const at = m.index ?? 0;
+    if (at > last) out.push({ text: line.slice(last, at), role: null });
+    const role = m[1] ? "com" : m[2] ? "str" : m[3] ? "tag" : m[4] ? "tok" : m[5] ? "num" : "kw";
+    out.push({ text: m[0], role });
+    last = at + m[0].length;
+  }
+  if (last < line.length) out.push({ text: line.slice(last), role: null });
+  return out;
+}
+var DEFAULT_LABELS = {
+  copyCode: "Copy code",
+  showMore: (hidden) => `Show ${hidden} more line${hidden === 1 ? "" : "s"}`,
+  showFewer: "Show fewer lines",
+  find: "Find in code",
+  findPlaceholder: "Find",
+  noMatches: "No matches",
+  matchCount: (current, total) => `${current} of ${total}`,
+  previousMatch: "Previous match",
+  nextMatch: "Next match",
+  closeFind: "Close find"
+};
+var MIN_HIDDEN = 4;
+function CodeBlock({
+  code,
+  labels: labelsProp,
+  language,
+  showLineNumbers = true,
+  wrap = false,
+  copyable = true,
+  onCopy,
+  caption,
+  filename,
+  maxHeight,
+  highlightLines,
+  // `motion` is accepted for API parity only — a code block never animates.
+  motion: _motion,
+  size = "md",
+  variant = "default",
+  tone = "default",
+  syntax = false,
+  headerDot = false,
+  highlightBar = false,
+  collapseAfter,
+  defaultExpanded = false,
+  surface = "theme",
+  findable = false,
+  findQuery,
+  defaultFindQuery = "",
+  onFindQueryChange,
+  onCloseFind
+}) {
+  const labels = useLabels("codeBlock", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("code-block");
+  const typeStep = size === "sm" ? theme.type.caption1 : size === "lg" ? theme.type.subheadline : null;
+  const sizeStyle = typeStep ? { fontSize: typeStep.fontSize, lineHeight: typeStep.lineHeight } : void 0;
+  const lines = code.split("\n");
+  const label = filename ?? caption;
+  const hasHeader = Boolean(label || language);
+  const highlighted = React.useMemo(() => new Set(highlightLines ?? []), [highlightLines]);
+  const dark = surface === "dark";
+  const panel = dark ? theme.codePanelDark : theme.codePanel;
+  const ink = dark || syntax ? { bg: panel.bg, fg: panel.fg, muted: panel.muted } : { bg: theme.code.bg, fg: theme.code.fg, muted: `${theme.code.fg}b3` };
+  const wash = dark ? theme.white : theme.overlay;
+  const roleInk = {
+    com: panel.com,
+    str: panel.str,
+    tag: panel.fn,
+    tok: panel.good,
+    num: panel.num,
+    kw: panel.kw
+  };
+  const dotColor = tone !== "default" ? theme.edge[tone] : theme.color.accent;
+  const [expanded, setExpanded] = React.useState(defaultExpanded);
+  const hidden = collapseAfter === void 0 ? 0 : lines.length - collapseAfter;
+  const collapsible = hidden >= MIN_HIDDEN;
+  const shown = collapsible && !expanded ? lines.slice(0, collapseAfter) : lines;
+  const [ownQuery, setOwnQuery] = React.useState(defaultFindQuery);
+  const query = findable ? findQuery ?? ownQuery : "";
+  const [current, setCurrent] = React.useState(0);
+  const needle = query.toLowerCase();
+  const matches = React.useMemo(() => {
+    const perLine = [];
+    let total = 0;
+    const starts = [];
+    for (const line of shown) {
+      const hits = [];
+      if (needle) {
+        const lower = line.toLowerCase();
+        for (let at = lower.indexOf(needle); at !== -1; at = lower.indexOf(needle, at + needle.length)) {
+          hits.push(at);
+        }
+      }
+      starts.push(total);
+      total += hits.length;
+      perLine.push(hits);
+    }
+    return { perLine, starts, total };
+  }, [shown, needle]);
+  const active = matches.total ? Math.min(current, matches.total - 1) : 0;
+  const step = (by) => {
+    if (matches.total) setCurrent((active + by + matches.total) % matches.total);
+  };
+  const setQuery = (next) => {
+    setOwnQuery(next);
+    setCurrent(0);
+    onFindQueryChange?.(next);
+  };
+  const renderLine = (line, i) => {
+    const base = syntax ? tokenizeLine(line) : [{ text: line, role: null }];
+    const hits = matches.perLine[i] ?? [];
+    if (!hits.length && base.length <= 1 && !base[0]?.role) return line.length ? line : " ";
+    const out = [];
+    let offset = 0;
+    base.forEach((seg, k) => {
+      let pos = 0;
+      while (pos < seg.text.length) {
+        const abs = offset + pos;
+        const hitIdx = hits.findIndex((h) => abs >= h && abs < h + needle.length);
+        let end = seg.text.length;
+        for (const h of hits) {
+          if (h > abs) end = Math.min(end, h - offset);
+        }
+        if (hitIdx !== -1) end = Math.min(end, hits[hitIdx] + needle.length - offset);
+        const style = {};
+        if (seg.role) style.color = roleInk[seg.role];
+        if (hitIdx !== -1) {
+          style.backgroundColor = matches.starts[i] + hitIdx === active ? wash.a8 : wash.a5;
+        }
+        out.push(
+          /* @__PURE__ */ jsx(Text, { style, children: seg.text.slice(pos, end) }, `${k}-${pos}`)
+        );
+        pos = end;
+      }
+      offset += seg.text.length;
+    });
+    return out.length ? out : " ";
+  };
+  const rows = shown.map((line, i) => {
+    const n = i + 1;
+    const isHot = highlighted.has(n);
+    const contentStyle = wrap ? styles.codeWrap : styles.codeNoWrap;
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          styles.line,
+          !showLineNumbers && styles.lineInset,
+          // Highlighted line: the panel wash, plus an accent start bar when asked.
+          isHot && { backgroundColor: wash.a2 }
+        ],
+        children: [
+          isHot && highlightBar ? /* @__PURE__ */ jsx(
+            View,
+            {
+              testID: "code-block-bar",
+              style: [styles.bar, { backgroundColor: theme.color.accent }]
+            }
+          ) : null,
+          showLineNumbers ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              testID: "code-block-gutter",
+              style: [styles.gutter, sizeStyle, { color: isHot ? ink.fg : ink.muted }],
+              importantForAccessibility: "no",
+              accessibilityElementsHidden: true,
+              children: n
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(Text, { style: [styles.code, sizeStyle, contentStyle, { color: ink.fg }], selectable: true, children: renderLine(line, i) })
+        ]
+      },
+      i
+    );
+  });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.root,
+        variant === "plain" && styles.rootPlain,
+        { backgroundColor: variant === "plain" ? "transparent" : ink.bg },
+        tone !== "default" && { borderColor: theme.edge[tone] },
+        dark && tone === "default" && { borderColor: wash.a5 }
+      ],
+      children: [
+        hasHeader ? /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.headerLabels, children: [
+            headerDot ? /* @__PURE__ */ jsx(
+              View,
+              {
+                testID: "code-block-dot",
+                importantForAccessibility: "no",
+                style: [styles.dot, { backgroundColor: dotColor }]
+              }
+            ) : null,
+            label ? /* @__PURE__ */ jsx(Text, { style: [styles.filename, { color: ink.fg }], numberOfLines: 1, children: label }) : null,
+            language ? /* @__PURE__ */ jsx(Text, { style: [styles.language, { color: ink.fg }], children: language.toUpperCase() }) : null
+          ] }),
+          copyable ? /* @__PURE__ */ jsx(CopyButton, { value: code, onCopy, accessibilityLabel: labels.copyCode }) : null
+        ] }) : copyable ? /* @__PURE__ */ jsx(View, { style: styles.corner, children: /* @__PURE__ */ jsx(CopyButton, { value: code, onCopy, accessibilityLabel: labels.copyCode }) }) : null,
+        findable ? /* @__PURE__ */ jsxs(
+          View,
+          {
+            testID: "code-block-find",
+            accessibilityRole: "search",
+            accessibilityLabel: labels.find,
+            style: [styles.find, { borderBottomColor: wash.a5 }],
+            children: [
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  value: query,
+                  onChangeText: setQuery,
+                  placeholder: labels.findPlaceholder,
+                  placeholderTextColor: ink.muted,
+                  accessibilityLabel: labels.find,
+                  autoCapitalize: "none",
+                  autoCorrect: false,
+                  onSubmitEditing: () => step(1),
+                  style: [
+                    styles.findInput,
+                    { color: ink.fg, borderColor: query ? dotColor : wash.a6, backgroundColor: wash.a2 }
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { testID: "code-block-find-count", style: [styles.findCount, { color: ink.muted }], children: query ? matches.total ? labels.matchCount(active + 1, matches.total) : labels.noMatches : "" }),
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: labels.previousMatch,
+                  disabled: !matches.total,
+                  onPress: () => step(-1),
+                  style: styles.findButton,
+                  children: /* @__PURE__ */ jsx(Icon, { name: "chevron-up", size: theme.space[16], color: ink.muted })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: labels.nextMatch,
+                  disabled: !matches.total,
+                  onPress: () => step(1),
+                  style: styles.findButton,
+                  children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.space[16], color: ink.muted })
+                }
+              ),
+              onCloseFind ? /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: labels.closeFind,
+                  onPress: onCloseFind,
+                  style: styles.findButton,
+                  children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.space[16], color: ink.muted })
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            focusable: true,
+            style: maxHeight ? { maxHeight } : void 0,
+            contentContainerStyle: styles.body,
+            children: wrap ? /* @__PURE__ */ jsx(View, { style: styles.lines, children: rows }) : /* @__PURE__ */ jsx(ScrollView, { horizontal: true, focusable: true, contentContainerStyle: styles.lines, children: rows })
+          }
+        ),
+        collapsible ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityState: { expanded },
+            onPress: () => setExpanded((v) => !v),
+            style: [styles.expand, { borderTopColor: wash.a5 }],
+            children: /* @__PURE__ */ jsx(Text, { style: [styles.expandText, { color: ink.muted }], children: expanded ? labels.showFewer : labels.showMore(hidden) })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    position: "relative",
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.code.bg,
+    overflow: "hidden"
+  },
+  rootPlain: {
+    borderWidth: 0,
+    borderRadius: 0,
+    backgroundColor: "transparent"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space.s3,
+    paddingStart: theme.space.s4,
+    paddingEnd: theme.space.s2,
+    paddingVertical: theme.space.s2,
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
+  headerLabels: {
+    flexShrink: 1,
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: theme.space.s2
+  },
+  filename: {
+    flexShrink: 1,
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.code.fg
+  },
+  language: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    letterSpacing: 1,
+    color: theme.code.fg,
+    opacity: theme.opacity[80]
+  },
+  dot: {
+    width: theme.space[8],
+    height: theme.space[8],
+    borderRadius: theme.radius.full
+  },
+  find: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s2,
+    borderBottomWidth: theme.borderWidth.base
+  },
+  findInput: {
+    flex: 1,
+    minHeight: theme.ctl.sm,
+    paddingHorizontal: theme.space.s3,
+    borderWidth: theme.borderWidth.base,
+    borderRadius: theme.radius.sm,
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize
+  },
+  findCount: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize
+  },
+  findButton: {
+    minWidth: theme.ctl.sm,
+    minHeight: theme.ctl.sm,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  expand: {
+    minHeight: theme.ctl.md,
+    alignItems: "center",
+    justifyContent: "center",
+    borderTopWidth: theme.borderWidth.base
+  },
+  expandText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize
+  },
+  bar: {
+    position: "absolute",
+    start: 0,
+    top: 0,
+    bottom: 0,
+    width: theme.space[2]
+  },
+  corner: {
+    position: "absolute",
+    top: theme.space.s1,
+    end: theme.space.s1,
+    zIndex: theme.z.raised
+  },
+  body: { paddingVertical: theme.space.s3 },
+  lines: { flexDirection: "column" },
+  line: { flexDirection: "row", alignItems: "flex-start" },
+  // No gutter → the code needs the leading inset the gutter would have carried.
+  lineInset: { paddingStart: theme.space.s4 },
+  gutter: {
+    minWidth: theme.space.s6,
+    paddingStart: theme.space.s4,
+    paddingEnd: theme.space.s3,
+    textAlign: "right",
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.code.lineH,
+    // A muted gutter ink that still clears AA (4.5:1) on code.bg: code.fg at 70%
+    // alpha (~5.6:1 light / ~7.2:1 dark). `theme.code.com` is short in dark
+    // (~4.1:1), and `aria-hidden` does not exempt the gutter from axe here.
+    color: `${theme.code.fg}b3`
+  },
+  code: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.code.lineH,
+    color: theme.code.fg,
+    paddingEnd: theme.space.s4
+  },
+  // Wrapped lines take the remaining width so the Text engine can break them.
+  codeWrap: { flex: 1 },
+  // Non-wrapped lines size to their intrinsic width inside the horizontal
+  // ScrollView, so a long line scrolls rather than wrapping.
+  codeNoWrap: {}
+}));
+
+export { CodeBlock };

package/dist/chunk-OANH27AK.js

@@ -0,0 +1,223 @@
+import { useThinkingPulse } from './chunk-LUZFCCSD.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import * as React from 'react';
+import { View, Animated, StyleSheet, Text, Easing } from 'react-native';
+import { Svg, Circle, Path } from 'react-native-svg';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  status: (state) => `Status: ${state}`
+};
+var ICON_BOX = "0 0 12 12";
+function useRingPulse(active) {
+  const theme = useLoamTheme("status-dot");
+  const p = React.useRef(new Animated.Value(0)).current;
+  const { duration, easing } = theme.motion.loop;
+  React.useEffect(() => {
+    if (!active) {
+      p.setValue(0);
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(p, {
+          toValue: 1,
+          duration: duration * 2.5,
+          easing: Easing.bezier(...easing),
+          useNativeDriver: true
+        }),
+        Animated.timing(p, { toValue: 0, duration: 0, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [active, p, duration, easing]);
+  return active ? {
+    opacity: p.interpolate({ inputRange: [0, 1], outputRange: [0.48, 0] }),
+    transform: [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, 2.2] }) }]
+  } : null;
+}
+function renderIcon(state, color) {
+  const stroke = { stroke: color, strokeLinecap: "round", strokeLinejoin: "round" };
+  switch (state) {
+    case "working":
+      return /* @__PURE__ */ jsx(Circle, { cx: 6, cy: 6, r: 3, fill: color });
+    // A clock, so the paused bars belong to `paused` alone.
+    case "waiting":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Circle, { cx: 6, cy: 6, r: 4.2, fill: "none", stroke: color, strokeWidth: 1.3 }),
+        /* @__PURE__ */ jsx(Path, { d: "M6 3.8V6l1.5 1", strokeWidth: 1.3, fill: "none", ...stroke })
+      ] });
+    case "paused":
+      return /* @__PURE__ */ jsx(Path, { d: "M4.5 3.5v5M7.5 3.5v5", strokeWidth: 1.6, fill: "none", ...stroke });
+    case "unknown":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Path,
+          {
+            d: "M4.4 4.6a1.7 1.7 0 0 1 3.3.4c0 1.1-1.7 1.4-1.7 2.4",
+            strokeWidth: 1.3,
+            fill: "none",
+            ...stroke
+          }
+        ),
+        /* @__PURE__ */ jsx(Circle, { cx: 6, cy: 9.4, r: 0.75, fill: color })
+      ] });
+    case "done":
+      return /* @__PURE__ */ jsx(Path, { d: "M3 6.2 5.2 8.4 9 4", strokeWidth: 1.6, fill: "none", ...stroke });
+    case "crashed":
+      return /* @__PURE__ */ jsx(Path, { d: "M3.8 3.8l4.4 4.4M8.2 3.8 3.8 8.2", strokeWidth: 1.6, fill: "none", ...stroke });
+    case "conflict":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Path, { d: "M6 2 10.5 10h-9z", strokeWidth: 1.3, fill: "none", ...stroke }),
+        /* @__PURE__ */ jsx(Path, { d: "M6 5.2v2", strokeWidth: 1.3, fill: "none", ...stroke })
+      ] });
+    case "pending":
+      return /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: 6,
+          cy: 6,
+          r: 3.6,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 1.4,
+          strokeDasharray: "2 1.6"
+        }
+      );
+  }
+}
+function StatusDot({
+  state,
+  size = "sm",
+  label,
+  pulse,
+  motion = "full",
+  pulseStyle = "ring",
+  variant = "shape",
+  accessibilityLabel,
+  count,
+  style,
+  testID,
+  labels: labelsProp
+}) {
+  const labels = useLabels("statusDot", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet, { state, size });
+  const theme = useLoamTheme("status-dot");
+  const still = state === "paused" || state === "unknown";
+  const shouldPulse = !still && (pulse ?? state === "working") && motion === "full" && !theme.reduceMotion;
+  const ink = still ? theme.status.pending : theme.status[state];
+  const breatheStyle = useThinkingPulse(shouldPulse && pulseStyle === "breathe");
+  const ringStyle = useRingPulse(shouldPulse && pulseStyle === "ring" && variant === "shape");
+  const iconPulse = useThinkingPulse(shouldPulse && variant === "icon");
+  const base = accessibilityLabel || label || labels.status(state);
+  const name = count === void 0 || accessibilityLabel ? base : `${base} ${count}`;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel: name,
+      testID,
+      style: [styles.container, style],
+      children: [
+        variant === "icon" ? /* @__PURE__ */ jsx(Animated.View, { style: iconPulse, children: /* @__PURE__ */ jsx(
+          Svg,
+          {
+            width: size === "sm" ? theme.space[12] : theme.space[14],
+            height: size === "sm" ? theme.space[12] : theme.space[14],
+            viewBox: ICON_BOX,
+            children: renderIcon(state, ink)
+          }
+        ) }) : /* @__PURE__ */ jsxs(View, { style: styles.slot, children: [
+          ringStyle ? (
+            // The halo is a copy of the dot (same fill, border, radius) that
+            // scales out and fades, so the dot itself never changes.
+            /* @__PURE__ */ jsx(Animated.View, { pointerEvents: "none", style: [StyleSheet.absoluteFill, ringStyle], children: /* @__PURE__ */ jsx(View, { style: styles.dot }) })
+          ) : null,
+          /* @__PURE__ */ jsx(Animated.View, { style: [styles.dot, breatheStyle], children: state === "paused" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(View, { style: [styles.mark, styles.bar] }),
+            /* @__PURE__ */ jsx(View, { style: [styles.mark, styles.bar] })
+          ] }) : state === "unknown" ? /* @__PURE__ */ jsx(View, { style: [styles.mark, styles.dash] }) : null })
+        ] }),
+        label ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null,
+        count !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.count, children: count }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: theme.space.s2
+  },
+  slot: {
+    variants: {
+      size: {
+        sm: { width: theme.space[8], height: theme.space[8] },
+        md: { width: theme.space[10], height: theme.space[10] }
+      }
+    }
+  },
+  // Shape encodes the state; colour only reinforces it. `borderRadius: 2` is a
+  // graphical-glyph radius (like the charts legend chip's raw px) — a real token
+  // (`radius.xs` = 4) would round an 8px square into a circle and erase the
+  // shape distinction. `radius.full` clamps the round states to a true circle.
+  dot: {
+    variants: {
+      state: {
+        working: { backgroundColor: theme.status.working, borderRadius: theme.radius.full },
+        waiting: { backgroundColor: theme.status.waiting, borderRadius: theme.radius[2] },
+        done: { backgroundColor: theme.status.done, borderRadius: theme.radius.full },
+        crashed: {
+          backgroundColor: theme.status.crashed,
+          borderRadius: theme.radius[2],
+          transform: [{ rotate: "45deg" }]
+        },
+        conflict: {
+          backgroundColor: theme.status.conflictSoft,
+          borderRadius: theme.radius[2],
+          borderWidth: theme.borderWidth.thick,
+          borderColor: theme.status.conflict,
+          transform: [{ rotate: "45deg" }]
+        },
+        pending: {
+          backgroundColor: "transparent",
+          borderRadius: theme.radius.full,
+          borderWidth: theme.borderWidth.thick,
+          borderColor: theme.status.pending
+        },
+        // Drawn by children: two 2 px bars, or one 2 px dash, in the pending ink.
+        paused: { flexDirection: "row", justifyContent: "center", gap: theme.space[2] },
+        unknown: { justifyContent: "center" }
+      },
+      size: {
+        sm: { width: theme.space[8], height: theme.space[8] },
+        md: { width: theme.space[10], height: theme.space[10] }
+      }
+    }
+  },
+  mark: { backgroundColor: theme.status.pending, borderRadius: theme.radius.full },
+  bar: { width: theme.space[2], height: "100%" },
+  dash: { height: theme.space[2], width: "100%" },
+  count: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    // Caption label: 12 / 500 in text-2 (Final 03).
+    color: theme.color.text2,
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing
+  }
+}));
+
+export { StatusDot };