@forgeax/view 0.2.1-beta-20260924075842

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

@@ -0,0 +1,918 @@
+import {
+  getLocale,
+  subscribeLocale,
+  t
+} from "./chunk-ATWGCH7I.mjs";
+import {
+  SCENE_TREE_ACTIONS
+} from "./chunk-R274XBEH.mjs";
+import {
+  Checkbox,
+  EmptyState,
+  FloatingMenu,
+  IconButton,
+  OverlayRootProvider,
+  PanelHeader,
+  SearchField,
+  Toolbar,
+  useOverlayRoot,
+  useWorkspaceClientConnected
+} from "./chunk-NJH2OJFC.mjs";
+import {
+  createWorkspaceObservation,
+  createWorkspaceStateReader
+} from "./chunk-FJM6WWIY.mjs";
+import {
+  VIEW_WORKSPACE_TAB_ID,
+  jsonUnchanged
+} from "./chunk-32GD5LL6.mjs";
+
+// packages/view-plugin-scene-tree/src/ui/mount.tsx
+import { createRoot } from "react-dom/client";
+
+// packages/view-plugin-scene-tree/src/ui/SceneTreePanel.tsx
+import {
+  Box,
+  Braces,
+  Camera,
+  ChevronDown,
+  ChevronRight,
+  CircleUserRound,
+  Crosshair,
+  Filter,
+  Folder,
+  Layers,
+  Lightbulb,
+  Maximize2,
+  Minimize2,
+  Settings,
+  X
+} from "lucide-react";
+import {
+  useCallback as useCallback2,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore as useSyncExternalStore2
+} from "react";
+import { createPortal } from "react-dom";
+
+// packages/view-plugin-scene-tree/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-scene-tree/src/hierarchy-filters.mjs
+var CATEGORY_RULES = [
+  { test: /Camera/, category: "camera" },
+  { test: /Light/, category: "light" },
+  { test: /Character|Controller/, category: "character" },
+  { test: /PlayerStart/, category: "start" },
+  { test: /Spawner/, category: "spawner" },
+  { test: /Mesh/, category: "mesh" }
+];
+function categoryRank(category) {
+  const index = CATEGORY_RULES.findIndex((rule) => rule.category === category);
+  return index === -1 ? CATEGORY_RULES.length : index;
+}
+function hierarchyTypeCategory(id) {
+  if (id === "group") return "group";
+  if (id === "entity") return "entity";
+  for (const rule of CATEGORY_RULES) {
+    if (rule.test.test(id)) return rule.category;
+  }
+  return "generic";
+}
+function compareComponentFilterIds(a, b) {
+  const ra = categoryRank(hierarchyTypeCategory(a));
+  const rb = categoryRank(hierarchyTypeCategory(b));
+  return ra - rb || a.localeCompare(b);
+}
+function entityMatchesSceneTreeFilters(componentNames, activeFilters) {
+  if (activeFilters.size === 0) return true;
+  return componentNames.some((name) => activeFilters.has(name));
+}
+function buildSceneTreeFilterOptions(schemaNames, counts = /* @__PURE__ */ new Map()) {
+  const seen = /* @__PURE__ */ new Set();
+  const options = [];
+  for (const name of schemaNames) {
+    const id = String(name);
+    if (!id || seen.has(id)) continue;
+    seen.add(id);
+    const count = counts.get(id);
+    options.push({
+      id,
+      ...count === void 0 ? {} : { count }
+    });
+  }
+  options.sort((left, right) => compareComponentFilterIds(left.id, right.id));
+  return options;
+}
+
+// packages/view-plugin-scene-tree/src/hierarchy.mjs
+function projectEntityRows(result) {
+  if (!result || typeof result !== "object") return [];
+  const nodes = result.nodes;
+  if (!Array.isArray(nodes)) return [];
+  const rows = [];
+  const seen = /* @__PURE__ */ new Set();
+  const flat = nodes.filter((node) => node && typeof node === "object");
+  const byId = new Map(flat.map((node) => [String(node.entityId), node]));
+  const children = /* @__PURE__ */ new Map();
+  for (const node of flat) {
+    if (node.parentId && byId.has(node.parentId)) {
+      const siblings = children.get(node.parentId) ?? [];
+      siblings.push(node);
+      children.set(node.parentId, siblings);
+    }
+  }
+  const visit = (root) => {
+    const stack = [{ node: root, depth: 0 }];
+    while (stack.length) {
+      const { node, depth } = stack.pop();
+      const id = String(node.entityId ?? "");
+      if (!id || seen.has(id)) continue;
+      seen.add(id);
+      const descendants = children.get(id) ?? [];
+      const componentNames = Array.isArray(node.componentNames) ? node.componentNames.filter((name) => typeof name === "string") : [];
+      const typeKey = componentNames.includes("Camera") ? "camera" : componentNames.includes("DirectionalLight") ? "directionalLight" : componentNames.includes("MeshFilter") ? "mesh" : "entity";
+      rows.push({
+        id,
+        componentNames,
+        name: String(node.name ?? (node.entity === void 0 ? id : `Entity ${node.entity}`)),
+        typeKey,
+        depth,
+        kind: "entity",
+        ...descendants.length ? { hasChildren: true, expanded: depth < 1 } : {}
+      });
+      for (let i = descendants.length - 1; i >= 0; i--) stack.push({ node: descendants[i], depth: depth + 1 });
+    }
+  };
+  for (const node of flat) if (!node.parentId || !byId.has(node.parentId)) visit(node);
+  for (const node of flat) visit(node);
+  return rows;
+}
+function sceneTreeComponentFilters(rows) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const row of rows) for (const name of row.componentNames ?? []) counts.set(name, (counts.get(name) ?? 0) + 1);
+  return buildSceneTreeFilterOptions([...counts.keys()], counts);
+}
+var HIERARCHY_SCENE_FOLDER_ID = "hierarchy:scene-root";
+function isSceneRootRow(row) {
+  return row?.id === HIERARCHY_SCENE_FOLDER_ID;
+}
+function wrapWithVirtualSceneRoot(rows) {
+  if (rows.some(isSceneRootRow)) return rows.map((row) => isSceneRootRow(row) ? { ...row, virtual: true } : row);
+  return [
+    {
+      id: HIERARCHY_SCENE_FOLDER_ID,
+      name: "Scene",
+      typeKey: "folder",
+      depth: 0,
+      kind: "folder",
+      virtual: true,
+      hasChildren: rows.length > 0,
+      expanded: true
+    },
+    ...rows.map((row) => ({ ...row, depth: row.depth + 1 }))
+  ];
+}
+function normalizeSceneTreeRows(result) {
+  return wrapWithVirtualSceneRoot(projectEntityRows(result));
+}
+
+// packages/view-plugin-scene-tree/src/ui/mockHierarchy.ts
+var MOCK_HIERARCHY_ROWS = [
+  { id: HIERARCHY_SCENE_FOLDER_ID, name: "Scene", typeKey: "folder", depth: 0, kind: "folder", virtual: true, hasChildren: true, expanded: true },
+  { id: "ground", name: "Ground", typeKey: "mesh", componentNames: ["MeshRenderer", "Transform"], depth: 1, kind: "entity" },
+  { id: "tree-trunk", name: "TreeTrunk", typeKey: "mesh", componentNames: ["MeshRenderer", "Transform"], depth: 1, kind: "entity" },
+  { id: "red-box", name: "RedBox", typeKey: "mesh", componentNames: ["MeshRenderer", "Transform"], depth: 1, kind: "entity" },
+  { id: "blue-ball", name: "BlueBall", typeKey: "mesh", componentNames: ["MeshRenderer", "Transform"], depth: 1, kind: "entity" },
+  { id: "sun", name: "Sun", typeKey: "directionalLight", componentNames: ["DirectionalLight", "Transform"], depth: 1, kind: "entity" },
+  { id: "skybox", name: "Skybox", typeKey: "sky", componentNames: ["SkyLight", "Transform"], depth: 1, kind: "entity" },
+  { id: "player", name: "Player", typeKey: "mesh", componentNames: ["CharacterController", "MeshRenderer", "Transform"], depth: 1, kind: "entity" },
+  { id: "props", name: "Props", depth: 1, kind: "folder", hasChildren: true, expanded: true },
+  { id: "crate-a", name: "Crate_A", typeKey: "mesh", componentNames: ["MeshRenderer", "Transform"], depth: 2, kind: "entity" },
+  { id: "crate-b", name: "Crate_B", typeKey: "mesh", componentNames: ["MeshRenderer", "Transform"], depth: 2, kind: "entity" }
+];
+
+// packages/view-plugin-scene-tree/src/ui/SceneTreePanel.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var HIERARCHY_ROWS = MOCK_HIERARCHY_ROWS.map((row) => ({ ...row }));
+function rowComponentNames(row) {
+  if (Array.isArray(row.componentNames) && row.componentNames.length > 0) {
+    return row.componentNames;
+  }
+  return row.typeKey ? [String(row.typeKey)] : [];
+}
+function rowType(row) {
+  if (isSceneRootRow(row)) return "scene";
+  if (row.kind === "folder") return "group";
+  const primary = rowComponentNames(row).find((name) => name !== "Transform") ?? row.typeKey;
+  if (!primary) return "mesh";
+  return hierarchyTypeCategory(String(primary));
+}
+function filterOptionIcon(id) {
+  switch (hierarchyTypeCategory(id)) {
+    case "camera":
+      return /* @__PURE__ */ jsx(Camera, { size: 14 });
+    case "light":
+      return /* @__PURE__ */ jsx(Lightbulb, { size: 14 });
+    case "character":
+      return /* @__PURE__ */ jsx(CircleUserRound, { size: 14 });
+    case "group":
+      return /* @__PURE__ */ jsx(Layers, { size: 14 });
+    default:
+      return /* @__PURE__ */ jsx(Box, { size: 14 });
+  }
+}
+function RowIcon({ row }) {
+  if (isSceneRootRow(row)) return /* @__PURE__ */ jsx(Folder, { size: 15 });
+  if (row.kind === "folder") return /* @__PURE__ */ jsx(Layers, { size: 15 });
+  if (row.typeKey === "directionalLight") return /* @__PURE__ */ jsx(Lightbulb, { size: 15 });
+  if (row.typeKey === "camera") return /* @__PURE__ */ jsx(Camera, { size: 15 });
+  if (row.name === "Player") return /* @__PURE__ */ jsx(CircleUserRound, { size: 15 });
+  return /* @__PURE__ */ jsx(Box, { size: 15 });
+}
+function HierarchyContextMenu({ state, close }) {
+  const overlayRoot = useOverlayRoot();
+  const [submenu, setSubmenu] = useState(null);
+  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]);
+  const renderItems = (items, nested = false) => /* @__PURE__ */ jsx("div", { className: nested ? "hier-context-submenu" : "hier-context-menu", children: items.map((item, index) => {
+    if (item.kind === "separator") return /* @__PURE__ */ jsx("i", { className: "hier-context-separator" }, `sep-${index}`);
+    if (item.kind === "title") return /* @__PURE__ */ jsxs("div", { className: "hier-context-title", children: [
+      item.icon,
+      item.label
+    ] }, `title-${index}`);
+    return /* @__PURE__ */ jsxs("div", { className: "hier-context-item-wrap", onPointerEnter: () => item.children && setSubmenu(item.id), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitem",
+          "data-operation": item.id,
+          "data-danger": item.danger || void 0,
+          "data-forge": item.forge || void 0,
+          disabled: item.disabled,
+          onClick: () => {
+            if (item.children) {
+              setSubmenu(submenu === item.id ? null : item.id);
+              return;
+            }
+            item.action?.();
+            close();
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "hier-context-icon", children: item.icon }),
+            /* @__PURE__ */ jsx("span", { children: item.label }),
+            item.shortcut ? /* @__PURE__ */ jsx("kbd", { children: item.shortcut }) : null,
+            item.children ? /* @__PURE__ */ jsx(ChevronRight, { size: 12 }) : null
+          ]
+        }
+      ),
+      item.children && submenu === item.id ? renderItems(item.children, true) : null
+    ] }, item.id);
+  }) });
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "hier-context-position",
+        "data-action": SCENE_TREE_ACTIONS.showContextMenu,
+        role: "menu",
+        style: {
+          left: Math.max(8, Math.min(state.x, window.innerWidth - 260)),
+          top: Math.max(8, Math.min(state.y, window.innerHeight - 420))
+        },
+        onPointerDown: (event) => event.stopPropagation(),
+        onContextMenu: (event) => event.preventDefault(),
+        children: renderItems(state.items)
+      }
+    ),
+    overlayRoot ?? document.body
+  );
+}
+function highlighted(value, query) {
+  const index = value.toLowerCase().indexOf(query.toLowerCase());
+  if (!query || index < 0) return value;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    value.slice(0, index),
+    /* @__PURE__ */ jsx("mark", { className: "hl", children: value.slice(index, index + query.length) }),
+    value.slice(index + query.length)
+  ] });
+}
+function SceneTreePanel(props) {
+  if (props.demo) return /* @__PURE__ */ jsx(SceneTreeDemoPanel, { client: props.client });
+  if (!props.client) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "Scene hierarchy unavailable",
+        description: "Connect to the View workspace API to load the Engine scene tree."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(SceneTreeLivePanel, { client: props.client });
+}
+function useEngineSceneRows(client, workspace, connected, reader) {
+  const [projection, setProjection] = useState(null);
+  const [pageCount, setPageCount] = useState(1);
+  const target = workspace?.preview?.target;
+  const projectId = workspace?.project?.id;
+  const key = `${target?.targetId}:${target?.generation}`;
+  const current = projection?.key === key ? projection : null;
+  const rows = current?.rows ?? [];
+  useEffect(() => {
+    setPageCount(1);
+  }, [target?.targetId, target?.generation]);
+  useEffect(() => {
+    if (!connected || !target?.targetId || !projectId) {
+      if (!connected) return;
+      setProjection(null);
+      return;
+    }
+    const observation = createWorkspaceObservation(reader, (current2) => current2?.project?.id === projectId && current2?.preview?.target?.targetId === target.targetId && current2?.preview?.target?.generation === target.generation);
+    const { signal } = observation;
+    let timer;
+    const refresh = async () => {
+      if (signal.aborted) return;
+      let retryDelay = 500;
+      try {
+        const binding = {
+          tabId: VIEW_WORKSPACE_TAB_ID,
+          projectId,
+          targetId: target.targetId,
+          targetGeneration: target.generation,
+          signal
+        };
+        const result = await client.getSceneTree({ ...binding, limit: 1e3 });
+        if (signal.aborted) return;
+        const nodes = [...result.nodes ?? []];
+        let nextOffset = result.nextOffset;
+        for (let page = 1; page < pageCount && nextOffset !== null && nextOffset !== void 0; page++) {
+          const next = await client.getSceneTree({ ...binding, offset: nextOffset, revision: result.revision, limit: 1e3 });
+          if (signal.aborted) return;
+          nodes.push(...next.nodes);
+          nextOffset = next.nextOffset;
+        }
+        if (signal.aborted) return;
+        setProjection((current2) => {
+          const next = { key, rows: normalizeSceneTreeRows({ ...result, nodes }), hasMore: nextOffset !== null && nextOffset !== void 0, failed: false };
+          if (current2?.key === next.key && current2.failed === next.failed && current2.hasMore === next.hasMore && jsonUnchanged(current2.rows, next.rows)) return current2;
+          return next;
+        });
+      } catch {
+        if (signal.aborted) return;
+        setProjection((current2) => {
+          if (current2?.key === key && current2.failed && !current2.hasMore && current2.rows.length === 0) return current2;
+          return { key, rows: [], hasMore: false, failed: true };
+        });
+        retryDelay = 1500;
+      }
+      if (!signal.aborted) {
+        timer = setTimeout(refresh, retryDelay);
+      }
+    };
+    void refresh();
+    return () => {
+      observation.dispose();
+      clearTimeout(timer);
+    };
+  }, [client, connected, projectId, target?.targetId, target?.generation, pageCount, key, reader, workspace]);
+  return { rows, filterOptions: sceneTreeComponentFilters(rows), failed: current?.failed ?? false, hasMore: current?.hasMore ?? false, loadMore: () => setPageCount((value) => value + 1) };
+}
+function SceneTreeLivePanel({ client }) {
+  const { t: t2 } = useTranslation();
+  const reader = useMemo(() => createWorkspaceStateReader(client), [client]);
+  const workspace = useSyncExternalStore2(
+    reader.subscribe,
+    () => reader.getSnapshot(),
+    () => reader.getSnapshot()
+  );
+  const connected = useWorkspaceClientConnected(client);
+  const { rows, filterOptions, failed, hasMore, loadMore } = useEngineSceneRows(client, workspace, connected, reader);
+  if (!workspace?.preview?.target?.targetId) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: t2("sceneTree.unavailable"),
+        description: "Open a scene preview from the Content Browser to load the Engine hierarchy."
+      }
+    );
+  }
+  if (failed) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: t2("sceneTree.unavailable"),
+        description: t2("sceneTree.loadErrorDescription")
+      }
+    );
+  }
+  if (rows.length === 0) return /* @__PURE__ */ jsx(EmptyState, { title: "Loading hierarchy", description: "Reading the selected Engine target." });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasMore && /* @__PURE__ */ jsxs("button", { type: "button", onClick: loadMore, children: [
+      "Showing ",
+      Math.max(0, rows.length - 1),
+      " entities. Load more"
+    ] }),
+    /* @__PURE__ */ jsx(
+      SceneTreeDemoPanel,
+      {
+        client,
+        rows,
+        filterOptions
+      },
+      `${workspace.preview?.target?.targetId}:${workspace.preview?.target?.generation}`
+    )
+  ] });
+}
+function SceneTreeDemoPanel({
+  client,
+  rows: rowsOverride,
+  filterOptions: filterOptionsOverride = []
+}) {
+  const { t: t2 } = useTranslation();
+  const reader = useMemo(() => createWorkspaceStateReader(client), [client]);
+  const workspace = useSyncExternalStore2(
+    reader.subscribe,
+    () => reader.getSnapshot(),
+    () => reader.getSnapshot()
+  );
+  const externalEntityId = workspace?.sceneSelection?.primary?.entityId ?? null;
+  const sceneIdentity = workspace?.preview?.asset?.guid ?? workspace?.preview?.target?.targetId ?? null;
+  const rows = rowsOverride ?? HIERARCHY_ROWS;
+  const rowLabel = useCallback2(
+    (row) => isSceneRootRow(row) ? t2("sceneTree.sceneRoot") : row.name,
+    [t2]
+  );
+  const typeLabelFor = useCallback2(
+    (row) => {
+      if (row.kind === "folder") return t2("sceneTree.types.folder");
+      if (row.typeKey) {
+        const key = `sceneTree.types.${row.typeKey}`;
+        const label = t2(key);
+        return label === key ? t2("sceneTree.types.entity") : label;
+      }
+      return "";
+    },
+    [t2]
+  );
+  const filterOptions = filterOptionsOverride;
+  const componentTypeLabel = useCallback2((id) => {
+    const key = `sceneTree.types.${id}`;
+    const label = t2(key);
+    return label === key ? id : label;
+  }, [t2]);
+  const resolvedFilterOptions = useMemo(
+    () => filterOptions.map((option) => ({
+      ...option,
+      label: option.label ?? componentTypeLabel(option.id)
+    })),
+    [componentTypeLabel, filterOptions]
+  );
+  const [query, setQuery] = useState("");
+  const [filters, setFilters] = useState(/* @__PURE__ */ new Set());
+  const [expanded, setExpanded] = useState(() => new Set(
+    rows.filter((row) => row.expanded || isSceneRootRow(row)).map((row) => row.id)
+  ));
+  const [columns, setColumns] = useState({ type: true, id: false });
+  const [headerMenu, setHeaderMenu] = useState(null);
+  const [headerMenuAnchor, setHeaderMenuAnchor] = useState(null);
+  const filterButtonRef = useRef(null);
+  const settingsButtonRef = useRef(null);
+  const [contextMenu, setContextMenu] = useState(null);
+  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+  const [anchor, setAnchor] = useState(null);
+  useEffect(() => {
+    setExpanded((current) => {
+      if (current.has(HIERARCHY_SCENE_FOLDER_ID)) return current;
+      const next = new Set(current);
+      next.add(HIERARCHY_SCENE_FOLDER_ID);
+      return next;
+    });
+  }, [sceneIdentity]);
+  useEffect(() => {
+    if (externalEntityId && rows.some((row) => row.id === externalEntityId)) {
+      setSelected(/* @__PURE__ */ new Set([externalEntityId]));
+      setAnchor(externalEntityId);
+    }
+  }, [externalEntityId, rows]);
+  useEffect(() => {
+    const allowed = new Set(resolvedFilterOptions.map((option) => option.id));
+    setFilters((current) => {
+      if (current.size === 0) return current;
+      const next = new Set([...current].filter((id) => allowed.has(id)));
+      return next.size === current.size ? current : next;
+    });
+  }, [resolvedFilterOptions]);
+  const publishSceneSelection = (row) => {
+    if (row.kind !== "entity" || !client?.selectSceneEntity) return;
+    const target = workspace?.preview?.target;
+    if (!target?.targetId) return;
+    void client.selectSceneEntity(row.id, {
+      label: row.name,
+      tabId: VIEW_WORKSPACE_TAB_ID,
+      targetId: target.targetId,
+      targetGeneration: target.generation
+    }).catch(() => {
+    });
+  };
+  const visibleRows = useMemo(() => {
+    const text = query.trim().toLowerCase();
+    const filtering = text.length > 0 || filters.size > 0;
+    if (filtering) {
+      return rows.filter((row) => {
+        const names = rowComponentNames(row);
+        const typeText = typeLabelFor(row).toLowerCase();
+        const componentText = names.join(" ").toLowerCase();
+        const textMatch = !text || rowLabel(row).toLowerCase().includes(text) || typeText.includes(text) || componentText.includes(text);
+        const typeMatch = entityMatchesSceneTreeFilters(names, filters);
+        return !isSceneRootRow(row) && textMatch && typeMatch;
+      }).map((row) => ({ ...row, depth: 0 }));
+    }
+    const collapsedDepths = [];
+    return rows.filter((row) => {
+      while (collapsedDepths.length && collapsedDepths.at(-1) >= row.depth) collapsedDepths.pop();
+      const hiddenByParent = collapsedDepths.length > 0;
+      if (row.hasChildren && !expanded.has(row.id)) collapsedDepths.push(row.depth);
+      return !hiddenByParent;
+    });
+  }, [expanded, filters, query, rowLabel, rows, typeLabelFor]);
+  const selectRow = (row, event) => {
+    if (row.kind === "folder") {
+      setExpanded((current) => {
+        const next2 = new Set(current);
+        if (next2.has(row.id)) next2.delete(row.id);
+        else next2.add(row.id);
+        return next2;
+      });
+      return;
+    }
+    const ordered = visibleRows.filter((entry) => entry.kind === "entity").map((entry) => entry.id);
+    let next;
+    if (event.shiftKey && anchor) {
+      const from = ordered.indexOf(anchor);
+      const to = ordered.indexOf(row.id);
+      next = new Set(ordered.slice(Math.min(from, to), Math.max(from, to) + 1));
+    } else if (event.ctrlKey || event.metaKey) {
+      next = new Set(selected);
+      if (next.has(row.id)) next.delete(row.id);
+      else next.add(row.id);
+      setAnchor(row.id);
+    } else {
+      next = /* @__PURE__ */ new Set([row.id]);
+      setAnchor(row.id);
+    }
+    setSelected(next);
+    publishSceneSelection(row);
+  };
+  const showContext = (event, items) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setHeaderMenu(null);
+    setContextMenu({ x: event.clientX, y: event.clientY, items });
+  };
+  const blankMenu = useCallback2(() => [
+    { kind: "title", label: t2("sceneTree.readOnlyTitle") },
+    { kind: "item", id: "clear-filter", label: t2("sceneTree.menu.clearSearchAndFilters"), icon: /* @__PURE__ */ jsx(X, { size: 14 }), disabled: !query && filters.size === 0, action: () => {
+      setQuery("");
+      setFilters(/* @__PURE__ */ new Set());
+    } },
+    { kind: "item", id: "focus", label: t2("sceneTree.menu.focusSelection"), icon: /* @__PURE__ */ jsx(Crosshair, { size: 14 }), shortcut: "F", disabled: selected.size === 0, action: () => {
+    } }
+  ], [filters.size, query, selected.size, t2]);
+  const rowMenu = useCallback2((row) => [
+    { kind: "title", label: rowLabel(row), icon: /* @__PURE__ */ jsx(RowIcon, { row }) },
+    { kind: "item", id: "copy-json", label: t2("sceneTree.menu.copyJson"), icon: /* @__PURE__ */ jsx(Braces, { size: 14 }), action: () => void navigator.clipboard?.writeText(JSON.stringify(row, null, 2)) },
+    { kind: "item", id: "focus", label: t2("sceneTree.menu.focusInViewport"), icon: /* @__PURE__ */ jsx(Crosshair, { size: 14 }), shortcut: "F", disabled: !workspace?.preview || isSceneRootRow(row), action: () => {
+      const target = workspace?.preview?.target;
+      if (target) void client?.call("entity.focus", { entityId: row.id, targetId: target.targetId, targetGeneration: target.generation });
+    } }
+  ], [rowLabel, t2, client, workspace?.preview]);
+  useEffect(() => {
+    if (!headerMenu) setHeaderMenuAnchor(null);
+  }, [headerMenu]);
+  const openHeaderMenu = (kind) => {
+    if (headerMenu === kind) {
+      setHeaderMenu(null);
+      return;
+    }
+    const ref = kind === "filter" ? filterButtonRef : settingsButtonRef;
+    const rect = ref.current?.getBoundingClientRect();
+    if (rect) setHeaderMenuAnchor(rect);
+    setHeaderMenu(kind);
+  };
+  const toggleTypeFilter = (filterId) => {
+    setFilters((current) => {
+      const next = new Set(current);
+      if (next.has(filterId)) next.delete(filterId);
+      else next.add(filterId);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "panel outliner-panel",
+      "data-testid": "panel-hierarchy",
+      "data-view-readonly": "true",
+      role: "tree",
+      tabIndex: 0,
+      onKeyDown: (event) => {
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a") {
+          event.preventDefault();
+          setSelected(new Set(rows.filter((row) => row.kind === "entity").map((row) => row.id)));
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          PanelHeader,
+          {
+            className: "fx-hier-toolbar",
+            "data-testid": "hier-toolbar",
+            start: /* @__PURE__ */ jsx(Toolbar, { children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                ref: filterButtonRef,
+                className: filters.size ? "active" : void 0,
+                label: t2("sceneTree.filterByType"),
+                icon: /* @__PURE__ */ jsx(Filter, { size: 14 }),
+                size: "compact",
+                onClick: () => openHeaderMenu("filter")
+              }
+            ) }),
+            center: /* @__PURE__ */ jsx(
+              SearchField,
+              {
+                className: "fx-hier-search",
+                "data-testid": "hier-search",
+                "data-action": SCENE_TREE_ACTIONS.search,
+                value: query,
+                onChange: (event) => setQuery(event.target.value),
+                onClear: () => setQuery(""),
+                placeholder: t2("sceneTree.searchPlaceholder"),
+                label: t2("sceneTree.searchLabel")
+              }
+            ),
+            end: /* @__PURE__ */ jsx(Toolbar, { children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                ref: settingsButtonRef,
+                label: t2("sceneTree.displaySettings"),
+                icon: /* @__PURE__ */ jsx(Settings, { size: 14 }),
+                size: "compact",
+                onClick: () => openHeaderMenu("settings")
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "ol-colhead", "data-testid": "hier-colhead", children: [
+          /* @__PURE__ */ jsx("span", { className: "ch-caret", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "ch-name sortable", children: t2("sceneTree.columnName") }),
+          columns.type ? /* @__PURE__ */ jsx("span", { className: "ch-type sortable col-type", children: t2("sceneTree.columnType") }) : null,
+          columns.id ? /* @__PURE__ */ jsx("span", { className: "ch-id sortable col-id", children: t2("sceneTree.columnId") }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ol-body",
+            "data-testid": "hier-root-dropzone",
+            onClick: (event) => {
+              if (event.target === event.currentTarget) setSelected(/* @__PURE__ */ new Set());
+            },
+            onContextMenu: (event) => {
+              if (!event.target.closest(".tn")) showContext(event, blankMenu());
+            },
+            children: visibleRows.length === 0 ? /* @__PURE__ */ jsx(
+              EmptyState,
+              {
+                className: "hier-no-match",
+                title: t2("sceneTree.noMatchTitle"),
+                description: t2("sceneTree.noMatchDescription")
+              }
+            ) : visibleRows.map((row) => {
+              const isSelected = selected.has(row.id);
+              const isHidden = row.hidden === true;
+              const isExpanded = expanded.has(row.id);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `tn k-${rowType(row)}${isSelected ? " sel" : ""}${isHidden ? " dim" : ""}`,
+                  "data-testid": isSceneRootRow(row) ? "hier-row-scene-folder" : `hier-row-${row.id}`,
+                  "data-action": SCENE_TREE_ACTIONS.select,
+                  style: { paddingLeft: `calc(var(--fx-ref-space-8) + ${row.depth} * var(--hier-indent-step, calc(var(--fx-ref-space-12) + var(--fx-ref-space-2))))` },
+                  role: "treeitem",
+                  "aria-selected": isSelected,
+                  tabIndex: isSelected ? 0 : -1,
+                  onClick: (event) => selectRow(row, event),
+                  onContextMenu: (event) => {
+                    if (!selected.has(row.id)) {
+                      setSelected(/* @__PURE__ */ new Set([row.id]));
+                      if (row.kind === "entity") publishSceneSelection(row);
+                    }
+                    showContext(event, isSceneRootRow(row) ? blankMenu() : rowMenu(row));
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "caret",
+                        "data-action": SCENE_TREE_ACTIONS.toggleExpanded,
+                        disabled: !row.hasChildren,
+                        tabIndex: -1,
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          if (!row.hasChildren) return;
+                          setExpanded((current) => {
+                            const next = new Set(current);
+                            if (next.has(row.id)) next.delete(row.id);
+                            else next.add(row.id);
+                            return next;
+                          });
+                        },
+                        children: row.hasChildren ? isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 12 }) : null
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "ico", children: /* @__PURE__ */ jsx(RowIcon, { row }) }),
+                    /* @__PURE__ */ jsx("span", { className: "name-cell", children: /* @__PURE__ */ jsx("span", { className: "nm", children: highlighted(rowLabel(row), query) }) }),
+                    columns.type ? /* @__PURE__ */ jsx("span", { className: "cell type col-type", children: /* @__PURE__ */ jsx("span", { className: "kind", children: typeLabelFor(row) }) }) : null,
+                    columns.id ? /* @__PURE__ */ jsx("span", { className: "cell id col-id", children: isSceneRootRow(row) ? "" : `#${row.id}` }) : null
+                  ]
+                },
+                row.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FloatingMenu,
+          {
+            open: Boolean(headerMenuAnchor && headerMenu === "filter"),
+            anchorRect: headerMenuAnchor,
+            onClose: () => setHeaderMenu(null),
+            ignorePointerWithin: [filterButtonRef],
+            className: "hier-filter-menu",
+            containerProps: { onPointerDown: (event) => event.stopPropagation() },
+            children: /* @__PURE__ */ jsxs("div", { className: "hier-filter-menu-body", children: [
+              /* @__PURE__ */ jsx("div", { className: "hier-filter-section", children: t2("sceneTree.filterByType") }),
+              resolvedFilterOptions.map((filter) => {
+                const active = filters.has(filter.id);
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "hier-filter-option",
+                    "data-active": active ? "true" : "false",
+                    onClick: () => toggleTypeFilter(filter.id),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          checked: active,
+                          onChange: () => toggleTypeFilter(filter.id),
+                          tabIndex: -1,
+                          hideLabel: true,
+                          label: filter.label,
+                          className: "hier-filter-check"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "hier-filter-option-icon", "aria-hidden": true, children: filterOptionIcon(filter.id) }),
+                      filter.label
+                    ]
+                  },
+                  filter.id
+                );
+              }),
+              /* @__PURE__ */ jsx("div", { className: "hier-filter-separator" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "hier-filter-option hier-filter-clear",
+                  disabled: filters.size === 0,
+                  onClick: () => setFilters(/* @__PURE__ */ new Set()),
+                  children: t2("sceneTree.clearFilters")
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FloatingMenu,
+          {
+            open: Boolean(headerMenuAnchor && headerMenu === "settings"),
+            anchorRect: headerMenuAnchor,
+            onClose: () => setHeaderMenu(null),
+            ignorePointerWithin: [settingsButtonRef],
+            className: "hier-filter-menu",
+            containerProps: { onPointerDown: (event) => event.stopPropagation() },
+            children: /* @__PURE__ */ jsxs("div", { className: "hier-filter-menu-body hierarchy-header-menu-settings", children: [
+              /* @__PURE__ */ jsx("div", { className: "hier-filter-section", children: t2("sceneTree.columns") }),
+              ["type", "id"].map((column) => {
+                const label = column === "type" ? t2("sceneTree.columnType") : t2("sceneTree.columnId");
+                const checked = columns[column];
+                const toggle = () => setColumns((current) => ({ ...current, [column]: !current[column] }));
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "hier-filter-option",
+                    "data-action": SCENE_TREE_ACTIONS.toggleColumn,
+                    "data-active": checked ? "true" : "false",
+                    onClick: toggle,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          checked,
+                          onChange: toggle,
+                          tabIndex: -1,
+                          hideLabel: true,
+                          label,
+                          className: "hier-filter-check"
+                        }
+                      ),
+                      label
+                    ]
+                  },
+                  column
+                );
+              }),
+              /* @__PURE__ */ jsx("div", { className: "hier-filter-separator" }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "hier-filter-option hier-filter-action",
+                  "data-action": SCENE_TREE_ACTIONS.expandAll,
+                  onClick: () => setExpanded(new Set(rows.filter((row) => row.hasChildren).map((row) => row.id))),
+                  children: [
+                    /* @__PURE__ */ jsx(Maximize2, { size: 14, className: "hier-filter-option-icon" }),
+                    t2("sceneTree.expandAll")
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "hier-filter-option hier-filter-action",
+                  "data-action": SCENE_TREE_ACTIONS.collapseAll,
+                  onClick: () => setExpanded(new Set(rows.filter(isSceneRootRow).map((row) => row.id))),
+                  children: [
+                    /* @__PURE__ */ jsx(Minimize2, { size: 14, className: "hier-filter-option-icon" }),
+                    t2("sceneTree.collapseAll")
+                  ]
+                }
+              )
+            ] })
+          }
+        ),
+        contextMenu ? /* @__PURE__ */ jsx(HierarchyContextMenu, { state: contextMenu, close: () => setContextMenu(null) }) : null
+      ]
+    }
+  );
+}
+
+// packages/view-plugin-scene-tree/src/ui/scene-tree.css
+var css = '/* packages/view-plugin-scene-tree/src/ui/scene-tree.css */\n.outliner-panel {\n  --hier-w-caret: calc(var(--fx-ref-space-12) + var(--fx-ref-space-2));\n  --hier-w-type: calc(var(--fx-ref-space-48) + var(--fx-ref-space-16) + var(--fx-ref-space-4));\n  --hier-w-id: calc(var(--fx-ref-space-48) + var(--fx-ref-space-24));\n  --hier-indent-step: calc(var(--fx-ref-space-12) + var(--fx-ref-space-2));\n  display: flex;\n  flex-direction: column;\n  container-type: inline-size;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: var(--fx-color-surface-sidebar);\n  color: var(--fx-color-text-primary);\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.outliner-panel * {\n  box-sizing: border-box;\n}\n.outliner-panel button,\n.outliner-panel input {\n  font: inherit;\n}\n.fx-hier-toolbar {\n  flex: 0 0 auto;\n  gap: var(--fx-ref-space-6);\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8);\n  background: var(--fx-color-surface-sidebar);\n}\n.fx-hier-toolbar > .fx-panel-header__slot:nth-child(2) {\n  flex: 1;\n}\n.fx-hier-search {\n  flex: 1;\n  width: 100%;\n  min-width: 0;\n}\n.fx-hier-search .fx-input {\n  height: var(--fx-component-control-height-compact);\n}\n.outliner-panel .fx-button--icon.active {\n  border-color: var(--fx-color-brand-accent);\n  background: var(--fx-color-brand-soft);\n  color: var(--fx-color-brand-text);\n}\n.hier-filter-menu-body {\n  min-width: 220px;\n  padding: var(--fx-ref-space-4);\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\n  border-radius: var(--fx-radius-popover);\n  background: var(--fx-color-surface-raised);\n  box-shadow: var(--fx-shadow-floating);\n}\n.hier-filter-section {\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8) var(--fx-ref-space-4);\n  color: var(--fx-color-text-muted);\n  font-size: var(--fx-type-caption-font-size);\n  font-weight: var(--fx-ref-font-weight-600);\n  letter-spacing: var(--fx-type-caption-letter-spacing);\n  text-transform: uppercase;\n}\n.hier-filter-separator {\n  height: var(--fx-border-width);\n  margin: var(--fx-ref-space-4) 0;\n  background: var(--fx-color-border-subtle);\n}\n.hier-filter-option {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-8);\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  border: 0;\n  border-radius: var(--fx-radius-control);\n  background: transparent;\n  color: var(--fx-color-text-secondary);\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n.hier-filter-option:hover:not(:disabled) {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.hier-filter-option:disabled {\n  color: var(--fx-color-text-disabled);\n  cursor: default;\n}\n.hier-filter-option-icon {\n  display: grid;\n  flex: 0 0 14px;\n  place-items: center;\n  width: 14px;\n  color: var(--fx-color-text-muted);\n}\n.hier-filter-check {\n  flex: 0 0 var(--fx-component-choice-size);\n  pointer-events: none;\n}\n.hier-filter-check.fx-choice {\n  align-items: center;\n  gap: 0;\n  min-height: 0;\n  margin: 0;\n}\n.hier-filter-check .fx-choice__text {\n  display: none;\n}\n.hier-filter-clear {\n  justify-content: flex-start;\n  color: var(--fx-color-text-muted);\n}\n.ol-colhead {\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-8);\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\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  letter-spacing: var(--fx-type-caption-letter-spacing);\n  text-transform: uppercase;\n}\n.ch-caret {\n  width: var(--hier-w-caret);\n  flex: 0 0 auto;\n}\n.ch-name {\n  flex: 1;\n  min-width: var(--fx-ref-space-16);\n}\n.ch-type {\n  width: var(--hier-w-type);\n  flex: 0 0 auto;\n}\n.ch-id {\n  width: var(--hier-w-id);\n  flex: 0 0 auto;\n}\n.ol-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--fx-ref-space-4) 0 var(--fx-ref-space-8);\n}\n.tn {\n  display: flex;\n  align-items: center;\n  min-height: var(--fx-component-editor-row-height);\n  padding-right: var(--fx-ref-space-8);\n  border: 0;\n  border-left: var(--fx-border-focus-width) solid transparent;\n  color: var(--fx-color-text-secondary);\n  white-space: nowrap;\n  cursor: default;\n  user-select: none;\n}\n.tn:hover {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.tn.sel {\n  border-left-color: var(--fx-color-selection-indicator);\n  background: var(--fx-color-selection-bg);\n  color: var(--fx-color-selection-fg);\n}\n.tn.dim {\n  opacity: 0.45;\n}\n.tn .caret {\n  display: grid;\n  place-items: center;\n  width: var(--hier-w-caret);\n  height: var(--fx-ref-space-16);\n  flex: 0 0 auto;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--fx-color-text-muted);\n}\n.tn .caret:disabled {\n  opacity: 0;\n  pointer-events: none;\n}\n.tn .ico {\n  display: grid;\n  place-items: center;\n  width: calc(var(--fx-ref-space-16) + var(--fx-ref-space-2));\n  flex: 0 0 auto;\n  color: var(--fx-color-text-muted);\n}\n.tn .name-cell {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  gap: var(--fx-ref-space-4);\n  overflow: hidden;\n}\n.tn .nm {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tn.k-folder .nm,\n.tn.k-grp .nm {\n  color: var(--fx-color-text-muted);\n}\n.tn .cell {\n  overflow: hidden;\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-overflow: ellipsis;\n}\n.tn .cell.type {\n  width: var(--hier-w-type);\n}\n.tn .cell.id {\n  width: var(--hier-w-id);\n}\n.tn .kind {\n  color: var(--fx-color-text-secondary);\n}\n.tn.k-light .ico {\n  color: var(--fx-color-status-warning-fg);\n}\n.tn.k-camera .ico {\n  color: var(--fx-color-status-info-fg);\n}\n.tn.k-character .ico {\n  color: var(--fx-color-brand-text);\n}\n.tn.k-scene .ico,\n.tn.k-group .ico,\n.tn.k-folder .ico {\n  color: var(--fx-color-text-muted);\n}\n.tn.pdim {\n  opacity: 0.68;\n}\n.tn.drop-inside {\n  background: var(--fx-color-brand-soft);\n  outline: var(--fx-border-width) solid var(--fx-color-brand-accent);\n  outline-offset: calc(-1 * var(--fx-border-width));\n}\n.tn.drop-before::before,\n.tn.drop-after::after {\n  content: "";\n  position: absolute;\n  z-index: var(--fx-layer-sticky);\n  right: var(--fx-ref-space-4);\n  left: var(--fx-ref-space-4);\n  height: var(--fx-ref-space-2);\n  background: var(--fx-color-brand-accent);\n  box-shadow: var(--fx-shadow-subtle);\n}\n.tn {\n  position: relative;\n}\n.tn.drop-before::before {\n  top: calc(-1 * var(--fx-border-width));\n}\n.tn.drop-after::after {\n  bottom: calc(-1 * var(--fx-border-width));\n}\n.hier-inline-rename {\n  width: 100%;\n  min-width: 0;\n  height: var(--fx-component-control-height-compact);\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-4);\n  border: var(--fx-border-width) solid var(--fx-color-border-focus);\n  border-radius: var(--fx-ref-radius-4);\n  outline: 0;\n  background: var(--fx-color-surface-inset);\n  color: var(--fx-color-text-primary);\n}\n.hier-no-match {\n  padding: var(--fx-ref-space-8) var(--fx-ref-space-12);\n}\n.outliner-panel .hl {\n  border-radius: var(--fx-ref-radius-4);\n  background: var(--fx-color-brand-soft);\n  color: var(--fx-color-text-primary);\n}\n.outliner-panel .muted {\n  color: var(--fx-color-text-muted);\n}\n@container (max-width: 195px) {\n  .outliner-panel .col-type {\n    display: none;\n  }\n}\n@container (max-width: 280px) {\n  .outliner-panel .col-id {\n    display: none;\n  }\n}\n.hier-context-position {\n  position: fixed;\n  z-index: var(--fx-layer-tooltip);\n  color: var(--fx-color-text-secondary);\n  font: var(--fx-type-ui-font-weight) var(--fx-type-ui-font-size) / var(--fx-type-ui-line-height) var(--fx-type-ui-font-family);\n}\n.hier-context-menu,\n.hier-context-submenu {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: var(--fx-component-menu-min-width);\n  max-height: calc(100vh - var(--fx-ref-space-16));\n  padding: var(--fx-ref-space-6);\n  overflow: visible;\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\n  border-radius: var(--fx-radius-popover);\n  background: var(--fx-color-surface-raised);\n  box-shadow: var(--fx-shadow-floating);\n}\n.hier-context-submenu {\n  position: absolute;\n  top: calc(-1 * var(--fx-ref-space-6));\n  left: calc(100% - var(--fx-ref-space-2));\n  min-width: var(--fx-component-panel-config-min-width);\n}\n.hier-context-title {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-6);\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8);\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}\n.hier-context-item-wrap {\n  position: relative;\n}\n.hier-context-item-wrap > button {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-8);\n  width: 100%;\n  min-height: var(--fx-component-menu-row-height);\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  cursor: pointer;\n}\n.hier-context-item-wrap > button:hover:not(:disabled) {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.hier-context-item-wrap > button:disabled {\n  opacity: 0.38;\n  cursor: default;\n}\n.hier-context-item-wrap > button[data-danger=true] {\n  color: var(--fx-color-status-error-fg);\n}\n.hier-context-item-wrap > button[data-forge=true] .hier-context-icon {\n  color: var(--fx-color-brand-text);\n}\n.hier-context-icon {\n  display: grid;\n  place-items: center;\n  width: var(--fx-component-control-icon-size);\n  flex: 0 0 var(--fx-component-control-icon-size);\n  color: var(--fx-color-text-muted);\n}\n.hier-context-item-wrap > button > span:nth-child(2) {\n  flex: 1;\n}\n.hier-context-item-wrap kbd {\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}\n.hier-context-separator {\n  display: block;\n  height: var(--fx-border-width);\n  margin: var(--fx-ref-space-6);\n  background: var(--fx-color-border-subtle);\n}\n';
+if (typeof document !== "undefined" && !document.querySelector('style[data-forgeax-css="L2RhdGEvaG9tZS9nYWhvdWxpYW8vYWN0aW9ucy1ydW5uZXIvX3dvcmsvZm9yZ2VheC12aWV3L2ZvcmdlYXgtdmlldy9wYWNrYWdlcy92aWV3LXBsdWdpbi1zY2VuZS10cmVlL3NyYy91aS9zY2VuZS10cmVlLmNzcw"]')) {
+  const style = document.createElement("style");
+  style.dataset.forgeaxCss = "L2RhdGEvaG9tZS9nYWhvdWxpYW8vYWN0aW9ucy1ydW5uZXIvX3dvcmsvZm9yZ2VheC12aWV3L2ZvcmdlYXgtdmlldy9wYWNrYWdlcy92aWV3LXBsdWdpbi1zY2VuZS10cmVlL3NyYy91aS9zY2VuZS10cmVlLmNzcw";
+  style.textContent = css;
+  document.head.append(style);
+}
+
+// packages/view-plugin-scene-tree/src/ui/mount.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+async function mountSceneTreePanel(props) {
+  if (!props.mountElement) throw new TypeError("mountSceneTreePanel requires mountElement");
+  const root = createRoot(props.mountElement);
+  root.render(
+    /* @__PURE__ */ jsx2(OverlayRootProvider, { root: props.overlayRoot ?? props.mountElement, children: /* @__PURE__ */ jsx2(SceneTreePanel, { client: props.client, demo: props.demo }) })
+  );
+  return async () => root.unmount();
+}
+
+export {
+  mountSceneTreePanel
+};
+//# sourceMappingURL=chunk-WOMHSTVZ.mjs.map