@forgeax/view 0.2.1-beta-20260924075842

package/dist/modules/chunks/chunk-MUOQZPVH.mjs

@@ -0,0 +1,609 @@
+import {
+  getLocale,
+  subscribeLocale,
+  t
+} from "./chunk-XJZEVRYX.mjs";
+import {
+  INSPECTOR_ACTIONS
+} from "./chunk-QBHBKOIL.mjs";
+import {
+  CollapsibleSection,
+  EmptyState,
+  FloatingMenu,
+  IconButton,
+  InspectorFieldControl,
+  Menu,
+  OverlayRootProvider,
+  PanelHeader,
+  PropertyRow,
+  SearchField,
+  Spinner,
+  Text,
+  Toolbar,
+  formatInspectorFieldLabel,
+  normalizeInspectorFieldValue,
+  resolveInspectorFieldKind,
+  useOverlayRoot,
+  useWorkspaceClientConnected
+} from "./chunk-NJH2OJFC.mjs";
+import {
+  createWorkspaceObservation,
+  createWorkspaceStateReader
+} from "./chunk-FJM6WWIY.mjs";
+import {
+  jsonUnchanged
+} from "./chunk-32GD5LL6.mjs";
+
+// packages/view-plugin-inspector/src/ui/mount.tsx
+import { createRoot } from "react-dom/client";
+
+// packages/view-plugin-inspector/src/ui/InspectorPanel.tsx
+import {
+  Box,
+  Camera,
+  Check,
+  CircleUserRound,
+  Copy,
+  Crosshair,
+  Focus,
+  Hexagon,
+  Layers,
+  Lightbulb,
+  Maximize2,
+  Minimize2,
+  MoreHorizontal,
+  MousePointer2,
+  Move3d,
+  SlidersHorizontal
+} from "lucide-react";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore as useSyncExternalStore2
+} from "react";
+import { createPortal } from "react-dom";
+
+// packages/view-plugin-inspector/src/i18n/useTranslation.ts
+import { useCallback, useSyncExternalStore } from "react";
+function useTranslation() {
+  const locale = useSyncExternalStore(subscribeLocale, getLocale, getLocale);
+  const t2 = useCallback(
+    (key, vars) => t(key, vars),
+    [locale]
+  );
+  return { t: t2, locale };
+}
+
+// packages/view-plugin-inspector/src/ui/mockInspector.ts
+var MOCK_INSPECTOR_BY_ID = {
+  ground: {
+    id: "ground",
+    name: "Ground",
+    badge: "Mesh",
+    components: [
+      {
+        name: "Transform",
+        icon: "move3d",
+        category: "all",
+        fields: [
+          { key: "position", label: "Position", kind: "vector3", value: { x: 0, y: 0, z: 0 } },
+          { key: "rotation", label: "Rotation", kind: "vector3", value: { x: 0, y: 0, z: 0 } },
+          { key: "scale", label: "Scale", kind: "vector3", value: { x: 10, y: 0.2, z: 8 } }
+        ]
+      },
+      {
+        name: "MeshFilter",
+        icon: "box",
+        category: "type",
+        fields: [{ key: "mesh", label: "Mesh", kind: "asset", value: "Plane" }]
+      },
+      {
+        name: "MeshRenderer",
+        icon: "layers",
+        category: "capability",
+        fields: [
+          { key: "material", label: "Material 0", kind: "asset", value: "Ground Material" },
+          { key: "castShadows", label: "Cast Shadows", kind: "bool", value: true },
+          { key: "receiveShadows", label: "Receive Shadows", kind: "bool", value: true }
+        ]
+      },
+      {
+        name: "Collider",
+        icon: "hexagon",
+        category: "capability",
+        fields: [
+          { key: "shape", label: "Shape", kind: "enum", value: "Box", options: ["Box", "Sphere", "Capsule", "Mesh"] },
+          { key: "center", label: "Center", kind: "vector3", value: { x: 0, y: 0, z: 0 } },
+          { key: "isTrigger", label: "Is Trigger", kind: "bool", value: false }
+        ]
+      }
+    ]
+  },
+  "red-box": {
+    id: "red-box",
+    name: "RedBox",
+    badge: "Mesh",
+    components: [
+      {
+        name: "Transform",
+        icon: "move3d",
+        category: "all",
+        fields: [
+          {
+            key: "position",
+            label: "Position",
+            kind: "vector3",
+            value: { x: 0, y: 0.5, z: 2.4 }
+          },
+          {
+            key: "rotation",
+            label: "Rotation",
+            kind: "vector3",
+            value: { x: 0, y: 45, z: 0 }
+          },
+          {
+            key: "scale",
+            label: "Scale",
+            kind: "vector3",
+            value: { x: 1, y: 1, z: 1 }
+          }
+        ]
+      },
+      {
+        name: "MeshFilter",
+        icon: "box",
+        category: "type",
+        fields: [{ key: "mesh", label: "Mesh", kind: "asset", value: "Cube" }]
+      },
+      {
+        name: "MeshRenderer",
+        icon: "layers",
+        category: "capability",
+        fields: [
+          { key: "material", label: "Material 0", kind: "asset", value: "Red Material" },
+          { key: "castShadows", label: "Cast Shadows", kind: "bool", value: true }
+        ]
+      }
+    ]
+  },
+  player: {
+    id: "player",
+    name: "Player",
+    badge: "Character",
+    components: [
+      {
+        name: "Transform",
+        icon: "move3d",
+        category: "all",
+        fields: [
+          {
+            key: "position",
+            label: "Position",
+            kind: "vector3",
+            value: { x: -1.2, y: 0, z: 0 }
+          },
+          {
+            key: "rotation",
+            label: "Rotation",
+            kind: "vector3",
+            value: { x: 0, y: 0, z: 0 }
+          },
+          {
+            key: "scale",
+            label: "Scale",
+            kind: "vector3",
+            value: { x: 1, y: 1, z: 1 }
+          }
+        ]
+      },
+      {
+        name: "CharacterController",
+        icon: "user",
+        category: "capability",
+        fields: [
+          { key: "speed", label: "Move Speed", kind: "number", value: 6 },
+          { key: "jumpHeight", label: "Jump Height", kind: "number", value: 1.4 },
+          { key: "enabled", label: "Enabled", kind: "bool", value: true }
+        ]
+      }
+    ]
+  },
+  sun: {
+    id: "sun",
+    name: "Sun",
+    badge: "Light",
+    components: [
+      {
+        name: "Transform",
+        icon: "move3d",
+        category: "all",
+        fields: [
+          { key: "rotation", label: "Rotation", kind: "vector3", value: { x: 50, y: -30, z: 0 } }
+        ]
+      },
+      {
+        name: "Light",
+        icon: "sun",
+        category: "type",
+        fields: [
+          { key: "type", label: "Type", kind: "enum", value: "Directional", options: ["Directional", "Point", "Spot"] },
+          { key: "color", label: "Color", kind: "color", value: "#fff4d6" },
+          { key: "intensity", label: "Intensity", kind: "number", value: 3.2 },
+          { key: "castShadows", label: "Cast Shadows", kind: "bool", value: true }
+        ]
+      }
+    ]
+  }
+};
+
+// packages/view-plugin-inspector/src/inspection.mjs
+function resolveObjectInspectorEntity(primary, { demo = false, mockById = null } = {}) {
+  if (!primary?.entityId) return null;
+  if (demo && mockById?.[primary.entityId]) return mockById[primary.entityId];
+  return null;
+}
+function inspectorEntityFromInspection(inspection) {
+  if (!inspection?.entityId || !Array.isArray(inspection.components)) return null;
+  return {
+    id: inspection.entityId,
+    name: inspection.name ?? (inspection.entity === void 0 ? inspection.entityId : `Entity ${inspection.entity}`),
+    badge: "Entity",
+    components: inspection.components.map((component) => ({
+      name: component.name,
+      icon: "box",
+      category: "all",
+      fields: Object.entries(component.fields ?? {}).map(([key, schema]) => {
+        const rawValue = component.values?.[key];
+        const kind = resolveInspectorFieldKind(schema, rawValue);
+        return {
+          key,
+          label: formatInspectorFieldLabel(key),
+          kind,
+          value: normalizeInspectorFieldValue(rawValue, kind)
+        };
+      })
+    }))
+  };
+}
+
+// packages/view-plugin-inspector/src/ui/InspectorPanel.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function inspectionMatchesSelection(inspection, primary, target) {
+  if (!inspection || !primary?.entityId || !target?.targetId) return false;
+  return inspection.entityId === primary.entityId && inspection.targetId === target.targetId && inspection.generation === target.generation;
+}
+function componentIcon(component, size = 13) {
+  const props = { size, strokeWidth: 1.7 };
+  if (component.name === "Transform") return /* @__PURE__ */ jsx(Move3d, { ...props });
+  if (component.name === "Light") return /* @__PURE__ */ jsx(Lightbulb, { ...props });
+  if (component.name === "Camera") return /* @__PURE__ */ jsx(Camera, { ...props });
+  if (component.name.includes("Renderer")) return /* @__PURE__ */ jsx(Layers, { ...props });
+  if (component.name.includes("Body") || component.name.includes("Collider")) return /* @__PURE__ */ jsx(Hexagon, { ...props });
+  if (component.name.includes("Character")) return /* @__PURE__ */ jsx(CircleUserRound, { ...props });
+  return /* @__PURE__ */ jsx(Box, { ...props });
+}
+function InspectorContextMenu({ state, close }) {
+  const overlayRoot = useOverlayRoot();
+  const { t: t2 } = useTranslation();
+  useEffect(() => {
+    const dismiss = () => close();
+    const escape = (event) => event.key === "Escape" && close();
+    window.addEventListener("pointerdown", dismiss);
+    window.addEventListener("keydown", escape);
+    return () => {
+      window.removeEventListener("pointerdown", dismiss);
+      window.removeEventListener("keydown", escape);
+    };
+  }, [close]);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "insp-context-menu fx-ui",
+        "data-action": INSPECTOR_ACTIONS.showContextMenu,
+        style: {
+          left: Math.max(8, Math.min(state.x, window.innerWidth - 238)),
+          top: Math.max(8, Math.min(state.y, window.innerHeight - 300))
+        },
+        onPointerDown: (event) => event.stopPropagation(),
+        onContextMenu: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ jsx(
+          Menu,
+          {
+            label: t2("inspector.contextMenu"),
+            items: state.items.map((item) => {
+              if (item.kind === "separator") return { type: "separator" };
+              if (item.kind === "title") return { type: "title", label: item.label };
+              return {
+                id: item.id,
+                label: item.label,
+                icon: item.forge ? /* @__PURE__ */ jsx("span", { className: "insp-menu-forge", children: item.icon }) : item.icon,
+                disabled: item.disabled,
+                danger: item.danger,
+                onSelect: () => {
+                  item.action();
+                  close();
+                }
+              };
+            })
+          }
+        )
+      }
+    ),
+    overlayRoot ?? document.body
+  );
+}
+function InspectorBody({ source, focus }) {
+  const { t: t2 } = useTranslation();
+  const name = source.name;
+  const components = useMemo(() => structuredClone(source.components), [source]);
+  const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
+  const [query, setQuery] = useState("");
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsMenuAnchor, setSettingsMenuAnchor] = useState(null);
+  const settingsButtonRef = useRef(null);
+  const [copied, setCopied] = useState(false);
+  const [contextMenu, setContextMenu] = useState(null);
+  const sectionRefs = useRef({});
+  useEffect(() => {
+    if (!settingsOpen) setSettingsMenuAnchor(null);
+  }, [settingsOpen]);
+  const toggleSettingsMenu = () => {
+    if (settingsOpen) {
+      setSettingsOpen(false);
+      return;
+    }
+    const rect = settingsButtonRef.current?.getBoundingClientRect();
+    if (rect) setSettingsMenuAnchor(rect);
+    setSettingsOpen(true);
+  };
+  const showContext = (event, items) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setSettingsOpen(false);
+    setContextMenu({ x: event.clientX, y: event.clientY, items });
+  };
+  const componentMenu = (component) => [
+    { kind: "title", label: component.name },
+    { kind: "item", id: "copy", label: t2("inspector.menu.copyComponentJson"), icon: /* @__PURE__ */ jsx(Copy, { size: 14 }), action: () => void navigator.clipboard?.writeText(JSON.stringify({ [component.name]: component.fields }, null, 2)) }
+  ];
+  const fieldMenu = (component, field) => [
+    { kind: "title", label: `${component.name}.${field.label}` },
+    { kind: "item", id: "copy-value", label: t2("inspector.menu.copyValue"), icon: /* @__PURE__ */ jsx(Copy, { size: 14 }), action: () => void navigator.clipboard?.writeText(JSON.stringify(field.value)) }
+  ];
+  const shownComponents = useMemo(() => {
+    const text = query.trim().toLowerCase();
+    return components.map((component) => ({
+      ...component,
+      fields: component.fields.filter((field) => !text || component.name.toLowerCase().includes(text) || field.label.toLowerCase().includes(text) || field.key.toLowerCase().includes(text))
+    })).filter((component) => !text || component.name.toLowerCase().includes(text) || component.fields.length > 0);
+  }, [components, query]);
+  const headerIcon = source.badge === "Light" ? /* @__PURE__ */ jsx(Lightbulb, { size: 15 }) : source.badge === "Character" ? /* @__PURE__ */ jsx(CircleUserRound, { size: 15 }) : /* @__PURE__ */ jsx(Box, { size: 15 });
+  return /* @__PURE__ */ jsxs("div", { className: "fx-inspector__body", children: [
+    /* @__PURE__ */ jsx(
+      PanelHeader,
+      {
+        className: "insp-header",
+        onContextMenu: (event) => showContext(event, [
+          { kind: "title", label: name },
+          { kind: "item", id: "focus", label: t2("inspector.menu.focusViewport"), icon: /* @__PURE__ */ jsx(Focus, { size: 14 }), action: () => focus?.(), disabled: !focus },
+          { kind: "item", id: "copy", label: t2("inspector.menu.copyObjectJson"), icon: /* @__PURE__ */ jsx(Copy, { size: 14 }), action: () => void navigator.clipboard?.writeText(JSON.stringify({ name, components }, null, 2)) }
+        ]),
+        start: /* @__PURE__ */ jsxs("span", { className: "insp-header-identity", children: [
+          /* @__PURE__ */ jsx("span", { className: "tico", children: headerIcon }),
+          /* @__PURE__ */ jsx("span", { className: "insp-header-copy", children: /* @__PURE__ */ jsx(Text, { as: "span", variant: "label", className: "insp-header-name", title: name, children: name }) })
+        ] }),
+        end: /* @__PURE__ */ jsxs("span", { className: "insp-header-end", children: [
+          source.badge ? /* @__PURE__ */ jsx("span", { className: "badge", title: source.badge, children: source.badge }) : null,
+          /* @__PURE__ */ jsx(IconButton, { "data-action": INSPECTOR_ACTIONS.focus, onClick: focus, disabled: !focus, label: t2("inspector.focusObject"), icon: /* @__PURE__ */ jsx(Crosshair, { size: 15 }), variant: "quiet", size: "compact" }),
+          /* @__PURE__ */ jsx(IconButton, { "data-action": INSPECTOR_ACTIONS.copyEntity, label: t2("inspector.copyJson"), icon: copied ? /* @__PURE__ */ jsx(Check, { size: 15 }) : /* @__PURE__ */ jsx(Copy, { size: 15 }), variant: "quiet", size: "compact", onClick: () => {
+            void navigator.clipboard?.writeText(JSON.stringify({ name, components }, null, 2));
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1e3);
+          } })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Toolbar, { className: "insp-toolbar", children: [
+      /* @__PURE__ */ jsx(SearchField, { "data-testid": "insp-search", "data-action": INSPECTOR_ACTIONS.search, value: query, onChange: (event) => setQuery(event.target.value), onClear: () => setQuery(""), placeholder: t2("inspector.searchPlaceholder"), label: t2("inspector.searchLabel") }),
+      /* @__PURE__ */ jsx(IconButton, { ref: settingsButtonRef, className: settingsOpen ? "is-active" : void 0, "data-testid": "insp-settings", label: t2("inspector.displaySettings"), icon: /* @__PURE__ */ jsx(SlidersHorizontal, { size: 15 }), variant: "secondary", size: "compact", onClick: toggleSettingsMenu })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "insp-scroll", "data-testid": "insp-scroll", children: [
+      /* @__PURE__ */ jsxs("div", { className: "dp-comp", children: [
+        /* @__PURE__ */ jsx("div", { className: "ch", children: /* @__PURE__ */ jsx(Text, { as: "span", variant: "caption", tone: "muted", children: t2("inspector.components") }) }),
+        components.map((component) => /* @__PURE__ */ jsxs("div", { role: "button", tabIndex: 0, className: "comp-row", "data-testid": `insp-comprow-${component.name}`, onClick: () => {
+          setCollapsed((current) => {
+            const next = new Set(current);
+            next.delete(component.name);
+            return next;
+          });
+          sectionRefs.current[component.name]?.scrollIntoView({ behavior: "smooth", block: "start" });
+        }, onContextMenu: (event) => showContext(event, componentMenu(component)), children: [
+          /* @__PURE__ */ jsx("span", { className: "ci", children: componentIcon(component) }),
+          /* @__PURE__ */ jsx("span", { className: "comp-name", children: component.name })
+        ] }, component.name))
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "dp-body", children: shownComponents.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { className: "no-match", title: t2("inspector.noMatchTitle"), description: t2("inspector.noMatchDescription") }) : shownComponents.map((component) => {
+        const isCollapsed = collapsed.has(component.name) && !query;
+        const category = component.category === "all" ? "dim-all" : component.category === "capability" ? "dim-cap" : "dim-type";
+        return /* @__PURE__ */ jsx("div", { className: `cat ${category}`, ref: (element) => {
+          sectionRefs.current[component.name] = element;
+        }, onContextMenu: (event) => showContext(event, componentMenu(component)), children: /* @__PURE__ */ jsx(
+          CollapsibleSection,
+          {
+            open: !isCollapsed,
+            onOpenChange: (open) => setCollapsed((current) => {
+              const next = new Set(current);
+              if (open) next.delete(component.name);
+              else next.add(component.name);
+              return next;
+            }),
+            triggerProps: { "data-action": INSPECTOR_ACTIONS.toggleComponent },
+            title: /* @__PURE__ */ jsxs("span", { className: "cat-title", children: [
+              /* @__PURE__ */ jsx("span", { className: "cat-icon", children: componentIcon(component) }),
+              /* @__PURE__ */ jsx("span", { children: component.name })
+            ] }),
+            trailing: /* @__PURE__ */ jsxs("span", { className: "cacts", children: [
+              /* @__PURE__ */ jsx(IconButton, { className: "cact", "data-action": INSPECTOR_ACTIONS.copyComponent, label: t2("inspector.menu.copyComponentJson"), icon: /* @__PURE__ */ jsx(Copy, { size: 13 }), variant: "quiet", size: "compact", onClick: (event) => {
+                event.stopPropagation();
+                void navigator.clipboard?.writeText(JSON.stringify(component, null, 2));
+              } }),
+              /* @__PURE__ */ jsx(IconButton, { className: "cact more", label: t2("inspector.more"), icon: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14 }), variant: "quiet", size: "compact", onClick: (event) => showContext(event, componentMenu(component)) })
+            ] }),
+            children: /* @__PURE__ */ jsx("div", { className: "cat-fields", children: component.fields.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { className: "no-match", title: t2("inspector.noMatchTitle"), description: t2("inspector.noMatchComponent") }) : component.fields.map((field) => /* @__PURE__ */ jsx("div", { className: "f-row-wrap", "data-testid": `insp-field-${component.name}-${field.key}`, onContextMenu: (event) => {
+              event.stopPropagation();
+              showContext(event, fieldMenu(component, field));
+            }, children: /* @__PURE__ */ jsx(PropertyRow, { className: "f-row", label: /* @__PURE__ */ jsx("span", { title: field.key, children: field.label }), children: /* @__PURE__ */ jsx(InspectorFieldControl, { field }) }) }, field.key)) })
+          }
+        ) }, component.name);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      FloatingMenu,
+      {
+        open: Boolean(settingsMenuAnchor && settingsOpen),
+        anchorRect: settingsMenuAnchor,
+        onClose: () => setSettingsOpen(false),
+        ignorePointerWithin: [settingsButtonRef],
+        containerProps: { onPointerDown: (event) => event.stopPropagation() },
+        children: /* @__PURE__ */ jsx("div", { className: "fx-insp-menu", children: /* @__PURE__ */ jsx(Menu, { label: t2("inspector.displaySettings"), items: [
+          { type: "title", label: t2("inspector.displaySettings") },
+          { id: "expand", label: t2("inspector.expandAll"), buttonProps: { "data-action": INSPECTOR_ACTIONS.expandAll }, icon: /* @__PURE__ */ jsx(Maximize2, { size: 14 }), onSelect: () => {
+            setCollapsed(/* @__PURE__ */ new Set());
+            setSettingsOpen(false);
+          } },
+          { id: "collapse", label: t2("inspector.collapseAll"), buttonProps: { "data-action": INSPECTOR_ACTIONS.collapseAll }, icon: /* @__PURE__ */ jsx(Minimize2, { size: 14 }), onSelect: () => {
+            setCollapsed(new Set(components.map((component) => component.name)));
+            setSettingsOpen(false);
+          } }
+        ] }) })
+      }
+    ),
+    contextMenu ? /* @__PURE__ */ jsx(InspectorContextMenu, { state: contextMenu, close: () => setContextMenu(null) }) : null
+  ] });
+}
+function InspectorPanel(props) {
+  const { t: t2 } = useTranslation();
+  const reader = useMemo(() => createWorkspaceStateReader(props.client), [props.client]);
+  const workspace = useSyncExternalStore2(
+    reader.subscribe,
+    () => reader.getSnapshot(),
+    () => reader.getSnapshot()
+  );
+  const primary = workspace?.sceneSelection?.primary ?? null;
+  const target = workspace?.preview?.target;
+  const connected = useWorkspaceClientConnected(props.demo ? void 0 : props.client);
+  const [inspection, setInspection] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [failure, setFailure] = useState(null);
+  const lastDisplaySourceRef = useRef(null);
+  const selectionKey = primary?.entityId && target?.targetId ? `${primary.entityId}:${target.targetId}:${target.generation ?? ""}` : null;
+  useEffect(() => {
+    if (!primary?.entityId) lastDisplaySourceRef.current = null;
+  }, [primary?.entityId]);
+  useEffect(() => {
+    if (props.demo || !props.client || !connected || !primary?.entityId || !target?.targetId) {
+      setLoading(false);
+      return;
+    }
+    const observation = createWorkspaceObservation(reader, (current) => current?.sceneSelection?.primary?.entityId === primary.entityId && current?.preview?.target?.targetId === target.targetId && current?.preview?.target?.generation === target.generation);
+    const { signal } = observation;
+    let timer;
+    setLoading(true);
+    setFailure(null);
+    const refresh = async () => {
+      if (signal.aborted) return;
+      try {
+        const result = await props.client.call("entity.inspect", { entityId: primary.entityId, targetId: target.targetId, targetGeneration: target.generation }, { signal });
+        if (signal.aborted) return;
+        const source = inspectorEntityFromInspection(result);
+        setInspection((current) => {
+          const next = { entityId: primary.entityId, targetId: target.targetId, generation: target.generation, source };
+          if (current && current.entityId === next.entityId && current.targetId === next.targetId && current.generation === next.generation && jsonUnchanged(current.source, next.source)) return current;
+          return next;
+        });
+        setFailure(null);
+        setLoading(false);
+      } catch (error) {
+        if (signal.aborted) return;
+        setInspection((current) => {
+          if (current == null) return current;
+          return null;
+        });
+        setFailure(String(error));
+        setLoading(false);
+      }
+      if (!signal.aborted) timer = setTimeout(refresh, 500);
+    };
+    void refresh();
+    return () => {
+      observation.dispose();
+      clearTimeout(timer);
+    };
+  }, [props.client, props.demo, connected, selectionKey, reader, workspace]);
+  const inSync = inspectionMatchesSelection(inspection, primary, target);
+  const syncedSource = inSync ? inspection?.source ?? null : null;
+  useEffect(() => {
+    if (syncedSource) lastDisplaySourceRef.current = syncedSource;
+  }, [syncedSource]);
+  const demoSource = resolveObjectInspectorEntity(primary, { demo: true, mockById: MOCK_INSPECTOR_BY_ID });
+  const hasSelection = Boolean(primary?.entityId);
+  const displaySource = props.demo ? demoSource : syncedSource ?? (hasSelection ? lastDisplaySourceRef.current : null);
+  const focus = props.client && target && primary?.entityId ? () => {
+    void props.client.call("entity.focus", { entityId: primary.entityId, targetId: target.targetId, targetGeneration: target.generation }).catch((error) => setFailure(String(error)));
+  } : void 0;
+  const showEmpty = props.demo ? !demoSource : !hasSelection || !displaySource && !loading;
+  const showLoadingPane = !props.demo && hasSelection && !displaySource && loading;
+  const showStaleOverlay = !props.demo && hasSelection && !inSync && loading && Boolean(displaySource);
+  const entityIdAttr = inSync ? syncedSource?.id : primary?.entityId ?? displaySource?.id;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fx-inspector fx-ui",
+      "data-testid": "panel-inspector",
+      "data-view-readonly": "true",
+      "data-entity-id": entityIdAttr,
+      "data-inspector-loading": showStaleOverlay || showLoadingPane ? "true" : void 0,
+      children: showEmpty ? /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          className: "dp-empty",
+          "data-testid": "insp-empty",
+          title: t2("inspector.emptyTitle"),
+          description: failure ?? t2("inspector.emptyDescription"),
+          icon: /* @__PURE__ */ jsx(MousePointer2, {})
+        }
+      ) : showLoadingPane ? /* @__PURE__ */ jsx("div", { className: "fx-inspector__loading-pane", "data-testid": "insp-loading", children: /* @__PURE__ */ jsx(Spinner, { label: t2("inspector.loading") }) }) : displaySource ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(InspectorBody, { source: displaySource, focus }, displaySource.id),
+        showStaleOverlay ? /* @__PURE__ */ jsx("div", { className: "fx-inspector__loading-veil", "aria-hidden": true, children: /* @__PURE__ */ jsx(Spinner, { label: t2("inspector.loading") }) }) : null
+      ] }) : null
+    }
+  );
+}
+
+// packages/view-plugin-inspector/src/ui/inspector.css
+var css = "/* packages/view-plugin-inspector/src/ui/inspector.css */\n.fx-inspector {\n  --insp-bg: var(--fx-color-surface-canvas);\n  --insp-raised: var(--fx-color-surface-raised);\n  --insp-line: var(--fx-color-border-subtle);\n  --insp-muted: var(--fx-color-text-muted);\n  --insp-text: var(--fx-color-text-primary);\n  --insp-accent: var(--fx-color-brand-accent);\n  --d-type: var(--insp-accent);\n  --d-all: var(--fx-color-status-success-fg);\n  --d-cap: var(--fx-color-status-warning-fg);\n  display: flex;\n  position: relative;\n  flex: 1 1 0%;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  background: var(--insp-bg);\n  color: var(--insp-text);\n  font: var(--fx-type-compact-font-weight) var(--fx-type-compact-font-size)/var(--fx-type-compact-line-height) var(--fx-type-compact-font-family);\n}\n.fx-inspector * {\n  box-sizing: border-box;\n}\n.fx-inspector button,\n.fx-inspector input {\n  font: inherit;\n}\n.fx-inspector .dp-name {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-space-control);\n  min-height: var(--fx-component-panel-header-height);\n  padding: 0 var(--fx-ref-space-12);\n  border-bottom: var(--fx-border-width) solid var(--insp-line);\n}\n.fx-inspector .tico {\n  display: grid;\n  place-items: center;\n  width: var(--fx-component-control-height-compact);\n  height: var(--fx-component-control-height-compact);\n  flex: 0 0 auto;\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\n  border-radius: var(--fx-radius-control);\n  background: var(--insp-raised);\n  color: var(--fx-color-text-secondary);\n}\n.fx-inspector .ninput {\n  flex: 1;\n  min-width: 0;\n  height: var(--fx-component-control-height-compact);\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-8);\n  border: var(--fx-border-width) solid var(--insp-line);\n  border-radius: var(--fx-radius-control);\n  outline: 0;\n  background: var(--fx-color-surface-inset);\n  color: var(--insp-text);\n  font: var(--fx-type-compact-font-weight) var(--fx-type-compact-font-size) / var(--fx-type-compact-line-height) var(--fx-type-compact-font-family);\n  font-weight: var(--fx-ref-font-weight-600);\n}\n.fx-inspector .badge,\n.fx-inspector .idbadge {\n  flex: 0 0 auto;\n  color: var(--insp-muted);\n}\n.fx-inspector .badge {\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-6);\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\n  border-radius: var(--fx-radius-pill);\n}\n.fx-inspector .tico2 {\n  display: grid;\n  place-items: center;\n  padding: var(--fx-ref-space-4);\n  border: 0;\n  background: transparent;\n  color: var(--insp-muted);\n  cursor: pointer;\n}\n.fx-inspector .tico2:hover {\n  color: var(--insp-text);\n}\n.fx-inspector .dp-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-6);\n  padding: var(--fx-ref-space-8) var(--fx-ref-space-12);\n  border-bottom: var(--fx-border-width) solid var(--insp-line);\n}\n.fx-inspector .dp-search {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  height: var(--fx-component-control-height-compact);\n  padding: 0 var(--fx-ref-space-12);\n  gap: var(--fx-ref-space-6);\n  border: var(--fx-border-width) solid var(--insp-line);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-inset);\n  color: var(--insp-muted);\n}\n.fx-inspector .dp-search:focus-within {\n  border-color: var(--fx-color-border-focus);\n}\n.fx-inspector .dp-search input {\n  flex: 1;\n  min-width: 0;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  color: var(--insp-text);\n}\n.fx-inspector .t-btn {\n  display: grid;\n  place-items: center;\n  width: var(--fx-component-control-height-compact);\n  height: var(--fx-component-control-height-compact);\n  padding: 0;\n  border: var(--fx-border-width) solid var(--insp-line);\n  border-radius: var(--fx-radius-control);\n  background: var(--insp-raised);\n  color: var(--insp-muted);\n  cursor: pointer;\n}\n.fx-inspector .dp-comp {\n  position: relative;\n  flex: 0 0 auto;\n  padding: var(--fx-ref-space-8) var(--fx-ref-space-12);\n  border-bottom: var(--fx-border-width) solid var(--insp-line);\n}\n.fx-inspector .dp-comp .ch {\n  display: flex;\n  align-items: center;\n  margin-bottom: var(--fx-ref-space-6);\n}\n.fx-inspector .dp-comp .lbl {\n  color: var(--insp-muted);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-code-font-family);\n  letter-spacing: var(--fx-type-caption-letter-spacing);\n  text-transform: uppercase;\n}\n.fx-inspector .dp-comp .add {\n  display: inline-flex;\n  align-items: center;\n  margin-left: auto;\n  gap: var(--fx-ref-space-2);\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-8);\n  border: var(--fx-border-width) solid var(--fx-color-brand-accent);\n  border-radius: var(--fx-ref-radius-4);\n  background: var(--fx-color-brand-soft);\n  color: var(--insp-accent);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\n  cursor: pointer;\n}\n.fx-inspector .comp-row {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: var(--fx-component-editor-row-height);\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-8);\n  gap: var(--fx-ref-space-6);\n  border: 0;\n  border-radius: var(--fx-ref-radius-4);\n  background: transparent;\n  color: var(--fx-color-text-secondary);\n}\n.fx-inspector .comp-row:hover {\n  background: var(--fx-color-surface-hover);\n}\n.fx-inspector .comp-row .ci {\n  display: grid;\n  color: var(--insp-muted);\n}\n.fx-inspector .comp-name {\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector .comp-del {\n  padding: var(--fx-border-width);\n  border: 0;\n  background: transparent;\n  color: var(--insp-muted);\n  opacity: 0;\n}\n.fx-inspector .comp-row:hover .comp-del {\n  opacity: 1;\n}\n.fx-inspector .insp-scroll {\n  display: flex;\n  flex: 1 1 0%;\n  flex-direction: column;\n  min-height: 0;\n  min-width: 0;\n  overflow: auto;\n}\n.fx-inspector .dp-body {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.fx-inspector .cat {\n  border-bottom: var(--fx-border-width) solid var(--insp-line);\n}\n.fx-inspector .cat-head {\n  display: flex;\n  align-items: center;\n  min-height: var(--fx-component-field-height-default);\n  padding: var(--fx-ref-space-8) var(--fx-ref-space-12);\n  gap: var(--fx-ref-space-8);\n  border-left: calc(var(--fx-border-width) * 3) solid transparent;\n  background: var(--fx-color-surface-sidebar);\n  cursor: pointer;\n}\n.fx-inspector .cat.dim-type .cat-head {\n  border-left-color: var(--d-type);\n}\n.fx-inspector .cat.dim-all .cat-head {\n  border-left-color: var(--d-all);\n}\n.fx-inspector .cat.dim-cap .cat-head {\n  border-left-color: var(--d-cap);\n}\n.fx-inspector .cat-head:hover {\n  background: var(--fx-color-surface-hover);\n}\n.fx-inspector .cat-head .car {\n  display: grid;\n  color: var(--insp-muted);\n}\n.fx-inspector .cat-head .cat-icon {\n  display: grid;\n  place-items: center;\n  color: var(--insp-muted);\n}\n.fx-inspector .cat-head .ct {\n  color: var(--fx-color-text-primary);\n  font-size: var(--fx-type-compact-font-size);\n  font-weight: var(--fx-ref-font-weight-600);\n}\n.fx-inspector .cat-head .advb {\n  margin-left: var(--fx-ref-space-2);\n  padding: 0 var(--fx-ref-space-6);\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\n  border-radius: var(--fx-radius-pill);\n  color: var(--insp-muted);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-code-font-family);\n}\n.fx-inspector .cat-head .cacts {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--fx-ref-space-4);\n  margin-left: auto;\n}\n.fx-inspector .cat-head .cact {\n  display: grid;\n  place-items: center;\n  padding: var(--fx-ref-space-2);\n  border: 0;\n  border-radius: var(--fx-ref-radius-4);\n  background: transparent;\n  color: var(--insp-muted);\n  opacity: 0;\n  cursor: pointer;\n}\n.fx-inspector .cat-head:hover .cact {\n  opacity: .7;\n}\n.fx-inspector .cat-head .cact:hover {\n  opacity: 1;\n  color: var(--insp-text);\n  background: var(--fx-color-surface-hover);\n}\n.fx-inspector .cat.collapsed .cat-fields {\n  display: none;\n}\n.fx-inspector .cat-fields {\n  padding: var(--fx-ref-space-4) 0 var(--fx-ref-space-6);\n}\n.fx-inspector .f-row {\n  display: flex;\n  align-items: center;\n  min-height: var(--fx-component-editor-row-height);\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-12) var(--fx-ref-space-4) var(--fx-ref-space-8);\n  gap: var(--fx-ref-space-8);\n}\n.fx-inspector .f-row:hover {\n  background: var(--fx-color-surface-hover);\n}\n.fx-inspector .f-name {\n  flex: 0 1 38%;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--fx-color-text-secondary);\n  font-size: var(--fx-type-caption-font-size);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fx-inspector .f-val {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector .box-i {\n  min-width: 0;\n  height: var(--fx-component-control-icon-hit-area-min);\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-6);\n  border: var(--fx-border-width) solid var(--insp-line);\n  border-radius: var(--fx-radius-control);\n  outline: 0;\n  background: var(--fx-color-surface-inset);\n  color: var(--fx-color-text-secondary);\n  font: var(--fx-type-code-font-weight) var(--fx-type-code-font-size) / var(--fx-type-code-line-height) var(--fx-type-code-font-family);\n}\n.fx-inspector .box-i:focus {\n  border-color: var(--fx-color-border-focus);\n}\n.fx-inspector .box-i.txt {\n  flex: 1;\n}\n.fx-inspector .vec {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  gap: var(--fx-ref-space-4);\n}\n.fx-inspector .vec4 {\n  gap: var(--fx-ref-space-2);\n}\n.fx-inspector .vec4 .vcell {\n  min-width: 0;\n}\n.fx-inspector .vcell {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector .axis-label {\n  position: absolute;\n  z-index: var(--fx-layer-sticky);\n  top: var(--fx-ref-space-6);\n  left: var(--fx-ref-space-6);\n  color: var(--insp-muted);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-code-font-family);\n  pointer-events: none;\n}\n.fx-inspector .vcell .numfield {\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector .vcell .box-i {\n  width: 100%;\n  padding-left: var(--fx-component-choice-size);\n  text-align: center;\n}\n.fx-inspector .vcell.x .box-i {\n  border-bottom: var(--fx-border-focus-width) solid var(--fx-color-status-error-fg);\n}\n.fx-inspector .vcell.y .box-i {\n  border-bottom: var(--fx-border-focus-width) solid var(--fx-color-status-success-fg);\n}\n.fx-inspector .vcell.z .box-i {\n  border-bottom: var(--fx-border-focus-width) solid var(--fx-color-status-info-fg);\n}\n.fx-inspector .numfield {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector .numfield.num {\n  flex: 0 0 calc(var(--fx-ref-space-48) + var(--fx-ref-space-32) + var(--fx-ref-space-8));\n}\n.fx-inspector .scrubbable:not(:focus) {\n  cursor: ew-resize;\n}\n.fx-inspector .nspin {\n  position: absolute;\n  top: var(--fx-border-width);\n  right: var(--fx-border-width);\n  bottom: var(--fx-border-width);\n  display: none;\n  width: var(--fx-ref-space-12);\n  flex-direction: column;\n  background: var(--fx-color-surface-inset);\n  border-radius: 0 var(--fx-ref-radius-4) var(--fx-ref-radius-4) 0;\n}\n.fx-inspector .numfield:hover .nspin,\n.fx-inspector .numfield:focus-within .nspin {\n  display: flex;\n}\n.fx-inspector .nspin button {\n  display: grid;\n  place-items: center;\n  flex: 1;\n  min-height: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--insp-muted);\n}\n.fx-inspector .nspin button:hover {\n  color: var(--insp-text);\n}\n.fx-inspector .insp-checkbox,\n.fx-inspector .menu-checkbox {\n  display: grid;\n  place-items: center;\n  width: var(--fx-component-choice-size);\n  height: var(--fx-component-choice-size);\n  flex: 0 0 var(--fx-component-choice-size);\n  padding: 0;\n  border: var(--fx-border-width) solid var(--fx-color-border-essential);\n  border-radius: var(--fx-ref-radius-4);\n  background: transparent;\n  color: var(--fx-color-brand-on-accent);\n}\n.fx-inspector .insp-checkbox[aria-checked=true],\n.fx-inspector button[data-active=true] .menu-checkbox {\n  border-color: var(--insp-accent);\n  background: var(--insp-accent);\n}\n.fx-inspector .ddc {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector .fx-insp-select {\n  flex: 1;\n  width: 100%;\n  height: var(--fx-component-control-icon-hit-area-min);\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-6);\n}\n.fx-inspector .color-control {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  gap: var(--fx-ref-space-6);\n}\n.fx-inspector .swatch {\n  width: var(--fx-component-control-height-compact);\n  height: calc(var(--fx-ref-space-16) + var(--fx-ref-space-4));\n  flex: 0 0 var(--fx-component-control-height-compact);\n  padding: 0;\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\n  border-radius: var(--fx-ref-radius-4);\n  background: transparent;\n}\n.fx-inspector .hex-input {\n  flex: 1;\n  min-width: calc(var(--fx-ref-space-48) + var(--fx-ref-space-32));\n}\n.fx-inspector .asset-ref {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  min-width: 0;\n  gap: var(--fx-ref-space-4);\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-4);\n  border: var(--fx-border-width) solid var(--insp-line);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-inset);\n}\n.fx-inspector .asset-ref-thumb {\n  display: grid;\n  place-items: center;\n  width: var(--fx-component-control-height-compact);\n  height: var(--fx-component-control-height-compact);\n  flex: 0 0 var(--fx-component-control-height-compact);\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\n  border-radius: var(--fx-ref-radius-4);\n  background: var(--insp-raised);\n  color: var(--insp-muted);\n}\n.fx-inspector .asset-ref-thumb.empty {\n  border-style: dashed;\n}\n.fx-inspector .asset-ref-body {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector .asset-ref-combo {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--fx-component-control-height-compact);\n  gap: var(--fx-ref-space-4);\n  padding: 0 var(--fx-ref-space-6);\n  border: var(--fx-border-width) solid var(--insp-line);\n  border-radius: var(--fx-ref-radius-4);\n  background: var(--insp-bg);\n  color: var(--insp-text);\n}\n.fx-inspector .asset-ref-combo-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fx-inspector .asset-ref-combo-label.empty {\n  color: var(--insp-muted);\n}\n.fx-inspector .asset-ref-actions {\n  display: flex;\n  align-items: center;\n}\n.fx-inspector .asset-ref-act {\n  display: grid;\n  place-items: center;\n  width: var(--fx-component-control-height-compact);\n  height: var(--fx-component-control-height-compact);\n  padding: 0;\n  border: 0;\n  border-radius: var(--fx-ref-radius-4);\n  background: transparent;\n  color: var(--insp-muted);\n}\n.fx-inspector .asset-ref-act:hover:not(:disabled) {\n  background: var(--fx-color-surface-hover);\n  color: var(--insp-text);\n}\n.fx-inspector .asset-ref-act:disabled {\n  opacity: .3;\n}\n.fx-inspector .dp-empty {\n  flex: 1 1 0%;\n  min-height: 0;\n  padding: var(--fx-ref-space-24) var(--fx-ref-space-16);\n  color: var(--insp-muted);\n  text-align: center;\n}\n.fx-inspector__loading-pane {\n  display: flex;\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n}\n.fx-inspector__body {\n  display: flex;\n  flex: 1 1 0%;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n}\n.fx-inspector[data-inspector-loading=true] .fx-inspector__body {\n  pointer-events: none;\n  opacity: 0.55;\n}\n.fx-inspector__loading-veil {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--insp-bg) 35%, transparent);\n  pointer-events: none;\n}\n.fx-inspector .fx-insp-menu {\n  display: flex;\n  flex-direction: column;\n  min-width: var(--fx-component-menu-min-width);\n  padding: var(--fx-ref-space-6);\n  border: var(--fx-border-width) solid var(--fx-color-border-essential);\n  border-radius: var(--fx-radius-popover);\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-secondary);\n  box-shadow: var(--fx-shadow-floating);\n}\n.fx-inspector .fx-insp-menu strong {\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-8) var(--fx-ref-space-6);\n  color: var(--fx-color-text-muted);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-code-font-family);\n  text-transform: uppercase;\n}\n.fx-inspector .fx-insp-menu button {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-8);\n  min-height: var(--fx-component-control-height-compact);\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8);\n  border: 0;\n  border-radius: var(--fx-radius-control);\n  background: transparent;\n  color: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n.fx-inspector .fx-insp-menu button:hover:not(:disabled) {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.fx-inspector .fx-insp-menu button:disabled {\n  opacity: .4;\n}\n.fx-inspector .fx-insp-menu button span {\n  width: var(--fx-component-control-icon-size);\n  display: grid;\n  place-items: center;\n}\n.fx-inspector .fx-insp-menu i {\n  height: var(--fx-border-width);\n  margin: var(--fx-ref-space-4) var(--fx-ref-space-6);\n  background: var(--fx-color-border-subtle);\n}\n.fx-inspector .search-clear {\n  display: grid;\n  place-items: center;\n  width: var(--fx-component-control-icon-size);\n  height: var(--fx-component-control-icon-size);\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--insp-muted);\n}\n.fx-inspector .insp-add-menu {\n  position: absolute;\n  z-index: var(--fx-layer-popover);\n  top: var(--fx-component-control-height-compact);\n  right: var(--fx-ref-space-12);\n  display: flex;\n  flex-direction: column;\n  min-width: var(--fx-component-menu-min-width);\n  padding: var(--fx-ref-space-6);\n  border: var(--fx-border-width) solid var(--fx-color-border-essential);\n  border-radius: var(--fx-radius-popover);\n  background: var(--fx-color-surface-raised);\n  box-shadow: var(--fx-shadow-floating);\n}\n.fx-inspector .insp-add-menu strong {\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-8) var(--fx-ref-space-6);\n  color: var(--fx-color-text-muted);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-code-font-family);\n  text-transform: uppercase;\n}\n.fx-inspector .insp-add-menu button {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-8);\n  min-height: var(--fx-component-control-height-compact);\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8);\n  border: 0;\n  border-radius: var(--fx-radius-control);\n  background: transparent;\n  color: var(--fx-color-text-secondary);\n  text-align: left;\n}\n.fx-inspector .insp-add-menu button:hover {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.fx-inspector .insp-add-menu button span {\n  display: grid;\n  place-items: center;\n  width: var(--fx-component-control-icon-size);\n  color: var(--fx-color-text-muted);\n}\n.fx-inspector .no-match {\n  padding: var(--fx-ref-space-16);\n  color: var(--insp-muted);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\n  text-align: center;\n}\n.insp-context-menu {\n  position: fixed;\n  z-index: var(--fx-layer-tooltip);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-width: var(--fx-component-menu-min-width);\n  padding: var(--fx-ref-space-6);\n  border: var(--fx-border-width) solid var(--fx-color-border-essential);\n  border-radius: var(--fx-radius-popover);\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-secondary);\n  box-shadow: var(--fx-shadow-floating);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-ui-font-family);\n}\n.insp-context-menu > strong {\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-8) var(--fx-ref-space-6);\n  color: var(--fx-color-text-muted);\n  font-family: var(--fx-type-code-font-family);\n}\n.insp-context-menu > i {\n  height: var(--fx-border-width);\n  margin: var(--fx-ref-space-4) var(--fx-ref-space-6);\n  background: var(--fx-color-border-subtle);\n}\n.insp-context-menu > button {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-8);\n  min-height: var(--fx-component-control-height-compact);\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8);\n  border: 0;\n  border-radius: var(--fx-radius-control);\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n}\n.insp-context-menu > button:hover:not(:disabled) {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.insp-context-menu > button:disabled {\n  opacity: .38;\n}\n.insp-context-menu > button[data-danger=true] {\n  color: var(--fx-color-status-error-fg);\n}\n.insp-context-menu > button[data-forge=true] > span:first-child {\n  color: var(--fx-color-brand-accent);\n}\n.insp-context-menu > button > span:first-child {\n  display: grid;\n  place-items: center;\n  width: var(--fx-component-control-icon-size);\n  color: var(--fx-color-text-muted);\n}\n.fx-inspector .insp-header {\n  flex: 0 0 auto;\n  gap: var(--fx-ref-space-8);\n}\n.fx-inspector .insp-header .fx-panel-header__slot:first-child {\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector .insp-header .fx-panel-header__slot:nth-child(2):empty {\n  display: none;\n}\n.fx-inspector .insp-header .fx-panel-header__slot:last-child {\n  flex: 0 0 auto;\n}\n.fx-inspector .insp-header-identity {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-8);\n  min-width: 0;\n  flex: 1;\n}\n.fx-inspector .insp-header-copy {\n  min-width: 0;\n  flex: 1;\n}\n.fx-inspector .insp-header-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-8);\n  border: var(--fx-border-width) solid var(--insp-line);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-inset);\n  color: var(--insp-text);\n  font-weight: var(--fx-ref-font-weight-600);\n}\n.fx-inspector .insp-header-end {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--fx-ref-space-4);\n  flex-shrink: 0;\n}\n.fx-inspector .insp-header-end .badge {\n  max-width: 5rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fx-inspector .insp-toolbar {\n  position: relative;\n  flex: 0 0 auto;\n  padding: var(--fx-ref-space-8) var(--fx-ref-space-12);\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\n}\n.fx-inspector .insp-toolbar .fx-search {\n  flex: 1;\n}\n.fx-inspector .insp-toolbar .fx-search .fx-input {\n  height: var(--fx-component-control-height-compact);\n}\n.fx-inspector .insp-toolbar .is-active {\n  border-color: var(--fx-color-border-essential);\n  background: var(--fx-color-surface-selected);\n}\n.fx-inspector .fx-insp-menu,\n.fx-inspector .insp-add-menu {\n  padding: 0;\n  border: 0;\n  border-radius: var(--fx-radius-popover);\n  background: transparent;\n  box-shadow: none;\n}\n.fx-inspector .fx-insp-menu .fx-menu,\n.fx-inspector .insp-add-menu .fx-menu {\n  min-width: var(--fx-component-menu-min-width);\n}\n.fx-inspector .dp-comp {\n  padding: var(--fx-ref-space-8) var(--fx-ref-space-12);\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\n}\n.fx-inspector .dp-comp .ch {\n  gap: var(--fx-ref-space-8);\n  margin-bottom: var(--fx-ref-space-6);\n}\n.fx-inspector .dp-comp .add {\n  min-height: var(--fx-component-control-height-compact);\n  margin-left: auto;\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-8);\n}\n.fx-inspector .comp-row {\n  min-height: var(--fx-component-editor-row-height);\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-8);\n  gap: var(--fx-ref-space-8);\n  border-radius: var(--fx-radius-control);\n  color: var(--fx-color-text-secondary);\n  cursor: pointer;\n}\n.fx-inspector .comp-row:hover {\n  background: var(--fx-color-surface-hover);\n}\n.fx-inspector .comp-del {\n  width: var(--fx-component-control-height-compact);\n  min-height: var(--fx-component-control-height-compact);\n}\n.fx-inspector .cat {\n  border-bottom: 0;\n}\n.fx-inspector .cat .fx-collapsible__trigger {\n  padding-left: var(--fx-ref-space-8);\n  background: var(--fx-color-surface-sidebar);\n  border-left: calc(var(--fx-border-width) * 3) solid transparent;\n}\n.fx-inspector .cat.dim-type .fx-collapsible__trigger {\n  border-left-color: var(--d-type);\n}\n.fx-inspector .cat.dim-all .fx-collapsible__trigger {\n  border-left-color: var(--d-all);\n}\n.fx-inspector .cat.dim-cap .fx-collapsible__trigger {\n  border-left-color: var(--d-cap);\n}\n.fx-inspector .cat .fx-collapsible__content {\n  padding: var(--fx-ref-space-4) 0 var(--fx-ref-space-8);\n}\n.fx-inspector .cat-title {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  gap: var(--fx-ref-space-8);\n}\n.fx-inspector .cat-icon {\n  display: grid;\n  color: var(--fx-color-text-muted);\n}\n.fx-inspector .advb {\n  margin-left: var(--fx-ref-space-2);\n  padding: 0 var(--fx-ref-space-6);\n  font-family: var(--fx-type-code-font-family);\n  font-size: var(--fx-type-caption-font-size);\n  line-height: var(--fx-type-caption-line-height);\n}\n.fx-inspector .cacts {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--fx-ref-space-2);\n  margin-left: auto;\n}\n.fx-inspector .cact {\n  width: var(--fx-component-control-height-compact);\n  min-height: var(--fx-component-control-height-compact);\n  opacity: 0;\n}\n.fx-inspector .fx-collapsible__heading:hover .cact,\n.fx-inspector .cact:focus-visible {\n  opacity: 1;\n}\n.fx-inspector .f-row-wrap {\n  display: flex;\n  align-items: center;\n  min-height: var(--fx-component-editor-row-height);\n  padding: 0 var(--fx-ref-space-8);\n  gap: var(--fx-ref-space-4);\n}\n.fx-inspector .f-row-wrap:hover {\n  background: var(--fx-color-surface-hover);\n}\n.fx-inspector .f-row {\n  flex: 1;\n  min-width: 0;\n  padding: var(--fx-ref-space-2) 0;\n  gap: var(--fx-ref-space-8);\n}\n.fx-inspector .f-row:hover {\n  background: transparent;\n}\n.fx-inspector .f-row .fx-property-row__label {\n  flex-basis: 38%;\n  overflow: hidden;\n  color: var(--fx-color-text-secondary);\n  font-size: var(--fx-type-caption-font-size);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fx-inspector .f-row .fx-property-row__control {\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n}\n.fx-inspector .f-row .fx-property-row__control > * {\n  flex: 1;\n  min-width: 0;\n  max-width: 100%;\n}\n.fx-inspector .insp-input {\n  height: var(--fx-component-control-height-compact);\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-6);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-inset);\n  font-family: var(--fx-type-code-font-family);\n  font-size: var(--fx-type-caption-font-size);\n}\n.fx-inspector .insp-input.txt {\n  flex: 1;\n}\n.fx-inspector .vcell .insp-input {\n  width: 100%;\n  padding-left: var(--fx-ref-space-16);\n  text-align: center;\n}\n.fx-inspector .vcell.x .insp-input {\n  border-bottom-color: var(--fx-color-status-error-fg);\n}\n.fx-inspector .vcell.y .insp-input {\n  border-bottom-color: var(--fx-color-status-success-fg);\n}\n.fx-inspector .vcell.z .insp-input {\n  border-bottom-color: var(--fx-color-status-info-fg);\n}\n.fx-inspector .insp-checkbox {\n  display: inline-flex;\n  width: auto;\n  height: auto;\n  flex: 0 0 auto;\n  min-height: var(--fx-component-control-height-compact);\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n}\n.fx-inspector .insp-checkbox input {\n  border-radius: var(--fx-ref-radius-4);\n}\n.fx-inspector .swatch,\n.fx-inspector .asset-ref,\n.fx-inspector .asset-ref-thumb,\n.fx-inspector .asset-ref-combo {\n  border-color: var(--fx-color-border-control);\n  border-radius: var(--fx-radius-control);\n}\n.fx-inspector .asset-ref {\n  background: var(--fx-color-surface-inset);\n}\n.fx-inspector .asset-ref-act {\n  width: var(--fx-component-control-height-compact);\n  height: var(--fx-component-control-height-compact);\n}\n.fx-inspector .no-match {\n  min-height: calc(var(--fx-ref-space-64) + var(--fx-ref-space-48));\n  padding: var(--fx-ref-space-16);\n}\n.insp-context-menu {\n  padding: 0;\n  border: 0;\n  border-radius: var(--fx-radius-popover);\n  background: transparent;\n  box-shadow: none;\n}\n.insp-context-menu .fx-menu {\n  min-width: var(--fx-component-menu-min-width);\n}\n.insp-menu-forge {\n  display: grid;\n  color: var(--fx-color-brand-text);\n}\n.visually-hidden {\n  position: absolute;\n  width: var(--fx-border-width);\n  height: var(--fx-border-width);\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n}\n";
+if (typeof document !== "undefined" && !document.querySelector('style[data-forgeax-css="L2RhdGEvaG9tZS9nYWhvdWxpYW8vYWN0aW9ucy1ydW5uZXIvX3dvcmsvZm9yZ2VheC12aWV3L2ZvcmdlYXgtdmlldy9wYWNrYWdlcy92aWV3LXBsdWdpbi1pbnNwZWN0b3Ivc3JjL3VpL2luc3BlY3Rvci5jc3M"]')) {
+  const style = document.createElement("style");
+  style.dataset.forgeaxCss = "L2RhdGEvaG9tZS9nYWhvdWxpYW8vYWN0aW9ucy1ydW5uZXIvX3dvcmsvZm9yZ2VheC12aWV3L2ZvcmdlYXgtdmlldy9wYWNrYWdlcy92aWV3LXBsdWdpbi1pbnNwZWN0b3Ivc3JjL3VpL2luc3BlY3Rvci5jc3M";
+  style.textContent = css;
+  document.head.append(style);
+}
+
+// packages/view-plugin-inspector/src/ui/mount.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+async function mountInspectorPanel(props) {
+  if (!props.mountElement) throw new TypeError("mountInspectorPanel requires mountElement");
+  const root = createRoot(props.mountElement);
+  root.render(
+    /* @__PURE__ */ jsx2(OverlayRootProvider, { root: props.overlayRoot ?? props.mountElement, children: /* @__PURE__ */ jsx2(InspectorPanel, { client: props.client, demo: props.demo }) })
+  );
+  return async () => root.unmount();
+}
+
+export {
+  mountInspectorPanel
+};
+//# sourceMappingURL=chunk-MUOQZPVH.mjs.map