@hyperframes/studio 0.7.57 → 0.7.59

package/src/components/editor/propertyPanelFlatLayoutSection.test.tsx

@@ -0,0 +1,293 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  FlatLayoutSection,
+  LayoutFlexBlock,
+  LayoutGeometryRows,
+  LayoutTransform3DBlock,
+  LayoutZIndexRow,
+} from "./propertyPanelFlatLayoutSection";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function renderInto(node: React.ReactElement) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(node);
+  });
+  return { host, root };
+}
+
+function getFlatRowInput(host: HTMLElement, label: string): HTMLInputElement {
+  const rows = Array.from(host.querySelectorAll<HTMLElement>(".group"));
+  const row = rows.find((el) => el.querySelector("span")?.textContent === label);
+  const input = row?.querySelector<HTMLInputElement>("input");
+  if (!input) throw new Error(`expected an input for row "${label}"`);
+  return input;
+}
+
+function baseGeometryProps(overrides: Partial<Parameters<typeof LayoutGeometryRows>[0]> = {}) {
+  return {
+    element: {} as never,
+    displayX: 0,
+    displayY: -24,
+    displayW: 257.4,
+    displayH: 29,
+    displayR: 0,
+    manualOffsetEditingDisabled: false,
+    manualSizeEditingDisabled: false,
+    manualRotationEditingDisabled: false,
+    commitManualOffset: vi.fn(),
+    commitManualSize: vi.fn(),
+    commitManualRotation: vi.fn(),
+    gsapAnimId: null,
+    navKeyframes: null,
+    currentPct: 0,
+    seekFromKfPct: vi.fn(),
+    animIdForProp: (prop: string) => prop,
+    onCommitAnimatedProperty: vi.fn(),
+    onRemoveKeyframe: vi.fn(),
+    onConvertToKeyframes: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe("LayoutGeometryRows", () => {
+  it("renders X, Y, W, H, Angle labels and formatted values", () => {
+    const { host, root } = renderInto(<LayoutGeometryRows {...baseGeometryProps()} />);
+    expect(host.textContent).toContain("X");
+    expect(host.textContent).toContain("Y");
+    expect(host.textContent).toContain("W");
+    expect(host.textContent).toContain("H");
+    expect(host.textContent).toContain("Angle");
+    expect(getFlatRowInput(host, "W").value).toBe("257.4px");
+    expect(getFlatRowInput(host, "Y").value).toBe("-24px");
+    act(() => root.unmount());
+  });
+
+  it("commits an X edit through commitManualOffset", () => {
+    const commitManualOffset = vi.fn();
+    const { host, root } = renderInto(
+      <LayoutGeometryRows {...baseGeometryProps({ commitManualOffset })} />,
+    );
+    const input = host.querySelectorAll("input")[0];
+    if (!input) throw new Error("expected an X input");
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!;
+    act(() => {
+      setter.call(input, "40px");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("focusout", { bubbles: true }));
+    });
+    expect(commitManualOffset).toHaveBeenCalledWith("x", "40px");
+    act(() => root.unmount());
+  });
+
+  it("wraps the keyframe gutter cluster at 30% opacity when the property has no keyframes", () => {
+    const { host, root } = renderInto(
+      <LayoutGeometryRows {...baseGeometryProps({ gsapAnimId: "anim-1", navKeyframes: null })} />,
+    );
+    const dimmed = host.querySelectorAll('[data-flat-kf-gutter="true"][style*="opacity: 0.3"]');
+    expect(dimmed.length).toBeGreaterThan(0);
+    act(() => root.unmount());
+  });
+
+  it("does not dim the gutter cluster when the property has keyframes", () => {
+    const { host, root } = renderInto(
+      <LayoutGeometryRows
+        {...baseGeometryProps({
+          gsapAnimId: "anim-1",
+          navKeyframes: [{ percentage: 0, properties: { x: 0 } }],
+        })}
+      />,
+    );
+    const full = host.querySelectorAll('[data-flat-kf-gutter="true"][style*="opacity: 1"]');
+    expect(full.length).toBeGreaterThan(0);
+    act(() => root.unmount());
+  });
+
+  it("passes the real element/selection (not null) to onCommitAnimatedProperty when adding a keyframe", () => {
+    const onCommitAnimatedProperty = vi.fn();
+    const element = { id: "el-1" } as unknown as Parameters<
+      typeof LayoutGeometryRows
+    >[0]["element"];
+    const { host, root } = renderInto(
+      <LayoutGeometryRows
+        {...baseGeometryProps({
+          element,
+          gsapAnimId: "anim-1",
+          navKeyframes: [{ percentage: 50, properties: { x: 5 } }],
+          currentPct: 0,
+          onCommitAnimatedProperty,
+        })}
+      />,
+    );
+    const addButton = host.querySelector('[title="Add x keyframe"]');
+    if (!addButton) throw new Error("expected an Add x keyframe button");
+    act(() => {
+      (addButton as HTMLElement).dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    expect(onCommitAnimatedProperty).toHaveBeenCalledWith(element, "x", 0);
+    expect(onCommitAnimatedProperty).not.toHaveBeenCalledWith(null, "x", 0);
+    act(() => root.unmount());
+  });
+});
+
+describe("LayoutZIndexRow", () => {
+  it("renders the current z-index at the default tier and commits edits", () => {
+    const onSetStyle = vi.fn();
+    const { host, root } = renderInto(
+      <LayoutZIndexRow styles={{ "z-index": "3" }} onSetStyle={onSetStyle} />,
+    );
+    expect(host.textContent).toContain("Z-index");
+    const input = host.querySelector("input");
+    if (!input) throw new Error("expected an input");
+    expect(input.value).toBe("3");
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!;
+    act(() => {
+      setter.call(input, "5");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("focusout", { bubbles: true }));
+    });
+    expect(onSetStyle).toHaveBeenCalledWith("z-index", "5");
+    act(() => root.unmount());
+  });
+});
+
+describe("LayoutFlexBlock", () => {
+  it("renders nothing when the element is not flex", () => {
+    const { host, root } = renderInto(
+      <LayoutFlexBlock styles={{ display: "block" }} onSetStyle={vi.fn()} disabled={false} />,
+    );
+    expect(host.textContent).toBe("");
+    act(() => root.unmount());
+  });
+
+  it("renders direction/justify/align/gap and commits a direction change", () => {
+    const onSetStyle = vi.fn();
+    const { host, root } = renderInto(
+      <LayoutFlexBlock
+        styles={{ display: "flex", "flex-direction": "row", gap: "8px" }}
+        onSetStyle={onSetStyle}
+        disabled={false}
+      />,
+    );
+    expect(host.textContent).toContain("Flex");
+    const columnOption = Array.from(host.querySelectorAll('[data-flat-segment="true"]')).find(
+      (el) => el.textContent === "Column",
+    );
+    if (!columnOption) throw new Error("expected a Column segment option");
+    act(() =>
+      (columnOption as HTMLElement).dispatchEvent(new MouseEvent("click", { bubbles: true })),
+    );
+    expect(onSetStyle).toHaveBeenCalledWith("flex-direction", "column");
+    act(() => root.unmount());
+  });
+});
+
+describe("LayoutTransform3DBlock", () => {
+  it("renders the nested 3D transform sub-view", () => {
+    const { host, root } = renderInto(
+      <LayoutTransform3DBlock
+        gsapRuntimeValues={{}}
+        gsapAnimId={null}
+        gsapKeyframes={null}
+        currentPct={0}
+        elStart={0}
+        elDuration={0}
+        element={{} as never}
+        onCommitAnimatedProperty={vi.fn()}
+        onCommitAnimatedProperties={vi.fn()}
+        onSeekToTime={vi.fn()}
+        onRemoveKeyframe={vi.fn()}
+        onConvertToKeyframes={vi.fn()}
+      />,
+    );
+    // PropertyPanel3dTransform's own internals aren't this task's concern (it's
+    // reused unmodified) — just confirm the wrapper mounted something.
+    expect(host.children.length).toBeGreaterThan(0);
+    act(() => root.unmount());
+  });
+});
+
+describe("FlatLayoutSection", () => {
+  it("renders geometry rows, z-index, flex (when applicable), and the 3D transform block in order", () => {
+    const { host, root } = renderInto(
+      <FlatLayoutSection
+        element={{} as never}
+        styles={{ display: "flex", "flex-direction": "row" }}
+        onSetStyle={vi.fn()}
+        disabled={false}
+        displayX={0}
+        displayY={0}
+        displayW={100}
+        displayH={100}
+        displayR={0}
+        manualOffsetEditingDisabled={false}
+        manualSizeEditingDisabled={false}
+        manualRotationEditingDisabled={false}
+        commitManualOffset={vi.fn()}
+        commitManualSize={vi.fn()}
+        commitManualRotation={vi.fn()}
+        gsapAnimId={null}
+        navKeyframes={null}
+        currentPct={0}
+        seekFromKfPct={vi.fn()}
+        animIdForProp={(p) => p}
+        gsapRuntimeValues={{}}
+        gsapKeyframes={null}
+        elStart={0}
+        elDuration={0}
+        onSeekToTime={vi.fn()}
+      />,
+    );
+    const text = host.textContent ?? "";
+    expect(text).toContain("X");
+    expect(text).toContain("Z-index");
+    expect(text).toContain("Flex");
+    expect(text).toContain("3D Transform");
+    act(() => root.unmount());
+  });
+
+  it("omits the Flex block for a non-flex element", () => {
+    const { host, root } = renderInto(
+      <FlatLayoutSection
+        element={{} as never}
+        styles={{ display: "block" }}
+        onSetStyle={vi.fn()}
+        disabled={false}
+        displayX={0}
+        displayY={0}
+        displayW={100}
+        displayH={100}
+        displayR={0}
+        manualOffsetEditingDisabled={false}
+        manualSizeEditingDisabled={false}
+        manualRotationEditingDisabled={false}
+        commitManualOffset={vi.fn()}
+        commitManualSize={vi.fn()}
+        commitManualRotation={vi.fn()}
+        gsapAnimId={null}
+        navKeyframes={null}
+        currentPct={0}
+        seekFromKfPct={vi.fn()}
+        animIdForProp={(p) => p}
+        gsapRuntimeValues={{}}
+        gsapKeyframes={null}
+        elStart={0}
+        elDuration={0}
+        onSeekToTime={vi.fn()}
+      />,
+    );
+    expect(host.textContent).not.toContain("Flex");
+    act(() => root.unmount());
+  });
+});

package/src/components/editor/propertyPanelFlatLayoutSection.tsx

@@ -0,0 +1,383 @@
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+import { FlatRow, FlatSegmentedRow, FlatSelectRow } from "./propertyPanelFlatPrimitives";
+import { KeyframeNavigation } from "./KeyframeNavigation";
+import { formatPxMetricValue } from "./propertyPanelHelpers";
+import { STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
+import { resolveValueTier } from "./propertyPanelValueTier";
+import { PropertyPanel3dTransform } from "./propertyPanel3dTransform";
+import type { DomEditSelection } from "./domEditingTypes";
+
+type KeyframeEntry = Array<{
+  percentage: number;
+  tweenPercentage?: number;
+  properties: Record<string, number | string>;
+  ease?: string;
+}> | null;
+
+interface GeometryRowsProps {
+  element: DomEditSelection;
+  displayX: number;
+  displayY: number;
+  displayW: number;
+  displayH: number;
+  displayR: number;
+  manualOffsetEditingDisabled: boolean;
+  manualSizeEditingDisabled: boolean;
+  manualRotationEditingDisabled: boolean;
+  commitManualOffset: (axis: "x" | "y", value: string) => void;
+  commitManualSize: (dimension: "width" | "height", value: string) => void;
+  commitManualRotation: (value: string) => void;
+  gsapAnimId: string | null;
+  navKeyframes: KeyframeEntry;
+  currentPct: number;
+  seekFromKfPct: (pct: number) => void;
+  animIdForProp: (prop: string) => string;
+  onCommitAnimatedProperty?: (
+    element: DomEditSelection,
+    property: string,
+    value: number,
+  ) => Promise<void>;
+  onRemoveKeyframe?: (animId: string, pct: number) => void;
+  onConvertToKeyframes?: (animId: string) => void;
+}
+
+function KeyframeGutter({
+  element,
+  property,
+  displayValue,
+  gsapAnimId,
+  navKeyframes,
+  currentPct,
+  seekFromKfPct,
+  animIdForProp,
+  onCommitAnimatedProperty,
+  onRemoveKeyframe,
+  onConvertToKeyframes,
+}: {
+  property: string;
+  displayValue: number;
+} & Pick<
+  GeometryRowsProps,
+  | "element"
+  | "gsapAnimId"
+  | "navKeyframes"
+  | "currentPct"
+  | "seekFromKfPct"
+  | "animIdForProp"
+  | "onCommitAnimatedProperty"
+  | "onRemoveKeyframe"
+  | "onConvertToKeyframes"
+>) {
+  const track = useTrackDesignInput();
+  if (!STUDIO_KEYFRAMES_ENABLED || !gsapAnimId) return null;
+  const hasKeyframesOnProp = Boolean(navKeyframes?.some((kf) => property in kf.properties));
+  return (
+    <span data-flat-kf-gutter="true" style={{ opacity: hasKeyframesOnProp ? 1 : 0.3 }}>
+      <KeyframeNavigation
+        property={property}
+        keyframes={navKeyframes}
+        currentPercentage={currentPct}
+        onSeek={seekFromKfPct}
+        onAddKeyframe={() => {
+          if (!onCommitAnimatedProperty) return;
+          track("button", `Add ${property} keyframe`);
+          void onCommitAnimatedProperty(element, property, displayValue);
+        }}
+        onRemoveKeyframe={(pct) => {
+          if (!onRemoveKeyframe) return;
+          track("button", `Remove ${property} keyframe`);
+          onRemoveKeyframe(animIdForProp(property), pct);
+        }}
+        onConvertToKeyframes={() => {
+          if (!onConvertToKeyframes) return;
+          track("button", `Convert ${property} to keyframes`);
+          onConvertToKeyframes(animIdForProp(property));
+        }}
+      />
+    </span>
+  );
+}
+
+export function LayoutGeometryRows({
+  element,
+  displayX,
+  displayY,
+  displayW,
+  displayH,
+  displayR,
+  manualOffsetEditingDisabled,
+  manualSizeEditingDisabled,
+  manualRotationEditingDisabled,
+  commitManualOffset,
+  commitManualSize,
+  commitManualRotation,
+  gsapAnimId,
+  navKeyframes,
+  currentPct,
+  seekFromKfPct,
+  animIdForProp,
+  onCommitAnimatedProperty,
+  onRemoveKeyframe,
+  onConvertToKeyframes,
+}: GeometryRowsProps) {
+  const gutterProps = {
+    element,
+    gsapAnimId,
+    navKeyframes,
+    currentPct,
+    seekFromKfPct,
+    animIdForProp,
+    onCommitAnimatedProperty,
+    onRemoveKeyframe,
+    onConvertToKeyframes,
+  };
+  return (
+    <>
+      <FlatRow
+        label="X"
+        value={formatPxMetricValue(displayX)}
+        tier={displayX === 0 ? "default" : "explicitCustom"}
+        disabled={manualOffsetEditingDisabled}
+        onCommit={(next) => commitManualOffset("x", next)}
+        suffix={<KeyframeGutter property="x" displayValue={displayX} {...gutterProps} />}
+      />
+      <FlatRow
+        label="Y"
+        value={formatPxMetricValue(displayY)}
+        tier={displayY === 0 ? "default" : "explicitCustom"}
+        disabled={manualOffsetEditingDisabled}
+        onCommit={(next) => commitManualOffset("y", next)}
+        suffix={<KeyframeGutter property="y" displayValue={displayY} {...gutterProps} />}
+      />
+      <FlatRow
+        label="W"
+        value={formatPxMetricValue(displayW)}
+        tier="default"
+        disabled={manualSizeEditingDisabled}
+        onCommit={(next) => commitManualSize("width", next)}
+        suffix={<KeyframeGutter property="width" displayValue={displayW} {...gutterProps} />}
+      />
+      <FlatRow
+        label="H"
+        value={formatPxMetricValue(displayH)}
+        tier="default"
+        disabled={manualSizeEditingDisabled}
+        onCommit={(next) => commitManualSize("height", next)}
+        suffix={<KeyframeGutter property="height" displayValue={displayH} {...gutterProps} />}
+      />
+      <FlatRow
+        label="Angle"
+        value={`${displayR}°`}
+        tier="default"
+        disabled={manualRotationEditingDisabled}
+        onCommit={(next) => commitManualRotation(next.replace("°", ""))}
+        suffix={<KeyframeGutter property="rotation" displayValue={displayR} {...gutterProps} />}
+      />
+    </>
+  );
+}
+
+export function LayoutZIndexRow({
+  styles,
+  onSetStyle,
+}: {
+  styles: Record<string, string>;
+  onSetStyle: (prop: string, value: string) => void | Promise<void>;
+}) {
+  const zIndex = String(parseInt(styles["z-index"] || "auto", 10) || 0);
+  return (
+    <FlatRow
+      label="Z-index"
+      value={zIndex}
+      tier="default"
+      onCommit={(next) => void onSetStyle("z-index", next)}
+    />
+  );
+}
+
+export function LayoutFlexBlock({
+  styles,
+  onSetStyle,
+  disabled,
+}: {
+  styles: Record<string, string>;
+  onSetStyle: (prop: string, value: string) => void | Promise<void>;
+  disabled: boolean;
+}) {
+  const isFlex = styles.display === "flex" || styles.display === "inline-flex";
+  if (!isFlex) return null;
+  const direction = styles["flex-direction"] || "row";
+  return (
+    <div className="border-l-2 border-panel-border-input py-0.5 pl-[10px]">
+      <div className="mb-[3px] text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+        Flex
+      </div>
+      <FlatSegmentedRow
+        label="Direction"
+        options={[
+          { key: "row", node: "→ Row", label: "Row", active: direction === "row" },
+          { key: "column", node: "Column", label: "Column", active: direction === "column" },
+        ]}
+        disabled={disabled}
+        onChange={(next) => void onSetStyle("flex-direction", next)}
+      />
+      <FlatSelectRow
+        label="Justify"
+        value={styles["justify-content"] || "flex-start"}
+        tier={resolveValueTier(styles["justify-content"], "flex-start")}
+        disabled={disabled}
+        options={[
+          "flex-start",
+          "center",
+          "space-between",
+          "space-around",
+          "space-evenly",
+          "flex-end",
+        ]}
+        onChange={(next) => void onSetStyle("justify-content", next)}
+      />
+      <FlatSelectRow
+        label="Align"
+        value={styles["align-items"] || "stretch"}
+        tier={resolveValueTier(styles["align-items"], "stretch")}
+        disabled={disabled}
+        options={["stretch", "flex-start", "center", "flex-end", "baseline"]}
+        onChange={(next) => void onSetStyle("align-items", next)}
+      />
+      <FlatRow
+        label="Gap"
+        value={styles.gap ?? "0px"}
+        tier={resolveValueTier(styles.gap, "0px")}
+        disabled={disabled}
+        onCommit={(next) => void onSetStyle("gap", next.endsWith("px") ? next : `${next}px`)}
+      />
+    </div>
+  );
+}
+
+export function LayoutTransform3DBlock({
+  gsapRuntimeValues,
+  gsapAnimId,
+  resolveAnimIdForProp,
+  gsapKeyframes,
+  currentPct,
+  elStart,
+  elDuration,
+  element,
+  onCommitAnimatedProperty,
+  onCommitAnimatedProperties,
+  onSeekToTime,
+  onRemoveKeyframe,
+  onConvertToKeyframes,
+  onLivePreviewProps,
+}: {
+  gsapRuntimeValues: Record<string, number>;
+  gsapAnimId: string | null;
+  resolveAnimIdForProp?: (prop: string) => string | null;
+  gsapKeyframes: Array<{
+    percentage: number;
+    properties: Record<string, number | string>;
+    ease?: string;
+  }> | null;
+  currentPct: number;
+  elStart: number;
+  elDuration: number;
+  element: DomEditSelection;
+  onCommitAnimatedProperty?: (
+    element: DomEditSelection,
+    property: string,
+    value: number,
+  ) => Promise<void>;
+  onCommitAnimatedProperties?: (
+    element: DomEditSelection,
+    props: Record<string, number | string>,
+  ) => Promise<void>;
+  onSeekToTime?: (time: number) => void;
+  onRemoveKeyframe?: (animId: string, pct: number) => void;
+  onConvertToKeyframes?: (animId: string, duration?: number) => void;
+  onLivePreviewProps?: (element: DomEditSelection, props: Record<string, number>) => void;
+}) {
+  return (
+    <div className="border-t border-panel-hairline pt-2.5">
+      <div className="mb-[3px] text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+        3D Transform
+      </div>
+      <PropertyPanel3dTransform
+        gsapRuntimeValues={gsapRuntimeValues}
+        gsapAnimId={gsapAnimId}
+        resolveAnimIdForProp={resolveAnimIdForProp}
+        gsapKeyframes={gsapKeyframes}
+        currentPct={currentPct}
+        elStart={elStart}
+        elDuration={elDuration}
+        element={element}
+        onCommitAnimatedProperty={onCommitAnimatedProperty}
+        onCommitAnimatedProperties={onCommitAnimatedProperties}
+        onSeekToTime={onSeekToTime}
+        onRemoveKeyframe={onRemoveKeyframe}
+        onConvertToKeyframes={onConvertToKeyframes}
+        onLivePreviewProps={onLivePreviewProps}
+      />
+    </div>
+  );
+}
+
+interface FlatLayoutSectionProps
+  extends
+    Omit<GeometryRowsProps, never>,
+    Pick<
+      Parameters<typeof LayoutTransform3DBlock>[0],
+      | "gsapRuntimeValues"
+      | "resolveAnimIdForProp"
+      | "gsapKeyframes"
+      | "elStart"
+      | "elDuration"
+      | "onCommitAnimatedProperties"
+      | "onSeekToTime"
+      | "onLivePreviewProps"
+    > {
+  element: DomEditSelection;
+  styles: Record<string, string>;
+  onSetStyle: (prop: string, value: string) => void | Promise<void>;
+  disabled: boolean;
+}
+
+export function FlatLayoutSection({
+  element,
+  styles,
+  onSetStyle,
+  disabled,
+  gsapRuntimeValues,
+  resolveAnimIdForProp,
+  gsapKeyframes,
+  elStart,
+  elDuration,
+  onCommitAnimatedProperties,
+  onSeekToTime,
+  onLivePreviewProps,
+  ...geometry
+}: FlatLayoutSectionProps) {
+  return (
+    <div className="space-y-1.5">
+      <LayoutGeometryRows element={element} {...geometry} />
+      <LayoutZIndexRow styles={styles} onSetStyle={onSetStyle} />
+      <LayoutFlexBlock styles={styles} onSetStyle={onSetStyle} disabled={disabled} />
+      <LayoutTransform3DBlock
+        gsapRuntimeValues={gsapRuntimeValues}
+        gsapAnimId={geometry.gsapAnimId}
+        resolveAnimIdForProp={resolveAnimIdForProp}
+        gsapKeyframes={gsapKeyframes}
+        currentPct={geometry.currentPct}
+        elStart={elStart}
+        elDuration={elDuration}
+        element={element}
+        onCommitAnimatedProperty={geometry.onCommitAnimatedProperty}
+        onCommitAnimatedProperties={onCommitAnimatedProperties}
+        onSeekToTime={onSeekToTime}
+        onRemoveKeyframe={geometry.onRemoveKeyframe}
+        onConvertToKeyframes={geometry.onConvertToKeyframes}
+        onLivePreviewProps={onLivePreviewProps}
+      />
+    </div>
+  );
+}