@buoy-gg/shared-ui 7.0.32 → 7.0.33

package/lib/commonjs/ui/otto/ottoSheet.js

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WATER_ROWS = exports.WATER_ROW0 = exports.WATER_FRAMES = exports.WATER_CELLS = exports.TRANSPARENT = exports.MAX_PERIOD = exports.CELLS = void 0;
+exports.cycleIndexes = cycleIndexes;
+exports.flatColors = flatColors;
+exports.gridKey = gridKey;
+exports.ottoCycle = ottoCycle;
+exports.ottoSheets = ottoSheets;
+exports.rectsOf = rectsOf;
+var _ottoEngine = require("./ottoEngine.js");
+/**
+ * Otto's precomputed animation.
+ *
+ * Every state is a short loop (48 ticks at most). This module renders that
+ * loop once, splits it into a BODY layer and a 7-frame WATER layer (they
+ * composite back pixel-for-pixel: compose() only paints water into empty
+ * cells and blanks a submerged body below the waterline), dedupes the
+ * frames, and turns each distinct frame into merged rectangles. The shipping
+ * <Otto/> mounts those rectangles ONCE as a strip of static Views and slides
+ * a window over the strip on the UI thread.
+ *
+ * Why: the buoy-optimize rounds in OTTO_PERF_PLAN.md showed that any renderer
+ * re-creating Views per tick pegs the JS thread (5 FPS at 34 sprites, dropped
+ * UI frames even at 1 sprite), while "mount once, move a window natively"
+ * costs nothing per tick and keeps moving while JS is blocked.
+ *
+ * Everything here is pure `react-native`-free TypeScript, cached per state.
+ */
+
+const CELLS = exports.CELLS = _ottoEngine.OTTO_GRID * _ottoEngine.OTTO_GRID;
+const WATER_ROW0 = exports.WATER_ROW0 = 13;
+const WATER_ROWS = exports.WATER_ROWS = _ottoEngine.OTTO_GRID - WATER_ROW0;
+const WATER_CELLS = exports.WATER_CELLS = WATER_ROWS * _ottoEngine.OTTO_GRID;
+/** The wave is a function of floor(t/2) mod 7. */
+const WATER_FRAMES = exports.WATER_FRAMES = 7;
+const TRANSPARENT = exports.TRANSPARENT = "transparent";
+/** Longest state cycle in ticks (idle and sleep are 48). */
+const MAX_PERIOD = exports.MAX_PERIOD = 48;
+function gridKey(grid) {
+  return grid.map(r => r.join("")).join("|");
+}
+
+/** Flat 256 colours, row-major, `transparent` for empty cells. */
+function flatColors(grid) {
+  const out = new Array(CELLS);
+  for (let y = 0; y < _ottoEngine.OTTO_GRID; y++) {
+    const row = grid[y];
+    for (let x = 0; x < _ottoEngine.OTTO_GRID; x++) out[y * _ottoEngine.OTTO_GRID + x] = _ottoEngine.OTTO_PALETTE[row[x]] ?? TRANSPARENT;
+  }
+  return out;
+}
+
+// ---------------------------------------------------------------- cycle ---
+
+const cycleCache = new Map();
+function ottoCycle(state, keyline) {
+  const cacheKey = `${state}|${keyline ? 1 : 0}`;
+  const hit = cycleCache.get(cacheKey);
+  if (hit) return hit;
+  const keys = [];
+  const grids = [];
+  for (let t = 0; t < MAX_PERIOD * 2; t++) {
+    const g = (0, _ottoEngine.renderOttoFrame)(state, t, {
+      water: false,
+      keyline
+    });
+    grids.push(g);
+    keys.push(gridKey(g));
+  }
+  let period = MAX_PERIOD;
+  for (let P = 1; P <= MAX_PERIOD; P++) {
+    let ok = true;
+    for (let t = 0; t < MAX_PERIOD; t++) {
+      if (keys[t] !== keys[t + P]) {
+        ok = false;
+        break;
+      }
+    }
+    if (ok) {
+      period = P;
+      break;
+    }
+  }
+  const body = grids.slice(0, period).map(flatColors);
+  const water = [];
+  for (let w = 0; w < WATER_FRAMES; w++) {
+    const flat = [];
+    for (const row of (0, _ottoEngine.ottoWaterRows)(w * 2)) for (const k of row) flat.push(_ottoEngine.OTTO_PALETTE[k] ?? TRANSPARENT);
+    water.push(flat);
+  }
+  const cycle = {
+    period,
+    body,
+    water
+  };
+  cycleCache.set(cacheKey, cycle);
+  return cycle;
+}
+
+/** Frame indexes for a cycle at local tick `t`. */
+function cycleIndexes(t, period) {
+  const local = Math.max(0, t);
+  return {
+    bi: local % period,
+    wi: Math.floor(local / 2) % WATER_FRAMES
+  };
+}
+
+// ---------------------------------------------------------------- rects ---
+
+/**
+ * Same-colour runs per row, then runs merged with the identical run directly
+ * below them — roughly a third fewer Views than row runs alone. Covers
+ * exactly the non-transparent cells, never overlaps (proved offline over
+ * every frame of every state).
+ */
+function rectsOf(colors, cols, rows) {
+  const open = [];
+  const done = [];
+  for (let y = 0; y < rows; y++) {
+    const rowRuns = [];
+    let x = 0;
+    while (x < cols) {
+      const color = colors[y * cols + x];
+      let w = 1;
+      while (x + w < cols && colors[y * cols + x + w] === color) w++;
+      if (color !== TRANSPARENT) rowRuns.push({
+        x,
+        y,
+        w,
+        h: 1,
+        color
+      });
+      x += w;
+    }
+    const next = [];
+    for (const r of rowRuns) {
+      const above = open.find(o => o.x === r.x && o.w === r.w && o.color === r.color && o.y + o.h === r.y);
+      if (above) {
+        above.h += 1;
+        next.push(above);
+      } else {
+        next.push(r);
+      }
+    }
+    for (const o of open) if (!next.includes(o)) done.push(o);
+    open.length = 0;
+    open.push(...next);
+  }
+  done.push(...open);
+  return done;
+}
+
+// ---------------------------------------------------------------- sheets --
+
+/** One layer as a strip of distinct frames, and which frame each tick shows. */
+
+const sheetCache = new Map();
+function stripOf(frames, cols, rows) {
+  const keys = frames.map(f => f.join(","));
+  const indexOf = new Map();
+  const distinct = [];
+  keys.forEach((k, i) => {
+    if (!indexOf.has(k)) {
+      indexOf.set(k, distinct.length);
+      distinct.push(rectsOf(frames[i], cols, rows));
+    }
+  });
+  return {
+    colOf: keys.map(k => indexOf.get(k) ?? 0),
+    frames: distinct
+  };
+}
+
+/** Both layers of a state as strips of rectangles. Pure; cached per state. */
+function ottoSheets(state, keyline) {
+  const key = `${state}|${keyline ? 1 : 0}`;
+  const hit = sheetCache.get(key);
+  if (hit) return hit;
+  const cycle = ottoCycle(state, keyline);
+  const built = {
+    period: cycle.period,
+    body: stripOf(cycle.body, _ottoEngine.OTTO_GRID, _ottoEngine.OTTO_GRID),
+    water: stripOf(cycle.water, _ottoEngine.OTTO_GRID, WATER_ROWS)
+  };
+  sheetCache.set(key, built);
+  return built;
+}

package/lib/module/JsModal.js

@@ -433,15 +433,19 @@ const JsModalComponent = ({
     return () => clearTimeout(timeoutId);
   }, [mode, panelHeight, dimensions, visible, persistenceKey, enablePersistence, isStateLoaded]);
 
-  // Sync with external height if provided
+  // Seed the external height ONCE. This used to re-run when `isResizing`
+  // flipped, which snapped an externally-controlled sheet back to
+  // initialHeight the moment a drag-resize ended (the release handler had
+  // just written the real height). The host owns the value after the seed;
+  // persistence restore above may overwrite the seed, which is correct.
+  const externalHeightSeeded = useRef(false);
   useEffect(() => {
-    // Height sync effect
-    if (externalAnimatedHeight && !isResizing) {
+    if (externalAnimatedHeight && !externalHeightSeeded.current) {
+      externalHeightSeeded.current = true;
       currentHeightRef.current = initialHeight;
       externalAnimatedHeight.setValue(initialHeight);
-      // Set external height
     }
-  }, [externalAnimatedHeight, initialHeight, isResizing]);
+  }, [externalAnimatedHeight, initialHeight]);
 
   // Update refs when dimensions change
   useEffect(() => {
@@ -531,11 +535,14 @@ const JsModalComponent = ({
           onModeChangeRef.current?.(savedState.mode);
         }
 
-        // Restore bottom sheet height
+        // Restore bottom sheet height. The external animated height (when a
+        // host passes one) IS the rendered height, so it must be restored
+        // too or a persisted sheet always reopens at initialHeight.
         if (savedState.panelHeight) {
           setPanelHeight(savedState.panelHeight);
           currentHeightRef.current = savedState.panelHeight;
           animatedBottomPosition.setValue(savedState.panelHeight);
+          externalAnimatedHeight?.setValue(savedState.panelHeight);
         }
 
         // Restore floating dimensions and position

package/lib/module/hooks/safe-area-impl.js

@@ -3,7 +3,7 @@
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-09-01T17:57:34.045Z
+ * Generated at: 2026-09-02T23:25:39.783Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/storage/devToolsStorageKeys.js

@@ -250,6 +250,18 @@ export const devToolsStorageKeys = {
     pausedAt: () => `${devToolsStorageKeys.events.root()}_paused_at`,
     /** Copy/export settings */
     copySettings: () => `${devToolsStorageKeys.events.root()}_copy_settings`
+  },
+  /**
+   * Desktop/MCP sync identity
+   */
+  sync: {
+    root: () => `${devToolsStorageKeys.base}_sync`,
+    /**
+     * The per-install id minted the first time this app dials the broker.
+     * It is what makes two devices on the same build register as two
+     * devices — see core's deviceIdentity.ts.
+     */
+    deviceId: () => `${devToolsStorageKeys.sync.root()}_device_id`
   }
 };
 

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

@@ -2,11 +2,13 @@
 
 import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
 import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
+import { Otto } from "../otto/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Reusable empty state component for consistent empty/no-data displays
  */
 export function EmptyState({
+  otto,
   title,
   description,
   icon: Icon,
@@ -21,13 +23,19 @@ export function EmptyState({
     style: containerStyle,
     children: /*#__PURE__*/_jsxs(View, {
       style: styles.content,
-      children: [Icon && /*#__PURE__*/_jsx(View, {
+      children: [otto ? /*#__PURE__*/_jsx(View, {
+        style: styles.iconContainer,
+        children: /*#__PURE__*/_jsx(Otto, {
+          state: otto,
+          pixelSize: Math.max(2, Math.round(iconSize / 16))
+        })
+      }) : Icon ? /*#__PURE__*/_jsx(View, {
         style: styles.iconContainer,
         children: /*#__PURE__*/_jsx(Icon, {
           size: iconSize,
           color: iconColor
         })
-      }), /*#__PURE__*/_jsx(Text, {
+      }) : null, /*#__PURE__*/_jsx(Text, {
         style: styles.title,
         children: title
       }), description && /*#__PURE__*/_jsx(Text, {

package/lib/module/ui/components/ToolEmptyState.js

@@ -0,0 +1,149 @@
+"use strict";
+
+/**
+ * The one "nothing here" panel, for every tool that shows a list.
+ *
+ * WHY THIS EXISTS
+ *
+ * Every capture tool — network, events, highlight-updates, storage, zustand,
+ * redux, jotai, console — renders the same panel with the same four causes and
+ * different nouns. Written out per tool, that produced four copies of the same
+ * layout (each of which had to be re-inset by hand the first time a sentence
+ * was longer than "No events yet"), and four independent guesses at the
+ * PRECEDENCE between those causes. The guesses disagreed, and the disagreements
+ * were bugs:
+ *
+ *   - A search that matched nothing showed "Enable tracking to start
+ *     capturing" — pointing at a toggle that was already on.
+ *   - Turning every source chip off showed "Events will appear here as they
+ *     occur" — inviting you to go generate events that were already in the
+ *     store, behind your own filter.
+ *   - Typing into a search box while the store was empty produced no
+ *     acknowledgement of the query at all, which reads as a dead search box.
+ *
+ * So the precedence lives here, once, and each tool supplies only what is
+ * genuinely its own: the noun, and what "switched on but waiting" looks like
+ * for it (network fishes, events listens, the highlighter stares).
+ *
+ * SPLIT IN TWO ON PURPOSE
+ *
+ * `resolveListEmptyState` is a pure function returning `{ otto, title,
+ * message }`, and `ToolEmptyState` renders that object. Tools with a cause
+ * nobody else has — storage's "no issues found" (which is a PASS, not a
+ * failure), zustand's unregistered store — resolve the common cases and
+ * substitute their own, or skip the resolver and hand the shell a literal.
+ * Adding a mascot to every tool at once is then one edit in this file, which is
+ * also what makes the Flutter and Swift ports one component to mirror instead
+ * of eight.
+ */
+
+import { StyleSheet, Text, View } from "react-native";
+import { Otto } from "../otto/index.js";
+import { night } from "../night/nightTheme.js";
+
+/** What a "nothing here" panel says. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The panel itself: Otto, a heading, a sentence. Nothing else — this only ever
+ * renders where the alternative is a blank body, so it has no actions and no
+ * decoration to compete with the list it stands in for.
+ */
+export function ToolEmptyState({
+  otto,
+  title,
+  message,
+  testID,
+  style
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Otto, {
+      state: otto,
+      pixelSize: 2
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.title,
+      testID: testID ? `${testID}-title` : undefined,
+      numberOfLines: 2,
+      children: title
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.message,
+      testID: testID ? `${testID}-text` : undefined,
+      children: message
+    })]
+  });
+}
+/**
+ * Which "nothing here" this is, in the order the facts answer the question.
+ *
+ * A typed query first (see `search`), then the user's filters, then the
+ * capture switch, then the honest "nothing yet".
+ */
+export function resolveListEmptyState(facts) {
+  const {
+    subject,
+    verb = "captured",
+    search,
+    total = 0,
+    capturing,
+    waiting,
+    paused,
+    blocked
+  } = facts;
+  const term = (search ?? "").trim();
+  if (term) {
+    return {
+      otto: "sad",
+      // The query goes in the HEADING because checking what you typed is the
+      // first thing you do; the body names whichever blocker is in the way.
+      title: `No results for “${term}”`,
+      message: blocked ?? (total > 0 ? `None of the ${total} ${verb} ${subject} match. Clear the search to see them.` : capturing === false ? `Nothing is ${verb} to search — capture is off. Turn it on to start.` : `Nothing has been ${verb} yet, so there is nothing to match.`)
+    };
+  }
+  if (blocked) {
+    return {
+      otto: "filtering",
+      title: "Filtered Out",
+      message: blocked
+    };
+  }
+  if (total > 0) {
+    return {
+      otto: "filtering",
+      title: "Filtered Out",
+      message: `${total} ${verb} ${subject} ${total === 1 ? "is" : "are"} hidden by the active filters.`
+    };
+  }
+  if (capturing === false) {
+    return {
+      otto: paused?.otto ?? "paused",
+      title: paused?.title ?? "Not capturing",
+      message: paused?.message ?? "Capture is off. Turn it on to start."
+    };
+  }
+  return waiting;
+}
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    paddingVertical: 40,
+    // The generated sentences are full sentences. Every tool that hand-rolled
+    // this panel shipped without an inset and had it run to both edges of the
+    // sheet the first time the copy grew past a few words.
+    paddingHorizontal: 24
+  },
+  title: {
+    color: night.color.text,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6,
+    textAlign: "center"
+  },
+  message: {
+    color: night.color.textTertiary,
+    fontSize: 12,
+    textAlign: "center",
+    lineHeight: 17
+  }
+});

package/lib/module/ui/components/WindowControls.js

@@ -70,7 +70,8 @@ export function WindowControls({
   onMinimize,
   onToggleMode,
   mode,
-  variant = "night"
+  variant = "night",
+  defaultExpanded
 }) {
   // Show action-based icon: what will happen when clicked
   const ToggleModeIcon = mode === "floating" ? DockBottom : FloatWindow;
@@ -125,7 +126,8 @@ export function WindowControls({
     onMinimize: onMinimize,
     onToggleMode: onToggleMode,
     mode: mode,
-    variant: variant
+    variant: variant,
+    defaultExpanded: defaultExpanded
   });
 }
 function ExpandableWindowControls({
@@ -133,11 +135,12 @@ function ExpandableWindowControls({
   onMinimize,
   onToggleMode,
   mode,
-  variant = "night"
+  variant = "night",
+  defaultExpanded = false
 }) {
   const isNight = variant === "night";
-  const [expanded, setExpanded] = useState(false);
-  const expandAnim = useRef(new Animated.Value(0)).current;
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const expandAnim = useRef(new Animated.Value(defaultExpanded ? 1 : 0)).current;
   const dismissTimeout = useRef(null);
   const ToggleModeIcon = mode === "floating" ? DockBottom : FloatWindow;
   const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";

package/lib/module/ui/components/index.js

@@ -21,6 +21,9 @@ export { CompactRow } from "./CompactRow.js";
 export { DevToolsCard, DEVTOOLS_CARD_CONSTANTS } from "./DevToolsCard.js";
 export { HeaderSearchButton } from "./HeaderSearchButton.js";
 export { EmptyState, NoDataEmptyState, NoResultsEmptyState, NoSearchResultsEmptyState } from "./EmptyState.js";
+// The shared "nothing here" panel + the precedence between its causes. Every
+// capture tool's list empty goes through this — see the file header.
+export { ToolEmptyState, resolveListEmptyState } from "./ToolEmptyState.js";
 export { StatusIndicator } from "./StatusIndicator.js";
 export { TimeDisplay } from "./TimeDisplay.js";
 export { DetailView } from "./DetailView.js";

package/lib/module/ui/index.js

@@ -15,4 +15,7 @@ export { toolTheme } from "./toolTheme.js";
 export { CyberpunkSectionButton } from "./console/CyberpunkSectionButton.js";
 
 // Game UI (colors, hooks, components)
-export * from "./gameUI/index.js";
+export * from "./gameUI/index.js";
+
+// Otto — the Buoy mascot (see OTTO_PLACEMENT_PLAN.md for where he belongs)
+export * from "./otto/index.js";