@buoy-gg/network 7.0.41 → 7.0.43

package/lib/module/network/components/DataViewer.web.js

@@ -1,875 +1 @@
-"use strict";
-
-/**
- * DataViewer.web — DOM twin of the shared-ui data-viewer stack, exactly as the
- * network DETAIL view consumes it (`rawMode` + type-filter legend +
- * `initialExpanded`). The web shim exposes none of this chrome, so it is
- * replicated here as DOM with provenance:
- *
- *  - `DataViewer` — shared/src/dataViewer/DataViewer.tsx (type-filter chips +
- *    the `flattenByType` filtered projection, algorithms copied verbatim).
- *  - Tree rows — shared/src/dataViewer/VirtualizedDataExplorer.tsx, rawMode
- *    path: synthetic "root" row, 24px rows, 16px indent per depth, chevron
- *    expander, `key:` in monospace, values colored by type
- *    (macOSColors.dataTypes via the gameUIColors macOS theme), expandable rows
- *    reading "object (3 items)", per-row copy button, MAX_ITEMS_PER_LEVEL 500 /
- *    MAX_DEPTH_LIMIT 15 caps and the circular-reference guard.
- *  - Indent guides — shared/src/dataViewer/IndentGuidesOverlay.tsx (same
- *    segment computation, 1px lines at (depth-0.5)*16, primary @ ~30% alpha).
- *  - Type chips — shared/src/dataViewer/TypeLegend.tsx (`getTypeColor` copied
- *    verbatim).
- *  - `CopyButton` / `InlineCopyButton` — shared/src/ui/components/
- *    CopyButton.tsx: idle/success/error states, 1500ms feedback, lazy function
- *    values resolved at press time, object values pretty-printed (2-space,
- *    circular-safe — clipboard/copyToClipboard.ts's safeStringify semantics).
- *
- * Intentional deviations (all logged):
- *  - FlatList virtualization + the chunked/debounced async flatten
- *    ("Processing data…") → a synchronous flatten over plain DOM rows. The
- *    same 500-per-level/15-deep caps bound the work, and web rows are cheap;
- *    the settle-window in `networkSelectionStore` (see `showBodies` on the
- *    detail view) is what keeps stepping fast, exactly as on native.
- *  - Row selection / double-tap inline editing / `DataTreeActionBar` are NOT
- *    ported — that is the response-EDITOR surface (overrides), a later port
- *    feature. Read-only rows toggle expansion on press, as native does when no
- *    `onSelectionChange` is wired.
- *  - `CopyButton`'s Pro upgrade modal + first-copy hint banner are not ported
- *    (license gating isn't part of the web port); `disableCopy` is accepted
- *    for API compatibility and ignored, same as the native explorer.
- *  - `displayValue`'s minimal-SuperJSON serialization → JSON.stringify; for
- *    the JSON payloads this tool renders the output is identical.
- *
- * @platform React DOM Web
- */
-
-import { memo, useEffect, useMemo, useRef, useState } from "react";
-
-// =============================
-// Native palettes (provenance)
-// =============================
-
-/**
- * gameUIColors, macOS theme — shared/src/ui/gameUI/constants/gameUIColors.ts
- * resolves to `macOSGameUIColors` (macOSDesignSystemColors.ts), verbatim
- * subset. `primary`/`primaryLight` are the macOS text primary, NOT white.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const gameUI = {
-  primary: "#F5F5F7",
-  // macOSColors.text.primary
-  primaryLight: "#F5F5F7",
-  secondary: "#A1A1A6",
-  // macOSColors.text.secondary
-  muted: "#8E8E93",
-  success: "#34C759",
-  warning: "#FFEB3B",
-  error: "#FF453A",
-  info: "#00B8E6",
-  critical: "#FF453A",
-  // macOS theme maps critical → semantic.error
-  optional: "#BF5AF2",
-  // macOS theme maps optional → semantic.debug
-  dataTypes: {
-    object: "#00B8E6",
-    array: "#FFEB3B",
-    string: "#34C759",
-    number: "#FF9F0A",
-    boolean: "#BF5AF2",
-    function: "#5E5CE6",
-    undefined: "#8E8E93",
-    null: "#FF453A"
-  }
-};
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
-const macOSColors = {
-  background: {
-    hover: "#1D1D1F",
-    input: "#26262A"
-  },
-  text: {
-    primary: "#F5F5F7",
-    secondary: "#A1A1A6"
-  },
-  semantic: {
-    error: "#FF453A",
-    debug: "#BF5AF2"
-  }
-};
-
-// Stable constants — VirtualizedDataExplorer.tsx, verbatim.
-const ITEM_HEIGHT = 24;
-const MAX_DEPTH_LIMIT = 15;
-const MAX_ITEMS_PER_LEVEL = 500;
-const INDENT_WIDTH = 16;
-/** IndentGuidesOverlay.tsx — ~30% alpha on the primary color. */
-const GUIDE_ALPHA = "4D";
-
-// =============================
-// Inline lucide icons (shared-ui icons are lucide re-exports)
-// =============================
-
-function Svg({
-  size = 14,
-  color = "currentColor",
-  style,
-  children
-}) {
-  return /*#__PURE__*/_jsx("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: color,
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    style: {
-      flexShrink: 0,
-      display: "block",
-      ...style
-    },
-    children: children
-  });
-}
-const ChevronRight = p => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("path", {
-    d: "m9 18 6-6-6-6"
-  })
-});
-const CopyIcon = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("rect", {
-    width: "14",
-    height: "14",
-    x: "8",
-    y: "8",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-  })]
-});
-const CheckCircle2 = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "m9 12 2 2 4-4"
-  })]
-});
-const AlertTriangle = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 9v4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 17h.01"
-  })]
-});
-
-// =============================
-// CopyButton twin (shared/src/ui/components/CopyButton.tsx)
-// =============================
-
-/**
- * Circular-safe pretty printer — clipboard/copyToClipboard.ts semantics
- * (strings pass through; objects pretty-print at 2 spaces; everything else is
- * stringified). safeStringify's cycle guard is a WeakSet replacer here.
- */
-function stringifyForClipboard(value) {
-  if (typeof value === "string") return value;
-  if (typeof value === "object" && value !== null) {
-    const seen = new WeakSet();
-    try {
-      return JSON.stringify(value, (_key, v) => {
-        if (typeof v === "object" && v !== null) {
-          if (seen.has(v)) return "[Circular]";
-          seen.add(v);
-        }
-        if (typeof v === "bigint") return `${v}n`;
-        return v;
-      }, 2);
-    } catch {
-      return String(value);
-    }
-  }
-  return String(value);
-}
-/**
- * Copy button with idle/success/error feedback (1500ms), same icon set and
- * state colors as native. No Pro modal / hint banner — see the deviations log.
- */
-export const CopyButton = /*#__PURE__*/memo(function CopyButton({
-  value,
-  size = 16,
-  buttonStyle,
-  colors = {},
-  "aria-label": ariaLabel
-}) {
-  const [copyState, setCopyState] = useState("idle");
-  const valueRef = useRef(value);
-  valueRef.current = value;
-  const timeoutRef = useRef(null);
-  useEffect(() => () => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-  }, []);
-  const settle = state => {
-    setCopyState(state);
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    // 1500ms — native `feedbackDuration` default.
-    timeoutRef.current = setTimeout(() => {
-      setCopyState("idle");
-      timeoutRef.current = null;
-    }, 1500);
-  };
-  const handlePress = async () => {
-    try {
-      const resolved = typeof valueRef.current === "function" ? valueRef.current() : valueRef.current;
-      await navigator.clipboard.writeText(stringifyForClipboard(resolved));
-      settle("success");
-    } catch {
-      settle("error");
-    }
-  };
-  const color = copyState === "success" ? colors.success || gameUI.success : copyState === "error" ? colors.error || gameUI.error : colors.idle || gameUI.secondary;
-  return /*#__PURE__*/_jsx("button", {
-    type: "button",
-    onClick: copyState === "idle" ? handlePress : undefined,
-    "aria-label": ariaLabel ?? (copyState === "idle" ? "Copy to clipboard" : copyState === "success" ? "Copied to clipboard" : "Failed to copy"),
-    style: {
-      ...copyStyles.button,
-      ...buttonStyle
-    },
-    children: copyState === "success" ? /*#__PURE__*/_jsx(CheckCircle2, {
-      size: size,
-      color: color
-    }) : copyState === "error" ? /*#__PURE__*/_jsx(AlertTriangle, {
-      size: size,
-      color: color
-    }) : /*#__PURE__*/_jsx(CopyIcon, {
-      size: size,
-      color: color
-    })
-  });
-});
-
-/** Preset copy button for inline use (smaller size) — native `InlineCopyButton`. */
-export const InlineCopyButton = /*#__PURE__*/memo(function InlineCopyButton(props) {
-  return /*#__PURE__*/_jsx(CopyButton, {
-    size: 12,
-    ...props
-  });
-});
-const copyStyles = {
-  // Native CopyButton `styles.button`, verbatim.
-  button: {
-    display: "inline-flex",
-    padding: 4,
-    justifyContent: "center",
-    alignItems: "center",
-    background: "none",
-    border: "none",
-    cursor: "pointer",
-    margin: 0
-  }
-};
-
-// =============================
-// Tree flattening (VirtualizedDataExplorer.tsx, verbatim algorithm minus the
-// chunked async yields — see the deviations log)
-// =============================
-
-const getValueType = value => {
-  if (value === null) return "null";
-  if (value === undefined) return "undefined";
-  if (Array.isArray(value)) return "array";
-  if (value instanceof Date) return "date";
-  if (value instanceof Error) return "error";
-  if (value instanceof Map) return "map";
-  if (value instanceof Set) return "set";
-  if (value instanceof RegExp) return "regexp";
-  if (typeof value === "function") return "function";
-  if (typeof value === "symbol") return "symbol";
-  if (typeof value === "bigint") return "bigint";
-  if (typeof value === "object") return "object";
-  return typeof value;
-};
-const getValueCount = (value, valueType) => {
-  if (value === null) return 0;
-  switch (valueType) {
-    case "array":
-      return Array.isArray(value) ? value.length : 0;
-    case "object":
-      return typeof value === "object" ? Object.keys(value).length : 0;
-    case "map":
-      return value instanceof Map ? value.size : 0;
-    case "set":
-      return value instanceof Set ? value.size : 0;
-    default:
-      return 0;
-  }
-};
-
-// Format value for display — VirtualizedDataExplorer `formatValue`, verbatim
-// (default branch: displayValue → JSON.stringify, see deviations).
-const formatValue = (value, valueType) => {
-  if (value === null) return "null";
-  if (value === undefined) return "undefined";
-  switch (valueType) {
-    case "string":
-      return `"${String(value)}"`;
-    case "boolean":
-      return value === true ? "true" : "false";
-    case "function":
-      return typeof value === "function" ? value.toString().slice(0, 50) + "..." : "undefined";
-    case "symbol":
-      return typeof value === "symbol" ? String(value) : "undefined";
-    case "date":
-      return value instanceof Date ? value.toISOString() : "undefined";
-    case "regexp":
-      return value instanceof RegExp ? value.toString() : "undefined";
-    case "bigint":
-      return typeof value === "bigint" ? value.toString() + "n" : "undefined";
-    case "error":
-      return value instanceof Error ? `${value.name}: ${value.message}` : "undefined";
-    default:
-      try {
-        return JSON.stringify(value) ?? String(value);
-      } catch {
-        return String(value);
-      }
-  }
-};
-
-// Type color lookup — VirtualizedDataExplorer TYPE_COLOR_CACHE, verbatim.
-const TYPE_COLOR_CACHE = new Map([["string", gameUI.dataTypes.string], ["number", gameUI.dataTypes.number], ["bigint", gameUI.optional], ["boolean", gameUI.dataTypes.boolean], ["null", gameUI.dataTypes.null], ["undefined", gameUI.dataTypes.undefined], ["function", gameUI.dataTypes.function], ["symbol", gameUI.critical], ["date", gameUI.critical], ["error", gameUI.error], ["array", gameUI.dataTypes.array], ["object", gameUI.dataTypes.object], ["map", gameUI.info], ["set", gameUI.success], ["circular", gameUI.warning]]);
-const getRowTypeColor = valueType => TYPE_COLOR_CACHE.get(valueType) || gameUI.dataTypes.array;
-function flattenData(value, expandedSet, maxDepth, circularCache, key = "root", depth = 0, path = []) {
-  if (depth > Math.min(maxDepth, MAX_DEPTH_LIMIT)) return [];
-  const currentPath = [...path, key];
-  const id = currentPath.join(".");
-  const valueType = getValueType(value);
-  const isExpandable = ["object", "array", "map", "set"].includes(valueType) && value !== null;
-  const childCount = Math.min(isExpandable ? getValueCount(value, valueType) : 0, MAX_ITEMS_PER_LEVEL);
-  if (value && typeof value === "object") {
-    if (circularCache.has(value)) {
-      return [{
-        id,
-        key,
-        value: "[Circular Reference]",
-        valueType: "circular",
-        depth,
-        isExpandable: false,
-        isExpanded: false,
-        childCount: 0
-      }];
-    }
-    circularCache.add(value);
-  }
-  const result = [{
-    id,
-    key,
-    value,
-    valueType,
-    depth,
-    isExpandable,
-    isExpanded: expandedSet.has(id),
-    childCount
-  }];
-  if (isExpandable && expandedSet.has(id) && depth < Math.min(maxDepth, MAX_DEPTH_LIMIT)) {
-    try {
-      let entries = [];
-      switch (valueType) {
-        case "array":
-          entries = value.map((item, index) => [index.toString(), item]);
-          break;
-        case "object":
-          entries = Object.entries(value);
-          break;
-        case "map":
-          entries = Array.from(value.entries()).map(([k, v]) => [String(k), v]);
-          break;
-        case "set":
-          entries = Array.from(value.values()).map((v, index) => [index.toString(), v]);
-          break;
-      }
-      for (const [childKey, childValue] of entries.slice(0, childCount)) {
-        result.push(...flattenData(childValue, expandedSet, maxDepth, circularCache, childKey, depth + 1, currentPath));
-      }
-    } catch {
-      // Skip malformed data (same silent-skip as native).
-    }
-  }
-  return result;
-}
-
-// =============================
-// Indent guides (IndentGuidesOverlay.tsx — same segment computation, drawn
-// over the full list since the web tree isn't virtualized)
-// =============================
-
-function IndentGuides({
-  items
-}) {
-  const columns = useMemo(() => {
-    let maxDepth = 0;
-    for (const item of items) if (item.depth > maxDepth) maxDepth = item.depth;
-    const results = [];
-    for (let depth = 1; depth <= maxDepth; depth++) {
-      // Center of the indent column, snapped for a crisp 1px line.
-      const left = Math.round((depth - 0.5) * INDENT_WIDTH) + 0.5;
-      const segments = [];
-      let segStart = -1;
-      let segEnd = -1;
-      for (let i = 0; i < items.length; i++) {
-        if ((items[i]?.depth ?? 0) >= depth) {
-          if (segStart === -1) segStart = i;
-          segEnd = i;
-        } else if (segStart !== -1) {
-          segments.push({
-            startIndex: segStart,
-            endIndex: segEnd
-          });
-          segStart = -1;
-          segEnd = -1;
-        }
-      }
-      if (segStart !== -1) segments.push({
-        startIndex: segStart,
-        endIndex: segEnd
-      });
-      if (segments.length > 0) results.push({
-        depth,
-        left,
-        segments
-      });
-    }
-    return results;
-  }, [items]);
-  return /*#__PURE__*/_jsx("div", {
-    style: styles.guidesOverlay,
-    "aria-hidden": true,
-    children: columns.map(col => col.segments.map((seg, idx) => /*#__PURE__*/_jsx("div", {
-      style: {
-        ...styles.guideLine,
-        left: col.left,
-        top: seg.startIndex * ITEM_HEIGHT,
-        height: (seg.endIndex - seg.startIndex + 1) * ITEM_HEIGHT,
-        backgroundColor: `${gameUI.primary}${GUIDE_ALPHA}`
-      }
-    }, `${col.depth}-${idx}`)))
-  });
-}
-
-// =============================
-// Tree row (VirtualizedItemComponent, read-only mode)
-// =============================
-
-const TreeRow = /*#__PURE__*/memo(function TreeRow({
-  item,
-  onToggleExpanded
-}) {
-  const [isPressed, setIsPressed] = useState(false);
-  const color = getRowTypeColor(item.valueType);
-  return /*#__PURE__*/_jsxs("div", {
-    style: {
-      ...styles.itemContainer,
-      marginLeft: item.depth * INDENT_WIDTH
-    },
-    children: [/*#__PURE__*/_jsxs("button", {
-      type: "button",
-      style: {
-        ...styles.itemTouchable,
-        ...(isPressed ? styles.itemTouchablePressed : null),
-        cursor: item.isExpandable ? "pointer" : "default"
-      },
-      onClick: item.isExpandable ? () => onToggleExpanded(item.id) : undefined,
-      onPointerDown: () => setIsPressed(true),
-      onPointerUp: () => setIsPressed(false),
-      onPointerLeave: () => setIsPressed(false),
-      disabled: !item.isExpandable,
-      "aria-expanded": item.isExpandable ? item.isExpanded : undefined,
-      children: [/*#__PURE__*/_jsx("span", {
-        style: styles.expanderContainer,
-        children: item.isExpandable ? /*#__PURE__*/_jsx(ChevronRight, {
-          size: 12,
-          color: gameUI.secondary,
-          style: {
-            transform: item.isExpanded ? "rotate(90deg)" : "rotate(0deg)"
-          }
-        }) : null
-      }), /*#__PURE__*/_jsxs("span", {
-        style: styles.labelContainer,
-        children: [/*#__PURE__*/_jsxs("span", {
-          style: styles.labelText,
-          children: [item.key, ":"]
-        }), item.isExpandable ? /*#__PURE__*/_jsxs("span", {
-          style: {
-            ...styles.valueText,
-            color: gameUI.secondary
-          },
-          children: [item.valueType, " (", item.childCount, " ", item.childCount === 1 ? "item" : "items", ")"]
-        }) : /*#__PURE__*/_jsx("span", {
-          style: {
-            ...styles.valueText,
-            color
-          },
-          children: formatValue(item.value, item.valueType)
-        })]
-      })]
-    }), item.value !== undefined ? /*#__PURE__*/_jsx(CopyButton, {
-      value: item.value,
-      size: 14,
-      buttonStyle: {
-        marginLeft: 8,
-        marginRight: 8
-      }
-    }) : null]
-  });
-});
-
-// =============================
-// Raw-mode explorer (VirtualizedDataExplorer rawMode path)
-// =============================
-
-function RawExplorer({
-  data,
-  maxDepth,
-  initialExpanded
-}) {
-  // Initial expansion — `getInitialExpanded`, verbatim: root + first level.
-  const [expandedItems, setExpandedItems] = useState(() => {
-    const initial = new Set(["root"]);
-    if (initialExpanded && data && typeof data === "object") {
-      if (Array.isArray(data)) {
-        data.forEach((_, index) => initial.add(`root.${index}`));
-      } else {
-        Object.keys(data).forEach(key => initial.add(`root.${key}`));
-      }
-    }
-    return initial;
-  });
-  const flatData = useMemo(() => flattenData(data, expandedItems, maxDepth, new WeakSet()), [data, expandedItems, maxDepth]);
-  const toggleExpanded = id => {
-    setExpandedItems(prev => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);else next.add(id);
-      return next;
-    });
-  };
-  const hasData = data !== null && data !== undefined && (typeof data === "string" ? data.length > 0 : typeof data === "number" || typeof data === "boolean" ? true : Array.isArray(data) ? data.length > 0 : typeof data === "object" ? Object.keys(data).length > 0 : false);
-  if (!hasData) {
-    return /*#__PURE__*/_jsx("div", {
-      style: styles.noDataContainer,
-      children: /*#__PURE__*/_jsx("span", {
-        style: styles.noDataText,
-        children: "No data available"
-      })
-    });
-  }
-  return /*#__PURE__*/_jsxs("div", {
-    style: styles.rawRoot,
-    children: [/*#__PURE__*/_jsx(IndentGuides, {
-      items: flatData
-    }), flatData.map(item => /*#__PURE__*/_jsx(TreeRow, {
-      item: item,
-      onToggleExpanded: toggleExpanded
-    }, item.id))]
-  });
-}
-
-// =============================
-// Type legend with filter (dataViewer/TypeLegend.tsx)
-// =============================
-
-/** Type color mapping — dataViewer/TypeLegend.tsx `getTypeColor`, verbatim. */
-const getLegendTypeColor = type => {
-  const colors = {
-    string: gameUI.dataTypes.string,
-    number: gameUI.dataTypes.number,
-    bigint: macOSColors.semantic.debug,
-    boolean: gameUI.dataTypes.boolean,
-    null: gameUI.dataTypes.null,
-    undefined: gameUI.dataTypes.undefined,
-    function: gameUI.dataTypes.function,
-    symbol: macOSColors.semantic.error,
-    date: macOSColors.semantic.error,
-    error: macOSColors.semantic.error,
-    array: gameUI.dataTypes.array,
-    object: gameUI.dataTypes.object
-  };
-  return colors[type] || macOSColors.text.secondary;
-};
-function TypeLegend({
-  types,
-  activeFilter,
-  onFilterChange
-}) {
-  if (types.length === 0) return null;
-  return /*#__PURE__*/_jsx("div", {
-    style: styles.typeLegend,
-    children: types.map(type => {
-      const color = getLegendTypeColor(type);
-      const isActive = activeFilter === type;
-      return /*#__PURE__*/_jsxs("button", {
-        type: "button",
-        style: {
-          ...styles.typeBadge,
-          ...(isActive ? styles.typeBadgeActive : null),
-          border: `1px solid ${isActive ? color : macOSColors.text.primary + "1A"}`
-        },
-        onClick: () => onFilterChange(activeFilter === type ? null : type),
-        "aria-label": `Filter by ${type} values`,
-        children: [/*#__PURE__*/_jsx("span", {
-          style: {
-            ...styles.typeColor,
-            backgroundColor: color
-          }
-        }), /*#__PURE__*/_jsx("span", {
-          style: {
-            ...styles.typeName,
-            ...(isActive ? {
-              color
-            } : null)
-          },
-          children: type
-        })]
-      }, type);
-    })
-  });
-}
-
-// =============================
-// DataViewer (dataViewer/DataViewer.tsx)
-// =============================
-
-const isPlainObject = value => typeof value === "object" && value !== null && !Array.isArray(value);
-export function DataViewer({
-  title: _title,
-  data,
-  maxDepth = 10,
-  rawMode: _rawMode = true,
-  showTypeFilter = true,
-  initialExpanded = false,
-  disableCopy: _disableCopy = false
-}) {
-  const [activeFilter, setActiveFilter] = useState(null);
-
-  // Calculate visible types in the data — DataViewer.tsx, verbatim.
-  const visibleTypes = useMemo(() => {
-    if (!data || !showTypeFilter) return [];
-    const types = [];
-    const processValue = (value, depth = 0) => {
-      if (depth > 3) return;
-      const type = Array.isArray(value) ? "array" : value === null ? "null" : typeof value;
-      types.push(type);
-      if (type === "object" && isPlainObject(value)) {
-        Object.values(value).forEach(v => processValue(v, depth + 1));
-      } else if (Array.isArray(value)) {
-        value.forEach(v => processValue(v, depth + 1));
-      }
-    };
-    processValue(data);
-    return Array.from(new Set(types)).slice(0, 8);
-  }, [data, showTypeFilter]);
-
-  // Filtered projection by type — DataViewer.tsx `flattenByType`, verbatim.
-  const getFilteredData = useMemo(() => {
-    if (!activeFilter || !data) return null;
-    const filteredObject = {};
-    let itemCount = 0;
-    const flattenByType = (obj, targetType, path = "", depth = 0) => {
-      if (depth > 10 || itemCount > 100) return;
-      if (Array.isArray(obj)) {
-        obj.forEach((item, index) => {
-          const currentPath = path ? `${path}[${index}]` : `[${index}]`;
-          const itemType = item === null ? "null" : typeof item;
-          if (itemType === targetType) {
-            filteredObject[currentPath] = item;
-            itemCount++;
-          }
-          if (itemType === "object" && item !== null || Array.isArray(item)) {
-            flattenByType(item, targetType, currentPath, depth + 1);
-          }
-        });
-      } else if (obj && typeof obj === "object") {
-        Object.entries(obj).forEach(([key, value]) => {
-          const currentPath = path ? `${path}.${key}` : key;
-          const valueType = Array.isArray(value) ? "array" : value === null ? "null" : typeof value;
-          if (valueType === targetType) {
-            filteredObject[currentPath] = value;
-            itemCount++;
-          }
-          if (valueType === "object" && value !== null || valueType === "array") {
-            flattenByType(value, targetType, currentPath, depth + 1);
-          }
-        });
-      }
-    };
-    flattenByType(data, activeFilter);
-    return {
-      filteredObject,
-      itemCount
-    };
-  }, [activeFilter, data]);
-  return /*#__PURE__*/_jsxs("div", {
-    children: [showTypeFilter && /*#__PURE__*/_jsx("div", {
-      style: styles.header,
-      children: /*#__PURE__*/_jsx(TypeLegend, {
-        types: visibleTypes,
-        activeFilter: activeFilter,
-        onFilterChange: setActiveFilter
-      })
-    }), activeFilter && getFilteredData ? /*#__PURE__*/_jsx(RawExplorer, {
-      data: getFilteredData.filteredObject,
-      maxDepth: maxDepth,
-      initialExpanded: initialExpanded
-    }) : /*#__PURE__*/_jsx(RawExplorer, {
-      data: data,
-      maxDepth: maxDepth,
-      initialExpanded: initialExpanded
-    })]
-  });
-}
-
-// Values mirror the native StyleSheet blocks 1:1.
-const styles = {
-  header: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
-  },
-  rawRoot: {
-    position: "relative"
-  },
-  guidesOverlay: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    zIndex: 1,
-    pointerEvents: "none"
-  },
-  guideLine: {
-    position: "absolute",
-    width: 1
-  },
-  itemContainer: {
-    minHeight: ITEM_HEIGHT,
-    height: ITEM_HEIGHT,
-    boxSizing: "border-box",
-    backgroundColor: "transparent",
-    position: "relative",
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "flex-start"
-  },
-  itemTouchable: {
-    flex: 1,
-    minWidth: 0,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "flex-start",
-    padding: "2px 16px 2px 0",
-    minHeight: ITEM_HEIGHT,
-    boxSizing: "border-box",
-    background: "none",
-    border: "none",
-    margin: 0,
-    textAlign: "left",
-    font: "inherit"
-  },
-  itemTouchablePressed: {
-    backgroundColor: `${gameUI.primary}0A`
-  },
-  expanderContainer: {
-    width: 16,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: 4,
-    flexShrink: 0
-  },
-  labelContainer: {
-    flex: 1,
-    minWidth: 0,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "flex-start",
-    paddingLeft: 2
-  },
-  labelText: {
-    color: gameUI.primary,
-    fontSize: 12,
-    fontWeight: 500,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    marginRight: 8,
-    flexShrink: 1,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  },
-  valueText: {
-    fontSize: 12,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    flex: 1,
-    minWidth: 0,
-    color: gameUI.primaryLight,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  },
-  noDataContainer: {
-    display: "flex",
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 20
-  },
-  noDataText: {
-    color: gameUI.secondary,
-    fontSize: 12
-  },
-  // dataViewer/TypeLegend.tsx styles, verbatim.
-  typeLegend: {
-    display: "flex",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6,
-    width: "100%",
-    padding: 8,
-    boxSizing: "border-box"
-  },
-  typeBadge: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: macOSColors.background.hover,
-    padding: "4px 8px",
-    borderRadius: 12,
-    cursor: "pointer",
-    margin: 0
-  },
-  typeBadgeActive: {
-    backgroundColor: macOSColors.background.input
-  },
-  typeColor: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    marginRight: 6,
-    display: "inline-block"
-  },
-  typeName: {
-    color: macOSColors.text.secondary,
-    fontSize: 11,
-    fontWeight: 500
-  }
-};
+"use strict";import{memo as M,useEffect as _,useMemo as j,useRef as R,useState as I}from"react";import{jsx as i,jsxs as m}from"react/jsx-runtime";const r={primary:"#F5F5F7",primaryLight:"#F5F5F7",secondary:"#A1A1A6",muted:"#8E8E93",success:"#34C759",warning:"#FFEB3B",error:"#FF453A",info:"#00B8E6",critical:"#FF453A",optional:"#BF5AF2",dataTypes:{object:"#00B8E6",array:"#FFEB3B",string:"#34C759",number:"#FF9F0A",boolean:"#BF5AF2",function:"#5E5CE6",undefined:"#8E8E93",null:"#FF453A"}};const A={background:{hover:"#1D1D1F",input:"#26262A"},text:{primary:"#F5F5F7",secondary:"#A1A1A6"},semantic:{error:"#FF453A",debug:"#BF5AF2"}};const F=24;const B=15;const P=500;const L=16;const z="4D";function k({size:e=14,color:n="currentColor",style:s,children:t}){return i("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:n,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block",...s},children:t})}const W=e=>i(k,{...e,children:i("path",{d:"m9 18 6-6-6-6"})});const H=e=>m(k,{...e,children:[i("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),i("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]});const V=e=>m(k,{...e,children:[i("circle",{cx:"12",cy:"12",r:"10"}),i("path",{d:"m9 12 2 2 4-4"})]});const N=e=>m(k,{...e,children:[i("path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z"}),i("path",{d:"M12 9v4"}),i("path",{d:"M12 17h.01"})]});function G(e){if(typeof e==="string")return e;if(typeof e==="object"&&e!==null){const n=new WeakSet;try{return JSON.stringify(e,(s,t)=>{if(typeof t==="object"&&t!==null){if(n.has(t))return"[Circular]";n.add(t)}if(typeof t==="bigint")return`${t}n`;return t},2)}catch{return String(e)}}return String(e)}export const CopyButton=M(function e({value:n,size:s=16,buttonStyle:t,colors:o={},"aria-label":l}){const[p,d]=I("idle");const a=R(n);a.current=n;const c=R(null);_(()=>()=>{if(c.current)clearTimeout(c.current)},[]);const g=f=>{d(f);if(c.current)clearTimeout(c.current);c.current=setTimeout(()=>{d("idle");c.current=null},1500)};const x=async()=>{try{const f=typeof a.current==="function"?a.current():a.current;await navigator.clipboard.writeText(G(f));g("success")}catch{g("error")}};const b=p==="success"?o.success||r.success:p==="error"?o.error||r.error:o.idle||r.secondary;return i("button",{type:"button",onClick:p==="idle"?x:void 0,"aria-label":l??(p==="idle"?"Copy to clipboard":p==="success"?"Copied to clipboard":"Failed to copy"),style:{...U.button,...t},children:p==="success"?i(V,{size:s,color:b}):p==="error"?i(N,{size:s,color:b}):i(H,{size:s,color:b})})});export const InlineCopyButton=M(function e(n){return i(CopyButton,{size:12,...n})});const U={button:{display:"inline-flex",padding:4,justifyContent:"center",alignItems:"center",background:"none",border:"none",cursor:"pointer",margin:0}};const J=e=>{if(e===null)return"null";if(e===void 0)return"undefined";if(Array.isArray(e))return"array";if(e instanceof Date)return"date";if(e instanceof Error)return"error";if(e instanceof Map)return"map";if(e instanceof Set)return"set";if(e instanceof RegExp)return"regexp";if(typeof e==="function")return"function";if(typeof e==="symbol")return"symbol";if(typeof e==="bigint")return"bigint";if(typeof e==="object")return"object";return typeof e};const X=(e,n)=>{if(e===null)return 0;switch(n){case"array":return Array.isArray(e)?e.length:0;case"object":return typeof e==="object"?Object.keys(e).length:0;case"map":return e instanceof Map?e.size:0;case"set":return e instanceof Set?e.size:0;default:return 0}};const K=(e,n)=>{if(e===null)return"null";if(e===void 0)return"undefined";switch(n){case"string":return`"${String(e)}"`;case"boolean":return e===true?"true":"false";case"function":return typeof e==="function"?e.toString().slice(0,50)+"...":"undefined";case"symbol":return typeof e==="symbol"?String(e):"undefined";case"date":return e instanceof Date?e.toISOString():"undefined";case"regexp":return e instanceof RegExp?e.toString():"undefined";case"bigint":return typeof e==="bigint"?e.toString()+"n":"undefined";case"error":return e instanceof Error?`${e.name}: ${e.message}`:"undefined";default:try{return JSON.stringify(e)??String(e)}catch{return String(e)}}};const Y=new Map([["string",r.dataTypes.string],["number",r.dataTypes.number],["bigint",r.optional],["boolean",r.dataTypes.boolean],["null",r.dataTypes.null],["undefined",r.dataTypes.undefined],["function",r.dataTypes.function],["symbol",r.critical],["date",r.critical],["error",r.error],["array",r.dataTypes.array],["object",r.dataTypes.object],["map",r.info],["set",r.success],["circular",r.warning]]);const Z=e=>Y.get(e)||r.dataTypes.array;function O(e,n,s,t,o="root",l=0,p=[]){if(l>Math.min(s,B))return[];const d=[...p,o];const a=d.join(".");const c=J(e);const g=["object","array","map","set"].includes(c)&&e!==null;const x=Math.min(g?X(e,c):0,P);if(e&&typeof e==="object"){if(t.has(e)){return[{id:a,key:o,value:"[Circular Reference]",valueType:"circular",depth:l,isExpandable:false,isExpanded:false,childCount:0}]}t.add(e)}const b=[{id:a,key:o,value:e,valueType:c,depth:l,isExpandable:g,isExpanded:n.has(a),childCount:x}];if(g&&n.has(a)&&l<Math.min(s,B)){try{let f=[];switch(c){case"array":f=e.map((y,h)=>[h.toString(),y]);break;case"object":f=Object.entries(e);break;case"map":f=Array.from(e.entries()).map(([y,h])=>[String(y),h]);break;case"set":f=Array.from(e.values()).map((y,h)=>[h.toString(),y]);break}for(const[y,h]of f.slice(0,x)){b.push(...O(h,n,s,t,y,l+1,d))}}catch{}}return b}function q({items:e}){const n=j(()=>{let s=0;for(const o of e)if(o.depth>s)s=o.depth;const t=[];for(let o=1;o<=s;o++){const l=Math.round((o-.5)*L)+.5;const p=[];let d=-1;let a=-1;for(let c=0;c<e.length;c++){if((e[c]?.depth??0)>=o){if(d===-1)d=c;a=c}else if(d!==-1){p.push({startIndex:d,endIndex:a});d=-1;a=-1}}if(d!==-1)p.push({startIndex:d,endIndex:a});if(p.length>0)t.push({depth:o,left:l,segments:p})}return t},[e]);return i("div",{style:u.guidesOverlay,"aria-hidden":true,children:n.map(s=>s.segments.map((t,o)=>i("div",{style:{...u.guideLine,left:s.left,top:t.startIndex*F,height:(t.endIndex-t.startIndex+1)*F,backgroundColor:`${r.primary}${z}`}},`${s.depth}-${o}`)))})}const Q=M(function e({item:n,onToggleExpanded:s}){const[t,o]=I(false);const l=Z(n.valueType);return m("div",{style:{...u.itemContainer,marginLeft:n.depth*L},children:[m("button",{type:"button",style:{...u.itemTouchable,...t?u.itemTouchablePressed:null,cursor:n.isExpandable?"pointer":"default"},onClick:n.isExpandable?()=>s(n.id):void 0,onPointerDown:()=>o(true),onPointerUp:()=>o(false),onPointerLeave:()=>o(false),disabled:!n.isExpandable,"aria-expanded":n.isExpandable?n.isExpanded:void 0,children:[i("span",{style:u.expanderContainer,children:n.isExpandable?i(W,{size:12,color:r.secondary,style:{transform:n.isExpanded?"rotate(90deg)":"rotate(0deg)"}}):null}),m("span",{style:u.labelContainer,children:[m("span",{style:u.labelText,children:[n.key,":"]}),n.isExpandable?m("span",{style:{...u.valueText,color:r.secondary},children:[n.valueType," (",n.childCount," ",n.childCount===1?"item":"items",")"]}):i("span",{style:{...u.valueText,color:l},children:K(n.value,n.valueType)})]})]}),n.value!==void 0?i(CopyButton,{value:n.value,size:14,buttonStyle:{marginLeft:8,marginRight:8}}):null]})});function $({data:e,maxDepth:n,initialExpanded:s}){const[t,o]=I(()=>{const a=new Set(["root"]);if(s&&e&&typeof e==="object"){if(Array.isArray(e)){e.forEach((c,g)=>a.add(`root.${g}`))}else{Object.keys(e).forEach(c=>a.add(`root.${c}`))}}return a});const l=j(()=>O(e,t,n,new WeakSet),[e,t,n]);const p=a=>{o(c=>{const g=new Set(c);if(g.has(a))g.delete(a);else g.add(a);return g})};const d=e!==null&&e!==void 0&&(typeof e==="string"?e.length>0:typeof e==="number"||typeof e==="boolean"?true:Array.isArray(e)?e.length>0:typeof e==="object"?Object.keys(e).length>0:false);if(!d){return i("div",{style:u.noDataContainer,children:i("span",{style:u.noDataText,children:"No data available"})})}return m("div",{style:u.rawRoot,children:[i(q,{items:l}),l.map(a=>i(Q,{item:a,onToggleExpanded:p},a.id))]})}const v=e=>{const n={string:r.dataTypes.string,number:r.dataTypes.number,bigint:A.semantic.debug,boolean:r.dataTypes.boolean,null:r.dataTypes.null,undefined:r.dataTypes.undefined,function:r.dataTypes.function,symbol:A.semantic.error,date:A.semantic.error,error:A.semantic.error,array:r.dataTypes.array,object:r.dataTypes.object};return n[e]||A.text.secondary};function ee({types:e,activeFilter:n,onFilterChange:s}){if(e.length===0)return null;return i("div",{style:u.typeLegend,children:e.map(t=>{const o=v(t);const l=n===t;return m("button",{type:"button",style:{...u.typeBadge,...l?u.typeBadgeActive:null,border:`1px solid ${l?o:A.text.primary+"1A"}`},onClick:()=>s(n===t?null:t),"aria-label":`Filter by ${t} values`,children:[i("span",{style:{...u.typeColor,backgroundColor:o}}),i("span",{style:{...u.typeName,...l?{color:o}:null},children:t})]},t)})})}const ne=e=>typeof e==="object"&&e!==null&&!Array.isArray(e);export function DataViewer({title:e,data:n,maxDepth:s=10,rawMode:t=true,showTypeFilter:o=true,initialExpanded:l=false,disableCopy:p=false}){const[d,a]=I(null);const c=j(()=>{if(!n||!o)return[];const x=[];const b=(f,y=0)=>{if(y>3)return;const h=Array.isArray(f)?"array":f===null?"null":typeof f;x.push(h);if(h==="object"&&ne(f)){Object.values(f).forEach(E=>b(E,y+1))}else if(Array.isArray(f)){f.forEach(E=>b(E,y+1))}};b(n);return Array.from(new Set(x)).slice(0,8)},[n,o]);const g=j(()=>{if(!d||!n)return null;const x={};let b=0;const f=(y,h,E="",D=0)=>{if(D>10||b>100)return;if(Array.isArray(y)){y.forEach((C,T)=>{const S=E?`${E}[${T}]`:`[${T}]`;const w=C===null?"null":typeof C;if(w===h){x[S]=C;b++}if(w==="object"&&C!==null||Array.isArray(C)){f(C,h,S,D+1)}})}else if(y&&typeof y==="object"){Object.entries(y).forEach(([C,T])=>{const S=E?`${E}.${C}`:C;const w=Array.isArray(T)?"array":T===null?"null":typeof T;if(w===h){x[S]=T;b++}if(w==="object"&&T!==null||w==="array"){f(T,h,S,D+1)}})}};f(n,d);return{filteredObject:x,itemCount:b}},[d,n]);return m("div",{children:[o&&i("div",{style:u.header,children:i(ee,{types:c,activeFilter:d,onFilterChange:a})}),d&&g?i($,{data:g.filteredObject,maxDepth:s,initialExpanded:l}):i($,{data:n,maxDepth:s,initialExpanded:l})]})}const u={header:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"},rawRoot:{position:"relative"},guidesOverlay:{position:"absolute",left:0,right:0,top:0,bottom:0,zIndex:1,pointerEvents:"none"},guideLine:{position:"absolute",width:1},itemContainer:{minHeight:F,height:F,boxSizing:"border-box",backgroundColor:"transparent",position:"relative",display:"flex",flexDirection:"row",alignItems:"flex-start"},itemTouchable:{flex:1,minWidth:0,display:"flex",flexDirection:"row",alignItems:"flex-start",padding:"2px 16px 2px 0",minHeight:F,boxSizing:"border-box",background:"none",border:"none",margin:0,textAlign:"left",font:"inherit"},itemTouchablePressed:{backgroundColor:`${r.primary}0A`},expanderContainer:{width:16,display:"inline-flex",alignItems:"center",justifyContent:"center",marginTop:4,flexShrink:0},labelContainer:{flex:1,minWidth:0,display:"flex",flexDirection:"row",alignItems:"flex-start",paddingLeft:2},labelText:{color:r.primary,fontSize:12,fontWeight:500,fontFamily:"ui-monospace, Menlo, monospace",marginRight:8,flexShrink:1,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},valueText:{fontSize:12,fontFamily:"ui-monospace, Menlo, monospace",flex:1,minWidth:0,color:r.primaryLight,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},noDataContainer:{display:"flex",flex:1,justifyContent:"center",alignItems:"center",padding:20},noDataText:{color:r.secondary,fontSize:12},typeLegend:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:6,width:"100%",padding:8,boxSizing:"border-box"},typeBadge:{display:"inline-flex",flexDirection:"row",alignItems:"center",backgroundColor:A.background.hover,padding:"4px 8px",borderRadius:12,cursor:"pointer",margin:0},typeBadgeActive:{backgroundColor:A.background.input},typeColor:{width:8,height:8,borderRadius:4,marginRight:6,display:"inline-block"},typeName:{color:A.text.secondary,fontSize:11,fontWeight:500}};