@hyperframes/studio 0.6.73 → 0.6.75

package/src/components/editor/PropertyPanel.tsx

@@ -1,8 +1,6 @@
 import { memo } from "react";
-import { Clock, Eye, Layers, MessageSquare, Move, X } from "../../icons/SystemIcons";
-import { type DomEditSelection } from "./domEditing";
+import { Eye, Layers, MessageSquare, Move, X } from "../../icons/SystemIcons";
 import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
-import type { ImportedFontAsset } from "./fontAssets";
 import {
   EMPTY_STYLES,
   formatPxMetricValue,
@@ -14,7 +12,11 @@ import { MetricField, Section } from "./propertyPanelPrimitives";
 import { isMediaElement, MediaSection } from "./propertyPanelMediaSection";
 import { TextSection, StyleSections } from "./propertyPanelSections";
 import { GsapAnimationSection } from "./GsapAnimationSection";
-import { STUDIO_GSAP_PANEL_ENABLED } from "./manualEditingAvailability";
+import { KeyframeNavigation } from "./KeyframeNavigation";
+import { STUDIO_GSAP_PANEL_ENABLED, STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
+import { usePlayerStore } from "../../player";
+import { TimingSection } from "./propertyPanelTimingSection";
+import { computeFitToChildrenSize, type PropertyPanelProps } from "./propertyPanelHelpers";
 
 // Re-export helpers that external consumers import from this module
 export {
@@ -28,109 +30,6 @@ export {
   setCssFilterFunctionPx,
 } from "./propertyPanelHelpers";
 
-interface PropertyPanelProps {
-  projectId: string;
-  projectDir: string | null;
-  assets: string[];
-  element: DomEditSelection | null;
-  multiSelectCount?: number;
-  copiedAgentPrompt: boolean;
-  onClearSelection: () => void;
-  onSetStyle: (prop: string, value: string) => void | Promise<void>;
-  onSetAttribute: (attr: string, value: string) => void | Promise<void>;
-  onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
-  onSetManualOffset: (element: DomEditSelection, next: { x: number; y: number }) => void;
-  onSetManualSize: (element: DomEditSelection, next: { width: number; height: number }) => void;
-  onSetManualRotation: (element: DomEditSelection, next: { angle: number }) => void;
-  onSetText: (value: string, fieldKey?: string) => void;
-  onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
-  onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
-  onRemoveTextField: (fieldKey: string) => void;
-  onAskAgent: () => void;
-  onImportAssets?: (files: FileList) => Promise<string[]>;
-  fontAssets?: ImportedFontAsset[];
-  onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
-  gsapAnimations?: import("@hyperframes/core/gsap-parser").GsapAnimation[];
-  gsapMultipleTimelines?: boolean;
-  gsapUnsupportedTimelinePattern?: boolean;
-  onUpdateGsapProperty?: (animId: string, prop: string, value: number | string) => void;
-  onUpdateGsapMeta?: (
-    animId: string,
-    updates: { duration?: number; ease?: string; position?: number },
-  ) => void;
-  onDeleteGsapAnimation?: (animId: string) => void;
-  onAddGsapProperty?: (animId: string, prop: string) => void;
-  onRemoveGsapProperty?: (animId: string, prop: string) => void;
-  onUpdateGsapFromProperty?: (animId: string, prop: string, value: number | string) => void;
-  onAddGsapFromProperty?: (animId: string, prop: string) => void;
-  onRemoveGsapFromProperty?: (animId: string, prop: string) => void;
-  onAddGsapAnimation?: (method: "to" | "from" | "set" | "fromTo") => void;
-}
-
-/* ------------------------------------------------------------------ */
-/*  TimingSection                                                      */
-/* ------------------------------------------------------------------ */
-
-function formatTimingValue(seconds: number): string {
-  if (!Number.isFinite(seconds) || seconds < 0) return "0.00s";
-  return `${seconds.toFixed(2)}s`;
-}
-
-function parseTimingValue(input: string): number | null {
-  const cleaned = input.replace(/s$/i, "").trim();
-  const parsed = Number.parseFloat(cleaned);
-  return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
-}
-
-function TimingSection({
-  element,
-  onSetAttribute,
-}: {
-  element: DomEditSelection;
-  onSetAttribute: (attr: string, value: string) => void | Promise<void>;
-}) {
-  const start = Number.parseFloat(element.dataAttributes.start ?? "0") || 0;
-  const duration =
-    Number.parseFloat(
-      element.dataAttributes.duration ?? element.dataAttributes["hf-authored-duration"] ?? "0",
-    ) || 0;
-  const end = start + duration;
-
-  const commitStart = (nextValue: string) => {
-    const parsed = parseTimingValue(nextValue);
-    if (parsed == null) return;
-    void onSetAttribute("start", parsed.toFixed(2));
-  };
-
-  const commitDuration = (nextValue: string) => {
-    const parsed = parseTimingValue(nextValue);
-    if (parsed == null || parsed <= 0) return;
-    void onSetAttribute("duration", parsed.toFixed(2));
-  };
-
-  const commitEnd = (nextValue: string) => {
-    const parsed = parseTimingValue(nextValue);
-    if (parsed == null || parsed <= start) return;
-    void onSetAttribute("duration", (parsed - start).toFixed(2));
-  };
-
-  return (
-    <Section title="Timing" icon={<Clock size={15} />}>
-      <div className={RESPONSIVE_GRID}>
-        <MetricField label="Start" value={formatTimingValue(start)} onCommit={commitStart} />
-        <MetricField label="End" value={formatTimingValue(end)} onCommit={commitEnd} />
-      </div>
-      <div className="mt-3">
-        <MetricField
-          label="Duration"
-          value={formatTimingValue(duration)}
-          onCommit={commitDuration}
-        />
-      </div>
-    </Section>
-  );
-}
-
 /* ------------------------------------------------------------------ */
 /*  PropertyPanel                                                      */
 /* ------------------------------------------------------------------ */
@@ -158,6 +57,7 @@ export const PropertyPanel = memo(function PropertyPanel({
   onImportAssets,
   fontAssets = [],
   onImportFonts,
+  previewIframeRef,
   gsapAnimations = [],
   gsapMultipleTimelines,
   gsapUnsupportedTimelinePattern,
@@ -170,6 +70,11 @@ export const PropertyPanel = memo(function PropertyPanel({
   onAddGsapFromProperty,
   onRemoveGsapFromProperty,
   onAddGsapAnimation,
+  onAddKeyframe,
+  onRemoveKeyframe,
+  onConvertToKeyframes,
+  onCommitAnimatedProperty,
+  onSeekToTime,
 }: PropertyPanelProps) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
 
@@ -223,6 +128,15 @@ export const PropertyPanel = memo(function PropertyPanel({
   const commitManualOffset = (axis: "x" | "y", nextValue: string) => {
     const parsed = parsePxMetricValue(nextValue);
     if (parsed == null) return;
+    if (onCommitAnimatedProperty && (gsapAnimId || gsapAnimations.length > 0)) {
+      void onCommitAnimatedProperty(element, axis, parsed);
+      return;
+    }
+    if (gsapKeyframes && gsapAnimId && onAddKeyframe) {
+      const pct = Math.max(0, Math.min(100, Math.round(currentPct * 10) / 10));
+      onAddKeyframe(gsapAnimId, pct, axis, parsed);
+      return;
+    }
     const current = readStudioPathOffset(element.element);
     onSetManualOffset(element, {
       x: axis === "x" ? parsed : current.x,
@@ -256,6 +170,59 @@ export const PropertyPanel = memo(function PropertyPanel({
     onSetManualRotation(element, { angle: parsed });
   };
 
+  // Keyframe navigation state
+  const elStart = Number.parseFloat(element?.dataAttributes?.start ?? "0") || 0;
+  const elDuration = Number.parseFloat(element?.dataAttributes?.duration ?? "1") || 0;
+  const currentTime = usePlayerStore((s) => s.currentTime);
+  const currentPct = elDuration > 0 ? ((currentTime - elStart) / elDuration) * 100 : 0;
+
+  const gsapKeyframes = gsapAnimations?.find((a) => a.keyframes)?.keyframes?.keyframes ?? null;
+  const gsapAnimId =
+    gsapAnimations?.find((a) => a.keyframes)?.id ?? gsapAnimations?.[0]?.id ?? null;
+
+  // Read ALL GSAP-interpolated values at the current seek time.
+  // Discovers animated properties from the animation's keyframes/tween vars.
+  const gsapRuntimeValues: Record<string, number> | null = (() => {
+    if (!gsapAnimId || gsapAnimations.length === 0) return null;
+    const iframe = previewIframeRef?.current;
+    if (!iframe?.contentWindow) return null;
+    const selector = element.id ? `#${element.id}` : element.selector;
+    if (!selector) return null;
+    try {
+      const gsap = (
+        iframe.contentWindow as unknown as {
+          gsap?: { getProperty: (el: Element, prop: string) => number | string };
+        }
+      ).gsap;
+      if (!gsap?.getProperty) return null;
+      const el = iframe.contentDocument?.querySelector(selector);
+      if (!el) return null;
+      const propKeys = new Set<string>();
+      for (const anim of gsapAnimations) {
+        if (anim.keyframes) {
+          for (const kf of anim.keyframes.keyframes) {
+            for (const p of Object.keys(kf.properties)) propKeys.add(p);
+          }
+        }
+        for (const p of Object.keys(anim.properties)) propKeys.add(p);
+      }
+      const result: Record<string, number> = {};
+      for (const prop of propKeys) {
+        const v = Number(gsap.getProperty(el, prop));
+        if (Number.isFinite(v)) result[prop] = Math.round(v * 100) / 100;
+      }
+      return Object.keys(result).length > 0 ? result : null;
+    } catch {
+      return null;
+    }
+  })();
+
+  const displayX = gsapRuntimeValues?.x ?? manualOffset.x;
+  const displayY = gsapRuntimeValues?.y ?? manualOffset.y;
+  const displayW = gsapRuntimeValues?.width ?? resolvedWidth;
+  const displayH = gsapRuntimeValues?.height ?? resolvedHeight;
+  const displayR = gsapRuntimeValues?.rotation ?? manualRotation.angle;
+
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-900 text-neutral-100">
       <div className="border-b border-neutral-800 px-4 py-5">
@@ -317,41 +284,227 @@ export const PropertyPanel = memo(function PropertyPanel({
 
         <Section title="Layout" icon={<Move size={15} />}>
           <div className={RESPONSIVE_GRID}>
-            <MetricField
-              label="X"
-              value={formatPxMetricValue(manualOffset.x)}
-              disabled={manualOffsetEditingDisabled}
-              scrub
-              onCommit={(next) => commitManualOffset("x", next)}
-            />
-            <MetricField
-              label="Y"
-              value={formatPxMetricValue(manualOffset.y)}
-              disabled={manualOffsetEditingDisabled}
-              scrub
-              onCommit={(next) => commitManualOffset("y", next)}
-            />
-            <MetricField
-              label="W"
-              value={formatPxMetricValue(resolvedWidth)}
-              disabled={manualSizeEditingDisabled}
-              scrub
-              onCommit={(next) => commitManualSize("width", next)}
-            />
-            <MetricField
-              label="H"
-              value={formatPxMetricValue(resolvedHeight)}
-              disabled={manualSizeEditingDisabled}
-              scrub
-              onCommit={(next) => commitManualSize("height", next)}
-            />
-            <MetricField
-              label="R"
-              value={`${manualRotation.angle}°`}
-              onCommit={(next) => commitManualRotation(next.replace("°", ""))}
-            />
+            <div className="flex items-center gap-1">
+              <div className="flex-1">
+                <MetricField
+                  label="X"
+                  value={formatPxMetricValue(displayX)}
+                  disabled={manualOffsetEditingDisabled}
+                  scrub
+                  onCommit={(next) => commitManualOffset("x", next)}
+                />
+              </div>
+              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                <KeyframeNavigation
+                  property="x"
+                  keyframes={gsapKeyframes}
+                  currentPercentage={currentPct}
+                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onAddKeyframe={() =>
+                    onCommitAnimatedProperty &&
+                    void onCommitAnimatedProperty(element, "x", displayX)
+                  }
+                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(gsapAnimId, pct)}
+                  onConvertToKeyframes={() => onConvertToKeyframes?.(gsapAnimId)}
+                />
+              )}
+            </div>
+            <div className="flex items-center gap-1">
+              <div className="flex-1">
+                <MetricField
+                  label="Y"
+                  value={formatPxMetricValue(displayY)}
+                  disabled={manualOffsetEditingDisabled}
+                  scrub
+                  onCommit={(next) => commitManualOffset("y", next)}
+                />
+              </div>
+              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                <KeyframeNavigation
+                  property="y"
+                  keyframes={gsapKeyframes}
+                  currentPercentage={currentPct}
+                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onAddKeyframe={() =>
+                    onCommitAnimatedProperty &&
+                    void onCommitAnimatedProperty(element, "y", displayY)
+                  }
+                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(gsapAnimId, pct)}
+                  onConvertToKeyframes={() => onConvertToKeyframes?.(gsapAnimId)}
+                />
+              )}
+            </div>
+            <div className="flex items-center gap-1">
+              <div className="flex-1">
+                <MetricField
+                  label="W"
+                  value={formatPxMetricValue(displayW)}
+                  disabled={manualSizeEditingDisabled}
+                  scrub
+                  onCommit={(next) => commitManualSize("width", next)}
+                />
+              </div>
+              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                <KeyframeNavigation
+                  property="width"
+                  keyframes={gsapKeyframes}
+                  currentPercentage={currentPct}
+                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onAddKeyframe={() =>
+                    onCommitAnimatedProperty &&
+                    void onCommitAnimatedProperty(element, "width", displayW)
+                  }
+                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(gsapAnimId, pct)}
+                  onConvertToKeyframes={() => onConvertToKeyframes?.(gsapAnimId)}
+                />
+              )}
+            </div>
+            <div className="flex items-center gap-1">
+              <div className="flex-1">
+                <MetricField
+                  label="H"
+                  value={formatPxMetricValue(displayH)}
+                  disabled={manualSizeEditingDisabled}
+                  scrub
+                  onCommit={(next) => commitManualSize("height", next)}
+                />
+              </div>
+              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                <KeyframeNavigation
+                  property="height"
+                  keyframes={gsapKeyframes}
+                  currentPercentage={currentPct}
+                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onAddKeyframe={() =>
+                    onCommitAnimatedProperty &&
+                    void onCommitAnimatedProperty(element, "height", displayH)
+                  }
+                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(gsapAnimId, pct)}
+                  onConvertToKeyframes={() => onConvertToKeyframes?.(gsapAnimId)}
+                />
+              )}
+            </div>
+            {element.capabilities.canApplyManualSize && (
+              <button
+                type="button"
+                className="flex-shrink-0 rounded p-1 text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+                title="Fit to children"
+                onClick={() => {
+                  const size = computeFitToChildrenSize(element);
+                  if (size) onSetManualSize(element, size);
+                }}
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 14 14"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.2"
+                >
+                  <rect x="2" y="2" width="10" height="10" strokeDasharray="2 1.5" rx="1" />
+                  <path d="M2 4.5h1m-1 5h1m8-5h1m-1 5h1M4.5 2v1m5-1v1M4.5 11v1m5-1v1" />
+                </svg>
+              </button>
+            )}
+            <div className="flex items-center gap-1">
+              <div className="flex-1">
+                <MetricField
+                  label="R"
+                  value={`${displayR}°`}
+                  onCommit={(next) => commitManualRotation(next.replace("°", ""))}
+                />
+              </div>
+              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                <KeyframeNavigation
+                  property="rotation"
+                  keyframes={gsapKeyframes}
+                  currentPercentage={currentPct}
+                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onAddKeyframe={() =>
+                    onCommitAnimatedProperty &&
+                    void onCommitAnimatedProperty(element, "rotation", displayR)
+                  }
+                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(gsapAnimId, pct)}
+                  onConvertToKeyframes={() => onConvertToKeyframes?.(gsapAnimId)}
+                />
+              )}
+            </div>
           </div>
+          {gsapRuntimeValues && (
+            <div className="mt-3 border-t border-neutral-800/40 pt-3">
+              <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
+                3D Transform
+              </div>
+              <div className={RESPONSIVE_GRID}>
+                <div className="flex items-center gap-1">
+                  <div className="flex-1">
+                    <MetricField
+                      label="Z"
+                      value={formatPxMetricValue(gsapRuntimeValues.z ?? 0)}
+                      scrub
+                      onCommit={(next) => {
+                        const v = parsePxMetricValue(next);
+                        if (v != null && onCommitAnimatedProperty) {
+                          void onCommitAnimatedProperty(element, "z", v);
+                        }
+                      }}
+                    />
+                  </div>
+                  {STUDIO_KEYFRAMES_ENABLED && (gsapAnimId || onCommitAnimatedProperty) && (
+                    <KeyframeNavigation
+                      property="z"
+                      keyframes={gsapKeyframes}
+                      currentPercentage={currentPct}
+                      onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                      onAddKeyframe={() => {
+                        if (onCommitAnimatedProperty) {
+                          void onCommitAnimatedProperty(element, "z", gsapRuntimeValues?.z ?? 0);
+                        }
+                      }}
+                      onRemoveKeyframe={(pct) => gsapAnimId && onRemoveKeyframe?.(gsapAnimId, pct)}
+                      onConvertToKeyframes={() => gsapAnimId && onConvertToKeyframes?.(gsapAnimId)}
+                    />
+                  )}
+                </div>
+                <MetricField
+                  label="Scale"
+                  value={String(gsapRuntimeValues.scale ?? 1)}
+                  scrub
+                  onCommit={(next) => {
+                    const v = Number.parseFloat(next);
+                    if (Number.isFinite(v) && onCommitAnimatedProperty) {
+                      void onCommitAnimatedProperty(element, "scale", v);
+                    }
+                  }}
+                />
+                <MetricField
+                  label="RotX"
+                  value={`${gsapRuntimeValues.rotationX ?? 0}°`}
+                  onCommit={(next) => {
+                    const v = Number.parseFloat(next.replace("°", ""));
+                    if (Number.isFinite(v) && onCommitAnimatedProperty) {
+                      void onCommitAnimatedProperty(element, "rotationX", v);
+                    }
+                  }}
+                />
+                <MetricField
+                  label="RotY"
+                  value={`${gsapRuntimeValues.rotationY ?? 0}°`}
+                  onCommit={(next) => {
+                    const v = Number.parseFloat(next.replace("°", ""));
+                    if (Number.isFinite(v) && onCommitAnimatedProperty) {
+                      void onCommitAnimatedProperty(element, "rotationY", v);
+                    }
+                  }}
+                />
+              </div>
+            </div>
+          )}
           <div className="mt-3">
+            <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
+              Stacking
+            </div>
             <MetricField
               label="Z-index"
               value={String(parseInt(styles["z-index"] || "auto", 10) || 0)}

package/src/components/editor/SnapGuideOverlay.tsx

@@ -0,0 +1,166 @@
+// fallow-ignore-file unused-file
+import { memo, useRef, type RefObject } from "react";
+import { useMountEffect } from "../../hooks/useMountEffect";
+import type { SnapGuide, SpacingGuide } from "./snapEngine";
+
+export interface SnapGuidesState {
+  guides: SnapGuide[];
+  spacingGuides: SpacingGuide[];
+}
+
+const MAX_GUIDES = 6;
+const MAX_SPACING_GUIDES = 4;
+
+const GUIDE_COLOR = "rgba(255, 68, 204, 0.85)";
+const SPACING_COLOR = "rgba(255, 68, 204, 0.6)";
+const SPACING_BG = "rgba(255, 68, 204, 0.15)";
+
+interface SnapGuideOverlayProps {
+  snapGuidesRef: RefObject<SnapGuidesState | null>;
+  overlayWidth: number;
+  overlayHeight: number;
+}
+
+export const SnapGuideOverlay = memo(function SnapGuideOverlay({
+  snapGuidesRef,
+  overlayWidth,
+  overlayHeight,
+}: SnapGuideOverlayProps) {
+  const guideElsRef = useRef<(HTMLDivElement | null)[]>([]);
+  const spacingElsRef = useRef<(HTMLDivElement | null)[]>([]);
+  const spacingLabelElsRef = useRef<(HTMLSpanElement | null)[]>([]);
+  const overlayWidthRef = useRef(overlayWidth);
+  overlayWidthRef.current = overlayWidth;
+  const overlayHeightRef = useRef(overlayHeight);
+  overlayHeightRef.current = overlayHeight;
+
+  useMountEffect(() => {
+    let frame = 0;
+
+    // fallow-ignore-next-line complexity
+    const update = () => {
+      frame = requestAnimationFrame(update);
+
+      const state = snapGuidesRef.current;
+      const guides = state?.guides ?? [];
+      const spacingGuides = state?.spacingGuides ?? [];
+      const w = overlayWidthRef.current;
+      const h = overlayHeightRef.current;
+
+      for (let i = 0; i < MAX_GUIDES; i++) {
+        const el = guideElsRef.current[i];
+        if (!el) continue;
+
+        const guide = guides[i];
+        if (!guide) {
+          el.style.display = "none";
+          continue;
+        }
+
+        el.style.display = "";
+        if (guide.axis === "x") {
+          el.style.left = `${guide.position}px`;
+          el.style.top = "0";
+          el.style.width = "1px";
+          el.style.height = `${h}px`;
+        } else {
+          el.style.left = "0";
+          el.style.top = `${guide.position}px`;
+          el.style.width = `${w}px`;
+          el.style.height = "1px";
+        }
+      }
+
+      for (let i = 0; i < MAX_SPACING_GUIDES; i++) {
+        const el = spacingElsRef.current[i];
+        const label = spacingLabelElsRef.current[i];
+        if (!el) continue;
+
+        const sg = spacingGuides[i];
+        if (!sg) {
+          el.style.display = "none";
+          continue;
+        }
+
+        el.style.display = "flex";
+        el.style.alignItems = "center";
+        el.style.justifyContent = "center";
+        if (sg.axis === "x") {
+          el.style.left = `${sg.position}px`;
+          el.style.top = `${sg.from}px`;
+          el.style.width = `${sg.size}px`;
+          el.style.height = `${sg.to - sg.from}px`;
+          el.style.borderLeft = `1px dashed ${SPACING_COLOR}`;
+          el.style.borderRight = `1px dashed ${SPACING_COLOR}`;
+          el.style.borderTop = "none";
+          el.style.borderBottom = "none";
+        } else {
+          el.style.left = `${sg.from}px`;
+          el.style.top = `${sg.position}px`;
+          el.style.width = `${sg.to - sg.from}px`;
+          el.style.height = `${sg.size}px`;
+          el.style.borderTop = `1px dashed ${SPACING_COLOR}`;
+          el.style.borderBottom = `1px dashed ${SPACING_COLOR}`;
+          el.style.borderLeft = "none";
+          el.style.borderRight = "none";
+        }
+
+        if (label) {
+          label.textContent = `${Math.round(sg.size)}`;
+        }
+      }
+    };
+
+    frame = requestAnimationFrame(update);
+    return () => cancelAnimationFrame(frame);
+  });
+
+  return (
+    <div aria-hidden="true" className="pointer-events-none absolute inset-0">
+      {Array.from({ length: MAX_GUIDES }, (_, i) => (
+        <div
+          key={`guide-${i}`}
+          ref={(el) => {
+            guideElsRef.current[i] = el;
+          }}
+          style={{
+            display: "none",
+            position: "absolute",
+            backgroundColor: GUIDE_COLOR,
+            zIndex: 50,
+          }}
+        />
+      ))}
+
+      {Array.from({ length: MAX_SPACING_GUIDES }, (_, i) => (
+        <div
+          key={`spacing-${i}`}
+          ref={(el) => {
+            spacingElsRef.current[i] = el;
+          }}
+          style={{
+            display: "none",
+            position: "absolute",
+            zIndex: 50,
+          }}
+        >
+          <span
+            ref={(el) => {
+              spacingLabelElsRef.current[i] = el;
+            }}
+            style={{
+              fontSize: "10px",
+              fontFamily: "monospace",
+              color: GUIDE_COLOR,
+              backgroundColor: SPACING_BG,
+              padding: "0 3px",
+              borderRadius: "2px",
+              lineHeight: "14px",
+              whiteSpace: "nowrap",
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+});