@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-7QOYGENL.js

@@ -0,0 +1,443 @@
+import { storageKey } from './chunk-NNCOFLNE.js';
+import { NameConflictDialog } from './chunk-CHPX4MFI.js';
+import { Checkbox } from './chunk-KNILMM4H.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { DialogTitle, DialogFooter, DialogDescription, Dialog } from './chunk-AQ5FIG74.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Input, TextField } from './chunk-KXLDK6HB.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import * as React from 'react';
+import { View, Text, Platform } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  cancel: "Cancel",
+  confirm: "Confirm",
+  tryAgain: "Try again",
+  failed: "That didn\u2019t work. Check your connection and try again.",
+  typeToConfirm: () => ["Type", "to confirm"],
+  typeMismatch: (name) => `Type ${name} to confirm`,
+  remember: "Don\u2019t ask again",
+  rememberAction: "Don\u2019t Ask Again"
+};
+var CONFIRM_CONSEQUENCE_MAX = 4;
+var ConfirmContext = React.createContext(null);
+function memoryStorage() {
+  const data = /* @__PURE__ */ new Map();
+  return {
+    getItem: (k) => data.get(k) ?? null,
+    setItem: (k, v) => {
+      data.set(k, v);
+    },
+    removeItem: (k) => {
+      data.delete(k);
+    }
+  };
+}
+function ConfirmProvider({
+  children,
+  storage: storageProp,
+  labels,
+  platform
+}) {
+  const [fallback] = React.useState(memoryStorage);
+  const storage = storageProp ?? fallback;
+  const [queue, setQueue] = React.useState([]);
+  const hidden = React.useRef(/* @__PURE__ */ new Set());
+  const known = React.useRef(/* @__PURE__ */ new Set());
+  const api = React.useMemo(() => {
+    const isHidden = (id) => {
+      if (hidden.current.has(id)) return true;
+      try {
+        return storage.getItem(storageKey("confirm", id)) === "1";
+      } catch {
+        return false;
+      }
+    };
+    return {
+      confirm: (options) => {
+        const id = options.tone !== "danger" ? options.remember?.id : void 0;
+        if (id) known.current.add(id);
+        if (id && isHidden(id)) return Promise.resolve(true);
+        return new Promise(
+          (resolve) => setQueue((q) => [...q, { kind: "confirm", options, resolve }])
+        );
+      },
+      prompt: (options) => new Promise(
+        (resolve) => setQueue((q) => [...q, { kind: "prompt", options, resolve }])
+      ),
+      resolveConflict: (options) => new Promise(
+        (resolve) => setQueue((q) => [...q, { kind: "conflict", options, resolve }])
+      ),
+      resetHidden: (id) => {
+        const ids = id ? [id] : [...known.current];
+        for (const one of ids) {
+          hidden.current.delete(one);
+          try {
+            storage.removeItem?.(storageKey("confirm", one));
+          } catch {
+          }
+        }
+      }
+    };
+  }, [storage]);
+  const current = queue[0] ?? null;
+  const settle = React.useCallback(
+    (value, rememberId) => {
+      if (rememberId) {
+        hidden.current.add(rememberId);
+        try {
+          storage.setItem(storageKey("confirm", rememberId), "1");
+        } catch {
+        }
+      }
+      setQueue(([head, ...rest]) => {
+        if (head) head.resolve(value);
+        return rest;
+      });
+    },
+    [storage]
+  );
+  return /* @__PURE__ */ jsxs(ConfirmContext.Provider, { value: api, children: [
+    children,
+    current?.kind === "conflict" ? /* @__PURE__ */ jsx(
+      NameConflictDialog,
+      {
+        platform,
+        ...current.options,
+        open: true,
+        onClose: () => settle(null),
+        onResolve: (choice, applyToAll) => settle({ choice, applyToAll })
+      },
+      queue.length + current.options.existing.name
+    ) : current ? /* @__PURE__ */ jsx(
+      ConfirmSurface,
+      {
+        request: current,
+        labels,
+        platform,
+        settle
+      },
+      queue.length + current.options.title
+    ) : null
+  ] });
+}
+function useConfirm() {
+  const api = React.useContext(ConfirmContext);
+  if (!api) throw new Error("useConfirm() needs a <ConfirmProvider> above it.");
+  return api;
+}
+function useOptionalConfirm() {
+  return React.useContext(ConfirmContext);
+}
+function resolvePlatform(explicit, themed) {
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return themed === "Android" ? "android" : "ios";
+}
+function ConfirmSurface({
+  request,
+  labels: labelsProp,
+  platform,
+  settle,
+  preview
+}) {
+  const labels = useLabels("confirm", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("confirm");
+  const { styles } = useStyles(sheet);
+  const os = resolvePlatform(platform, theme.platform);
+  const { options } = request;
+  const isPrompt = request.kind === "prompt";
+  const danger = options.tone === "danger";
+  const confirmOpts = request.kind === "confirm" ? request.options : null;
+  const promptOpts = request.kind === "prompt" ? request.options : null;
+  const typeName = confirmOpts?.typeToConfirm;
+  const remember = !danger ? confirmOpts?.remember : void 0;
+  const consequence = (confirmOpts?.consequence ?? []).slice(0, CONFIRM_CONSEQUENCE_MAX);
+  const [value, setValue] = React.useState(preview?.value ?? promptOpts?.defaultValue ?? "");
+  const [typed, setTyped] = React.useState(preview?.typed ?? "");
+  const [error, setError] = React.useState(
+    () => preview?.validated ? promptOpts?.validate?.(preview.value ?? promptOpts.defaultValue ?? "") || null : null
+  );
+  const [validated, setValidated] = React.useState(preview?.validated ?? false);
+  const [busy, setBusy] = React.useState(preview?.busy ?? false);
+  const [failed, setFailed] = React.useState(preview?.failed ?? null);
+  const [remembered, setRemembered] = React.useState(preview?.remembered ?? false);
+  const settled = React.useRef(false);
+  const mismatch = typeName != null && typed !== typeName;
+  const hasField = isPrompt || typeName != null;
+  const asSheet = os === "ios" && hasField;
+  const dismissValue = isPrompt ? null : false;
+  const finish = (result, rememberId) => {
+    if (settled.current) return;
+    settled.current = true;
+    settle(result, rememberId);
+  };
+  const dismiss = () => {
+    if (!busy) finish(dismissValue);
+  };
+  const runValidate = (text) => {
+    const message = promptOpts?.validate?.(text) || null;
+    setError(message);
+    return message;
+  };
+  const submit = async (rememberThis = false) => {
+    if (busy || mismatch) return;
+    if (isPrompt) {
+      setValidated(true);
+      if (runValidate(value)) return;
+    }
+    const work = isPrompt ? () => promptOpts.onConfirm?.(value) : () => confirmOpts.onConfirm?.();
+    try {
+      setFailed(null);
+      const pending = work();
+      if (pending && typeof pending.then === "function") {
+        setBusy(true);
+        await pending;
+      }
+    } catch (e) {
+      setBusy(false);
+      setFailed(e instanceof Error && e.message ? e.message : labels.failed);
+      return;
+    }
+    setBusy(false);
+    finish(isPrompt ? value : true, rememberThis ? remember?.id : void 0);
+  };
+  const confirmLabel = failed ? labels.tryAgain : options.confirmLabel ?? labels.confirm;
+  const confirmButton = (size, fullWidth) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: danger ? "danger" : "primary",
+      size,
+      fullWidth,
+      loading: busy,
+      softDisabled: mismatch,
+      disabledReason: mismatch ? labels.typeMismatch(typeName) : void 0,
+      onPress: () => void submit(os === "android" && remembered),
+      children: confirmLabel
+    }
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    consequence.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.consequence, testID: "confirm-consequence", children: consequence.map((line) => /* @__PURE__ */ jsx(Text, { style: styles.consequenceLine, children: line }, line)) }) : null,
+    typeName != null ? /* @__PURE__ */ jsxs(View, { style: styles.field, children: [
+      /* @__PURE__ */ jsxs(Text, { style: styles.typeLabel, nativeID: "confirm-type-label", children: [
+        labels.typeToConfirm(typeName)[0],
+        " ",
+        /* @__PURE__ */ jsx(Text, { style: styles.token, children: typeName }),
+        " ",
+        labels.typeToConfirm(typeName)[1]
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          size: asSheet ? "lg" : "md",
+          value: typed,
+          onChangeText: setTyped,
+          autoFocus: !preview,
+          autoCapitalize: "none",
+          autoCorrect: false,
+          editable: !busy,
+          accessibilityLabelledBy: "confirm-type-label",
+          accessibilityLabel: labels.typeMismatch(typeName)
+        }
+      )
+    ] }) : null,
+    promptOpts ? /* @__PURE__ */ jsx(
+      TextField,
+      {
+        size: asSheet ? "lg" : "md",
+        label: promptOpts.label,
+        hint: promptOpts.hint,
+        error: error ?? void 0,
+        value,
+        placeholder: promptOpts.placeholder,
+        editable: !busy,
+        autoFocus: !preview,
+        selectTextOnFocus: true,
+        onChangeText: (next) => {
+          setValue(next);
+          if (validated) runValidate(next);
+        },
+        onSubmitEditing: () => void submit()
+      }
+    ) : null,
+    failed ? /* @__PURE__ */ jsx(Alert, { tone: "danger", title: failed }) : null
+  ] });
+  if (asSheet && preview) {
+    return /* @__PURE__ */ jsxs(View, { style: [styles.previewCard, styles.previewSheet], children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: options.title }),
+      options.body ? /* @__PURE__ */ jsx(Text, { style: styles.sheetDescription, children: options.body }) : null,
+      body,
+      confirmButton("lg", true)
+    ] });
+  }
+  if (asSheet) {
+    return /* @__PURE__ */ jsx(
+      Sheet,
+      {
+        open: true,
+        title: options.title,
+        detents: ["half"],
+        dismissible: !busy,
+        onClose: dismiss,
+        footer: /* @__PURE__ */ jsx(View, { style: styles.sheetFooter, children: confirmButton("lg", true) }),
+        children: /* @__PURE__ */ jsxs(View, { style: styles.sheetBody, children: [
+          options.body ? /* @__PURE__ */ jsx(Text, { style: styles.sheetDescription, children: options.body }) : null,
+          body
+        ] })
+      }
+    );
+  }
+  const cancel = /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: os === "android" ? "ghost" : "outline",
+      size: "md",
+      fullWidth: os === "ios",
+      disabled: busy,
+      onPress: dismiss,
+      children: options.cancelLabel ?? labels.cancel
+    }
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    body,
+    remember && os === "android" ? /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        size: "sm",
+        platform: "android",
+        label: remember.label ?? labels.remember,
+        checked: remembered,
+        onCheckedChange: setRemembered,
+        disabled: busy
+      }
+    ) : null,
+    os === "ios" && remember ? (
+      // Three actions stack: the confirm, “Don’t Ask Again”, Cancel last.
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        confirmButton("md", true),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "md",
+            fullWidth: true,
+            disabled: busy,
+            onPress: () => void submit(true),
+            children: remember.label ?? labels.rememberAction
+          }
+        ),
+        cancel
+      ] })
+    ) : /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      cancel,
+      confirmButton("md", os === "ios")
+    ] })
+  ] });
+  if (preview) {
+    return /* @__PURE__ */ jsxs(View, { style: styles.previewCard, children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: options.title }),
+      options.body ? /* @__PURE__ */ jsx(DialogDescription, { children: options.body }) : null,
+      content
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: true,
+      onClose: dismiss,
+      dismissible: !busy,
+      showClose: false,
+      platform: os,
+      title: options.title,
+      description: options.body,
+      children: content
+    }
+  );
+}
+function ConfirmPreview({
+  kind = "confirm",
+  options,
+  loading,
+  error,
+  typed,
+  value,
+  validated,
+  remembered,
+  labels,
+  platform
+}) {
+  const request = kind === "prompt" ? { kind, options, resolve: () => {
+  } } : { kind, options, resolve: () => {
+  } };
+  return /* @__PURE__ */ jsx(
+    ConfirmSurface,
+    {
+      request,
+      labels,
+      platform,
+      settle: () => {
+      },
+      preview: { busy: loading, failed: error, typed, value, validated, remembered }
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  consequence: {
+    gap: theme.space.s1,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface2,
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s3
+  },
+  consequenceLine: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text
+  },
+  field: { gap: theme.space.s2 },
+  typeLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text
+  },
+  token: {
+    fontFamily: theme.font.mono,
+    backgroundColor: theme.color.surface2,
+    color: theme.color.text
+  },
+  sheetBody: { gap: theme.space.s4 },
+  // The Modal card's look, drawn inline for ConfirmPreview.
+  previewCard: {
+    width: "100%",
+    maxWidth: theme.panel.xl,
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.xl,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    padding: theme.space.s5,
+    gap: theme.space.s3,
+    ...theme.shadow.lg
+  },
+  previewSheet: { gap: theme.space.s4 },
+  sheetDescription: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text2
+  },
+  sheetFooter: {
+    paddingHorizontal: theme.space.s5,
+    paddingTop: theme.space.s3,
+    paddingBottom: theme.space.s5
+  }
+}));
+
+export { CONFIRM_CONSEQUENCE_MAX, ConfirmPreview, ConfirmProvider, useConfirm, useOptionalConfirm };

package/dist/{chunk-H6NIOQHK.js → chunk-A7SWYDE5.js}

@@ -1,6 +1,8 @@
 import { DRAG_CURSOR } from './chunk-KTAC4MGE.js';
 import { haptics } from './chunk-NY2U3PBI.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, Easing, PanResponder, View, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -9,12 +11,21 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 var GEOMETRY = {
   sm: { thumb: 18, track: 4, height: 32 },
   // loam-allow-raw: ramp keys, read via theme.space
-  md: { thumb: 24, track: 6, height: 40 }
+  md: { thumb: 24, track: 4, height: 40 }
   // loam-allow-raw: ramp keys, read via theme.space
 };
 var THUMB_ACTIVE_SCALE = 1.18;
+function adjustedValue(current, direction, { min, max, step }) {
+  const delta = step > 0 ? step : (max - min) / 10;
+  const next = Math.round((current + direction * delta) * 1e6) / 1e6;
+  return Math.min(max, Math.max(min, next));
+}
 var MAX_TICKS = 20;
 var BUBBLE_BOTTOM = 28;
+var DEFAULT_LABELS = {
+  percent: (percent) => `${percent}%`,
+  range: (min, percent, max) => `${min} \xB7 ${percent}% \xB7 ${max}`
+};
 function clamp(n, lo, hi) {
   return Math.max(lo, Math.min(hi, n));
 }
@@ -31,14 +42,21 @@ function Slider({
   showValue = false,
   showReadout = false,
   showTicks = false,
-  accessibilityLabel
+  accessibilityLabel,
+  error: errorMessage,
+  tone = "default",
+  bubble = "auto",
+  labels: labelsProp
 }) {
-  const animateScale = useResolvedMotion(motion) === "full";
+  const labels = useLabels("slider", DEFAULT_LABELS, labelsProp);
+  const animateScale = useResolvedMotion(motion, "slider") === "full";
   const isControlled = value !== void 0;
   const [internal, setInternal] = React.useState(defaultValue ?? min);
   const current = clamp(isControlled ? value : internal, min, max);
   const { styles } = useStyles(sheet, { size, disabled });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("slider");
+  const errorId = React.useId();
+  const toneColor = errorMessage ? theme.color.danger : tone === "default" ? null : tone === "accent" ? theme.color.accentStrong : theme.color[tone];
   const fraction = max > min ? (current - min) / (max - min) : 0;
   const pct = `${fraction * 100}%`;
   const [trackWidth, setTrackWidth] = React.useState(0);
@@ -84,7 +102,10 @@ function Slider({
       useNativeDriver: true
     }).start();
   };
-  const bubbleScale = React.useRef(new Animated.Value(0)).current;
+  const bubbleScale = React.useRef(new Animated.Value(bubble === "always" ? 1 : 0)).current;
+  const restBubble = bubble === "always" ? 1 : 0;
+  const restBubbleRef = React.useRef(restBubble);
+  restBubbleRef.current = restBubble;
   const bubbleRef = React.useRef(() => {
   });
   bubbleRef.current = (to) => {
@@ -99,6 +120,9 @@ function Slider({
       useNativeDriver: true
     }).start();
   };
+  React.useEffect(() => {
+    bubbleScale.setValue(restBubble);
+  }, [bubbleScale, restBubble]);
   const steppedRef = React.useRef(step > 0);
   steppedRef.current = step > 0;
   const pan = React.useRef(
@@ -118,12 +142,12 @@ function Slider({
       },
       onPanResponderRelease: () => {
         swellRef.current(1);
-        bubbleRef.current(0);
+        bubbleRef.current(restBubbleRef.current);
         if (steppedRef.current) haptics.impact("medium");
       },
       onPanResponderTerminate: () => {
         swellRef.current(1);
-        bubbleRef.current(0);
+        bubbleRef.current(restBubbleRef.current);
       }
     })
   ).current;
@@ -140,8 +164,8 @@ function Slider({
   const stepCount = step > 0 && max > min ? Math.round((max - min) / step) : 0;
   const showTickMarks = showTicks && stepCount > 0 && stepCount <= MAX_TICKS;
   const tickIndices = showTickMarks ? Array.from({ length: stepCount + 1 }, (_, i) => i) : [];
-  const bubbleLabel = step > 0 ? String(current) : `${Math.round(fraction * 100)}%`;
-  const readoutText = `${min} \xB7 ${Math.round(fraction * 100)}% \xB7 ${max}`;
+  const bubbleLabel = step > 0 ? String(current) : labels.percent(Math.round(fraction * 100));
+  const readoutText = labels.range(min, Math.round(fraction * 100), max);
   return /* @__PURE__ */ jsxs(View, { style: styles.wrap, children: [
     /* @__PURE__ */ jsxs(View, { style: styles.trackRow, children: [
       /* @__PURE__ */ jsxs(
@@ -152,15 +176,28 @@ function Slider({
           accessibilityLabel,
           accessibilityValue: { min, max, now: current },
           accessibilityState: { disabled },
+          accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+          onAccessibilityAction: (e) => {
+            if (disabled) return;
+            const dir = e.nativeEvent.actionName === "increment" ? 1 : -1;
+            setValue(adjustedValue(currentRef.current, dir, { min, max, step }));
+          },
           "aria-valuemin": min,
           "aria-valuemax": max,
           "aria-valuenow": current,
+          "aria-invalid": errorMessage ? true : void 0,
+          "aria-describedby": errorMessage ? errorId : void 0,
           onLayout,
           style: [styles.container, !disabled && DRAG_CURSOR],
           ...disabled ? {} : pan.panHandlers,
           children: [
             /* @__PURE__ */ jsxs(View, { style: styles.track, children: [
-              /* @__PURE__ */ jsx(View, { style: [styles.fill, { width: pct }] }),
+              /* @__PURE__ */ jsx(
+                View,
+                {
+                  style: [styles.fill, { width: pct }, toneColor ? { backgroundColor: toneColor } : null]
+                }
+              ),
               showTickMarks && /* @__PURE__ */ jsx(View, { style: styles.ticks, children: tickIndices.map((i) => /* @__PURE__ */ jsx(View, { testID: `slider-tick-${i}`, style: styles.tick }, i)) })
             ] }),
             /* @__PURE__ */ jsx(
@@ -183,6 +220,7 @@ function Slider({
                 testID: "slider-thumb",
                 style: [
                   styles.thumb,
+                  errorMessage ? { borderColor: theme.color.danger } : null,
                   {
                     transform: [{ translateX: thumbTranslateX }, { scale: thumbScale }]
                   }
@@ -194,7 +232,11 @@ function Slider({
       ),
       showValue ? /* @__PURE__ */ jsx(Text, { style: styles.value, children: current }) : null
     ] }),
-    showReadout ? /* @__PURE__ */ jsx(Text, { style: styles.readout, children: readoutText }) : null
+    showReadout ? /* @__PURE__ */ jsx(Text, { style: styles.readout, children: readoutText }) : null,
+    errorMessage ? /* @__PURE__ */ jsxs(View, { style: styles.errorRow, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.sm, color: theme.color.danger }),
+      /* @__PURE__ */ jsx(Text, { nativeID: errorId, role: "alert", style: styles.errorText, children: errorMessage })
+    ] }) : null
   ] });
 }
 var sheet = createStyleSheet((theme) => ({
@@ -213,6 +255,8 @@ var sheet = createStyleSheet((theme) => ({
   container: {
     flex: 1,
     justifyContent: "center",
+    // The drawn control stays slim; the touch region still reaches the minimum.
+    minHeight: theme.tapMin,
     variants: {
       size: {
         sm: { height: theme.space[GEOMETRY.sm.height] },
@@ -243,7 +287,7 @@ var sheet = createStyleSheet((theme) => ({
     top: 0,
     bottom: 0,
     borderRadius: theme.radius.full,
-    backgroundColor: theme.color.accent,
+    backgroundColor: theme.color.accentStrong,
     variants: { size: {}, disabled: {} }
   },
   // Tick marks overlaid inside the track (reference sliderCtl line 2294).
@@ -277,7 +321,7 @@ var sheet = createStyleSheet((theme) => ({
   },
   // The pill-shaped card that floats above the thumb during drag.
   // Reference sliderCtl line 2292: background var(--text), color var(--bg),
-  // font-size 12px, font-weight 700, padding 4px 9px, border-radius 8px.
+  // font-size 12px, font-weight 600, padding 4px 9px, border-radius 8px.
   bubbleCard: {
     backgroundColor: theme.color.text,
     borderRadius: theme.radius.sm,
@@ -288,7 +332,7 @@ var sheet = createStyleSheet((theme) => ({
     color: theme.color.bg,
     fontFamily: theme.font.sans,
     fontSize: theme.type.caption1.fontSize,
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.fontWeight.semibold,
     lineHeight: theme.type.caption1.lineHeight
   },
   thumb: {
@@ -334,6 +378,13 @@ var sheet = createStyleSheet((theme) => ({
     fontSize: theme.fontSize[14],
     color: theme.color.text2
   },
+  errorRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  errorText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.danger
+  },
   // Read-out row: mono `min · value% · max` below the track.
   readout: {
     fontFamily: theme.font.mono,