@hyperframes/studio 0.7.71 → 0.7.73

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

@@ -0,0 +1,188 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { parseWiggleEase } from "@hyperframes/core/wiggle-ease";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { EaseBezierField, SpringBounceField, WiggleField } from "./EaseParamFields";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const roots: Root[] = [];
+
+afterEach(() => {
+  act(() => roots.splice(0).forEach((root) => root.unmount()));
+  document.body.innerHTML = "";
+});
+
+function renderField(field: React.ReactNode): HTMLElement {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  roots.push(root);
+  act(() => root.render(field));
+  return host;
+}
+
+function parsedWiggle(ease: string) {
+  const config = parseWiggleEase(ease);
+  expect(config).not.toBeNull();
+  if (!config) throw new Error(`Expected a valid wiggle ease: ${ease}`);
+  return config;
+}
+
+function expectWiggleCommit(onCommit: ReturnType<typeof vi.fn>, ease: string): void {
+  expect(onCommit).toHaveBeenLastCalledWith(ease);
+  const emitted = onCommit.mock.lastCall?.[0];
+  expect(typeof emitted === "string" ? parseWiggleEase(emitted) : null).not.toBeNull();
+}
+
+function inputValue(input: HTMLInputElement, value: string): void {
+  act(() => {
+    const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+    valueSetter?.call(input, value);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+}
+
+function commitInputValue(input: HTMLInputElement, value: string): void {
+  act(() => input.focus());
+  inputValue(input, value);
+  act(() => input.blur());
+}
+
+// Render a default wiggle field, type `value` into the input labelled `label`,
+// and return the commit spy — the shared body of the input-edit cases.
+function editWiggle(label: string, value: string): ReturnType<typeof vi.fn> {
+  const onCommit = vi.fn();
+  const host = renderField(
+    <WiggleField config={parsedWiggle("wiggle(6,easeOut,0.26)")} onCommit={onCommit} />,
+  );
+  const input = host.querySelector<HTMLInputElement>(`[aria-label="${label}"]`);
+  expect(input).not.toBeNull();
+  if (input) commitInputValue(input, value);
+  return onCommit;
+}
+
+describe("WiggleField", () => {
+  it("reflects a parsed wiggle config", () => {
+    const host = renderField(
+      <WiggleField config={parsedWiggle("wiggle(6,easeOut,0.26)")} onCommit={vi.fn()} />,
+    );
+
+    expect(host.querySelector<HTMLInputElement>('[aria-label="Wiggle count"]')?.value).toBe("6");
+    expect(host.querySelector<HTMLSelectElement>('[aria-label="Wiggle type"]')?.value).toBe(
+      "easeOut",
+    );
+    expect(host.querySelector<HTMLInputElement>('[aria-label="Wiggle amplitude"]')?.value).toBe(
+      "0.26",
+    );
+  });
+
+  it("commits an edited count", () => {
+    expectWiggleCommit(editWiggle("Wiggle count", "4"), "wiggle(4,easeOut,0.26)");
+  });
+
+  it("commits an edited type", () => {
+    const onCommit = vi.fn();
+    const host = renderField(
+      <WiggleField config={parsedWiggle("wiggle(6,easeOut,0.26)")} onCommit={onCommit} />,
+    );
+
+    const select = host.querySelector<HTMLSelectElement>('[aria-label="Wiggle type"]');
+    expect(select).not.toBeNull();
+    act(() => {
+      if (!select) return;
+      select.value = "anticipate";
+      select.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+
+    expectWiggleCommit(onCommit, "wiggle(6,anticipate,0.26)");
+  });
+
+  it("commits an edited amplitude", () => {
+    expectWiggleCommit(editWiggle("Wiggle amplitude", "0.1"), "wiggle(6,easeOut,0.1)");
+  });
+
+  it("seeds and explicitly commits the per-type default amplitude", () => {
+    const onCommit = vi.fn();
+    const host = renderField(
+      <WiggleField config={parsedWiggle("wiggle(3,easeInOut)")} onCommit={onCommit} />,
+    );
+
+    expect(host.querySelector<HTMLInputElement>('[aria-label="Wiggle amplitude"]')?.value).toBe(
+      "0.08",
+    );
+    const count = host.querySelector<HTMLInputElement>('[aria-label="Wiggle count"]');
+    expect(count).not.toBeNull();
+    if (count) commitInputValue(count, "4");
+
+    expectWiggleCommit(onCommit, "wiggle(4,easeInOut,0.08)");
+  });
+
+  it("ignores an empty amplitude", () => {
+    expect(editWiggle("Wiggle amplitude", "")).not.toHaveBeenCalled();
+  });
+
+  it("rejects a count below one", () => {
+    expect(editWiggle("Wiggle count", "0")).not.toHaveBeenCalled();
+  });
+});
+
+describe("moved ease parameter fields", () => {
+  it("keeps the spring bounce commit behavior", () => {
+    const onCommit = vi.fn();
+    const host = renderField(<SpringBounceField springBounce={0.5} onCommit={onCommit} />);
+    const input = host.querySelector<HTMLInputElement>('[aria-label="Spring bounce"]');
+    expect(input).not.toBeNull();
+    if (input) commitInputValue(input, "0.333");
+
+    expect(onCommit).toHaveBeenLastCalledWith("spring(0.33)");
+  });
+
+  it("commits a numeric draft exactly once when Enter blurs the field", () => {
+    const onCommit = vi.fn();
+    const host = renderField(<SpringBounceField springBounce={0.5} onCommit={onCommit} />);
+    const input = host.querySelector<HTMLInputElement>('[aria-label="Spring bounce"]')!;
+
+    act(() => input.focus());
+    inputValue(input, "0.7");
+    act(() => input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true })));
+
+    expect(onCommit).toHaveBeenCalledExactlyOnceWith("spring(0.7)");
+  });
+
+  it("keeps the cubic-bezier tuple commit behavior", () => {
+    const onCommit = vi.fn();
+    const host = renderField(<EaseBezierField tuple={[0.33, 0, 0.67, 1]} onCommit={onCommit} />);
+    const input = host.querySelector<HTMLInputElement>(
+      '[aria-label="Cubic bezier control points"]',
+    );
+    expect(input).not.toBeNull();
+    act(() => {
+      if (!input) return;
+      input.focus();
+      const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+      valueSetter?.call(input, "0.111, 0.222, 0.777, 0.888");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    });
+
+    expect(onCommit).toHaveBeenCalledExactlyOnceWith("custom(M0,0 C0.11,0.22 0.78,0.89 1,1)");
+  });
+
+  it("keeps the bezier input mounted and reports invalid values", () => {
+    const onCommit = vi.fn();
+    const host = renderField(<EaseBezierField tuple={[0.33, 0, 0.67, 1]} onCommit={onCommit} />);
+    const input = host.querySelector<HTMLInputElement>(
+      '[aria-label="Cubic bezier control points"]',
+    )!;
+
+    commitInputValue(input, "0.5, 1e9, 0.5, -1e9");
+
+    expect(input.isConnected).toBe(true);
+    expect(input.getAttribute("aria-invalid")).toBe("true");
+    expect(host.textContent).toContain("Y values must be between -1 and 2");
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+});

package/src/components/editor/EaseParamFields.tsx

@@ -0,0 +1,246 @@
+import { useEffect, useId, useRef, useState } from "react";
+import { parseSpringBounce } from "@hyperframes/core/spring-ease";
+import {
+  parseWiggleEase,
+  type WiggleEaseConfig,
+  type WiggleType,
+} from "@hyperframes/core/wiggle-ease";
+import { roundToCenti } from "../../utils/rounding";
+import { MiniCurveSvg } from "./easeCurveSvg";
+
+type Pts = [number, number, number, number];
+
+const round2 = roundToCenti;
+const BEZIER_Y_MIN = -1;
+const BEZIER_Y_MAX = 2;
+const WIGGLE_TYPES = ["easeOut", "easeInOut", "anticipate", "uniform"] as const;
+const WIGGLE_DEFAULT_AMPLITUDE = {
+  easeOut: 0.16,
+  easeInOut: 0.08,
+  anticipate: 0.12,
+  uniform: 0.14,
+} satisfies Record<WiggleType, number>;
+
+function isWiggleType(value: string): value is WiggleType {
+  return WIGGLE_TYPES.some((type) => type === value);
+}
+
+function commitWiggle(
+  onCommit: (ease: string) => void,
+  count: number,
+  type: WiggleType,
+  amplitude: number,
+): void {
+  const ease = `wiggle(${count},${type},${roundToCenti(amplitude)})`;
+  if (parseWiggleEase(ease)) onCommit(ease);
+}
+
+// Editable cubic-bezier control points, Figma-style ("0.33, 0, 0, 1").
+export function EaseBezierField({
+  tuple,
+  onCommit,
+}: {
+  tuple: Pts;
+  onCommit: (ease: string) => void;
+}) {
+  const text = tuple.join(", ");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const errorId = useId();
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.value = text;
+    setError(null);
+  }, [text]);
+
+  const commit = (raw: string) => {
+    const tokens = raw.trim().split(/[\s,]+/);
+    const nums = tokens.map(Number);
+    if (tokens.length !== 4 || nums.some((value) => !Number.isFinite(value))) {
+      setError("Enter four finite numbers");
+      return;
+    }
+    const [x1, y1, x2, y2] = nums as [number, number, number, number];
+    if (y1 < BEZIER_Y_MIN || y1 > BEZIER_Y_MAX || y2 < BEZIER_Y_MIN || y2 > BEZIER_Y_MAX) {
+      setError(`Y values must be between ${BEZIER_Y_MIN} and ${BEZIER_Y_MAX}`);
+      return;
+    }
+    const cx = (v: number) => Math.max(0, Math.min(1, v));
+    setError(null);
+    onCommit(`custom(M0,0 C${round2(cx(x1))},${round2(y1)} ${round2(cx(x2))},${round2(y2)} 1,1)`);
+  };
+  return (
+    <div className="mt-1.5 px-0.5">
+      <div className="flex items-center gap-1.5">
+        <MiniCurveSvg
+          ease={`custom(M0,0 C${tuple[0]},${tuple[1]} ${tuple[2]},${tuple[3]} 1,1)`}
+          active
+          size={14}
+        />
+        <input
+          ref={inputRef}
+          type="text"
+          defaultValue={text}
+          aria-label="Cubic bezier control points"
+          aria-invalid={error !== null}
+          aria-describedby={error ? errorId : undefined}
+          onInput={() => setError(null)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") event.currentTarget.blur();
+            if (event.key === "Escape") {
+              event.currentTarget.value = text;
+              setError(null);
+            }
+          }}
+          onBlur={(event) => commit(event.currentTarget.value)}
+          className={`w-full rounded border bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none ${
+            error
+              ? "border-red-500/70 focus:border-red-400"
+              : "border-white/10 focus:border-panel-accent/50"
+          }`}
+        />
+      </div>
+      <p
+        id={errorId}
+        aria-live="polite"
+        className={`mt-1 text-[9px] text-red-400 ${error ? "" : "sr-only"}`}
+      >
+        {error ?? "Valid bezier values"}
+      </p>
+    </div>
+  );
+}
+
+function NumericCommitInput({
+  label,
+  value,
+  min,
+  max,
+  step,
+  className,
+  onCommit,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  max?: number;
+  step: number;
+  className: string;
+  onCommit: (value: number) => void;
+}) {
+  const [draft, setDraft] = useState(String(value));
+  useEffect(() => setDraft(String(value)), [value]);
+  const commit = () => {
+    if (draft.trim() === "") {
+      setDraft(String(value));
+      return;
+    }
+    const next = Number(draft);
+    if (!Number.isFinite(next) || next < min || (max !== undefined && next > max)) {
+      setDraft(String(value));
+      return;
+    }
+    onCommit(next);
+  };
+  return (
+    <input
+      type="number"
+      aria-label={label}
+      min={min}
+      max={max}
+      step={step}
+      value={draft}
+      onChange={(event) => setDraft(event.currentTarget.value)}
+      onBlur={commit}
+      onKeyDown={(event) => {
+        if (event.key === "Enter") event.currentTarget.blur();
+        if (event.key === "Escape") {
+          setDraft(String(value));
+        }
+      }}
+      className={className}
+    />
+  );
+}
+
+export function SpringBounceField({
+  springBounce,
+  onCommit,
+}: {
+  springBounce: number;
+  onCommit: (ease: string) => void;
+}) {
+  return (
+    <div className="mt-1.5 flex items-center gap-2 px-0.5 text-[10px] text-neutral-400">
+      <span aria-hidden="true">Bounce</span>
+      <NumericCommitInput
+        label="Spring bounce"
+        value={springBounce}
+        min={0}
+        max={1}
+        step={0.01}
+        onCommit={(value) => {
+          const bounce = parseSpringBounce(`spring(${value})`);
+          if (bounce !== null) onCommit(`spring(${round2(bounce)})`);
+        }}
+        className="w-16 rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+      />
+    </div>
+  );
+}
+
+export function WiggleField({
+  config,
+  onCommit,
+}: {
+  config: WiggleEaseConfig;
+  onCommit: (ease: string) => void;
+}) {
+  const amplitude = config.amplitude ?? WIGGLE_DEFAULT_AMPLITUDE[config.type];
+  return (
+    <div className="mt-1.5 flex items-center gap-2 px-0.5 text-[10px] text-neutral-400">
+      <div className="flex items-center gap-1">
+        <span aria-hidden="true">Count</span>
+        <NumericCommitInput
+          label="Wiggle count"
+          value={config.wiggles}
+          min={1}
+          step={1}
+          onCommit={(value) => commitWiggle(onCommit, value, config.type, amplitude)}
+          className="w-14 rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+        />
+      </div>
+      <div className="flex items-center gap-1">
+        <span aria-hidden="true">Type</span>
+        <select
+          aria-label="Wiggle type"
+          value={config.type}
+          onChange={(event) => {
+            if (isWiggleType(event.currentTarget.value)) {
+              commitWiggle(onCommit, config.wiggles, event.currentTarget.value, amplitude);
+            }
+          }}
+          className="rounded border border-white/10 bg-black/20 px-1.5 py-1 text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+        >
+          {WIGGLE_TYPES.map((type) => (
+            <option key={type} value={type}>
+              {type}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="flex items-center gap-1">
+        <span aria-hidden="true">Amplitude</span>
+        <NumericCommitInput
+          label="Wiggle amplitude"
+          value={amplitude}
+          min={0}
+          max={1}
+          step={0.01}
+          onCommit={(value) => commitWiggle(onCommit, config.wiggles, config.type, value)}
+          className="w-16 rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -812,10 +812,10 @@ describe("PropertyPanel — Media group (Plan 4)", () => {
 // design_handoff scrollable-open-section: collapsed headers before/after the
 // open group render in normal document flow and never move (no sticky, no
 // stacking offsets) — only the open group's own body content scrolls, in a
-// dedicated region between the two fixed header stacks. Worked example: 6
-// groups [text, style, layout, motion, grade, media], motion open (index 3)
+// dedicated region between the two fixed header stacks. Worked example: 7
+// groups [text, style, layout, motion, grade, effects, media], motion open (index 3)
 // -> text/style/layout render as fixed collapsed headers before it, motion
-// renders as an open header + scrollable body, grade/media render as fixed
+// renders as an open header + scrollable body, grade/effects/media render as fixed
 // collapsed headers after it — in exactly that DOM order, nothing sticky.
 describe("PropertyPanel — fixed headers + scrollable open section (Plan 11)", () => {
   it(
@@ -839,13 +839,14 @@ describe("PropertyPanel — fixed headers + scrollable open section (Plan 11)",
       });
       // Filter to just the group entries (drop any non-group nulls).
       const groupTitles = titles.filter((t): t is string => t !== null);
-      expect(groupTitles).toHaveLength(6);
+      expect(groupTitles).toHaveLength(7);
       expect(groupTitles[0]).toContain("Text");
       expect(groupTitles[1]).toContain("Style");
       expect(groupTitles[2]).toContain("Layout");
       expect(groupTitles[3]).toContain("Motion");
       expect(groupTitles[4]).toContain("Grade");
-      expect(groupTitles[5]).toContain("Media");
+      expect(groupTitles[5]).toContain("Effects");
+      expect(groupTitles[6]).toContain("Media");
 
       // The open group (Motion, index 3) is the one wrapped in
       // data-flat-group-open, sitting between the before/after collapsed
@@ -880,14 +881,15 @@ describe("PropertyPanel — fixed headers + scrollable open section (Plan 11)",
       const collapsedRows = Array.from(
         host.querySelectorAll<HTMLButtonElement>('[data-flat-group-collapsed="true"]'),
       );
-      expect(collapsedRows).toHaveLength(6);
+      expect(collapsedRows).toHaveLength(7);
       const titlesInOrder = collapsedRows.map((el) => el.textContent ?? "");
       expect(titlesInOrder[0]).toContain("Text");
       expect(titlesInOrder[1]).toContain("Style");
       expect(titlesInOrder[2]).toContain("Layout");
       expect(titlesInOrder[3]).toContain("Motion");
       expect(titlesInOrder[4]).toContain("Grade");
-      expect(titlesInOrder[5]).toContain("Media");
+      expect(titlesInOrder[5]).toContain("Effects");
+      expect(titlesInOrder[6]).toContain("Media");
 
       const body = host.querySelector('[data-flat-panel-body="true"]');
       expect(body?.querySelector(".overflow-y-auto")).toBeNull();