@buoy-gg/network 7.0.40 → 7.0.42

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

@@ -1,879 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CopyButton = void 0;
-exports.DataViewer = DataViewer;
-exports.InlineCopyButton = void 0;
-var _react = require("react");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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
- */
-
-// =============================
-// 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.
- */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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m9 18 6-6-6-6"
-  })
-});
-const CopyIcon = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-    width: "14",
-    height: "14",
-    x: "8",
-    y: "8",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m9 12 2 2 4-4"
-  })]
-});
-const AlertTriangle = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 9v4"
-  }), /*#__PURE__*/(0, _jsxRuntime.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.
- */
-const CopyButton = exports.CopyButton = /*#__PURE__*/(0, _react.memo)(function CopyButton({
-  value,
-  size = 16,
-  buttonStyle,
-  colors = {},
-  "aria-label": ariaLabel
-}) {
-  const [copyState, setCopyState] = (0, _react.useState)("idle");
-  const valueRef = (0, _react.useRef)(value);
-  valueRef.current = value;
-  const timeoutRef = (0, _react.useRef)(null);
-  (0, _react.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(CheckCircle2, {
-      size: size,
-      color: color
-    }) : copyState === "error" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertTriangle, {
-      size: size,
-      color: color
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyIcon, {
-      size: size,
-      color: color
-    })
-  });
-});
-
-/** Preset copy button for inline use (smaller size) — native `InlineCopyButton`. */
-const InlineCopyButton = exports.InlineCopyButton = /*#__PURE__*/(0, _react.memo)(function InlineCopyButton(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.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 = (0, _react.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__*/(0, _jsxRuntime.jsx)("div", {
-    style: styles.guidesOverlay,
-    "aria-hidden": true,
-    children: columns.map(col => col.segments.map((seg, idx) => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _react.memo)(function TreeRow({
-  item,
-  onToggleExpanded
-}) {
-  const [isPressed, setIsPressed] = (0, _react.useState)(false);
-  const color = getRowTypeColor(item.valueType);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      ...styles.itemContainer,
-      marginLeft: item.depth * INDENT_WIDTH
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("span", {
-        style: styles.expanderContainer,
-        children: item.isExpandable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronRight, {
-          size: 12,
-          color: gameUI.secondary,
-          style: {
-            transform: item.isExpanded ? "rotate(90deg)" : "rotate(0deg)"
-          }
-        }) : null
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        style: styles.labelContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          style: styles.labelText,
-          children: [item.key, ":"]
-        }), item.isExpandable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          style: {
-            ...styles.valueText,
-            color: gameUI.secondary
-          },
-          children: [item.valueType, " (", item.childCount, " ", item.childCount === 1 ? "item" : "items", ")"]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: {
-            ...styles.valueText,
-            color
-          },
-          children: formatValue(item.value, item.valueType)
-        })]
-      })]
-    }), item.value !== undefined ? /*#__PURE__*/(0, _jsxRuntime.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] = (0, _react.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 = (0, _react.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__*/(0, _jsxRuntime.jsx)("div", {
-      style: styles.noDataContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: styles.noDataText,
-        children: "No data available"
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: styles.rawRoot,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IndentGuides, {
-      items: flatData
-    }), flatData.map(item => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("div", {
-    style: styles.typeLegend,
-    children: types.map(type => {
-      const color = getLegendTypeColor(type);
-      const isActive = activeFilter === type;
-      return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("span", {
-          style: {
-            ...styles.typeColor,
-            backgroundColor: color
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.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);
-function DataViewer({
-  title: _title,
-  data,
-  maxDepth = 10,
-  rawMode: _rawMode = true,
-  showTypeFilter = true,
-  initialExpanded = false,
-  disableCopy: _disableCopy = false
-}) {
-  const [activeFilter, setActiveFilter] = (0, _react.useState)(null);
-
-  // Calculate visible types in the data — DataViewer.tsx, verbatim.
-  const visibleTypes = (0, _react.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 = (0, _react.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__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [showTypeFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: styles.header,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TypeLegend, {
-        types: visibleTypes,
-        activeFilter: activeFilter,
-        onFilterChange: setActiveFilter
-      })
-    }), activeFilter && getFilteredData ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RawExplorer, {
-      data: getFilteredData.filteredObject,
-      maxDepth: maxDepth,
-      initialExpanded: initialExpanded
-    }) : /*#__PURE__*/(0, _jsxRuntime.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";Object.defineProperty(exports,"__esModule",{value:true});exports.CopyButton=void 0;exports.DataViewer=DataViewer;exports.InlineCopyButton=void 0;var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");const gameUI={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 macOSColors={background:{hover:"#1D1D1F",input:"#26262A"},text:{primary:"#F5F5F7",secondary:"#A1A1A6"},semantic:{error:"#FF453A",debug:"#BF5AF2"}};const ITEM_HEIGHT=24;const MAX_DEPTH_LIMIT=15;const MAX_ITEMS_PER_LEVEL=500;const INDENT_WIDTH=16;const GUIDE_ALPHA="4D";function Svg({size:e=14,color:t="currentColor",style:o,children:n}){return(0,_jsxRuntime.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:t,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block",...o},children:n})}const ChevronRight=e=>(0,_jsxRuntime.jsx)(Svg,{...e,children:(0,_jsxRuntime.jsx)("path",{d:"m9 18 6-6-6-6"})});const CopyIcon=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),(0,_jsxRuntime.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=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,_jsxRuntime.jsx)("path",{d:"m9 12 2 2 4-4"})]});const AlertTriangle=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.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"}),(0,_jsxRuntime.jsx)("path",{d:"M12 9v4"}),(0,_jsxRuntime.jsx)("path",{d:"M12 17h.01"})]});function stringifyForClipboard(e){if(typeof e==="string")return e;if(typeof e==="object"&&e!==null){const t=new WeakSet;try{return JSON.stringify(e,(o,n)=>{if(typeof n==="object"&&n!==null){if(t.has(n))return"[Circular]";t.add(n)}if(typeof n==="bigint")return`${n}n`;return n},2)}catch{return String(e)}}return String(e)}const CopyButton=exports.CopyButton=(0,_react.memo)(function e({value:t,size:o=16,buttonStyle:n,colors:r={},"aria-label":a}){const[d,c]=(0,_react.useState)("idle");const i=(0,_react.useRef)(t);i.current=t;const s=(0,_react.useRef)(null);(0,_react.useEffect)(()=>()=>{if(s.current)clearTimeout(s.current)},[]);const f=l=>{c(l);if(s.current)clearTimeout(s.current);s.current=setTimeout(()=>{c("idle");s.current=null},1500)};const x=async()=>{try{const l=typeof i.current==="function"?i.current():i.current;await navigator.clipboard.writeText(stringifyForClipboard(l));f("success")}catch{f("error")}};const p=d==="success"?r.success||gameUI.success:d==="error"?r.error||gameUI.error:r.idle||gameUI.secondary;return(0,_jsxRuntime.jsx)("button",{type:"button",onClick:d==="idle"?x:void 0,"aria-label":a??(d==="idle"?"Copy to clipboard":d==="success"?"Copied to clipboard":"Failed to copy"),style:{...copyStyles.button,...n},children:d==="success"?(0,_jsxRuntime.jsx)(CheckCircle2,{size:o,color:p}):d==="error"?(0,_jsxRuntime.jsx)(AlertTriangle,{size:o,color:p}):(0,_jsxRuntime.jsx)(CopyIcon,{size:o,color:p})})});const InlineCopyButton=exports.InlineCopyButton=(0,_react.memo)(function e(t){return(0,_jsxRuntime.jsx)(CopyButton,{size:12,...t})});const copyStyles={button:{display:"inline-flex",padding:4,justifyContent:"center",alignItems:"center",background:"none",border:"none",cursor:"pointer",margin:0}};const getValueType=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 getValueCount=(e,t)=>{if(e===null)return 0;switch(t){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 formatValue=(e,t)=>{if(e===null)return"null";if(e===void 0)return"undefined";switch(t){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 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=e=>TYPE_COLOR_CACHE.get(e)||gameUI.dataTypes.array;function flattenData(e,t,o,n,r="root",a=0,d=[]){if(a>Math.min(o,MAX_DEPTH_LIMIT))return[];const c=[...d,r];const i=c.join(".");const s=getValueType(e);const f=["object","array","map","set"].includes(s)&&e!==null;const x=Math.min(f?getValueCount(e,s):0,MAX_ITEMS_PER_LEVEL);if(e&&typeof e==="object"){if(n.has(e)){return[{id:i,key:r,value:"[Circular Reference]",valueType:"circular",depth:a,isExpandable:false,isExpanded:false,childCount:0}]}n.add(e)}const p=[{id:i,key:r,value:e,valueType:s,depth:a,isExpandable:f,isExpanded:t.has(i),childCount:x}];if(f&&t.has(i)&&a<Math.min(o,MAX_DEPTH_LIMIT)){try{let l=[];switch(s){case"array":l=e.map((u,y)=>[y.toString(),u]);break;case"object":l=Object.entries(e);break;case"map":l=Array.from(e.entries()).map(([u,y])=>[String(u),y]);break;case"set":l=Array.from(e.values()).map((u,y)=>[y.toString(),u]);break}for(const[u,y]of l.slice(0,x)){p.push(...flattenData(y,t,o,n,u,a+1,c))}}catch{}}return p}function IndentGuides({items:e}){const t=(0,_react.useMemo)(()=>{let o=0;for(const r of e)if(r.depth>o)o=r.depth;const n=[];for(let r=1;r<=o;r++){const a=Math.round((r-.5)*INDENT_WIDTH)+.5;const d=[];let c=-1;let i=-1;for(let s=0;s<e.length;s++){if((e[s]?.depth??0)>=r){if(c===-1)c=s;i=s}else if(c!==-1){d.push({startIndex:c,endIndex:i});c=-1;i=-1}}if(c!==-1)d.push({startIndex:c,endIndex:i});if(d.length>0)n.push({depth:r,left:a,segments:d})}return n},[e]);return(0,_jsxRuntime.jsx)("div",{style:styles.guidesOverlay,"aria-hidden":true,children:t.map(o=>o.segments.map((n,r)=>(0,_jsxRuntime.jsx)("div",{style:{...styles.guideLine,left:o.left,top:n.startIndex*ITEM_HEIGHT,height:(n.endIndex-n.startIndex+1)*ITEM_HEIGHT,backgroundColor:`${gameUI.primary}${GUIDE_ALPHA}`}},`${o.depth}-${r}`)))})}const TreeRow=(0,_react.memo)(function e({item:t,onToggleExpanded:o}){const[n,r]=(0,_react.useState)(false);const a=getRowTypeColor(t.valueType);return(0,_jsxRuntime.jsxs)("div",{style:{...styles.itemContainer,marginLeft:t.depth*INDENT_WIDTH},children:[(0,_jsxRuntime.jsxs)("button",{type:"button",style:{...styles.itemTouchable,...n?styles.itemTouchablePressed:null,cursor:t.isExpandable?"pointer":"default"},onClick:t.isExpandable?()=>o(t.id):void 0,onPointerDown:()=>r(true),onPointerUp:()=>r(false),onPointerLeave:()=>r(false),disabled:!t.isExpandable,"aria-expanded":t.isExpandable?t.isExpanded:void 0,children:[(0,_jsxRuntime.jsx)("span",{style:styles.expanderContainer,children:t.isExpandable?(0,_jsxRuntime.jsx)(ChevronRight,{size:12,color:gameUI.secondary,style:{transform:t.isExpanded?"rotate(90deg)":"rotate(0deg)"}}):null}),(0,_jsxRuntime.jsxs)("span",{style:styles.labelContainer,children:[(0,_jsxRuntime.jsxs)("span",{style:styles.labelText,children:[t.key,":"]}),t.isExpandable?(0,_jsxRuntime.jsxs)("span",{style:{...styles.valueText,color:gameUI.secondary},children:[t.valueType," (",t.childCount," ",t.childCount===1?"item":"items",")"]}):(0,_jsxRuntime.jsx)("span",{style:{...styles.valueText,color:a},children:formatValue(t.value,t.valueType)})]})]}),t.value!==void 0?(0,_jsxRuntime.jsx)(CopyButton,{value:t.value,size:14,buttonStyle:{marginLeft:8,marginRight:8}}):null]})});function RawExplorer({data:e,maxDepth:t,initialExpanded:o}){const[n,r]=(0,_react.useState)(()=>{const i=new Set(["root"]);if(o&&e&&typeof e==="object"){if(Array.isArray(e)){e.forEach((s,f)=>i.add(`root.${f}`))}else{Object.keys(e).forEach(s=>i.add(`root.${s}`))}}return i});const a=(0,_react.useMemo)(()=>flattenData(e,n,t,new WeakSet),[e,n,t]);const d=i=>{r(s=>{const f=new Set(s);if(f.has(i))f.delete(i);else f.add(i);return f})};const c=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(!c){return(0,_jsxRuntime.jsx)("div",{style:styles.noDataContainer,children:(0,_jsxRuntime.jsx)("span",{style:styles.noDataText,children:"No data available"})})}return(0,_jsxRuntime.jsxs)("div",{style:styles.rawRoot,children:[(0,_jsxRuntime.jsx)(IndentGuides,{items:a}),a.map(i=>(0,_jsxRuntime.jsx)(TreeRow,{item:i,onToggleExpanded:d},i.id))]})}const getLegendTypeColor=e=>{const t={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 t[e]||macOSColors.text.secondary};function TypeLegend({types:e,activeFilter:t,onFilterChange:o}){if(e.length===0)return null;return(0,_jsxRuntime.jsx)("div",{style:styles.typeLegend,children:e.map(n=>{const r=getLegendTypeColor(n);const a=t===n;return(0,_jsxRuntime.jsxs)("button",{type:"button",style:{...styles.typeBadge,...a?styles.typeBadgeActive:null,border:`1px solid ${a?r:macOSColors.text.primary+"1A"}`},onClick:()=>o(t===n?null:n),"aria-label":`Filter by ${n} values`,children:[(0,_jsxRuntime.jsx)("span",{style:{...styles.typeColor,backgroundColor:r}}),(0,_jsxRuntime.jsx)("span",{style:{...styles.typeName,...a?{color:r}:null},children:n})]},n)})})}const isPlainObject=e=>typeof e==="object"&&e!==null&&!Array.isArray(e);function DataViewer({title:e,data:t,maxDepth:o=10,rawMode:n=true,showTypeFilter:r=true,initialExpanded:a=false,disableCopy:d=false}){const[c,i]=(0,_react.useState)(null);const s=(0,_react.useMemo)(()=>{if(!t||!r)return[];const x=[];const p=(l,u=0)=>{if(u>3)return;const y=Array.isArray(l)?"array":l===null?"null":typeof l;x.push(y);if(y==="object"&&isPlainObject(l)){Object.values(l).forEach(h=>p(h,u+1))}else if(Array.isArray(l)){l.forEach(h=>p(h,u+1))}};p(t);return Array.from(new Set(x)).slice(0,8)},[t,r]);const f=(0,_react.useMemo)(()=>{if(!c||!t)return null;const x={};let p=0;const l=(u,y,h="",C=0)=>{if(C>10||p>100)return;if(Array.isArray(u)){u.forEach((g,b)=>{const j=h?`${h}[${b}]`:`[${b}]`;const m=g===null?"null":typeof g;if(m===y){x[j]=g;p++}if(m==="object"&&g!==null||Array.isArray(g)){l(g,y,j,C+1)}})}else if(u&&typeof u==="object"){Object.entries(u).forEach(([g,b])=>{const j=h?`${h}.${g}`:g;const m=Array.isArray(b)?"array":b===null?"null":typeof b;if(m===y){x[j]=b;p++}if(m==="object"&&b!==null||m==="array"){l(b,y,j,C+1)}})}};l(t,c);return{filteredObject:x,itemCount:p}},[c,t]);return(0,_jsxRuntime.jsxs)("div",{children:[r&&(0,_jsxRuntime.jsx)("div",{style:styles.header,children:(0,_jsxRuntime.jsx)(TypeLegend,{types:s,activeFilter:c,onFilterChange:i})}),c&&f?(0,_jsxRuntime.jsx)(RawExplorer,{data:f.filteredObject,maxDepth:o,initialExpanded:a}):(0,_jsxRuntime.jsx)(RawExplorer,{data:t,maxDepth:o,initialExpanded:a})]})}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},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}};