@hyperframes/studio 0.8.58 → 0.8.60

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

@@ -1285,3 +1285,95 @@ describe("FlatSelectRow — label/value options", () => {
     act(() => root.unmount());
   });
 });
+
+describe("FlatSlider — typed value", () => {
+  it("keeps the readout inert without onCommitText", () => {
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Opacity"
+        value={10}
+        min={0}
+        max={100}
+        tier="default"
+        displayValue="10%"
+        onCommit={vi.fn()}
+      />,
+    );
+    const readout = host.querySelector<HTMLElement>('[data-flat-slider-value="true"]');
+    expect(readout?.getAttribute("role")).toBeNull();
+    act(() => readout?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(host.querySelector('[data-flat-slider-input="true"]')).toBeNull();
+    act(() => root.unmount());
+  });
+
+  it("turns the readout into an input on click and commits the typed text on Enter", () => {
+    const onCommitText = vi.fn().mockReturnValue(true);
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Volume"
+        value={0}
+        min={-100}
+        max={100}
+        tier="default"
+        displayValue="0 dB"
+        onCommit={vi.fn()}
+        onCommitText={onCommitText}
+      />,
+    );
+    const readout = host.querySelector<HTMLElement>('[data-flat-slider-value="true"]');
+    expect(readout?.getAttribute("role")).toBe("button");
+    act(() => readout?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    const input = host.querySelector<HTMLInputElement>('[data-flat-slider-input="true"]');
+    if (!input) throw new Error("expected the readout to become an input");
+    expect(input.value).toBe("0 dB");
+    act(() => {
+      setReactInputValue(input, "-6 dB");
+      input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    });
+    expect(onCommitText).toHaveBeenCalledWith("-6 dB");
+    expect(host.querySelector('[data-flat-slider-input="true"]')).toBeNull();
+    act(() => root.unmount());
+  });
+
+  it("stays open and marks itself invalid when the text is refused, and closes on Escape", () => {
+    const onCommitText = vi.fn().mockReturnValue(false);
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Speed"
+        value={500}
+        min={0}
+        max={1000}
+        tier="default"
+        displayValue="1x"
+        onCommit={vi.fn()}
+        onCommitText={onCommitText}
+      />,
+    );
+    act(() =>
+      host
+        .querySelector<HTMLElement>('[data-flat-slider-value="true"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true })),
+    );
+    const input = host.querySelector<HTMLInputElement>('[data-flat-slider-input="true"]');
+    if (!input) throw new Error("expected an input");
+    act(() => {
+      setReactInputValue(input, "fast");
+      input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    });
+    expect(onCommitText).toHaveBeenCalledWith("fast");
+    const still = host.querySelector<HTMLInputElement>('[data-flat-slider-input="true"]');
+    expect(still).not.toBeNull();
+    expect(still?.getAttribute("aria-invalid")).toBe("true");
+    act(() => still?.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
+    expect(host.querySelector('[data-flat-slider-input="true"]')).toBeNull();
+    expect(host.querySelector('[data-flat-slider-value="true"]')?.textContent).toBe("1x");
+    act(() => root.unmount());
+  });
+});
+
+/** Drives React's controlled input the way a keystroke would. */
+function setReactInputValue(input: HTMLInputElement, value: string) {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  setter?.call(input, value);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}

package/src/components/editor/propertyPanelFlatPrimitives.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { RotateCcw } from "../../icons/SystemIcons";
 import { CommitField } from "./propertyPanelPrimitives";
+import { FlatSliderReadout } from "./propertyPanelFlatSliderReadout";
 import {
   VALUE_TIER_LABEL_CLASS,
   VALUE_TIER_VALUE_CLASS,
@@ -278,6 +279,7 @@ export function FlatSlider({
   centerTick,
   onReset,
   onCommit,
+  onCommitText,
 }: {
   label: string;
   value: number;
@@ -290,6 +292,8 @@ export function FlatSlider({
   centerTick?: boolean;
   onReset?: () => void;
   onCommit: (nextValue: number) => void;
+  /** Typed readout: return false to refuse the text, keep the field open, and mark it invalid. */
+  onCommitText?: (text: string) => boolean | void;
 }) {
   const track = useTrackDesignInput();
   // `draft` gives the knob instant, drag-local visual feedback. `onCommit` is
@@ -538,14 +542,14 @@ export function FlatSlider({
           style={{ left: `${clampedPct}%` }}
         />
       </div>
-      <span
-        data-flat-slider-value="true"
-        className={`w-11 shrink-0 text-right font-mono text-[10px] ${
-          tier === "explicitCustom" ? "text-panel-text-0" : "text-panel-text-3"
-        }`}
-      >
-        {displayValue}
-      </span>
+      <FlatSliderReadout
+        label={label}
+        displayValue={displayValue}
+        tier={tier}
+        disabled={disabled}
+        onCommitText={onCommitText}
+        onCommitted={() => track("input", label)}
+      />
       {(centerTick || onReset) && (
         <span data-flat-slider-reset-slot="true" className="w-3.5 shrink-0">
           {tier === "explicitCustom" && onReset && (

package/src/components/editor/propertyPanelFlatSliderReadout.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useRef, useState } from "react";
+
+/** Click-to-type readout. Enter/blur commits; a refused value stays open and turns red. */
+export function FlatSliderReadout({
+  label,
+  displayValue,
+  tier,
+  disabled,
+  onCommitText,
+  onCommitted,
+}: {
+  label: string;
+  displayValue: string;
+  tier: "default" | "explicitCustom";
+  disabled?: boolean;
+  /** Receives the raw text; return false to refuse it and keep the field open. */
+  onCommitText?: (text: string) => boolean | void;
+  /** Fires after an accepted commit, for telemetry. */
+  onCommitted?: () => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [text, setText] = useState("");
+  const [invalid, setInvalid] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const editable = Boolean(onCommitText) && !disabled;
+
+  useEffect(() => {
+    if (!editing) return;
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, [editing]);
+
+  const begin = () => {
+    if (!editable) return;
+    setText(displayValue);
+    setInvalid(false);
+    setEditing(true);
+  };
+  // Enter and blur both commit, so a value typed and then clicked away from is
+  // not silently dropped. A refused value stays open on Enter (the author is
+  // still there to fix it) and is discarded on blur (they have moved on).
+  const commit = (keepOpenIfRefused: boolean) => {
+    const accepted = onCommitText?.(text.trim());
+    if (accepted === false && keepOpenIfRefused) {
+      setInvalid(true);
+      inputRef.current?.select();
+      return;
+    }
+    setEditing(false);
+    if (accepted !== false) onCommitted?.();
+  };
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        data-flat-slider-input="true"
+        aria-label={`${label} value`}
+        aria-invalid={invalid || undefined}
+        value={text}
+        spellCheck={false}
+        onChange={(e) => {
+          setText(e.target.value);
+          setInvalid(false);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit(true);
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            setEditing(false);
+          }
+          // Keep the timeline's own shortcuts from firing on every keystroke.
+          e.stopPropagation();
+        }}
+        onBlur={() => commit(false)}
+        className={`w-11 shrink-0 rounded-[3px] border bg-panel-surface px-1 text-right font-mono text-[10px] text-panel-text-0 outline-none ${
+          invalid ? "border-red-400" : "border-panel-accent"
+        }`}
+      />
+    );
+  }
+
+  return (
+    <span
+      data-flat-slider-value="true"
+      role={editable ? "button" : undefined}
+      tabIndex={editable ? 0 : undefined}
+      title={editable ? "Click to type a value" : undefined}
+      onClick={begin}
+      onKeyDown={(e) => {
+        if (!editable) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          begin();
+        }
+      }}
+      className={`w-11 shrink-0 text-right font-mono text-[10px] ${
+        tier === "explicitCustom" ? "text-panel-text-0" : "text-panel-text-3"
+      } ${editable ? "cursor-text rounded-[3px] hover:bg-panel-hover hover:text-panel-text-0" : ""}`}
+    >
+      {displayValue}
+    </span>
+  );
+}

package/src/components/editor/useColorGradingController.ts

@@ -1,3 +1,4 @@
+import { mediaMetadataUrl } from "../../utils/studioHelpers";
 import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
 import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import {
@@ -288,12 +289,7 @@ export function useColorGradingController({
       return;
     }
     const controller = new AbortController();
-    fetch(
-      `/api/projects/${encodeURIComponent(projectId)}/media/metadata?path=${encodeURIComponent(
-        selectedAssetPath,
-      )}`,
-      { signal: controller.signal },
-    )
+    fetch(mediaMetadataUrl(projectId, selectedAssetPath), { signal: controller.signal })
       .then(async (response) => {
         if (!response.ok) return { ok: false as const };
         const data: MediaMetadataResponse | null = await response.json();

package/src/components/icons/AudioMetersIcon.tsx

@@ -0,0 +1,16 @@
+export function AudioMetersIcon({ size = 16 }: { size?: number | string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <path d="M2.5 13h2m-2-3h2M7 13h2m-2-3h2m-2-3h2m-2-3h2M11.5 13h2m-2-3h2m-2-3h2" />
+    </svg>
+  );
+}

package/src/components/icons/InspectorIcon.tsx

@@ -0,0 +1,18 @@
+export function InspectorIcon({ size = 16 }: { size?: number | string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="1.5" y="2" width="13" height="12" rx="1.5" />
+      <path d="M4 6h8M6 4.5v3M4 10h8m-2-1.5v3" />
+    </svg>
+  );
+}

package/src/components/icons/ReverseGradientIcon.tsx

@@ -0,0 +1,23 @@
+export function ReverseGradientIcon({ size = 16 }: { size?: number | string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M2 3h12m-2-2 2 2-2 2M14 8H2m2-2L2 8l2 2" />
+      <g fill="currentColor" stroke="none">
+        <path d="M2 12h3v2H2z" opacity="0.25" />
+        <path d="M5 12h3v2H5z" opacity="0.5" />
+        <path d="M8 12h3v2H8z" opacity="0.75" />
+        <path d="M11 12h3v2h-3z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/icons/RippleEditIcon.tsx

@@ -0,0 +1,19 @@
+export function RippleEditIcon({ size = 16 }: { size?: number | string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="1.5" y="8" width="4" height="5" rx="0.5" />
+      <rect x="10.5" y="8" width="4" height="5" rx="0.5" />
+      <path d="M13 4H6m2-2L6 4l2 2" />
+    </svg>
+  );
+}