@hyperframes/studio 0.7.70 → 0.7.72

package/src/components/editor/propertyPanelFlatEffectsSection.tsx

@@ -0,0 +1,503 @@
+import { useEffect, useState } from "react";
+import {
+  HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS,
+  HF_COLOR_GRADING_EFFECT_PRESETS,
+  HF_COLOR_GRADING_PALETTES,
+  normalizeHfColorGrading,
+  type HfColorGradingActiveEffectKey,
+  type HfColorGradingEffectKey,
+  type NormalizedHfColorGrading,
+} from "@hyperframes/core/color-grading";
+import { Plus, RotateCcw, X } from "../../icons/SystemIcons";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+import { FLAT_PREVIEW_GRID, FlatSlider } from "./propertyPanelFlatPrimitives";
+import type {
+  ColorGradingPresetPreviews,
+  ColorGradingPreviewOptions,
+} from "./useColorGradingController";
+import {
+  DEFAULT_EFFECTS,
+  EFFECT_GROUPS,
+  EFFECT_SPECS,
+  type EffectControl,
+  type EffectSpec,
+} from "./propertyPanelFlatEffectSpecs";
+import { FlatEffectControl } from "./propertyPanelFlatEffectControl";
+import { presetPreviewHandlers } from "./propertyPanelPresetPreview";
+
+export function activeColorGradingEffectCount(grading: NormalizedHfColorGrading): number {
+  return EFFECT_SPECS.filter((effect) => grading.effects[effect.key] > 0.0001).length;
+}
+
+export function FlatEffectsAccessory({
+  grading,
+  onCommitColorGrading,
+}: {
+  grading: NormalizedHfColorGrading;
+  onCommitColorGrading: (next: NormalizedHfColorGrading) => void;
+}) {
+  const track = useTrackDesignInput();
+  if (!activeColorGradingEffectCount(grading)) return null;
+  return (
+    <button
+      type="button"
+      data-flat-effects-reset="true"
+      title="Reset effects"
+      onClick={(event) => {
+        event.stopPropagation();
+        track("button", "Reset effects");
+        onCommitColorGrading({ ...grading, effects: { ...DEFAULT_EFFECTS }, palette: null });
+      }}
+      className="flex-shrink-0 text-panel-text-3 hover:text-panel-text-1"
+    >
+      <RotateCcw size={12} />
+    </button>
+  );
+}
+
+export function FlatEffectsSection({
+  grading,
+  previews,
+  presetPreviews,
+  onCommitColorGrading,
+  onPreviewColorGrading,
+  onRequestEffectPreviews,
+  onRequestPresetPreviews,
+}: {
+  grading: NormalizedHfColorGrading;
+  previews: ColorGradingPresetPreviews;
+  presetPreviews: ColorGradingPresetPreviews;
+  onCommitColorGrading: (next: NormalizedHfColorGrading) => void;
+  onPreviewColorGrading: (
+    next: NormalizedHfColorGrading | null,
+    options?: ColorGradingPreviewOptions,
+  ) => void;
+  onRequestEffectPreviews: (effects: readonly HfColorGradingActiveEffectKey[]) => void;
+  onRequestPresetPreviews: () => void;
+}) {
+  const track = useTrackDesignInput();
+  const activeEffects = EFFECT_SPECS.filter((effect) => grading.effects[effect.key] > 0.0001);
+  const [catalogOpen, setCatalogOpen] = useState(activeEffects.length === 0);
+  const [catalogGroup, setCatalogGroup] = useState(EFFECT_GROUPS[0].label);
+  const [selectedKey, setSelectedKey] = useState<HfColorGradingActiveEffectKey | null>(
+    activeEffects[0]?.key ?? null,
+  );
+  const selectedEffect =
+    activeEffects.find((effect) => effect.key === selectedKey) ?? activeEffects[0] ?? null;
+
+  useEffect(() => {
+    if (!catalogOpen) return;
+    const group = EFFECT_GROUPS.find((candidate) => candidate.label === catalogGroup);
+    if (!group) return;
+    const effectKeys = group.effects.map((effect) => effect.key);
+    if (previews.status !== "loading" && effectKeys.some((effect) => !previews.images[effect])) {
+      onRequestEffectPreviews(effectKeys);
+    }
+    if (
+      group.presets?.some((preset) => !presetPreviews.images[preset]) &&
+      presetPreviews.status !== "loading"
+    ) {
+      onRequestPresetPreviews();
+    }
+  }, [
+    catalogGroup,
+    catalogOpen,
+    onRequestEffectPreviews,
+    onRequestPresetPreviews,
+    presetPreviews.images,
+    presetPreviews.status,
+    previews.images,
+    previews.status,
+  ]);
+  useEffect(() => () => onPreviewColorGrading(null), [onPreviewColorGrading]);
+
+  const commitEffects = (effects: NormalizedHfColorGrading["effects"]) => {
+    onCommitColorGrading({
+      ...grading,
+      effects,
+    });
+  };
+  const commitEffect = (key: HfColorGradingEffectKey, value: number) => {
+    commitEffects({ ...grading.effects, [key]: value });
+  };
+  const resolveEffect = (effect: EffectSpec): NormalizedHfColorGrading => ({
+    ...grading,
+    effects: {
+      ...grading.effects,
+      ...HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS[effect.key],
+    },
+  });
+  const applyEffect = (effect: EffectSpec) => {
+    track("button", `Add ${effect.label}`);
+    onCommitColorGrading(resolveEffect(effect));
+    setSelectedKey(effect.key);
+    setCatalogOpen(false);
+  };
+  const resolvePreset = (presetId: string) =>
+    normalizeHfColorGrading({ preset: presetId, lut: grading.lut }) ?? grading;
+  const removeEffect = (effect: EffectSpec) => {
+    track("button", `Remove ${effect.label}`);
+    commitEffect(effect.key, 0);
+    setSelectedKey(null);
+  };
+
+  const renderPalette = (kind: "mono" | "art") => {
+    const fallback = kind === "art" ? ["#1a1a1a", "#f5f5dc"] : ["#000000", "#ffffff"];
+    const palette = grading.palette;
+    return (
+      <div data-flat-effects-palette="true" className="space-y-2 py-1">
+        <div className="grid grid-cols-3 gap-1">
+          {HF_COLOR_GRADING_PALETTES.map((preset) => {
+            const selected =
+              palette?.length === preset.colors.length &&
+              palette.every((color, index) => color === preset.colors[index]);
+            return (
+              <button
+                key={preset.id}
+                type="button"
+                title={`${preset.group}: ${preset.label}`}
+                data-flat-effects-palette-preset={preset.id}
+                aria-pressed={selected}
+                onClick={() => {
+                  track("button", `Use ${preset.label} palette`);
+                  onCommitColorGrading({ ...grading, palette: [...preset.colors] });
+                }}
+                className={`min-w-0 border p-1 text-left ${
+                  selected
+                    ? "border-panel-accent bg-panel-accent/10"
+                    : "border-panel-hairline hover:border-panel-border-input"
+                }`}
+              >
+                <span className="mb-1 flex h-3 overflow-hidden rounded-[2px]">
+                  {preset.colors.map((color) => (
+                    <span key={color} className="flex-1" style={{ backgroundColor: color }} />
+                  ))}
+                </span>
+                <span className="block truncate text-[8px] text-panel-text-3">{preset.label}</span>
+              </button>
+            );
+          })}
+        </div>
+        {!palette ? (
+          <button
+            type="button"
+            data-flat-effects-add-palette="true"
+            onClick={() => {
+              track("button", "Customize effect palette");
+              onCommitColorGrading({ ...grading, palette: fallback });
+            }}
+            className="flex min-h-[28px] items-center gap-1 text-[10px] font-medium text-panel-accent hover:text-panel-accent/80"
+          >
+            <Plus size={11} /> Custom palette
+          </button>
+        ) : (
+          <>
+            <div className="flex items-center justify-between">
+              <span className="text-[11px] text-panel-text-3">Custom palette</span>
+              <button
+                type="button"
+                title="Use default palette"
+                onClick={() => onCommitColorGrading({ ...grading, palette: null })}
+                className="text-panel-text-4 hover:text-panel-text-1"
+              >
+                <RotateCcw size={11} />
+              </button>
+            </div>
+            <div className="flex flex-wrap items-center gap-1.5">
+              {palette.map((color, index) => (
+                <span key={`${index}-${color}`} className="group/swatch relative">
+                  <input
+                    type="color"
+                    aria-label={`Palette color ${index + 1}`}
+                    value={color}
+                    onChange={(event) => {
+                      const nextPalette = [...palette];
+                      nextPalette[index] = event.target.value;
+                      onCommitColorGrading({ ...grading, palette: nextPalette });
+                    }}
+                    className="h-6 w-6 cursor-pointer rounded-sm border border-panel-border-input bg-transparent p-0"
+                  />
+                  {palette.length > 2 && (
+                    <button
+                      type="button"
+                      aria-label={`Remove palette color ${index + 1}`}
+                      onClick={() =>
+                        onCommitColorGrading({
+                          ...grading,
+                          palette: palette.filter((_, colorIndex) => colorIndex !== index),
+                        })
+                      }
+                      className="absolute -right-1 -top-1 hidden h-3.5 w-3.5 items-center justify-center rounded-full bg-panel-bg text-panel-text-2 shadow group-hover/swatch:flex"
+                    >
+                      <X size={8} />
+                    </button>
+                  )}
+                </span>
+              ))}
+              {palette.length < 6 && (
+                <button
+                  type="button"
+                  aria-label="Add palette color"
+                  onClick={() =>
+                    onCommitColorGrading({
+                      ...grading,
+                      palette: [...palette, palette.at(-1) ?? "#ffffff"],
+                    })
+                  }
+                  className="flex h-6 w-6 items-center justify-center rounded-sm border border-panel-border-input text-panel-text-4 hover:text-panel-text-1"
+                >
+                  <Plus size={11} />
+                </button>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-2" data-flat-effects-section="true">
+      {activeEffects.length > 0 && (
+        <div data-flat-effects-active-list="true" className="space-y-1">
+          {activeEffects.map((effect) => {
+            const selected = selectedEffect?.key === effect.key;
+            return (
+              <button
+                key={effect.key}
+                type="button"
+                data-flat-effect-active={effect.key}
+                aria-pressed={selected}
+                onClick={() => setSelectedKey(effect.key)}
+                className={`flex min-h-[30px] w-full items-center justify-between border px-2 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>{effect.label}</span>
+                <span className="text-[9px] text-panel-text-5">
+                  {selected ? "Editing" : "Active"}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {selectedEffect && (
+        <div
+          data-flat-effect-editor={selectedEffect.key}
+          className="space-y-1 border-l-2 border-panel-border-input pl-2.5"
+        >
+          <div className="flex min-h-[26px] items-center justify-between gap-2">
+            <span className="text-[11px] font-medium text-panel-text-1">
+              {selectedEffect.label}
+            </span>
+            <span className="flex items-center gap-2">
+              <button
+                type="button"
+                title={`Reset ${selectedEffect.label}`}
+                onClick={() => applyEffect(selectedEffect)}
+                className="text-panel-text-4 hover:text-panel-text-1"
+              >
+                <RotateCcw size={11} />
+              </button>
+              <button
+                type="button"
+                title={`Remove ${selectedEffect.label}`}
+                onClick={() => removeEffect(selectedEffect)}
+                className="text-panel-text-4 hover:text-red-300"
+              >
+                <X size={11} />
+              </button>
+            </span>
+          </div>
+          {selectedEffect.showMaster !== false && (
+            <FlatSlider
+              label={selectedEffect.masterLabel ?? "Mix"}
+              value={grading.effects[selectedEffect.key] * 100}
+              min={0}
+              max={selectedEffect.max ?? 100}
+              tier="explicitCustom"
+              displayValue={
+                selectedEffect.masterFormat?.(grading.effects[selectedEffect.key]) ??
+                `${Math.round(grading.effects[selectedEffect.key] * 100)}%`
+              }
+              onCommit={(next) => commitEffect(selectedEffect.key, next / 100)}
+              onReset={() =>
+                commitEffect(
+                  selectedEffect.key,
+                  HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS[selectedEffect.key][selectedEffect.key] ??
+                    1,
+                )
+              }
+            />
+          )}
+          {selectedEffect.settings?.map((control: EffectControl) => (
+            <FlatEffectControl
+              key={control.key}
+              control={control}
+              effect={selectedEffect}
+              effects={grading.effects}
+              onCommit={commitEffect}
+            />
+          ))}
+          {selectedEffect.palette && renderPalette(selectedEffect.palette)}
+        </div>
+      )}
+
+      <button
+        type="button"
+        data-flat-effects-add-toggle="true"
+        aria-expanded={catalogOpen}
+        onClick={() => setCatalogOpen((open) => !open)}
+        className="flex min-h-[30px] items-center gap-1 text-[10px] font-medium text-panel-accent hover:text-panel-accent/80"
+      >
+        <Plus size={11} /> Add effect
+      </button>
+
+      {catalogOpen && (
+        <div data-flat-effects-catalog="true" className="space-y-2">
+          <div
+            role="tablist"
+            aria-label="Effect families"
+            className="grid grid-cols-4 gap-px overflow-hidden border border-panel-hairline bg-panel-hairline"
+          >
+            {EFFECT_GROUPS.map((group) => (
+              <button
+                key={group.label}
+                type="button"
+                role="tab"
+                aria-selected={catalogGroup === group.label}
+                data-flat-effect-group={group.label}
+                onClick={() => setCatalogGroup(group.label)}
+                className={`min-h-[25px] min-w-0 truncate bg-panel-bg px-2 text-[9px] ${
+                  catalogGroup === group.label
+                    ? "font-medium text-panel-accent"
+                    : "text-panel-text-4 hover:text-panel-text-1"
+                }`}
+              >
+                {group.label}
+              </button>
+            ))}
+          </div>
+          {EFFECT_GROUPS.filter((group) => group.label === catalogGroup).map((group) => (
+            <section key={group.label} className="space-y-1" role="tabpanel">
+              <div className={FLAT_PREVIEW_GRID}>
+                {group.presets?.map((presetId) => {
+                  const preset = HF_COLOR_GRADING_EFFECT_PRESETS.find(
+                    (candidate) => candidate.id === presetId,
+                  );
+                  if (!preset) return null;
+                  const selected = grading.preset === preset.id;
+                  const preview = presetPreviews.images[preset.id];
+                  return (
+                    <button
+                      key={preset.id}
+                      type="button"
+                      data-flat-effect-preset={preset.id}
+                      aria-pressed={selected}
+                      {...presetPreviewHandlers({
+                        id: preset.id,
+                        label: preset.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
+                        className="flex w-full items-center justify-center overflow-hidden bg-black/20"
+                        style={{
+                          aspectRatio: `${presetPreviews.width} / ${presetPreviews.height}`,
+                        }}
+                      >
+                        {preview ? (
+                          <img
+                            data-flat-effect-preset-preview={preset.id}
+                            src={preview}
+                            alt=""
+                            draggable={false}
+                            className="block h-full w-full object-contain"
+                          />
+                        ) : (
+                          <span
+                            data-flat-effect-preset-placeholder={presetPreviews.status}
+                            className="h-full w-full bg-panel-bg-soft"
+                          />
+                        )}
+                      </span>
+                      <span className="block truncate px-2 py-1.5">{preset.label}</span>
+                    </button>
+                  );
+                })}
+                {group.effects.map((effect) => {
+                  const active = grading.effects[effect.key] > 0.0001;
+                  const preview = previews.images[effect.key];
+                  return (
+                    <button
+                      key={effect.key}
+                      type="button"
+                      data-flat-effect-option={effect.key}
+                      aria-pressed={active}
+                      title={`Preview ${effect.label}`}
+                      onPointerEnter={() =>
+                        onPreviewColorGrading(resolveEffect(effect), {
+                          animatedPreview: { kind: "effects", id: effect.key },
+                        })
+                      }
+                      onPointerLeave={() => onPreviewColorGrading(null)}
+                      onFocus={() => onPreviewColorGrading(resolveEffect(effect))}
+                      onBlur={() => onPreviewColorGrading(null)}
+                      onClick={() => {
+                        if (active) {
+                          setSelectedKey(effect.key);
+                          setCatalogOpen(false);
+                        } else {
+                          applyEffect(effect);
+                        }
+                      }}
+                      className={`min-w-0 overflow-hidden border text-left text-[10px] transition-colors ${
+                        active
+                          ? "border-panel-accent bg-panel-accent/10 text-panel-text-1"
+                          : "border-panel-hairline bg-panel-bg-soft text-panel-text-3 hover:border-panel-border-input hover:text-panel-text-1"
+                      }`}
+                    >
+                      <span
+                        data-flat-effect-preview-frame={effect.key}
+                        className="flex w-full items-center justify-center overflow-hidden bg-black/20"
+                        style={{ aspectRatio: `${previews.width} / ${previews.height}` }}
+                      >
+                        {preview ? (
+                          <img
+                            data-flat-effect-preview={effect.key}
+                            src={preview}
+                            alt=""
+                            draggable={false}
+                            className="block h-full w-full object-contain"
+                          />
+                        ) : (
+                          <span
+                            data-flat-effect-preview-placeholder={previews.status}
+                            className="h-full w-full bg-panel-bg-soft"
+                          />
+                        )}
+                      </span>
+                      <span className="block truncate px-2 py-1.5">{effect.label}</span>
+                    </button>
+                  );
+                })}
+              </div>
+            </section>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,113 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import type { RegistryItem } from "@hyperframes/core/registry";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  deriveMediaOverlayPlacement,
+  filterMediaTreatmentOverlays,
+  FlatOverlaysSection,
+  MEDIA_TREATMENT_OVERLAY_TAG,
+} from "./propertyPanelFlatOverlaysSection";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function registryItem(
+  name: string,
+  tags: string[],
+  type: RegistryItem["type"] = "hyperframes:component",
+  preview?: RegistryItem["preview"],
+): RegistryItem {
+  const base = {
+    name,
+    title: name,
+    description: `${name} description`,
+    tags,
+    preview,
+    files: [{ path: `${name}.html`, target: `${name}.html`, type: "hyperframes:snippet" as const }],
+  };
+  if (type === "hyperframes:component") return { ...base, type };
+  if (type === "hyperframes:block") {
+    return { ...base, type, dimensions: { width: 1920, height: 1080 }, duration: 2 };
+  }
+  return { ...base, type, dimensions: { width: 1920, height: 1080 }, duration: 2 };
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.unstubAllGlobals();
+});
+
+describe("FlatOverlaysSection", () => {
+  it("places an overlay over the selected media in its own composition", () => {
+    expect(
+      deriveMediaOverlayPlacement(
+        {
+          sourceFile: "compositions/scene.html",
+          dataAttributes: { "track-index": "2" },
+        },
+        { start: 1.5, duration: 3 },
+      ),
+    ).toEqual({
+      start: 1.5,
+      duration: 3,
+      track: 3,
+      compositionPath: "compositions/scene.html",
+    });
+  });
+
+  it("keeps only tagged Registry overlay blocks", () => {
+    const overlay = registryItem(
+      "camcorder-hud",
+      [MEDIA_TREATMENT_OVERLAY_TAG],
+      "hyperframes:block",
+    );
+    const ordinary = registryItem("caption", ["caption"]);
+    const taggedComponent = registryItem("scene", [MEDIA_TREATMENT_OVERLAY_TAG]);
+
+    expect(
+      filterMediaTreatmentOverlays([overlay, ordinary, taggedComponent]).map(({ name }) => name),
+    ).toEqual(["camcorder-hud"]);
+  });
+
+  it("loads tagged overlays and delegates installation by Registry name", async () => {
+    const items = [
+      registryItem("camcorder-hud", [MEDIA_TREATMENT_OVERLAY_TAG], "hyperframes:block", {
+        poster: "https://example.com/camcorder.png",
+        video: "https://example.com/camcorder.mp4",
+      }),
+      registryItem("ordinary-component", ["overlay"]),
+    ];
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: true, json: async () => items }));
+    const onAddOverlay = vi.fn().mockResolvedValue(undefined);
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+
+    await act(async () => {
+      root.render(<FlatOverlaysSection onAddOverlay={onAddOverlay} />);
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(host.querySelector('[data-flat-overlay="ordinary-component"]')).toBeNull();
+    const add = host.querySelector<HTMLButtonElement>('[data-flat-overlay="camcorder-hud"]');
+    expect(add).not.toBeNull();
+    expect(
+      host.querySelector<HTMLImageElement>('[data-flat-overlay-preview="camcorder-hud"]')?.src,
+    ).toBe("https://example.com/camcorder.png");
+    expect(host.querySelector('[data-flat-overlays="true"]')?.className).toContain("auto-fill");
+    act(() => add?.dispatchEvent(new MouseEvent("pointerover", { bubbles: true })));
+    expect(host.querySelector<HTMLVideoElement>("video")?.src).toBe(
+      "https://example.com/camcorder.mp4",
+    );
+    await act(async () => {
+      add?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+    });
+    expect(onAddOverlay).toHaveBeenCalledWith("camcorder-hud");
+
+    act(() => root.unmount());
+  });
+});