@forgeax/view 0.2.1-beta-20260924075842

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

@@ -0,0 +1,2392 @@
+import {
+  Button,
+  Checkbox,
+  ContextMenu,
+  EmptyState,
+  FloatingMenu,
+  IconButton,
+  MenuDropdown,
+  OverlayRootProvider,
+  PanelHeader,
+  RangeInput,
+  SearchField,
+  Spinner,
+  Switch,
+  Toolbar,
+  anchorRectFromPoint,
+  useWorkspaceClientConnected
+} from "./chunk-NJH2OJFC.mjs";
+import {
+  getLocale,
+  subscribeLocale,
+  t
+} from "./chunk-IKNGC766.mjs";
+import {
+  CONTENT_BROWSER_ACTIONS
+} from "./chunk-CRMICXKN.mjs";
+import {
+  VIEW_FILE_GET_SERVICE,
+  VIEW_WORKSPACE_TAB_ID,
+  workspaceUiFingerprint
+} from "./chunk-32GD5LL6.mjs";
+
+// packages/view-plugin-content-browser/src/ui/mount.tsx
+import { createRoot } from "react-dom/client";
+
+// packages/view-plugin-content-browser/src/ui/ContentBrowserPanel.tsx
+import {
+  ArrowDownWideNarrow,
+  ArrowUpDown,
+  ArrowUpNarrowWide,
+  CaseSensitive,
+  ChevronDown as ChevronDown2,
+  Clock,
+  Copy,
+  Filter,
+  Folder as Folder3,
+  FolderOpen as FolderOpen2,
+  Grid2X2,
+  HardDrive,
+  List,
+  Settings2,
+  Shapes,
+  Star,
+  StarOff,
+  Table2
+} from "lucide-react";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect4,
+  useMemo,
+  useRef as useRef3,
+  useState as useState6
+} from "react";
+
+// packages/view-plugin-content-browser/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-content-browser/src/ui/format.ts
+var ALL_FILTER_FAMILIES = [
+  "dir",
+  "scene",
+  "pack",
+  "meta",
+  "model",
+  "image",
+  "audio",
+  "font",
+  "ui",
+  "code",
+  "config",
+  "doc",
+  "data"
+];
+var FILTERABLE_ASSET_KINDS = [
+  "plugin",
+  "mesh",
+  "material",
+  "texture",
+  "equirect",
+  "cube-texture",
+  "animation-clip",
+  "skeleton",
+  "audio",
+  "font",
+  "ui"
+];
+var SOURCE_TEXT_FAMILIES = /* @__PURE__ */ new Set([
+  "code",
+  "config",
+  "doc",
+  "data",
+  "pack",
+  "meta",
+  "scene"
+]);
+var SOURCE_VIEW_EXTENSIONS = /* @__PURE__ */ new Set(["ts", "tsx", "js", "jsx", "mjs", "cjs", "json"]);
+function dirOfPath(path) {
+  const index = path.lastIndexOf("/");
+  return index < 0 ? "" : path.slice(0, index);
+}
+function normalizePathInput(raw) {
+  return raw.trim().replace(/\\/g, "/").replace(/\/+/g, "/").replace(/^\/+|\/+$/g, "");
+}
+function viewItemKey(item) {
+  return item.type === "asset" ? item.guid : item.path;
+}
+function isResourceGroup(assetCount) {
+  return assetCount > 1;
+}
+function fileFamilyOf(name) {
+  const lower = name.toLowerCase();
+  if (lower.endsWith(".meta.json")) return "meta";
+  if (lower.endsWith(".pack.ts")) return "pack";
+  if (lower.endsWith(".pack.json")) return lower.includes("scene") ? "scene" : "pack";
+  if (lower.endsWith(".scene.json") || lower === "scene.json") return "scene";
+  if (lower.endsWith(".colliders.json")) return "data";
+  const ext = lower.split(".").pop() ?? "";
+  if (["html", "css", "ts", "tsx", "js", "jsx", "mjs", "cjs", "py"].includes(ext)) return "code";
+  if (["json", "lock"].includes(ext)) return "config";
+  if (["md", "markdown", "txt"].includes(ext)) return "doc";
+  if (["png", "jpg", "jpeg", "webp", "gif", "svg", "ico", "hdr"].includes(ext)) return "image";
+  if (["mp3", "wav", "ogg", "flac", "aac", "m4a", "opus"].includes(ext)) return "audio";
+  if (["glb", "gltf", "fbx"].includes(ext)) return "model";
+  if (["ttf", "otf", "woff", "woff2"].includes(ext)) return "font";
+  return "other";
+}
+function fileFamilyOfWithAssets(name, assets) {
+  if (name.toLowerCase().endsWith(".pack.ts")) return "pack";
+  const byName = fileFamilyOf(name);
+  if (byName === "pack" && assets.some((asset2) => asset2.kind === "scene")) return "scene";
+  return byName;
+}
+function isSourceViewableFileName(name) {
+  const lower = name.toLowerCase();
+  if (lower.endsWith(".pack.json") || lower.endsWith(".pack.ts")) return true;
+  const ext = lower.includes(".") ? lower.slice(lower.lastIndexOf(".") + 1) : lower;
+  return SOURCE_VIEW_EXTENSIONS.has(ext);
+}
+function fileSupportsDualPreview(file2) {
+  if (file2.assets.length === 0) return false;
+  return SOURCE_TEXT_FAMILIES.has(file2.family) || isSourceViewableFileName(file2.name);
+}
+function resolveDualPreviewFile(item, diskFiles) {
+  if (item.type === "file") return item;
+  if (item.type === "asset") return diskFiles.find((file2) => file2.path === item.packPath);
+  return void 0;
+}
+function formatBytes(bytes) {
+  if (bytes === void 0 || bytes <= 0) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function formatDate(ms) {
+  if (!ms) return "";
+  try {
+    return new Date(ms).toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+  } catch {
+    return "";
+  }
+}
+function compareItems(a, b, key, dir) {
+  const sign = dir === "desc" ? -1 : 1;
+  if (key === "kind") {
+    return sign * itemKind(a).localeCompare(itemKind(b)) || sign * a.name.localeCompare(b.name);
+  }
+  if (key === "packModifiedAt") {
+    return sign * (itemModified(a) - itemModified(b) || a.name.localeCompare(b.name));
+  }
+  if (key === "estimatedSize") {
+    return sign * (itemSize(a) - itemSize(b) || a.name.localeCompare(b.name));
+  }
+  return sign * a.name.localeCompare(b.name);
+}
+function itemKind(item) {
+  if (item.type === "folder") return "folder";
+  if (item.type === "file") return item.kindLabel || item.family;
+  return item.kind;
+}
+function itemModified(item) {
+  if (item.type === "asset") return item.packModifiedAt ?? 0;
+  if (item.type === "file") return item.packModifiedAt ?? 0;
+  return 0;
+}
+function itemSize(item) {
+  if (item.type === "asset") return item.estimatedSize ?? 0;
+  if (item.type === "file") return item.estimatedSize ?? 0;
+  return 0;
+}
+function matchesSearch(item, query) {
+  if (!query) return true;
+  if (item.type === "folder") {
+    return item.name.toLowerCase().includes(query) || item.path.toLowerCase().includes(query);
+  }
+  if (item.type === "file") {
+    return item.name.toLowerCase().includes(query) || item.path.toLowerCase().includes(query) || item.assets.some((asset2) => asset2.name.toLowerCase().includes(query) || asset2.kind.toLowerCase().includes(query));
+  }
+  return item.name.toLowerCase().includes(query) || item.guid.toLowerCase().startsWith(query) || item.kind.toLowerCase().includes(query);
+}
+
+// packages/view-plugin-content-browser/src/ui/icons.ts
+import {
+  Bone,
+  Box,
+  Braces,
+  Clapperboard,
+  Database,
+  File,
+  FileCode2,
+  FileText,
+  Film,
+  Folder,
+  FolderOpen,
+  Globe,
+  Image,
+  Layers,
+  Music,
+  Package,
+  Paintbrush,
+  Puzzle,
+  Type
+} from "lucide-react";
+var FAMILY_ICONS = {
+  dir: Folder,
+  scene: Clapperboard,
+  pack: Package,
+  meta: Layers,
+  model: Box,
+  image: Image,
+  audio: Music,
+  font: Type,
+  ui: Paintbrush,
+  code: FileCode2,
+  config: Braces,
+  doc: FileText,
+  data: Database,
+  other: File
+};
+var KIND_ICONS = {
+  plugin: Puzzle,
+  mesh: Box,
+  material: Paintbrush,
+  texture: Image,
+  image: Image,
+  equirect: Globe,
+  "cube-texture": Globe,
+  sampler: Layers,
+  "animation-clip": Film,
+  "animation-graph": Film,
+  skeleton: Bone,
+  skin: Bone,
+  scene: Clapperboard,
+  ui: Paintbrush,
+  audio: Music,
+  font: Type,
+  video: Film,
+  tileset: Layers,
+  "particle-effect": Layers,
+  "render-pipeline": Layers
+};
+function familyIcon(family) {
+  return FAMILY_ICONS[family] ?? File;
+}
+function kindIcon(kind) {
+  return KIND_ICONS[kind] ?? Package;
+}
+function itemIcon(item, folderOpen = false) {
+  if (item.type === "folder") return folderOpen ? FolderOpen : Folder;
+  if (item.type === "file") return familyIcon(item.family);
+  return kindIcon(item.kind);
+}
+
+// packages/view-plugin-content-browser/src/ui/derived-view.ts
+function translatedOrFallback(t2, key, fallbackKey) {
+  const label = t2(key);
+  return label === key ? t2(fallbackKey) : label;
+}
+function assetKindLabel(kind, t2) {
+  return translatedOrFallback(
+    t2,
+    `contentBrowser.assetKinds.${kind}`,
+    "contentBrowser.assetKinds.default"
+  );
+}
+function buildFamilyFilters(activeFamilies, t2) {
+  return ALL_FILTER_FAMILIES.map((family) => ({
+    id: `family:${family}`,
+    family,
+    label: translatedOrFallback(
+      t2,
+      family === "dir" ? "contentBrowser.fileKinds.dir" : `contentBrowser.fileKinds.${family}`,
+      "contentBrowser.fileKinds.other"
+    ),
+    active: activeFamilies.has(family)
+  }));
+}
+function buildKindFilters(activeKinds, t2) {
+  return FILTERABLE_ASSET_KINDS.map((kind) => ({
+    id: `kind:${kind}`,
+    kind,
+    label: assetKindLabel(kind, t2),
+    active: activeKinds.has(kind)
+  }));
+}
+function toggleFilterId(filterId, activeFamilies, activeKinds) {
+  const [scope, value] = filterId.split(":");
+  const families = new Set(activeFamilies);
+  const kinds = new Set(activeKinds);
+  if (scope === "kind" && value) {
+    if (kinds.has(value)) kinds.delete(value);
+    else kinds.add(value);
+    return { families, kinds };
+  }
+  const family = value;
+  if (families.has(family)) families.delete(family);
+  else families.add(family);
+  return { families, kinds };
+}
+function fileKindLabel(file2, t2) {
+  return file2.isAssetPackage ? t2("contentBrowser.fileKinds.assetPackage") : translatedOrFallback(
+    t2,
+    `contentBrowser.fileKinds.${file2.family}`,
+    "contentBrowser.fileKinds.other"
+  );
+}
+function deriveViewItems({
+  folders,
+  files,
+  currentPath,
+  searchQuery,
+  activeFamilies,
+  activeKinds,
+  sortState,
+  expandedPacks,
+  withKindLabel
+}) {
+  const query = searchQuery.trim().toLowerCase();
+  const searchActive = query !== "";
+  const kindFilterActive = activeKinds.size > 0;
+  const labeledFiles = files.map(withKindLabel);
+  const foldersInPath = folders.filter((folder) => dirOfPath(folder.path) === currentPath).filter(() => activeFamilies.size === 0 || activeFamilies.has("dir")).filter((folder) => {
+    if (!query) return true;
+    const prefix = `${folder.path}/`;
+    return matchesSearch(folder, query) || labeledFiles.some((file2) => file2.path.startsWith(prefix) && matchesSearch(file2, query));
+  }).toSorted((a, b) => compareItems(a, b, "name", sortState.dir));
+  const filesInPath = labeledFiles.filter((file2) => dirOfPath(file2.path) === currentPath).filter((file2) => activeFamilies.size === 0 || activeFamilies.has(file2.family)).filter((file2) => !query || matchesSearch(file2, query)).toSorted((a, b) => compareItems(a, b, sortState.key, sortState.dir));
+  if (kindFilterActive) {
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const file2 of filesInPath) {
+      for (const asset2 of file2.assets) {
+        if (seen.has(asset2.guid) || !activeKinds.has(asset2.kind)) continue;
+        if (query && !matchesSearch(asset2, query) && !file2.name.toLowerCase().includes(query)) continue;
+        seen.add(asset2.guid);
+        out.push(asset2);
+      }
+    }
+    out.sort((a, b) => a.name.localeCompare(b.name));
+    return { foldersInPath: [], filesInPath, viewItems: out, searchActive, kindFilterActive };
+  }
+  const items = [...foldersInPath];
+  for (const file2 of filesInPath) {
+    if (file2.assets.length === 0) {
+      items.push(file2);
+      continue;
+    }
+    if (file2.assets.length === 1) {
+      items.push(...file2.assets);
+      continue;
+    }
+    items.push(file2);
+    if (searchActive || expandedPacks.has(file2.path)) items.push(...file2.assets);
+  }
+  return { foldersInPath, filesInPath, viewItems: items, searchActive, kindFilterActive };
+}
+function nextSortState(current, key) {
+  if (current.key === key) return { key, dir: current.dir === "asc" ? "desc" : "asc" };
+  return { key, dir: "asc" };
+}
+function setSortDir(current, dir) {
+  return current.dir === dir ? current : { ...current, dir };
+}
+
+// packages/view-plugin-content-browser/src/ui/CBDetailsList.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var COLUMNS = [
+  { key: "name", labelKey: "contentBrowser.details.colName", track: "minmax(160px, 1fr)" },
+  { key: "kind", labelKey: "contentBrowser.details.colType", track: "160px" },
+  { key: "estimatedSize", labelKey: "contentBrowser.details.colSize", track: "90px" },
+  { key: "packModifiedAt", labelKey: "contentBrowser.details.colModified", track: "130px" }
+];
+function CBDetailsList({
+  items,
+  selectedIds,
+  openingKeys,
+  sortState,
+  onSort,
+  onSelect,
+  onActivate,
+  onContextMenu,
+  onBlankClick
+}) {
+  const { t: t2 } = useTranslation();
+  const gridStyle = { "--cb-details-cols": COLUMNS.map((column) => column.track).join(" ") };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "cb-details-view cb-details-column",
+      role: "grid",
+      style: gridStyle,
+      onClick: (event) => {
+        if (event.target === event.currentTarget) onBlankClick();
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "cb-details-header", role: "row", children: COLUMNS.map((column) => {
+          const active = sortState.key === column.key;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "columnheader",
+              className: `cb-details-cell cb-details-th${active ? " active" : ""}`,
+              "data-active": active ? "true" : "false",
+              "aria-sort": active ? sortState.dir === "asc" ? "ascending" : "descending" : "none",
+              onClick: () => onSort(column.key),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: t2(column.labelKey) }),
+                active ? /* @__PURE__ */ jsx("span", { className: "cb-details-sort-arrow", "aria-hidden": "true", children: sortState.dir === "asc" ? "\u25B2" : "\u25BC" }) : null
+              ]
+            },
+            column.key
+          );
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "cb-details-body", children: items.map((item) => {
+          const key = viewItemKey(item);
+          const selected = selectedIds.has(key);
+          const opening = openingKeys?.has(key) ?? false;
+          const Icon = itemIcon(item);
+          const typeLabel = item.type === "folder" ? t2("contentBrowser.details.typeFolder") : item.type === "file" ? item.kindLabel || fileKindLabel(item, t2) : assetKindLabel(item.kind, t2);
+          const sizeLabel = item.type === "folder" ? t2("contentBrowser.details.itemCount", { count: item.childCount }) : formatBytes(item.type === "file" ? item.estimatedSize : item.estimatedSize);
+          const modifiedLabel = item.type === "folder" ? "" : formatDate(item.packModifiedAt);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "row",
+              tabIndex: 0,
+              className: `cb-details-row${selected ? " sel" : ""}${opening ? " is-busy" : ""}`,
+              "data-action": CONTENT_BROWSER_ACTIONS.select,
+              "aria-selected": selected,
+              "aria-busy": opening || void 0,
+              onClick: (event) => onSelect(item, event),
+              onDoubleClick: () => onActivate(item),
+              onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  onActivate(item);
+                } else if (event.key === " ") {
+                  event.preventDefault();
+                  onSelect(item, event);
+                }
+              },
+              onContextMenu: (event) => onContextMenu(event, item),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "cb-details-cell cb-details-name", role: "gridcell", children: [
+                  /* @__PURE__ */ jsx("span", { className: `cb-details-icon${item.type === "folder" ? " cb-folder-icon" : ""}`, children: /* @__PURE__ */ jsx(Icon, { size: 16 }) }),
+                  /* @__PURE__ */ jsx("span", { className: "cb-details-label", children: item.name }),
+                  opening ? /* @__PURE__ */ jsx(Spinner, { className: "cb-item-busy-inline", label: t2("contentBrowser.opening") }) : null
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "cb-details-cell cb-details-type", role: "gridcell", children: typeLabel }),
+                /* @__PURE__ */ jsx("div", { className: "cb-details-cell cb-details-size", role: "gridcell", children: sizeLabel }),
+                /* @__PURE__ */ jsx("div", { className: "cb-details-cell cb-details-modified", role: "gridcell", children: modifiedLabel })
+              ]
+            },
+            key
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// packages/view-plugin-content-browser/src/ui/CBGrid.tsx
+import { ChevronDown } from "lucide-react";
+import {
+  useCallback as useCallback2,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function CBGrid({
+  items,
+  thumbnailSize,
+  layout,
+  searchActive,
+  expandedPacks,
+  selectedIds,
+  openingKeys,
+  onSelect,
+  onActivate,
+  onContextMenu,
+  onTogglePackExpansion,
+  onBlankClick
+}) {
+  const { t: t2 } = useTranslation();
+  const rootRef = useRef(null);
+  const [backdrops, setBackdrops] = useState([]);
+  const grouping = !searchActive;
+  const measureGroups = useCallback2(() => {
+    const container = rootRef.current;
+    if (!container) {
+      setBackdrops((prev) => prev.length ? [] : prev);
+      return;
+    }
+    const members = container.querySelectorAll("[data-cb-group]");
+    if (members.length === 0) {
+      setBackdrops((prev) => prev.length ? [] : prev);
+      return;
+    }
+    const byGroup = /* @__PURE__ */ new Map();
+    members.forEach((el) => {
+      const key = el.dataset.cbGroup;
+      if (!key) return;
+      const list = byGroup.get(key);
+      if (list) list.push(el);
+      else byGroup.set(key, [el]);
+    });
+    const pad = layout === "list" ? 2 : 4;
+    const radius = 8;
+    const containerRight = container.clientWidth;
+    const next = [];
+    for (const [key, els] of byGroup) {
+      const rows = [];
+      for (const el of els) {
+        const top = el.offsetTop;
+        const row = rows.find((entry) => Math.abs(entry.top - top) <= 4);
+        if (row) row.els.push(el);
+        else rows.push({ top, els: [el] });
+      }
+      const multiRow = rows.length > 1;
+      rows.forEach((row, idx) => {
+        let left = Infinity;
+        let right = -Infinity;
+        let top = Infinity;
+        let bottom = -Infinity;
+        for (const el of row.els) {
+          left = Math.min(left, el.offsetLeft);
+          right = Math.max(right, el.offsetLeft + el.offsetWidth);
+          top = Math.min(top, el.offsetTop);
+          bottom = Math.max(bottom, el.offsetTop + el.offsetHeight);
+        }
+        const extendLeft = multiRow && idx > 0;
+        const extendRight = multiRow && idx < rows.length - 1;
+        const x0 = extendLeft ? 0 : left - pad;
+        const x1 = extendRight ? containerRight : right + pad;
+        next.push({
+          key: `${key}#${idx}`,
+          left: x0,
+          top: top - pad,
+          width: x1 - x0,
+          height: bottom - top + pad * 2,
+          radius: `${extendLeft ? 0 : radius}px ${extendRight ? 0 : radius}px ${extendRight ? 0 : radius}px ${extendLeft ? 0 : radius}px`
+        });
+      });
+    }
+    setBackdrops(next);
+  }, [layout]);
+  useLayoutEffect(() => {
+    measureGroups();
+    const container = rootRef.current;
+    if (!container) return;
+    let raf = 0;
+    const schedule = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(measureGroups);
+    };
+    const observer = new ResizeObserver(schedule);
+    observer.observe(container);
+    container.querySelectorAll("[data-cb-group]").forEach((el) => observer.observe(el));
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+    };
+  }, [measureGroups, items, expandedPacks, thumbnailSize, searchActive]);
+  const renderCard = (item, expanded = false, groupKey) => {
+    const key = viewItemKey(item);
+    const selected = selectedIds.has(key);
+    const opening = openingKeys?.has(key) ?? false;
+    const Icon = itemIcon(item);
+    const isFolder = item.type === "folder";
+    const isFile = item.type === "file";
+    const groupCount = grouping && isFile && item.assets.length >= 2 ? item.assets.length : 0;
+    const stacked = groupCount >= 2;
+    const meta = isFolder ? null : isFile ? item.kindLabel : assetKindLabel(item.kind, t2);
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        className: `cb-grid-item cb-fe-card${isFolder ? " cb-grid-folder" : ""}${isFile ? " cb-file-card" : ""}${selected ? " sel" : ""}${expanded ? " cb-pack-expanded" : ""}${stacked ? " cb-group-card" : ""}${groupKey ? " cb-group-member" : ""}${opening ? " is-busy" : ""}`,
+        "data-action": CONTENT_BROWSER_ACTIONS.select,
+        "data-cb-group": groupKey,
+        "aria-selected": selected,
+        "aria-busy": opening || void 0,
+        onClick: (event) => onSelect(item, event),
+        onDoubleClick: () => onActivate(item),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            onActivate(item);
+          } else if (event.key === " ") {
+            event.preventDefault();
+            onSelect(item, event);
+          }
+        },
+        onContextMenu: (event) => onContextMenu(event, item),
+        children: [
+          /* @__PURE__ */ jsxs2("span", { className: `cb-grid-thumb cb-fe-thumb${isFile ? " cb-file-thumb" : ""}${isFolder ? " cb-folder-thumb" : ""}`, children: [
+            /* @__PURE__ */ jsx2("span", { className: isFolder ? "cb-folder-icon" : "cb-grid-icon", children: /* @__PURE__ */ jsx2(Icon, {}) }),
+            groupCount >= 1 ? /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                type: "button",
+                className: `cb-group-badge${expanded ? " open" : ""}`,
+                "data-action": CONTENT_BROWSER_ACTIONS.togglePackExpansion,
+                title: t2("contentBrowser.menu.expandSubAssets"),
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onSelect(item, event);
+                  onTogglePackExpansion(item.path);
+                },
+                children: [
+                  /* @__PURE__ */ jsx2("span", { className: "cb-group-badge-num", children: groupCount }),
+                  /* @__PURE__ */ jsx2(ChevronDown, { size: 11 })
+                ]
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { className: `cb-grid-label cb-fe-label${meta ? " has-kind" : ""}`, children: [
+            /* @__PURE__ */ jsx2("span", { className: "cb-fe-name", children: item.name }),
+            meta ? /* @__PURE__ */ jsx2("span", { className: "cb-card-meta", children: meta }) : null
+          ] }),
+          opening ? layout === "list" ? /* @__PURE__ */ jsx2(Spinner, { className: "cb-item-busy-inline", label: t2("contentBrowser.opening") }) : /* @__PURE__ */ jsx2("span", { className: "cb-item-busy-veil", children: /* @__PURE__ */ jsx2(Spinner, { label: t2("contentBrowser.opening") }) }) : null
+        ]
+      },
+      key
+    );
+  };
+  const nodes = [];
+  for (let index = 0; index < items.length; ) {
+    const item = items[index];
+    if (!item) {
+      index += 1;
+      continue;
+    }
+    if (grouping && item.type === "file" && item.assets.length >= 2 && expandedPacks.has(item.path)) {
+      const guids = new Set(item.assets.map((asset2) => asset2.guid));
+      nodes.push(renderCard(item, true, item.path));
+      let nextIndex = index + 1;
+      for (; nextIndex < items.length; nextIndex += 1) {
+        const next = items[nextIndex];
+        if (!next || next.type !== "asset" || !guids.has(next.guid)) break;
+        nodes.push(renderCard(next, false, item.path));
+      }
+      index = nextIndex;
+      continue;
+    }
+    nodes.push(renderCard(item));
+    index += 1;
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: rootRef,
+      className: `cb-grid-view cb-fe-grid cb-layout-${layout}`,
+      style: { "--cb-thumb": `${thumbnailSize}px` },
+      onClick: (event) => {
+        if (event.target === event.currentTarget) onBlankClick();
+      },
+      children: [
+        backdrops.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "cb-group-backdrops", "aria-hidden": "true", children: backdrops.map((backdrop) => /* @__PURE__ */ jsx2("div", { className: "cb-group-backdrop", style: { left: backdrop.left, top: backdrop.top, width: backdrop.width, height: backdrop.height, borderRadius: backdrop.radius } }, backdrop.key)) }) : null,
+        nodes
+      ]
+    }
+  );
+}
+
+// packages/view-plugin-content-browser/src/ui/CBNavigationBar.tsx
+import { ChevronLeft, ChevronRight, Folder as Folder2, RefreshCw } from "lucide-react";
+import { useCallback as useCallback3, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function immediateChildren(allDirs, path) {
+  const prefix = path ? `${path}/` : "";
+  const depth = path ? path.split("/").length : 0;
+  const out = [];
+  for (const dir of allDirs) {
+    if (path && dir === path) continue;
+    if (!dir.startsWith(prefix)) continue;
+    if (dir.split("/").length !== depth + 1) continue;
+    out.push({ name: dir.split("/").pop() ?? dir, path: dir });
+  }
+  return out.sort((a, b) => a.name.localeCompare(b.name));
+}
+function LevelChevron({
+  levelPath,
+  activeNextSeg,
+  allDirs,
+  onNavigate,
+  label
+}) {
+  const children = immediateChildren(allDirs, levelPath);
+  if (children.length === 0) {
+    return /* @__PURE__ */ jsx3("span", { className: "cb-crumb-chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(ChevronRight, { size: 12 }) });
+  }
+  return /* @__PURE__ */ jsx3("span", { className: "cb-crumb-chevron", onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx3(
+    MenuDropdown,
+    {
+      label,
+      align: "start",
+      className: "cb-crumb-menu",
+      trigger: /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "cb-crumb-chevron-btn",
+          "aria-label": label,
+          title: label,
+          onClick: (event) => event.stopPropagation(),
+          children: /* @__PURE__ */ jsx3(ChevronRight, { size: 12 })
+        }
+      ),
+      items: children.map((child) => ({
+        id: child.path,
+        label: child.name,
+        icon: /* @__PURE__ */ jsx3(Folder2, { size: 14 }),
+        buttonProps: child.name === activeNextSeg ? { "data-active": "" } : void 0,
+        onSelect: () => onNavigate(child.path)
+      }))
+    }
+  ) });
+}
+function CBNavigationBar({
+  currentPath,
+  projectLabel,
+  allDirs,
+  canGoBack,
+  canGoForward,
+  refreshDisabled,
+  onBack,
+  onForward,
+  onRefresh,
+  onNavigate
+}) {
+  const { t: t2 } = useTranslation();
+  const segments = currentPath ? currentPath.split("/").filter(Boolean) : [];
+  const [editing, setEditing] = useState2(false);
+  const [draft, setDraft] = useState2("");
+  const beginEdit = useCallback3(() => {
+    setDraft(currentPath);
+    setEditing(true);
+  }, [currentPath]);
+  const commit = useCallback3(() => {
+    onNavigate(normalizePathInput(draft));
+    setEditing(false);
+  }, [draft, onNavigate]);
+  const onInputKeyDown = useCallback3((event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commit();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setEditing(false);
+    }
+  }, [commit]);
+  const onAddressKeyDown = useCallback3((event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      beginEdit();
+    }
+  }, [beginEdit]);
+  const stopAndNavigate = (event, path) => {
+    event.stopPropagation();
+    onNavigate(path);
+  };
+  return /* @__PURE__ */ jsxs3(Toolbar, { className: "cb-navigation-bar", children: [
+    /* @__PURE__ */ jsx3(
+      IconButton,
+      {
+        size: "compact",
+        variant: "quiet",
+        label: t2("contentBrowser.back"),
+        icon: /* @__PURE__ */ jsx3(ChevronLeft, { size: 14 }),
+        "data-action": CONTENT_BROWSER_ACTIONS.navigateBack,
+        disabled: !canGoBack,
+        onClick: onBack
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      IconButton,
+      {
+        size: "compact",
+        variant: "quiet",
+        label: t2("contentBrowser.forward"),
+        icon: /* @__PURE__ */ jsx3(ChevronRight, { size: 14 }),
+        "data-action": CONTENT_BROWSER_ACTIONS.navigateForward,
+        disabled: !canGoForward,
+        onClick: onForward
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      IconButton,
+      {
+        size: "compact",
+        variant: "quiet",
+        label: t2("contentBrowser.refresh"),
+        disabled: refreshDisabled,
+        icon: /* @__PURE__ */ jsx3(RefreshCw, { size: 13 }),
+        "data-action": CONTENT_BROWSER_ACTIONS.refresh,
+        onClick: onRefresh
+      }
+    ),
+    /* @__PURE__ */ jsx3("div", { className: "cb-address-slot", children: editing ? /* @__PURE__ */ jsx3(
+      "input",
+      {
+        autoFocus: true,
+        spellCheck: false,
+        className: "cb-address-input",
+        value: draft,
+        placeholder: t2("contentBrowser.actions.editPathPlaceholder"),
+        onChange: (event) => setDraft(event.target.value),
+        onKeyDown: onInputKeyDown,
+        onBlur: () => setEditing(false),
+        onFocus: (event) => event.currentTarget.select()
+      }
+    ) : /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "cb-address",
+        role: "button",
+        tabIndex: 0,
+        title: t2("contentBrowser.actions.editPath"),
+        onClick: beginEdit,
+        onKeyDown: onAddressKeyDown,
+        children: /* @__PURE__ */ jsxs3("div", { className: "cb-address-crumb", children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: segments.length ? "cb-crumb-item" : "cb-crumb-item cb-crumb-current",
+              "aria-current": segments.length === 0 ? "page" : void 0,
+              "data-action": CONTENT_BROWSER_ACTIONS.navigate,
+              onClick: (event) => stopAndNavigate(event, ""),
+              children: projectLabel
+            }
+          ),
+          segments.map((segment, index) => {
+            const path = segments.slice(0, index + 1).join("/");
+            const parentPath = segments.slice(0, index).join("/");
+            const parentLabel = index === 0 ? projectLabel : segments[index - 1] ?? projectLabel;
+            const isCurrent = index === segments.length - 1;
+            return /* @__PURE__ */ jsxs3("span", { className: "cb-crumb-segment", children: [
+              /* @__PURE__ */ jsx3(
+                LevelChevron,
+                {
+                  levelPath: parentPath,
+                  activeNextSeg: segment,
+                  allDirs,
+                  onNavigate,
+                  label: t2("contentBrowser.actions.openSubfolders", { name: parentLabel })
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: isCurrent ? "cb-crumb-item cb-crumb-current" : "cb-crumb-item",
+                  "aria-current": isCurrent ? "page" : void 0,
+                  "data-action": CONTENT_BROWSER_ACTIONS.navigate,
+                  onClick: (event) => stopAndNavigate(event, path),
+                  children: segment
+                }
+              )
+            ] }, path);
+          })
+        ] })
+      }
+    ) })
+  ] });
+}
+
+// packages/view-plugin-content-browser/src/ui/CBPreviewPanel.tsx
+import { X } from "lucide-react";
+import { useEffect as useEffect3, useState as useState5 } from "react";
+
+// packages/view-plugin-content-browser/src/ui/preview/media-preview-policy.ts
+var MAX_BINARY_PREVIEW_BYTES = 10 * 1024 * 1024;
+function isBrowserMediaPreviewKind(kind) {
+  return kind === "image" || kind === "audio" || kind === "video";
+}
+function isFontPreviewInfo(info) {
+  return info.kind === "binary" && info.mime.startsWith("font/");
+}
+function familySuggestsMediaPreview(family) {
+  return family === "image" || family === "audio" || family === "font";
+}
+function familySuggestsEnginePreview(family) {
+  return family === "model";
+}
+function svgMarkupSrc(content) {
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(content)}`;
+}
+function mediaPreviewBlockedReason(info) {
+  if (info.dataUrl || info.kind === "image" && info.content) return null;
+  if (info.size > MAX_BINARY_PREVIEW_BYTES) return "too-large";
+  return "unavailable";
+}
+
+// packages/view-plugin-content-browser/src/ui/preview/MediaPreview.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function MediaPreview({
+  info,
+  fileName,
+  t: t2
+}) {
+  if (isFontPreviewInfo(info)) {
+    return /* @__PURE__ */ jsx4(FontPreview, { info, sample: fileName, t: t2 });
+  }
+  if (!isBrowserMediaPreviewKind(info.kind)) {
+    return /* @__PURE__ */ jsx4("div", { className: "cb-preview-note", children: t2("contentBrowser.preview.noMediaPreview") });
+  }
+  const blocked = mediaPreviewBlockedReason(info);
+  if (blocked === "too-large") {
+    return /* @__PURE__ */ jsx4("div", { className: "cb-preview-note", children: t2("contentBrowser.preview.previewTooLarge") });
+  }
+  if (blocked === "unavailable") {
+    return /* @__PURE__ */ jsx4("div", { className: "cb-preview-note", children: t2("contentBrowser.preview.noMediaPreview") });
+  }
+  const src = info.dataUrl ?? (info.content ? svgMarkupSrc(info.content) : void 0);
+  if (!src) {
+    return /* @__PURE__ */ jsx4("div", { className: "cb-preview-note", children: t2("contentBrowser.preview.noMediaPreview") });
+  }
+  if (info.kind === "audio") {
+    return /* @__PURE__ */ jsx4("div", { className: "cb-preview-media", children: /* @__PURE__ */ jsx4("audio", { className: "cb-preview-audio", controls: true, preload: "metadata", src, "aria-label": fileName }) });
+  }
+  if (info.kind === "video") {
+    return /* @__PURE__ */ jsx4("div", { className: "cb-preview-media", children: /* @__PURE__ */ jsx4("video", { className: "cb-preview-video", controls: true, preload: "metadata", src, "aria-label": fileName }) });
+  }
+  return /* @__PURE__ */ jsx4("div", { className: "cb-preview-media", children: /* @__PURE__ */ jsx4("img", { className: "cb-preview-image", src, alt: fileName, decoding: "async" }) });
+}
+function FontPreview({
+  info,
+  sample,
+  t: t2
+}) {
+  const blocked = mediaPreviewBlockedReason(info);
+  if (blocked === "too-large") {
+    return /* @__PURE__ */ jsx4("div", { className: "cb-preview-note", children: t2("contentBrowser.preview.previewTooLarge") });
+  }
+  if (!info.dataUrl) {
+    return /* @__PURE__ */ jsx4("div", { className: "cb-preview-note", children: t2("contentBrowser.preview.noMediaPreview") });
+  }
+  const fontId = `cb-preview-font-${info.path.replace(/[^\w-]+/g, "-")}`;
+  return /* @__PURE__ */ jsxs4("div", { className: "cb-preview-media cb-preview-font", children: [
+    /* @__PURE__ */ jsx4("style", { children: `@font-face{font-family:${fontId};src:url(${info.dataUrl});font-display:swap;}` }),
+    /* @__PURE__ */ jsx4("p", { className: "cb-preview-font-sample", style: { fontFamily: fontId }, children: t2("contentBrowser.preview.fontSample") }),
+    /* @__PURE__ */ jsx4("p", { className: "cb-preview-font-meta", children: sample })
+  ] });
+}
+
+// packages/view-plugin-content-browser/src/ui/preview/CodePreview.tsx
+import { useEffect, useState as useState3 } from "react";
+
+// packages/view-plugin-content-browser/src/ui/preview/ext-language.ts
+var EXT_LANGUAGE = {
+  ts: { lang: "typescript", label: "TypeScript" },
+  mts: { lang: "typescript", label: "TypeScript" },
+  cts: { lang: "typescript", label: "TypeScript" },
+  tsx: { lang: "tsx", label: "TSX" },
+  js: { lang: "javascript", label: "JavaScript" },
+  mjs: { lang: "javascript", label: "JavaScript" },
+  cjs: { lang: "javascript", label: "JavaScript" },
+  jsx: { lang: "jsx", label: "JSX" },
+  json: { lang: "json", label: "JSON" },
+  jsonc: { lang: "jsonc", label: "JSONC" },
+  json5: { lang: "json5", label: "JSON5" },
+  css: { lang: "css", label: "CSS" },
+  scss: { lang: "scss", label: "SCSS" },
+  html: { lang: "html", label: "HTML" },
+  htm: { lang: "html", label: "HTML" },
+  md: { lang: "markdown", label: "Markdown" },
+  markdown: { lang: "markdown", label: "Markdown" },
+  py: { lang: "python", label: "Python" },
+  rs: { lang: "rust", label: "Rust" },
+  wgsl: { lang: "wgsl", label: "WGSL" },
+  glsl: { lang: "glsl", label: "GLSL" },
+  vert: { lang: "glsl", label: "GLSL" },
+  frag: { lang: "glsl", label: "GLSL" },
+  sh: { lang: "shellscript", label: "Shell" },
+  bash: { lang: "shellscript", label: "Shell" },
+  zsh: { lang: "shellscript", label: "Shell" },
+  yaml: { lang: "yaml", label: "YAML" },
+  yml: { lang: "yaml", label: "YAML" },
+  toml: { lang: "toml", label: "TOML" },
+  xml: { lang: "xml", label: "XML" }
+};
+function resolveLanguage(ext) {
+  const key = ext.replace(/^\./, "").toLowerCase();
+  return EXT_LANGUAGE[key];
+}
+
+// packages/view-plugin-content-browser/src/ui/preview/code-preview-policy.ts
+var MAX_HIGHLIGHT_BYTES = 200 * 1024;
+var MAX_HIGHLIGHT_LINES = 5e3;
+function countLines(text) {
+  let lines = 1;
+  for (let index = 0; index < text.length; index += 1) {
+    if (text.charCodeAt(index) === 10) lines += 1;
+  }
+  return lines;
+}
+function decideHighlight(input) {
+  const { ext, size, content } = input;
+  if (content == null) return { highlight: false, reason: "no-content" };
+  const resolved = resolveLanguage(ext);
+  if (!resolved) return { highlight: false, reason: "unknown-language" };
+  const byteSize = Math.max(size, content.length);
+  if (byteSize > MAX_HIGHLIGHT_BYTES || countLines(content) > MAX_HIGHLIGHT_LINES) {
+    return { highlight: false, reason: "too-large" };
+  }
+  return { highlight: true, lang: resolved.lang, label: resolved.label };
+}
+
+// packages/view-plugin-content-browser/src/ui/preview/highlighter.ts
+var HIGHLIGHT_THEMES = {
+  light: "github-light-default",
+  dark: "github-dark-default"
+};
+var LANG_LOADERS = {
+  typescript: () => import("./typescript-PBKAS54P.mjs"),
+  tsx: () => import("./tsx-2E6WNX2E.mjs"),
+  javascript: () => import("./javascript-LN3OC7S2.mjs"),
+  jsx: () => import("./jsx-A7RDCLJO.mjs"),
+  json: () => import("./json-5CUGWTOP.mjs"),
+  jsonc: () => import("./jsonc-SWID6VOZ.mjs"),
+  json5: () => import("./json5-YZQI5VNO.mjs"),
+  css: () => import("./css-BKH4SVJG.mjs"),
+  scss: () => import("./scss-CFXRHUUW.mjs"),
+  html: () => import("./html-FRVIUV63.mjs"),
+  markdown: () => import("./markdown-QTCU5KP5.mjs"),
+  python: () => import("./python-LAZONBIB.mjs"),
+  rust: () => import("./rust-XWTPJFJO.mjs"),
+  wgsl: () => import("./wgsl-PS6QPRLZ.mjs"),
+  glsl: () => import("./glsl-UC3YWUD2.mjs"),
+  shellscript: () => import("./shellscript-OHO3LCVU.mjs"),
+  yaml: () => import("./yaml-P2SV4LOE.mjs"),
+  toml: () => import("./toml-IOHFZJ5B.mjs"),
+  xml: () => import("./xml-JECR2ACB.mjs")
+};
+var corePromise = null;
+var loadedLangs = /* @__PURE__ */ new Set();
+var inFlightLangs = /* @__PURE__ */ new Map();
+async function getCore() {
+  if (!corePromise) {
+    corePromise = (async () => {
+      const [coreMod, engineMod, darkTheme, lightTheme] = await Promise.all([
+        import("./core-564N45MO.mjs"),
+        import("./engine-javascript-PDVIGNGR.mjs"),
+        import("./github-dark-default-6HVTHEWF.mjs"),
+        import("./github-light-default-LAXRA6XL.mjs")
+      ]);
+      const core = await coreMod.createHighlighterCore({
+        themes: [darkTheme.default, lightTheme.default],
+        langs: [],
+        engine: engineMod.createJavaScriptRegexEngine({ forgiving: true })
+      });
+      return core;
+    })();
+  }
+  return corePromise;
+}
+async function ensureLanguage(core, lang) {
+  if (loadedLangs.has(lang)) return true;
+  const loader = LANG_LOADERS[lang];
+  if (!loader) return false;
+  let pending = inFlightLangs.get(lang);
+  if (!pending) {
+    pending = (async () => {
+      const mod = await loader();
+      await core.loadLanguage(mod.default);
+      loadedLangs.add(lang);
+      return true;
+    })();
+    inFlightLangs.set(lang, pending);
+  }
+  return pending;
+}
+async function highlightToHtml(code, lang, appearance = "dark") {
+  const core = await getCore();
+  const ready = await ensureLanguage(core, lang);
+  if (!ready) return null;
+  return core.codeToHtml(code, { lang, theme: HIGHLIGHT_THEMES[appearance] });
+}
+
+// packages/view-plugin-content-browser/src/ui/preview/CodePreview.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function readDocumentAppearance() {
+  if (typeof document === "undefined") return "light";
+  return document.documentElement.dataset.theme === "dark" ? "dark" : "light";
+}
+function useDocumentAppearance() {
+  const [appearance, setAppearance] = useState3(readDocumentAppearance);
+  useEffect(() => {
+    const root = document.documentElement;
+    const sync = () => setAppearance(readDocumentAppearance());
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => observer.disconnect();
+  }, []);
+  return appearance;
+}
+function CodePreview({
+  name,
+  ext,
+  size,
+  content
+}) {
+  const { t: t2 } = useTranslation();
+  const appearance = useDocumentAppearance();
+  const decision = decideHighlight({ ext, size, content });
+  const targetLang = decision.highlight ? decision.lang : null;
+  const label = resolveLanguage(ext)?.label ?? ext.toUpperCase();
+  const [html, setHtml] = useState3(null);
+  useEffect(() => {
+    setHtml(null);
+    if (targetLang == null) return;
+    let cancelled = false;
+    void highlightToHtml(content, targetLang, appearance).then((out) => {
+      if (!cancelled) setHtml(out);
+    }).catch(() => {
+      if (!cancelled) setHtml(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [appearance, content, targetLang]);
+  const skippedForSize = !decision.highlight && decision.reason === "too-large";
+  return /* @__PURE__ */ jsxs5("div", { className: "cb-preview-code", "data-lang": resolveLanguage(ext)?.lang ?? "text", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "cb-preview-code-head", children: [
+      /* @__PURE__ */ jsx5("span", { className: "cb-preview-code-badge", children: label }),
+      skippedForSize ? /* @__PURE__ */ jsx5("span", { className: "cb-preview-code-hint", children: t2("contentBrowser.preview.highlightSkipped") }) : null
+    ] }),
+    html != null ? /* @__PURE__ */ jsx5("div", { className: "cb-preview-code-shiki", dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx5("pre", { className: "cb-preview-code-plain", "aria-label": name, children: content })
+  ] });
+}
+
+// packages/view-plugin-content-browser/src/ui/preview/FileContentPreview.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function FileContentPreview({
+  file: file2,
+  previewInfo,
+  status,
+  pendingRemote,
+  t: t2
+}) {
+  if (status === "loading" || pendingRemote) {
+    return /* @__PURE__ */ jsx6("div", { className: "cb-preview-note", children: t2("contentBrowser.preview.loadingSource") });
+  }
+  if (previewInfo && (isBrowserMediaPreviewKind(previewInfo.kind) || isFontPreviewInfo(previewInfo))) {
+    return /* @__PURE__ */ jsx6(MediaPreview, { info: previewInfo, fileName: file2.name, t: t2 });
+  }
+  if (previewInfo?.kind === "model" || familySuggestsEnginePreview(file2.family)) {
+    return /* @__PURE__ */ jsx6("div", { className: "cb-preview-note", children: t2("contentBrowser.preview.previewEngineRequired") });
+  }
+  if (!previewInfo && familySuggestsMediaPreview(file2.family)) {
+    return /* @__PURE__ */ jsx6("div", { className: "cb-preview-note", children: t2("contentBrowser.preview.noMediaPreview") });
+  }
+  const content = previewInfo?.content ?? file2.sourcePreview;
+  if (content == null) {
+    return /* @__PURE__ */ jsx6("div", { className: "cb-preview-note", children: t2("contentBrowser.preview.noTextPreview") });
+  }
+  const dotIndex = file2.name.lastIndexOf(".");
+  const ext = dotIndex >= 0 ? file2.name.slice(dotIndex + 1).toLowerCase() : "";
+  if (resolveLanguage(ext)) {
+    return /* @__PURE__ */ jsx6(
+      CodePreview,
+      {
+        name: file2.name,
+        ext,
+        size: previewInfo?.size ?? file2.estimatedSize ?? 0,
+        content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6("pre", { className: "cb-preview-source", children: /* @__PURE__ */ jsx6("code", { children: content }) });
+}
+
+// packages/view-plugin-content-browser/src/ui/resize-handle.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function useLocalSize(key, initial, min, max) {
+  const clamp = (value2) => Math.min(max, Math.max(min, value2));
+  const [value, setValueRaw] = useState4(() => {
+    if (typeof window === "undefined") return initial;
+    try {
+      const raw = window.localStorage.getItem(key);
+      if (!raw) return initial;
+      const parsed = Number(raw);
+      return Number.isFinite(parsed) ? clamp(parsed) : initial;
+    } catch {
+      return initial;
+    }
+  });
+  useEffect2(() => {
+    try {
+      window.localStorage.setItem(key, String(value));
+    } catch {
+    }
+  }, [key, value]);
+  const setValue = (next) => {
+    setValueRaw((prev) => clamp(typeof next === "function" ? next(prev) : next));
+  };
+  return [value, setValue];
+}
+function ResizeHandle({
+  onDrag,
+  onDragEnd,
+  title
+}) {
+  const startRef = useRef2(null);
+  const onPointerDown = (event) => {
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    startRef.current = event.clientX;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  };
+  const onPointerMove = (event) => {
+    if (startRef.current == null) return;
+    const delta = event.clientX - startRef.current;
+    startRef.current = event.clientX;
+    onDrag(delta);
+  };
+  const finish = (event) => {
+    if (startRef.current == null) return;
+    startRef.current = null;
+    try {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    } catch {
+    }
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    onDragEnd?.();
+  };
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: "cb-resize-handle",
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: finish,
+      onPointerCancel: finish,
+      title,
+      role: "separator",
+      "aria-orientation": "vertical"
+    }
+  );
+}
+
+// packages/view-plugin-content-browser/src/ui/CBPreviewPanel.tsx
+import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function CBPreviewPanel({
+  previewItem,
+  foldersInPath,
+  diskFiles,
+  projectLabel,
+  readPreview,
+  onClose,
+  onDrag,
+  onDragEnd
+}) {
+  const { t: t2 } = useTranslation();
+  const [filePreviewMode, setFilePreviewMode] = useState5("assets");
+  const [previewInfo, setPreviewInfo] = useState5(null);
+  const [previewStatus, setPreviewStatus] = useState5("idle");
+  const dualPreviewFile = previewItem ? resolveDualPreviewFile(previewItem, diskFiles) : void 0;
+  const showDualPreview = dualPreviewFile !== void 0 && fileSupportsDualPreview(dualPreviewFile);
+  const previewKey = previewItem ? previewItem.type === "asset" ? previewItem.guid : previewItem.path : null;
+  const previewSourcePath = dualPreviewFile?.diskPath || dualPreviewFile?.path || null;
+  const dualAssetCount = dualPreviewFile?.assets.length ?? 0;
+  const dualSupportsPreview = dualPreviewFile ? fileSupportsDualPreview(dualPreviewFile) : false;
+  const embeddedSourcePreview = dualPreviewFile?.sourcePreview ?? null;
+  const canReadPreview = typeof readPreview === "function";
+  useEffect3(() => {
+    setFilePreviewMode("assets");
+  }, [previewKey]);
+  useEffect3(() => {
+    if (!previewSourcePath) {
+      setPreviewInfo(null);
+      setPreviewStatus("idle");
+      return;
+    }
+    const needsSource = dualAssetCount === 0 || dualSupportsPreview && filePreviewMode === "source";
+    if (!needsSource) {
+      setPreviewInfo(null);
+      setPreviewStatus("idle");
+      return;
+    }
+    if (embeddedSourcePreview != null && !canReadPreview) {
+      setPreviewInfo({
+        path: dualPreviewFile?.path ?? previewSourcePath,
+        kind: "text",
+        mime: "text/plain; charset=utf-8",
+        size: dualPreviewFile?.estimatedSize ?? embeddedSourcePreview.length,
+        mtime: dualPreviewFile?.packModifiedAt ?? 0,
+        content: embeddedSourcePreview
+      });
+      setPreviewStatus("ready");
+      return;
+    }
+    if (!canReadPreview || !readPreview) {
+      setPreviewInfo(null);
+      setPreviewStatus("ready");
+      return;
+    }
+    let cancelled = false;
+    setPreviewInfo(null);
+    setPreviewStatus("loading");
+    const controller = new AbortController();
+    void readPreview(previewSourcePath, { signal: controller.signal }).then((info) => {
+      if (cancelled) return;
+      setPreviewInfo(info);
+      setPreviewStatus("ready");
+    }).catch(() => {
+      if (cancelled) return;
+      setPreviewInfo(null);
+      setPreviewStatus("ready");
+    });
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [
+    canReadPreview,
+    dualAssetCount,
+    dualSupportsPreview,
+    embeddedSourcePreview,
+    filePreviewMode,
+    previewSourcePath,
+    readPreview
+  ]);
+  if (!previewItem) {
+    return /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx8(ResizeHandle, { onDrag, onDragEnd, title: t2("contentBrowser.actions.resizePreview") }),
+      /* @__PURE__ */ jsx8("aside", { className: "cb-preview-panel cb-preview-empty", children: /* @__PURE__ */ jsx8("div", { className: "cb-preview-body", children: /* @__PURE__ */ jsx8("div", { className: "cb-preview-note", children: t2("contentBrowser.preview.nothingSelected") }) }) })
+    ] });
+  }
+  const Icon = itemIcon(previewItem, true);
+  const meta = previewItem.type === "folder" ? t2("contentBrowser.preview.folderMeta", { path: previewItem.path || projectLabel }) : previewItem.type === "file" ? t2("contentBrowser.preview.fileMeta", { kind: previewItem.kindLabel, path: previewItem.path }) : t2("contentBrowser.preview.assetMeta", { kind: assetKindLabel(previewItem.kind, t2), path: previewItem.packPath });
+  let body;
+  if (previewItem.type === "folder") {
+    const kids = [
+      ...foldersInPath.filter((folder) => dirOfPath(folder.path) === previewItem.path),
+      ...diskFiles.filter((entry) => dirOfPath(entry.path) === previewItem.path)
+    ].slice(0, 40);
+    body = kids.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "cb-preview-note", children: t2("contentBrowser.preview.emptyFolder") }) : /* @__PURE__ */ jsx8("div", { className: "cb-preview-list", children: kids.map((child) => {
+      const ChildIcon = itemIcon(child);
+      return /* @__PURE__ */ jsxs6("div", { className: "cb-preview-list-item", children: [
+        /* @__PURE__ */ jsx8("span", { className: `cb-preview-list-ico${child.type === "folder" ? " cb-folder-icon" : ""}`, children: /* @__PURE__ */ jsx8(ChildIcon, { size: 15 }) }),
+        /* @__PURE__ */ jsx8("span", { children: child.name }),
+        /* @__PURE__ */ jsx8("span", { className: "sub", children: child.type === "folder" ? t2("contentBrowser.preview.items", { count: child.childCount }) : child.kindLabel || fileKindLabel(child, t2) })
+      ] }, child.path);
+    }) });
+  } else if (previewItem.type === "file") {
+    const showSource = filePreviewMode === "source" && showDualPreview;
+    if (previewItem.assets.length > 0 && !showSource) {
+      body = /* @__PURE__ */ jsx8(FileAssetList, { file: previewItem, t: t2 });
+    } else {
+      body = /* @__PURE__ */ jsx8(
+        FileContentPreview,
+        {
+          file: showDualPreview ? dualPreviewFile ?? previewItem : previewItem,
+          previewInfo,
+          status: previewStatus,
+          pendingRemote: isFilePreviewPending(canReadPreview, previewStatus, previewInfo, showDualPreview ? dualPreviewFile ?? previewItem : previewItem),
+          t: t2
+        }
+      );
+    }
+  } else {
+    const showSource = showDualPreview && filePreviewMode === "source" && dualPreviewFile;
+    body = showSource ? /* @__PURE__ */ jsx8(
+      FileContentPreview,
+      {
+        file: dualPreviewFile,
+        previewInfo,
+        status: previewStatus,
+        pendingRemote: isFilePreviewPending(canReadPreview, previewStatus, previewInfo, dualPreviewFile),
+        t: t2
+      }
+    ) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx8("div", { className: "cb-preview-media cb-preview-asset-hero", children: /* @__PURE__ */ jsx8("span", { className: "cb-preview-hero-icon", children: /* @__PURE__ */ jsx8(Icon, { size: 64 }) }) }),
+      /* @__PURE__ */ jsx8("div", { className: "cb-preview-asset-list", children: /* @__PURE__ */ jsxs6("div", { className: "cb-preview-asset-row", children: [
+        /* @__PURE__ */ jsx8("span", { className: "cb-preview-list-ico", children: /* @__PURE__ */ jsx8(Icon, { size: 15 }) }),
+        /* @__PURE__ */ jsxs6("div", { className: "cb-preview-asset-main", title: previewItem.packPath, children: [
+          /* @__PURE__ */ jsx8("div", { title: previewItem.name, children: previewItem.name }),
+          /* @__PURE__ */ jsx8("div", { className: "kind", title: previewItem.packPath, children: previewItem.packPath })
+        ] }),
+        /* @__PURE__ */ jsx8("span", { className: "guid", title: previewItem.guid, children: previewItem.guid })
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx8(ResizeHandle, { onDrag, onDragEnd, title: t2("contentBrowser.actions.resizePreview") }),
+    /* @__PURE__ */ jsxs6("aside", { className: "cb-preview-panel", "data-subject-id": previewItem.type === "asset" ? previewItem.guid : previewItem.path, children: [
+      /* @__PURE__ */ jsxs6("div", { className: "cb-preview-head", children: [
+        /* @__PURE__ */ jsx8("span", { className: `cb-preview-ico${previewItem.type === "folder" ? " cb-folder-icon" : ""}`, children: /* @__PURE__ */ jsx8(Icon, { size: 15 }) }),
+        /* @__PURE__ */ jsxs6("div", { className: "cb-preview-title", children: [
+          /* @__PURE__ */ jsx8("div", { className: "name", children: previewItem.name }),
+          /* @__PURE__ */ jsx8("div", { className: "meta", children: meta })
+        ] }),
+        /* @__PURE__ */ jsx8(
+          IconButton,
+          {
+            size: "compact",
+            variant: "quiet",
+            className: "cb-preview-close",
+            label: t2("contentBrowser.preview.close"),
+            icon: /* @__PURE__ */ jsx8(X, { size: 14 }),
+            onClick: onClose
+          }
+        )
+      ] }),
+      showDualPreview ? /* @__PURE__ */ jsxs6("div", { className: "cb-preview-mode-bar", role: "tablist", "aria-label": t2("contentBrowser.preview.modeAssets"), children: [
+        /* @__PURE__ */ jsx8("button", { type: "button", role: "tab", className: `cb-preview-mode-btn${filePreviewMode === "assets" ? " is-active" : ""}`, "aria-selected": filePreviewMode === "assets", onClick: () => setFilePreviewMode("assets"), children: t2("contentBrowser.preview.modeAssets") }),
+        /* @__PURE__ */ jsx8("button", { type: "button", role: "tab", className: `cb-preview-mode-btn${filePreviewMode === "source" ? " is-active" : ""}`, "aria-selected": filePreviewMode === "source", onClick: () => setFilePreviewMode("source"), children: t2("contentBrowser.preview.modeSource") })
+      ] }) : null,
+      /* @__PURE__ */ jsx8("div", { className: "cb-preview-body", children: body })
+    ] })
+  ] });
+}
+function FileAssetList({ file: file2, t: t2 }) {
+  return /* @__PURE__ */ jsx8("div", { className: "cb-preview-asset-list", children: file2.assets.map((asset2) => {
+    const Icon = itemIcon(asset2);
+    return /* @__PURE__ */ jsxs6("div", { className: "cb-preview-asset-row", children: [
+      /* @__PURE__ */ jsx8("span", { className: "cb-preview-list-ico", children: /* @__PURE__ */ jsx8(Icon, { size: 15 }) }),
+      /* @__PURE__ */ jsxs6("div", { className: "cb-preview-asset-main", children: [
+        /* @__PURE__ */ jsx8("div", { title: asset2.name, children: asset2.name }),
+        /* @__PURE__ */ jsx8("div", { className: "kind", title: assetKindLabel(asset2.kind, t2), children: assetKindLabel(asset2.kind, t2) })
+      ] }),
+      /* @__PURE__ */ jsx8("span", { className: "guid", title: asset2.guid, children: asset2.guid })
+    ] }, asset2.guid);
+  }) });
+}
+function isFilePreviewPending(canReadPreview, status, previewInfo, file2) {
+  if (!canReadPreview || status !== "idle") return false;
+  if (previewInfo) return false;
+  return file2.sourcePreview == null;
+}
+
+// packages/view-plugin-content-browser/src/ui/mock-catalog.ts
+var PROJECT_LABEL = "47 game";
+var TODAY = Date.parse("2026-09-18T04:00:00Z");
+var YESTERDAY = Date.parse("2026-09-17T04:00:00Z");
+function asset(guid, kind, name, packPath, packIndex, estimatedSize, packModifiedAt) {
+  return {
+    type: "asset",
+    guid,
+    kind,
+    name,
+    packPath,
+    packIndex,
+    payload: { mock: true },
+    refs: [],
+    estimatedSize,
+    packModifiedAt
+  };
+}
+function file(path, assets, extra = {}) {
+  const name = path.slice(path.lastIndexOf("/") + 1);
+  const family = fileFamilyOfWithAssets(name, assets);
+  const isAssetPackage = isResourceGroup(assets.length);
+  return {
+    type: "file",
+    path,
+    diskPath: path,
+    name,
+    family,
+    assets,
+    isAssetPackage,
+    kindLabel: isAssetPackage ? "" : family,
+    sourcePreview: extra.sourcePreview,
+    estimatedSize: extra.estimatedSize,
+    packModifiedAt: extra.packModifiedAt ?? assets[0]?.packModifiedAt
+  };
+}
+var characterAssets = [
+  asset("11111111-1111-4111-8111-111111111111", "mesh", "HeroMesh", "assets/character.glb", 0, 482e3, TODAY),
+  asset("11111111-1111-4111-8111-111111111112", "material", "HeroMaterial", "assets/character.glb", 1, 12400, TODAY),
+  asset("11111111-1111-4111-8111-111111111113", "texture", "HeroAlbedo", "assets/character.glb", 2, 1024e3, TODAY)
+];
+var environmentAssets = [
+  asset("22222222-2222-4222-8222-222222222221", "mesh", "EnvMesh", "assets/environment.fbx", 0, 128e4, YESTERDAY),
+  asset("22222222-2222-4222-8222-222222222222", "material", "EnvMaterial", "assets/environment.fbx", 1, 18200, YESTERDAY),
+  asset("22222222-2222-4222-8222-222222222223", "animation-clip", "WalkClip", "assets/environment.fbx", 2, 96e3, YESTERDAY),
+  asset("22222222-2222-4222-8222-222222222224", "skeleton", "EnvSkeleton", "assets/environment.fbx", 3, 22e3, YESTERDAY)
+];
+var packMaterials = [
+  asset("33333333-3333-4333-8333-333333333331", "material", "Metal", "assets/materials.pack.json", 0, 9700, TODAY),
+  asset("33333333-3333-4333-8333-333333333332", "material", "Wood", "assets/materials.pack.json", 1, 8200, TODAY)
+];
+var sceneAsset = asset("44444444-4444-4444-8444-444444444441", "scene", "Main Scene", "assets/scene-main.pack.json", 0, 18200, TODAY);
+var baseMaterial = asset("55555555-5555-4555-8555-555555555551", "material", "BaseMaterial", "assets/base-material.pack.json", 0, 9700, TODAY);
+var skyAsset = asset("66666666-6666-4666-8666-666666666661", "cube-texture", "SkyCubemap", "assets/sky.pack.json", 0, 24e5, YESTERDAY);
+var hudAsset = asset("77777777-7777-4777-8777-777777777771", "ui", "HUD", "assets/hud.pack.json", 0, 12500, YESTERDAY);
+var MOCK_FILES = [
+  file("AGENTS.md", [], { sourcePreview: "# AGENTS\n\nProject agent notes.\n", estimatedSize: 7200, packModifiedAt: TODAY }),
+  file("FORGE.md", [], { sourcePreview: "# FORGE\n\nWorkspace contract.\n", estimatedSize: 4800, packModifiedAt: YESTERDAY }),
+  file("capability-adapters.json", [], {
+    sourcePreview: '{\n  "adapters": ["content-browser", "inspector"]\n}\n',
+    estimatedSize: 3100,
+    packModifiedAt: TODAY
+  }),
+  file("package.json", [], {
+    sourcePreview: '{\n  "name": "47-game",\n  "private": true\n}\n',
+    estimatedSize: 1600,
+    packModifiedAt: TODAY
+  }),
+  file("main.ts", [], {
+    sourcePreview: 'export function boot() {\n  return "47 game";\n}\n',
+    estimatedSize: 2400,
+    packModifiedAt: TODAY
+  }),
+  file("assets/character.glb", characterAssets, { estimatedSize: 152e4, packModifiedAt: TODAY }),
+  file("assets/environment.fbx", environmentAssets, { estimatedSize: 24e5, packModifiedAt: YESTERDAY }),
+  file("assets/materials.pack.json", packMaterials, {
+    sourcePreview: '{\n  "assets": [\n    { "kind": "material", "name": "Metal" },\n    { "kind": "material", "name": "Wood" }\n  ]\n}\n',
+    estimatedSize: 4200,
+    packModifiedAt: TODAY
+  }),
+  file("assets/scene-main.pack.json", [sceneAsset], {
+    sourcePreview: '{\n  "assets": [{ "kind": "scene", "name": "Main Scene" }]\n}\n',
+    estimatedSize: 18200,
+    packModifiedAt: TODAY
+  }),
+  file("assets/base-material.pack.json", [baseMaterial], {
+    sourcePreview: '{\n  "assets": [{ "kind": "material", "name": "BaseMaterial" }]\n}\n',
+    estimatedSize: 9700,
+    packModifiedAt: TODAY
+  }),
+  file("assets/sky.pack.json", [skyAsset], {
+    sourcePreview: '{\n  "assets": [{ "kind": "cube-texture", "name": "SkyCubemap" }]\n}\n',
+    estimatedSize: 24e5,
+    packModifiedAt: YESTERDAY
+  }),
+  file("assets/hud.pack.json", [hudAsset], {
+    sourcePreview: '{\n  "assets": [{ "kind": "ui", "name": "HUD" }]\n}\n',
+    estimatedSize: 12500,
+    packModifiedAt: YESTERDAY
+  }),
+  file("assets/hero.png", [], { estimatedSize: 84e3, packModifiedAt: TODAY }),
+  file("assets/shot.wav", [], { estimatedSize: 22e4, packModifiedAt: YESTERDAY }),
+  file("assets/Inter.ttf", [], { estimatedSize: 31e4, packModifiedAt: YESTERDAY }),
+  file("assets/ground.colliders.json", [], {
+    sourcePreview: '{\n  "colliders": [{ "shape": "box" }]\n}\n',
+    estimatedSize: 1200,
+    packModifiedAt: TODAY
+  }),
+  file("scripts/smoke-geometry.mjs", [], {
+    sourcePreview: 'export const geometry = { kind: "box" };\n',
+    estimatedSize: 3800,
+    packModifiedAt: TODAY
+  }),
+  file("scripts/smoke-rotation.mjs", [], {
+    sourcePreview: "export function rotate(dt) { return dt * 0.2; }\n",
+    estimatedSize: 2100,
+    packModifiedAt: YESTERDAY
+  }),
+  file("sessions/logs/debug.log", [], { sourcePreview: "[info] boot\n[debug] frame 1\n", estimatedSize: 31e3, packModifiedAt: TODAY }),
+  file("sessions/logs/latest.log", [], { sourcePreview: "[info] ready\n", estimatedSize: 11e3, packModifiedAt: TODAY }),
+  file("src/index.ts", [], { sourcePreview: "export {};\n", estimatedSize: 80, packModifiedAt: YESTERDAY })
+];
+var folderPaths = ["assets", "scripts", "sessions", "sessions/logs", "src"];
+var MOCK_FOLDERS = folderPaths.map((path) => {
+  const prefix = `${path}/`;
+  const fileCount = MOCK_FILES.filter((entry) => entry.path.startsWith(prefix)).length;
+  const folderCount = folderPaths.filter((entry) => entry !== path && entry.startsWith(prefix) && !entry.slice(prefix.length).includes("/")).length;
+  return {
+    type: "folder",
+    path,
+    name: path.slice(path.lastIndexOf("/") + 1),
+    childCount: fileCount + folderCount
+  };
+});
+var DIRECTORY_TREE = MOCK_FOLDERS.map((folder) => ({
+  path: folder.path,
+  name: folder.name,
+  depth: folder.path.split("/").length - 1
+}));
+
+// packages/view-plugin-content-browser/src/ui/workspace-catalog.ts
+function projectCatalog(root, assets) {
+  const files = /* @__PURE__ */ new Map();
+  const prefix = `${root.replaceAll("\\", "/").replace(/\/$/, "")}/`;
+  for (const asset2 of assets) {
+    const source = (asset2.sourcePath ?? asset2.path ?? asset2.guid).replaceAll("\\", "/");
+    const relative = source.startsWith(prefix) ? source.slice(prefix.length) : source;
+    const external = relative.startsWith("/") || /^[a-z]:\//i.test(relative) || relative.split("/").includes("..");
+    const path = external ? `External assets/${encodeURIComponent(source)}` : relative.replace(/^\.\//, "");
+    let file2 = files.get(path);
+    if (!file2) {
+      file2 = {
+        type: "file",
+        path,
+        diskPath: source,
+        name: source.split("/").at(-1),
+        family: "pack",
+        assets: [],
+        isAssetPackage: false,
+        kindLabel: ""
+      };
+      files.set(path, file2);
+    }
+    const item = {
+      type: "asset",
+      guid: asset2.guid,
+      kind: asset2.kind,
+      name: (source.toLowerCase().endsWith(".pack.ts") ? asset2.sourceKey : void 0) ?? asset2.name ?? asset2.label ?? asset2.guid,
+      packPath: path
+    };
+    file2.assets.push(item);
+    file2.family = fileFamilyOfWithAssets(file2.name, file2.assets);
+    file2.isAssetPackage = isResourceGroup(file2.assets.length);
+  }
+  const folders = /* @__PURE__ */ new Map();
+  for (const file2 of files.values()) {
+    const parts = file2.path.split("/").filter(Boolean).slice(0, -1);
+    for (let index = 0; index < parts.length; index++) {
+      const path = parts.slice(0, index + 1).join("/");
+      if (!folders.has(path)) folders.set(path, { type: "folder", path, name: parts[index], childCount: 0 });
+    }
+  }
+  for (const folder of folders.values()) {
+    folder.childCount = [...folders.values(), ...files.values()].filter((item) => item.path.slice(0, item.path.lastIndexOf("/")) === folder.path).length;
+  }
+  return { files: [...files.values()], folders: [...folders.values()] };
+}
+
+// packages/view-plugin-content-browser/src/ui/ContentBrowserPanel.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var LAYOUT_OPTIONS = [
+  { mode: "grid", icon: /* @__PURE__ */ jsx9(Grid2X2, { size: 14 }), labelKey: "contentBrowser.layoutGrid" },
+  { mode: "list", icon: /* @__PURE__ */ jsx9(List, { size: 14 }), labelKey: "contentBrowser.layoutList" },
+  { mode: "column", icon: /* @__PURE__ */ jsx9(Table2, { size: 14 }), labelKey: "contentBrowser.layoutColumn" }
+];
+var SORT_KEYS = ["name", "kind", "packModifiedAt", "estimatedSize"];
+var SORT_KEY_ICONS = {
+  name: CaseSensitive,
+  kind: Shapes,
+  packModifiedAt: Clock,
+  estimatedSize: HardDrive
+};
+function isContextMenuAnchor(element) {
+  return element.classList.contains("cb-grid-item") || element.classList.contains("cb-fe-card") || element.classList.contains("cb-details-row") || element.classList.contains("cb-source-row");
+}
+function toFxMenuItems(items, close) {
+  return items.map((item) => {
+    if (item.kind === "separator") return { type: "separator" };
+    if (item.kind === "title") {
+      return { type: "title", label: /* @__PURE__ */ jsxs7("span", { className: "cb-menu-title", children: [
+        item.icon,
+        item.label
+      ] }) };
+    }
+    return {
+      id: item.id,
+      label: item.label,
+      icon: item.icon,
+      shortcut: item.shortcut,
+      disabled: item.disabled,
+      danger: item.danger,
+      buttonProps: { "data-operation": item.id },
+      onSelect: () => {
+        item.action();
+        close?.();
+      }
+    };
+  });
+}
+function ContentBrowserPanel({
+  client,
+  demo = false
+}) {
+  const { t: t2 } = useTranslation();
+  const [snapshot, setSnapshot] = useState6({});
+  const [loadFailed, setLoadFailed] = useState6(false);
+  const [actionError, setActionError] = useState6("");
+  const [loading, setLoading] = useState6(false);
+  const [openingKeys, setOpeningKeys] = useState6(/* @__PURE__ */ new Set());
+  const project = snapshot.project;
+  const projectLabel = demo ? PROJECT_LABEL : project?.name ?? project?.root ?? "No project";
+  const catalog = useMemo(() => projectCatalog(project?.root ?? "", snapshot.assets ?? []), [project?.root, snapshot.assets]);
+  const files = demo ? MOCK_FILES : catalog.files;
+  const folders = demo ? MOCK_FOLDERS : catalog.folders;
+  const directoryTree = demo ? DIRECTORY_TREE : folders.map((folder2) => ({ ...folder2, depth: folder2.path.split("/").length - 1 }));
+  const clientRef = useRef3(client);
+  clientRef.current = client;
+  const connected = useWorkspaceClientConnected(demo ? void 0 : client);
+  const readPreview = useCallback4((path, options) => {
+    if (demo) return Promise.resolve(null);
+    const transport = clientRef.current?.transport;
+    if (typeof transport?.request !== "function") return Promise.resolve(null);
+    return transport.request(VIEW_FILE_GET_SERVICE, { path }, options);
+  }, [demo]);
+  const refresh = useCallback4(async (signal) => {
+    if (demo || !connected || !project || !client) return;
+    setLoading(true);
+    try {
+      await client.listAssets(project.id, { tabId: VIEW_WORKSPACE_TAB_ID, signal });
+      if (!signal?.aborted) setLoadFailed(false);
+    } catch {
+      if (!signal?.aborted) setLoadFailed(true);
+    } finally {
+      if (!signal?.aborted) setLoading(false);
+    }
+  }, [client, connected, demo, project?.id]);
+  useEffect4(() => {
+    if (demo) return;
+    if (!client || !connected) {
+      if (!client) setLoadFailed(true);
+      return;
+    }
+    const controller = new AbortController();
+    setSnapshot({});
+    const accept = (next) => {
+      if (controller.signal.aborted) return;
+      setSnapshot((current) => {
+        if ((next.revision ?? 0) < (current.revision ?? 0)) return current;
+        if (workspaceUiFingerprint(next) === workspaceUiFingerprint(current)) return current;
+        return next;
+      });
+      setLoadFailed(false);
+    };
+    const unsubscribe = client.subscribe(accept);
+    void client.getState({ signal: controller.signal }).then(accept).catch(() => {
+      if (!controller.signal.aborted) setLoadFailed(true);
+    });
+    return () => {
+      controller.abort();
+      unsubscribe?.();
+    };
+  }, [client, connected, demo]);
+  useEffect4(() => {
+    if (!connected) return;
+    const controller = new AbortController();
+    void refresh(controller.signal);
+    return () => controller.abort();
+  }, [connected, refresh]);
+  const [layout, setLayout] = useState6("grid");
+  const [thumbnailSize, setThumbnailSize] = useState6(80);
+  const [detailPanelOpen, setDetailPanelOpen] = useState6(true);
+  const [query, setQuery] = useState6("");
+  const [activeFamilies, setActiveFamilies] = useState6(/* @__PURE__ */ new Set());
+  const [activeKinds, setActiveKinds] = useState6(/* @__PURE__ */ new Set());
+  const [sortState, setSortState] = useState6({ key: "name", dir: "asc" });
+  const [history, setHistory] = useState6([""]);
+  const [historyIndex, setHistoryIndex] = useState6(0);
+  const [menu, setMenu] = useState6(null);
+  const [contextMenu, setContextMenu] = useState6(null);
+  const [toolbarMenuAnchor, setToolbarMenuAnchor] = useState6(null);
+  const filterButtonRef = useRef3(null);
+  const sortButtonRef = useRef3(null);
+  const settingsButtonRef = useRef3(null);
+  const splitRef = useRef3(null);
+  const [groups, setGroups] = useState6({ favorites: true, project: true });
+  const [favorites, setFavorites] = useState6(new Set(demo ? ["assets", "scripts"] : []));
+  const [collapsed, setCollapsed] = useState6(/* @__PURE__ */ new Set());
+  const [expandedPacks, setExpandedPacks] = useState6(/* @__PURE__ */ new Set());
+  const [selectedIds, setSelectedIds] = useState6(/* @__PURE__ */ new Set());
+  const [selectionAnchor, setSelectionAnchor] = useState6(null);
+  const [previewKey, setPreviewKey] = useState6(null);
+  const previewItem = [...folders, ...files.flatMap((file2) => [file2, ...file2.assets])].find((item) => viewItemKey(item) === previewKey) ?? null;
+  const [srcWidth, setSrcWidth] = useLocalSize("view.cb.sourceWidth", 200, 140, 420);
+  const [previewWidth, setPreviewWidth] = useLocalSize("view.cb.previewWidth", 280, 180, 560);
+  useEffect4(() => {
+    setHistory([""]);
+    setHistoryIndex(0);
+    setSelectedIds(/* @__PURE__ */ new Set());
+    setSelectionAnchor(null);
+    setPreviewKey(null);
+    setExpandedPacks(/* @__PURE__ */ new Set());
+    setFavorites(new Set(demo ? ["assets", "scripts"] : []));
+    setQuery("");
+  }, [project?.id, demo]);
+  const folder = history[historyIndex] ?? "";
+  const familyFilters = useMemo(() => buildFamilyFilters(activeFamilies, t2), [activeFamilies, t2]);
+  const kindFilters = useMemo(() => buildKindFilters(activeKinds, t2), [activeKinds, t2]);
+  const activeFilterCount = activeFamilies.size + activeKinds.size;
+  const labeledFiles = useMemo(
+    () => files.map((file2) => ({ ...file2, kindLabel: fileKindLabel(file2, t2) })),
+    [files, t2]
+  );
+  const derived = useMemo(
+    () => deriveViewItems({
+      folders,
+      files: labeledFiles,
+      currentPath: folder,
+      searchQuery: query,
+      activeFamilies,
+      activeKinds,
+      sortState,
+      expandedPacks,
+      withKindLabel: (file2) => file2
+    }),
+    [activeFamilies, activeKinds, expandedPacks, folder, folders, labeledFiles, query, sortState]
+  );
+  const { viewItems, foldersInPath, searchActive } = derived;
+  const navigate = (path) => {
+    const normalized = normalizePathInput(path);
+    if (normalized === folder) return;
+    const next = history.slice(0, historyIndex + 1);
+    next.push(normalized);
+    setHistory(next);
+    setHistoryIndex(next.length - 1);
+  };
+  const selectItem = (item, event) => {
+    setActionError("");
+    const key = viewItemKey(item);
+    const toggleOff = Boolean((event?.ctrlKey || event?.metaKey) && selectedIds.has(key));
+    setSelectedIds((current) => {
+      if (event?.shiftKey && selectionAnchor) {
+        const start = viewItems.findIndex((entry) => viewItemKey(entry) === selectionAnchor);
+        const end = viewItems.findIndex((entry) => viewItemKey(entry) === key);
+        if (start >= 0 && end >= 0) {
+          const range = viewItems.slice(Math.min(start, end), Math.max(start, end) + 1).map((entry) => viewItemKey(entry));
+          return new Set(event.ctrlKey || event.metaKey ? [...current, ...range] : range);
+        }
+      }
+      if (event?.ctrlKey || event?.metaKey) {
+        const next = new Set(current);
+        if (next.has(key)) next.delete(key);
+        else next.add(key);
+        return next;
+      }
+      return /* @__PURE__ */ new Set([key]);
+    });
+    setSelectionAnchor(key);
+    setPreviewKey(viewItemKey(item));
+    if (!demo && !toggleOff && item.type === "asset" && client && project) {
+      void client.inspectAsset(item.guid, { projectId: project.id, tabId: VIEW_WORKSPACE_TAB_ID }).catch(() => {
+      });
+    }
+  };
+  const assetToOpen = (item) => item.type === "asset" ? item : item.type === "file" ? item.assets.find((asset2) => asset2.kind === "scene") ?? item.assets[0] : void 0;
+  const canActivate = (item) => item.type === "folder" || !demo && !!client && !!project && !!assetToOpen(item);
+  const activateItem = (item) => {
+    setActionError("");
+    if (item.type === "folder") {
+      navigate(item.path);
+      return;
+    }
+    if (demo || !client || !project) return;
+    const guid = assetToOpen(item)?.guid;
+    if (!guid) return;
+    const key = viewItemKey(item);
+    if (openingKeys.has(key)) return;
+    setOpeningKeys((current) => new Set(current).add(key));
+    void client.openAsset(guid, { projectId: project.id, tabId: VIEW_WORKSPACE_TAB_ID }).catch((error) => setActionError(error instanceof Error ? error.message : String(error))).finally(() => {
+      setOpeningKeys((current) => {
+        if (!current.has(key)) return current;
+        const next = new Set(current);
+        next.delete(key);
+        return next;
+      });
+    });
+  };
+  const toggleFavorite = (path) => setFavorites((current) => {
+    const next = new Set(current);
+    if (next.has(path)) next.delete(path);
+    else next.add(path);
+    return next;
+  });
+  const togglePackExpansion = (path) => setExpandedPacks((current) => {
+    const next = new Set(current);
+    if (next.has(path)) next.delete(path);
+    else next.add(path);
+    return next;
+  });
+  const toggleCollapsed = (path) => setCollapsed((current) => {
+    const next = new Set(current);
+    if (next.has(path)) next.delete(path);
+    else next.add(path);
+    return next;
+  });
+  useEffect4(() => {
+    if (menu !== "filter" && menu !== "sort" && menu !== "settings") setToolbarMenuAnchor(null);
+  }, [menu]);
+  const showMenu = (event, items) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setMenu(null);
+    setToolbarMenuAnchor(null);
+    const target = event.currentTarget;
+    const anchor = isContextMenuAnchor(target) ? target.getBoundingClientRect() : anchorRectFromPoint(event.clientX, event.clientY);
+    setContextMenu({ anchor, items });
+  };
+  const openToolbarMenu = (kind) => {
+    if (menu === kind) {
+      setMenu(null);
+      return;
+    }
+    const ref = kind === "filter" ? filterButtonRef : kind === "sort" ? sortButtonRef : settingsButtonRef;
+    const rect = ref.current?.getBoundingClientRect();
+    if (rect) setToolbarMenuAnchor(rect);
+    setMenu(kind);
+  };
+  const folderMenu = (path, name) => [
+    { kind: "title", label: name, icon: /* @__PURE__ */ jsx9(Folder3, { className: "cb-folder-icon", size: 14 }) },
+    { kind: "item", id: "open", label: t2("contentBrowser.menu.open"), icon: /* @__PURE__ */ jsx9(FolderOpen2, { size: 14 }), action: () => navigate(path) },
+    {
+      kind: "item",
+      id: "copy-path",
+      label: t2("contentBrowser.menu.copyPath"),
+      icon: /* @__PURE__ */ jsx9(Copy, { size: 14 }),
+      action: () => void navigator.clipboard?.writeText(path || projectLabel)
+    },
+    {
+      kind: "item",
+      id: "favorite",
+      label: favorites.has(path) ? t2("contentBrowser.menu.removeFromFavorites") : t2("contentBrowser.menu.addToFavorites"),
+      icon: favorites.has(path) ? /* @__PURE__ */ jsx9(StarOff, { size: 14 }) : /* @__PURE__ */ jsx9(Star, { size: 14 }),
+      action: () => toggleFavorite(path)
+    }
+  ];
+  const itemMenu = (item) => {
+    const Icon = itemIcon(item);
+    if (item.type === "folder") return folderMenu(item.path, item.name);
+    return [
+      { kind: "title", label: item.name, icon: /* @__PURE__ */ jsx9(Icon, { size: 14 }) },
+      ...canActivate(item) ? [{ kind: "item", id: "open", label: t2("contentBrowser.menu.open"), shortcut: "Enter", action: () => activateItem(item) }] : [],
+      ...item.type === "asset" ? [{
+        kind: "item",
+        id: "copy-guid",
+        label: t2("contentBrowser.menu.copyGuid"),
+        icon: /* @__PURE__ */ jsx9(Copy, { size: 14 }),
+        action: () => void navigator.clipboard?.writeText(item.guid)
+      }] : [],
+      {
+        kind: "item",
+        id: "copy-path",
+        label: t2("contentBrowser.menu.copyAssetPath"),
+        icon: /* @__PURE__ */ jsx9(Copy, { size: 14 }),
+        shortcut: "Ctrl+Shift+C",
+        action: () => void navigator.clipboard?.writeText(item.type === "asset" ? item.packPath : item.path)
+      }
+    ];
+  };
+  const blankMenu = [
+    { kind: "title", label: t2("contentBrowser.readOnlyTitle") },
+    {
+      kind: "item",
+      id: "copy-path",
+      label: t2("contentBrowser.menu.copyCurrentPath"),
+      icon: /* @__PURE__ */ jsx9(Copy, { size: 14 }),
+      action: () => void navigator.clipboard?.writeText(folder || projectLabel)
+    }
+  ];
+  const applyFilter = (filterId) => {
+    const next = toggleFilterId(filterId, activeFamilies, activeKinds);
+    setActiveFamilies(next.families);
+    setActiveKinds(next.kinds);
+  };
+  const renderTreeRow = (path, name, depth, favorite = false) => {
+    const hasChildren = directoryTree.some((entry) => entry.path.startsWith(`${path}/`));
+    const open = !collapsed.has(path);
+    const folderItem = folders.find((entry) => entry.path === path);
+    const selected = folder === path;
+    const inPath = folder.startsWith(`${path}/`);
+    const row = /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        type: "button",
+        className: `cb-source-row${selected ? " is-sel" : inPath ? " is-path" : ""}${hasChildren && !open ? " collapsed" : ""}`,
+        style: { paddingLeft: `calc(var(--fx-ref-space-16) + ${depth} * (var(--fx-ref-space-12) + var(--fx-ref-space-2)))` },
+        onClick: () => {
+          navigate(path);
+          if (folderItem) {
+            setPreviewKey(viewItemKey(folderItem));
+            setSelectedIds(/* @__PURE__ */ new Set([path]));
+            setSelectionAnchor(path);
+          }
+        },
+        onDoubleClick: () => hasChildren && toggleCollapsed(path),
+        onContextMenu: (event) => showMenu(event, folderMenu(path, name)),
+        children: [
+          /* @__PURE__ */ jsx9(
+            "span",
+            {
+              className: `cb-source-chev${hasChildren ? "" : " hidden"}${open ? "" : " collapsed"}`,
+              onClick: (event) => {
+                if (!hasChildren) return;
+                event.stopPropagation();
+                toggleCollapsed(path);
+              },
+              children: /* @__PURE__ */ jsx9(ChevronDown2, { size: 12 })
+            }
+          ),
+          /* @__PURE__ */ jsx9("span", { className: "cb-source-icon", children: open ? /* @__PURE__ */ jsx9(FolderOpen2, { size: 15 }) : /* @__PURE__ */ jsx9(Folder3, { size: 15 }) }),
+          /* @__PURE__ */ jsx9("span", { className: "cb-source-name", children: name })
+        ]
+      }
+    );
+    if (!favorite) return /* @__PURE__ */ jsx9("div", { children: row }, `tree-${path}`);
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: `cb-source-fav-row${selected ? " is-sel" : inPath ? " is-path" : ""}`,
+        children: [
+          row,
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              className: "cb-source-unfav",
+              "data-action": CONTENT_BROWSER_ACTIONS.toggleFavorite,
+              title: t2("contentBrowser.unfavorite"),
+              "aria-label": t2("contentBrowser.unfavorite"),
+              onClick: (event) => {
+                event.stopPropagation();
+                toggleFavorite(path);
+              },
+              children: /* @__PURE__ */ jsx9(Star, { size: 11, fill: "currentColor" })
+            }
+          )
+        ]
+      },
+      `fav-${path}`
+    );
+  };
+  const filterLabel = activeFilterCount === 0 ? t2("contentBrowser.filterAll") : activeFilterCount === 1 ? (familyFilters.find((item) => item.active) ?? kindFilters.find((item) => item.active)).label : t2("contentBrowser.filterByType");
+  const sortLabels = {
+    name: t2("contentBrowser.sort.name"),
+    kind: t2("contentBrowser.sort.kind"),
+    packModifiedAt: t2("contentBrowser.sort.modified"),
+    estimatedSize: t2("contentBrowser.sort.size")
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "cb-root", "data-testid": "panel-content-browser", "data-view-readonly": "true", children: [
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: "cb-split",
+        ref: splitRef,
+        style: { "--cb-src-w": `${srcWidth}px`, "--cb-preview-w": `${previewWidth}px` },
+        children: [
+          /* @__PURE__ */ jsx9("aside", { className: "cb-source-panel", children: /* @__PURE__ */ jsxs7("div", { className: "cb-source-tree", children: [
+            /* @__PURE__ */ jsxs7("section", { className: "cb-source-group", children: [
+              /* @__PURE__ */ jsxs7("button", { type: "button", "data-action": CONTENT_BROWSER_ACTIONS.toggleSourceGroup, className: `cb-source-group-head${groups.favorites ? "" : " collapsed"}`, onClick: () => setGroups((current) => ({ ...current, favorites: !current.favorites })), children: [
+                /* @__PURE__ */ jsx9("span", { className: "cb-source-chev", children: /* @__PURE__ */ jsx9(ChevronDown2, { size: 12 }) }),
+                /* @__PURE__ */ jsx9(Star, { className: "cb-source-group-icon", size: 15 }),
+                /* @__PURE__ */ jsx9("span", { className: "cb-source-group-name", children: t2("contentBrowser.favorites") })
+              ] }),
+              groups.favorites ? /* @__PURE__ */ jsx9("div", { className: "cb-source-group-body", children: favorites.size ? [...favorites].map((path) => renderTreeRow(path, path.split("/").at(-1) ?? path, 0, true)) : /* @__PURE__ */ jsx9("div", { className: "cb-source-empty", children: t2("contentBrowser.noFavorites") }) }) : null
+            ] }),
+            /* @__PURE__ */ jsxs7("section", { className: "cb-source-group", children: [
+              /* @__PURE__ */ jsxs7("button", { type: "button", "data-action": CONTENT_BROWSER_ACTIONS.toggleSourceGroup, className: `cb-source-group-head${groups.project ? "" : " collapsed"}`, onClick: () => setGroups((current) => ({ ...current, project: !current.project })), children: [
+                /* @__PURE__ */ jsx9("span", { className: "cb-source-chev", children: /* @__PURE__ */ jsx9(ChevronDown2, { size: 12 }) }),
+                /* @__PURE__ */ jsx9(FolderOpen2, { className: "cb-source-group-icon cb-folder-icon", size: 15 }),
+                /* @__PURE__ */ jsx9("span", { className: "cb-source-group-name", children: projectLabel })
+              ] }),
+              groups.project ? /* @__PURE__ */ jsxs7("div", { className: "cb-source-group-body", children: [
+                /* @__PURE__ */ jsxs7("button", { type: "button", className: `cb-source-row cb-source-virtual-root${folder === "" ? " is-sel" : ""}`, onClick: () => navigate(""), onContextMenu: (event) => showMenu(event, folderMenu("", projectLabel)), children: [
+                  /* @__PURE__ */ jsx9("span", { className: "cb-source-chev", children: /* @__PURE__ */ jsx9(ChevronDown2, { size: 12 }) }),
+                  /* @__PURE__ */ jsx9("span", { className: "cb-source-icon", children: /* @__PURE__ */ jsx9(FolderOpen2, { size: 15 }) }),
+                  /* @__PURE__ */ jsx9("span", { className: "cb-source-name", children: t2("contentBrowser.all") })
+                ] }),
+                directoryTree.filter((entry) => {
+                  if (entry.depth === 0) return true;
+                  const parent = entry.path.slice(0, entry.path.lastIndexOf("/"));
+                  return !collapsed.has(parent);
+                }).map((entry) => renderTreeRow(entry.path, entry.name, entry.depth + 1))
+              ] }) : null
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx9(
+            ResizeHandle,
+            {
+              title: t2("contentBrowser.actions.resizeFolderTree"),
+              onDrag: (delta) => {
+                const next = srcWidth + delta;
+                setSrcWidth(next);
+                splitRef.current?.style.setProperty("--cb-src-w", `${Math.min(420, Math.max(140, next))}px`);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs7("section", { className: "cb-asset-view", children: [
+            /* @__PURE__ */ jsx9(
+              PanelHeader,
+              {
+                className: "cb-toolbar",
+                center: /* @__PURE__ */ jsx9(
+                  CBNavigationBar,
+                  {
+                    currentPath: folder,
+                    projectLabel,
+                    allDirs: folders.map((entry) => entry.path),
+                    canGoBack: historyIndex > 0,
+                    canGoForward: historyIndex < history.length - 1,
+                    refreshDisabled: !demo && (!project || loading),
+                    onBack: () => setHistoryIndex((index) => Math.max(0, index - 1)),
+                    onForward: () => setHistoryIndex((index) => Math.min(history.length - 1, index + 1)),
+                    onRefresh: () => void refresh(),
+                    onNavigate: navigate
+                  }
+                ),
+                end: /* @__PURE__ */ jsx9(IconButton, { ref: settingsButtonRef, size: "compact", variant: "quiet", label: t2("contentBrowser.settings"), icon: /* @__PURE__ */ jsx9(Settings2, { size: 14 }), onClick: () => openToolbarMenu("settings") })
+              }
+            ),
+            /* @__PURE__ */ jsxs7("div", { className: "cb-content-body", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "cb-grid-column", children: [
+                /* @__PURE__ */ jsxs7(Toolbar, { className: "cb-filter-bar", children: [
+                  /* @__PURE__ */ jsx9(
+                    Button,
+                    {
+                      size: "compact",
+                      variant: "quiet",
+                      "data-action": CONTENT_BROWSER_ACTIONS.activate,
+                      disabled: selectedIds.size !== 1 || !previewItem || !canActivate(previewItem),
+                      loading: Boolean(previewItem && openingKeys.has(viewItemKey(previewItem))),
+                      title: t2("contentBrowser.openHint"),
+                      onClick: () => {
+                        if (previewItem) activateItem(previewItem);
+                      },
+                      children: t2("contentBrowser.menu.open")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx9(Button, { ref: filterButtonRef, size: "compact", variant: "quiet", "data-action": CONTENT_BROWSER_ACTIONS.setFilter, className: activeFilterCount ? "is-active" : void 0, leadingIcon: /* @__PURE__ */ jsx9(Filter, { size: 14 }), onClick: () => openToolbarMenu("filter"), children: filterLabel }),
+                  /* @__PURE__ */ jsx9(SearchField, { className: "cb-search-box", "data-action": CONTENT_BROWSER_ACTIONS.search, value: query, onChange: (event) => setQuery(event.target.value), onClear: () => setQuery(""), placeholder: t2("contentBrowser.searchPlaceholder"), label: t2("contentBrowser.search") }),
+                  /* @__PURE__ */ jsx9(Button, { ref: sortButtonRef, size: "compact", variant: "quiet", "data-action": CONTENT_BROWSER_ACTIONS.setSort, leadingIcon: /* @__PURE__ */ jsx9(ArrowUpDown, { size: 14 }), onClick: () => openToolbarMenu("sort"), children: sortLabels[sortState.key] })
+                ] }),
+                loading ? /* @__PURE__ */ jsx9("div", { role: "status", children: "Loading assets..." }) : null,
+                actionError ? /* @__PURE__ */ jsx9("div", { role: "alert", children: actionError }) : null,
+                loadFailed ? /* @__PURE__ */ jsx9(
+                  EmptyState,
+                  {
+                    className: "cb-empty",
+                    title: t2("contentBrowser.unavailable"),
+                    description: demo || client ? t2("contentBrowser.loadErrorDescription") : t2("contentBrowser.unavailableDescription"),
+                    icon: /* @__PURE__ */ jsx9(FolderOpen2, { size: 28 })
+                  }
+                ) : !demo && !project ? /* @__PURE__ */ jsx9(EmptyState, { className: "cb-empty", title: t2("contentBrowser.noProject"), description: t2("contentBrowser.openProjectHint"), icon: /* @__PURE__ */ jsx9(FolderOpen2, { size: 28 }) }) : viewItems.length === 0 ? /* @__PURE__ */ jsx9(EmptyState, { className: "cb-empty", title: t2("contentBrowser.emptyTitle"), description: t2("contentBrowser.emptyDescription"), icon: /* @__PURE__ */ jsx9(FolderOpen2, { size: 28 }) }) : layout === "column" ? /* @__PURE__ */ jsx9(
+                  CBDetailsList,
+                  {
+                    items: viewItems,
+                    selectedIds,
+                    openingKeys,
+                    sortState,
+                    onSort: (key) => setSortState((current) => nextSortState(current, key)),
+                    onSelect: selectItem,
+                    onActivate: activateItem,
+                    onContextMenu: (event, item) => showMenu(event, itemMenu(item)),
+                    onBlankClick: () => setSelectedIds(/* @__PURE__ */ new Set())
+                  }
+                ) : /* @__PURE__ */ jsx9(
+                  CBGrid,
+                  {
+                    items: viewItems,
+                    thumbnailSize,
+                    layout,
+                    searchActive,
+                    expandedPacks,
+                    selectedIds,
+                    openingKeys,
+                    onSelect: selectItem,
+                    onActivate: activateItem,
+                    onContextMenu: (event, item) => showMenu(event, itemMenu(item)),
+                    onTogglePackExpansion: togglePackExpansion,
+                    onBlankClick: () => setSelectedIds(/* @__PURE__ */ new Set())
+                  }
+                ),
+                /* @__PURE__ */ jsxs7("footer", { className: "cb-status", children: [
+                  /* @__PURE__ */ jsx9("span", { children: selectedIds.size ? t2("contentBrowser.statusSelected", { count: viewItems.length, selected: selectedIds.size }) : t2("contentBrowser.statusCount", { count: viewItems.length }) }),
+                  /* @__PURE__ */ jsx9("span", { children: folder || projectLabel })
+                ] })
+              ] }),
+              detailPanelOpen ? /* @__PURE__ */ jsx9(
+                CBPreviewPanel,
+                {
+                  previewItem,
+                  foldersInPath: folders,
+                  diskFiles: labeledFiles,
+                  projectLabel,
+                  readPreview: demo ? void 0 : readPreview,
+                  onClose: () => setPreviewKey(null),
+                  onDrag: (delta) => {
+                    const next = previewWidth - delta;
+                    setPreviewWidth(next);
+                    splitRef.current?.style.setProperty("--cb-preview-w", `${Math.min(560, Math.max(180, next))}px`);
+                  },
+                  onDragEnd: () => void 0
+                }
+              ) : null
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      FloatingMenu,
+      {
+        open: Boolean(toolbarMenuAnchor && menu === "filter"),
+        anchorRect: toolbarMenuAnchor,
+        onClose: () => setMenu(null),
+        ignorePointerWithin: [filterButtonRef],
+        className: "cb-filter-menu",
+        containerProps: { onPointerDown: (event) => event.stopPropagation() },
+        children: /* @__PURE__ */ jsxs7("div", { className: "cb-filter-menu-body", "data-action": CONTENT_BROWSER_ACTIONS.setFilter, children: [
+          /* @__PURE__ */ jsx9("div", { className: "cb-filter-section", children: t2("contentBrowser.fileTypeSection") }),
+          familyFilters.map((item) => {
+            const Icon = familyIcon(item.family);
+            return /* @__PURE__ */ jsxs7("button", { type: "button", className: "cb-filter-option", "data-active": item.active ? "true" : "false", onClick: () => applyFilter(item.id), children: [
+              /* @__PURE__ */ jsx9(Checkbox, { checked: item.active, onChange: () => applyFilter(item.id), tabIndex: -1, hideLabel: true, label: item.label, className: "cb-filter-check" }),
+              /* @__PURE__ */ jsx9(Icon, { size: 14, className: `cb-filter-option-icon${item.family === "dir" ? " cb-folder-icon" : ""}` }),
+              item.label
+            ] }, item.id);
+          }),
+          /* @__PURE__ */ jsx9("div", { className: "cb-filter-separator" }),
+          /* @__PURE__ */ jsx9("div", { className: "cb-filter-section", children: t2("contentBrowser.assetTypeSection") }),
+          kindFilters.map((item) => {
+            const Icon = kindIcon(item.kind);
+            return /* @__PURE__ */ jsxs7("button", { type: "button", className: "cb-filter-option", "data-active": item.active ? "true" : "false", onClick: () => applyFilter(item.id), children: [
+              /* @__PURE__ */ jsx9(Checkbox, { checked: item.active, onChange: () => applyFilter(item.id), tabIndex: -1, hideLabel: true, label: item.label, className: "cb-filter-check" }),
+              /* @__PURE__ */ jsx9(Icon, { size: 14, className: "cb-filter-option-icon" }),
+              item.label
+            ] }, item.id);
+          }),
+          /* @__PURE__ */ jsx9("div", { className: "cb-filter-separator" }),
+          /* @__PURE__ */ jsx9("button", { type: "button", className: "cb-filter-option cb-filter-clear", disabled: activeFilterCount === 0, onClick: () => {
+            setActiveFamilies(/* @__PURE__ */ new Set());
+            setActiveKinds(/* @__PURE__ */ new Set());
+          }, children: t2("contentBrowser.clearFilters") })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      FloatingMenu,
+      {
+        open: Boolean(toolbarMenuAnchor && menu === "sort"),
+        anchorRect: toolbarMenuAnchor,
+        onClose: () => setMenu(null),
+        ignorePointerWithin: [sortButtonRef],
+        containerProps: { onPointerDown: (event) => event.stopPropagation() },
+        children: /* @__PURE__ */ jsxs7("div", { className: "cb-filter-menu-body", children: [
+          /* @__PURE__ */ jsx9("div", { className: "cb-filter-section", children: t2("contentBrowser.sort.by") }),
+          SORT_KEYS.map((key) => {
+            const Icon = SORT_KEY_ICONS[key];
+            const active = sortState.key === key;
+            return /* @__PURE__ */ jsxs7("button", { type: "button", className: "cb-filter-option", "data-active": active ? "true" : "false", onClick: () => setSortState((current) => nextSortState(current, key)), children: [
+              /* @__PURE__ */ jsx9("span", { className: "cb-radio-menu", "data-checked": active ? "true" : "false" }),
+              /* @__PURE__ */ jsx9(Icon, { size: 14, className: "cb-filter-option-icon" }),
+              sortLabels[key]
+            ] }, key);
+          }),
+          /* @__PURE__ */ jsx9("div", { className: "cb-filter-separator" }),
+          /* @__PURE__ */ jsx9("div", { className: "cb-filter-section", children: t2("contentBrowser.sort.order") }),
+          [["asc", ArrowUpNarrowWide], ["desc", ArrowDownWideNarrow]].map(([dir, Icon]) => {
+            const active = sortState.dir === dir;
+            return /* @__PURE__ */ jsxs7("button", { type: "button", className: "cb-filter-option", "data-active": active ? "true" : "false", onClick: () => setSortState((current) => setSortDir(current, dir)), children: [
+              /* @__PURE__ */ jsx9("span", { className: "cb-radio-menu", "data-checked": active ? "true" : "false" }),
+              /* @__PURE__ */ jsx9(Icon, { size: 14, className: "cb-filter-option-icon" }),
+              t2(dir === "asc" ? "contentBrowser.sort.asc" : "contentBrowser.sort.desc")
+            ] }, dir);
+          })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      FloatingMenu,
+      {
+        open: Boolean(toolbarMenuAnchor && menu === "settings"),
+        anchorRect: toolbarMenuAnchor,
+        onClose: () => setMenu(null),
+        ignorePointerWithin: [settingsButtonRef],
+        containerProps: { onPointerDown: (event) => event.stopPropagation() },
+        children: /* @__PURE__ */ jsxs7("div", { className: "cb-settings-menu", children: [
+          /* @__PURE__ */ jsx9("strong", { children: t2("contentBrowser.layout") }),
+          /* @__PURE__ */ jsx9("div", { className: "fx-segmented cb-layout-switch", children: LAYOUT_OPTIONS.map(({ mode, icon, labelKey }) => /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              type: "button",
+              "data-action": CONTENT_BROWSER_ACTIONS.setView,
+              className: "fx-segmented__item fx-segmented__item--stacked",
+              "data-checked": layout === mode ? "true" : "false",
+              onClick: () => setLayout(mode),
+              children: [
+                icon,
+                /* @__PURE__ */ jsx9("span", { children: t2(labelKey) })
+              ]
+            },
+            mode
+          )) }),
+          /* @__PURE__ */ jsxs7("label", { className: "cb-settings-row", children: [
+            /* @__PURE__ */ jsx9("span", { className: "cb-settings-label", children: t2("contentBrowser.thumbnailSize") }),
+            /* @__PURE__ */ jsx9(
+              RangeInput,
+              {
+                "data-action": CONTENT_BROWSER_ACTIONS.setThumbnailSize,
+                className: "cb-settings-range",
+                min: 48,
+                max: 200,
+                step: 4,
+                value: thumbnailSize,
+                onChange: (event) => setThumbnailSize(Number(event.target.value)),
+                title: t2("contentBrowser.actions.thumbnailSize", { size: thumbnailSize })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx9(
+            Switch,
+            {
+              layout: "row",
+              className: "cb-settings-switch-row",
+              label: t2("contentBrowser.actions.detailPanel"),
+              checked: detailPanelOpen,
+              "data-action": CONTENT_BROWSER_ACTIONS.toggleDetailPanel,
+              onCheckedChange: setDetailPanelOpen
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      ContextMenu,
+      {
+        open: Boolean(contextMenu),
+        anchorRect: contextMenu?.anchor ?? null,
+        items: contextMenu ? toFxMenuItems(contextMenu.items) : [],
+        onClose: () => setContextMenu(null),
+        label: t2("contentBrowser.contextMenu"),
+        containerProps: { "data-action": CONTENT_BROWSER_ACTIONS.showContextMenu }
+      }
+    )
+  ] });
+}
+
+// packages/view-plugin-content-browser/src/ui/content-browser.css
+var css = '/* packages/view-plugin-content-browser/src/ui/content-browser.css */\n.cb-root {\n  --cb-layout-min-width: calc(var(--fx-component-panel-chat-min-width) + var(--fx-ref-space-48) + var(--fx-ref-space-32));\n  --cb-source-width: calc(var(--fx-component-panel-config-min-width) - var(--fx-ref-space-48));\n  --cb-source-min-width: calc(var(--fx-ref-space-48) * 2 + var(--fx-ref-space-32) + var(--fx-ref-space-12));\n  --cb-resize-width: var(--fx-ref-space-6);\n  --cb-resize-offset: calc(-1 * var(--fx-ref-space-2));\n  --cb-grid-min-width: calc(var(--fx-ref-space-48) * 2 + var(--fx-ref-space-24));\n  --cb-grid-min-height: calc(var(--fx-ref-space-48) * 2 + var(--fx-ref-space-32) + var(--fx-ref-space-12));\n  --cb-thumb-default: calc(var(--fx-ref-space-48) + var(--fx-ref-space-32) + var(--fx-ref-space-8));\n  --cb-import-pop-left: calc(var(--fx-component-navigation-rail-width) + var(--fx-ref-space-12));\n  --cb-card-line: 13px;\n  --cb-folder-icon: #c9a86a;\n  --cb-group-stack: 6px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-width: var(--cb-layout-min-width);\n  min-height: 0;\n  overflow: hidden;\n  background: var(--fx-color-surface-canvas);\n  color: var(--fx-color-text-secondary);\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  user-select: none;\n}\n.cb-root * {\n  box-sizing: border-box;\n}\n.cb-root :where(input, textarea, .cb-address, .cb-address-input, .cb-preview-source, .cb-preview-code-plain, .cb-preview-code-shiki) {\n  user-select: text;\n}\n.cb-root button,\n.cb-root input {\n  font: inherit;\n}\n.cb-split {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.cb-source-panel {\n  flex: 0 0 var(--cb-src-w, var(--cb-source-width));\n  width: var(--cb-src-w, var(--cb-source-width));\n  min-width: var(--cb-source-min-width);\n  overflow: auto;\n  background: var(--fx-color-surface-sidebar);\n}\n.cb-resize-handle {\n  position: relative;\n  z-index: var(--fx-layer-sticky);\n  flex: 0 0 var(--cb-resize-width);\n  width: var(--cb-resize-width);\n  margin: 0 var(--cb-resize-offset);\n  cursor: col-resize;\n}\n.cb-resize-handle::after {\n  content: "";\n  position: absolute;\n  inset: 0 auto 0 50%;\n  width: var(--fx-border-width);\n  background: var(--fx-color-border-subtle);\n}\n.cb-resize-handle:hover::after {\n  background: var(--fx-color-border-focus);\n}\n.cb-source-tree {\n  min-width: 0;\n  padding: var(--fx-ref-space-4) 0;\n}\n.cb-source-group + .cb-source-group {\n  margin-top: var(--fx-ref-space-2);\n}\n.cb-source-group-head,\n.cb-source-row {\n  appearance: none;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  border: var(--fx-border-width) solid transparent;\n  text-align: left;\n  cursor: pointer;\n}\n.cb-source-group-head {\n  gap: var(--fx-ref-space-4);\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-8);\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-secondary);\n  font-weight: var(--fx-ref-font-weight-600);\n}\n.cb-source-group-head:hover,\n.cb-source-row:hover {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.cb-source-group-head.collapsed .cb-source-chev,\n.cb-source-chev.collapsed {\n  transform: rotate(-90deg);\n}\n.cb-source-group-icon {\n  flex: 0 0 auto;\n  color: var(--fx-color-text-muted);\n}\n.cb-source-group-head .cb-folder-icon {\n  color: var(--cb-folder-icon);\n}\n.cb-source-group-name,\n.cb-source-name {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cb-source-group-body {\n  padding: var(--fx-ref-space-2) 0 var(--fx-ref-space-4);\n}\n.cb-source-empty {\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-12) var(--fx-ref-space-4) var(--fx-ref-space-16);\n  color: var(--fx-color-text-muted);\n  font-size: var(--fx-type-caption-font-size);\n  font-style: italic;\n}\n.cb-source-row {\n  gap: var(--fx-ref-space-4);\n  min-height: var(--fx-component-editor-row-height);\n  padding-top: var(--fx-ref-space-4);\n  padding-right: var(--fx-ref-space-12);\n  padding-bottom: var(--fx-ref-space-4);\n  background: transparent;\n  color: var(--fx-color-text-secondary);\n}\n.cb-source-row.is-path:not(.is-sel) {\n  background: color-mix(in srgb, var(--fx-color-surface-hover) 55%, transparent);\n  color: var(--fx-color-text-primary);\n}\n.cb-source-row.is-sel {\n  background: var(--fx-color-selection-bg);\n  color: var(--fx-color-selection-fg);\n  box-shadow: inset var(--fx-border-focus-width) 0 0 var(--fx-color-selection-indicator);\n}\n.cb-source-row:focus-visible,\n.cb-source-group-head:focus-visible {\n  outline: var(--fx-border-focus-width) solid var(--fx-color-border-focus);\n  outline-offset: calc(-1 * var(--fx-border-focus-width));\n}\n.cb-source-chev {\n  display: inline-flex;\n  align-items: center;\n  justify-content: 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  color: var(--fx-color-text-muted);\n  transition: transform var(--fx-motion-hover) var(--fx-motion-ease);\n}\n.cb-source-chev.hidden {\n  visibility: hidden;\n}\n.cb-source-icon {\n  display: inline-flex;\n  flex: 0 0 var(--fx-component-choice-size);\n  color: var(--cb-folder-icon);\n}\n.cb-source-name {\n  flex: 1;\n}\n.cb-source-fav-row {\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  min-width: 0;\n}\n.cb-source-fav-row .cb-source-row {\n  flex: 1;\n  width: auto;\n  min-width: 0;\n  padding-right: var(--fx-ref-space-4);\n  background: transparent;\n  box-shadow: none;\n}\n.cb-source-fav-row .cb-source-row:hover {\n  background: transparent;\n}\n.cb-source-fav-row:hover {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.cb-source-fav-row.is-path:not(.is-sel) {\n  background: color-mix(in srgb, var(--fx-color-surface-hover) 55%, transparent);\n  color: var(--fx-color-text-primary);\n}\n.cb-source-fav-row.is-sel {\n  background: var(--fx-color-selection-bg);\n  color: var(--fx-color-selection-fg);\n  box-shadow: inset var(--fx-border-focus-width) 0 0 var(--fx-color-selection-indicator);\n}\n.cb-source-unfav {\n  appearance: none;\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--fx-component-control-icon-hit-area-min);\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--fx-color-status-warning-fg);\n  cursor: pointer;\n}\n.cb-source-unfav:hover {\n  color: var(--fx-color-text-primary);\n}\n.cb-source-virtual-root {\n  padding-left: var(--fx-ref-space-16);\n  font-weight: var(--fx-ref-font-weight-600);\n}\n.cb-asset-view {\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n}\n.cb-toolbar {\n  position: relative;\n  flex: 0 0 var(--fx-component-panel-header-height);\n  gap: var(--fx-ref-space-6);\n  min-width: 0;\n  padding: 0 var(--fx-ref-space-8);\n}\n.cb-toolbar > .fx-panel-header__slot:nth-child(2) {\n  flex: 1 1 auto;\n}\n.cb-toolbar-group {\n  flex: 0 0 auto;\n}\n.cb-navigation-bar {\n  flex: 1 1 auto;\n  min-width: calc(var(--fx-ref-space-48) + var(--fx-ref-space-32));\n  overflow: hidden;\n}\n.cb-address-slot {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: var(--fx-ref-space-32);\n  height: var(--fx-component-control-height-compact);\n}\n.cb-address,\n.cb-address-input {\n  width: 100%;\n  height: var(--fx-component-control-height-compact);\n  min-width: 0;\n  box-sizing: border-box;\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-inset);\n  color: var(--fx-color-text-secondary);\n}\n.cb-address {\n  display: flex;\n  align-items: center;\n  padding: 0 var(--fx-ref-space-8);\n  overflow: hidden;\n  cursor: text;\n}\n.cb-address-crumb {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  min-width: 0;\n  overflow: hidden;\n}\n.cb-root .cb-address:focus-visible,\n.cb-root .cb-address-input:focus,\n.cb-root .cb-address-input:focus-visible {\n  outline: none;\n  border-color: var(--fx-color-border-essential);\n}\n.cb-address-input {\n  margin: 0;\n  padding: 0 var(--fx-ref-space-8);\n  font: inherit;\n  color: var(--fx-color-text-primary);\n  appearance: none;\n  outline: none;\n}\n.cb-address-input::placeholder {\n  color: var(--fx-color-text-muted);\n}\n.cb-crumb-segment {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  color: var(--fx-color-text-muted);\n}\n.cb-crumb-item {\n  min-width: 0;\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-4);\n  border: 0;\n  border-radius: var(--fx-ref-radius-4);\n  background: transparent;\n  color: var(--fx-color-text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.cb-crumb-item:hover {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.cb-crumb-current {\n  color: var(--fx-color-text-primary);\n  font-weight: var(--fx-ref-font-weight-600);\n}\n.cb-crumb-chevron {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--fx-color-text-muted);\n}\n.cb-crumb-chevron-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--fx-ref-space-16);\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(--fx-color-text-muted);\n  cursor: pointer;\n  appearance: none;\n}\n.cb-crumb-chevron-btn > svg {\n  transition: transform 0.12s ease;\n}\n.cb-crumb-chevron-btn:hover {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.cb-crumb-chevron-btn[aria-expanded=true] {\n  color: var(--fx-color-text-primary);\n}\n.cb-crumb-chevron-btn[aria-expanded=true] > svg {\n  transform: rotate(90deg);\n}\n.cb-crumb-chevron .fx-menu-dropdown__anchor {\n  display: inline-flex;\n}\n.cb-crumb-menu .fx-menu {\n  max-height: 320px;\n  overflow-y: auto;\n}\n.cb-crumb-menu .fx-menu__item[data-active] {\n  color: var(--fx-color-text-primary);\n  font-weight: var(--fx-ref-font-weight-600);\n}\n.cb-content-body {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n}\n.cb-grid-column {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n  min-height: var(--cb-grid-min-height);\n  overflow: hidden;\n}\n.cb-filter-bar {\n  position: relative;\n  flex: 0 0 var(--fx-component-panel-header-height);\n  gap: var(--fx-ref-space-6);\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8);\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\n}\n.cb-filter-bar .is-active {\n  color: var(--fx-color-brand-text);\n  background: var(--fx-color-brand-soft);\n}\n.cb-search-box {\n  flex: 0 0 auto;\n  width: var(--fx-component-menu-min-width);\n  max-width: 100%;\n}\n.cb-search-box .fx-input {\n  height: var(--fx-component-control-height-compact);\n}\n.cb-pop {\n  position: absolute;\n  z-index: var(--fx-layer-popover);\n}\n.cb-pop-create {\n  top: var(--fx-component-panel-header-height);\n  left: var(--fx-ref-space-8);\n}\n.cb-pop-import {\n  top: var(--fx-component-panel-header-height);\n  left: var(--cb-import-pop-left);\n}\n.cb-settings-menu {\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-default);\n  border-radius: var(--fx-radius-popover);\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-primary);\n  box-shadow: var(--fx-shadow-floating);\n}\n.cb-settings-menu > strong {\n  display: block;\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8);\n  color: var(--fx-color-text-muted);\n  font-size: var(--fx-type-caption-font-size);\n}\n.cb-menu-title {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--fx-ref-space-6);\n}\n.cb-menu-icon-placeholder {\n  width: var(--fx-component-control-icon-size);\n}\n.cb-layout-switch {\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-8) var(--fx-ref-space-6);\n}\n.cb-settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--fx-ref-space-12);\n  padding: var(--fx-ref-space-8);\n}\n.cb-settings-label {\n  color: var(--fx-color-text-secondary);\n  white-space: nowrap;\n}\n.cb-settings-range {\n  flex: 0 0 auto;\n}\n.cb-settings-switch-row {\n  margin: 0 var(--fx-ref-space-2);\n}\n.cb-grid-view {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.cb-fe-grid {\n  display: grid;\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  grid-template-columns: repeat(auto-fill, minmax(0, var(--cb-thumb, 88px)));\n  grid-auto-rows: max-content;\n  align-content: start;\n  justify-content: start;\n  gap: calc(var(--fx-ref-space-8) + var(--cb-group-stack));\n  padding: var(--fx-ref-space-12);\n  overflow-x: hidden;\n}\n.cb-grid-item {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  padding: var(--fx-ref-space-4);\n  border: var(--fx-border-width) solid transparent;\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-secondary);\n  cursor: pointer;\n}\n.cb-grid-folder {\n  background: transparent;\n}\n.cb-grid-item:hover {\n  background: var(--fx-color-surface-hover);\n}\n.cb-grid-item.sel {\n  border-color: var(--fx-color-selection-indicator);\n  background: var(--fx-color-selection-bg);\n  box-shadow: 0 0 0 var(--fx-border-width) var(--fx-color-selection-indicator);\n}\n.cb-grid-item:focus-visible {\n  outline: var(--fx-border-focus-width) solid var(--fx-color-border-focus);\n  outline-offset: var(--fx-border-focus-offset);\n}\n.cb-grid-item.is-busy,\n.cb-details-row.is-busy {\n  cursor: progress;\n}\n.cb-item-busy-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(--fx-color-surface-raised) 55%, transparent);\n  pointer-events: none;\n}\n.cb-item-busy-veil .fx-spinner,\n.cb-item-busy-inline {\n  width: 14px;\n  height: 14px;\n  flex: 0 0 14px;\n}\n.cb-grid-view.cb-layout-list .cb-item-busy-inline {\n  margin-left: auto;\n}\n.cb-grid-thumb {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n  overflow: hidden;\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-inset);\n}\n.cb-grid-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  color: var(--fx-color-text-muted);\n}\n.cb-grid-icon svg {\n  width: 46%;\n  height: 46%;\n}\n.cb-folder-icon {\n  color: var(--cb-folder-icon);\n}\n.cb-preview-ico.cb-folder-icon,\n.cb-preview-list-ico.cb-folder-icon,\n.cb-details-icon.cb-folder-icon,\n.cb-filter-option-icon.cb-folder-icon {\n  color: var(--cb-folder-icon);\n}\n.cb-grid-thumb .cb-folder-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n.cb-grid-thumb .cb-folder-icon svg {\n  width: 86%;\n  height: 86%;\n  color: currentColor;\n}\n.cb-grid-label {\n  width: 100%;\n  margin-top: var(--fx-ref-space-4);\n  overflow: hidden;\n  text-align: center;\n}\n.cb-fe-label {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  width: 100%;\n  flex: 0 0 auto;\n  height: calc(var(--cb-card-line) * 4);\n  overflow: hidden;\n}\n.cb-fe-name {\n  display: -webkit-box;\n  margin-top: 0;\n  overflow: hidden;\n  color: var(--fx-color-text-primary);\n  font-size: var(--fx-type-caption-font-size);\n  line-height: var(--cb-card-line);\n  text-align: center;\n  white-space: normal;\n  word-break: normal;\n  overflow-wrap: anywhere;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 4;\n}\n.cb-fe-label.has-kind .cb-fe-name {\n  min-height: calc(var(--cb-card-line) * 3);\n  -webkit-line-clamp: 3;\n}\n.cb-card-meta,\n.cb-card-kind {\n  width: 100%;\n  flex: 0 0 auto;\n  margin-top: auto;\n  overflow: hidden;\n  color: var(--fx-color-text-muted);\n  font-size: var(--fx-type-caption-font-size);\n  line-height: var(--cb-card-line);\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cb-fe-grid.cb-layout-list {\n  grid-template-columns: minmax(0, 1fr);\n  grid-auto-rows: auto;\n  gap: var(--fx-ref-space-2);\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-6);\n  overflow-x: hidden;\n}\n.cb-grid-view.cb-layout-list .cb-grid-item {\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  min-height: 40px;\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-8);\n  gap: var(--fx-ref-space-8);\n  overflow: hidden;\n  box-shadow: none;\n}\n.cb-grid-view.cb-layout-list .cb-grid-item.sel {\n  box-shadow: none;\n}\n.cb-grid-view.cb-layout-list .cb-grid-thumb {\n  width: 32px;\n  height: 32px;\n  flex: 0 0 32px;\n  aspect-ratio: auto;\n  overflow: visible;\n}\n.cb-grid-view.cb-layout-list .cb-file-thumb {\n  position: static;\n}\n.cb-grid-view.cb-layout-list .cb-grid-thumb svg {\n  width: 20px;\n  height: 20px;\n}\n.cb-layout-list .cb-fe-label {\n  flex: 1 1 auto;\n  min-width: 0;\n  height: auto;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n  text-align: left;\n}\n.cb-layout-list .cb-fe-name,\n.cb-layout-list .cb-fe-label.has-kind .cb-fe-name {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n  text-align: left;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: unset;\n}\n.cb-layout-list .cb-card-meta,\n.cb-layout-list .cb-card-kind {\n  margin-top: 0;\n}\n.cb-layout-list .cb-card-meta {\n  display: none;\n}\n.cb-grid-view.cb-layout-list .cb-group-card:not(.cb-pack-expanded),\n.cb-grid-view.cb-layout-list .cb-group-card.sel:not(.cb-pack-expanded) {\n  box-shadow: none;\n}\n.cb-grid-view.cb-layout-list .cb-group-member:not(.sel) {\n  background: transparent;\n}\n.cb-grid-view.cb-layout-list .cb-group-member:not(.sel):hover {\n  background: var(--fx-color-surface-hover);\n}\n.cb-grid-view.cb-layout-list .cb-group-card,\n.cb-grid-view.cb-layout-list .cb-pack-expanded {\n  padding-right: calc(var(--fx-ref-space-8) + 44px);\n}\n.cb-grid-view.cb-layout-list .cb-group-badge {\n  top: 50%;\n  right: var(--fx-ref-space-8);\n  bottom: auto;\n  transform: translateY(-50%);\n}\n.cb-details-view {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-height: 0;\n  overflow: auto;\n  padding: 0 var(--fx-ref-space-6) var(--fx-ref-space-8);\n  --cb-details-cols: minmax(160px, 1fr) 160px 90px 130px;\n}\n.cb-details-header,\n.cb-details-row {\n  display: grid;\n  grid-template-columns: var(--cb-details-cols);\n  align-items: center;\n}\n.cb-details-header {\n  position: sticky;\n  z-index: var(--fx-layer-sticky);\n  top: 0;\n  min-height: var(--fx-component-editor-row-height);\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-default);\n  background: var(--fx-color-surface-canvas);\n  color: var(--fx-color-text-muted);\n  font-size: var(--fx-type-caption-font-size);\n}\n.cb-details-th {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-4);\n  height: 100%;\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-8);\n  border: 0;\n  background: transparent;\n  color: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n.cb-details-th:hover {\n  color: var(--fx-color-text-primary);\n}\n.cb-details-th.active,\n.cb-details-th[data-active=true] {\n  color: var(--fx-color-brand-text);\n}\n.cb-details-sort-arrow {\n  font-size: 9px;\n}\n.cb-details-body {\n  display: flex;\n  flex-direction: column;\n}\n.cb-details-row {\n  position: relative;\n  width: 100%;\n  border-radius: var(--fx-ref-radius-4);\n  color: var(--fx-color-text-secondary);\n  cursor: pointer;\n}\n.cb-details-row:hover {\n  background: var(--fx-color-surface-hover);\n}\n.cb-details-row.sel {\n  background: var(--fx-color-selection-bg);\n  box-shadow: inset var(--fx-border-focus-width) 0 0 var(--fx-color-selection-indicator);\n}\n.cb-details-row:focus-visible {\n  outline: var(--fx-border-focus-width) solid var(--fx-color-border-focus);\n  outline-offset: -2px;\n}\n.cb-details-cell {\n  min-width: 0;\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-8);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cb-details-name {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-6);\n}\n.cb-details-icon {\n  display: inline-flex;\n  width: 16px;\n  height: 16px;\n  flex: 0 0 16px;\n}\n.cb-details-icon svg {\n  width: 16px;\n  height: 16px;\n}\n.cb-details-type,\n.cb-details-size,\n.cb-details-modified {\n  color: var(--fx-color-text-muted);\n}\n.cb-empty {\n  grid-column: 1 / -1;\n  color: var(--fx-color-text-muted);\n}\n.cb-status {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 0 0 var(--fx-component-editor-row-height);\n  min-height: var(--fx-component-editor-row-height);\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-8);\n  border-top: var(--fx-border-width) solid var(--fx-color-border-subtle);\n  color: var(--fx-color-text-muted);\n  font-size: var(--fx-type-caption-font-size);\n}\n.cb-file-thumb {\n  position: relative;\n}\n.cb-group-card:not(.cb-pack-expanded) {\n  box-shadow:\n    3px 3px 0 0 var(--fx-color-surface-raised),\n    3px 3px 0 1px var(--fx-color-border-subtle),\n    6px 6px 0 0 var(--fx-color-surface-raised),\n    6px 6px 0 1px var(--fx-color-border-subtle);\n}\n.cb-group-card.sel:not(.cb-pack-expanded) {\n  box-shadow:\n    0 0 0 var(--fx-border-width) var(--fx-color-selection-indicator),\n    3px 3px 0 0 var(--fx-color-surface-raised),\n    3px 3px 0 1px var(--fx-color-border-subtle),\n    6px 6px 0 0 var(--fx-color-surface-raised),\n    6px 6px 0 1px var(--fx-color-border-subtle);\n}\n.cb-group-badge {\n  position: absolute;\n  right: 3px;\n  bottom: 3px;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  height: 22px;\n  padding: 0 8px;\n  border: 0;\n  border-radius: 11px;\n  background: color-mix(in srgb, var(--fx-color-surface-canvas) 62%, transparent);\n  color: var(--fx-color-text-inverse);\n  font-size: 11px;\n  font-weight: var(--fx-ref-font-weight-600);\n  cursor: pointer;\n}\n.cb-group-badge:hover {\n  background: rgb(0 0 0 / 62%);\n  color: #fff;\n}\n.cb-group-badge svg {\n  width: 11px;\n  height: 11px;\n  transition: transform var(--fx-motion-hover) var(--fx-motion-ease);\n}\n.cb-group-backdrops {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  pointer-events: none;\n}\n.cb-group-backdrop {\n  position: absolute;\n  background: rgb(0 0 0 / 10%);\n}\n.cb-group-member {\n  z-index: 1;\n}\n.cb-group-badge.open svg {\n  transform: rotate(180deg);\n}\n.cb-preview-panel {\n  display: flex;\n  flex: 0 0 var(--cb-preview-w, 280px);\n  flex-direction: column;\n  width: var(--cb-preview-w, 280px);\n  min-width: 180px;\n  max-width: 560px;\n  min-height: 0;\n  overflow: hidden;\n  border-left: var(--fx-border-width) solid var(--fx-color-border-subtle);\n  background: var(--fx-color-surface-canvas);\n}\n.cb-preview-head {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-8);\n  padding: var(--fx-ref-space-8) var(--fx-ref-space-8);\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\n  flex-shrink: 0;\n}\n.cb-preview-mode-bar {\n  display: flex;\n  gap: var(--fx-ref-space-4);\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8);\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\n  flex-shrink: 0;\n}\n.cb-preview-mode-btn {\n  flex: 1 1 0;\n  min-width: 0;\n  height: 24px;\n  padding: 0 var(--fx-ref-space-8);\n  overflow: hidden;\n  border: var(--fx-border-width) solid var(--fx-color-border-subtle);\n  border-radius: var(--fx-radius-control);\n  background: transparent;\n  color: var(--fx-color-text-muted);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.cb-preview-mode-btn:hover {\n  color: var(--fx-color-text-primary);\n  background: var(--fx-color-surface-hover);\n}\n.cb-preview-mode-btn.is-active {\n  color: var(--fx-color-text-primary);\n  border-color: var(--fx-color-border-strong);\n  background: var(--fx-color-surface-raised);\n}\n.cb-preview-ico,\n.cb-preview-list-ico {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 28px;\n  width: 28px;\n  height: 28px;\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-muted);\n}\n.cb-preview-list-ico {\n  flex-basis: 16px;\n  width: 16px;\n  height: 16px;\n  background: transparent;\n}\n.cb-preview-title {\n  flex: 1;\n  min-width: 0;\n}\n.cb-preview-title .name {\n  overflow: hidden;\n  color: var(--fx-color-text-primary);\n  font-weight: var(--fx-ref-font-weight-600);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cb-preview-title .meta {\n  overflow: hidden;\n  color: var(--fx-color-text-muted);\n  font: var(--fx-type-code-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  white-space: nowrap;\n}\n.cb-preview-close {\n  width: 24px;\n  height: 24px;\n}\n.cb-preview-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--fx-ref-space-8);\n}\n.cb-preview-empty .cb-preview-body {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--fx-color-text-muted);\n}\n.cb-preview-list,\n.cb-preview-asset-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--fx-ref-space-4);\n}\n.cb-preview-list-item,\n.cb-preview-asset-row {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-8);\n  min-width: 0;\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-6);\n  border-radius: var(--fx-radius-control);\n  color: var(--fx-color-text-secondary);\n}\n.cb-preview-list-item:hover,\n.cb-preview-asset-row:hover {\n  background: var(--fx-color-surface-hover);\n}\n.cb-preview-list-item > span:nth-of-type(2) {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cb-preview-list-item .sub,\n.cb-preview-asset-row .guid,\n.cb-preview-asset-row .kind {\n  color: var(--fx-color-text-muted);\n  font: var(--fx-type-code-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-code-font-family);\n}\n.cb-preview-list-item .sub {\n  flex: 0 1 38%;\n  min-width: 0;\n  margin-left: auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cb-preview-asset-row > .cb-preview-asset-main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.cb-preview-asset-row > .cb-preview-asset-main > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cb-preview-asset-row .kind {\n  margin-left: 0;\n}\n.cb-preview-asset-row .guid {\n  flex: 0 1 auto;\n  max-width: 42%;\n  min-width: 0;\n  margin-left: auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cb-preview-media {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--fx-ref-space-8);\n  min-height: 0;\n}\n.cb-preview-image {\n  display: block;\n  max-width: 100%;\n  max-height: min(360px, 50vh);\n  object-fit: contain;\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-inset);\n}\n.cb-preview-audio,\n.cb-preview-video {\n  width: 100%;\n  max-width: 100%;\n}\n.cb-preview-video {\n  max-height: min(360px, 50vh);\n  border-radius: var(--fx-radius-control);\n  background: #000;\n}\n.cb-preview-font-sample {\n  margin: 0;\n  color: var(--fx-color-text-primary);\n  font-size: 1.35rem;\n  line-height: 1.4;\n  text-align: center;\n}\n.cb-preview-font-meta {\n  margin: 0;\n  max-width: 100%;\n  overflow: hidden;\n  color: var(--fx-color-text-muted);\n  font: var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-code-font-family);\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cb-preview-asset-hero {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--fx-ref-space-16) 0 var(--fx-ref-space-8);\n}\n.cb-preview-hero-icon {\n  color: var(--fx-color-text-muted);\n}\n.cb-preview-note {\n  padding: var(--fx-ref-space-8) var(--fx-ref-space-8);\n  overflow: hidden;\n  border: var(--fx-border-width) solid var(--fx-color-border-subtle);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-muted);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cb-preview-source {\n  margin: 0;\n  padding: var(--fx-ref-space-8);\n  overflow: auto;\n  border: var(--fx-border-width) solid var(--fx-color-border-subtle);\n  border-radius: var(--fx-radius-control);\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  white-space: pre-wrap;\n}\n.cb-preview-code {\n  display: flex;\n  flex-direction: column;\n  gap: var(--fx-ref-space-6);\n  min-height: 0;\n}\n.cb-preview-code-head {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-8);\n}\n.cb-preview-code-badge {\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-8);\n  border-radius: var(--fx-radius-pill);\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-muted);\n  font: var(--fx-type-code-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-code-font-family);\n  letter-spacing: 0.03em;\n  text-transform: uppercase;\n}\n.cb-preview-code-hint {\n  color: var(--fx-color-text-disabled);\n  font-size: var(--fx-type-caption-font-size);\n}\n.cb-preview-code-plain,\n.cb-preview-code-shiki pre.shiki {\n  margin: 0;\n  white-space: pre-wrap;\n  word-break: break-word;\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.cb-preview-code-plain {\n  color: var(--fx-color-text-secondary);\n}\n.cb-preview-code-shiki pre.shiki {\n  background: transparent !important;\n}\n.cb-preview-code-shiki pre.shiki code {\n  background: transparent;\n  padding: 0;\n  border-radius: 0;\n  color: inherit;\n  font-size: inherit;\n}\n.cb-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.cb-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}\n.cb-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.cb-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  text-align: left;\n  cursor: pointer;\n}\n.cb-filter-option:hover {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.cb-filter-option:disabled {\n  color: var(--fx-color-text-disabled);\n  cursor: default;\n}\n.cb-filter-option-icon {\n  flex: 0 0 14px;\n  width: 14px;\n  color: var(--fx-color-text-muted);\n}\n.cb-filter-check {\n  flex: 0 0 var(--fx-component-choice-size);\n  pointer-events: none;\n}\n.cb-filter-check.fx-choice {\n  align-items: center;\n  gap: 0;\n  min-height: 0;\n  margin: 0;\n}\n.cb-filter-check .fx-choice__text {\n  display: none;\n}\n.cb-radio-menu {\n  width: 14px;\n  height: 14px;\n  flex: 0 0 14px;\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\n  border-radius: 999px;\n}\n.cb-radio-menu[data-checked=true] {\n  border-color: var(--fx-color-choice-indicator);\n  background:\n    radial-gradient(\n      circle at center,\n      var(--fx-color-choice-indicator) 4px,\n      transparent 5px);\n}\n@container (max-width: 660px) {\n  .cb-toolbar-group .fx-button {\n    width: var(--fx-component-control-height-compact);\n    padding: 0;\n    font-size: 0;\n  }\n}\n';
+if (typeof document !== "undefined" && !document.querySelector('style[data-forgeax-css="L2RhdGEvaG9tZS9nYWhvdWxpYW8vYWN0aW9ucy1ydW5uZXIvX3dvcmsvZm9yZ2VheC12aWV3L2ZvcmdlYXgtdmlldy9wYWNrYWdlcy92aWV3LXBsdWdpbi1jb250ZW50LWJyb3dzZXIvc3JjL3VpL2NvbnRlbnQtYnJvd3Nlci5jc3M"]')) {
+  const style = document.createElement("style");
+  style.dataset.forgeaxCss = "L2RhdGEvaG9tZS9nYWhvdWxpYW8vYWN0aW9ucy1ydW5uZXIvX3dvcmsvZm9yZ2VheC12aWV3L2ZvcmdlYXgtdmlldy9wYWNrYWdlcy92aWV3LXBsdWdpbi1jb250ZW50LWJyb3dzZXIvc3JjL3VpL2NvbnRlbnQtYnJvd3Nlci5jc3M";
+  style.textContent = css;
+  document.head.append(style);
+}
+
+// packages/view-plugin-content-browser/src/ui/mount.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+async function mountContentBrowserPanel(props) {
+  if (!props.mountElement) throw new TypeError("mountContentBrowserPanel requires mountElement");
+  const root = createRoot(props.mountElement);
+  root.render(
+    /* @__PURE__ */ jsx10(OverlayRootProvider, { root: props.overlayRoot ?? props.mountElement, children: /* @__PURE__ */ jsx10(
+      ContentBrowserPanel,
+      {
+        client: props.client,
+        demo: props.demo
+      }
+    ) })
+  );
+  return async () => root.unmount();
+}
+
+export {
+  mountContentBrowserPanel
+};
+//# sourceMappingURL=chunk-I5BFP7SS.mjs.map