@hyperframes/studio 0.7.70 → 0.7.72

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

@@ -215,39 +215,98 @@ function neutralPropsBase() {
     grading: neutralGrading(),
     assets: [] as string[],
     onCommitColorGrading: vi.fn(),
+    onPreviewColorGrading: vi.fn(),
     applyScope: "source-file" as const,
     applyBusy: false,
     onSetApplyScope: vi.fn(),
     onApplyToScope: vi.fn(),
     onApplyScopeAvailable: true,
     mediaMetadata: null,
+    presetPreviews: {
+      status: "ready" as const,
+      images: { "bright-pop": "data:image/png;base64,bright" },
+      width: 160,
+      height: 90,
+    },
+    onRequestPresetPreviews: vi.fn(),
   };
 }
 
 describe("FlatColorGradingSection — Preset + LUT", () => {
-  it("renders the Preset dropdown with id/label pairs and fires onCommitColorGrading on change", () => {
+  it("previews looks without committing, restores on leave, and commits only on click", () => {
     const onCommitColorGrading = vi.fn();
+    const onPreviewColorGrading = vi.fn();
+    const base = neutralGrading();
+    const grading = {
+      ...base,
+      intensity: 0.4,
+      adjust: { ...base.adjust, contrast: 0.3 },
+      details: { ...base.details, vignette: 0.2 },
+      effects: { ...base.effects, pixelate: 0.5 },
+      palette: ["#112233", "#ffffff"],
+      lut: { src: "assets/luts/custom.cube", intensity: 0.6 },
+    };
     const { host, root } = renderInto(
       <FlatColorGradingSection
         {...neutralPropsBase()}
+        grading={grading}
         onCommitColorGrading={onCommitColorGrading}
+        onPreviewColorGrading={onPreviewColorGrading}
       />,
     );
-    const presetSelect = host.querySelector<HTMLSelectElement>(
-      '[data-flat-grade-preset="true"] select',
+    const brightPop = host.querySelector<HTMLButtonElement>(
+      '[data-flat-grade-preset="bright-pop"]',
     );
-    if (!presetSelect) throw new Error("expected a preset select");
-    expect(presetSelect.value).toBe("neutral");
-    // The visible "Preset" label is a sibling span outside FlatSelectRow
-    // (label="" there, to avoid rendering it twice) — the select still
-    // needs its own accessible name via the dedicated ariaLabel prop.
-    expect(presetSelect.getAttribute("aria-label")).toBe("Preset");
+    if (!brightPop) throw new Error("expected a Bright Pop look button");
     act(() => {
-      presetSelect.value = "fresh-pop";
-      presetSelect.dispatchEvent(new Event("change", { bubbles: true }));
+      brightPop.dispatchEvent(new MouseEvent("pointerover", { bubbles: true }));
     });
+    expect(onPreviewColorGrading.mock.calls.at(-1)?.[0].preset).toBe("bright-pop");
+    expect(onPreviewColorGrading.mock.calls.at(-1)?.[1]).toEqual({
+      animatedPreview: { kind: "presets", id: "bright-pop" },
+    });
+    expect(onCommitColorGrading).not.toHaveBeenCalled();
+    act(() => brightPop.dispatchEvent(new MouseEvent("pointerout", { bubbles: true })));
+    expect(onPreviewColorGrading).toHaveBeenLastCalledWith(null);
+    act(() => brightPop.dispatchEvent(new MouseEvent("click", { bubbles: true })));
     expect(onCommitColorGrading).toHaveBeenCalledTimes(1);
-    expect(onCommitColorGrading.mock.calls[0][0].preset).toBe("fresh-pop");
+    expect(onCommitColorGrading.mock.calls[0][0]).toMatchObject({
+      preset: "bright-pop",
+      intensity: 1,
+      effects: { pixelate: 0.5 },
+      palette: ["#112233", "#ffffff"],
+      lut: { src: "assets/luts/custom.cube", intensity: 0.6 },
+    });
+    expect(onCommitColorGrading.mock.calls[0][0].adjust.contrast).not.toBe(0.3);
+    expect(onCommitColorGrading.mock.calls[0][0].details.vignette).not.toBe(0.2);
+    act(() => root.unmount());
+  });
+
+  it("keeps effect-bearing saved styles out of Grade", () => {
+    const { host, root } = renderInto(<FlatColorGradingSection {...neutralPropsBase()} />);
+    const presets = host.querySelector('[data-flat-grade-preset-group="presets"]');
+    expect(presets?.querySelector('[data-flat-grade-preset="bright-pop"]')).not.toBeNull();
+    expect(presets?.querySelector('[data-flat-grade-preset="vhs-playback"]')).toBeNull();
+    expect(presets?.querySelector('[data-flat-grade-preset="editorial-halftone"]')).toBeNull();
+    expect(host.querySelector('[data-flat-grade-preset="neutral"]')?.textContent).toContain(
+      "Neutral",
+    );
+    act(() => root.unmount());
+  });
+
+  it("shows exact selected-media preview images and requests a fresh batch on mount", () => {
+    const onRequestPresetPreviews = vi.fn();
+    const { host, root } = renderInto(
+      <FlatColorGradingSection
+        {...neutralPropsBase()}
+        onRequestPresetPreviews={onRequestPresetPreviews}
+      />,
+    );
+    expect(onRequestPresetPreviews).toHaveBeenCalledTimes(1);
+    expect(
+      host.querySelector<HTMLImageElement>('[data-flat-grade-preview="bright-pop"]')?.src,
+    ).toContain("data:image/png;base64,bright");
+    expect(host.textContent).not.toContain("VHS Playback");
     act(() => root.unmount());
   });
 
@@ -410,7 +469,7 @@ describe("FlatColorGradingSection — Adjust sliders", () => {
     act(() => root.unmount());
   });
 
-  it("does NOT force intensity to revive when the Strength slider itself is dragged — it writes the value directly", () => {
+  it("does NOT force intensity to revive when the Amount slider itself is dragged — it writes the value directly", () => {
     const onCommitColorGrading = vi.fn();
     const grading = { ...neutralGrading(), intensity: 0 };
     const { host, root } = renderInto(
@@ -420,7 +479,7 @@ describe("FlatColorGradingSection — Adjust sliders", () => {
         onCommitColorGrading={onCommitColorGrading}
       />,
     );
-    const strengthRow = findRowByText(host, "div", "Strength", "startsWith");
+    const strengthRow = findRowByText(host, "div", "Amount", "startsWith");
     // min=0, max=100, step=1, ratio=0.4 -> raw=40 -> commit(40) -> intensity = 40/100 = 0.4
     dragSliderTrack(strengthRow, 40, 100);
     expect(onCommitColorGrading).toHaveBeenCalledTimes(1);
@@ -492,32 +551,6 @@ describe("FlatColorGradingSection — Vignette and Grain", () => {
   });
 });
 
-describe("FlatColorGradingSection — Effects", () => {
-  it("renders Blur and Pixelate sliders under an Effects micro-label", () => {
-    const { host, root } = renderInto(<FlatColorGradingSection {...neutralPropsBase()} />);
-    expect(host.textContent).toContain("Effects");
-    const rows = host.querySelectorAll('[data-flat-grade-effect="true"]');
-    expect(rows).toHaveLength(2);
-    act(() => root.unmount());
-  });
-
-  it("commits a dragged Pixelate value on slider track pointerdown, scaled from percent to the 0..1 effect range", () => {
-    const onCommitColorGrading = vi.fn();
-    const { host, root } = renderInto(
-      <FlatColorGradingSection
-        {...neutralPropsBase()}
-        onCommitColorGrading={onCommitColorGrading}
-      />,
-    );
-    const pixelateRow = findRowByText(host, '[data-flat-grade-effect="true"]', "Pixelate");
-    // min=0, max=100, step=1, ratio=0.75 -> raw=75 -> commit(75) -> effects.pixelate = 75/100 = 0.75
-    dragSliderTrack(pixelateRow, 75, 100);
-    expect(onCommitColorGrading).toHaveBeenCalledTimes(1);
-    expect(onCommitColorGrading.mock.calls[0][0].effects.pixelate).toBe(0.75);
-    act(() => root.unmount());
-  });
-});
-
 describe("FlatColorGradingSection — HDR banner and Apply scope", () => {
   it("shows the HDR banner only when mediaMetadata reports an HDR source", () => {
     const { host, root } = renderInto(

package/src/components/editor/propertyPanelFlatColorGradingSection.tsx

@@ -1,19 +1,23 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
-  HF_COLOR_GRADING_PRESETS,
+  HF_COLOR_GRADING_GRADE_PRESETS,
   isHfColorGradingActive,
   normalizeHfColorGrading,
   type HfColorGradingAdjustKey,
   type HfColorGradingDetailKey,
-  type HfColorGradingEffectKey,
   type NormalizedHfColorGrading,
 } from "@hyperframes/core/color-grading";
 import { Compare, Plus, RotateCcw, Settings } from "../../icons/SystemIcons";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { LUT_EXT } from "../../utils/mediaTypes";
-import { FlatSelectRow, FlatSlider } from "./propertyPanelFlatPrimitives";
-import { resolveValueTier } from "./propertyPanelValueTier";
-import type { ColorGradingControllerState, MediaMetadata } from "./useColorGradingController";
+import { FLAT_PREVIEW_GRID, FlatSlider } from "./propertyPanelFlatPrimitives";
+import type {
+  ColorGradingControllerState,
+  ColorGradingPresetPreviews,
+  ColorGradingPreviewOptions,
+  MediaMetadata,
+} from "./useColorGradingController";
+import { presetPreviewHandlers } from "./propertyPanelPresetPreview";
 
 const STATUS_DOT_CLASS: Record<ColorGradingControllerState["runtimeStatus"]["state"], string> = {
   active: "bg-emerald-400",
@@ -123,8 +127,6 @@ export function FlatColorGradingAccessory({
   );
 }
 
-const PRESET_OPTIONS = HF_COLOR_GRADING_PRESETS.map((p) => ({ value: p.id, label: p.label }));
-
 const ADJUST_SLIDERS: Array<{
   key: HfColorGradingAdjustKey;
   label: string;
@@ -182,11 +184,6 @@ const VIGNETTE_TUNE_KEYS: HfColorGradingDetailKey[] = [
 ];
 const GRAIN_TUNE_KEYS: HfColorGradingDetailKey[] = ["grainSize", "grainRoughness"];
 
-const EFFECT_SLIDERS: Array<{ key: HfColorGradingEffectKey; label: string }> = [
-  { key: "blur", label: "Blur" },
-  { key: "pixelate", label: "Pixelate" },
-];
-
 function HdrBanner({ metadata }: { metadata: MediaMetadata | null }) {
   if (metadata?.color.dynamicRange !== "hdr") return null;
   const details = [
@@ -231,23 +228,32 @@ export function FlatColorGradingSection({
   assets,
   onImportAssets,
   onCommitColorGrading,
+  onPreviewColorGrading,
   applyScope,
   applyBusy,
   onSetApplyScope,
   onApplyToScope,
   onApplyScopeAvailable,
   mediaMetadata,
+  presetPreviews,
+  onRequestPresetPreviews,
 }: {
   grading: NormalizedHfColorGrading;
   assets: string[];
   onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>;
   onCommitColorGrading: (next: NormalizedHfColorGrading) => void;
+  onPreviewColorGrading: (
+    next: NormalizedHfColorGrading | null,
+    options?: ColorGradingPreviewOptions,
+  ) => void;
   applyScope: "source-file" | "project";
   applyBusy: boolean;
   onSetApplyScope: (scope: "source-file" | "project") => void;
   onApplyToScope: () => void;
   onApplyScopeAvailable: boolean;
   mediaMetadata: MediaMetadata | null;
+  presetPreviews: ColorGradingPresetPreviews;
+  onRequestPresetPreviews: () => void;
 }) {
   const track = useTrackDesignInput();
   const lutInputRef = useRef<HTMLInputElement>(null);
@@ -260,10 +266,21 @@ export function FlatColorGradingSection({
   const lut = grading.lut;
   const selectedLutName = lut?.src ? (lut.src.split("/").pop() ?? lut.src) : null;
 
-  const applyPreset = (presetId: string) => {
-    const next = normalizeHfColorGrading({ preset: presetId, intensity: 1, lut: grading.lut });
-    if (next) onCommitColorGrading(next);
+  useEffect(() => {
+    if (
+      presetPreviews.status !== "loading" &&
+      HF_COLOR_GRADING_GRADE_PRESETS.some((preset) => !presetPreviews.images[preset.id])
+    ) {
+      onRequestPresetPreviews();
+    }
+  }, [onRequestPresetPreviews, presetPreviews.images, presetPreviews.status]);
+
+  const resolvePreset = (presetId: string) => {
+    const resolved = normalizeHfColorGrading({ preset: presetId, lut: grading.lut });
+    return resolved ? { ...resolved, effects: grading.effects, palette: grading.palette } : grading;
   };
+
+  useEffect(() => () => onPreviewColorGrading(null), [onPreviewColorGrading]);
   const updateIntensity = (value: number) => {
     onCommitColorGrading({ ...grading, intensity: value / 100 });
   };
@@ -319,22 +336,60 @@ export function FlatColorGradingSection({
   return (
     <div className="space-y-1.5">
       <HdrBanner metadata={mediaMetadata} />
-      <div data-flat-grade-preset="true" className="flex min-h-[30px] items-center justify-between">
-        <span className="text-[11px] text-panel-text-2">Preset</span>
-        <FlatSelectRow
-          label=""
-          ariaLabel="Preset"
-          value={grading.preset ?? "neutral"}
-          options={PRESET_OPTIONS}
-          tier={resolveValueTier(
-            grading.preset === "neutral" ? undefined : (grading.preset ?? undefined),
-            "neutral",
-          )}
-          onChange={applyPreset}
-        />
+      <div data-flat-grade-presets="true" className="space-y-1.5">
+        <div data-flat-grade-preset-group="presets" className={FLAT_PREVIEW_GRID}>
+          {HF_COLOR_GRADING_GRADE_PRESETS.map((preset) => {
+            const label = preset.label;
+            const selected = grading.preset === preset.id;
+            const preview = presetPreviews.images[preset.id];
+            return (
+              <button
+                key={preset.id}
+                type="button"
+                data-flat-grade-preset={preset.id}
+                aria-pressed={selected}
+                {...presetPreviewHandlers({
+                  id: preset.id,
+                  label,
+                  resolve: () => resolvePreset(preset.id),
+                  onPreview: onPreviewColorGrading,
+                  onCommit: onCommitColorGrading,
+                  onTrack: (name) => track("button", `Apply ${name}`),
+                })}
+                className={`min-w-0 overflow-hidden border text-left text-[10px] transition-colors ${
+                  selected
+                    ? "border-panel-accent bg-panel-accent/10 text-panel-text-0"
+                    : "border-panel-hairline bg-panel-bg-soft text-panel-text-3 hover:border-panel-border-input hover:text-panel-text-1"
+                }`}
+              >
+                <span
+                  data-flat-grade-preview-frame={preset.id}
+                  className="flex w-full items-center justify-center overflow-hidden bg-black/20"
+                  style={{ aspectRatio: `${presetPreviews.width} / ${presetPreviews.height}` }}
+                >
+                  {preview ? (
+                    <img
+                      data-flat-grade-preview={preset.id}
+                      src={preview}
+                      alt=""
+                      draggable={false}
+                      className="block h-full w-full object-contain"
+                    />
+                  ) : (
+                    <span
+                      data-flat-grade-preview-placeholder={presetPreviews.status}
+                      className="h-full w-full bg-panel-bg-soft"
+                    />
+                  )}
+                </span>
+                <span className="block truncate px-2 py-1.5">{label}</span>
+              </button>
+            );
+          })}
+        </div>
       </div>
       <FlatSlider
-        label="Strength"
+        label="Amount"
         value={Math.round(grading.intensity * 100)}
         min={0}
         max={100}
@@ -462,7 +517,7 @@ export function FlatColorGradingSection({
 
       <div className="space-y-1.5 border-t border-panel-hairline pt-1.5">
         <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
-          Finishing
+          Finish
         </div>
         <div className="flex items-center gap-1.5">
           <div className="flex-1">{renderDetailSlider("vignette")}</div>
@@ -497,42 +552,6 @@ export function FlatColorGradingSection({
         )}
       </div>
 
-      <div className="space-y-0.5 border-t border-panel-hairline pt-1.5">
-        <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
-          Effects
-        </div>
-        {EFFECT_SLIDERS.map((slider) => {
-          const value = grading.effects[slider.key];
-          const isSet = value > 1e-6;
-          return (
-            <div key={slider.key} data-flat-grade-effect="true">
-              <FlatSlider
-                label={slider.label}
-                value={Math.round(value * 100)}
-                min={0}
-                max={100}
-                tier={isSet ? "explicitCustom" : "default"}
-                displayValue={`${Math.round(value * 100)}%`}
-                onCommit={(next) =>
-                  onCommitColorGrading({
-                    ...grading,
-                    intensity: visibleIntensity(grading),
-                    effects: { ...grading.effects, [slider.key]: next / 100 },
-                  })
-                }
-                onReset={() =>
-                  onCommitColorGrading({
-                    ...grading,
-                    intensity: visibleIntensity(grading),
-                    effects: { ...grading.effects, [slider.key]: 0 },
-                  })
-                }
-              />
-            </div>
-          );
-        })}
-      </div>
-
       {onApplyScopeAvailable && (
         <div className="flex items-center justify-between gap-2 border-t border-panel-hairline pt-1.5">
           <span className="flex items-center gap-1.5 text-[11px] text-panel-text-2">

package/src/components/editor/propertyPanelFlatEffectControl.tsx

@@ -0,0 +1,96 @@
+import {
+  HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS,
+  type HfColorGradingEffectKey,
+  type NormalizedHfColorGrading,
+} from "@hyperframes/core/color-grading";
+import { FlatSelectRow } from "./propertyPanelFlatSelectRow";
+import { FlatSlider } from "./propertyPanelFlatPrimitives";
+import { FlatToggle } from "./propertyPanelFlatToggle";
+import {
+  DEFAULT_EFFECTS,
+  type EffectControl,
+  type EffectSpec,
+} from "./propertyPanelFlatEffectSpecs";
+
+type CommitEffect = (key: HfColorGradingEffectKey, value: number) => void;
+
+function defaultValueFor(control: EffectControl, effect: EffectSpec): number {
+  return (
+    HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS[effect.key][control.key] ?? DEFAULT_EFFECTS[control.key]
+  );
+}
+
+function EffectSliderControl({
+  control,
+  value,
+  defaultValue,
+  onCommit,
+}: {
+  control: Extract<EffectControl, { kind: "slider" }>;
+  value: number;
+  defaultValue: number;
+  onCommit: CommitEffect;
+}) {
+  const scale = control.scale ?? 100;
+  const sliderValue = value * scale;
+  const displayValue = control.format
+    ? control.format(value)
+    : `${Number.isInteger(sliderValue) ? sliderValue : sliderValue.toFixed(1)}${control.unit ?? "%"}`;
+  return (
+    <FlatSlider
+      label={control.label}
+      value={sliderValue}
+      min={control.min ?? 0}
+      max={control.max ?? 100}
+      step={control.step ?? 1}
+      tier={Math.abs(value - defaultValue) > 0.0001 ? "explicitCustom" : "default"}
+      displayValue={displayValue}
+      onCommit={(next) => onCommit(control.key, next / scale)}
+      onReset={() => onCommit(control.key, defaultValue)}
+    />
+  );
+}
+
+export function FlatEffectControl({
+  control,
+  effect,
+  effects,
+  onCommit,
+}: {
+  control: EffectControl;
+  effect: EffectSpec;
+  effects: NormalizedHfColorGrading["effects"];
+  onCommit: CommitEffect;
+}) {
+  const value = effects[control.key];
+  const defaultValue = defaultValueFor(control, effect);
+  if (control.kind === "toggle") {
+    return (
+      <FlatToggle
+        label={control.label}
+        checked={value >= 0.5}
+        onChange={(next) => onCommit(control.key, next ? 1 : 0)}
+      />
+    );
+  }
+  if (control.kind === "select") {
+    return (
+      <FlatSelectRow
+        label={control.label}
+        value={String(Math.round(value))}
+        options={control.options}
+        tier={value === defaultValue ? "default" : "explicitCustom"}
+        onChange={(next) => onCommit(control.key, Number.parseInt(next, 10))}
+        onReset={() => onCommit(control.key, defaultValue)}
+      />
+    );
+  }
+  return (
+    <EffectSliderControl
+      control={control}
+      value={value}
+      defaultValue={defaultValue}
+      onCommit={onCommit}
+    />
+  );
+}