@hyperframes/studio 0.6.1 → 0.6.3

package/src/components/editor/LayersPanel.tsx

@@ -0,0 +1,302 @@
+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]);
+
+  useEffect(() => {
+    const ref = hoverSeekTimerRef;
+    return () => {
+      if (ref.current) clearTimeout(ref.current);
+    };
+  }, []);
+
+  const resolveSelection = useCallback(
+    (layer: DomEditLayerItem) =>
+      resolveDomEditSelection(layer.element, {
+        activeCompositionPath: activeCompPath,
+        isMasterView,
+        preferClipAncestor: false,
+      }),
+    [activeCompPath, isMasterView],
+  );
+
+  const hoverSeekTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  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) {
+        if (hoverSeekTimerRef.current) clearTimeout(hoverSeekTimerRef.current);
+        updateDomEditHoverSelection(null);
+        return;
+      }
+      const selection = resolveSelection(layer);
+      updateDomEditHoverSelection(selection);
+      // Debounce hover seeks so brushing past items doesn't thrash the player
+      if (hoverSeekTimerRef.current) clearTimeout(hoverSeekTimerRef.current);
+      hoverSeekTimerRef.current = setTimeout(() => seekToLayer(layer), 300);
+    },
+    [resolveSelection, updateDomEditHoverSelection, seekToLayer],
+  );
+
+  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

@@ -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" />;
 });

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -334,24 +334,43 @@ export function Section({
   icon,
   children,
   accessory,
+  defaultCollapsed = false,
 }: {
   title: string;
   icon: ReactNode;
   children: ReactNode;
   accessory?: ReactNode;
+  defaultCollapsed?: boolean;
 }) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+
   return (
-    <section className="min-w-0 border-t border-neutral-800/80 px-4 py-4">
-      <div className="mb-3 flex min-w-0 flex-wrap items-center justify-between gap-2">
+    <section className="min-w-0 border-t border-neutral-800/80">
+      <button
+        type="button"
+        onClick={() => setCollapsed((v) => !v)}
+        className="flex w-full items-center justify-between gap-2 px-4 py-3"
+      >
         <div className="flex min-w-0 items-center gap-2.5">
           <span className="flex-shrink-0 text-neutral-500">{icon}</span>
           <h3 className="text-[11px] font-semibold uppercase tracking-[0.12em] text-neutral-300">
             {title}
           </h3>
         </div>
-        {accessory}
-      </div>
-      {children}
+        <div className="flex items-center gap-2">
+          {accessory}
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="currentColor"
+            className={`flex-shrink-0 text-neutral-500 transition-transform ${collapsed ? "-rotate-90" : ""}`}
+          >
+            <path d="M2 3l3 4 3-4z" />
+          </svg>
+        </div>
+      </button>
+      {!collapsed && <div className="px-4 pb-4">{children}</div>}
     </section>
   );
 }

package/src/components/editor/propertyPanelStyleSections.tsx

@@ -109,7 +109,7 @@ export function StyleSections({
   return (
     <>
       {isFlex && (
-        <Section title="Flex" icon={<Layers size={15} />}>
+        <Section title="Flex" icon={<Layers size={15} />} defaultCollapsed>
           <div className="space-y-4">
             <SegmentedControl
               disabled={styleEditingDisabled}
@@ -154,7 +154,7 @@ export function StyleSections({
       )}
 
       {hasVisualBackground && (
-        <Section title="Radius" icon={<Settings size={15} />}>
+        <Section title="Radius" icon={<Settings size={15} />} defaultCollapsed>
           <SliderControl
             value={radiusValue}
             min={0}
@@ -168,7 +168,7 @@ export function StyleSections({
         </Section>
       )}
 
-      <Section title="Stroke" icon={<Square size={15} />}>
+      <Section title="Stroke" icon={<Square size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <div className={RESPONSIVE_GRID}>
             <MetricField
@@ -226,7 +226,7 @@ export function StyleSections({
         </div>
       </Section>
 
-      <Section title="Effects" icon={<Zap size={15} />}>
+      <Section title="Effects" icon={<Zap size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <SelectField
             label="Shadow"
@@ -279,7 +279,7 @@ export function StyleSections({
         </div>
       </Section>
 
-      <Section title="Clip" icon={<Layers size={15} />}>
+      <Section title="Clip" icon={<Layers size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <div className={RESPONSIVE_GRID}>
             <SelectField
@@ -325,7 +325,7 @@ export function StyleSections({
         </div>
       </Section>
 
-      <Section title="Transparency" icon={<Eye size={15} />}>
+      <Section title="Transparency" icon={<Eye size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <SliderControl
             value={opacityValue}

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -23,12 +23,7 @@ import {
   restoreStudioPathOffset,
   restoreStudioRotation,
 } from "./manualEdits";
-import {
-  type GroupOverlayItem,
-  type OverlayRect,
-  groupOverlayItemsEqual,
-  rectsEqual,
-} from "./domEditOverlayGeometry";
+import { type GroupOverlayItem, type OverlayRect } from "./domEditOverlayGeometry";
 import {
   BLOCKED_MOVE_THRESHOLD_PX,
   type BlockedMoveState,
@@ -87,8 +82,6 @@ export type UseDomEditOverlayGesturesOptions = {
 
 export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGesturesOptions) {
   const setDraftOverlayRect = (next: OverlayRect) => {
-    if (rectsEqual(opts.overlayRectRef.current, next)) return;
-    opts.overlayRectRef.current = next;
     opts.setOverlayRect(next);
   };
   const restoreGestureOverlayRect = (g: GestureState) => {
@@ -102,8 +95,6 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     });
   };
   const setDraftGroupOverlayItems = (next: GroupOverlayItem[]) => {
-    if (groupOverlayItemsEqual(opts.groupOverlayItemsRef.current, next)) return;
-    opts.groupOverlayItemsRef.current = next;
     opts.setGroupOverlayItems(next);
   };
 

package/src/components/nle/NLELayout.tsx

@@ -247,9 +247,11 @@ export const NLELayout = memo(function NLELayout({
   const currentLevel = compositionStack[compositionStack.length - 1];
   const directUrl = compositionStack.length > 1 ? currentLevel.previewUrl : undefined;
 
+  const onIframeRefStable = useRef(onIframeRef);
+  onIframeRefStable.current = onIframeRef;
   useEffect(() => {
-    onIframeRef?.(iframeRef.current);
-  }, [compositionStack.length, onIframeRef, refreshKey, iframeRef]);
+    onIframeRefStable.current?.(iframeRef.current);
+  }, [compositionStack.length, refreshKey, iframeRef]);
 
   // Resize divider handlers
   const handleDividerPointerDown = useCallback(