@hyperframes/studio 0.7.72 → 0.7.74

package/src/components/editor/propertyPanelGradingNumberField.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useRef, useState } from "react";
+import { clampNumber } from "../../utils/studioHelpers";
+
+export function GradingNumberField({
+  label,
+  ariaLabel = label,
+  value,
+  min,
+  max,
+  disabled,
+  formatValue = String,
+  labelClassName = "min-w-0",
+  labelTextClassName = "block",
+  inputClassName = "w-full",
+  onBegin,
+  onPreview,
+  onSettle,
+  onCancel,
+}: {
+  label: string;
+  ariaLabel?: string;
+  value: number;
+  min: number;
+  max: number;
+  disabled?: boolean;
+  formatValue?: (value: number) => string;
+  labelClassName?: string;
+  labelTextClassName?: string;
+  inputClassName?: string;
+  onBegin: () => void;
+  onPreview: (value: number) => void;
+  onSettle: () => void;
+  onCancel: () => void;
+}) {
+  const [draft, setDraft] = useState(() => formatValue(value));
+  const focusedRef = useRef(false);
+  const cancelBlurRef = useRef(false);
+  const baselineRef = useRef(value);
+  const dirtyRef = useRef(false);
+
+  useEffect(() => {
+    if (!focusedRef.current) setDraft(formatValue(value));
+  }, [formatValue, value]);
+
+  const settle = () => {
+    focusedRef.current = false;
+    if (cancelBlurRef.current) {
+      cancelBlurRef.current = false;
+      return;
+    }
+    const parsed = Number(draft);
+    if (draft.trim() === "" || !Number.isFinite(parsed)) {
+      setDraft(formatValue(value));
+      if (dirtyRef.current) onCancel();
+      dirtyRef.current = false;
+      return;
+    }
+    const next = clampNumber(parsed, min, max);
+    setDraft(formatValue(next));
+    if (!dirtyRef.current || Object.is(next, baselineRef.current)) {
+      if (dirtyRef.current) onCancel();
+      dirtyRef.current = false;
+      return;
+    }
+    onPreview(next);
+    onSettle();
+    dirtyRef.current = false;
+  };
+
+  return (
+    <label className={labelClassName}>
+      <span className={labelTextClassName}>{label}</span>
+      <input
+        type="text"
+        inputMode="decimal"
+        aria-label={ariaLabel}
+        value={draft}
+        disabled={disabled}
+        onFocus={() => {
+          focusedRef.current = true;
+          baselineRef.current = value;
+          dirtyRef.current = false;
+          setDraft(formatValue(value));
+        }}
+        onChange={(event) => {
+          const next = event.target.value;
+          setDraft(next);
+          if (next.trim() === "") return;
+          const parsed = Number(next);
+          if (!Number.isFinite(parsed)) return;
+          const clamped = clampNumber(parsed, min, max);
+          if (!Object.is(clamped, baselineRef.current) && !dirtyRef.current) {
+            dirtyRef.current = true;
+            onBegin();
+          }
+          if (dirtyRef.current) onPreview(clamped);
+        }}
+        onBlur={settle}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            cancelBlurRef.current = true;
+            focusedRef.current = false;
+            setDraft(formatValue(value));
+            if (dirtyRef.current) onCancel();
+            dirtyRef.current = false;
+            event.currentTarget.blur();
+          } else if (event.key === "Enter") {
+            event.currentTarget.blur();
+          }
+        }}
+        className={`border-b border-panel-border-input/50 bg-transparent py-0.5 text-right font-mono text-[9px] text-panel-text-2 outline-none focus:border-panel-accent disabled:opacity-40 ${inputClassName}`}
+      />
+    </label>
+  );
+}

package/src/components/editor/useColorGradingController.test.ts

@@ -56,22 +56,30 @@ function makeElement(overrides: Partial<DomEditSelection> = {}): DomEditSelectio
   } as DomEditSelection;
 }
 
+type ApplyScope = (
+  scope: "source-file" | "project",
+  value: string | null,
+) => Promise<{ changedFiles: number; changedElements: number }>;
+
 function HookHost({
   onState,
   onSetAttributeLive,
   element,
   previewIframeRef,
+  onApplyScope,
 }: {
   onState: (state: ReturnType<typeof useColorGradingController>) => void;
   onSetAttributeLive: (attr: string, value: string | null) => void;
   element: DomEditSelection;
   previewIframeRef?: React.RefObject<HTMLIFrameElement | null>;
+  onApplyScope?: ApplyScope;
 }) {
   const state = useColorGradingController({
     projectId: "proj",
     element,
     previewIframeRef,
     onSetAttributeLive,
+    onApplyScope,
   });
   onState(state);
   return null;
@@ -81,6 +89,7 @@ function renderHook(
   onSetAttributeLive: (attr: string, value: string | null) => void,
   initialElement: DomEditSelection = makeElement(),
   previewIframeRef?: React.RefObject<HTMLIFrameElement | null>,
+  onApplyScope?: ApplyScope,
 ) {
   const host = document.createElement("div");
   document.body.append(host);
@@ -94,6 +103,7 @@ function renderHook(
           onSetAttributeLive,
           element,
           previewIframeRef,
+          onApplyScope,
         }),
       );
     });
@@ -129,6 +139,21 @@ function createPreviewFrame() {
   return { contentWindow, iframe };
 }
 
+function installPreviewRenderer(contentWindow: PreviewWindow) {
+  const renderPreviews = vi
+    .fn()
+    .mockImplementation(async (_target: unknown, candidates: Array<{ id: string }>) => ({
+      width: 160,
+      height: 90,
+      images: candidates.map(({ id }) => ({
+        id,
+        dataUrl: `data:image/png;base64,${id}`,
+      })),
+    }));
+  contentWindow.__hf = { colorGrading: { renderPreviews } };
+  return renderPreviews;
+}
+
 async function flushPreviewRequest() {
   act(() => vi.advanceTimersByTime(0));
   await act(async () => {
@@ -161,23 +186,37 @@ describe("useColorGradingController", () => {
     vi.useFakeTimers();
     const devicePixelRatio = vi.spyOn(window, "devicePixelRatio", "get").mockReturnValue(2);
     const { contentWindow, iframe } = createPreviewFrame();
-    const renderPreviews = vi.fn().mockResolvedValue({
-      width: 160,
-      height: 90,
-      images: [{ id: "bright-pop", dataUrl: "data:image/png;base64,bright" }],
+    const renderPreviews = installPreviewRenderer(contentWindow);
+    const initialElement = makeElement({
+      dataAttributes: {
+        "color-grading": JSON.stringify({
+          wheels: { shadows: { hue: 210, amount: 0.2 } },
+          effects: { pixelate: 0.4 },
+          palette: ["#112233", "#ffffff"],
+        }),
+      },
     });
-    contentWindow.__hf = { colorGrading: { renderPreviews } };
-    const { root, getState } = renderHook(vi.fn(), makeElement(), { current: iframe });
+    const { root, getState } = renderHook(vi.fn(), initialElement, { current: iframe });
 
     act(() => getState().requestPresetPreviews());
     await flushPreviewRequest();
 
     expect(renderPreviews).toHaveBeenCalledTimes(1);
     expect(renderPreviews.mock.calls[0]?.[1]).toHaveLength(18);
+    expect(renderPreviews.mock.calls[0]?.[1]).toContainEqual({
+      id: "bright-pop",
+      grading: expect.objectContaining({
+        wheels: expect.objectContaining({
+          shadows: expect.objectContaining({ amount: 0 }),
+        }),
+        effects: expect.objectContaining({ pixelate: 0.4 }),
+        palette: ["#112233", "#ffffff"],
+      }),
+    });
     expect(renderPreviews.mock.calls[0]?.[2]).toEqual({ maxDimension: 320 });
     expect(getState().presetPreviews).toEqual({
       status: "ready",
-      images: { "bright-pop": "data:image/png;base64,bright" },
+      images: expect.objectContaining({ "bright-pop": "data:image/png;base64,bright-pop" }),
       width: 160,
       height: 90,
     });
@@ -186,19 +225,96 @@ describe("useColorGradingController", () => {
     vi.useRealTimers();
   });
 
-  it("requests exact effect families and retains earlier family images", async () => {
+  it("retains partial preset previews and exposes retry after the batch times out", async () => {
     vi.useFakeTimers();
     const { contentWindow, iframe } = createPreviewFrame();
-    const renderPreviews = vi
-      .fn()
-      .mockImplementation(async (_target: unknown, candidates: Array<{ id: string }>) => ({
-        width: 160,
-        height: 90,
-        images: candidates.map(({ id }) => ({ id, dataUrl: `data:image/png;base64,${id}` })),
-      }));
+    const renderPreviews = vi.fn().mockResolvedValue({
+      width: 160,
+      height: 90,
+      images: [{ id: "bright-pop", dataUrl: "data:image/png;base64,bright" }],
+    });
     contentWindow.__hf = { colorGrading: { renderPreviews } };
     const { root, getState } = renderHook(vi.fn(), makeElement(), { current: iframe });
 
+    act(() => getState().requestPresetPreviews());
+    await flushPreviewRequest();
+    expect(getState().presetPreviews).toMatchObject({
+      status: "loading",
+      images: { "bright-pop": "data:image/png;base64,bright" },
+    });
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1700);
+    });
+    expect(getState().presetPreviews).toMatchObject({
+      status: "unavailable",
+      images: { "bright-pop": "data:image/png;base64,bright" },
+    });
+    expect(renderPreviews.mock.calls.length).toBeGreaterThan(1);
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
+  it("persists a disabled secondary even though it does not render pixels", () => {
+    vi.useFakeTimers();
+    const onSetAttributeLive = vi.fn();
+    const grading = normalizeHfColorGrading({
+      secondaries: [
+        {
+          enabled: false,
+          key: { hue: { center: 215, range: 25 } },
+          correction: { saturation: 0.15 },
+        },
+      ],
+    });
+    if (!grading) throw new Error("expected secondary grading");
+    const { root, getState } = renderHook(onSetAttributeLive);
+
+    act(() => getState().commitColorGrading(grading));
+    act(() => vi.advanceTimersByTime(400));
+
+    expect(onSetAttributeLive.mock.calls[0]?.[0]).toBe("color-grading");
+    expect(onSetAttributeLive.mock.calls[0]?.[1]).toContain('"enabled":false');
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
+  it("copies a disabled authored secondary to a broader scope", async () => {
+    const onApplyScope = vi.fn<ApplyScope>().mockResolvedValue({
+      changedFiles: 1,
+      changedElements: 1,
+    });
+    const grading = {
+      secondaries: [
+        {
+          enabled: false,
+          key: { hue: { center: 215, range: 25 } },
+          correction: { saturation: 0.15 },
+        },
+      ],
+    };
+    const { root, getState } = renderHook(
+      vi.fn(),
+      makeElement({ dataAttributes: { "color-grading": JSON.stringify(grading) } }),
+      undefined,
+      onApplyScope,
+    );
+
+    await act(async () => getState().applyToScope());
+
+    expect(onApplyScope).toHaveBeenCalledWith(
+      "source-file",
+      expect.stringContaining('"enabled":false'),
+    );
+    act(() => root.unmount());
+  });
+
+  it("requests exact effect families and retains earlier family images", async () => {
+    vi.useFakeTimers();
+    const { contentWindow, iframe } = createPreviewFrame();
+    const renderPreviews = installPreviewRenderer(contentWindow);
+    const { root, getState } = renderHook(vi.fn(), makeElement(), { current: iframe });
+
     act(() => getState().requestEffectPreviews(["blur", "pixelate", "bloom"]));
     await flushPreviewRequest();
 
@@ -490,7 +606,7 @@ describe("useColorGradingController", () => {
     vi.useRealTimers();
   });
 
-  it("resetGrading resets Grade fields without clearing Effects or Palette", () => {
+  it("resetGrading resets Grade fields without clearing LUT, Effects, or Palette", () => {
     const { root, getState } = renderHook(vi.fn());
     const grading = normalizeHfColorGrading({
       preset: "bright-pop",
@@ -507,7 +623,7 @@ describe("useColorGradingController", () => {
     });
     expect(getState().grading).toMatchObject({
       preset: "neutral",
-      lut: null,
+      lut: { src: "assets/luts/custom.cube", intensity: 0.6 },
       effects: { pixelate: 0.5 },
       palette: ["#112233", "#ffffff"],
     });

package/src/components/editor/useColorGradingController.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import {
   HF_COLOR_GRADING_ATTR,
+  hasHfColorGradingAuthoredValues,
   isHfColorGradingActive,
   normalizeHfColorGrading,
   serializeHfColorGrading,
@@ -21,6 +22,7 @@ import {
 } from "../../player/lib/runtimeProtocol";
 import {
   useColorGradingPreviews,
+  type ColorGradingCapturedFrame,
   type ColorGradingPresetPreviews,
   type ColorGradingPreviewOptions,
 } from "./useColorGradingPreviews";
@@ -169,6 +171,9 @@ export interface ColorGradingControllerState {
     next: NormalizedHfColorGrading | null,
     options?: ColorGradingPreviewOptions,
   ) => void;
+  captureGradedFrame: (options?: {
+    grading?: NormalizedHfColorGrading;
+  }) => Promise<ColorGradingCapturedFrame | null>;
   commitCompare: (enabled: boolean) => void;
   setApplyScope: (scope: "source-file" | "project") => void;
   applyToScope: () => Promise<void>;
@@ -472,7 +477,7 @@ export function useColorGradingController({
       }
       scheduleRuntimeStatusRefresh();
       if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
-      pendingPersistValueRef.current = isHfColorGradingActive(nextGrading)
+      pendingPersistValueRef.current = hasHfColorGradingAuthoredValues(nextGrading)
         ? serializeHfColorGrading(nextGrading)
         : null;
       pendingPersistGradingRef.current = nextGrading;
@@ -519,7 +524,9 @@ export function useColorGradingController({
     if (!onApplyScope || applyBusy) return;
     setApplyBusy(true);
     try {
-      const value = isHfColorGradingActive(grading) ? serializeHfColorGrading(grading) : null;
+      const value = hasHfColorGradingAuthoredValues(grading)
+        ? serializeHfColorGrading(grading)
+        : null;
       await onApplyScope(applyScope, value);
     } finally {
       setApplyBusy(false);
@@ -539,6 +546,7 @@ export function useColorGradingController({
     requestEffectPreviews: previewController.requestEffectPreviews,
     commitColorGrading,
     previewColorGrading: previewController.previewColorGrading,
+    captureGradedFrame: previewController.captureGradedFrame,
     commitCompare,
     setApplyScope,
     applyToScope,
@@ -546,6 +554,7 @@ export function useColorGradingController({
       const neutral = defaultColorGrading();
       commitColorGrading({
         ...neutral,
+        lut: latestGradingRef.current.lut,
         effects: latestGradingRef.current.effects,
         palette: latestGradingRef.current.palette,
       });

package/src/components/editor/useColorGradingPreviews.ts

@@ -16,6 +16,12 @@ export interface ColorGradingPresetPreviews {
   height: number;
 }
 
+export interface ColorGradingCapturedFrame {
+  dataUrl: string;
+  width: number;
+  height: number;
+}
+
 type ColorGradingPreviewKind = "presets" | "effects";
 
 export interface ColorGradingPreviewOptions {
@@ -78,12 +84,21 @@ function toPreviewColorGrading(grading: NormalizedHfColorGrading): unknown {
 
 function previewCandidates(
   request: PreviewRequest,
-  lut: NormalizedHfColorGrading["lut"],
+  grading: Pick<NormalizedHfColorGrading, "effects" | "lut" | "palette">,
 ): Array<{ id: string; grading: unknown }> {
   if (request.kind === "presets") {
     return HF_COLOR_GRADING_PRESETS.map((preset) => {
-      const resolved = normalizeHfColorGrading({ preset: preset.id, lut });
-      return { id: preset.id, grading: resolved ? toPreviewColorGrading(resolved) : null };
+      const resolved = normalizeHfColorGrading({ preset: preset.id, lut: grading.lut });
+      return {
+        id: preset.id,
+        grading: resolved
+          ? toPreviewColorGrading({
+              ...resolved,
+              effects: grading.effects,
+              palette: grading.palette,
+            })
+          : null,
+      };
     });
   }
   return (request.effects ?? HF_COLOR_GRADING_ACTIVE_EFFECT_KEYS).map((effect) => {
@@ -98,16 +113,19 @@ async function renderRequestedPreviews(
   runtime: RuntimeColorGradingPreview,
   target: HfColorGradingTarget,
   request: PreviewRequest,
-  lut: NormalizedHfColorGrading["lut"],
+  grading: Pick<NormalizedHfColorGrading, "effects" | "lut" | "palette">,
 ) {
-  const batch = await runtime.renderPreviews(target, previewCandidates(request, lut), {
+  const candidates = previewCandidates(request, grading);
+  const batch = await runtime.renderPreviews(target, candidates, {
     maxDimension: previewMaxDimension(),
   });
   if (!batch) return null;
   const images = Object.fromEntries(
     batch.images.flatMap((image) => (image.dataUrl ? [[image.id, image.dataUrl]] : [])),
   );
-  return Object.keys(images).length ? { ...batch, images } : null;
+  return Object.keys(images).length
+    ? { ...batch, images, complete: Object.keys(images).length === candidates.length }
+    : null;
 }
 
 export function useColorGradingPreviews({
@@ -154,6 +172,7 @@ export function useColorGradingPreviews({
     let cancelled = false;
     let complete = false;
     let inFlight = false;
+    let timedOut = false;
     const timers: number[] = [];
     setState((current) => ({
       ...current,
@@ -169,15 +188,19 @@ export function useColorGradingPreviews({
       if (!runtime) return;
       inFlight = true;
       try {
-        const result = await renderRequestedPreviews(runtime, target, request, grading.lut);
+        const result = await renderRequestedPreviews(runtime, target, request, {
+          effects: grading.effects,
+          lut: grading.lut,
+          palette: grading.palette,
+        });
         if (cancelled || !result) return;
-        complete = true;
+        complete = result.complete;
         setState((current) => ({
           ...current,
           previews: {
             ...current.previews,
             [kind]: {
-              status: "ready",
+              status: result.complete ? "ready" : timedOut ? "unavailable" : "loading",
               images:
                 kind === "effects"
                   ? { ...current.previews[kind].images, ...result.images }
@@ -206,11 +229,12 @@ export function useColorGradingPreviews({
     timers.push(
       window.setTimeout(() => {
         if (cancelled || complete) return;
+        timedOut = true;
         setState((current) => ({
           ...current,
           previews: {
             ...current.previews,
-            [kind]: { status: "unavailable", images: {}, width: 16, height: 9 },
+            [kind]: { ...current.previews[kind], status: "unavailable" },
           },
         }));
       }, 1600),
@@ -221,7 +245,7 @@ export function useColorGradingPreviews({
       iframe.removeEventListener("load", attempt);
       window.removeEventListener("message", onMessage);
     };
-  }, [grading.lut, previewIframeRef, request, target]);
+  }, [grading.effects, grading.lut, grading.palette, previewIframeRef, request, target]);
 
   const stopAnimatedPreview = useCallback(() => {
     const session = animatedRef.current;
@@ -296,6 +320,24 @@ export function useColorGradingPreviews({
     (effects: readonly HfColorGradingActiveEffectKey[]) => requestPreviews("effects", effects),
     [requestPreviews],
   );
+  const captureGradedFrame = useCallback(
+    async ({
+      grading: requestedGrading = gradingRef.current,
+    }: {
+      grading?: NormalizedHfColorGrading;
+    } = {}): Promise<ColorGradingCapturedFrame | null> => {
+      const runtime = readRuntime(previewIframeRef?.current);
+      if (!runtime) return null;
+      const batch = await runtime.renderPreviews(
+        target,
+        [{ id: "capture", grading: toPreviewColorGrading(requestedGrading) }],
+        { maxDimension: 320, useMediaTime: true },
+      );
+      const dataUrl = batch?.images[0]?.dataUrl;
+      return batch && dataUrl ? { dataUrl, width: batch.width, height: batch.height } : null;
+    },
+    [gradingRef, previewIframeRef, target],
+  );
 
   return {
     presetPreviews: previews.presets,
@@ -303,5 +345,6 @@ export function useColorGradingPreviews({
     requestPresetPreviews,
     requestEffectPreviews,
     previewColorGrading,
+    captureGradedFrame,
   };
 }