@hyperframes/studio 0.7.82 → 0.7.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.82",
+  "version": "0.7.83",
   "description": "",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.82",
-    "@hyperframes/parsers": "0.7.82",
-    "@hyperframes/player": "0.7.82",
-    "@hyperframes/sdk": "0.7.82",
-    "@hyperframes/studio-server": "0.7.82"
+    "@hyperframes/core": "0.7.83",
+    "@hyperframes/sdk": "0.7.83",
+    "@hyperframes/parsers": "0.7.83",
+    "@hyperframes/studio-server": "0.7.83",
+    "@hyperframes/player": "0.7.83"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -65,7 +65,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.82"
+    "@hyperframes/producer": "0.7.83"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -43,7 +43,6 @@ import {
 import type { DomEditSelection } from "./components/editor/domEditing";
 import { StudioHeader } from "./components/StudioHeader";
 import { useGestureCommit } from "./hooks/useGestureCommit";
-import { STUDIO_KEYFRAMES_ENABLED } from "./components/editor/manualEditingAvailability";
 import { GestureTrailOverlay } from "./components/editor/GestureTrailOverlay";
 import { StudioLeftSidebar } from "./components/StudioLeftSidebar";
 import { EditorShell } from "./components/EditorShell";
@@ -263,9 +262,7 @@ export function StudioApp() {
     onUngroupSelection: () => domEditSessionRef.current.handleUngroupSelection(),
     activeCompPath,
     forceReloadSdkSession: sdkHandle.forceReload,
-    onToggleRecording: STUDIO_KEYFRAMES_ENABLED
-      ? () => handleToggleRecordingRef.current()
-      : undefined,
+    onToggleRecording: () => handleToggleRecordingRef.current(),
   });
   const sidebarTabRef = useRef({
     select: (t: SidebarTab) => leftSidebarRef.current?.selectTab(t),
@@ -367,7 +364,7 @@ export function StudioApp() {
     isGestureRecordingRef,
   });
   handleToggleRecordingRef.current = handleToggleRecording;
-  const recordingToggle = STUDIO_KEYFRAMES_ENABLED ? handleToggleRecording : undefined;
+  const recordingToggle = handleToggleRecording;
   const canvasRectRef = useRef<DOMRect | null>(null);
   useLayoutEffect(() => {
     if (gestureState !== "recording" || !previewIframe) {

package/src/components/StudioHeader.tsx

@@ -1,9 +1,5 @@
 import { useRef, type MouseEvent } from "react";
 import { RotateCcw, RotateCw, Camera } from "../icons/SystemIcons";
-import {
-  STUDIO_INSPECTOR_PANELS_ENABLED,
-  STUDIO_MANUAL_EDITING_DISABLED_TITLE,
-} from "./editor/manualEditingAvailability";
 import { getHistoryShortcutLabel } from "../utils/studioHelpers";
 import { useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
@@ -328,16 +324,10 @@ export function StudioHeader({
             <span>{capturing ? "Capturing…" : "Capture"}</span>
           </a>
         </Tooltip>
-        <Tooltip
-          label={
-            STUDIO_INSPECTOR_PANELS_ENABLED ? "Inspector" : STUDIO_MANUAL_EDITING_DISABLED_TITLE
-          }
-          side="bottom"
-        >
+        <Tooltip label="Inspector" side="bottom">
           <button
             type="button"
             onClick={() => {
-              if (!STUDIO_INSPECTOR_PANELS_ENABLED) return;
               if (rightCollapsed || !inspectorPanelActive) {
                 trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
                 setRightPanelTab("design");
@@ -349,18 +339,13 @@ export function StudioHeader({
               // the panel shouldn't deselect the element.
               setRightCollapsed(true);
             }}
-            disabled={!STUDIO_INSPECTOR_PANELS_ENABLED}
             aria-pressed={inspectorButtonActive}
             className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border transition-colors active:scale-[0.98] ${
               inspectorButtonActive
                 ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-                : STUDIO_INSPECTOR_PANELS_ENABLED
-                  ? "text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 border-transparent"
-                  : "cursor-not-allowed border-transparent text-neutral-700"
+                : "text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 border-transparent"
             }`}
-            aria-label={
-              STUDIO_INSPECTOR_PANELS_ENABLED ? "Inspector" : STUDIO_MANUAL_EDITING_DISABLED_TITLE
-            }
+            aria-label="Inspector"
           >
             <svg
               width="12"

package/src/components/StudioRightPanel.tsx

@@ -10,10 +10,7 @@ import { PanelTabButton } from "./PanelTabButton";
 import { usePreviewVariablesStore } from "../hooks/previewVariablesStore";
 import type { RenderJob } from "./renders/useRenderQueue";
 import type { BlockParam } from "@hyperframes/core/registry";
-import {
-  STUDIO_FLAT_INSPECTOR_ENABLED,
-  STUDIO_INSPECTOR_PANELS_ENABLED,
-} from "./editor/manualEditingAvailability";
+import { STUDIO_FLAT_INSPECTOR_ENABLED } from "./editor/manualEditingAvailability";
 import type { Composition } from "@hyperframes/sdk";
 import type { EditHistoryKind } from "../utils/editHistory";
 import { useSlideshowPersist, type UseSlideshowPersistParams } from "../hooks/useSlideshowPersist";
@@ -229,8 +226,7 @@ export function StudioRightPanel({
     setRightPanelTab,
   });
   const designPaneOpen = inspectorTabActive && rightInspectorPanes.design && designPanelActive;
-  const layersPaneOpen =
-    inspectorTabActive && rightInspectorPanes.layers && STUDIO_INSPECTOR_PANELS_ENABLED;
+  const layersPaneOpen = inspectorTabActive && rightInspectorPanes.layers;
 
   const handleInspectorPaneButtonClick = (pane: "design" | "layers") => {
     if (!inspectorTabActive) {
@@ -483,22 +479,18 @@ export function StudioRightPanel({
         ) : (
           <>
             <div className="flex min-w-0 items-center gap-1 overflow-hidden border-b border-neutral-800 px-3 py-2">
-              {STUDIO_INSPECTOR_PANELS_ENABLED && (
-                <>
-                  <PanelTabButton
-                    label="Design"
-                    tooltip="Element styles and properties"
-                    active={designPaneOpen}
-                    onClick={() => handleInspectorPaneButtonClick("design")}
-                  />
-                  <PanelTabButton
-                    label="Layers"
-                    tooltip="Composition layer stack"
-                    active={layersPaneOpen}
-                    onClick={() => handleInspectorPaneButtonClick("layers")}
-                  />
-                </>
-              )}
+              <PanelTabButton
+                label="Design"
+                tooltip="Element styles and properties"
+                active={designPaneOpen}
+                onClick={() => handleInspectorPaneButtonClick("design")}
+              />
+              <PanelTabButton
+                label="Layers"
+                tooltip="Composition layer stack"
+                active={layersPaneOpen}
+                onClick={() => handleInspectorPaneButtonClick("layers")}
+              />
               <PanelTabButton
                 label={renderJobs.length > 0 ? `Renders (${renderJobs.length})` : "Renders"}
                 tooltip="Render queue and exports"

package/src/components/TimelineToolbar.tsx

@@ -15,10 +15,6 @@ import {
 } from "../player/components/timelineZoom";
 import { useTimelineZoom } from "../player/components/useTimelineZoom";
 import { usePlayerStore, type TimelineElement } from "../player";
-import {
-  STUDIO_KEYFRAMES_ENABLED,
-  STUDIO_RAZOR_TOOL_ENABLED,
-} from "./editor/manualEditingAvailability";
 import { Tooltip } from "./ui";
 import { Scissors } from "../icons/SystemIcons";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
@@ -135,7 +131,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
   // Wire the "Add keyframe (K)" shortcut the toolbar advertises. Active only when
   // there's a keyframeable selection; otherwise K stays JKL-pause in playback.
   useKeyframeKeyboard({
-    enabled: STUDIO_KEYFRAMES_ENABLED && Boolean(onToggleKeyframe),
+    enabled: Boolean(onToggleKeyframe),
     onAddKeyframe: onToggleKeyframe,
   });
 
@@ -170,36 +166,32 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
     <div className="border-b border-neutral-800/60">
       <div className="flex items-center justify-between px-2 py-0.5">
         <div className="flex items-center gap-0.5">
-          {STUDIO_RAZOR_TOOL_ENABLED && (
-            <>
-              <Tooltip label="Selection tool (V)">
-                <button
-                  type="button"
-                  onClick={() => setActiveTool("select")}
-                  aria-label="Selection tool"
-                  aria-pressed={activeTool === "select"}
-                  className={activeTool === "select" ? flatActive : flatIdle}
-                >
-                  <svg width="16" height="16" viewBox="0 0 12 12" fill="currentColor">
-                    <path d="M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" />
-                  </svg>
-                </button>
-              </Tooltip>
-              <Tooltip label="Razor tool (B) — Shift+click splits all tracks">
-                <button
-                  type="button"
-                  onClick={() => setActiveTool("razor")}
-                  aria-label="Razor tool"
-                  aria-pressed={activeTool === "razor"}
-                  className={activeTool === "razor" ? flatActive : flatIdle}
-                >
-                  <Scissors size={16} />
-                </button>
-              </Tooltip>
-              {/* Divider: tool-mode | editing-actions */}
-              <div aria-hidden="true" className="mx-1 h-4 w-px bg-neutral-800" />
-            </>
-          )}
+          <Tooltip label="Selection tool (V)">
+            <button
+              type="button"
+              onClick={() => setActiveTool("select")}
+              aria-label="Selection tool"
+              aria-pressed={activeTool === "select"}
+              className={activeTool === "select" ? flatActive : flatIdle}
+            >
+              <svg width="16" height="16" viewBox="0 0 12 12" fill="currentColor">
+                <path d="M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" />
+              </svg>
+            </button>
+          </Tooltip>
+          <Tooltip label="Razor tool (B) — Shift+click splits all tracks">
+            <button
+              type="button"
+              onClick={() => setActiveTool("razor")}
+              aria-label="Razor tool"
+              aria-pressed={activeTool === "razor"}
+              className={activeTool === "razor" ? flatActive : flatIdle}
+            >
+              <Scissors size={16} />
+            </button>
+          </Tooltip>
+          {/* Divider: tool-mode | editing-actions */}
+          <div aria-hidden="true" className="mx-1 h-4 w-px bg-neutral-800" />
           <Tooltip label={timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)"}>
             <button
               type="button"
@@ -211,111 +203,107 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               <Magnet size={16} weight="bold" aria-hidden="true" />
             </button>
           </Tooltip>
-          {STUDIO_KEYFRAMES_ENABLED && (
-            // Always rendered (CapCut-style): with no keyframeable selection the
-            // button fades to a disabled state instead of unmounting, so the
-            // toolbar layout never shifts.
-            <Tooltip
-              label={
-                keyframePathEndpoint
-                  ? "Motion path endpoints cannot be removed"
-                  : !onToggleKeyframe
-                    ? "Select an animated element to add keyframes"
-                    : keyframeIsMotionPath
-                      ? keyframeWillExtend
-                        ? "Extend motion path to playhead (K)"
-                        : keyframeState === "active"
-                          ? "Remove waypoint from motion path (K)"
-                          : "Add waypoint to motion path (K)"
+          {/* Always rendered (CapCut-style): with no keyframeable selection the
+              button fades to a disabled state instead of unmounting, so the
+              toolbar layout never shifts. */}
+          <Tooltip
+            label={
+              keyframePathEndpoint
+                ? "Motion path endpoints cannot be removed"
+                : !onToggleKeyframe
+                  ? "Select an animated element to add keyframes"
+                  : keyframeIsMotionPath
+                    ? keyframeWillExtend
+                      ? "Extend motion path to playhead (K)"
                       : keyframeState === "active"
-                        ? "Remove keyframe at playhead (K)"
+                        ? "Remove waypoint from motion path (K)"
+                        : "Add waypoint to motion path (K)"
+                    : keyframeState === "active"
+                      ? "Remove keyframe at playhead (K)"
+                      : keyframeState === "inactive"
+                        ? keyframeWillExtend
+                          ? "Add keyframe at playhead, extends animation (K)"
+                          : "Add keyframe at playhead (K)"
+                        : "Add keyframe (K)"
+            }
+          >
+            <button
+              type="button"
+              disabled={!onToggleKeyframe}
+              onClick={onToggleKeyframe}
+              aria-label={
+                keyframePathEndpoint
+                  ? "Motion path endpoint"
+                  : keyframeIsMotionPath
+                    ? keyframeState === "active"
+                      ? "Remove motion path waypoint"
+                      : keyframeWillExtend
+                        ? "Extend motion path to playhead"
+                        : "Add motion path waypoint"
+                    : keyframeState === "active"
+                      ? "Remove keyframe at playhead"
+                      : "Add keyframe at playhead"
+              }
+              className={
+                !onToggleKeyframe
+                  ? flatDisabled
+                  : `${flatBtn} active:scale-[0.98] hover:bg-white/[0.06] ${
+                      keyframeState === "active"
+                        ? "text-studio-accent"
                         : keyframeState === "inactive"
-                          ? keyframeWillExtend
-                            ? "Add keyframe at playhead, extends animation (K)"
-                            : "Add keyframe at playhead (K)"
-                          : "Add keyframe (K)"
+                          ? "text-neutral-400 hover:text-studio-accent"
+                          : "text-neutral-600 hover:text-neutral-400"
+                    }`
               }
             >
-              <button
-                type="button"
-                disabled={!onToggleKeyframe}
-                onClick={onToggleKeyframe}
-                aria-label={
-                  keyframePathEndpoint
-                    ? "Motion path endpoint"
-                    : keyframeIsMotionPath
-                      ? keyframeState === "active"
-                        ? "Remove motion path waypoint"
-                        : keyframeWillExtend
-                          ? "Extend motion path to playhead"
-                          : "Add motion path waypoint"
-                      : keyframeState === "active"
-                        ? "Remove keyframe at playhead"
-                        : "Add keyframe at playhead"
-                }
-                className={
-                  !onToggleKeyframe
-                    ? flatDisabled
-                    : `${flatBtn} active:scale-[0.98] hover:bg-white/[0.06] ${
-                        keyframeState === "active"
-                          ? "text-studio-accent"
-                          : keyframeState === "inactive"
-                            ? "text-neutral-400 hover:text-studio-accent"
-                            : "text-neutral-600 hover:text-neutral-400"
-                      }`
-                }
-              >
-                <svg width="16" height="16" viewBox="0 0 10 10" fill="currentColor">
-                  {keyframeState === "active" ? (
-                    <path d="M5 0.5L9.5 5L5 9.5L0.5 5Z" />
-                  ) : (
-                    <path
-                      d="M5 1.2L8.8 5L5 8.8L1.2 5Z"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.2"
-                    />
-                  )}
-                </svg>
-              </button>
-            </Tooltip>
-          )}
-          {STUDIO_KEYFRAMES_ENABLED && (
-            <Tooltip
-              label={
+              <svg width="16" height="16" viewBox="0 0 10 10" fill="currentColor">
+                {keyframeState === "active" ? (
+                  <path d="M5 0.5L9.5 5L5 9.5L0.5 5Z" />
+                ) : (
+                  <path
+                    d="M5 1.2L8.8 5L5 8.8L1.2 5Z"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.2"
+                  />
+                )}
+              </svg>
+            </button>
+          </Tooltip>
+          <Tooltip
+            label={
+              autoKeyframeEnabled
+                ? "Auto-record manual edits as keyframes (click to turn off)"
+                : "Manual edits will not be recorded as keyframes (click to turn on)"
+            }
+          >
+            <button
+              type="button"
+              onClick={() => setAutoKeyframeEnabled(!autoKeyframeEnabled)}
+              aria-label="Auto-record manual edits as keyframes"
+              aria-pressed={autoKeyframeEnabled}
+              className={`${flatBtn} active:scale-[0.98] hover:bg-white/[0.06] ${
                 autoKeyframeEnabled
-                  ? "Auto-record manual edits as keyframes (click to turn off)"
-                  : "Manual edits will not be recorded as keyframes (click to turn on)"
-              }
+                  ? "text-red-400 hover:text-red-300"
+                  : "text-neutral-600 hover:text-neutral-400"
+              }`}
             >
-              <button
-                type="button"
-                onClick={() => setAutoKeyframeEnabled(!autoKeyframeEnabled)}
-                aria-label="Auto-record manual edits as keyframes"
-                aria-pressed={autoKeyframeEnabled}
-                className={`${flatBtn} active:scale-[0.98] hover:bg-white/[0.06] ${
-                  autoKeyframeEnabled
-                    ? "text-red-400 hover:text-red-300"
-                    : "text-neutral-600 hover:text-neutral-400"
-                }`}
-              >
-                <svg width="16" height="16" viewBox="0 0 10 10" fill="none">
-                  {/* Same diamond outline as the Add-keyframe icon, with a
+              <svg width="16" height="16" viewBox="0 0 10 10" fill="none">
+                {/* Same diamond outline as the Add-keyframe icon, with a
                       record-style dot inside: filled = auto-recording,
                       hollow = manual edits won't be keyframed. */}
-                  <path d="M5 0.7L9.3 5L5 9.3L0.7 5Z" stroke="currentColor" strokeWidth="1" />
-                  <circle
-                    cx="5"
-                    cy="5"
-                    r="1.8"
-                    fill={autoKeyframeEnabled ? "currentColor" : "none"}
-                    stroke="currentColor"
-                    strokeWidth="1"
-                  />
-                </svg>
-              </button>
-            </Tooltip>
-          )}
+                <path d="M5 0.7L9.3 5L5 9.3L0.7 5Z" stroke="currentColor" strokeWidth="1" />
+                <circle
+                  cx="5"
+                  cy="5"
+                  r="1.8"
+                  fill={autoKeyframeEnabled ? "currentColor" : "none"}
+                  stroke="currentColor"
+                  strokeWidth="1"
+                />
+              </svg>
+            </button>
+          </Tooltip>
           {onSplitElement &&
             (() => {
               // Render the button unconditionally (disabled when unusable):

package/src/components/editor/EaseCurveSection.tsx

@@ -5,7 +5,15 @@ import {
   parseWiggleEase,
   type WiggleEaseConfig,
 } from "@hyperframes/core/wiggle-ease";
-import { EASE_PRESETS, easePresetLabel } from "./easePresetLibrary";
+import { easePresetLabel } from "./easePresetLibrary";
+import {
+  DEFAULT_CURVE,
+  MODE_LABELS,
+  EaseModeToggle,
+  EasePresetGrid,
+  type EaseMode,
+  type Pts,
+} from "./EaseModeControls";
 import { holdCurvePath, MiniCurveSvg, sampledPath } from "./easeCurveSvg";
 import { EaseBezierField, SpringBounceField, WiggleField } from "./EaseParamFields";
 import { EASE_CURVES, EASE_LABELS, resolveEaseCurveTuple } from "./gsapAnimationConstants";
@@ -14,51 +22,6 @@ import type { AnimationKeyframeTarget } from "../../hooks/gsapTweenSynth";
 
 export { MiniCurveSvg } from "./easeCurveSvg";
 
-const EASE_MODES = ["curve", "spring", "wiggle"] as const;
-type EaseMode = (typeof EASE_MODES)[number];
-
-const EasePresetGrid = function EasePresetGrid({
-  kind,
-  currentEase,
-  onSelect,
-}: {
-  kind: EaseMode;
-  currentEase: string;
-  onSelect: (ease: string) => void;
-}) {
-  return (
-    <div className="mb-2 grid max-h-56 grid-cols-4 gap-1 overflow-y-auto pr-0.5">
-      {EASE_PRESETS.filter((preset) => preset.kind === kind).map((preset) => {
-        const isActive = currentEase === preset.ease;
-        return (
-          <button
-            key={preset.id}
-            type="button"
-            data-ease-preset-id={preset.id}
-            role="menuitemradio"
-            aria-checked={isActive}
-            tabIndex={isActive ? 0 : -1}
-            onClick={() => onSelect(preset.ease)}
-            className={`flex flex-col items-center gap-0.5 rounded-md p-1 transition-colors ${
-              isActive ? "bg-panel-accent/10 ring-1 ring-panel-accent/30" : "hover:bg-neutral-800"
-            }`}
-            title={preset.label}
-          >
-            <MiniCurveSvg ease={preset.ease} active={isActive} />
-            <span
-              className={`text-center text-[8px] leading-none ${
-                isActive ? "text-panel-accent" : "text-neutral-500"
-              }`}
-            >
-              {preset.label}
-            </span>
-          </button>
-        );
-      })}
-    </div>
-  );
-};
-
 const round2 = roundToCenti;
 
 // ── Graph geometry (Figma-style easing box) ─────────────────────────────────
@@ -81,50 +44,6 @@ const DRAG_VMAX = 2;
 const DRAG_VMIN = -1;
 const ACCENT = "#3CE6AC";
 
-type Pts = [number, number, number, number];
-const DEFAULT_CURVE: Pts = EASE_CURVES["power2.out"];
-const MODE_LABELS = { curve: "Curve", spring: "Spring", wiggle: "Wiggle" } satisfies Record<
-  EaseMode,
-  string
->;
-const DEFAULT_EASE_BY_MODE = {
-  curve: `custom(M0,0 C${DEFAULT_CURVE[0]},${DEFAULT_CURVE[1]} ${DEFAULT_CURVE[2]},${DEFAULT_CURVE[3]} 1,1)`,
-  spring: "spring(0.42)",
-  wiggle: "wiggle(3,easeInOut,0.12)",
-} satisfies Record<EaseMode, string>;
-
-function EaseModeToggle({ mode, onCommit }: { mode: EaseMode; onCommit: (ease: string) => void }) {
-  return (
-    <div
-      className="mb-2 grid grid-cols-3 rounded-md bg-black/20 p-0.5"
-      role="radiogroup"
-      aria-label="Ease editor mode"
-    >
-      {EASE_MODES.map((candidateMode) => {
-        const active = candidateMode === mode;
-        return (
-          <button
-            key={candidateMode}
-            type="button"
-            data-ease-mode={candidateMode}
-            role="radio"
-            aria-checked={active}
-            onClick={() => {
-              if (active) return;
-              onCommit(DEFAULT_EASE_BY_MODE[candidateMode]);
-            }}
-            className={`rounded px-2 py-1 text-[10px] font-medium transition-colors ${
-              active ? "bg-neutral-700 text-neutral-100" : "text-neutral-500 hover:text-neutral-300"
-            }`}
-          >
-            {MODE_LABELS[candidateMode]}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
 // Figma-style ease-type dropdown: the current ease (glyph + name) as a button
 // that opens the preset grid in a popover. This is where a preset is selected —
 // the grid is no longer shown inline.