npm - @hyperframes/studio - Versions diffs - 0.6.2 → 0.6.4 - Mend

@hyperframes/studio 0.6.2 → 0.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist/assets/index-DMJCfYoN.css +1 -0
package/dist/assets/index-DsnMQhJc.js +117 -0
package/dist/index.html +2 -2
package/package.json +4 -4
package/src/App.tsx +14 -18
package/src/components/StudioRightPanel.tsx +15 -1
package/src/components/editor/DomEditOverlay.test.ts +165 -1
package/src/components/editor/DomEditOverlay.tsx +0 -1
package/src/components/editor/LayersPanel.tsx +289 -0
package/src/components/editor/SourceEditor.tsx +20 -3
package/src/components/editor/propertyPanelPrimitives.tsx +24 -5
package/src/components/editor/propertyPanelStyleSections.tsx +6 -6
package/src/components/editor/useDomEditOverlayGestures.ts +1 -10
package/src/components/nle/NLELayout.tsx +4 -2
package/src/components/nle/NLEPreview.tsx +250 -30
package/src/components/nle/previewZoom.test.ts +118 -0
package/src/components/nle/previewZoom.ts +84 -0
package/src/components/renders/RenderQueue.tsx +2 -2
package/src/contexts/DomEditContext.tsx +3 -0
package/src/hooks/useConsoleErrorCapture.ts +3 -3
package/src/hooks/useDomEditSession.ts +1 -0
package/src/hooks/useDomSelection.ts +27 -6
package/src/hooks/usePanelLayout.ts +8 -2
package/src/player/hooks/useTimelinePlayer.ts +11 -1
package/src/player/store/playerStore.ts +18 -2
package/src/utils/studioHelpers.ts +1 -1
package/src/utils/studioUiPreferences.test.ts +49 -0
package/src/utils/studioUiPreferences.ts +84 -0
package/dist/assets/index-D1JDq7Gg.css +0 -1
package/dist/assets/index-hYc4aP7M.js +0 -117

package/dist/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-hYc4aP7M.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-D1JDq7Gg.css">
+    <script type="module" crossorigin src="/assets/index-DsnMQhJc.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DMJCfYoN.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "",
   "repository": {
     "type": "git",
@@ -32,8 +32,8 @@
     "@phosphor-icons/react": "^2.1.10",
     "codemirror": "^6.0.1",
     "motion": "^12.38.0",
-    "@hyperframes/core": "0.6.2",
-    "@hyperframes/player": "0.6.2"
+    "@hyperframes/core": "0.6.4",
+    "@hyperframes/player": "0.6.4"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -47,7 +47,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.6.2"
+    "@hyperframes/producer": "0.6.4"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx CHANGED Viewed

@@ -13,6 +13,7 @@ import { useManifestPersistence } from "./hooks/useManifestPersistence";
 import { useTimelineEditing } from "./hooks/useTimelineEditing";
 import { useDomEditSession } from "./hooks/useDomEditSession";
 import { useAppHotkeys } from "./hooks/useAppHotkeys";
+import { readStudioUiPreferences, writeStudioUiPreferences } from "./utils/studioUiPreferences";
 import { useCaptionDetection } from "./hooks/useCaptionDetection";
 import { useRenderClipContent } from "./hooks/useRenderClipContent";
 import { useConsoleErrorCapture } from "./hooks/useConsoleErrorCapture";
@@ -26,7 +27,6 @@ import {
   STUDIO_MOTION_PANEL_ENABLED,
 } from "./components/editor/manualEditingAvailability";
 import { getStudioMotionForSelection } from "./components/editor/studioMotion";
-import { getTimelineElementKey, isTimelineElementActiveAtTime } from "./utils/timelineInspector";
 import type { DomEditSelection } from "./components/editor/domEditing";
 import { AskAgentModal } from "./components/AskAgentModal";
 import { StudioHeader } from "./components/StudioHeader";
@@ -79,7 +79,6 @@ export function StudioApp() {
   const captionSync = useCaptionSync(projectId);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const timelineElements = usePlayerStore((s) => s.elements);
-  const selectedTimelineElementId = usePlayerStore((s) => s.selectedElementId);
   const setSelectedTimelineElementId = usePlayerStore((s) => s.setSelectedElementId);
   const timelineDuration = usePlayerStore((s) => s.duration);
   const isPlaying = usePlayerStore((s) => s.isPlaying);
@@ -100,8 +99,15 @@ export function StudioApp() {
     window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 300);
   }, []);
-  const [timelineVisible, setTimelineVisible] = useState(true);
-  const toggleTimelineVisibility = useCallback(() => setTimelineVisible((v) => !v), []);
+  const [timelineVisible, setTimelineVisible] = useState(
+    () => readStudioUiPreferences().timelineVisible ?? true,
+  );
+  const toggleTimelineVisibility = useCallback(() => {
+    setTimelineVisible((v) => {
+      writeStudioUiPreferences({ timelineVisible: !v });
+      return !v;
+    });
+  }, []);
   const { appToast, showToast } = useToast();
   const panelLayout = usePanelLayout();
   const editHistory = usePersistentEditHistory({ projectId });
@@ -284,27 +290,17 @@ export function StudioApp() {
           domEditSession.domEditSelection,
         )
       : null;
-  const selectedTimelineElement = useMemo(
-    () =>
-      selectedTimelineElementId
-        ? (timelineElements.find((el) => getTimelineElementKey(el) === selectedTimelineElementId) ??
-          null)
-        : null,
-    [selectedTimelineElementId, timelineElements],
-  );
+  const layersPanelActive =
+    STUDIO_INSPECTOR_PANELS_ENABLED && panelLayout.rightPanelTab === "layers";
   const designPanelActive =
     STUDIO_INSPECTOR_PANELS_ENABLED && panelLayout.rightPanelTab === "design";
   const motionPanelActive =
     STUDIO_INSPECTOR_PANELS_ENABLED &&
     STUDIO_MOTION_PANEL_ENABLED &&
     panelLayout.rightPanelTab === "motion";
-  const inspectorPanelActive = designPanelActive || motionPanelActive;
+  const inspectorPanelActive = layersPanelActive || designPanelActive || motionPanelActive;
   const shouldShowSelectedDomBounds =
-    inspectorPanelActive &&
-    !panelLayout.rightCollapsed &&
-    !isPlaying &&
-    (!selectedTimelineElement ||
-      isTimelineElementActiveAtTime(currentTime, selectedTimelineElement));
+    inspectorPanelActive && !panelLayout.rightCollapsed && !isPlaying;
   const inspectorButtonActive =
     STUDIO_INSPECTOR_PANELS_ENABLED && !panelLayout.rightCollapsed && inspectorPanelActive;

package/src/components/StudioRightPanel.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { PropertyPanel } from "./editor/PropertyPanel";
 import { MotionPanel } from "./editor/MotionPanel";
+import { LayersPanel } from "./editor/LayersPanel";
 import { CaptionPropertyPanel } from "../captions/components/CaptionPropertyPanel";
 import { RenderQueue } from "./renders/RenderQueue";
 import type { RenderJob } from "./renders/useRenderQueue";
@@ -115,6 +116,17 @@ export function StudioRightPanel({
                   >
                     Design
                   </button>
+                  <button
+                    type="button"
+                    onClick={() => setRightPanelTab("layers")}
+                    className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
+                      rightPanelTab === "layers"
+                        ? "bg-neutral-800 text-white"
+                        : "text-neutral-500 hover:bg-neutral-800/70 hover:text-neutral-200"
+                    }`}
+                  >
+                    Layers
+                  </button>
                   {STUDIO_MOTION_PANEL_ENABLED && (
                     <button
                       type="button"
@@ -143,7 +155,9 @@ export function StudioRightPanel({
               </button>
             </div>
             <div className="min-h-0 flex-1">
-              {designPanelActive ? (
+              {rightPanelTab === "layers" ? (
+                <LayersPanel />
+              ) : designPanelActive ? (
                 <PropertyPanel
                   projectId={projectId}
                   assets={assets}

package/src/components/editor/DomEditOverlay.test.ts CHANGED Viewed

@@ -1,6 +1,11 @@
-import { describe, expect, it } from "vitest";
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it, vi } from "vitest";
 import { Window } from "happy-dom";
 import {
+  DomEditOverlay,
   filterNestedDomEditGroupItems,
   focusDomEditOverlayElement,
   hasDomEditRotationChanged,
@@ -9,6 +14,75 @@ import {
   resolveDomEditResizeGesture,
   resolveDomEditRotationGesture,
 } from "./DomEditOverlay";
+import type { DomEditSelection } from "./domEditing";
+// React 19 warns unless the test environment opts into act().
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+vi.mock("./useDomEditOverlayGestures", () => ({
+  createDomEditOverlayGestureHandlers: () => ({
+    startGesture: () => true,
+    startGroupDrag: () => {},
+    onPointerMove: () => {},
+    onPointerUp: () => {},
+    clearPointerState: () => {},
+  }),
+}));
+vi.mock("./useDomEditOverlayRects", async () => {
+  const React = await import("react");
+  const { rectsEqual } = await import("./domEditOverlayGeometry");
+  return {
+    useDomEditOverlayRects: () => {
+      const [overlayRect, setOverlayRectState] = React.useState(null);
+      const overlayRectRef = React.useRef(null);
+      const [groupOverlayItems, setGroupOverlayItemsState] = React.useState([]);
+      const groupOverlayItemsRef = React.useRef([]);
+      const setOverlayRect = (next: unknown) => {
+        if (rectsEqual(overlayRectRef.current, next)) return;
+        overlayRectRef.current = next;
+        setOverlayRectState(next);
+      };
+      const setGroupOverlayItems = (next: unknown[]) => {
+        groupOverlayItemsRef.current = next;
+        setGroupOverlayItemsState(next);
+      };
+      return {
+        overlayRect,
+        overlayRectRef,
+        setOverlayRect,
+        hoverRect: null,
+        hoverRectRef: { current: null },
+        setHoverRect: () => {},
+        groupOverlayItems,
+        groupOverlayItemsRef,
+        setGroupOverlayItems,
+      };
+    },
+  };
+});
+vi.mock("./domEditOverlayGeometry", async () => {
+  const actual = await vi.importActual<typeof import("./domEditOverlayGeometry")>(
+    "./domEditOverlayGeometry",
+  );
+  return {
+    ...actual,
+    toOverlayRect: () => ({
+      left: 24,
+      top: 36,
+      width: 180,
+      height: 72,
+      editScaleX: 1,
+      editScaleY: 1,
+    }),
+  };
+});
 describe("focusDomEditOverlayElement", () => {
   it("focuses the canvas overlay without scrolling", () => {
@@ -21,6 +95,96 @@ describe("focusDomEditOverlayElement", () => {
   });
 });
+describe("DomEditOverlay", () => {
+  it("renders selected bounds right after clicking a movable selection", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const selection: DomEditSelection = {
+      element: document.createElement("div"),
+      id: "hero-title",
+      selector: ".hero-title",
+      selectorIndex: 0,
+      sourceFile: "index.html",
+      tagName: "div",
+      label: "Hero Title",
+      textContent: "Hello",
+      textFields: [],
+      capabilities: {
+        canEditText: true,
+        canEditLayout: true,
+        canApplyManualOffset: true,
+        canApplyManualSize: false,
+        canApplyManualRotation: false,
+        canAdjustOpacity: true,
+        canAdjustFill: true,
+        canAdjustBorderRadius: true,
+        canAdjustStroke: true,
+        canAdjustShadow: true,
+        canAdjustZIndex: true,
+      },
+      computedStyle: {
+        display: "block",
+        position: "absolute",
+      },
+    };
+    let currentSelection: DomEditSelection | null = null;
+    const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
+    const originalPointerCapture = HTMLDivElement.prototype.setPointerCapture;
+    HTMLDivElement.prototype.setPointerCapture = () => {};
+    function Harness() {
+      const [selected, setSelected] = React.useState<DomEditSelection | null>(null);
+      currentSelection = selected;
+      return React.createElement(DomEditOverlay, {
+        iframeRef,
+        activeCompositionPath: null,
+        selection: selected,
+        hoverSelection: null,
+        groupSelections: [],
+        onCanvasMouseDown: () => {},
+        onCanvasPointerMove: () => selection,
+        onCanvasPointerLeave: () => {},
+        onSelectionChange: (next: DomEditSelection) => setSelected(next),
+        onBlockedMove: () => {},
+        onPathOffsetCommit: () => {},
+        onGroupPathOffsetCommit: () => {},
+        onBoxSizeCommit: () => {},
+        onRotationCommit: () => {},
+      });
+    }
+    act(() => {
+      root.render(React.createElement(Harness));
+    });
+    const overlay = host.querySelector('[aria-label="Composition canvas"]') as HTMLDivElement;
+    expect(overlay).toBeTruthy();
+    act(() => {
+      overlay.dispatchEvent(
+        new PointerEvent("pointerdown", {
+          bubbles: true,
+          button: 0,
+          clientX: 120,
+          clientY: 80,
+        }),
+      );
+    });
+    expect(currentSelection).toBe(selection);
+    expect(host.querySelector('[data-dom-edit-selection-box="true"]')).toBeTruthy();
+    act(() => {
+      root.unmount();
+    });
+    HTMLDivElement.prototype.setPointerCapture = originalPointerCapture;
+    host.remove();
+  });
+});
 describe("resolveDomEditCoordinateScale", () => {
   it("uses the top-level preview scale when no source boundary dimensions are available", () => {
     expect(

package/src/components/editor/DomEditOverlay.tsx CHANGED Viewed

@@ -223,7 +223,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     suppressNextOverlayMouseDownRef.current = true;
     selectionRef.current = candidate;
-    overlayRectRef.current = candidateRect;
     setOverlayRect(candidateRect);
     const didStartGesture = gestures.startGesture("drag", event, {
       selection: candidate,

package/src/components/editor/LayersPanel.tsx ADDED Viewed

@@ -0,0 +1,289 @@
+import { memo, useState, useCallback, useEffect, useRef } from "react";
+import {
+  collectDomEditLayerItems,
+  getDomEditLayerKey,
+  resolveDomEditSelection,
+  type DomEditLayerItem,
+} from "./domEditing";
+import { useStudioContext } from "../../contexts/StudioContext";
+import { useDomEditContext } from "../../contexts/DomEditContext";
+import { usePlayerStore } from "../../player";
+import { findMatchingTimelineElementId } from "../../utils/studioHelpers";
+import { Layers } from "../../icons/SystemIcons";
+const TAG_ICONS: Record<string, string> = {
+  video: "Vi",
+  audio: "Au",
+  img: "Im",
+  svg: "Sv",
+  canvas: "Cn",
+  div: "Di",
+  section: "Se",
+  span: "Sp",
+  p: "P",
+  h1: "H1",
+  h2: "H2",
+  h3: "H3",
+  h4: "H4",
+  h5: "H5",
+  h6: "H6",
+  a: "A",
+  button: "Bt",
+  ul: "Ul",
+  ol: "Ol",
+  li: "Li",
+  style: "St",
+  template: "Te",
+};
+function getTagBadge(tagName: string): string {
+  return TAG_ICONS[tagName] ?? tagName.slice(0, 2).toUpperCase();
+}
+function isCompositionHost(el: HTMLElement): boolean {
+  return el.hasAttribute("data-composition-src") || el.hasAttribute("data-composition-file");
+}
+interface CollapsedState {
+  [key: string]: boolean;
+}
+export const LayersPanel = memo(function LayersPanel() {
+  const { previewIframeRef, activeCompPath, refreshKey, compositionLoading, timelineElements } =
+    useStudioContext();
+  const { domEditSelection, applyDomSelection, updateDomEditHoverSelection } = useDomEditContext();
+  const [layers, setLayers] = useState<DomEditLayerItem[]>([]);
+  const [collapsed, setCollapsed] = useState<CollapsedState>({});
+  const prevDocVersionRef = useRef(0);
+  const isMasterView = !activeCompPath || activeCompPath === "index.html";
+  const collectLayers = useCallback(() => {
+    const iframe = previewIframeRef.current;
+    if (!iframe) return;
+    let doc: Document | null = null;
+    try {
+      doc = iframe.contentDocument;
+    } catch {
+      return;
+    }
+    if (!doc) return;
+    const root =
+      doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.documentElement ?? null;
+    if (!root) return;
+    const items = collectDomEditLayerItems(root, {
+      activeCompositionPath: activeCompPath,
+      isMasterView,
+    });
+    setLayers(items);
+  }, [previewIframeRef, activeCompPath, isMasterView]);
+  useEffect(() => {
+    collectLayers();
+  }, [collectLayers, refreshKey]);
+  useEffect(() => {
+    const iframe = previewIframeRef.current;
+    if (!iframe) return;
+    const handleLoad = () => {
+      prevDocVersionRef.current += 1;
+      collectLayers();
+    };
+    iframe.addEventListener("load", handleLoad);
+    return () => iframe.removeEventListener("load", handleLoad);
+  }, [previewIframeRef, collectLayers]);
+  useEffect(() => {
+    if (!compositionLoading) {
+      const timer = setTimeout(collectLayers, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [compositionLoading, collectLayers]);
+  const resolveSelection = useCallback(
+    (layer: DomEditLayerItem) =>
+      resolveDomEditSelection(layer.element, {
+        activeCompositionPath: activeCompPath,
+        isMasterView,
+        preferClipAncestor: false,
+      }),
+    [activeCompPath, isMasterView],
+  );
+  const seekToLayer = useCallback(
+    (layer: DomEditLayerItem) => {
+      const selection = resolveSelection(layer);
+      if (!selection) return;
+      let matchedId = findMatchingTimelineElementId(selection, timelineElements);
+      // No direct match — walk up DOM ancestors to find the nearest element
+      // that has a timeline entry (e.g. a child of scene1 seeks to scene1.start)
+      if (!matchedId) {
+        const sourceFile = selection.sourceFile ?? "index.html";
+        let ancestor = layer.element.parentElement;
+        while (ancestor && !matchedId) {
+          const elId = ancestor.id;
+          if (elId) {
+            const found = timelineElements.find(
+              (e) => e.domId === elId && (e.sourceFile ?? "index.html") === sourceFile,
+            );
+            if (found) matchedId = found.key ?? found.id;
+          }
+          ancestor = ancestor.parentElement;
+        }
+      }
+      if (matchedId) {
+        const el = timelineElements.find((e) => (e.key ?? e.id) === matchedId);
+        if (el) {
+          usePlayerStore.getState().requestSeek(el.start + el.duration / 2);
+        }
+      }
+    },
+    [resolveSelection, timelineElements],
+  );
+  const handleSelectLayer = useCallback(
+    (layer: DomEditLayerItem) => {
+      const selection = resolveSelection(layer);
+      if (!selection) return;
+      applyDomSelection(selection);
+      seekToLayer(layer);
+    },
+    [resolveSelection, applyDomSelection, seekToLayer],
+  );
+  const handleLayerHover = useCallback(
+    (layer: DomEditLayerItem | null) => {
+      if (!layer) {
+        updateDomEditHoverSelection(null);
+        return;
+      }
+      const selection = resolveSelection(layer);
+      updateDomEditHoverSelection(selection);
+    },
+    [resolveSelection, updateDomEditHoverSelection],
+  );
+  const toggleCollapse = useCallback((key: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+  const selectedKey = domEditSelection ? getDomEditLayerKey(domEditSelection) : null;
+  const visibleLayers = getVisibleLayers(layers, collapsed);
+  if (layers.length === 0) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center bg-neutral-900 px-6 text-center">
+        <Layers size={18} className="mb-3 text-neutral-600" />
+        <p className="text-sm font-medium text-neutral-200">No layers</p>
+        <p className="mt-1 text-xs text-neutral-500">Load a composition to see its element tree</p>
+      </div>
+    );
+  }
+  return (
+    <div
+      className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-900"
+      onPointerLeave={() => handleLayerHover(null)}
+    >
+      <div className="border-b border-white/10 px-3 py-2 text-[11px] text-neutral-500">
+        {layers.length} layer{layers.length === 1 ? "" : "s"}
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto py-1">
+        {visibleLayers.map((layer) => {
+          const selected = layer.key === selectedKey;
+          const isCollapsed = collapsed[layer.key] ?? false;
+          const hasChildren = layer.childCount > 0;
+          const isCompHost = isCompositionHost(layer.element);
+          return (
+            <div
+              key={layer.key}
+              role="button"
+              tabIndex={0}
+              onClick={() => handleSelectLayer(layer)}
+              onPointerEnter={() => handleLayerHover(layer)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSelectLayer(layer);
+                }
+              }}
+              className={`group flex w-full cursor-pointer items-center gap-1.5 px-2 py-1 text-left transition-colors ${
+                selected
+                  ? "bg-studio-accent/14 text-studio-accent"
+                  : "text-neutral-300 hover:bg-white/[0.04] hover:text-neutral-100"
+              }`}
+              style={{ paddingLeft: 8 + layer.depth * 16 }}
+            >
+              {hasChildren ? (
+                <button
+                  type="button"
+                  onClick={(e) => toggleCollapse(layer.key, e)}
+                  className="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded text-neutral-500 hover:text-neutral-300"
+                >
+                  <svg
+                    width="8"
+                    height="8"
+                    viewBox="0 0 8 8"
+                    fill="currentColor"
+                    className={`transition-transform ${isCollapsed ? "" : "rotate-90"}`}
+                  >
+                    <path d="M2 1l4 3-4 3z" />
+                  </svg>
+                </button>
+              ) : (
+                <span className="w-4 flex-shrink-0" />
+              )}
+              <span
+                className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${
+                  selected
+                    ? "bg-studio-accent/18 text-studio-accent"
+                    : isCompHost
+                      ? "bg-blue-900/40 text-blue-400"
+                      : "bg-neutral-800 text-neutral-500"
+                }`}
+              >
+                {getTagBadge(layer.tagName)}
+              </span>
+              <span className="min-w-0 flex-1 truncate text-[11px]">{layer.label}</span>
+              {hasChildren && (
+                <span className="text-[9px] tabular-nums text-neutral-600">{layer.childCount}</span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+function getVisibleLayers(
+  layers: DomEditLayerItem[],
+  collapsed: CollapsedState,
+): DomEditLayerItem[] {
+  if (Object.keys(collapsed).length === 0) return layers;
+  const result: DomEditLayerItem[] = [];
+  let skipDepth = -1;
+  for (const layer of layers) {
+    if (skipDepth >= 0 && layer.depth > skipDepth) continue;
+    skipDepth = -1;
+    result.push(layer);
+    if (collapsed[layer.key] && layer.childCount > 0) {
+      skipDepth = layer.depth;
+    }
+  }
+  return result;
+}

package/src/components/editor/SourceEditor.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useRef, useCallback, memo } from "react";
+import { useRef, useCallback, useEffect, memo } from "react";
 import {
   EditorView,
   keymap,
@@ -69,6 +69,9 @@ export const SourceEditor = memo(function SourceEditor({
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
+  const contentRef = useRef(content);
+  contentRef.current = content;
   const mountEditor = useCallback(
     (node: HTMLDivElement | null) => {
       if (editorRef.current) {
@@ -87,7 +90,7 @@ export const SourceEditor = memo(function SourceEditor({
       });
       const state = EditorState.create({
-        doc: content,
+        doc: contentRef.current,
         extensions: [
           lineNumbers(),
           highlightActiveLine(),
@@ -112,8 +115,22 @@ export const SourceEditor = memo(function SourceEditor({
       editorRef.current = new EditorView({ state, parent: node });
     },
-    [content, filePath, language, readOnly],
+    [filePath, language, readOnly],
   );
+  // Sync external content changes into the editor without recreating it.
+  // Only applies when the new content differs from the current document
+  // (e.g. file switch or server refresh), not on every keystroke.
+  useEffect(() => {
+    const view = editorRef.current;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (current !== content) {
+      view.dispatch({
+        changes: { from: 0, to: current.length, insert: content },
+      });
+    }
+  }, [content]);
   return <div ref={mountEditor} className="h-full w-full overflow-hidden" />;
 });