@hyperframes/studio 0.7.71 → 0.7.73

package/src/components/editor/propertyPanelColorCurves.tsx

@@ -0,0 +1,185 @@
+import { useState } from "react";
+import type { HfColorCurvePoint, HfHueCurvePoint } from "@hyperframes/core/color-grading";
+import { RotateCcw } from "../../icons/SystemIcons";
+import {
+  CurveGraph,
+  formatPointValue,
+  movePoint,
+  pointsFor,
+  RGB_IDENTITY,
+  TABS,
+  type ColorCurveValues,
+  type CurveTab,
+  withPoints,
+} from "./propertyPanelColorCurveGraph";
+import { GradingNumberField } from "./propertyPanelGradingNumberField";
+import { useInspectorGestureDraft } from "./useInspectorGestureTransaction";
+
+export type { ColorCurveValues } from "./propertyPanelColorCurveGraph";
+
+export function ColorCurves({
+  value,
+  disabled,
+  onPreview,
+  onCommit,
+}: {
+  value: ColorCurveValues;
+  disabled?: boolean;
+  onPreview: (value: ColorCurveValues) => void;
+  onCommit: (value: ColorCurveValues) => void;
+}) {
+  const [activeKey, setActiveKey] = useState<CurveTab["key"]>("master");
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const { draft, setDraft, transaction } = useInspectorGestureDraft({
+    sourceValue: value,
+    onPreview,
+    onCommit,
+  });
+  const tab = TABS.find((candidate) => candidate.key === activeKey) ?? TABS[0];
+  if (!tab) throw new Error("Color curve tabs are unavailable");
+  const points = pointsFor(draft, tab);
+
+  const previewPoints = (
+    nextPoints: readonly (HfColorCurvePoint | HfHueCurvePoint)[],
+    nextSelectedIndex: number,
+  ) => {
+    setSelectedIndex(nextSelectedIndex);
+    transaction.preview(withPoints(draft, tab, nextPoints));
+  };
+  const resetActive = () => {
+    transaction.cancel();
+    const next = withPoints(draft, tab, tab.kind === "rgb" ? RGB_IDENTITY : []);
+    setDraft(next);
+    setSelectedIndex(null);
+    onCommit(next);
+  };
+  const deleteSelected = () => {
+    if (selectedIndex === null) return;
+    if (tab.kind === "rgb" && (selectedIndex === 0 || selectedIndex === points.length - 1)) return;
+    transaction.cancel();
+    const nextPoints =
+      tab.kind === "hue" && points.length <= 3
+        ? []
+        : points.filter((_, index) => index !== selectedIndex);
+    const next = withPoints(draft, tab, nextPoints);
+    setDraft(next);
+    setSelectedIndex(null);
+    onCommit(next);
+  };
+  const updateSelected = (axis: "input" | "output", rawValue: number) => {
+    if (selectedIndex === null || !Number.isFinite(rawValue)) return;
+    const point = points[selectedIndex];
+    if (!point) return;
+    const moved = movePoint(
+      points,
+      selectedIndex,
+      axis === "input" ? rawValue : point[0],
+      axis === "output" ? rawValue : point[1],
+      tab,
+    );
+    previewPoints(moved.points, moved.selected);
+  };
+  const selectedPoint = selectedIndex === null ? null : points[selectedIndex];
+  const endpointSelected =
+    tab.kind === "rgb" &&
+    selectedIndex !== null &&
+    (selectedIndex === 0 || selectedIndex === points.length - 1);
+
+  return (
+    <div data-color-curves="true" className="space-y-2">
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 border-b border-panel-hairline">
+        {TABS.map((candidate) => (
+          <button
+            key={candidate.key}
+            type="button"
+            data-color-curve-tab={candidate.key}
+            aria-pressed={candidate.key === tab.key}
+            disabled={disabled}
+            onClick={() => {
+              transaction.cancel();
+              setActiveKey(candidate.key);
+              setSelectedIndex(null);
+            }}
+            className={`border-b-2 px-0.5 py-1 text-[9px] ${
+              candidate.key === tab.key
+                ? "border-panel-accent text-panel-text-1"
+                : "border-transparent text-panel-text-4 hover:text-panel-text-2"
+            }`}
+          >
+            {candidate.label}
+          </button>
+        ))}
+      </div>
+      <CurveGraph
+        tab={tab}
+        points={points}
+        selectedIndex={selectedIndex}
+        disabled={disabled}
+        onBegin={transaction.begin}
+        onPreview={previewPoints}
+        onSelect={setSelectedIndex}
+        onDelete={deleteSelected}
+        onSettle={transaction.settle}
+        onCancel={transaction.cancel}
+      />
+      <div className="flex min-h-7 items-end gap-2">
+        {selectedPoint ? (
+          <>
+            <GradingNumberField
+              label={tab.kind === "rgb" ? "Input" : "Hue"}
+              ariaLabel={`Curve point ${tab.kind === "rgb" ? "input" : "hue"}`}
+              value={formatPointValue(selectedPoint[0], tab, "input")}
+              min={0}
+              max={tab.kind === "rgb" ? 1 : 359.999}
+              disabled={disabled || endpointSelected}
+              labelClassName="min-w-0 flex-1"
+              labelTextClassName="block text-[8px] uppercase text-panel-text-5"
+              inputClassName="block w-full"
+              onBegin={transaction.begin}
+              onPreview={(next) => updateSelected("input", next)}
+              onSettle={transaction.settle}
+              onCancel={transaction.cancel}
+            />
+            <GradingNumberField
+              label="Output"
+              ariaLabel="Curve point output"
+              value={formatPointValue(selectedPoint[1], tab, "output")}
+              min={tab.min}
+              max={tab.max}
+              disabled={disabled}
+              labelClassName="min-w-0 flex-1"
+              labelTextClassName="block text-[8px] uppercase text-panel-text-5"
+              inputClassName="block w-full"
+              onBegin={transaction.begin}
+              onPreview={(next) => updateSelected("output", next)}
+              onSettle={transaction.settle}
+              onCancel={transaction.cancel}
+            />
+            <button
+              type="button"
+              disabled={disabled || endpointSelected}
+              onClick={deleteSelected}
+              className="pb-0.5 text-[9px] text-panel-text-4 hover:text-panel-text-1 disabled:opacity-30"
+            >
+              Delete
+            </button>
+          </>
+        ) : (
+          <span className="flex-1 text-[9px] text-panel-text-5">
+            Click the graph or press Enter to add a point
+          </span>
+        )}
+        <button
+          type="button"
+          aria-label={`Reset ${tab.label} curve`}
+          title={`Reset ${tab.label} curve`}
+          disabled={disabled}
+          onClick={resetActive}
+          className="pb-0.5 text-panel-text-4 hover:text-panel-text-1 disabled:opacity-40"
+        >
+          <RotateCcw size={11} />
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/editor/propertyPanelColorGradingControls.tsx

@@ -15,7 +15,7 @@ import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 
 const LUT_UPLOAD_DIR = "assets/luts";
 
-const ADJUST_SLIDERS: Array<{
+export const COLOR_GRADING_ADJUST_SLIDERS: Array<{
   key: HfColorGradingAdjustKey;
   label: string;
   min: number;
@@ -60,7 +60,7 @@ const ADJUST_SLIDERS: Array<{
   { key: "saturation", label: "Saturation", min: -100, max: 100, step: 1, scale: 100, suffix: "%" },
 ];
 
-const DETAIL_SLIDERS: Array<{
+export const COLOR_GRADING_DETAIL_SLIDERS: Array<{
   key: HfColorGradingDetailKey;
   label: string;
   min: number;
@@ -123,7 +123,7 @@ const DETAIL_SLIDERS: Array<{
   },
 ];
 
-type DetailSlider = (typeof DETAIL_SLIDERS)[number];
+type DetailSlider = (typeof COLOR_GRADING_DETAIL_SLIDERS)[number];
 type SliderSettings = {
   active?: boolean;
   label: string;
@@ -143,28 +143,111 @@ const EFFECT_SLIDERS: Array<{
   { key: "pixelate", label: "Pixelate", min: 0, max: 100, step: 1, scale: 100, suffix: "%" },
 ];
 
-const AMOUNT_DETAIL_SLIDERS = DETAIL_SLIDERS.filter(
+const AMOUNT_DETAIL_SLIDERS = COLOR_GRADING_DETAIL_SLIDERS.filter(
   (slider) => slider.key === "vignette" || slider.key === "grain",
 );
-const VIGNETTE_TUNE_SLIDERS = DETAIL_SLIDERS.filter(
+export const VIGNETTE_TUNE_SLIDERS = COLOR_GRADING_DETAIL_SLIDERS.filter(
   (slider) =>
     slider.key === "vignetteMidpoint" ||
     slider.key === "vignetteRoundness" ||
     slider.key === "vignetteFeather",
 );
-const GRAIN_TUNE_SLIDERS = DETAIL_SLIDERS.filter(
+export const GRAIN_TUNE_SLIDERS = COLOR_GRADING_DETAIL_SLIDERS.filter(
   (slider) => slider.key === "grainSize" || slider.key === "grainRoughness",
 );
 
-function normalizedDefaultValue(slider: { defaultValue?: number; scale: number }): number {
+export function normalizedColorGradingDefault(slider: {
+  defaultValue?: number;
+  scale: number;
+}): number {
   return (slider.defaultValue ?? 0) / slider.scale;
 }
 
-function visibleIntensity(grading: NormalizedHfColorGrading): number {
+export function visibleColorGradingIntensity(grading: NormalizedHfColorGrading): number {
   // Earlier drafts could persist 0% strength; the next manual edit should revive visible grading.
   return grading.intensity === 0 ? 1 : grading.intensity;
 }
 
+function colorGradingWithLut(
+  grading: NormalizedHfColorGrading,
+  src: string | null,
+  intensity = 1,
+): NormalizedHfColorGrading {
+  return {
+    ...grading,
+    intensity: visibleColorGradingIntensity(grading),
+    lut: src ? { src, intensity } : null,
+  };
+}
+
+export function colorGradingWithDetail(
+  grading: NormalizedHfColorGrading,
+  key: HfColorGradingDetailKey,
+  value: number,
+): NormalizedHfColorGrading {
+  return {
+    ...grading,
+    intensity: visibleColorGradingIntensity(grading),
+    details: { ...grading.details, [key]: value },
+  };
+}
+
+function colorGradingWithIntensity(
+  grading: NormalizedHfColorGrading,
+  intensity: number,
+): NormalizedHfColorGrading {
+  return { ...grading, intensity };
+}
+
+export function colorGradingWithAdjust(
+  grading: NormalizedHfColorGrading,
+  key: HfColorGradingAdjustKey,
+  value: number,
+): NormalizedHfColorGrading {
+  return {
+    ...grading,
+    intensity: visibleColorGradingIntensity(grading),
+    adjust: { ...grading.adjust, [key]: value },
+  };
+}
+
+async function importFirstLut(
+  files: FileList | null,
+  onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>,
+): Promise<string | null> {
+  if (!files?.length || !onImportAssets) return null;
+  const uploaded = await onImportAssets(files, LUT_UPLOAD_DIR);
+  return uploaded.find((asset) => LUT_EXT.test(asset)) ?? null;
+}
+
+export function createColorGradingActions(
+  grading: NormalizedHfColorGrading,
+  onCommit: (grading: NormalizedHfColorGrading) => void,
+) {
+  const applyLut = (src: string | null, intensity = 1) => {
+    onCommit(colorGradingWithLut(grading, src, intensity));
+  };
+  return {
+    setIntensityPercent(value: number) {
+      onCommit(colorGradingWithIntensity(grading, value / 100));
+    },
+    applyLut,
+    setLutIntensityPercent(value: number) {
+      if (grading.lut) applyLut(grading.lut.src, value / 100);
+    },
+    async importLut(
+      files: FileList | null,
+      onImportAssets: ((files: FileList, dir?: string) => Promise<string[]>) | undefined,
+      onImported: () => void,
+    ) {
+      const src = await importFirstLut(files, onImportAssets);
+      if (!src) return;
+      onImported();
+      applyLut(src);
+    },
+  };
+}
+
 export function ColorGradingControls({
   grading,
   assets,
@@ -189,11 +272,14 @@ export function ColorGradingControls({
   const detailSettingsSliders =
     detailSettings === "vignette" ? VIGNETTE_TUNE_SLIDERS : GRAIN_TUNE_SLIDERS;
   const vignetteSettingsActive = VIGNETTE_TUNE_SLIDERS.some(
-    (slider) => Math.abs(grading.details[slider.key] - normalizedDefaultValue(slider)) > 0.0001,
+    (slider) =>
+      Math.abs(grading.details[slider.key] - normalizedColorGradingDefault(slider)) > 0.0001,
   );
   const grainSettingsActive = GRAIN_TUNE_SLIDERS.some(
-    (slider) => Math.abs(grading.details[slider.key] - normalizedDefaultValue(slider)) > 0.0001,
+    (slider) =>
+      Math.abs(grading.details[slider.key] - normalizedColorGradingDefault(slider)) > 0.0001,
   );
+  const actions = createColorGradingActions(grading, onCommitColorGrading);
 
   const applyPreset = (preset: string) => {
     const next = normalizeHfColorGrading({ preset, intensity: 1, lut: grading.lut });
@@ -202,51 +288,13 @@ export function ColorGradingControls({
       onCommitColorGrading(next);
     }
   };
-  const updateFilterIntensity = (value: number) => {
-    onCommitColorGrading({
-      ...grading,
-      intensity: value / 100,
-    });
-  };
-  const applyLut = (src: string | null, intensity = 1) => {
-    onCommitColorGrading({
-      ...grading,
-      intensity: visibleIntensity(grading),
-      lut: src ? { src, intensity } : null,
-    });
-  };
-  const updateLutIntensity = (value: number) => {
-    if (!grading.lut) return;
-    applyLut(grading.lut.src, value / 100);
-  };
-  const importLuts = async (files: FileList | null) => {
-    if (!files?.length || !onImportAssets) return;
-    const uploaded = await onImportAssets(files, LUT_UPLOAD_DIR);
-    const firstLut = uploaded.find((asset) => LUT_EXT.test(asset));
-    if (firstLut) {
-      track("button", "Import LUT");
-      applyLut(firstLut, 1);
-    }
-  };
   const commitDetailSlider = (slider: DetailSlider, next: number) => {
-    onCommitColorGrading({
-      ...grading,
-      intensity: visibleIntensity(grading),
-      details: {
-        ...grading.details,
-        [slider.key]: next / slider.scale,
-      },
-    });
+    onCommitColorGrading(colorGradingWithDetail(grading, slider.key, next / slider.scale));
   };
   const resetDetailSlider = (slider: DetailSlider) => {
-    onCommitColorGrading({
-      ...grading,
-      intensity: visibleIntensity(grading),
-      details: {
-        ...grading.details,
-        [slider.key]: normalizedDefaultValue(slider),
-      },
-    });
+    onCommitColorGrading(
+      colorGradingWithDetail(grading, slider.key, normalizedColorGradingDefault(slider)),
+    );
   };
   const renderDetailSlider = (slider: DetailSlider, settings?: SliderSettings) => {
     const value = Math.round(grading.details[slider.key] * slider.scale);
@@ -293,8 +341,8 @@ export function ColorGradingControls({
         neutral={0}
         suffix="%"
         displayValue={`${Math.round(grading.intensity * 100)}%`}
-        onCommit={updateFilterIntensity}
-        onReset={() => updateFilterIntensity(100)}
+        onCommit={actions.setIntensityPercent}
+        onReset={() => actions.setIntensityPercent(100)}
       />
 
       <div className="min-w-0 rounded-md border border-panel-border/70 bg-panel-input/15">
@@ -322,7 +370,7 @@ export function ColorGradingControls({
                 onChange={(event) => {
                   const nextSrc = event.target.value;
                   track("select", "Custom LUT");
-                  applyLut(
+                  actions.applyLut(
                     nextSrc || null,
                     nextSrc && grading.lut?.src === nextSrc ? grading.lut.intensity : 1,
                   );
@@ -361,7 +409,9 @@ export function ColorGradingControls({
                 multiple
                 className="hidden"
                 onChange={(event) => {
-                  void importLuts(event.currentTarget.files);
+                  void actions.importLut(event.currentTarget.files, onImportAssets, () =>
+                    track("button", "Import LUT"),
+                  );
                   event.currentTarget.value = "";
                 }}
               />
@@ -386,8 +436,8 @@ export function ColorGradingControls({
                   neutral={0}
                   suffix="%"
                   displayValue={`${Math.round((grading.lut.intensity ?? 1) * 100)}%`}
-                  onCommit={updateLutIntensity}
-                  onReset={() => updateLutIntensity(100)}
+                  onCommit={actions.setLutIntensityPercent}
+                  onReset={() => actions.setLutIntensityPercent(100)}
                 />
               </div>
             )}
@@ -398,7 +448,7 @@ export function ColorGradingControls({
       <div className="grid min-w-0 gap-1.5">
         <span className={LABEL}>Adjust</span>
         <div className="grid min-w-0 grid-cols-2 gap-1.5">
-          {ADJUST_SLIDERS.map((slider) => {
+          {COLOR_GRADING_ADJUST_SLIDERS.map((slider) => {
             const value = grading.adjust[slider.key] * slider.scale;
             const isExposure = slider.key === "exposure";
             return (
@@ -418,24 +468,12 @@ export function ColorGradingControls({
                     : `${Math.round(value)}%`
                 }
                 onCommit={(next) => {
-                  onCommitColorGrading({
-                    ...grading,
-                    intensity: visibleIntensity(grading),
-                    adjust: {
-                      ...grading.adjust,
-                      [slider.key]: next / slider.scale,
-                    },
-                  });
+                  onCommitColorGrading(
+                    colorGradingWithAdjust(grading, slider.key, next / slider.scale),
+                  );
                 }}
                 onReset={() => {
-                  onCommitColorGrading({
-                    ...grading,
-                    intensity: visibleIntensity(grading),
-                    adjust: {
-                      ...grading.adjust,
-                      [slider.key]: 0,
-                    },
-                  });
+                  onCommitColorGrading(colorGradingWithAdjust(grading, slider.key, 0));
                 }}
               />
             );
@@ -499,7 +537,7 @@ export function ColorGradingControls({
                 onCommit={(next) => {
                   onCommitColorGrading({
                     ...grading,
-                    intensity: visibleIntensity(grading),
+                    intensity: visibleColorGradingIntensity(grading),
                     effects: {
                       ...grading.effects,
                       [slider.key]: next / slider.scale,
@@ -509,7 +547,7 @@ export function ColorGradingControls({
                 onReset={() => {
                   onCommitColorGrading({
                     ...grading,
-                    intensity: visibleIntensity(grading),
+                    intensity: visibleColorGradingIntensity(grading),
                     effects: {
                       ...grading.effects,
                       [slider.key]: 0,