@hyperframes/studio 0.6.97 → 0.6.98

package/src/components/editor/LayersPanel.tsx

@@ -5,7 +5,7 @@ import {
   resolveDomEditSelection,
   type DomEditLayerItem,
 } from "./domEditing";
-import { useStudioContext } from "../../contexts/StudioContext";
+import { useStudioPlaybackContext, useStudioShellContext } from "../../contexts/StudioContext";
 import { useDomEditContext } from "../../contexts/DomEditContext";
 import { usePlayerStore } from "../../player";
 import {
@@ -54,14 +54,8 @@ interface CollapsedState {
 
 // fallow-ignore-next-line complexity
 export const LayersPanel = memo(function LayersPanel() {
-  const {
-    previewIframeRef,
-    activeCompPath,
-    refreshKey,
-    compositionLoading,
-    timelineElements,
-    showToast,
-  } = useStudioContext();
+  const { previewIframeRef, activeCompPath, showToast } = useStudioShellContext();
+  const { refreshKey, compositionLoading, timelineElements } = useStudioPlaybackContext();
   const currentTime = usePlayerStore((s) => s.currentTime);
   const {
     domEditSelection,

package/src/components/editor/PropertyPanel.tsx

@@ -1,6 +1,6 @@
 import { memo, useEffect, useRef, useState } from "react";
 import { Eye, Layers, Move, X } from "../../icons/SystemIcons";
-import { useStudioContext } from "../../contexts/StudioContext";
+import { useStudioShellContext } from "../../contexts/StudioContext";
 import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
 import {
   EMPTY_STYLES,
@@ -11,6 +11,7 @@ import {
   readGsapBorderRadiusForPanel,
 } from "./propertyPanelHelpers";
 import { MetricField, Section } from "./propertyPanelPrimitives";
+import { createTransformCommitHandlers } from "./propertyPanelTransformCommit";
 import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
 import { isMediaElement, MediaSection } from "./propertyPanelMediaSection";
 import { TextSection, StyleSections } from "./propertyPanelSections";
@@ -83,7 +84,7 @@ export const PropertyPanel = memo(function PropertyPanel({
   onToggleRecording,
 }: PropertyPanelProps) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
-  const { showToast } = useStudioContext();
+  const { showToast } = useStudioShellContext();
   const [clipboardCopied, setClipboardCopied] = useState(false);
   const clipboardTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const storeTime = usePlayerStore((s) => s.currentTime);
@@ -144,6 +145,7 @@ export const PropertyPanel = memo(function PropertyPanel({
 
   const manualOffsetEditingDisabled = !element.capabilities.canApplyManualOffset;
   const manualSizeEditingDisabled = !element.capabilities.canApplyManualSize;
+  const manualRotationEditingDisabled = !element.capabilities.canApplyManualRotation;
   const sourceLabel = element.id ? `#${element.id}` : element.selector;
   const showEditableSections = element.capabilities.canEditStyles;
   const manualOffset = readStudioPathOffset(element.element);
@@ -157,66 +159,7 @@ export const PropertyPanel = memo(function PropertyPanel({
       ? manualSize.height
       : (parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height);
 
-  const commitManualOffset = (axis: "x" | "y", nextValue: string) => {
-    const parsed = parsePxMetricValue(nextValue);
-    if (parsed == null) return;
-    if (onCommitAnimatedProperty && hasGsapAnimation) {
-      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;
-    }
-    if (hasGsapAnimation) {
-      showToast?.("Cannot edit position — animation callbacks not available");
-      return;
-    }
-    const current = readStudioPathOffset(element.element);
-    void Promise.resolve(
-      onSetManualOffset(element, {
-        x: axis === "x" ? parsed : current.x,
-        y: axis === "y" ? parsed : current.y,
-      }),
-    ).catch(() => undefined);
-  };
-
-  // fallow-ignore-next-line complexity
-  const commitManualSize = (axis: "width" | "height", nextValue: string) => {
-    const parsed = parsePxMetricValue(nextValue);
-    if (parsed == null || parsed <= 0) return;
-    if (onCommitAnimatedProperty && hasGsapAnimation) {
-      void onCommitAnimatedProperty(element, axis, parsed);
-      return;
-    }
-    if (hasGsapAnimation) {
-      showToast?.("Cannot edit size — animation callbacks not available");
-      return;
-    }
-    const current = readStudioBoxSize(element.element);
-    const width =
-      current.width > 0
-        ? current.width
-        : (parsePxMetricValue(styles.width ?? "") ?? element.boundingBox.width);
-    const height =
-      current.height > 0
-        ? current.height
-        : (parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height);
-    void Promise.resolve(
-      onSetManualSize(element, {
-        width: axis === "width" ? parsed : width,
-        height: axis === "height" ? parsed : height,
-      }),
-    ).catch(() => undefined);
-  };
-
   const manualRotation = readStudioRotation(element.element);
-  const commitManualRotation = (nextValue: string) => {
-    const parsed = Number.parseFloat(nextValue);
-    if (!Number.isFinite(parsed)) return;
-    void Promise.resolve(onSetManualRotation(element, { angle: parsed })).catch(() => undefined);
-  };
 
   const elStart = Number.parseFloat(element?.dataAttributes?.start ?? "0") || 0;
   const elDuration = Number.parseFloat(element?.dataAttributes?.duration ?? "1") || 0;
@@ -226,6 +169,21 @@ export const PropertyPanel = memo(function PropertyPanel({
   const gsapKeyframes = gsapKfAnim?.keyframes?.keyframes ?? null;
   const gsapAnimId = gsapKfAnim?.id ?? gsapAnimations?.[0]?.id ?? null;
   const hasGsapAnimation = !!(gsapAnimId || gsapAnimations.length > 0);
+  const { commitManualOffset, commitManualSize, commitManualRotation } =
+    createTransformCommitHandlers({
+      element,
+      styles,
+      hasGsapAnimation,
+      gsapAnimId,
+      gsapKeyframes,
+      currentPct,
+      onCommitAnimatedProperty,
+      onAddKeyframe,
+      onSetManualOffset,
+      onSetManualSize,
+      onSetManualRotation,
+      showToast,
+    });
   const navKeyframes = cacheEntry?.keyframes ?? gsapKeyframes;
   const seekFromKfPct = (pct: number) => onSeekToTime?.(elStart + (pct / 100) * elDuration);
 
@@ -495,6 +453,7 @@ export const PropertyPanel = memo(function PropertyPanel({
                 <MetricField
                   label="R"
                   value={`${displayR}°`}
+                  disabled={manualRotationEditingDisabled}
                   onCommit={(next) => commitManualRotation(next.replace("°", ""))}
                 />
               </div>

package/src/components/editor/colorValue.ts

@@ -1,3 +1,5 @@
+import { roundToCenti } from "../../utils/rounding";
+
 export interface ParsedColor {
   red: number;
   green: number;
@@ -24,7 +26,7 @@ function toHex(value: number): string {
 }
 
 function formatAlpha(value: number): string {
-  return `${Math.round(clampAlpha(value) * 100) / 100}`;
+  return `${roundToCenti(clampAlpha(value))}`;
 }
 
 export function parseCssColor(value: string): ParsedColor | null {

package/src/components/editor/domEditOverlayGestures.ts

@@ -1,3 +1,4 @@
+import type { RefObject } from "react";
 import type { DomEditSelection } from "./domEditing";
 import type {
   StudioBoxSizeSnapshot,
@@ -5,8 +6,9 @@ import type {
   StudioRotationSnapshot,
 } from "./manualEdits";
 import type { ManualOffsetDragMember } from "./manualOffsetDrag";
-import type { GroupOverlayItem } from "./domEditOverlayGeometry";
+import type { GroupOverlayItem, OverlayRect } from "./domEditOverlayGeometry";
 import type { SnapContext } from "./snapTargetCollection";
+import type { SnapGuidesState } from "./SnapGuideOverlay";
 
 export type GestureKind = "drag" | "resize" | "rotate";
 
@@ -143,3 +145,54 @@ export function resolveDomEditRotationGesture(input: {
 export function hasDomEditRotationChanged(initialAngle: number, nextAngle: number): boolean {
   return Math.abs(nextAngle - initialAngle) >= ROTATION_COMMIT_EPSILON_DEGREES;
 }
+
+// ── Shared types for DomEditOverlay gesture wiring ──
+// These live here (rather than in DomEditOverlay.tsx or useDomEditOverlayGestures.ts)
+// to break circular imports between those files.
+
+export interface DomEditGroupPathOffsetCommit {
+  selection: DomEditSelection;
+  next: { x: number; y: number };
+}
+
+// Refs are stable across renders; values are read via .current.
+export type UseDomEditOverlayGesturesOptions = {
+  overlayRef: RefObject<HTMLDivElement | null>;
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  boxRef: RefObject<HTMLDivElement | null>;
+  selectionRef: RefObject<DomEditSelection | null>;
+  overlayRectRef: RefObject<OverlayRect | null>;
+  groupOverlayItemsRef: RefObject<GroupOverlayItem[]>;
+  gestureRef: RefObject<GestureState | null>;
+  groupGestureRef: RefObject<GroupGestureState | null>;
+  blockedMoveRef: RefObject<BlockedMoveState | null>;
+  rafPausedRef: RefObject<boolean>;
+  suppressNextBoxClickRef: RefObject<boolean>;
+  setOverlayRect: (next: OverlayRect | null) => void;
+  setGroupOverlayItems: (next: GroupOverlayItem[]) => void;
+  onBlockedMoveRef: RefObject<(selection: DomEditSelection) => void>;
+  onManualDragStartRef: RefObject<(() => void) | undefined>;
+  onPathOffsetCommitRef: RefObject<
+    (s: DomEditSelection, n: { x: number; y: number }) => Promise<void> | void
+  >;
+  onGroupPathOffsetCommitRef: RefObject<
+    (updates: DomEditGroupPathOffsetCommit[]) => Promise<void> | void
+  >;
+  onBoxSizeCommitRef: RefObject<
+    (s: DomEditSelection, n: { width: number; height: number }) => Promise<void> | void
+  >;
+  onRotationCommitRef: RefObject<
+    (s: DomEditSelection, n: { angle: number }) => Promise<void> | void
+  >;
+  onCanvasPointerMoveRef: RefObject<
+    (
+      e: React.PointerEvent<HTMLDivElement>,
+      o?: { preferClipAncestor?: boolean },
+    ) => Promise<DomEditSelection | null>
+  >;
+  onCanvasMouseDown: (
+    e: React.MouseEvent<HTMLDivElement>,
+    o?: { preferClipAncestor?: boolean },
+  ) => void;
+  snapGuidesRef: RefObject<SnapGuidesState | null>;
+};

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -21,8 +21,11 @@ import {
   filterNestedDomEditGroupItems,
   selectionCacheKey,
 } from "./domEditOverlayGeometry";
-import { type GestureKind, type GestureState } from "./domEditOverlayGestures";
-import type { UseDomEditOverlayGesturesOptions } from "./useDomEditOverlayGestures";
+import {
+  type GestureKind,
+  type GestureState,
+  type UseDomEditOverlayGesturesOptions,
+} from "./domEditOverlayGestures";
 import { collectSnapContext, buildExcludeElements } from "./snapTargetCollection";
 
 export function startGroupDrag(

package/src/components/editor/gradientValue.ts

@@ -1,3 +1,5 @@
+import { roundToCenti } from "../../utils/rounding";
+
 export type GradientKind = "linear" | "radial" | "conic";
 
 export type RadialSizeKeyword =
@@ -124,9 +126,7 @@ function clamp(value: number, min: number, max: number): number {
   return Math.min(max, Math.max(min, value));
 }
 
-function round(value: number): number {
-  return Math.round(value * 100) / 100;
-}
+const round = roundToCenti;
 
 function parsePercent(value: string | undefined, fallback: number): number {
   const parsed = parseCssNumber(value);

package/src/components/editor/keyframeMove.test.ts

@@ -0,0 +1,101 @@
+import { describe, it, expect } from "vitest";
+import { pickKeyframeTween, computeKeyframeMovePlan } from "./keyframeMove";
+
+const flat = (id: string, target: string, position: number, duration: number, group?: string) => ({
+  id,
+  targetSelector: target,
+  position,
+  duration,
+  resolvedStart: position,
+  propertyGroup: group,
+});
+
+const el = { start: 0, duration: 10, domId: "box", selector: "#box" };
+
+describe("pickKeyframeTween", () => {
+  it("matches by the element's selector", () => {
+    const anims = [flat("a", "#other", 0, 5), flat("b", "#box", 2, 3)];
+    expect(pickKeyframeTween(anims, el, 3, undefined)?.id).toBe("b");
+  });
+
+  it("prefers the dragged keyframe's property group", () => {
+    const anims = [flat("pos", "#box", 0, 8, "position"), flat("vis", "#box", 0, 8, "visual")];
+    expect(pickKeyframeTween(anims, el, 1, "visual")?.id).toBe("vis");
+  });
+
+  it("among same-group tweens picks the one whose window contains the original time", () => {
+    const fadeIn = flat("in", "#box", 1, 1, "visual");
+    const fadeOut = flat("out", "#box", 8, 1, "visual");
+    expect(pickKeyframeTween([fadeIn, fadeOut], el, 8.5, "visual")?.id).toBe("out");
+    expect(pickKeyframeTween([fadeIn, fadeOut], el, 1.2, "visual")?.id).toBe("in");
+  });
+
+  it("returns undefined when there are no tweens", () => {
+    expect(pickKeyframeTween([], el, 1, undefined)).toBeUndefined();
+  });
+
+  it("returns undefined rather than editing another element on a selector mismatch", () => {
+    const anims = [flat("a", "#other", 0, 5), flat("b", ".unrelated", 2, 3)];
+    expect(pickKeyframeTween(anims, el, 3, undefined)).toBeUndefined();
+  });
+});
+
+describe("computeKeyframeMovePlan — flat tween", () => {
+  const anim = flat("t", "#box", 2, 4); // window [2, 6]
+
+  it("start point trims the front, keeping the end fixed", () => {
+    // newPct 30% → abs 3 → start moves to 3, duration shrinks to 3.
+    const plan = computeKeyframeMovePlan(anim, 0, el, 30);
+    expect(plan.meta).toEqual({ position: 3, duration: 3 });
+    expect(plan.removes).toEqual([]);
+  });
+
+  it("end point resizes, keeping the start", () => {
+    // tweenOldPct 100 (end) → newPct 80% → abs 8 → duration 6, start unchanged.
+    const plan = computeKeyframeMovePlan(anim, 100, el, 80);
+    expect(plan.meta).toEqual({ position: 2, duration: 6 });
+  });
+});
+
+describe("computeKeyframeMovePlan — keyframe-array tween", () => {
+  const anim = {
+    id: "k",
+    targetSelector: "#box",
+    position: 0,
+    duration: 10,
+    resolvedStart: 0,
+    keyframes: {
+      keyframes: [
+        { percentage: 0, properties: { x: 0 } },
+        { percentage: 50, properties: { x: 50 } },
+        { percentage: 100, properties: { x: 100 } },
+      ],
+    },
+  };
+
+  it("moves an intermediate keyframe without touching the tween or others", () => {
+    // mid keyframe (tweenPct 50) → newPct 70% → abs 7 → 70% of the tween.
+    const plan = computeKeyframeMovePlan(anim, 50, el, 70);
+    expect(plan.meta).toBeUndefined();
+    expect(plan.removes).toEqual([50]);
+    expect(plan.adds).toEqual([{ pct: 70, properties: { x: 50 } }]);
+  });
+
+  it("start move remaps intermediates to preserve their absolute times", () => {
+    // start (tweenPct 0) → newPct 20% → abs 2 → window [2,10]. The 50% keyframe
+    // was at abs 5 → now (5-2)/8 = 37.5%.
+    const plan = computeKeyframeMovePlan(anim, 0, el, 20);
+    expect(plan.meta).toEqual({ position: 2, duration: 8 });
+    expect(plan.removes).toContain(50);
+    const mid = plan.adds.find((a) => a.properties.x === 50);
+    expect(mid?.pct).toBeCloseTo(37.5, 1);
+  });
+
+  it("is a no-op when the dragged keyframe can't be located (stale cache)", () => {
+    // tweenOldPct 33 matches no keyframe (0/50/100) → must NOT resize the tween.
+    const plan = computeKeyframeMovePlan(anim, 33, el, 70);
+    expect(plan.meta).toBeUndefined();
+    expect(plan.removes).toEqual([]);
+    expect(plan.adds).toEqual([]);
+  });
+});

package/src/components/editor/keyframeMove.ts

@@ -0,0 +1,151 @@
+/**
+ * Pure helpers for committing a keyframe-diamond drag: pick the tween the
+ * dragged keyframe belongs to, and compute the GSAP mutations (tween
+ * position/duration and/or keyframe add/remove) for the move. Kept free of
+ * React/store so the timeline drag handler stays a thin orchestrator.
+ */
+
+interface TweenLike {
+  id: string;
+  targetSelector: string;
+  position: number | string;
+  duration?: number;
+  resolvedStart?: number;
+  propertyGroup?: string;
+  keyframes?: { keyframes: { percentage: number; properties: Record<string, number | string> }[] };
+}
+
+interface ElementWindow {
+  start: number;
+  duration: number;
+  domId?: string;
+  selector?: string;
+}
+
+export interface KeyframeMovePlan {
+  /** Tween timing change (start/end point drags). */
+  meta?: { position: number; duration: number };
+  /** Keyframe percentages to remove, then re-add (intermediate move / remap). */
+  removes: number[];
+  adds: { pct: number; properties: Record<string, number | string> }[];
+}
+
+const round3 = (n: number) => Math.round(n * 1000) / 1000;
+const clampPct = (n: number) => Math.max(0, Math.min(100, Math.round(n * 100) / 100));
+const MIN_DUR = 0.05;
+
+function tweenWindow(a: TweenLike): { start: number; dur: number } {
+  return {
+    start: a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0),
+    dur: a.duration ?? 0,
+  };
+}
+
+type Kf = { percentage: number; properties: Record<string, number | string> };
+
+/**
+ * Remap every keyframe except `keepIdx` from the old tween window to the new one
+ * so their absolute times stay fixed after a start/end resize. Returns the
+ * remove/add ops (empty for flat tweens, which have no intermediates).
+ */
+function remapKeyframes(
+  kfs: Kf[],
+  keepIdx: number,
+  oldStart: number,
+  oldDur: number,
+  newStart: number,
+  newDur: number,
+): Pick<KeyframeMovePlan, "removes" | "adds"> {
+  const removes: number[] = [];
+  const adds: KeyframeMovePlan["adds"] = [];
+  if (newDur <= 0) return { removes, adds };
+  for (let i = 0; i < kfs.length; i++) {
+    if (i === keepIdx) continue;
+    const k = kfs[i]!;
+    const absT = oldStart + (k.percentage / 100) * oldDur;
+    const remapped = clampPct(((absT - newStart) / newDur) * 100);
+    if (Math.abs(remapped - k.percentage) < 0.05) continue;
+    removes.push(k.percentage);
+    adds.push({ pct: remapped, properties: k.properties });
+  }
+  return { removes, adds };
+}
+
+/**
+ * Pick the tween the dragged keyframe belongs to: restrict to the element's
+ * selector and (if known) the keyframe's property group, then choose the one
+ * whose time window contains — or is nearest — the keyframe's original time.
+ * An element can have several tweens in one group (e.g. fade-in + fade-out).
+ */
+export function pickKeyframeTween<T extends TweenLike>(
+  anims: T[],
+  el: ElementWindow,
+  origAbsTime: number,
+  group: string | undefined,
+): T | undefined {
+  const selectors = [el.domId ? `#${el.domId}` : null, el.selector].filter(Boolean);
+  const forEl = anims.filter((a) => selectors.includes(a.targetSelector));
+  // Only ever pick among THIS element's tweens. Don't fall back to all
+  // animations — a selector mismatch (e.g. a class/compound-selector tween)
+  // would otherwise edit a different element's keyframes. No match → no-op.
+  if (forEl.length === 0) return undefined;
+  const groupPool = group ? forEl.filter((a) => a.propertyGroup === group) : [];
+  const candidates = groupPool.length > 0 ? groupPool : forEl;
+  const dist = (a: T): number => {
+    const { start, dur } = tweenWindow(a);
+    if (origAbsTime >= start && origAbsTime <= start + dur) return 0;
+    return Math.min(Math.abs(origAbsTime - start), Math.abs(origAbsTime - (start + dur)));
+  };
+  return candidates.reduce((best, a) => (dist(a) < dist(best) ? a : best), candidates[0]!);
+}
+
+/**
+ * Compute the mutations for moving a keyframe to `newPct` (clip-relative):
+ * - start point → trim front (position moves, end fixed),
+ * - end point   → resize (duration changes, start fixed),
+ * - intermediate → move only that keyframe; start/end moves remap the other
+ *   keyframes so their absolute times stay put.
+ */
+// fallow-ignore-next-line complexity
+export function computeKeyframeMovePlan(
+  anim: TweenLike,
+  tweenOldPct: number,
+  el: ElementWindow,
+  newPct: number,
+): KeyframeMovePlan {
+  const newAbsTime = el.start + (newPct / 100) * el.duration;
+  const tweenStart = tweenWindow(anim).start;
+  const tweenDur = anim.duration ?? el.duration;
+  const kfs = anim.keyframes
+    ? anim.keyframes.keyframes.slice().sort((a, b) => a.percentage - b.percentage)
+    : null;
+  const idx = kfs ? kfs.findIndex((k) => Math.abs(k.percentage - tweenOldPct) < 0.5) : -1;
+
+  // Keyframe-array tween but the dragged keyframe couldn't be located (stale
+  // cache / precision drift): no-op rather than falling through to an end-point
+  // resize that would silently rescale the whole tween and re-time every key.
+  if (kfs && idx === -1) return { removes: [], adds: [] };
+
+  if (kfs && idx > 0 && idx < kfs.length - 1) {
+    const movedPct = tweenDur > 0 ? clampPct(((newAbsTime - tweenStart) / tweenDur) * 100) : 0;
+    return { removes: [tweenOldPct], adds: [{ pct: movedPct, properties: kfs[idx]!.properties }] };
+  }
+
+  const isStartPoint = kfs ? idx === 0 : tweenOldPct <= 50;
+  let newStart = tweenStart;
+  let newDur = tweenDur;
+  if (isStartPoint) {
+    const end = tweenStart + tweenDur;
+    newStart = Math.max(0, Math.min(newAbsTime, end - MIN_DUR));
+    newDur = end - newStart;
+  } else {
+    newDur = Math.max(MIN_DUR, newAbsTime - tweenStart);
+  }
+
+  const windowChanged = newStart !== tweenStart || newDur !== tweenDur;
+  const remap =
+    kfs && windowChanged
+      ? remapKeyframes(kfs, idx, tweenStart, tweenDur, newStart, newDur)
+      : { removes: [], adds: [] };
+  return { meta: { position: round3(newStart), duration: round3(newDur) }, ...remap };
+}

package/src/components/editor/manualEditsDom.ts

@@ -506,18 +506,6 @@ export function applyStudioRotationDraft(element: HTMLElement, rotation: { angle
   );
 }
 
-/* ── HTML patch builders (re-exported from manualEditsDomPatches) ── */
-export {
-  buildPathOffsetPatches,
-  buildClearPathOffsetPatches,
-  buildBoxSizePatches,
-  buildClearBoxSizePatches,
-  buildRotationPatches,
-  buildClearRotationPatches,
-  buildMotionPatches,
-  buildClearMotionPatches,
-} from "./manualEditsDomPatches";
-
 /* ── Seek reapply (position + motion) ────────────────────────────── */
 
 function queryStudioElements(doc: Document, attr: string): HTMLElement[] {

package/src/components/editor/propertyPanelHelpers.ts

@@ -3,6 +3,7 @@ import { COMMON_LOCAL_FONT_FAMILIES } from "./fontCatalog";
 import type { DomEditSelection } from "./domEditing";
 import type { ImportedFontAsset } from "./fontAssets";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { roundToCenti } from "../../utils/rounding";
 
 export interface PropertyPanelProps {
   projectId: string;
@@ -239,8 +240,13 @@ export function parseNumericValue(value: string | undefined): number | null {
   return Number.isFinite(parsed) ? parsed : null;
 }
 
+export function formatTimingValue(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0.00s";
+  return `${seconds.toFixed(2)}s`;
+}
+
 export function formatNumericValue(value: number): string {
-  const rounded = Math.round(value * 100) / 100;
+  const rounded = roundToCenti(value);
   return Number.isInteger(rounded)
     ? `${rounded}`
     : rounded.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
@@ -473,40 +479,6 @@ export function extractBackgroundImageUrl(value: string | undefined): string {
   return value.slice(index, endParen).trim();
 }
 
-// ── Fit to children ──────────────────────────────────────────────────
-
-export function computeFitToChildrenSize(
-  element: DomEditSelection,
-): { width: number; height: number } | null {
-  const el = element.element;
-  const win = el.ownerDocument?.defaultView;
-  const children = Array.from(el.children).filter((c): c is HTMLElement => c.nodeType === 1);
-  if (children.length === 0) return null;
-  let minX = Infinity,
-    minY = Infinity,
-    maxX = -Infinity,
-    maxY = -Infinity;
-  for (const child of children) {
-    if (win) {
-      const cs = win.getComputedStyle(child);
-      if (cs.visibility === "hidden" || cs.display === "none") continue;
-    }
-    const r = child.getBoundingClientRect();
-    if (r.width === 0 && r.height === 0) continue;
-    minX = Math.min(minX, r.left);
-    minY = Math.min(minY, r.top);
-    maxX = Math.max(maxX, r.right);
-    maxY = Math.max(maxY, r.bottom);
-  }
-  if (!isFinite(minX)) return null;
-  const parentRect = el.getBoundingClientRect();
-  const scaleX = parentRect.width > 0 ? element.boundingBox.width / parentRect.width : 1;
-  const scaleY = parentRect.height > 0 ? element.boundingBox.height / parentRect.height : 1;
-  const width = Math.round((maxX - minX) * scaleX);
-  const height = Math.round((maxY - minY) * scaleY);
-  return width > 0 && height > 0 ? { width, height } : null;
-}
-
 // ── GSAP runtime value readers (used by PropertyPanel) ────────────────────
 
 export function readGsapRuntimeValuesForPanel(
@@ -541,7 +513,7 @@ export function readGsapRuntimeValuesForPanel(
     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;
+      if (Number.isFinite(v)) result[prop] = roundToCenti(v);
     }
     return Object.keys(result).length > 0 ? result : null;
   } catch {
@@ -568,8 +540,8 @@ export function readGsapBorderRadiusForPanel(
   if (!iframe?.contentDocument || !selector) return null;
   try {
     const el = iframe.contentDocument.querySelector(selector);
-    if (!el) return null;
-    const cs = iframe.contentWindow!.getComputedStyle(el);
+    if (!el || !iframe.contentWindow) return null;
+    const cs = iframe.contentWindow.getComputedStyle(el);
     const parse = (v: string) => Number.parseFloat(v) || 0;
     return {
       tl: parse(cs.borderTopLeftRadius),

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -3,6 +3,7 @@ import { Check, ClipboardList, Film, Music } from "../../icons/SystemIcons";
 import type { DomEditSelection } from "./domEditing";
 import {
   formatNumericValue,
+  formatTimingValue,
   LABEL,
   parseNumericValue,
   RESPONSIVE_GRID,
@@ -15,11 +16,6 @@ export function isMediaElement(element: DomEditSelection): boolean {
   return MEDIA_TAGS.has(element.tagName);
 }
 
-function formatTimingValue(seconds: number): string {
-  if (!Number.isFinite(seconds) || seconds < 0) return "0.00s";
-  return `${seconds.toFixed(2)}s`;
-}
-
 export function MediaSection({
   projectDir,
   element,

package/src/components/editor/propertyPanelTimingSection.tsx

@@ -1,13 +1,8 @@
 import { Clock } from "../../icons/SystemIcons";
 import type { DomEditSelection } from "./domEditing";
-import { RESPONSIVE_GRID } from "./propertyPanelHelpers";
+import { formatTimingValue, RESPONSIVE_GRID } from "./propertyPanelHelpers";
 import { MetricField, Section } from "./propertyPanelPrimitives";
 
-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);