@hyperframes/studio 0.6.0 → 0.6.1

package/src/components/editor/MotionPanel.tsx

@@ -1,18 +1,9 @@
-import {
-  memo,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type PointerEvent,
-  type ReactNode,
-} from "react";
-import { RotateCcw, X, Zap } from "../../icons/SystemIcons";
+import { memo, useMemo } from "react";
+import { X, Zap } from "../../icons/SystemIcons";
 import type { DomEditSelection } from "./domEditing";
 import {
   STUDIO_GSAP_EASE_OPTIONS,
   buildStudioGsapPresetMotion,
-  clampStudioCustomEasePoints,
   controlPointsForGsapEase,
   parseStudioCustomEaseData,
   serializeStudioCustomEaseData,
@@ -21,6 +12,17 @@ import {
   type StudioGsapMotionDirection,
   type StudioGsapMotionPreset,
 } from "./studioMotion";
+import {
+  formatNumericValue,
+  clampMotionNumber,
+  parsePlainNumber,
+  DetailField,
+  SegmentedControl,
+  SelectField,
+  MotionSection,
+  RESPONSIVE_GRID,
+} from "./MotionPanelFields";
+import { EaseCurveEditor } from "./EaseCurveEditor";
 
 interface MotionPanelProps {
   element: DomEditSelection | null;
@@ -33,11 +35,6 @@ interface MotionPanelProps {
   onClearMotion: (element: DomEditSelection) => void;
 }
 
-const FIELD =
-  "min-w-0 rounded-xl border border-neutral-800 bg-neutral-900/95 px-3 py-2 text-neutral-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)] transition-colors focus-within:border-neutral-600";
-const LABEL = "text-[11px] font-medium uppercase tracking-[0.18em] text-neutral-500";
-const RESPONSIVE_GRID = "grid grid-cols-[repeat(auto-fit,minmax(118px,1fr))] gap-3";
-
 const MOTION_PRESET_OPTIONS: Array<{ label: string; value: StudioGsapMotionPreset }> = [
   { label: "Fade Up", value: "fade-up" },
   { label: "Slide", value: "slide" },
@@ -46,28 +43,6 @@ const MOTION_PRESET_OPTIONS: Array<{ label: string; value: StudioGsapMotionPrese
 
 const MOTION_DIRECTION_OPTIONS: StudioGsapMotionDirection[] = ["up", "down", "left", "right"];
 
-function formatNumericValue(value: number): string {
-  const rounded = Math.round(value * 100) / 100;
-  return Number.isInteger(rounded)
-    ? `${rounded}`
-    : rounded.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
-}
-
-function clampMotionNumber(
-  value: number | null,
-  min: number,
-  max: number,
-  fallback: number,
-): number {
-  if (value == null || !Number.isFinite(value)) return fallback;
-  return Math.min(max, Math.max(min, value));
-}
-
-function parsePlainNumber(value: string): number | null {
-  const parsed = Number.parseFloat(value.trim());
-  return Number.isFinite(parsed) ? parsed : null;
-}
-
 function motionValueDistance(motion: StudioGsapMotion | null): number {
   if (!motion) return 32;
   return Math.max(Math.abs(motion.from.x ?? 0), Math.abs(motion.from.y ?? 0), 1);
@@ -97,357 +72,6 @@ function buildStudioCustomEaseId(element: DomEditSelection): string {
   return `studio-${normalized || "layer"}-ease`;
 }
 
-function CommitField({
-  value,
-  disabled,
-  onCommit,
-}: {
-  value: string;
-  disabled?: boolean;
-  onCommit: (nextValue: string) => void;
-}) {
-  const [draft, setDraft] = useState(value);
-  const focusedRef = useRef(false);
-
-  useEffect(() => {
-    if (!focusedRef.current) setDraft(value);
-  }, [value]);
-
-  const commitDraft = () => {
-    focusedRef.current = false;
-    const next = draft.trim();
-    if (next !== value) onCommit(next);
-  };
-
-  return (
-    <input
-      type="text"
-      value={draft}
-      disabled={disabled}
-      onFocus={() => {
-        focusedRef.current = true;
-      }}
-      onChange={(event) => setDraft(event.target.value)}
-      onBlur={commitDraft}
-      onKeyDown={(event) => {
-        if (event.key === "Enter") (event.target as HTMLInputElement).blur();
-      }}
-      className="w-full min-w-0 bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
-    />
-  );
-}
-
-function DetailField({
-  label,
-  value,
-  disabled,
-  onCommit,
-}: {
-  label: string;
-  value: string;
-  disabled?: boolean;
-  onCommit: (nextValue: string) => void;
-}) {
-  return (
-    <label className="grid min-w-0 gap-1.5">
-      <span className={LABEL}>{label}</span>
-      <div className={FIELD}>
-        <CommitField value={value} disabled={disabled} onCommit={onCommit} />
-      </div>
-    </label>
-  );
-}
-
-function SegmentedControl({
-  value,
-  options,
-  onChange,
-}: {
-  value: string;
-  options: Array<{ label: string; value: string }>;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <div className="grid grid-cols-3 gap-1 rounded-2xl border border-neutral-800 bg-neutral-950 p-1">
-      {options.map((option) => (
-        <button
-          key={option.value}
-          type="button"
-          onClick={() => onChange(option.value)}
-          className={`h-9 rounded-xl text-[11px] font-semibold transition-colors ${
-            option.value === value
-              ? "bg-neutral-800 text-white shadow-sm"
-              : "text-neutral-500 hover:bg-neutral-900 hover:text-neutral-200"
-          }`}
-        >
-          {option.label}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-function SelectField({
-  label,
-  value,
-  options,
-  onChange,
-}: {
-  label: string;
-  value: string;
-  options: readonly string[];
-  onChange: (value: string) => void;
-}) {
-  return (
-    <label className="grid min-w-0 gap-1.5">
-      <span className={LABEL}>{label}</span>
-      <div className={FIELD}>
-        <select
-          value={value}
-          onChange={(event) => onChange(event.target.value)}
-          className="w-full min-w-0 appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none"
-        >
-          {options.map((option) => (
-            <option key={option} value={option}>
-              {option}
-            </option>
-          ))}
-        </select>
-      </div>
-    </label>
-  );
-}
-
-function MotionSection({
-  title,
-  children,
-  accessory,
-}: {
-  title: string;
-  children: ReactNode;
-  accessory?: ReactNode;
-}) {
-  return (
-    <section className="border-b border-neutral-800 px-4 py-5">
-      <div className="mb-4 flex items-center justify-between gap-3">
-        <div className="flex items-center gap-3">
-          <Zap size={15} className="text-neutral-500" />
-          <h3 className="text-[11px] font-semibold uppercase tracking-[0.22em] text-neutral-300">
-            {title}
-          </h3>
-        </div>
-        {accessory}
-      </div>
-      {children}
-    </section>
-  );
-}
-
-function cubicBezierPoint(t: number, p1: StudioCustomEaseControlPoints): { x: number; y: number } {
-  const inv = 1 - t;
-  const inv2 = inv * inv;
-  const t2 = t * t;
-  return {
-    x: 3 * inv2 * t * p1.x1 + 3 * inv * t2 * p1.x2 + t2 * t,
-    y: 3 * inv2 * t * p1.y1 + 3 * inv * t2 * p1.y2 + t2 * t,
-  };
-}
-
-function buildCurvePath(
-  points: StudioCustomEaseControlPoints,
-  map: (point: { x: number; y: number }) => { x: number; y: number },
-): string {
-  const commands: string[] = [];
-  for (let index = 0; index <= 48; index += 1) {
-    const point = map(cubicBezierPoint(index / 48, points));
-    commands.push(`${index === 0 ? "M" : "L"}${point.x.toFixed(2)},${point.y.toFixed(2)}`);
-  }
-  return commands.join(" ");
-}
-
-function EaseCurveEditor({
-  points,
-  onCommit,
-}: {
-  points: StudioCustomEaseControlPoints;
-  onCommit: (points: StudioCustomEaseControlPoints) => void;
-}) {
-  const svgRef = useRef<SVGSVGElement | null>(null);
-  const [draft, setDraft] = useState(points);
-  const draggingRef = useRef<"p1" | "p2" | null>(null);
-
-  useEffect(() => {
-    setDraft(points);
-  }, [points]);
-
-  const width = 324;
-  const height = 214;
-  const plot = { left: 46, top: 24, width: 242, height: 146 };
-  const yMin = -0.4;
-  const yMax = 1.4;
-
-  const mapPoint = (point: { x: number; y: number }) => ({
-    x: plot.left + point.x * plot.width,
-    y: plot.top + ((yMax - point.y) / (yMax - yMin)) * plot.height,
-  });
-
-  const unmapPointer = (event: PointerEvent<SVGSVGElement>) => {
-    const rect = svgRef.current?.getBoundingClientRect();
-    if (!rect) return null;
-    const x = ((event.clientX - rect.left) / rect.width) * width;
-    const y = ((event.clientY - rect.top) / rect.height) * height;
-    return clampStudioCustomEasePoints({
-      x1: draggingRef.current === "p1" ? (x - plot.left) / plot.width : draft.x1,
-      y1:
-        draggingRef.current === "p1"
-          ? yMax - ((y - plot.top) / plot.height) * (yMax - yMin)
-          : draft.y1,
-      x2: draggingRef.current === "p2" ? (x - plot.left) / plot.width : draft.x2,
-      y2:
-        draggingRef.current === "p2"
-          ? yMax - ((y - plot.top) / plot.height) * (yMax - yMin)
-          : draft.y2,
-    });
-  };
-
-  const start = mapPoint({ x: 0, y: 0 });
-  const end = mapPoint({ x: 1, y: 1 });
-  const p1 = mapPoint({ x: draft.x1, y: draft.y1 });
-  const p2 = mapPoint({ x: draft.x2, y: draft.y2 });
-  const curvePath = buildCurvePath(draft, mapPoint);
-
-  const handlePointerMove = (event: PointerEvent<SVGSVGElement>) => {
-    if (!draggingRef.current) return;
-    event.preventDefault();
-    const next = unmapPointer(event);
-    if (next) setDraft(next);
-  };
-
-  const endDrag = () => {
-    if (!draggingRef.current) return;
-    draggingRef.current = null;
-    onCommit(draft);
-  };
-
-  const startDrag = (handle: "p1" | "p2", event: PointerEvent<SVGCircleElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-    draggingRef.current = handle;
-    event.currentTarget.setPointerCapture(event.pointerId);
-  };
-
-  return (
-    <div className="overflow-hidden rounded-2xl border border-neutral-800 bg-black/40">
-      <div className="flex items-center justify-between gap-3 border-b border-neutral-800 px-3 py-2">
-        <div>
-          <div className={LABEL}>CustomEase</div>
-          <div className="mt-1 font-mono text-[10px] text-neutral-500">
-            {serializeStudioCustomEaseData(draft)}
-          </div>
-        </div>
-        <button
-          type="button"
-          onClick={() => {
-            const reset = controlPointsForGsapEase("power3.out");
-            setDraft(reset);
-            onCommit(reset);
-          }}
-          className="inline-flex h-8 items-center justify-center gap-2 rounded-xl border border-neutral-800 bg-neutral-950 px-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-100"
-        >
-          <RotateCcw size={13} />
-          Reset
-        </button>
-      </div>
-      <svg
-        ref={svgRef}
-        viewBox={`0 0 ${width} ${height}`}
-        className="block w-full select-none touch-none"
-        onPointerMove={handlePointerMove}
-        onPointerUp={endDrag}
-        onPointerCancel={endDrag}
-      >
-        <rect x="0" y="0" width={width} height={height} fill="transparent" />
-        {[0, 0.5, 1].map((value) => {
-          const mapped = mapPoint({ x: 0, y: value });
-          return (
-            <g key={value}>
-              <line
-                x1={plot.left}
-                x2={plot.left + plot.width}
-                y1={mapped.y}
-                y2={mapped.y}
-                stroke="rgba(255,255,255,0.12)"
-                strokeDasharray="5 8"
-              />
-              <text
-                x={plot.left - 12}
-                y={mapped.y + 4}
-                textAnchor="end"
-                className="fill-neutral-500 text-[10px] font-semibold"
-              >
-                {value}
-              </text>
-            </g>
-          );
-        })}
-        <line
-          x1={plot.left}
-          x2={plot.left + plot.width}
-          y1={plot.top + plot.height}
-          y2={plot.top + plot.height}
-          stroke="rgba(255,255,255,0.18)"
-        />
-        <line
-          x1={plot.left}
-          x2={plot.left}
-          y1={plot.top}
-          y2={plot.top + plot.height}
-          stroke="rgba(255,255,255,0.18)"
-        />
-        <line x1={start.x} y1={start.y} x2={p1.x} y2={p1.y} stroke="rgba(255,221,87,0.34)" />
-        <line x1={end.x} y1={end.y} x2={p2.x} y2={p2.y} stroke="rgba(255,221,87,0.34)" />
-        <path d={curvePath} fill="none" stroke="#ffdd57" strokeWidth="4" strokeLinecap="round" />
-        <circle cx={start.x} cy={start.y} r="5" fill="#ffdd57" />
-        <circle cx={end.x} cy={end.y} r="5" fill="#ffdd57" />
-        <circle
-          cx={p1.x}
-          cy={p1.y}
-          r="9"
-          fill="#141414"
-          stroke="#ffdd57"
-          strokeWidth="4"
-          className="cursor-grab active:cursor-grabbing"
-          onPointerDown={(event) => startDrag("p1", event)}
-        />
-        <circle
-          cx={p2.x}
-          cy={p2.y}
-          r="9"
-          fill="#141414"
-          stroke="#ffdd57"
-          strokeWidth="4"
-          className="cursor-grab active:cursor-grabbing"
-          onPointerDown={(event) => startDrag("p2", event)}
-        />
-        <text x={p1.x + 12} y={p1.y - 10} className="fill-neutral-400 text-[10px] font-semibold">
-          P1
-        </text>
-        <text x={p2.x + 12} y={p2.y - 10} className="fill-neutral-400 text-[10px] font-semibold">
-          P2
-        </text>
-      </svg>
-      <div className="grid grid-cols-2 gap-2 border-t border-neutral-800 p-3">
-        <div className="rounded-xl border border-neutral-800 bg-neutral-950 px-3 py-2 font-mono text-[10px] text-neutral-400">
-          P1 {formatNumericValue(draft.x1)}, {formatNumericValue(draft.y1)}
-        </div>
-        <div className="rounded-xl border border-neutral-800 bg-neutral-950 px-3 py-2 font-mono text-[10px] text-neutral-400">
-          P2 {formatNumericValue(draft.x2)}, {formatNumericValue(draft.y2)}
-        </div>
-      </div>
-    </div>
-  );
-}
-
 export const MotionPanel = memo(function MotionPanel({
   element,
   motion,
@@ -546,7 +170,9 @@ export const MotionPanel = memo(function MotionPanel({
       <div className="border-b border-neutral-800 px-4 py-5">
         <div className="flex items-start justify-between gap-4">
           <div className="min-w-0">
-            <div className={LABEL}>Motion Target</div>
+            <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-neutral-500">
+              Motion Target
+            </div>
             <div className="mt-3 truncate text-[12px] font-semibold text-neutral-100">
               {element.label}
             </div>

package/src/components/editor/MotionPanelFields.tsx

@@ -0,0 +1,185 @@
+import { useState, useRef, useEffect, type ReactNode } from "react";
+import { Zap } from "../../icons/SystemIcons";
+
+export const FIELD =
+  "min-w-0 rounded-xl border border-neutral-800 bg-neutral-900/95 px-3 py-2 text-neutral-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)] transition-colors focus-within:border-neutral-600";
+export const LABEL = "text-[11px] font-medium uppercase tracking-[0.18em] text-neutral-500";
+export const RESPONSIVE_GRID = "grid grid-cols-[repeat(auto-fit,minmax(118px,1fr))] gap-3";
+
+export function formatNumericValue(value: number): string {
+  const rounded = Math.round(value * 100) / 100;
+  return Number.isInteger(rounded)
+    ? `${rounded}`
+    : rounded.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
+}
+
+export function clampMotionNumber(
+  value: number | null,
+  min: number,
+  max: number,
+  fallback: number,
+): number {
+  if (value == null || !Number.isFinite(value)) return fallback;
+  return Math.min(max, Math.max(min, value));
+}
+
+export function parsePlainNumber(value: string): number | null {
+  const parsed = Number.parseFloat(value.trim());
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+// ── CommitField ──
+
+export function CommitField({
+  value,
+  disabled,
+  onCommit,
+}: {
+  value: string;
+  disabled?: boolean;
+  onCommit: (nextValue: string) => void;
+}) {
+  const [draft, setDraft] = useState(value);
+  const focusedRef = useRef(false);
+
+  useEffect(() => {
+    if (!focusedRef.current) setDraft(value);
+  }, [value]);
+
+  const commitDraft = () => {
+    focusedRef.current = false;
+    const next = draft.trim();
+    if (next !== value) onCommit(next);
+  };
+
+  return (
+    <input
+      type="text"
+      value={draft}
+      disabled={disabled}
+      onFocus={() => {
+        focusedRef.current = true;
+      }}
+      onChange={(event) => setDraft(event.target.value)}
+      onBlur={commitDraft}
+      onKeyDown={(event) => {
+        if (event.key === "Enter") (event.target as HTMLInputElement).blur();
+      }}
+      className="w-full min-w-0 bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
+    />
+  );
+}
+
+// ── DetailField ──
+
+export function DetailField({
+  label,
+  value,
+  disabled,
+  onCommit,
+}: {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  onCommit: (nextValue: string) => void;
+}) {
+  return (
+    <label className="grid min-w-0 gap-1.5">
+      <span className={LABEL}>{label}</span>
+      <div className={FIELD}>
+        <CommitField value={value} disabled={disabled} onCommit={onCommit} />
+      </div>
+    </label>
+  );
+}
+
+// ── SegmentedControl ──
+
+export function SegmentedControl({
+  value,
+  options,
+  onChange,
+}: {
+  value: string;
+  options: Array<{ label: string; value: string }>;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className="grid grid-cols-3 gap-1 rounded-2xl border border-neutral-800 bg-neutral-950 p-1">
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() => onChange(option.value)}
+          className={`h-9 rounded-xl text-[11px] font-semibold transition-colors ${
+            option.value === value
+              ? "bg-neutral-800 text-white shadow-sm"
+              : "text-neutral-500 hover:bg-neutral-900 hover:text-neutral-200"
+          }`}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ── SelectField ──
+
+export function SelectField({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  options: readonly string[];
+  onChange: (value: string) => void;
+}) {
+  return (
+    <label className="grid min-w-0 gap-1.5">
+      <span className={LABEL}>{label}</span>
+      <div className={FIELD}>
+        <select
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          className="w-full min-w-0 appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none"
+        >
+          {options.map((option) => (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+      </div>
+    </label>
+  );
+}
+
+// ── MotionSection ──
+
+export function MotionSection({
+  title,
+  children,
+  accessory,
+}: {
+  title: string;
+  children: ReactNode;
+  accessory?: ReactNode;
+}) {
+  return (
+    <section className="border-b border-neutral-800 px-4 py-5">
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <Zap size={15} className="text-neutral-500" />
+          <h3 className="text-[11px] font-semibold uppercase tracking-[0.22em] text-neutral-300">
+            {title}
+          </h3>
+        </div>
+        {accessory}
+      </div>
+      {children}
+    </section>
+  );
+}