@hyperframes/studio 0.7.70 → 0.7.72

package/src/components/editor/propertyPanelFlatEffectSpecs.ts

@@ -0,0 +1,305 @@
+import {
+  getHfColorGradingCapabilities,
+  normalizeHfColorGrading,
+  type HfColorGradingActiveEffectKey,
+  type HfColorGradingEffectKey,
+  type HfColorGradingPresetId,
+} from "@hyperframes/core/color-grading";
+
+type SliderControl = {
+  kind: "slider";
+  key: HfColorGradingEffectKey;
+  label: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  scale?: number;
+  unit?: string;
+  format?: (value: number) => string;
+};
+
+export type EffectControl =
+  | SliderControl
+  | { kind: "toggle"; key: HfColorGradingEffectKey; label: string }
+  | {
+      kind: "select";
+      key: HfColorGradingEffectKey;
+      label: string;
+      options: Array<{ value: string; label: string }>;
+    };
+
+export type EffectSpec = {
+  key: HfColorGradingActiveEffectKey;
+  label: string;
+  showMaster?: false;
+  masterLabel?: string;
+  masterFormat?: (value: number) => string;
+  max?: number;
+  settings?: readonly EffectControl[];
+  palette?: "mono" | "art";
+};
+
+type EffectGroup = {
+  label: string;
+  effects: readonly EffectSpec[];
+  presets?: readonly HfColorGradingPresetId[];
+};
+
+const EFFECT_CONTROL_LIMITS = new Map(
+  getHfColorGradingCapabilities().effects.flatMap((effect) =>
+    effect.controls.map((control) => [control.key, control] as const),
+  ),
+);
+
+function controlRange(key: HfColorGradingEffectKey, scale: number) {
+  const control = EFFECT_CONTROL_LIMITS.get(key);
+  return control ? { min: control.min * scale, max: control.max * scale, scale } : { scale };
+}
+
+const percent = (key: HfColorGradingEffectKey, label: string): SliderControl => ({
+  kind: "slider",
+  key,
+  label,
+  ...controlRange(key, 100),
+});
+
+const degrees = (key: HfColorGradingEffectKey, label: string, max: number): SliderControl => ({
+  kind: "slider",
+  key,
+  label,
+  ...controlRange(key, max),
+  unit: "deg",
+});
+
+function enumOptions(key: HfColorGradingEffectKey, labels: readonly string[]) {
+  const control = EFFECT_CONTROL_LIMITS.get(key);
+  const first = control?.min ?? 0;
+  const count = (control?.max ?? labels.length - 1) - first + 1;
+  if (labels.length !== count) throw new Error(`${key} labels do not match Core capabilities`);
+  return labels.map((label, index) => ({ value: String(first + index), label }));
+}
+
+const ASCII_STYLES = enumOptions("asciiStyle", [
+  "Standard",
+  "Dense",
+  "Minimal",
+  "Blocks",
+  "Braille",
+  "Technical",
+  "Matrix",
+  "Hatching",
+]);
+
+const SCREEN_SHAPES = enumOptions("monoScreenShape", [
+  "Circle",
+  "Square",
+  "Diamond",
+  "Triangle",
+  "Line",
+]);
+
+export const EFFECT_GROUPS: readonly EffectGroup[] = [
+  {
+    label: "Essentials",
+    effects: [
+      {
+        key: "blur",
+        label: "Blur",
+        masterLabel: "Radius",
+        masterFormat: (value) => `${(0.75 + Math.pow(value, 1.35) * 32).toFixed(1)}px`,
+      },
+      {
+        key: "pixelate",
+        label: "Pixelate",
+        masterLabel: "Cell Size",
+        masterFormat: (value) => `${Math.round(1 + value * 47)}px`,
+      },
+      {
+        key: "bloom",
+        label: "Bloom",
+        masterLabel: "Intensity",
+        max: controlRange("bloom", 100).max,
+        settings: [
+          {
+            kind: "slider",
+            key: "bloomRadius",
+            label: "Radius",
+            ...controlRange("bloomRadius", 1),
+            unit: "px",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Retro & Glitch",
+    presets: ["creator-camcorder", "vhs-playback", "home-movie-8mm"],
+    effects: [
+      { key: "chromaBleed", label: "Chroma Softening", masterLabel: "Smear" },
+      {
+        key: "tapeDamage",
+        label: "Tape Damage",
+        showMaster: false,
+        settings: [
+          percent("tapeTracking", "Tracking"),
+          percent("tapeNoise", "Noise"),
+          percent("tapeSpeed", "Speed"),
+        ],
+      },
+      { key: "filmArtifacts", label: "Film Artifacts", masterLabel: "Density" },
+      {
+        key: "scanlines",
+        label: "Scanlines",
+        masterLabel: "Opacity",
+        settings: [
+          {
+            ...percent("scanlineCount", "Line Count"),
+            format: (value) => `${Math.round(50 + value * 450)}`,
+          },
+          percent("scanlineSoftness", "Softness"),
+        ],
+      },
+      { key: "crtCurvature", label: "CRT Curvature", masterLabel: "Curvature" },
+      {
+        key: "chromaticAberration",
+        label: "Channel Separation",
+        masterLabel: "Separation",
+        settings: [degrees("chromaticAngle", "Angle", 360)],
+      },
+      {
+        key: "digitalGlitch",
+        label: "Digital Glitch",
+        showMaster: false,
+        settings: [
+          percent("digitalGlitchColorSplit", "Color Split"),
+          percent("digitalGlitchLineTear", "Line Tear"),
+          percent("digitalGlitchPixelate", "Pixelation"),
+          percent("digitalGlitchBlockAmount", "Block Amount"),
+          percent("digitalGlitchBlockDisplacement", "Displacement"),
+          percent("digitalGlitchBlockOpacity", "Block Opacity"),
+          percent("digitalGlitchSpeed", "Speed"),
+        ],
+      },
+    ],
+  },
+  {
+    label: "Print",
+    presets: ["editorial-halftone", "two-ink-print"],
+    effects: [
+      {
+        key: "halftone",
+        label: "Halftone",
+        showMaster: false,
+        settings: [percent("halftoneSize", "Dot Size")],
+      },
+      {
+        key: "twoInkPrint",
+        label: "Two-Ink Print",
+        showMaster: false,
+        settings: [percent("twoInkPrintSize", "Dot Size")],
+      },
+      {
+        key: "dither",
+        label: "Ordered Dither",
+        showMaster: false,
+        palette: "mono",
+        settings: [
+          {
+            ...percent("ditherSize", "Point Size"),
+            format: (value) => `${(1 + value * 4).toFixed(1)}px`,
+          },
+        ],
+      },
+      {
+        key: "monoScreen",
+        label: "Mono Screen",
+        showMaster: false,
+        palette: "mono",
+        settings: [
+          {
+            ...percent("monoScreenSize", "Cell Size"),
+            format: (value) => `${Math.round(4 + value * 14)}px`,
+          },
+          degrees("monoScreenAngle", "Angle", 90),
+          percent("monoScreenSpread", "Spread"),
+          { kind: "select", key: "monoScreenShape", label: "Shape", options: SCREEN_SHAPES },
+          { kind: "toggle", key: "monoScreenInvert", label: "Invert" },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Art",
+    effects: [
+      {
+        key: "ascii",
+        label: "ASCII",
+        showMaster: false,
+        palette: "mono",
+        settings: [
+          {
+            ...percent("asciiSize", "Character Size"),
+            format: (value) => `${Math.round(4 + value * 76)}px`,
+          },
+          { kind: "select", key: "asciiStyle", label: "Style", options: ASCII_STYLES },
+          { kind: "toggle", key: "asciiInvert", label: "Invert" },
+          { kind: "toggle", key: "asciiColor", label: "Use Source Color" },
+          percent("asciiRotation", "Edge Rotation"),
+        ],
+      },
+      {
+        key: "engraving",
+        label: "Engraving",
+        showMaster: false,
+        palette: "art",
+        settings: [
+          percent("engravingSpacing", "Spacing"),
+          percent("engravingMinThickness", "Min Thickness"),
+          percent("engravingMaxThickness", "Max Thickness"),
+          degrees("engravingAngle", "Angle", 180),
+          percent("engravingContrast", "Contrast"),
+          percent("engravingSharpness", "Sharpness"),
+          percent("engravingWave", "Wave"),
+          percent("engravingWaveFrequency", "Wave Frequency"),
+        ],
+      },
+      {
+        key: "crosshatch",
+        label: "Crosshatch",
+        showMaster: false,
+        palette: "art",
+        settings: [
+          percent("crosshatchSpacing", "Spacing"),
+          percent("crosshatchThickness", "Thickness"),
+          degrees("crosshatchAngle", "Angle", 180),
+          percent("crosshatchContrast", "Contrast"),
+          percent("crosshatchEdges", "Edge Detail"),
+          percent("crosshatchLineWeight", "Line Variation"),
+          percent("crosshatchWave", "Wave"),
+          percent("crosshatchWaveFrequency", "Wave Frequency"),
+        ],
+      },
+      {
+        key: "kuwahara",
+        label: "Kuwahara Paint",
+        showMaster: false,
+        settings: [
+          {
+            ...percent("kuwaharaRadius", "Radius"),
+            format: (value) => `${Math.round(2 + value * 14)}px`,
+          },
+          percent("kuwaharaSharpness", "Sharpness"),
+          {
+            ...percent("kuwaharaSaturation", "Saturation"),
+            format: (value) => `${Math.round(value * 200)}%`,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const EFFECT_SPECS = EFFECT_GROUPS.flatMap((group) => group.effects);
+const DEFAULT_GRADING = normalizeHfColorGrading("neutral");
+if (!DEFAULT_GRADING) throw new Error("Missing neutral color grading preset");
+export const DEFAULT_EFFECTS = DEFAULT_GRADING.effects;

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

@@ -0,0 +1,331 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  HF_COLOR_GRADING_ACTIVE_EFFECT_KEYS,
+  HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS,
+  HF_COLOR_GRADING_PALETTES,
+  getHfColorGradingCapabilities,
+  normalizeHfColorGrading,
+} from "@hyperframes/core/color-grading";
+import {
+  activeColorGradingEffectCount,
+  FlatEffectsAccessory,
+  FlatEffectsSection,
+} from "./propertyPanelFlatEffectsSection";
+import { EFFECT_SPECS } from "./propertyPanelFlatEffectSpecs";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function neutralGrading() {
+  const grading = normalizeHfColorGrading("neutral");
+  if (!grading) throw new Error("expected neutral grading");
+  return grading;
+}
+
+function renderInto(node: React.ReactElement) {
+  const host = document.body.appendChild(document.createElement("div"));
+  const root = createRoot(host);
+  act(() => root.render(node));
+  return { host, root };
+}
+
+function sectionProps(
+  grading: ReturnType<typeof neutralGrading>,
+  onCommitColorGrading: ReturnType<typeof vi.fn> = vi.fn(),
+) {
+  return {
+    grading,
+    previews: {
+      status: "ready" as const,
+      images: { pixelate: "data:image/png;base64,pixelate" },
+      width: 160,
+      height: 90,
+    },
+    presetPreviews: {
+      status: "ready" as const,
+      images: { "vhs-playback": "data:image/png;base64,vhs" },
+      width: 160,
+      height: 90,
+    },
+    onCommitColorGrading,
+    onPreviewColorGrading: vi.fn(),
+    onRequestEffectPreviews: vi.fn(),
+    onRequestPresetPreviews: vi.fn(),
+  };
+}
+
+describe("FlatEffectsSection", () => {
+  it("places missing composite treatments in their effect family without a Styles section", () => {
+    const onCommit = vi.fn();
+    const props = sectionProps(neutralGrading(), onCommit);
+    const { host, root } = renderInto(<FlatEffectsSection {...props} />);
+    expect(host.textContent).not.toContain("Styles");
+    expect(props.onRequestPresetPreviews).not.toHaveBeenCalled();
+    const retro = host.querySelector<HTMLButtonElement>(
+      '[data-flat-effect-group="Retro & Glitch"]',
+    );
+    act(() => retro?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(props.onRequestPresetPreviews).toHaveBeenCalledTimes(1);
+    expect(host.querySelector('[data-flat-effect-preset-preview="vhs-playback"]')).not.toBeNull();
+    const vhs = host.querySelector<HTMLButtonElement>('[data-flat-effect-preset="vhs-playback"]');
+    act(() => vhs?.dispatchEvent(new MouseEvent("pointerover", { bubbles: true })));
+    expect(props.onPreviewColorGrading.mock.calls.at(-1)?.[0]).toMatchObject({
+      preset: "vhs-playback",
+      effects: { tapeDamage: 0.82, scanlineCount: 0.17 },
+    });
+    expect(onCommit).not.toHaveBeenCalled();
+    act(() => vhs?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit.mock.calls[0][0].preset).toBe("vhs-playback");
+
+    const print = host.querySelector<HTMLButtonElement>('[data-flat-effect-group="Print"]');
+    act(() => print?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(host.querySelector('[data-flat-effect-preset="editorial-halftone"]')).not.toBeNull();
+    expect(host.querySelector('[data-flat-effect-preset="two-ink-print"]')).not.toBeNull();
+    act(() => root.unmount());
+  });
+
+  it("offers every shader master once in four intentional families", () => {
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(neutralGrading())} />);
+    const renderedKeys: Array<string | null> = [];
+    for (const label of ["Essentials", "Retro & Glitch", "Print", "Art"]) {
+      const tab = host.querySelector<HTMLButtonElement>(`[data-flat-effect-group="${label}"]`);
+      expect(tab).not.toBeNull();
+      act(() => tab?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+      renderedKeys.push(
+        ...Array.from(host.querySelectorAll("[data-flat-effect-option]"), (element) =>
+          element.getAttribute("data-flat-effect-option"),
+        ),
+      );
+    }
+    expect(renderedKeys.sort()).toEqual([...HF_COLOR_GRADING_ACTIVE_EFFECT_KEYS].sort());
+    const capabilities = new Map(
+      getHfColorGradingCapabilities().effects.map((effect) => [effect.key, effect]),
+    );
+    for (const effect of EFFECT_SPECS) {
+      expect(Boolean(effect.palette)).toBe(capabilities.get(effect.key)?.supportsPalette);
+    }
+    expect(host.querySelectorAll('[data-flat-slider-track="true"]')).toHaveLength(0);
+    act(() => root.unmount());
+  });
+
+  it("requests exact cards and auditions a chosen default without persisting", () => {
+    const props = sectionProps(neutralGrading());
+    const { host, root } = renderInto(<FlatEffectsSection {...props} />);
+    expect(props.onRequestEffectPreviews).toHaveBeenCalledTimes(1);
+    expect(props.onRequestEffectPreviews).toHaveBeenCalledWith(["blur", "pixelate", "bloom"]);
+    expect(host.querySelector('[data-flat-effect-preview="pixelate"]')).not.toBeNull();
+    const pixelate = host.querySelector<HTMLButtonElement>('[data-flat-effect-option="pixelate"]');
+    act(() => pixelate?.dispatchEvent(new MouseEvent("pointerover", { bubbles: true })));
+    expect(props.onPreviewColorGrading.mock.calls.at(-1)?.[0].effects.pixelate).toBe(
+      HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.pixelate.pixelate,
+    );
+    expect(props.onPreviewColorGrading.mock.calls.at(-1)?.[1]).toEqual({
+      animatedPreview: { kind: "effects", id: "pixelate" },
+    });
+    expect(props.onCommitColorGrading).not.toHaveBeenCalled();
+    act(() => pixelate?.dispatchEvent(new MouseEvent("pointerout", { bubbles: true })));
+    expect(props.onPreviewColorGrading).toHaveBeenLastCalledWith(null);
+    act(() => root.unmount());
+  });
+
+  it("applies a useful canonical default when an effect is chosen", () => {
+    const onCommit = vi.fn();
+    const grading = { ...neutralGrading(), intensity: 0 };
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
+    const pixelate = host.querySelector<HTMLButtonElement>('[data-flat-effect-option="pixelate"]');
+    act(() => pixelate?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit).toHaveBeenCalledTimes(1);
+    expect(onCommit.mock.calls[0][0].effects.pixelate).toBe(
+      HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.pixelate.pixelate,
+    );
+    expect(onCommit.mock.calls[0][0].intensity).toBe(0);
+    act(() => root.unmount());
+  });
+
+  it("uses a complete treatment card as a fresh starting point while preserving the LUT", () => {
+    const onCommit = vi.fn();
+    const base = neutralGrading();
+    const grading = {
+      ...base,
+      adjust: { ...base.adjust, exposure: 0.4 },
+      effects: { ...base.effects, blur: 0.6 },
+      palette: ["#112233", "#ffffff"],
+      lut: { src: "assets/luts/custom.cube", intensity: 0.5 },
+    };
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
+    const toggle = host.querySelector<HTMLButtonElement>('[data-flat-effects-add-toggle="true"]');
+    act(() => toggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    const retro = host.querySelector<HTMLButtonElement>(
+      '[data-flat-effect-group="Retro & Glitch"]',
+    );
+    act(() => retro?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    const vhs = host.querySelector<HTMLButtonElement>('[data-flat-effect-preset="vhs-playback"]');
+    act(() => vhs?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    const committed = onCommit.mock.calls[0][0];
+    expect(committed).toMatchObject({
+      preset: "vhs-playback",
+      lut: { src: "assets/luts/custom.cube", intensity: 0.5 },
+    });
+    expect(committed.effects.tapeDamage).toBeGreaterThan(0);
+    expect(committed.effects.blur).toBe(0);
+    expect(committed.palette).toBeNull();
+    expect(committed.adjust.exposure).not.toBe(0.4);
+    act(() => root.unmount());
+  });
+
+  it("shows only the selected active effect controls and converts degrees to shader units", () => {
+    const onCommit = vi.fn();
+    const grading = normalizeHfColorGrading({
+      effects: HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.chromaticAberration,
+    });
+    if (!grading) throw new Error("expected chromatic grading");
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
+    expect(host.textContent).toContain("Angle");
+    const effect = host.querySelector('[data-flat-effect-editor="chromaticAberration"]');
+    if (!effect) throw new Error("expected chromatic effect");
+    const rows = effect.querySelectorAll('[data-flat-slider-track="true"]');
+    const angleTrack = rows[1] as HTMLElement | undefined;
+    if (!angleTrack) throw new Error("expected angle slider");
+    Object.defineProperty(angleTrack, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
+    });
+    act(() => {
+      angleTrack.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true, clientX: 50 }));
+      angleTrack.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, clientX: 50 }));
+    });
+    expect(onCommit.mock.calls.at(-1)?.[0].effects.chromaticAngle).toBe(0.5);
+    act(() => root.unmount());
+  });
+
+  it("offers native ASCII styles, binary controls, and a bounded custom palette", () => {
+    const onCommit = vi.fn();
+    const grading = normalizeHfColorGrading({
+      effects: HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.ascii,
+    });
+    if (!grading) throw new Error("expected ASCII grading");
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
+    expect(
+      host.querySelector<HTMLSelectElement>('select[aria-label="Style"]')?.options,
+    ).toHaveLength(8);
+    expect(host.querySelectorAll('[data-flat-toggle="true"]')).toHaveLength(2);
+    expect(host.querySelector('[data-flat-effect-editor="ascii"]')?.textContent).not.toContain(
+      "Mix",
+    );
+    expect(host.querySelectorAll("[data-flat-effects-palette-preset]")).toHaveLength(
+      HF_COLOR_GRADING_PALETTES.length,
+    );
+    const synthwave = host.querySelector<HTMLButtonElement>(
+      '[data-flat-effects-palette-preset="synthwave"]',
+    );
+    act(() => synthwave?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit.mock.calls.at(-1)?.[0].palette).toEqual(
+      HF_COLOR_GRADING_PALETTES.find(({ id }) => id === "synthwave")?.colors,
+    );
+    const addPalette = host.querySelector<HTMLButtonElement>(
+      '[data-flat-effects-add-palette="true"]',
+    );
+    act(() => addPalette?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit.mock.calls.at(-1)?.[0].palette).toEqual(["#000000", "#ffffff"]);
+    act(() => root.unmount());
+  });
+
+  it("resets the selected effect to its authored defaults", () => {
+    const onCommit = vi.fn();
+    const grading = normalizeHfColorGrading({
+      effects: { ...HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.digitalGlitch, digitalGlitch: 0.9 },
+    });
+    if (!grading) throw new Error("expected digital glitch grading");
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
+    expect(
+      host.querySelector('[data-flat-effect-editor="digitalGlitch"]')?.textContent,
+    ).not.toContain("Mix");
+    const reset = host.querySelector<HTMLButtonElement>('[title="Reset Digital Glitch"]');
+    act(() => reset?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit.mock.calls.at(-1)?.[0].effects).toMatchObject(
+      HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.digitalGlitch,
+    );
+    act(() => root.unmount());
+  });
+
+  it("removes only the selected effect and preserves another active effect", () => {
+    const onCommit = vi.fn();
+    const grading = normalizeHfColorGrading({
+      effects: {
+        ...HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.blur,
+        ...HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.pixelate,
+      },
+    });
+    if (!grading) throw new Error("expected multi-effect grading");
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
+    const remove = host.querySelector<HTMLButtonElement>('[title="Remove Blur"]');
+    act(() => remove?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit.mock.calls.at(-1)?.[0].effects.blur).toBe(0);
+    expect(onCommit.mock.calls.at(-1)?.[0].effects.pixelate).toBe(
+      HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.pixelate.pixelate,
+    );
+    act(() => root.unmount());
+  });
+
+  it("closes the catalog when an already active effect is selected", () => {
+    const grading = normalizeHfColorGrading({
+      effects: HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.blur,
+    });
+    if (!grading) throw new Error("expected blur grading");
+    const props = sectionProps(grading);
+    const { host, root } = renderInto(<FlatEffectsSection {...props} />);
+    expect(props.onRequestEffectPreviews).not.toHaveBeenCalled();
+    const toggle = host.querySelector<HTMLButtonElement>('[data-flat-effects-add-toggle="true"]');
+    act(() => toggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(toggle?.getAttribute("aria-expanded")).toBe("true");
+    expect(props.onRequestEffectPreviews).toHaveBeenCalledWith(["blur", "pixelate", "bloom"]);
+    const blur = host.querySelector<HTMLButtonElement>('[data-flat-effect-option="blur"]');
+    act(() => blur?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(toggle?.getAttribute("aria-expanded")).toBe("false");
+    act(() => root.unmount());
+  });
+
+  it("requests only the visible family when the catalog tab changes", () => {
+    const props = sectionProps(neutralGrading());
+    const { host, root } = renderInto(<FlatEffectsSection {...props} />);
+    const art = host.querySelector<HTMLButtonElement>('[data-flat-effect-group="Art"]');
+    act(() => art?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(props.onRequestEffectPreviews).toHaveBeenLastCalledWith([
+      "ascii",
+      "engraving",
+      "crosshatch",
+      "kuwahara",
+    ]);
+    act(() => root.unmount());
+  });
+});
+
+describe("FlatEffectsAccessory", () => {
+  it("counts active masters and resets only effects and palette", () => {
+    const base = neutralGrading();
+    const grading = {
+      ...base,
+      adjust: { ...base.adjust, contrast: 0.2 },
+      effects: { ...base.effects, blur: 0.4, ascii: 1 },
+      palette: ["#112233", "#ffffff"],
+    };
+    expect(activeColorGradingEffectCount(grading)).toBe(2);
+    const onCommit = vi.fn();
+    const { host, root } = renderInto(
+      <FlatEffectsAccessory grading={grading} onCommitColorGrading={onCommit} />,
+    );
+    const reset = host.querySelector<HTMLButtonElement>('[data-flat-effects-reset="true"]');
+    act(() => reset?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit.mock.calls[0][0].adjust.contrast).toBe(0.2);
+    expect(onCommit.mock.calls[0][0].effects.blur).toBe(0);
+    expect(onCommit.mock.calls[0][0].effects.ascii).toBe(0);
+    expect(onCommit.mock.calls[0][0].palette).toBeNull();
+    act(() => root.unmount());
+  });
+});