@buoy-gg/shared-ui 7.0.3 → 7.0.5

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

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { StyleSheet, View, Animated } from "react-native";
 import { ExpandableSectionHeader } from "./ExpandableSectionHeader.js";
+import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ExpandableSection({
   icon,
@@ -47,10 +48,10 @@ export function ExpandableSection({
 }
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "#1F1F1F",
+    backgroundColor: macOSColors.background.card,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)",
+    borderColor: "rgba(128, 128, 128, 0.16)",
     overflow: "hidden",
     marginHorizontal: 8,
     marginBottom: 16
@@ -61,7 +62,7 @@ const styles = StyleSheet.create({
   divider: {
     height: 1,
     width: "100%",
-    backgroundColor: "rgba(255, 255, 255, 0.06)",
+    backgroundColor: "rgba(128, 128, 128, 0.12)",
     marginBottom: 24
   }
 });

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

@@ -2,6 +2,7 @@
 
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { ChevronDown, ChevronRight } from "../../icons/index.js";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ExpandableSectionHeader({
   icon: Icon,
@@ -74,7 +75,7 @@ const styles = StyleSheet.create({
   },
   subtitle: {
     fontSize: 16,
-    color: "#9CA3AF"
+    color: buoyColors.textSecondary
   },
   chevronContainer: {
     paddingTop: 6

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

@@ -3,6 +3,8 @@
 import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
 import { Plus } from "../../icons/index.js";
 import { gameUIColors } from "../gameUI/constants/gameUIColors.js";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
 import { useFilterManager } from "../../hooks/useFilterManager.js";
 import { FilterSection, AddFilterInput, AddFilterButton, FilterList } from "./FilterComponents.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -118,17 +120,17 @@ const styles = StyleSheet.create({
     backgroundColor: "transparent"
   },
   suggestedContainer: {
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     borderRadius: 8,
     padding: 12,
     marginBottom: 16,
     maxHeight: 300,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)"
+    borderColor: "rgba(128, 128, 128, 0.16)"
   },
   suggestedTitle: {
     fontSize: 10,
-    color: "#6B7280",
+    color: macOSColors.text.icon,
     fontWeight: "600",
     letterSpacing: 0.5,
     marginBottom: 12,
@@ -140,24 +142,24 @@ const styles = StyleSheet.create({
   suggestedItem: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    backgroundColor: "rgba(128, 128, 128, 0.04)",
     borderRadius: 6,
     paddingHorizontal: 10,
     paddingVertical: 10,
     marginBottom: 6,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.05)"
+    borderColor: "rgba(128, 128, 128, 0.1)"
   },
   suggestedText: {
     flex: 1,
     fontSize: 12,
-    color: "#E5E7EB",
+    color: buoyColors.text,
     fontFamily: "monospace",
     marginLeft: 4
   },
   emptyText: {
     fontSize: 11,
-    color: "#6B7280",
+    color: macOSColors.text.icon,
     fontStyle: "italic",
     padding: 12,
     textAlign: "center"

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

@@ -1,6 +1,8 @@
 "use strict";
 
 import { TouchableOpacity, View, Text, StyleSheet } from "react-native";
+import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
 
 // Base ListItem container component
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -120,13 +122,13 @@ ListItem.Metadata = Metadata;
 ListItem.Actions = Actions;
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "#1A1A1A",
+    backgroundColor: buoyColors.card,
     borderRadius: 8,
     padding: 12,
     marginHorizontal: 16,
     marginVertical: 4,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.05)"
+    borderColor: "rgba(128, 128, 128, 0.1)"
   },
   header: {
     flexDirection: "row",
@@ -146,17 +148,17 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#E5E7EB",
+    color: buoyColors.text,
     marginBottom: 4
   },
   subtitle: {
     fontSize: 14,
-    color: "#9CA3AF",
+    color: buoyColors.textSecondary,
     lineHeight: 20
   },
   metadata: {
     fontSize: 12,
-    color: "#6B7280"
+    color: macOSColors.text.icon
   },
   actions: {
     flexDirection: "row",

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

@@ -59,9 +59,12 @@ const styles = StyleSheet.create({
     backgroundColor: macOSColors.semantic.successBackground,
     borderColor: macOSColors.semantic.success + "40"
   },
+  // OFF stays red on both chromes: capture being disabled is exactly the kind
+  // of state the user needs to notice, so it keeps its colour.
   disabledButton: {
     backgroundColor: macOSColors.semantic.errorBackground,
-    borderColor: macOSColors.semantic.error + "40"
+    borderColor: macOSColors.semantic.error + "40",
+    borderWidth: 1
   },
   buttonDisabled: {
     opacity: 0.55

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

@@ -43,6 +43,9 @@ const styles = StyleSheet.create({
     flex: 1,
     marginHorizontal: 1
   },
+  /**
+   * The selected tab is marked with an accent ring.
+   */
   tabButtonActive: {
     backgroundColor: buoyColors.primary + "20",
     borderWidth: 1,

package/lib/module/ui/console/CyberpunkConsoleSection.js

@@ -502,7 +502,7 @@ const styles = StyleSheet.create({
   },
   glassShimmer: {
     ...absoluteFill,
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     opacity: 0.6
   },
   glitchOverlayLayer: {

package/lib/module/ui/console/GalaxyButton.js

@@ -69,7 +69,7 @@ const styles = StyleSheet.create({
     backgroundColor: "rgba(31, 31, 31, 0.85)",
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.12)",
+    borderColor: "rgba(128, 128, 128, 0.24)",
     overflow: "hidden"
   },
   starsContainer: {

package/lib/module/ui/gameUI/components/GameUICompactStats.js

@@ -164,7 +164,7 @@ const styles = StyleSheet.create({
     marginBottom: 8,
     paddingBottom: 8,
     borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.05)"
+    borderBottomColor: "rgba(128, 128, 128, 0.1)"
   },
   headerLeft: {
     gap: 1
@@ -219,7 +219,7 @@ const styles = StyleSheet.create({
   },
   healthBarBg: {
     height: 4,
-    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    backgroundColor: "rgba(128, 128, 128, 0.1)",
     borderRadius: 2,
     overflow: "hidden"
   },

package/lib/module/ui/gameUI/constants/gameUIColors.js

@@ -9,7 +9,7 @@
  * 3. Save and refresh
  */
 
-import { macOSGameUIColors } from "./macOSDesignSystemColors.js";
+import { macOSGameUIColors, refreshMacOSGameUIColors } from "./macOSDesignSystemColors.js";
 
 // ============================================
 // THEME DEFINITIONS
@@ -126,9 +126,18 @@ const activeTheme = macOSTheme; // macOS - Apple HIG design system
 // GAME UI COLORS (uses selected theme)
 // ============================================
 
-export const gameUIColors = {
-  ...activeTheme,
-  // Defaults (dark-ish) which can be overridden by theme spreads
+/* NOTE ON KEY ORDER — the spread comes LAST on purpose.
+ *
+ * These seven keys are fallbacks for `defaultTheme`, which doesn't define them.
+ * They used to sit AFTER the spread, which meant they silently overrode the
+ * active theme: `background`/`panel`/`buttonBackground` stayed hardcoded dark
+ * and `primary`/`primaryLight` stayed hardcoded white, no matter what palette
+ * was selected, so a theme could not override them at all. With the spread
+ * last, an active theme that defines them wins and only `defaultTheme` falls
+ * back. */
+/** Fallbacks (dark-ish) for themes that don't define these keys — only
+ * `defaultTheme` needs them; `macOSTheme` supplies all seven. */
+const fallbacks = {
   background: "rgba(8, 12, 21, 0.98)",
   panel: "rgba(16, 22, 35, 0.98)",
   backdrop: "rgba(0, 0, 0, 0.85)",
@@ -137,9 +146,21 @@ export const gameUIColors = {
   // Default text colors for dark background
   primary: "#FFFFFF",
   primaryLight: "#F1F5F9"
-
-  // Theme-specific colors (later spread overrides defaults when present)
 };
+export const gameUIColors = {
+  ...fallbacks,
+  ...activeTheme
+};
+/** Re-derive the theme-driven values in place after `macOSColors` has been
+ * re-tinted at runtime (desktop dashboard theme switch only — see
+ * in place). Keeps object identity so every
+ * `gameUIColors.x` read at render time picks the new value up. Module-level
+ * captures (`const BG = gameUIColors.panel`) still need a reload. */
+export const refreshGameUIColors = () => {
+  refreshMacOSGameUIColors();
+  Object.assign(gameUIColors, activeTheme);
+};
+
 // ============================================
 // BUOY BRAND COLORS
 // ============================================

package/lib/module/ui/gameUI/constants/macOSDesignSystemColors.js

@@ -156,8 +156,14 @@ export const macOSColors = {
   }
 };
 
-// Create a compatible gameUIColors object for gradual migration
-export const macOSGameUIColors = {
+/* `macOSGameUIColors` is a DERIVED SNAPSHOT: every field below copies a string
+ * value out of `macOSColors` at module-evaluation time, so later edits to
+ * `macOSColors` do not reach it. The desktop dashboard re-tints the palette by
+ * mutating `macOSColors` in place,
+ * which is why the snapshot is built by a factory and can be refreshed with
+ * `refreshMacOSGameUIColors()`. Nested objects (`dataTypes`, `diff`) are shared
+ * REFERENCES, not copies, so those already follow a re-tint on their own. */
+const buildMacOSGameUIColors = () => ({
   // Base backgrounds
   background: macOSColors.background.base,
   panel: macOSColors.background.card,
@@ -199,4 +205,15 @@ export const macOSGameUIColors = {
     secondary: macOSColors.semantic.debug,
     tertiary: macOSColors.semantic.success
   }
+});
+
+// Create a compatible gameUIColors object for gradual migration
+export const macOSGameUIColors = buildMacOSGameUIColors();
+
+/** Re-derive the snapshot above from the current `macOSColors` values, keeping
+ * the object identity so existing importers see the new colors. Only the
+ * desktop dashboard's theme switcher calls this; on device the palette never
+ * changes, so this is a no-op that is never invoked. */
+export const refreshMacOSGameUIColors = () => {
+  Object.assign(macOSGameUIColors, buildMacOSGameUIColors());
 };

package/lib/module/utils/index.js

@@ -9,6 +9,7 @@ export { getValueType, isPrimitive, isJsonSerializable, isValidJson, getConstruc
 export { parseValue, formatValue, getTypeColor, truncateText, flattenObject, formatPath } from "./valueFormatting.js";
 export { loadOptionalModule, getCachedOptionalModule } from "./loadOptionalModule.js";
 export { setRenderCaptureProvider, getRenderCaptureProvider } from "./renderCaptureRegistry.js";
+export { reloadApp, scheduleReloadApp, resolveReloadStrategy, REMOTE_RELOAD_DELAY_MS } from "./reloadApp.js";
 export { Subscribable } from "./subscribable.js";
 export { subscriberCountNotifier, subscribeToSubscriberCountChanges, notifySubscriberCountChange } from "./subscriberCountNotifier.js";
 export { useSafeRouter, useSafePathname, useSafeSegments, useSafeGlobalSearchParams, getSafeRouter, getSafeCurrentPathname, isExpoRouterAvailable } from "./safeExpoRouter.js";

package/lib/module/utils/reloadApp.js

@@ -0,0 +1,137 @@
+"use strict";
+
+/**
+ * reloadApp
+ *
+ * Programmatic JS-bundle reload primitive. Two strategies, picked at runtime:
+ *
+ * - `dev-settings`: React Native core's `DevSettings.reload()`. Works in
+ *   __DEV__ builds (including Expo Go) with zero deps, but throws in
+ *   release.
+ * - `expo-updates`: `Updates.reloadAsync()` from the `expo-updates`
+ *   package. Works in dev clients and production, but fails in Expo Go
+ *   and is not bundled with any Buoy package — host apps opt in by
+ *   installing `expo-updates` separately.
+ *
+ * "auto" prefers `dev-settings` in __DEV__ and falls back to
+ * `expo-updates` otherwise. The dynamic `require` keeps `expo-updates` an
+ * optional peer — Expo Go users never load it.
+ *
+ * Lives in shared (not in a tool package) because BOTH the always-installed
+ * core — whose `app` sync adapter exposes reload to remote drivers like the
+ * MCP server — and perf-monitor's batch runner (reload between cases) need it,
+ * and reloading must not require a tool with native peer deps.
+ *
+ * IMPORTANT: callers must persist any state they need to survive BEFORE
+ * invoking this. Once the reload fires, the JS realm is gone — there is
+ * no "after" code path.
+ */
+
+/** The concrete mechanism a `ReloadStrategy` resolves to at runtime. */
+
+function loadDevSettings() {
+  try {
+    // Prefer the core RN module; cast to unknown first so TS doesn't try
+    // to follow into RN's typings (the package may not be in the type
+    // graph in some build setups).
+    const rn = require("react-native");
+    const ds = rn?.DevSettings;
+    if (ds && typeof ds.reload === "function") {
+      return ds;
+    }
+  } catch {
+    // fall through
+  }
+  return null;
+}
+function loadExpoUpdates() {
+  try {
+    const mod = require("expo-updates");
+    if (mod && typeof mod.reloadAsync === "function") {
+      return mod;
+    }
+  } catch {
+    // expo-updates not installed
+  }
+  return null;
+}
+
+/**
+ * Which mechanism `strategy` would actually use right now, or null when none
+ * is available. Lets a caller check reloadability BEFORE committing (e.g. a
+ * remote driver that must answer "will this work?" over the wire, since after
+ * the reload fires there is no code path left to answer from).
+ */
+export function resolveReloadStrategy(strategy = "auto") {
+  if (strategy === "dev-settings") {
+    return loadDevSettings() ? "dev-settings" : null;
+  }
+  if (strategy === "expo-updates") {
+    return loadExpoUpdates() ? "expo-updates" : null;
+  }
+  if (__DEV__ && loadDevSettings()) return "dev-settings";
+  return loadExpoUpdates() ? "expo-updates" : null;
+}
+
+/** Why `strategy` can't run, phrased for the person who has to fix it. */
+function unavailableMessage(strategy) {
+  if (strategy === "dev-settings") {
+    return "[buoy] DevSettings.reload() unavailable — strategy 'dev-settings' requires React Native dev mode.";
+  }
+  if (strategy === "expo-updates") {
+    return "[buoy] expo-updates not installed — strategy 'expo-updates' requires the host app to add the dependency.";
+  }
+  return "[buoy] No reload mechanism available. Run in __DEV__ or install expo-updates.";
+}
+
+/**
+ * Trigger a full JS bundle reload. Resolves to a never-resolving promise
+ * because the realm is being torn down — code after the call should not
+ * execute. Throws synchronously if no strategy is available.
+ */
+export async function reloadApp(strategy = "auto", reason = "buoy reload") {
+  const resolved = resolveReloadStrategy(strategy);
+  if (!resolved) throw new Error(unavailableMessage(strategy));
+  if (resolved === "dev-settings") {
+    loadDevSettings().reload(reason);
+  } else {
+    await loadExpoUpdates().reloadAsync();
+  }
+  return await new Promise(() => {});
+}
+
+/**
+ * Delay before a remotely-requested reload actually fires. The realm dies the
+ * instant it does, so a remote caller's acknowledgement (an action result on
+ * the sync socket) must be flushed to the broker first — this is the window
+ * that lets it get out.
+ */
+export const REMOTE_RELOAD_DELAY_MS = 250;
+
+/**
+ * Arm a reload to fire shortly, and report which mechanism will do it.
+ *
+ * Unlike {@link reloadApp}, this returns — synchronously and BEFORE the realm
+ * is torn down — so a remote driver (Buoy Desktop, the MCP server) can answer
+ * "reload accepted, via dev-settings" over the socket. Throws (without
+ * scheduling anything) when no mechanism is available, so an impossible reload
+ * fails loudly instead of looking accepted and silently doing nothing.
+ */
+export function scheduleReloadApp(options) {
+  const strategy = options?.strategy ?? "auto";
+  const resolved = resolveReloadStrategy(strategy);
+  if (!resolved) throw new Error(unavailableMessage(strategy));
+  const delayMs = Math.max(0, options?.delayMs ?? REMOTE_RELOAD_DELAY_MS);
+  const reason = options?.reason ?? "buoy remote reload";
+  setTimeout(() => {
+    void reloadApp(resolved, reason).catch(() => {
+      // Nothing left to report to — the caller already got its ack, and the
+      // pre-flight resolve above means this only trips on a mechanism that
+      // broke between scheduling and firing.
+    });
+  }, delayMs);
+  return {
+    strategy: resolved,
+    delayMs
+  };
+}

package/lib/typescript/commonjs/colors/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Palette-only entry point.
+ *
+ * WHY THIS EXISTS: the desktop dashboard re-tints the design system by mutating
+ * these objects in place, and that has to happen BEFORE any component module is
+ * evaluated — React Native `StyleSheet.create({...})` calls run at module load
+ * and freeze whatever colors they read.
+ *
+ * Importing the palettes from the package root (`@buoy-gg/shared-ui`) does the
+ * opposite: the root barrel re-exports every component, so pulling one constant
+ * out of it evaluates all of their StyleSheets first, and the re-tint lands too
+ * late — panels keep dark surfaces while inline reads go light.
+ *
+ * This subpath pulls in the two constants modules and nothing else, so the
+ * bootstrap can swap palettes with an empty component graph behind it. Import
+ * from here in anything that runs before the app mounts.
+ */
+export { macOSColors, macOSGameUIColors, refreshMacOSGameUIColors, } from "../ui/gameUI/constants/macOSDesignSystemColors";
+export { gameUIColors, buoyColors, dialColors, refreshGameUIColors, } from "../ui/gameUI/constants/gameUIColors";
+export type { GameUIColorKey, BuoyColorKey, } from "../ui/gameUI/constants/gameUIColors";
+export type { MacOSColorKey } from "../ui/gameUI/constants/macOSDesignSystemColors";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/colors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/colors/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,wBAAwB,GACzB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,YAAY,EACZ,UAAU,EACV,UAAU,EACV,mBAAmB,GACpB,MAAM,qCAAqC,CAAC;AAC7C,YAAY,EACV,cAAc,EACd,YAAY,GACb,MAAM,qCAAqC,CAAC;AAC7C,YAAY,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAC"}

package/lib/typescript/commonjs/dataViewer/DataTreeActionBar.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Footer bar for the data explorer's selected node — the editor's controls.
+ *
+ * Ports the action strip from the desktop mockup ("Desktop app network dev
+ * tools redesign" → Value card footer): the selected node's label and type on
+ * the left, its available operations on the right, and a hint line when nothing
+ * is selected yet.
+ *
+ * The controls deliberately do NOT live inside the tree rows. A row is 28px
+ * tall and already carries a caret, a key, a value and a copy button, so
+ * per-row icon buttons land around 20px — under the touch target a phone needs,
+ * and immediately beside the copy button, which makes mis-taps easy. Hosting
+ * them in one bar keeps every target full size and in a predictable place.
+ *
+ * So the split is: the tree owns SELECTION, this bar owns ACTIONS.
+ *
+ * Nothing here mutates. Each control emits a {@link JsonOp} against the
+ * selection's path and the host applies it, so the explorer stays a pure view.
+ */
+import { type ViewStyle } from "react-native";
+import type { JsonOp } from "./jsonOps";
+import { type DataTreeSelection } from "./treeActions";
+export type { DataTreeSelection };
+export interface DataTreeActionBarProps {
+    /** The whole document, so the bar can see the selection's PARENT. */
+    root: unknown;
+    /** Null renders the discoverability hint instead of controls. */
+    selection: DataTreeSelection | null;
+    onEdit: (op: JsonOp) => void;
+    /**
+     * Start editing the selected scalar. The tree renders the field in the row
+     * itself (matching the mockup), so the host owns that state — this is the
+     * button-driven way in, alongside double-tapping the row.
+     */
+    onRequestInlineEdit: () => void;
+    /** Extra style for the buttons, so a host can match its own chrome. */
+    chipStyle?: ViewStyle;
+}
+export declare function DataTreeActionBar({ root, selection, onEdit, onRequestInlineEdit, chipStyle, }: DataTreeActionBarProps): import("react").JSX.Element;
+/**
+ * The field that replaces a row's value while editing it, per the mockup.
+ *
+ * Type-preserving by construction rather than by parsing guesswork: the
+ * ORIGINAL value's type decides how the draft is read back, so editing a number
+ * can only ever produce a number. Booleans skip text entirely — there is
+ * nothing to type, so they commit straight from a two-way toggle.
+ */
+export declare function DataTreeInlineEditor({ value, onCommit, onCancel, }: {
+    value: unknown;
+    onCommit: (next: unknown) => void;
+    onCancel: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DataTreeActionBar.d.ts.map

package/lib/typescript/commonjs/dataViewer/DataTreeActionBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTreeActionBar.d.ts","sourceRoot":"","sources":["../../../../src/dataViewer/DataTreeActionBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAKL,KAAK,iBAAiB,EACvB,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAsBlC,MAAM,WAAW,sBAAsB;IACrC,qEAAqE;IACrE,IAAI,EAAE,OAAO,CAAC;IACd,iEAAiE;IACjE,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,uEAAuE;IACvE,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AA+CD,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,mBAAmB,EACnB,SAAS,GACV,EAAE,sBAAsB,+BA4ExB;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,+BAuEA"}

package/lib/typescript/commonjs/dataViewer/DataTreeActionDock.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The phone's edit controls — a fixed grid of six thumb-sized tiles, docked
+ * under a full-screen tree.
+ *
+ * The dashboard renders the same six actions as {@link DataTreeActionBar}: a
+ * row of small chips, which is right beside a cursor and wrong under a thumb.
+ * Both read their list from `treeActionsFor`, so what's legal can't drift
+ * between them — only the shape does.
+ *
+ * Two tiles per row of three, always in the same slots, disabled rather than
+ * hidden. See `treeActionsFor` for why the list is fixed-length.
+ */
+import type { JsonOp } from "./jsonOps";
+import { type DataTreeSelection } from "./treeActions";
+export interface DataTreeActionDockProps {
+    /** The whole document, so the dock can see the selection's PARENT. */
+    root: unknown;
+    /** Null dims every tile and shows the discoverability hint. */
+    selection: DataTreeSelection | null;
+    /** Apply one structural edit. */
+    onEdit: (op: JsonOp) => void;
+    /** Move the highlight, for the ops that create or relocate a node. */
+    onSelectPath: (path: string[]) => void;
+    /** Open the host's value editor for the current selection. */
+    onEditValue: () => void;
+    /**
+     * Whether the host's value editor handles arrays and objects (a raw-JSON
+     * mode). The phone's does.
+     */
+    containersEditable?: boolean;
+}
+export declare function DataTreeActionDock({ root, selection, onEdit, onSelectPath, onEditValue, containersEditable, }: DataTreeActionDockProps): import("react").JSX.Element;
+//# sourceMappingURL=DataTreeActionDock.d.ts.map

package/lib/typescript/commonjs/dataViewer/DataTreeActionDock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTreeActionDock.d.ts","sourceRoot":"","sources":["../../../../src/dataViewer/DataTreeActionDock.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAIL,KAAK,iBAAiB,EAGvB,MAAM,eAAe,CAAC;AAqCvB,MAAM,WAAW,uBAAuB;IACtC,sEAAsE;IACtE,IAAI,EAAE,OAAO,CAAC;IACd,+DAA+D;IAC/D,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,iCAAiC;IACjC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,sEAAsE;IACtE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,8DAA8D;IAC9D,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAoCD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,YAAY,EACZ,WAAW,EACX,kBAAyB,GAC1B,EAAE,uBAAuB,+BAwCzB"}

package/lib/typescript/commonjs/dataViewer/DataViewer.d.ts

@@ -1,5 +1,6 @@
-import { FC } from "react";
+import { type FC, type ReactElement } from "react";
 import { JsonValue } from "../types/types";
+import type { DataTreeSelection } from "./DataTreeActionBar";
 interface DataViewerProps {
     title: string;
     data: JsonValue;
@@ -9,6 +10,18 @@ interface DataViewerProps {
     initialExpanded?: boolean;
     /** When true, disables copy functionality and shows upgrade modal (for Pro gating) */
     disableCopy?: boolean;
+    /**
+     * Opt in to selection — see `VirtualizedDataExplorer`. Pair with
+     * `DataTreeActionBar` to turn the selection into edit actions.
+     *
+     * Ignored while a type filter is active (see below).
+     */
+    onSelectionChange?: (selection: DataTreeSelection | null) => void;
+    /** Inline editing pass-throughs — see `VirtualizedDataExplorer`. */
+    onRequestInlineEdit?: (selection: DataTreeSelection) => void;
+    inlineEditPath?: string[] | null;
+    renderInlineEditor?: (selection: DataTreeSelection) => ReactElement | null;
+    selectPath?: string[] | null;
 }
 /**
  * DataViewer component that combines VirtualizedDataExplorer with TypeLegend

package/lib/typescript/commonjs/dataViewer/DataViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewer.d.ts","sourceRoot":"","sources":["../../../../src/dataViewer/DataViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,EAAE,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,SAAS,EAAiB,MAAM,gBAAgB,CAAC;AAG1D,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA4I1C,CAAC"}
+{"version":3,"file":"DataViewer.d.ts","sourceRoot":"","sources":["../../../../src/dataViewer/DataViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,SAAS,EAAiB,MAAM,gBAAgB,CAAC;AAE1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE,oEAAoE;IACpE,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7D,cAAc,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,YAAY,GAAG,IAAI,CAAC;IAC3E,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA2J1C,CAAC"}

package/lib/typescript/commonjs/dataViewer/VirtualizedDataExplorer.d.ts

@@ -1,5 +1,6 @@
 import { JsonValue } from "../types/types";
-import { FC } from "react";
+import { FC, ReactElement } from "react";
+import type { DataTreeSelection } from "./DataTreeActionBar";
 interface VirtualizedDataExplorerProps {
     title: string;
     description?: string;
@@ -8,6 +9,34 @@ interface VirtualizedDataExplorerProps {
     rawMode?: boolean;
     initialExpanded?: boolean;
     disableCopy?: boolean;
+    /**
+     * Opt in to selection: rows become tappable-to-select (including leaves) and
+     * the chosen node is reported here. Pair it with `DataTreeActionBar`, which
+     * turns a selection into edit actions — those live OUTSIDE the tree because a
+     * 24px row cannot hold a touch-sized button.
+     *
+     * Omit this and every row renders and behaves exactly as it always has.
+     */
+    onSelectionChange?: (selection: DataTreeSelection | null) => void;
+    /**
+     * Double-tapping a scalar row asks the host to start editing it. The field
+     * renders in the row itself (see `inlineEditPath` / `renderInlineEditor`),
+     * matching the mockup's double-click-to-edit.
+     */
+    onRequestInlineEdit?: (selection: DataTreeSelection) => void;
+    /** Data path of the row currently being edited, or null. */
+    inlineEditPath?: string[] | null;
+    /** Renders the editing field for that row. */
+    renderInlineEditor?: (selection: DataTreeSelection) => ReactElement | null;
+    /**
+     * Move the selection from outside. The host sets this after an edit that
+     * relocates the selected node (see `selectionPathAfterOp`) so the highlight
+     * follows the thing that moved instead of staying on the slot it left.
+     *
+     * Semi-controlled on purpose: the explorer still owns selection for ordinary
+     * taps, and only re-syncs when this path CHANGES.
+     */
+    selectPath?: string[] | null;
 }
 export declare const VirtualizedDataExplorer: FC<VirtualizedDataExplorerProps>;
 export {};