@buoy-gg/shared-ui 7.0.32 → 7.0.34

package/lib/commonjs/sync/wireForm.js

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WIRE_INLINE_LIMIT_BYTES = exports.WIRE_DETAIL_LIMIT_BYTES = void 0;
+exports.capDetail = capDetail;
+exports.detailByIdAction = detailByIdAction;
+exports.isOnDeviceMarker = isOnDeviceMarker;
+exports.memoByIdentity = memoByIdentity;
+exports.newestFitting = newestFitting;
+exports.onDeviceMarker = onDeviceMarker;
+exports.readParams = readParams;
+exports.sizeOrStub = sizeOrStub;
+exports.toWire = toWire;
+exports.truncatedNote = truncatedNote;
+var _wireBudget = require("./wireBudget.js");
+/**
+ * wireForm — how a tool turns what it holds into what it may put on the wire.
+ *
+ * Every adapter that ships large values faces the same four problems, and
+ * nine of them solved each one separately:
+ *
+ *  1. A per-item cap on the snapshot stream (16 KB), with a MARKER left in
+ *     the value's place so the dashboard knows to fetch it on demand.
+ *  2. A much larger cap on that on-demand detail fetch (8 MB), with a
+ *     TRUNCATION NOTE when even that is exceeded.
+ *  3. An identity-keyed cache for the wire form, because a snapshot is
+ *     rebuilt ~5×/sec while a dashboard watches and stores never mutate a
+ *     recorded item — so converting each item once is correct and cheap.
+ *  4. For tools whose items are individually fat (console, sentry), a
+ *     newest-first walk that keeps as many items as fit a snapshot budget.
+ *
+ * Marker KEY NAMES are part of the wire protocol — Buoy Desktop and the
+ * tool stores test for `__buoyStateOnDevice`, `__buoyPayloadOnDevice`,
+ * `__buoyValueOnDevice` — so the factory builds exactly those keys.
+ */
+
+/** Per-item budget on the snapshot stream. Anything larger stays on-device. */
+const WIRE_INLINE_LIMIT_BYTES = exports.WIRE_INLINE_LIMIT_BYTES = 16 * 1024;
+
+/**
+ * Upper bound for one on-demand detail response. Generous — this is a single
+ * explicit fetch, not a per-item stream — but still guarded so a pathological
+ * tree can't OOM the device through the reply emit.
+ */
+const WIRE_DETAIL_LIMIT_BYTES = exports.WIRE_DETAIL_LIMIT_BYTES = 8 * 1024 * 1024;
+
+/** A frozen `{ __buoy<Kind>OnDevice: true, note }` marker. */
+
+/**
+ * Build the sentinel a wire-form snapshot carries in place of a value that
+ * stays on the device. `kind` names the value ("State", "Payload", "Value",
+ * "Params", "Data", …) and becomes the key the reader tests for.
+ */
+function onDeviceMarker(kind, note) {
+  return Object.freeze({
+    [`__buoy${kind}OnDevice`]: true,
+    note
+  });
+}
+
+/** True when `value` is the on-device marker for `kind`. */
+function isOnDeviceMarker(value, kind) {
+  return typeof value === "object" && value !== null && value[`__buoy${kind}OnDevice`] === true;
+}
+
+/** The note a detail fetch returns when a single field exceeds the detail cap. */
+function truncatedNote(limitBytes = WIRE_DETAIL_LIMIT_BYTES) {
+  const mb = limitBytes / (1024 * 1024);
+  return {
+    __buoyTruncated: true,
+    note: `Exceeds the ${mb}MB detail limit — inspect it on-device.`
+  };
+}
+
+/**
+ * The value itself if it fits `limit` (and is serializable), else `marker`.
+ * `undefined` passes through untouched: an absent field must stay absent.
+ */
+function toWire(value, marker, limit = WIRE_INLINE_LIMIT_BYTES) {
+  if (value === undefined) return value;
+  return (0, _wireBudget.isOverWireBudget)(value, limit) ? marker : value;
+}
+
+/** Detail-fetch cap: the value, or a truncation note when it is too big. */
+function capDetail(value, limit = WIRE_DETAIL_LIMIT_BYTES) {
+  return (0, _wireBudget.isOverWireBudget)(value, limit) ? truncatedNote(limit) : value;
+}
+
+/**
+ * Memoize a wire-form conversion by item identity. Correct for any store
+ * that prepends and never mutates a recorded item — the cache self-invalidates
+ * when the item is dropped from the buffer.
+ */
+function memoByIdentity(convert) {
+  const cache = new WeakMap();
+  return item => {
+    const cached = cache.get(item);
+    if (cached !== undefined) return cached;
+    const converted = convert(item);
+    cache.set(item, converted);
+    return converted;
+  };
+}
+/**
+ * Walk `items` (oldest-first) from the newest end, keeping every item until
+ * the budget is spent. Always keeps at least one so an over-budget newest
+ * item still reaches the dashboard as a stub rather than an empty panel.
+ * Returns oldest-first, matching the input.
+ */
+function newestFitting(items, options) {
+  const out = [];
+  let bytes = options.baseBytes ?? 16;
+  for (let i = items.length - 1; i >= 0; i--) {
+    const wired = options.toWire(items[i]);
+    if (bytes + wired.bytes > options.budget && out.length > 0) break;
+    out.push(wired.value);
+    bytes += wired.bytes;
+  }
+  out.reverse();
+  return out;
+}
+
+/**
+ * Size one wire-form item against a per-item cap, substituting a stub when it
+ * is too fat. One walk decides both "too big?" and "what does it cost".
+ */
+function sizeOrStub(wired, limit, stub) {
+  const size = (0, _wireBudget.approxJsonSize)(wired, limit);
+  if (size.bytes <= limit) return {
+    value: wired,
+    bytes: size.bytes
+  };
+  const stubbed = stub();
+  return {
+    value: stubbed,
+    bytes: (0, _wireBudget.approxJsonSize)(stubbed, limit).bytes
+  };
+}
+
+/** `(params as T | undefined) ?? {}` — the first line of every action. */
+function readParams(params) {
+  return params ?? {};
+}
+/**
+ * The on-demand detail action every change-log tool exposes: look one item
+ * up by id, and return its detail fields size-capped. Replaces the
+ * `missing id` / `unknown id` boilerplate copied into each adapter.
+ */
+function detailByIdAction(lookup, detail, limit = WIRE_DETAIL_LIMIT_BYTES) {
+  const cap = value => capDetail(value, limit);
+  return params => {
+    const {
+      id
+    } = readParams(params);
+    if (!id) return {
+      found: false,
+      reason: "missing id"
+    };
+    const item = lookup(id);
+    if (!item) return {
+      found: false,
+      reason: "unknown id"
+    };
+    return {
+      found: true,
+      id,
+      ...detail(item, cap)
+    };
+  };
+}

package/lib/commonjs/tools/defineTool.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createToolFactory = createToolFactory;
+exports.defineToolPreset = defineToolPreset;
+/**
+ * defineToolPreset / createToolFactory — the typed way to declare a tool.
+ *
+ * Every tool package exports a `xToolPreset` object literal and a
+ * `createXTool(options)` factory that restates the same literal with
+ * `options?.name || default` on each field. None of the 23 presets was
+ * annotated with core's `InstalledApp`, so a preset that drifted from the
+ * contract (a bad `slot`, a missing `component`) failed at runtime in the
+ * dial, not at compile time.
+ *
+ * `ToolPreset` is that contract, declared here in shared (which every tool
+ * already depends on) and structurally identical to core's `InstalledApp`.
+ * `defineToolPreset` is an identity function that type-checks the literal;
+ * `createToolFactory` derives the `createXTool` function from the preset so
+ * the defaults live in exactly one place.
+ *
+ * Auto-discovery (core's `autoDiscoverPresets` / `autoExternalSync`) stays
+ * as hand-written `require()` blocks on purpose: Metro needs each package
+ * name as a static string lexically inside its own try, so a manifest can't
+ * replace them.
+ */
+
+/** Where a tool should render within the floating menu surface. */
+
+/** What an icon renderer receives. Mirrors core's `FloatingMenuRenderCtx`. */
+
+/** Declarative modal chrome for a body-only tool. Mirrors core's `ToolModalConfig`. */
+
+/**
+ * The shape the floating menu installs. Structurally identical to core's
+ * `InstalledApp`; declared here so tool packages can type their presets
+ * without depending on core.
+ */
+
+/** Identity with a type check: the literal must satisfy `ToolPreset`. */
+function defineToolPreset(preset) {
+  return preset;
+}
+
+/** The overrides every `createXTool` accepted. */
+
+/**
+ * Derive `createXTool(options)` from a preset: id/name/description overrides
+ * apply on top, and `mapProps` turns tool-specific options into `props`
+ * (merged over the preset's defaults).
+ *
+ * ```ts
+ * export const createNetworkTool = createToolFactory(networkToolPreset, (o: { enableSharedModalDimensions?: boolean }) => ({
+ *   enableSharedModalDimensions: o.enableSharedModalDimensions ?? false,
+ * }));
+ * ```
+ */
+function createToolFactory(preset, mapProps, /** Last word on any other preset field (a recolored icon, say). */
+extend) {
+  return options => {
+    const overrides = options ?? {};
+    const props = preset.props === undefined && !mapProps ? undefined : {
+      ...(preset.props ?? {}),
+      ...(mapProps ? mapProps(overrides) : {})
+    };
+    return {
+      ...preset,
+      id: overrides.id || preset.id,
+      name: overrides.name || preset.name,
+      description: overrides.description || preset.description,
+      ...(props !== undefined ? {
+        props
+      } : {}),
+      ...(extend ? extend(overrides, preset) : {})
+    };
+  };
+}

package/lib/commonjs/ui/components/ChangeRow.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChangeRow = ChangeRow;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _CompactRow = require("./CompactRow.js");
+var _index = require("../../icons/index.js");
+var _RelativeTime = require("../../utils/time/RelativeTime.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * ChangeRow — one recorded change in a state tool's history list.
+ *
+ * redux, zustand and jotai each drew the same row on top of `CompactRow`:
+ * a colored status word (the slice / store / atom), a sublabel ("1.2ms ·
+ * 3 keys changed"), the primary line (changed keys or a value preview), a
+ * relative timestamp, and a right-hand badge made of a mono verb (SET,
+ * WRITE, ADDITEM) plus an icon — a lightning bolt when state actually
+ * changed, a clock when the update was slow. The three copies differed
+ * only in how they computed those strings. This component owns the drawing;
+ * tools own the strings.
+ *
+ * testID convention (unchanged from the originals): `${testID}-badge`,
+ * `${testID}-change`, `${testID}-slow`, `${testID}-status`,
+ * `${testID}-sublabel`, `${testID}-keys`.
+ */
+
+function ChangeRow({
+  statusColor,
+  statusLabel,
+  sublabel,
+  primaryText,
+  timestamp,
+  badgeText,
+  changed = false,
+  slow = false,
+  badgePrefix,
+  customBadge,
+  plainBadgeText,
+  onPress,
+  testID,
+  accessibilityLabel
+}) {
+  // Always a custom badge, even when there is no icon to hang off it. The
+  // alternative — letting CompactRow draw `badgeText` itself — leaves the one
+  // row whose badge matters most (a write that changed NOTHING) as the only
+  // row in the list with no handle on its badge.
+  const badge = customBadge ?? (badgeText !== undefined || badgePrefix || changed || slow ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.badgeContainer,
+    children: [badgePrefix, badgeText !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.badgeText, {
+        color: statusColor
+      }],
+      testID: testID ? `${testID}-badge` : undefined,
+      children: badgeText
+    }) : null, slow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.iconBadge,
+      testID: testID ? `${testID}-slow` : undefined,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Clock, {
+        size: 12,
+        color: _gameUIColors.buoyColors.error
+      })
+    }) : changed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.iconBadge,
+      testID: testID ? `${testID}-change` : undefined,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Zap, {
+        size: 12,
+        color: _gameUIColors.buoyColors.warning
+      })
+    }) : null]
+  }) : undefined);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompactRow.CompactRow, {
+    statusDotColor: statusColor,
+    statusLabel: statusLabel,
+    statusSublabel: sublabel,
+    primaryText: primaryText,
+    bottomRightText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RelativeTime.RelativeTime, {
+      timestamp: timestamp
+    }),
+    customBadge: badge,
+    badgeText: badge ? undefined : plainBadgeText,
+    badgeColor: statusColor,
+    showChevron: true,
+    onPress: onPress,
+    testID: testID,
+    statusTestID: testID ? `${testID}-status` : undefined,
+    statusSublabelTestID: testID ? `${testID}-sublabel` : undefined,
+    primaryTestID: testID ? `${testID}-keys` : undefined,
+    accessibilityLabel: accessibilityLabel
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  badgeContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  iconBadge: {
+    paddingHorizontal: 4
+  }
+});

package/lib/commonjs/ui/components/ChipStrip.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipStrip = ChipStrip;
+exports.useChipTap = useChipTap;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * ChipStrip — a horizontally scrolling row of filter chips whose taps
+ * don't misfire while the strip is being panned.
+ *
+ * react-query drew this three times (query status, mutation status, storage
+ * type) with the same 5-point / 300 ms swipe-vs-tap discrimination. The
+ * strip and the discrimination live here; the chip is whatever the tool
+ * renders, wired through `useChipTap`.
+ */
+
+/** How far a touch may travel and still count as a tap. */const TAP_SLOP_PX = 5;
+/** How long after a scroll ends taps stay suppressed. */
+const SCROLL_SETTLE_MS = 300;
+/**
+ * Swipe-vs-tap discrimination for chips inside a horizontal ScrollView.
+ * A press that moved more than a few points, or landed while the strip was
+ * still scrolling, is a pan — not a filter toggle.
+ */
+function useChipTap() {
+  const [isScrolling, setIsScrolling] = (0, _react.useState)(false);
+  const touchStartX = (0, _react.useRef)(0);
+  const touchStartY = (0, _react.useRef)(0);
+  const onTouchStart = (0, _react.useCallback)(event => {
+    touchStartX.current = event.nativeEvent.pageX;
+    touchStartY.current = event.nativeEvent.pageY;
+  }, []);
+  const isTap = (0, _react.useCallback)(event => {
+    if (!event) return true;
+    const dx = Math.abs(event.nativeEvent.pageX - touchStartX.current);
+    const dy = Math.abs(event.nativeEvent.pageY - touchStartY.current);
+    return !(dx > TAP_SLOP_PX || dy > TAP_SLOP_PX || isScrolling);
+  }, [isScrolling]);
+  const settle = (0, _react.useCallback)(() => {
+    setTimeout(() => setIsScrolling(false), SCROLL_SETTLE_MS);
+  }, []);
+  const begin = (0, _react.useCallback)(() => setIsScrolling(true), []);
+  return {
+    scrollProps: {
+      onScrollBeginDrag: begin,
+      onScrollEndDrag: settle,
+      onMomentumScrollBegin: begin,
+      onMomentumScrollEnd: settle
+    },
+    onTouchStart,
+    isTap
+  };
+}
+function ChipStrip({
+  children,
+  scrollProps,
+  sentryLabel,
+  style,
+  contentStyle
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      "sentry-label": sentryLabel,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      style: styles.scrollView,
+      contentContainerStyle: [styles.scrollContent, contentStyle],
+      ...scrollProps,
+      children: children
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    minWidth: 0
+  },
+  scrollView: {
+    flex: 1
+  },
+  scrollContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+    flexGrow: 1
+  }
+});

package/lib/commonjs/ui/components/DetailViewToggle.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DetailViewToggle = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _nightTheme = require("../night/nightTheme.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * DetailViewToggle — the row of view cards at the top of a detail screen
+ * (ACTION · STATE · DIFF, CHANGE · STATE · DIFF, …).
+ *
+ * redux, zustand and jotai each shipped their own copy, differing only in
+ * the view keys, labels and testID prefix. The cards, the accent chrome,
+ * the disabled state (diff with nothing to compare) and the a11y contract
+ * are all one component now; tools pass their `views`.
+ */
+
+function DetailViewToggleImpl({
+  views,
+  activeView,
+  onViewChange,
+  disabledKeys,
+  testIDPrefix
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: views.map(view => {
+      const isActive = activeView === view.key;
+      const isDisabled = disabledKeys?.includes(view.key) ?? false;
+      const activeColor = view.activeColor ?? _nightTheme.night.color.accent;
+      const IconComponent = view.icon;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: [styles.card, isActive && [styles.cardActive, {
+          borderColor: activeColor
+        }], isDisabled && styles.cardDisabled],
+        onPress: () => !isDisabled && onViewChange(view.key),
+        activeOpacity: isDisabled ? 1 : 0.8,
+        disabled: isDisabled,
+        testID: testIDPrefix ? `${testIDPrefix}-view-${view.key}` : undefined,
+        accessibilityRole: "button",
+        accessibilityLabel: view.label,
+        accessibilityState: {
+          selected: isActive,
+          disabled: isDisabled
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.cardContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+            size: 14,
+            color: isActive ? activeColor : isDisabled ? _nightTheme.night.color.textTertiary : _nightTheme.night.color.textSecondary
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
+              color: activeColor
+            }], isDisabled && styles.cardLabelDisabled],
+            children: view.label
+          })]
+        }), view.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.cardDescription, isActive && styles.cardDescriptionActive, isDisabled && styles.cardDescriptionDisabled],
+          children: view.description
+        }) : null]
+      }, view.key);
+    })
+  });
+}
+const DetailViewToggle = exports.DetailViewToggle = /*#__PURE__*/(0, _react.memo)(DetailViewToggleImpl);
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    gap: 8,
+    padding: 14,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
+  },
+  card: {
+    flex: 1,
+    backgroundColor: _nightTheme.night.color.surface,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border,
+    padding: 10,
+    gap: 4
+  },
+  cardActive: {
+    borderWidth: 1.5,
+    backgroundColor: _nightTheme.night.color.accentSoft,
+    shadowColor: _nightTheme.night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3
+  },
+  cardDisabled: {
+    opacity: 0.5
+  },
+  cardContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  cardLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    color: _nightTheme.night.color.textSecondary
+  },
+  cardLabelActive: {
+    color: _nightTheme.night.color.text
+  },
+  cardLabelDisabled: {
+    color: _nightTheme.night.color.textTertiary
+  },
+  cardDescription: {
+    fontSize: 9,
+    color: _nightTheme.night.color.textTertiary,
+    lineHeight: 12
+  },
+  cardDescriptionActive: {
+    color: _nightTheme.night.color.textSecondary
+  },
+  cardDescriptionDisabled: {
+    color: _nightTheme.night.color.textTertiary
+  }
+});

package/lib/commonjs/ui/components/DevToolsCard.js

@@ -49,7 +49,8 @@ function DevToolsCard({
   style,
   contentStyle,
   testID,
-  accessibilityLabel
+  accessibilityLabel,
+  accessible
 }) {
   const isInteractive = !!onPress || !!onLongPress;
 
@@ -58,6 +59,7 @@ function DevToolsCard({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.wrapper, style],
       testID: testID,
+      accessible: accessible,
       accessibilityLabel: accessibilityLabel,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.card, isSelected && styles.selectedCard, contentStyle],

package/lib/commonjs/ui/components/EmptyState.js

@@ -9,11 +9,13 @@ exports.NoResultsEmptyState = NoResultsEmptyState;
 exports.NoSearchResultsEmptyState = NoSearchResultsEmptyState;
 var _reactNative = require("react-native");
 var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
+var _index = require("../otto/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Reusable empty state component for consistent empty/no-data displays
  */
 function EmptyState({
+  otto,
   title,
   description,
   icon: Icon,
@@ -28,13 +30,19 @@ function EmptyState({
     style: containerStyle,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.content,
-      children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [otto ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.iconContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Otto, {
+          state: otto,
+          pixelSize: Math.max(2, Math.round(iconSize / 16))
+        })
+      }) : Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.iconContainer,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           size: iconSize,
           color: iconColor
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.title,
         children: title
       }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {