@hyperframes/studio 0.6.95 → 0.6.96

package/src/components/editor/MotionPanelFields.tsx

@@ -1,185 +0,0 @@
-import { useState, useRef, useEffect, type ReactNode } from "react";
-import { Zap } from "../../icons/SystemIcons";
-
-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 ──
-
-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>
-  );
-}

package/src/components/editor/MotionPathOverlay.tsx

@@ -1,146 +0,0 @@
-import { memo, useMemo, type RefObject } from "react";
-import type { ArcPathConfig } from "@hyperframes/core/gsap-parser";
-
-interface MotionPathOverlayProps {
-  iframeRef: RefObject<HTMLIFrameElement | null>;
-  arcPath: ArcPathConfig | null;
-  waypoints: Array<{ x: number; y: number }> | null;
-  elementBaseRect: { left: number; top: number; scaleX: number; scaleY: number } | null;
-}
-
-function buildSvgPath(
-  waypoints: Array<{ x: number; y: number }>,
-  segments: ArcPathConfig["segments"],
-  base: { left: number; top: number; scaleX: number; scaleY: number },
-): string {
-  if (waypoints.length < 2) return "";
-
-  const toPixel = (wp: { x: number; y: number }) => ({
-    x: base.left + wp.x * base.scaleX,
-    y: base.top + wp.y * base.scaleY,
-  });
-
-  const first = toPixel(waypoints[0]!);
-  const parts = [`M ${first.x} ${first.y}`];
-
-  for (let i = 0; i < segments.length && i < waypoints.length - 1; i++) {
-    const seg = segments[i]!;
-    const end = toPixel(waypoints[i + 1]!);
-
-    if (seg.cp1 && seg.cp2) {
-      const c1 = toPixel(seg.cp1);
-      const c2 = toPixel(seg.cp2);
-      parts.push(`C ${c1.x} ${c1.y} ${c2.x} ${c2.y} ${end.x} ${end.y}`);
-    } else {
-      const start = toPixel(waypoints[i]!);
-      const dx = end.x - start.x;
-      const dy = end.y - start.y;
-      const c = seg.curviness ?? 1;
-      const offset = c * Math.abs(dx) * 0.25;
-      const c1x = start.x + dx * 0.33;
-      const c1y = start.y + dy * 0.33 - offset;
-      const c2x = start.x + dx * 0.66;
-      const c2y = start.y + dy * 0.66 - offset;
-      parts.push(`C ${c1x} ${c1y} ${c2x} ${c2y} ${end.x} ${end.y}`);
-    }
-  }
-
-  return parts.join(" ");
-}
-
-export const MotionPathOverlay = memo(function MotionPathOverlay({
-  arcPath,
-  waypoints,
-  elementBaseRect,
-}: MotionPathOverlayProps) {
-  const pathD = useMemo(() => {
-    if (!arcPath?.enabled || !waypoints || waypoints.length < 2 || !elementBaseRect) return "";
-    return buildSvgPath(waypoints, arcPath.segments, elementBaseRect);
-  }, [arcPath, waypoints, elementBaseRect]);
-
-  const anchorPoints = useMemo(() => {
-    if (!waypoints || !elementBaseRect) return [];
-    return waypoints.map((wp) => ({
-      x: elementBaseRect.left + wp.x * elementBaseRect.scaleX,
-      y: elementBaseRect.top + wp.y * elementBaseRect.scaleY,
-    }));
-  }, [waypoints, elementBaseRect]);
-
-  const controlPoints = useMemo(() => {
-    if (!arcPath?.enabled || !elementBaseRect) return [];
-    const points: Array<{
-      segIndex: number;
-      type: "cp1" | "cp2";
-      x: number;
-      y: number;
-      anchorX: number;
-      anchorY: number;
-    }> = [];
-    for (let i = 0; i < arcPath.segments.length; i++) {
-      const seg = arcPath.segments[i]!;
-      if (seg.cp1 && seg.cp2 && waypoints) {
-        const anchor1 = waypoints[i]!;
-        const anchor2 = waypoints[i + 1]!;
-        points.push({
-          segIndex: i,
-          type: "cp1",
-          x: elementBaseRect.left + seg.cp1.x * elementBaseRect.scaleX,
-          y: elementBaseRect.top + seg.cp1.y * elementBaseRect.scaleY,
-          anchorX: elementBaseRect.left + anchor1.x * elementBaseRect.scaleX,
-          anchorY: elementBaseRect.top + anchor1.y * elementBaseRect.scaleY,
-        });
-        points.push({
-          segIndex: i,
-          type: "cp2",
-          x: elementBaseRect.left + seg.cp2.x * elementBaseRect.scaleX,
-          y: elementBaseRect.top + seg.cp2.y * elementBaseRect.scaleY,
-          anchorX: elementBaseRect.left + anchor2.x * elementBaseRect.scaleX,
-          anchorY: elementBaseRect.top + anchor2.y * elementBaseRect.scaleY,
-        });
-      }
-    }
-    return points;
-  }, [arcPath, waypoints, elementBaseRect]);
-
-  if (!pathD) return null;
-
-  return (
-    <svg className="absolute inset-0 pointer-events-none z-20 overflow-visible">
-      <path d={pathD} fill="none" stroke="rgba(45, 212, 191, 0.4)" strokeWidth={2} />
-
-      {controlPoints.map((cp) => (
-        <g key={`${cp.segIndex}-${cp.type}`}>
-          <line
-            x1={cp.anchorX}
-            y1={cp.anchorY}
-            x2={cp.x}
-            y2={cp.y}
-            stroke="rgba(167, 139, 250, 0.3)"
-            strokeWidth={1}
-            strokeDasharray="3 2"
-          />
-          <circle
-            cx={cp.x}
-            cy={cp.y}
-            r={4}
-            fill="#a78bfa"
-            className="pointer-events-auto cursor-grab"
-          />
-        </g>
-      ))}
-
-      {anchorPoints.map((pt, i) => (
-        <circle
-          key={i}
-          cx={pt.x}
-          cy={pt.y}
-          r={5}
-          fill="#3CE6AC"
-          stroke="rgba(255,255,255,0.5)"
-          strokeWidth={1}
-          className="pointer-events-auto cursor-pointer"
-        />
-      ))}
-    </svg>
-  );
-});

package/src/components/editor/SpringEaseEditor.tsx

@@ -1,256 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from "react";
-import { generateSpringEaseData, SPRING_PRESETS } from "@hyperframes/core/spring-ease";
-import { LABEL } from "./MotionPanelFields";
-import { RotateCcw } from "../../icons/SystemIcons";
-
-interface SpringParams {
-  mass: number;
-  stiffness: number;
-  damping: number;
-}
-
-const DEFAULT_SPRING: SpringParams = { mass: 1, stiffness: 180, damping: 12 };
-
-const SLIDERS: {
-  key: keyof SpringParams;
-  label: string;
-  min: number;
-  max: number;
-  step: number;
-}[] = [
-  { key: "mass", label: "Mass", min: 0.1, max: 5, step: 0.1 },
-  { key: "stiffness", label: "Stiffness", min: 10, max: 500, step: 10 },
-  { key: "damping", label: "Damping", min: 1, max: 50, step: 1 },
-];
-
-function springValue(mass: number, stiffness: number, damping: number, t: number): number {
-  const w0 = Math.sqrt(stiffness / mass);
-  const zeta = damping / (2 * Math.sqrt(stiffness * mass));
-  if (zeta < 1) {
-    const wd = w0 * Math.sqrt(1 - zeta * zeta);
-    return (
-      1 - Math.exp(-zeta * w0 * t) * (Math.cos(wd * t) + ((zeta * w0) / wd) * Math.sin(wd * t))
-    );
-  }
-  if (zeta === 1) {
-    return 1 - (1 + w0 * t) * Math.exp(-w0 * t);
-  }
-  const s1 = -w0 * (zeta - Math.sqrt(zeta * zeta - 1));
-  const s2 = -w0 * (zeta + Math.sqrt(zeta * zeta - 1));
-  return 1 + (s1 * Math.exp(s2 * t) - s2 * Math.exp(s1 * t)) / (s2 - s1);
-}
-
-function springSimDuration(mass: number, stiffness: number, damping: number): number {
-  const w0 = Math.sqrt(stiffness / mass);
-  const zeta = damping / (2 * Math.sqrt(stiffness * mass));
-  if (zeta < 1) return Math.min(5 / (zeta * w0), 10);
-  const decayRate = zeta * w0 - w0 * Math.sqrt(zeta * zeta - 1);
-  return Math.min(4 / Math.max(decayRate, 0.01), 10);
-}
-
-function buildSpringPath(
-  params: SpringParams,
-  mapFn: (point: { x: number; y: number }) => { x: number; y: number },
-): string {
-  const steps = 64;
-  const simDur = springSimDuration(params.mass, params.stiffness, params.damping);
-  const commands: string[] = [];
-  for (let i = 0; i <= steps; i++) {
-    const t = i / steps;
-    const simT = t * simDur;
-    const y = springValue(params.mass, params.stiffness, params.damping, simT);
-    const mapped = mapFn({ x: t, y });
-    commands.push(`${i === 0 ? "M" : "L"}${mapped.x.toFixed(2)},${mapped.y.toFixed(2)}`);
-  }
-  return commands.join(" ");
-}
-
-export function SpringEaseEditor({
-  onCommit,
-}: {
-  onCommit: (easeId: string, easeData: string) => void;
-}) {
-  const [params, setParams] = useState<SpringParams>(DEFAULT_SPRING);
-  const commitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const scheduleCommit = useCallback(
-    (next: SpringParams) => {
-      if (commitTimeoutRef.current) clearTimeout(commitTimeoutRef.current);
-      commitTimeoutRef.current = setTimeout(() => {
-        const data = generateSpringEaseData(next.mass, next.stiffness, next.damping);
-        const id = `spring-m${next.mass}-k${next.stiffness}-d${next.damping}`;
-        onCommit(id, data);
-      }, 120);
-    },
-    [onCommit],
-  );
-
-  useEffect(() => {
-    return () => {
-      if (commitTimeoutRef.current) clearTimeout(commitTimeoutRef.current);
-    };
-  }, []);
-
-  const updateParam = (key: keyof SpringParams, value: number) => {
-    const next = { ...params, [key]: value };
-    setParams(next);
-    scheduleCommit(next);
-  };
-
-  const applyPreset = (preset: (typeof SPRING_PRESETS)[number]) => {
-    const next: SpringParams = {
-      mass: preset.mass,
-      stiffness: preset.stiffness,
-      damping: preset.damping,
-    };
-    setParams(next);
-    const data = generateSpringEaseData(next.mass, next.stiffness, next.damping);
-    onCommit(preset.name, data);
-  };
-
-  const reset = () => {
-    setParams(DEFAULT_SPRING);
-    const data = generateSpringEaseData(
-      DEFAULT_SPRING.mass,
-      DEFAULT_SPRING.stiffness,
-      DEFAULT_SPRING.damping,
-    );
-    onCommit("spring-bouncy", data);
-  };
-
-  // SVG layout matching EaseCurveEditor proportions
-  const width = 324;
-  const height = 214;
-  const plot = { left: 46, top: 24, width: 242, height: 146 };
-  const yMin = -0.2;
-  const yMax = 1.3;
-
-  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 curvePath = buildSpringPath(params, mapPoint);
-  const start = mapPoint({ x: 0, y: 0 });
-  const end = mapPoint({ x: 1, y: 1 });
-
-  const activePreset = SPRING_PRESETS.find(
-    (p) =>
-      p.mass === params.mass && p.stiffness === params.stiffness && p.damping === params.damping,
-  );
-
-  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}>Spring Ease</div>
-          <div className="mt-1 font-mono text-[10px] text-neutral-500">
-            {activePreset?.label ?? `m${params.mass} k${params.stiffness} d${params.damping}`}
-          </div>
-        </div>
-        <button
-          type="button"
-          onClick={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>
-
-      {/* Curve preview */}
-      <svg viewBox={`0 0 ${width} ${height}`} className="block w-full select-none touch-none">
-        <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)"
-        />
-        <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" />
-      </svg>
-
-      {/* Presets */}
-      <div className="flex gap-1.5 border-t border-neutral-800 px-3 py-2">
-        {SPRING_PRESETS.map((preset) => {
-          const isActive =
-            preset.mass === params.mass &&
-            preset.stiffness === params.stiffness &&
-            preset.damping === params.damping;
-          return (
-            <button
-              key={preset.name}
-              type="button"
-              onClick={() => applyPreset(preset)}
-              className={`flex-1 rounded-lg px-1.5 py-1.5 text-[10px] font-semibold transition-colors ${
-                isActive
-                  ? "border border-yellow-400/40 bg-yellow-400/10 text-yellow-300"
-                  : "border border-neutral-800 bg-neutral-950 text-neutral-500 hover:border-neutral-700 hover:text-neutral-300"
-              }`}
-            >
-              {preset.label}
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Sliders */}
-      <div className="space-y-3 border-t border-neutral-800 px-3 py-3">
-        {SLIDERS.map((slider) => (
-          <div key={slider.key}>
-            <div className="mb-1 flex items-center justify-between">
-              <span className="text-[10px] font-medium uppercase tracking-[0.14em] text-neutral-500">
-                {slider.label}
-              </span>
-              <span className="min-w-[36px] text-right font-mono text-[10px] text-neutral-400">
-                {params[slider.key]}
-              </span>
-            </div>
-            <input
-              type="range"
-              min={slider.min}
-              max={slider.max}
-              step={slider.step}
-              value={params[slider.key]}
-              onChange={(e) => updateParam(slider.key, Number(e.target.value))}
-              className="h-1 w-full cursor-pointer appearance-none rounded-full bg-neutral-800 accent-yellow-400 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-yellow-400"
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}