@hyperframes/studio 0.7.57 → 0.7.59

package/src/components/editor/CanvasContextMenu.tsx

@@ -50,8 +50,17 @@ interface CanvasContextMenuProps {
    * affected siblings). The menu does NOT touch the live DOM — wire to
    * handleDomZIndexReorderCommit, which applies the live styles itself
    * (see module-level wiring comment).
+   *
+   * `crossed` is the sibling a forward/backward step moved past, resolved from
+   * the SAME pre-mutation render order as the patches (null for front/back or
+   * when there is no neighbor). The host uses it to mirror the z action into a
+   * timeline lane move (resolveZMirrorLaneMove's crossedKey).
    */
-  onApplyZIndex?: (patches: ZOrderPatch[], action: ZOrderAction) => void;
+  onApplyZIndex?: (
+    patches: ZOrderPatch[],
+    action: ZOrderAction,
+    crossed: HTMLElement | null,
+  ) => void;
   /**
    * Called after a successful bring-forward / send-backward with the sibling
    * the target stepped over (resolved from the SAME pre-mutation state as the
@@ -70,10 +79,61 @@ interface CanvasContextMenuProps {
 
 type ZAction = "bring-forward" | "send-backward" | "bring-to-front" | "send-to-back";
 
+// Stacked-layer + arrow glyphs, one per z action (16px, stroke, currentColor —
+// matches the studio's inline-SVG conventions: fill="none", 1.2 stroke, round
+// caps/joins). Single actions show ONE layer diamond with the arrow stepping
+// one way; front/back show a TWO-diamond stack with the arrow piercing through
+// and beyond it. `paths` are the d attributes, drawn in order.
+const Z_ACTION_ICONS: Record<ZAction, string[]> = {
+  "bring-forward": [
+    "M3 11 L8 8.5 L13 11 L8 13.5 Z", // layer diamond (bottom)
+    "M8 8.5 L8 2", // arrow shaft up
+    "M5.5 4.5 L8 2 L10.5 4.5", // arrow head
+  ],
+  "send-backward": [
+    "M3 5 L8 2.5 L13 5 L8 7.5 Z", // layer diamond (top)
+    "M8 7.5 L8 14", // arrow shaft down
+    "M5.5 11.5 L8 14 L10.5 11.5", // arrow head
+  ],
+  "bring-to-front": [
+    "M3 9.5 L8 7 L13 9.5 L8 12 Z", // upper layer of the stack
+    "M3 12.5 L8 10 L13 12.5 L8 15 Z", // lower layer of the stack
+    "M8 12.5 L8 2", // arrow piercing up through/above the stack
+    "M5.5 4.5 L8 2 L10.5 4.5", // arrow head
+  ],
+  "send-to-back": [
+    "M3 4 L8 1.5 L13 4 L8 6.5 Z", // upper layer of the stack
+    "M3 7 L8 4.5 L13 7 L8 9.5 Z", // lower layer of the stack
+    "M8 3.5 L8 14", // arrow piercing down through/below the stack
+    "M5.5 11.5 L8 14 L10.5 11.5", // arrow head
+  ],
+};
+
+function ZActionIcon({ action }: { action: ZAction }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="mr-2 shrink-0"
+      aria-hidden="true"
+    >
+      {Z_ACTION_ICONS[action].map((d) => (
+        <path key={d} d={d} />
+      ))}
+    </svg>
+  );
+}
+
 const Z_ACTIONS: Array<{ action: ZAction; label: string }> = [
+  { action: "bring-to-front", label: "Bring to front" },
   { action: "bring-forward", label: "Bring forward" },
   { action: "send-backward", label: "Send backward" },
-  { action: "bring-to-front", label: "Bring to front" },
   { action: "send-to-back", label: "Send to back" },
 ];
 
@@ -113,14 +173,16 @@ export const CanvasContextMenu = memo(function CanvasContextMenu({
     const patches = resolveZOrderChange(el, action);
     if (patches === null) return;
     // Resolve the crossed neighbor BEFORE the commit path mutates live styles —
-    // both resolvers must read the same pre-change render order.
-    const crossed = onZOrderCrossed ? resolveCrossedNeighbor(el, action) : null;
+    // both resolvers must read the same pre-change render order. Always resolved
+    // (not only for the flash): onApplyZIndex forwards it so the host can mirror
+    // the z step into a timeline lane move.
+    const crossed = resolveCrossedNeighbor(el, action);
     // Do NOT pre-apply styles here: handleDomZIndexReorderCommit writes the
     // live z-index (and injects position:relative for static elements) in the
     // same synchronous flow, so feedback is still instant — and it must read
     // the PRE-change styles itself, both to capture true rollback values and
     // to detect a static position that needs persisting.
-    onApplyZIndex(patches, action);
+    onApplyZIndex(patches, action, crossed);
     if (crossed && onZOrderCrossed) onZOrderCrossed(crossed, action);
     onClose();
   }
@@ -185,7 +247,10 @@ export const CanvasContextMenu = memo(function CanvasContextMenu({
                 if (enabled) handleZAction(action);
               }}
             >
-              {label}
+              {/* Icon inherits the item's text color via currentColor, so the
+                  disabled muted tone applies to both icon and label. */}
+              <ZActionIcon action={action} />
+              <span>{label}</span>
             </button>
           );
         })}

package/src/components/editor/DomEditOverlay.tsx

@@ -103,6 +103,9 @@ interface DomEditOverlayProps {
     selection: DomEditSelection,
     patches: ZOrderPatch[],
     action: ZOrderAction,
+    /** Sibling a forward/backward step moved past (pre-mutation render order);
+     *  null for front/back. Feeds the timeline z-mirror's crossedKey. */
+    crossed: HTMLElement | null,
   ) => void;
 }
 
@@ -529,8 +532,8 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           }
           onApplyZIndex={
             onApplyZIndex
-              ? (patches, action) => {
-                  onApplyZIndex(contextMenu.sel, patches, action);
+              ? (patches, action, crossed) => {
+                  onApplyZIndex(contextMenu.sel, patches, action, crossed);
                 }
               : undefined
           }

package/src/components/editor/GestureRecordControl.tsx

@@ -1,3 +1,5 @@
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+
 export type GestureRecordingState = "idle" | "recording" | "preview";
 
 interface GestureRecordIconProps {
@@ -28,13 +30,17 @@ export function GestureRecordPanelButton({
   onToggleRecording,
 }: GestureRecordPanelButtonProps) {
   const recording = recordingState === "recording";
+  const track = useTrackDesignInput();
 
   return (
     <div className="px-4 pb-3">
       <button
         type="button"
         onMouseDown={(e) => e.preventDefault()}
-        onClick={onToggleRecording}
+        onClick={() => {
+          track("button", "Gesture recording");
+          onToggleRecording();
+        }}
         className={`w-full flex items-center justify-center gap-2 rounded-lg py-2 text-[11px] font-medium transition-colors ${
           recording
             ? "bg-red-500/15 text-red-400 border border-red-500/30 animate-pulse"

package/src/components/editor/GsapAnimationSection.tsx

@@ -4,7 +4,11 @@ import { Film } from "../../icons/SystemIcons";
 import { Section } from "./propertyPanelPrimitives";
 import { ADD_METHODS, ADD_METHOD_LABELS, METHOD_TOOLTIPS } from "./gsapAnimationConstants";
 import { AnimationCard } from "./AnimationCard";
-import type { GsapAnimationEditCallbacks } from "./gsapAnimationCallbacks";
+import {
+  trackAnimationMetaUpdate,
+  type GsapAnimationEditCallbacks,
+} from "./gsapAnimationCallbacks";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 
 interface GsapAnimationSectionProps extends GsapAnimationEditCallbacks {
   animations: GsapAnimation[];
@@ -34,7 +38,24 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
   onSetAllKeyframeEases,
   onUnroll,
 }: GsapAnimationSectionProps) {
+  const track = useTrackDesignInput();
   const [addMenuOpen, setAddMenuOpen] = useState(false);
+  const trackProperty = (property: string) => {
+    const control =
+      property === "visibility"
+        ? "toggle"
+        : property === "filter" || property === "clipPath"
+          ? "text"
+          : "metric";
+    track(control, property);
+  };
+  const updateMeta = (
+    animationId: string,
+    updates: { duration?: number; ease?: string; position?: number },
+  ) => {
+    trackAnimationMetaUpdate(track, updates);
+    onUpdateMeta(animationId, updates);
+  };
 
   return (
     <Section title="Animation" icon={<Film size={15} />}>
@@ -58,21 +79,94 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
               key={anim.id}
               animation={anim}
               defaultExpanded={index === 0}
-              onUpdateProperty={onUpdateProperty}
-              onUpdateMeta={onUpdateMeta}
-              onDeleteAnimation={onDeleteAnimation}
-              onAddProperty={onAddProperty}
-              onRemoveProperty={onRemoveProperty}
-              onUpdateFromProperty={onUpdateFromProperty}
-              onAddFromProperty={onAddFromProperty}
-              onRemoveFromProperty={onRemoveFromProperty}
+              onUpdateProperty={(animationId, property, value) => {
+                trackProperty(property);
+                onUpdateProperty(animationId, property, value);
+              }}
+              onUpdateMeta={updateMeta}
+              onDeleteAnimation={(animationId) => {
+                track("button", "Remove animation");
+                onDeleteAnimation(animationId);
+              }}
+              onAddProperty={(animationId, property) => {
+                track("select", "Add effect property");
+                onAddProperty(animationId, property);
+              }}
+              onRemoveProperty={(animationId, property) => {
+                track("button", `Remove ${property}`);
+                onRemoveProperty(animationId, property);
+              }}
+              onUpdateFromProperty={
+                onUpdateFromProperty
+                  ? (animationId, property, value) => {
+                      trackProperty(property);
+                      onUpdateFromProperty(animationId, property, value);
+                    }
+                  : undefined
+              }
+              onAddFromProperty={
+                onAddFromProperty
+                  ? (animationId, property) => {
+                      track("select", "Add from property");
+                      onAddFromProperty(animationId, property);
+                    }
+                  : undefined
+              }
+              onRemoveFromProperty={
+                onRemoveFromProperty
+                  ? (animationId, property) => {
+                      track("button", `Remove from ${property}`);
+                      onRemoveFromProperty(animationId, property);
+                    }
+                  : undefined
+              }
               onLivePreview={onLivePreview}
               onLivePreviewEnd={onLivePreviewEnd}
-              onSetArcPath={onSetArcPath}
-              onUpdateArcSegment={onUpdateArcSegment}
-              onUpdateKeyframeEase={onUpdateKeyframeEase}
-              onSetAllKeyframeEases={onSetAllKeyframeEases}
-              onUnroll={onUnroll}
+              onSetArcPath={
+                onSetArcPath
+                  ? (animationId, config) => {
+                      track(
+                        "toggle",
+                        config.autoRotate !== undefined ? "Auto rotate" : "Arc motion",
+                      );
+                      onSetArcPath(animationId, config);
+                    }
+                  : undefined
+              }
+              onUpdateArcSegment={
+                onUpdateArcSegment
+                  ? (animationId, segmentIndex, update) => {
+                      if (update.curviness === undefined) {
+                        track("button", `Reset arc segment ${segmentIndex + 1}`);
+                      }
+                      onUpdateArcSegment(animationId, segmentIndex, update);
+                    }
+                  : undefined
+              }
+              onUpdateKeyframeEase={
+                onUpdateKeyframeEase
+                  ? (animationId, percentage, ease) => {
+                      track("select", "Keyframe ease");
+                      onUpdateKeyframeEase(animationId, percentage, ease);
+                    }
+                  : undefined
+              }
+              onSetAllKeyframeEases={
+                onSetAllKeyframeEases
+                  ? (animationId, ease) => {
+                      track("select", "All keyframe eases");
+                      onSetAllKeyframeEases(animationId, ease);
+                    }
+                  : undefined
+              }
+              onUnroll={
+                onUnroll
+                  ? (animationId) => {
+                      track("button", "Unroll animation");
+                      onUnroll(animationId);
+                    }
+                  : undefined
+              }
             />
           ))}
 
@@ -85,6 +179,7 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
                     type="button"
                     title={METHOD_TOOLTIPS[method]}
                     onClick={() => {
+                      track("button", `Add ${method} animation`);
                       onAddAnimation(method);
                       setAddMenuOpen(false);
                     }}

package/src/components/editor/InspectorHeaderActions.tsx

@@ -1,26 +1,58 @@
+import { Eye, EyeSlash } from "@phosphor-icons/react";
 import { X } from "../../icons/SystemIcons";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import type { DomEditSelection } from "./domEditingTypes";
 
-/** The action buttons in the inspector header: Ungroup (groups only), copy, clear. */
+/** The action buttons in the inspector header: visibility, Ungroup (groups only), copy, clear. */
 export function InspectorHeaderActions({
   element,
   copied,
   onCopy,
   onClear,
   onUngroup,
+  selectedElementId,
+  selectedElementHidden,
+  visibilityLabel,
+  onToggleHidden,
 }: {
   element: DomEditSelection;
   copied: boolean;
   onCopy: () => void;
   onClear: () => void;
   onUngroup?: () => void;
+  selectedElementId?: string | null;
+  selectedElementHidden?: boolean;
+  visibilityLabel?: string;
+  onToggleHidden?: (id: string, hidden: boolean) => void;
 }) {
+  const track = useTrackDesignInput();
   return (
     <div className="flex items-center gap-1">
+      {selectedElementId && onToggleHidden && (
+        <button
+          type="button"
+          aria-label={visibilityLabel}
+          title={visibilityLabel}
+          onClick={() => {
+            track("toggle", "Element visibility");
+            void onToggleHidden(selectedElementId, !selectedElementHidden);
+          }}
+          className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+        >
+          {selectedElementHidden ? (
+            <EyeSlash size={13} weight="bold" aria-hidden="true" />
+          ) : (
+            <Eye size={13} weight="bold" aria-hidden="true" />
+          )}
+        </button>
+      )}
       {onUngroup && element.dataAttributes["hf-group"] != null && (
         <button
           type="button"
-          onClick={onUngroup}
+          onClick={() => {
+            track("button", "Ungroup");
+            onUngroup();
+          }}
           title="Ungroup (⌘⇧G)"
           className="flex h-6 items-center rounded px-2 text-[11px] font-medium text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-neutral-200"
         >
@@ -29,7 +61,10 @@ export function InspectorHeaderActions({
       )}
       <button
         type="button"
-        onClick={onCopy}
+        onClick={() => {
+          track("button", "Copy element info");
+          onCopy();
+        }}
         className={`flex h-6 w-6 items-center justify-center rounded transition-colors ${
           copied
             ? "text-studio-accent"
@@ -52,7 +87,10 @@ export function InspectorHeaderActions({
       <button
         type="button"
         aria-label="Clear selection"
-        onClick={onClear}
+        onClick={() => {
+          track("button", "Clear selection");
+          onClear();
+        }}
         className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
       >
         <X size={13} />

package/src/components/editor/LayersPanel.tsx

@@ -14,8 +14,14 @@ import {
 } from "../../utils/studioHelpers";
 import { Layers } from "../../icons/SystemIcons";
 import { useLayerDrag, isLayerDraggable, type LayerReorderEvent } from "./useLayerDrag";
-import { computeReorderZValues, getElementZIndex } from "../../player/lib/layerOrdering";
+import { getVisibleLayers, sortLayersByZIndex } from "./layersPanelSort";
 import { deriveTimelineStoreKey } from "../../player/lib/timelineElementHelpers";
+import { resolveZOrderReposition } from "./canvasContextMenuZOrder";
+import { buildStableSelector } from "./domEditingDom";
+import { zReorderCoalesceKey } from "../../hooks/useElementLifecycleOps";
+import { useLayerReorderTimelineMirror } from "../nle/useCanvasZOrderTimelineMirror";
+import { runZLaneGesture } from "../nle/zLaneGesture";
+import { useLayerRevealOverride } from "./useLayerRevealOverride";
 
 const TAG_ICONS: Record<string, string> = {
   video: "Vi",
@@ -85,8 +91,13 @@ interface CollapsedState {
 // fallow-ignore-next-line complexity
 export const LayersPanel = memo(function LayersPanel() {
   const { previewIframeRef, activeCompPath, showToast } = useStudioShellContext();
-  const { refreshKey, compositionLoading, timelineElements } = useStudioPlaybackContext();
+  const { refreshKey, compositionLoading, timelineElements, isPlaying } =
+    useStudioPlaybackContext();
   const currentTime = usePlayerStore((s) => s.currentTime);
+  // Flashless z commits (canvas menu, timeline lane-drag z-sync) mutate iframe
+  // z-indexes with no reload and no refreshKey bump — while paused, nothing
+  // else re-collects, so the panel's z-sorted order would go stale.
+  const zEditVersion = usePlayerStore((s) => s.zEditVersion);
   const {
     domEditSelection,
     activeGroupElement,
@@ -100,6 +111,11 @@ export const LayersPanel = memo(function LayersPanel() {
   const [collapsed, setCollapsed] = useState<CollapsedState>({});
   const prevDocVersionRef = useRef(0);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const mirrorLayerReorderToTimeline = useLayerReorderTimelineMirror();
+  const { scheduleReveal } = useLayerRevealOverride({
+    isPlaying,
+    selectedElement: domEditSelection?.element ?? null,
+  });
 
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
 
@@ -131,7 +147,7 @@ export const LayersPanel = memo(function LayersPanel() {
 
   useEffect(() => {
     collectLayers();
-  }, [collectLayers, refreshKey]);
+  }, [collectLayers, refreshKey, zEditVersion]);
 
   useEffect(() => {
     const iframe = previewIframeRef.current;
@@ -230,8 +246,13 @@ export const LayersPanel = memo(function LayersPanel() {
       if (!selection) return;
       applyDomSelection(selection);
       await seekToLayer(layer);
+      // Force-reveal AFTER the seek's runtime visibility sync has had a beat:
+      // a clip made active by the seek shows naturally and needs no override,
+      // so the reveal only touches nodes that REMAIN hidden (animation-parked
+      // opacity, non-clip display/visibility hides, hidden ancestors).
+      scheduleReveal(selection.element, 150);
     },
-    [resolveSelection, applyDomSelection, seekToLayer],
+    [resolveSelection, applyDomSelection, seekToLayer, scheduleReveal],
   );
 
   // Double-click a group row → drill into it; any other row → select it.
@@ -264,6 +285,7 @@ export const LayersPanel = memo(function LayersPanel() {
     setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
   }, []);
 
+  // fallow-ignore-next-line complexity
   const handleReorder = useCallback(
     (event: LayerReorderEvent) => {
       const { siblingLayers, fromIndex, toIndex } = event;
@@ -271,29 +293,88 @@ export const LayersPanel = memo(function LayersPanel() {
       const [moved] = reordered.splice(fromIndex, 1);
       reordered.splice(toIndex, 0, moved);
 
-      const existingValues = siblingLayers.map((l) => getElementZIndex(l.element));
-      const zValues = computeReorderZValues(existingValues, fromIndex, toIndex);
-
-      const entries = reordered.map((layer, i) => ({
-        element: layer.element,
-        zIndex: zValues[i],
-        id: layer.id,
-        selector: layer.selector,
-        selectorIndex: layer.selectorIndex,
-        sourceFile: layer.sourceFile,
-        key: deriveTimelineStoreKey({
-          domId: layer.id,
-          selector: layer.selector,
-          selectorIndex: layer.selectorIndex,
-          sourceFile: layer.sourceFile,
-        }),
-      }));
-
-      // "layer-drag" keeps consecutive drops of the same sibling set coalescing
-      // into one undo step, without merging with a context-menu z action.
-      handleDomZIndexReorderCommit(entries, undefined, "layer-drag");
+      // Panel order is top-first (sortLayersByZIndex: z desc, later-DOM-first),
+      // so the desired RENDER order (bottom→top) is the reverse. The minimal
+      // resolver (shared with the canvas z-menu) then writes one between-z
+      // value when a strict gap exists, band-safe renumber otherwise — instead
+      // of the old computeReorderZValues stamp of every sibling.
+      const desiredBottomToTop = [...reordered].reverse();
+      const patches = resolveZOrderReposition(
+        moved.element,
+        desiredBottomToTop.map((l) => l.element),
+      );
+      if (!patches || patches.length === 0) return; // paint order unchanged
+
+      const layerByElement = new Map(siblingLayers.map((l) => [l.element, l]));
+      const entries: Array<{
+        element: HTMLElement;
+        zIndex: number;
+        id?: string;
+        selector?: string;
+        selectorIndex?: number;
+        sourceFile: string;
+        key?: string;
+      }> = [];
+      for (const patch of patches) {
+        // The renumber fallback can patch a painting sibling the panel didn't
+        // list (non-collected family member): derive its identity from the DOM
+        // node, exactly like the canvas menu's siblingZIndexEntry. Un-targetable
+        // nodes get a live-only style write (reverts on reload).
+        const layer = layerByElement.get(patch.element);
+        const id = layer?.id ?? (patch.element.id || undefined);
+        const selector = layer?.selector ?? buildStableSelector(patch.element);
+        if (!id && !selector) {
+          patch.element.style.zIndex = String(patch.zIndex);
+          continue;
+        }
+        const sourceFile = layer?.sourceFile ?? moved.sourceFile;
+        entries.push({
+          element: patch.element,
+          zIndex: patch.zIndex,
+          id,
+          selector,
+          selectorIndex: layer?.selectorIndex,
+          sourceFile,
+          key: deriveTimelineStoreKey({
+            domId: id,
+            selector,
+            selectorIndex: layer?.selectorIndex,
+            sourceFile,
+          }),
+        });
+      }
+      if (entries.length === 0) return;
+
+      // ONE undo entry for the whole gesture: the z persist and the timeline
+      // lane mirror below share this per-gesture-unique key (same contract as
+      // the canvas menu's wiring in PreviewOverlays).
+      const coalesceKey = zReorderCoalesceKey(entries, "layer-drag");
+      const desiredOrderKeys = desiredBottomToTop.map(
+        (l) =>
+          deriveTimelineStoreKey({
+            domId: l.id,
+            selector: l.selector,
+            selectorIndex: l.selectorIndex,
+            sourceFile: l.sourceFile,
+          }) ?? null,
+      );
+      const movedKey = deriveTimelineStoreKey({
+        domId: moved.id,
+        selector: moved.selector,
+        selectorIndex: moved.selectorIndex,
+        sourceFile: moved.sourceFile,
+      });
+      // One serialized z→lane transaction (shared queue with the canvas
+      // z-order menu): the mirror runs only after a DURABLE z persist, and
+      // rapid successive gestures cannot interleave phases — see
+      // runZLaneGesture.
+      runZLaneGesture({
+        commitZ: () => handleDomZIndexReorderCommit(entries, coalesceKey, "layer-drag"),
+        mirror: () =>
+          mirrorLayerReorderToTimeline({ selectionKey: movedKey, desiredOrderKeys, coalesceKey }),
+      }).catch(() => undefined);
     },
-    [handleDomZIndexReorderCommit],
+    [handleDomZIndexReorderCommit, mirrorLayerReorderToTimeline],
   );
 
   const selectedKey = domEditSelection ? getDomEditLayerKey(domEditSelection) : null;
@@ -436,76 +517,6 @@ export const LayersPanel = memo(function LayersPanel() {
   );
 });
 
-// ── Pure helpers ──────────────────────────────────────────────────────
-
-// fallow-ignore-next-line complexity
-export function sortLayersByZIndex(layers: DomEditLayerItem[]): DomEditLayerItem[] {
-  if (layers.length <= 1) return layers;
-
-  const minDepth = layers[0].depth;
-  for (let i = 1; i < layers.length; i++) {
-    if (layers[i].depth < minDepth) return layers;
-  }
-
-  const chunks: Array<{ root: DomEditLayerItem; children: DomEditLayerItem[]; domIndex: number }> =
-    [];
-
-  for (let i = 0; i < layers.length; i++) {
-    if (layers[i].depth === minDepth) {
-      const children: DomEditLayerItem[] = [];
-      let j = i + 1;
-      while (j < layers.length && layers[j].depth > minDepth) {
-        children.push(layers[j]);
-        j++;
-      }
-      chunks.push({ root: layers[i], children, domIndex: chunks.length });
-    }
-  }
-
-  if (chunks.length <= 1) {
-    if (chunks.length === 1 && chunks[0].children.length > 0) {
-      const sorted = sortLayersByZIndex(chunks[0].children);
-      return [chunks[0].root, ...sorted];
-    }
-    return layers;
-  }
-
-  chunks.sort((a, b) => {
-    const zA = getElementZIndex(a.root.element);
-    const zB = getElementZIndex(b.root.element);
-    if (zA !== zB) return zB - zA;
-    return b.domIndex - a.domIndex;
-  });
-
-  const result: DomEditLayerItem[] = [];
-  for (const chunk of chunks) {
-    result.push(chunk.root);
-    if (chunk.children.length > 0) {
-      result.push(...sortLayersByZIndex(chunk.children));
-    }
-  }
-  return result;
-}
-
-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;
-}
+// The sort helper lives in layersPanelSort.ts (600-line studio cap);
+// re-exported so existing imports from "./LayersPanel" still resolve.
+export { sortLayersByZIndex } from "./layersPanelSort";