@hyperframes/studio 0.8.6 → 0.8.7

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

@@ -469,7 +469,7 @@ describe("AudioFxGroup dynamic carve", () => {
     });
     document.getElementById("bed")?.setAttribute("src", "bed.wav");
     act(() => byTextButton(host, "Audio FX")?.click());
-    act(() => byTextButton(host, "Add effect")?.click());
+    act(() => byTextButton(host, "+ effect")?.click());
     await act(async () => {
       byTextButton(host, "Even Out Levels")?.click();
       await new Promise((r) => setTimeout(r, 0));
@@ -581,7 +581,7 @@ describe("AudioFxGroup dynamic carve", () => {
     const { release, decoded } = stubGatedDecode();
     const { host, onSetAttributeLive } = mount({ "fx-chain": CHAIN });
     document.getElementById("bed")?.setAttribute("src", "bed.wav");
-    act(() => byTextButton(host, "Add effect")?.click());
+    act(() => byTextButton(host, "+ effect")?.click());
     const level = byTextButton(host, "Even Out Levels");
     expect(level, "the levelling button was not offered").toBeTruthy();
     act(() => level?.focus());
@@ -611,7 +611,7 @@ describe("AudioFxGroup dynamic carve", () => {
     const { release, decoded } = stubGatedDecode();
     const { host, onSetAttributeLive } = mount({ "fx-chain": CHAIN });
     document.getElementById("bed")?.setAttribute("src", "bed.wav");
-    act(() => byTextButton(host, "Add effect")?.click());
+    act(() => byTextButton(host, "+ effect")?.click());
     act(() => byTextButton(host, "Even Out Levels")?.focus());
     // Straight to a neighbour, without ever leaving the shelf.
     act(() =>
@@ -1507,6 +1507,142 @@ describe("AudioFxGroup carve source list", () => {
   });
 });
 
+describe("AudioFxGroup carve targets groups (B6)", () => {
+  // These tests are the only ones in this file whose auto-carve effect makes a
+  // real cross-element write call (`onAutoGroupCarveSources`), which can be a
+  // genuine Promise. None of this file's other `mount*` helpers ever unmount
+  // their React root — harmless everywhere else because their effects only
+  // ever touch a plain `onSetAttributeQuiet` mock, so an orphaned root left
+  // over from an earlier test does nothing observable if it ever re-renders.
+  // Here it can re-fire the auto-group effect against WHATEVER a later test's
+  // fixture put in the (file-global) `document`, calling a long-dead test's
+  // mock — unmounting is what prevents that.
+  const roots: ReturnType<typeof createRoot>[] = [];
+  afterEach(() => {
+    for (const root of roots.splice(0)) act(() => root.unmount());
+  });
+
+  /** A bed, plus tracks that may carry `data-audio-group`, plus an optional auto-group handler. */
+  const mountWith = (
+    tracks: { id: string; group?: string; start?: string; duration?: string }[],
+    onAutoGroupCarveSources?: (clipIds: readonly string[], groupId: string) => Promise<void>,
+  ) => {
+    const bed = document.createElement("audio");
+    bed.id = "bed";
+    document.body.append(bed);
+    for (const t of tracks) {
+      const el = document.createElement("audio");
+      el.id = t.id;
+      if (t.group) el.setAttribute("data-audio-group", t.group);
+      if (t.start !== undefined) el.setAttribute("data-start", t.start);
+      if (t.duration !== undefined) el.setAttribute("data-duration", t.duration);
+      document.body.append(el);
+    }
+    const onSetAttributeQuiet = vi.fn();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    roots.push(root);
+    act(() => {
+      root.render(
+        <AudioFxGroup
+          element={{ dataAttributes: {}, id: "bed", element: bed } as unknown as DomEditSelection}
+          onSetAttributeQuiet={onSetAttributeQuiet}
+          onSetAttributeLive={vi.fn()}
+          onAutoGroupCarveSources={onAutoGroupCarveSources}
+        />,
+      );
+    });
+    const offered = Array.from(host.querySelectorAll<HTMLElement>("[data-carve-source]"));
+    const options = offered.map((el) => el.dataset["carveSource"] ?? "");
+    const boxes = offered.filter((el): el is HTMLInputElement => el instanceof HTMLInputElement);
+    return { host, options, boxes, onSetAttributeQuiet };
+  };
+
+  it("offers one entry for a group and hides its members individually", () => {
+    const { options } = mountWith([
+      { id: "vo-1", group: "voiceover" },
+      { id: "vo-2", group: "voiceover" },
+    ]);
+    expect(options).toEqual(["voiceover"]);
+  });
+
+  it("offers the group when only ONE member overlaps the bed (union, not per-clip)", () => {
+    // The bed spans the whole default window (no start/duration on the
+    // selection itself in this harness resolves to [0, Infinity)), so give the
+    // members explicit, non-overlapping-with-each-other spans and confirm the
+    // group still appears as long as at least one of them is in range.
+    const { options } = mountWith([
+      { id: "vo-1", group: "voiceover", start: "0", duration: "5" },
+      { id: "vo-2", group: "voiceover", start: "1000", duration: "5" },
+    ]);
+    expect(options).toEqual(["voiceover"]);
+  });
+
+  it("auto-selects the group over its individual members", () => {
+    const { onSetAttributeQuiet } = mountWith([
+      { id: "vo-1", group: "voiceover" },
+      { id: "vo-2", group: "voiceover" },
+    ]);
+    const write = writeTo(onSetAttributeQuiet.mock.calls, "data-fx-carve");
+    expect(JSON.parse(String(write![1])).sources).toEqual(["voiceover"]);
+  });
+
+  it("auto-groups a multi-voice carve into one named group, atomically", async () => {
+    // Two ungrouped, both voice-classified: the existing "every candidate
+    // carves itself" mount effect names both by id, which is exactly the
+    // plural-ungrouped case B6 intercepts — the carve should land on the
+    // minted group, not on the two ids directly.
+    const onAutoGroupCarveSources = vi.fn().mockResolvedValue(undefined);
+    const { onSetAttributeQuiet } = mountWith(
+      [
+        { id: "narration", start: "0", duration: "5" },
+        { id: "interview-guest", start: "10", duration: "5" },
+      ],
+      onAutoGroupCarveSources,
+    );
+    expect(onAutoGroupCarveSources).toHaveBeenCalledWith(
+      ["narration", "interview-guest"],
+      "voiceover",
+    );
+    // Explicitly await the exact promise `assignGroup` returned — a bare
+    // `await Promise.resolve()`/`setTimeout` flush is guessing how deep the
+    // chain behind it goes (its `.then(...)`, the write, and the re-analysis
+    // `setCarve` awaits afterward). Left genuinely unresolved when this test
+    // returns, that chain settles during a LATER test instead, after this
+    // one's mocks and DOM are gone.
+    await act(async () => {
+      await onAutoGroupCarveSources.mock.results[0]?.value;
+      // Two more turns of the microtask queue: one for the `.then(...)` that
+      // builds the grouped settings, one for `setCarve`'s own trailing
+      // `await analyse(next)` (a no-op here — the fixture's tracks have no
+      // `src`, so `resolveCarveVoices` returns empty and `analyse` exits
+      // immediately, but it still has to actually run to completion).
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    const write = writeTo(onSetAttributeQuiet.mock.calls, "data-fx-carve");
+    expect(write).toBeTruthy();
+    expect(JSON.parse(String(write![1])).sources).toEqual(["voiceover"]);
+  });
+
+  it("leaves sources alone when one of them already names a group", () => {
+    const onAutoGroupCarveSources = vi.fn();
+    const { onSetAttributeQuiet } = mountWith(
+      [
+        { id: "vo-1", group: "voiceover" },
+        { id: "vo-2", group: "voiceover" },
+      ],
+      onAutoGroupCarveSources,
+    );
+    // The default-carve effect already named the group (previous test above),
+    // so no auto-group call should ever fire for an all-group source list.
+    expect(onAutoGroupCarveSources).not.toHaveBeenCalled();
+    const write = writeTo(onSetAttributeQuiet.mock.calls, "data-fx-carve");
+    expect(JSON.parse(String(write![1])).sources).toEqual(["voiceover"]);
+  });
+});
+
 describe("AudioFxGroup carve source range", () => {
   const spanned = (tracks: { id: string; start?: string; duration?: string }[]): string[] => {
     const bed = document.createElement("audio");

package/src/components/editor/propertyPanelAudioFxGroup.tsx

@@ -55,6 +55,7 @@ export function AudioFxGroup({
   element,
   onSetAttributeQuiet: onSetAttributeQuietRaw,
   onSetAttributeLive,
+  onAutoGroupCarveSources,
 }: {
   element: DomEditSelection;
   /**
@@ -70,6 +71,8 @@ export function AudioFxGroup({
   onSetAttributeQuiet: (attr: string, value: string | null) => void | Promise<void>;
   /** Continuous, non-persisting write for a dial being dragged. */
   onSetAttributeLive: (attr: string, value: string | null) => void | Promise<void>;
+  /** Write `data-audio-group` on every named clip, atomically, one undo entry. */
+  onAutoGroupCarveSources?: (clipIds: readonly string[], groupId: string) => Promise<void>;
 }) {
   const chain = ((): HfAudioFxChain => {
     const raw = element.dataAttributes?.[HF_AUDIO_FX_DATA_KEY];
@@ -231,6 +234,7 @@ export function AudioFxGroup({
     onSetAttributeQuiet,
     writeAutomation,
     setAnalysing,
+    onAutoGroupCarveSources,
   );
 
   const { runLeveller, auditionTransport, auditioningLevel, auditionLevel, removeLeveller } =

package/src/components/editor/propertyPanelColor.tsx

@@ -268,6 +268,10 @@ export function ColorField({
 
   useEffect(() => {
     if (!open) return;
+    // Move focus into the picker on open and restore it on close so Escape
+    // and keyboard editing work without a pointer round-trip.
+    panelRef.current?.focus();
+    const restoreTarget = buttonRef.current;
     const handlePointerDown = (event: PointerEvent) => {
       const target = event.target as Node | null;
       if (!target) return;
@@ -279,6 +283,7 @@ export function ColorField({
       if (event.key === "Escape") {
         cancelColorGesture();
         setOpen(false);
+        restoreTarget?.focus();
       }
     };
     document.addEventListener("pointerdown", handlePointerDown);
@@ -320,7 +325,10 @@ export function ColorField({
     ? createPortal(
         <div
           ref={panelRef}
-          className="fixed z-[9999] w-[292px] overflow-hidden rounded-2xl border border-neutral-700 bg-neutral-950 shadow-2xl shadow-black/50"
+          role="dialog"
+          aria-label={`${label} color picker`}
+          tabIndex={-1}
+          className="fixed z-[9999] w-[292px] overflow-hidden rounded-2xl border border-neutral-700 bg-neutral-950 shadow-2xl shadow-black/50 outline-none"
           style={{
             left: panelPosition?.left ?? -9999,
             top: panelPosition?.top ?? -9999,

package/src/components/editor/propertyPanelColorGradingControls.tsx

@@ -263,6 +263,8 @@ export function ColorGradingControls({
   const lutInputRef = useRef<HTMLInputElement>(null);
   const [lutOpen, setLutOpen] = useState(false);
   const [detailSettings, setDetailSettings] = useState<"vignette" | "grain" | null>(null);
+  const [lutImporting, setLutImporting] = useState(false);
+  const [lutImportError, setLutImportError] = useState<string | null>(null);
   const lutAssets = useMemo(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets],
@@ -282,6 +284,9 @@ export function ColorGradingControls({
   const actions = createColorGradingActions(grading, onCommitColorGrading);
 
   const applyPreset = (preset: string) => {
+    // Pass the LUT through normalize; the preset's own adjust values are its
+    // look (main's normalize already avoids carrying over grading.adjust,
+    // which was the bug this PR originally fixed).
     const next = normalizeHfColorGrading({ preset, intensity: 1, lut: grading.lut });
     if (next) {
       track("select", "Preset");
@@ -391,16 +396,21 @@ export function ColorGradingControls({
               </select>
               <button
                 type="button"
-                disabled={!onImportAssets}
+                disabled={!onImportAssets || lutImporting}
                 onClick={(event) => {
                   event.stopPropagation();
                   lutInputRef.current?.click();
                 }}
-                className="flex h-8 w-8 items-center justify-center rounded-md bg-panel-input text-panel-text-4 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
-                title="Import .cube LUT"
+                className="flex h-8 w-8 items-center justify-center rounded-md bg-panel-input text-panel-text-4 transition-colors hover:bg-panel-hover hover:text-panel-text-1 active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-40"
+                title={lutImporting ? "Importing…" : "Import .cube LUT"}
                 aria-label="Import .cube LUT"
+                aria-busy={lutImporting}
               >
-                <Plus size={13} />
+                {lutImporting ? (
+                  <span className="h-3 w-3 animate-spin rounded-full border border-panel-text-4 border-t-transparent motion-reduce:animate-none" />
+                ) : (
+                  <Plus size={13} />
+                )}
               </button>
               <input
                 ref={lutInputRef}
@@ -409,13 +419,24 @@ export function ColorGradingControls({
                 multiple
                 className="hidden"
                 onChange={(event) => {
-                  void actions.importLut(event.currentTarget.files, onImportAssets, () =>
-                    track("button", "Import LUT"),
-                  );
+                  const files = event.currentTarget.files;
+                  setLutImporting(true);
+                  setLutImportError(null);
+                  void actions
+                    .importLut(files, onImportAssets, () => track("button", "Import LUT"))
+                    .catch(() =>
+                      setLutImportError("LUT import failed — check the .cube file and try again."),
+                    )
+                    .finally(() => setLutImporting(false));
                   event.currentTarget.value = "";
                 }}
               />
             </div>
+            {lutImportError && (
+              <div className="text-[10px] text-red-400" role="alert">
+                {lutImportError}
+              </div>
+            )}
             {grading.lut && (
               <div className="grid gap-2">
                 {selectedProjectLut && (

package/src/components/editor/propertyPanelCommitField.tsx

@@ -134,7 +134,15 @@ export function CommitField({
       return;
     }
     if (event.key === "Escape") {
-      cancelGestureFromKeyEvent(event);
+      if (cancelGestureFromKeyEvent(event)) return;
+      // No gesture to cancel means the draft was typed. Escape abandons it
+      // rather than leaving it for the blur-commit to write.
+      event.preventDefault();
+      event.stopPropagation();
+      dirtyRef.current = false;
+      setDraft(valueRef.current);
+      if (liveCommit) onPreview?.(valueRef.current);
+      event.currentTarget.blur();
       return;
     }
     if (event.key === "Enter") {

package/src/components/editor/propertyPanelFill.tsx

@@ -91,6 +91,7 @@ export function ImageFillField({
   const track = useTrackDesignInput();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
   const imageAssets = useMemo(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
   const selectedAsset = useMemo(
     () => resolveSelectedAsset(value, sourceFile, imageAssets),
@@ -101,6 +102,7 @@ export function ImageFillField({
   const handleUpload = async (files: FileList | null) => {
     if (!files?.length || !onImportAssets) return;
     setUploading(true);
+    setUploadError(null);
     try {
       const uploaded = await onImportAssets(files);
       const nextImage = uploaded.find((a) => IMAGE_EXT.test(a));
@@ -108,6 +110,8 @@ export function ImageFillField({
         track("button", "Upload image");
         onCommit(`url("${toProjectRootAssetPath(nextImage)}")`);
       }
+    } catch {
+      setUploadError("Upload failed — check the file and try again.");
     } finally {
       setUploading(false);
     }
@@ -144,6 +148,11 @@ export function ImageFillField({
             }}
           />
         </div>
+        {uploadError && (
+          <div className="text-[10px] text-red-400" role="alert">
+            {uploadError}
+          </div>
+        )}
         {imageAssets.length > 0 ? (
           <div className="space-y-3">
             {selectedAsset && (
@@ -262,11 +271,49 @@ export function GradientField({
           {parsed.stops.map((stop, index) => (
             <div
               key={`stop-preview-${index}`}
-              className="absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border-2 border-white/90 shadow-[0_0_0_1px_rgba(0,0,0,0.35)]"
+              role="slider"
+              tabIndex={disabled ? -1 : 0}
+              aria-label={`Stop ${index + 1} position`}
+              aria-valuenow={Math.round(stop.position)}
+              aria-valuemin={0}
+              aria-valuemax={100}
+              onKeyDown={(event) => {
+                if (disabled) return;
+                if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+                event.preventDefault();
+                const step = event.shiftKey ? 10 : 1;
+                const delta = event.key === "ArrowRight" ? step : -step;
+                updateStop(index, {
+                  position: Math.max(0, Math.min(100, Math.round(stop.position + delta))),
+                });
+              }}
+              className="absolute top-1/2 h-4 w-4 -translate-y-1/2 cursor-ew-resize rounded-full border-2 border-white/90 shadow-[0_0_0_1px_rgba(0,0,0,0.35)] outline-none focus-visible:ring-2 focus-visible:ring-studio-accent"
               style={{
                 left: `calc(${stop.position}% - 8px)`,
                 backgroundColor: stop.color,
               }}
+              onClick={(event) => event.stopPropagation()}
+              onPointerDown={(event) => {
+                if (disabled) return;
+                event.stopPropagation();
+                event.currentTarget.setPointerCapture(event.pointerId);
+              }}
+              onPointerMove={(event) => {
+                if (disabled || !event.currentTarget.hasPointerCapture(event.pointerId)) return;
+                const rect = previewRef.current?.getBoundingClientRect();
+                if (!rect || rect.width <= 0) return;
+                const next = Math.max(
+                  0,
+                  Math.min(100, ((event.clientX - rect.left) / rect.width) * 100),
+                );
+                updateStop(index, { position: Math.round(next * 10) / 10 });
+              }}
+              onPointerUp={(event) => {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+              }}
+              onPointerCancel={(event) => {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+              }}
             />
           ))}
         </div>
@@ -392,7 +439,8 @@ export function GradientField({
             type="button"
             disabled={disabled || parsed.stops.length >= 6}
             onClick={() => addStop()}
-            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-600"
+            title={parsed.stops.length >= 6 ? "Maximum 6 stops" : "Add a gradient stop"}
+            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white active:scale-[0.98] disabled:cursor-not-allowed disabled:text-neutral-600"
           >
             <Plus size={12} />
             Add stop

package/src/components/editor/propertyPanelFlatProps.ts

@@ -27,6 +27,7 @@ export type PropertyPanelFlatProps = Pick<
   | "onRemoveTextField"
   | "onAskAgent"
   | "onToggleElementHidden"
+  | "onAutoGroupCarveSources"
   | "onImportAssets"
   | "onAddMediaOverlay"
   | "onImportFonts"

package/src/components/editor/propertyPanelFont.tsx

@@ -143,6 +143,7 @@ export function FontFamilyField({
   const fontInputRef = useRef<HTMLInputElement | null>(null);
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
   const [localFonts, setLocalFonts] = useState<string[]>([]);
   const [localFontData, setLocalFontData] = useState<LocalFontData[]>([]);
   const [googleFonts, setGoogleFonts] = useState<string[]>(() => [...POPULAR_GOOGLE_FONT_FAMILIES]);
@@ -259,6 +260,8 @@ export function FontFamilyField({
       } else {
         setFontNotice("No supported font files were imported.");
       }
+    } catch {
+      setFontNotice("Font import failed — the files were not added. Try again.");
     } finally {
       setImportingFonts(false);
     }
@@ -358,11 +361,17 @@ export function FontFamilyField({
           commitFontFamily(buildFontFamilyValue(imported.family));
           setQuery("");
           setOpen(false);
-          return;
+        } else {
+          // Committing an un-imported family would render a silent fallback,
+          // so surface the failure and keep the current font instead.
+          setFontNotice(`Couldn't import "${option.family}" — the font was not applied.`);
         }
+      } catch {
+        setFontNotice(`Couldn't import "${option.family}" — the font was not applied.`);
       } finally {
         setImportingFonts(false);
       }
+      return;
     }
     if (option.source === "Google") loadGoogleFontStylesheet(option.family);
     const imported = importedFonts.find(
@@ -383,17 +392,39 @@ export function FontFamilyField({
           value={query}
           disabled={disabled}
           placeholder={loadingGoogleFonts ? "Loading Google Fonts..." : "Search fonts"}
-          onChange={(e) => setQuery(e.target.value)}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setActiveIndex(-1);
+          }}
           onKeyDown={(e) => {
             if (e.key === "Escape") {
               e.preventDefault();
               setOpen(false);
+              return;
+            }
+            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+              e.preventDefault();
+              if (filteredOptions.length === 0) return;
+              const delta = e.key === "ArrowDown" ? 1 : -1;
+              const next =
+                activeIndex < 0 && delta === 1
+                  ? 0
+                  : (activeIndex + delta + filteredOptions.length) % filteredOptions.length;
+              setActiveIndex(next);
+              document
+                .querySelector(`[data-font-option-index="${next}"]`)
+                ?.scrollIntoView({ block: "nearest" });
+              return;
             }
-            if (e.key === "Enter" && filteredOptions[0]) {
+            const target = filteredOptions[activeIndex] ?? filteredOptions[0];
+            if (e.key === "Enter" && target) {
               e.preventDefault();
-              commitFamily(filteredOptions[0]);
+              commitFamily(target);
             }
           }}
+          role="combobox"
+          aria-expanded={open}
+          aria-autocomplete="list"
           className="min-w-0 rounded-lg border border-neutral-800 bg-neutral-900 px-2.5 py-2 text-[11px] font-medium text-neutral-100 outline-none placeholder:text-neutral-600 focus:border-neutral-600"
         />
         {canQueryLocalFonts && (
@@ -437,19 +468,24 @@ export function FontFamilyField({
         {filteredOptions.length === 0 ? (
           <div className="px-2 py-3 text-[11px] text-neutral-500">No fonts found.</div>
         ) : (
-          filteredOptions.map((option) => (
+          filteredOptions.map((option, index) => (
             <button
               key={`${option.source}-${option.family}`}
               type="button"
+              data-font-option-index={index}
               onClick={() => commitFamily(option)}
               className={`flex w-full min-w-0 items-center justify-between gap-3 rounded-lg px-2 py-2 text-left text-[11px] transition-colors ${
-                option.family === currentFamily
-                  ? "bg-studio-accent/15 text-neutral-50"
-                  : "text-neutral-300 hover:bg-neutral-900 hover:text-neutral-100"
+                index === activeIndex
+                  ? "bg-neutral-800 text-neutral-50"
+                  : option.family === currentFamily
+                    ? "bg-studio-accent/15 text-neutral-50"
+                    : "text-neutral-300 hover:bg-neutral-900 hover:text-neutral-100"
               }`}
             >
               <span className="flex min-w-0 items-center gap-1.5">
-                <span className="truncate font-medium">{option.family}</span>
+                <span className="truncate font-medium" style={{ fontFamily: `"${option.family}"` }}>
+                  {option.family}
+                </span>
                 {renderAliasFor(option.family) && (
                   <span className="flex-shrink-0 text-[9px] text-neutral-500">
                     → {renderAliasFor(option.family)}

package/src/components/editor/propertyPanelFxPresetStyle.ts

@@ -150,6 +150,24 @@ export const FX_PRESET_STYLE: Record<string, FxPresetStyle> = {
     color: "hsl(288, 85%, 72%)",
     family: FACE.theatrical,
   },
+  // Small, fast and squeaky — tight and bright, nothing about it sits still.
+  chipmunk: {
+    type: "text-[12px] font-black uppercase tracking-tighter",
+    color: "hsl(54, 88%, 66%)",
+    family: FACE.geometric,
+  },
+  // Huge and slow — the biggest size here, set on a face bolted to a monument.
+  giant: {
+    type: "text-[18px] font-black tracking-[0.02em]",
+    color: "hsl(250, 72%, 68%)",
+    family: FACE.engraved,
+  },
+  // Rough and too close — heavy industrial caps, growled rather than shouted.
+  monster: {
+    type: "text-[15px] font-black uppercase tracking-[0.05em]",
+    color: "hsl(350, 78%, 64%)",
+    family: FACE.condensed,
+  },
 
   // --- space: rooms. Light and wide, because that is what space looks like ---
   "room-tight": {

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

@@ -875,7 +875,7 @@ describe("FxSection chain", () => {
 
       click(host.querySelector(".hf-fx-add"));
       expect(host.querySelector(".hf-fx-add-menu")).toBeNull();
-      expect(byText(host, "button", "Add effect")).toBeTruthy();
+      expect(byText(host, "button", "+ effect")).toBeTruthy();
     });
 
     it("opens one menu in place of the other", () => {
@@ -1046,7 +1046,7 @@ describe("FxSection chain", () => {
 
     it("auditions an effect the add menu is offering", () => {
       const { host, onChainPreview, onChainChange } = mount({ chain: chainOf("peaking") });
-      click(byText(host, "button", "Add effect"));
+      click(byText(host, "button", "+ effect"));
       enter(byText(host, "button", EFFECT_COPY.reverb?.title ?? ""));
 
       const heard = onChainPreview.mock.calls.at(-1)?.[0] as HfAudioFxChain;
@@ -1063,7 +1063,7 @@ describe("FxSection chain", () => {
         onLevel: vi.fn(),
         onAuditionLevel,
       });
-      click(byText(host, "button", "Add effect"));
+      click(byText(host, "button", "+ effect"));
       enter(byText(host, "button", "Even Out Levels"));
       expect(onAuditionLevel).toHaveBeenLastCalledWith(true);
       leave(host, ".hf-fx-add-menu");

package/src/components/editor/propertyPanelFxSection.tsx

@@ -14,6 +14,7 @@ import {
   type HfAudioFxParamValues,
 } from "@hyperframes/core/audio-fx";
 import { applyAudioFxPreset, getAudioFxPreset } from "@hyperframes/core/audio-fx-presets";
+import { applyPresetToChain } from "./useApplyAudioFxPreset.js";
 import {
   addAudioEq,
   audioEqIds,
@@ -31,7 +32,6 @@ import {
   trackNodeAdded,
   trackNodeMoved,
   trackNodeRemoved,
-  trackPresetApplied,
   trackPresetAuditioned,
   trackPresetAutomated,
   trackPresetRemoved,
@@ -138,23 +138,8 @@ export function FxSection({
 
   const applyPreset = useCallback(
     (id: string) => {
-      const preset = getAudioFxPreset(id);
-      if (!preset) return;
-      // Appends. Stacking a character preset onto an already-cleaned voice is a
-      // real thing to want, and replacing silently would throw work away — so
-      // the destructive option is a separate gesture, not the default one.
-      const next = applyAudioFxPreset(chain, preset);
-      // Re-applying replaces this preset's own nodes in place rather than
-      // appending a second copy, and the two are different decisions — worth
-      // telling apart in the numbers.
-      const reapply = chain.nodes.some((n) => n.fromPreset === preset.id);
-      trackPresetApplied(
-        preset.id,
-        preset.family,
-        preset.nodes.length,
-        reapply ? "reapply" : "append",
-        { trackKind },
-      );
+      const next = applyPresetToChain(chain, id, trackKind);
+      if (!next) return;
       // The audition WAS this, so there is nothing to put back — and putting the
       // old chain back over the write that just landed is a race the author
       // hears as the preset arriving and then leaving again.
@@ -162,7 +147,7 @@ export function FxSection({
       mutate(next.nodes);
       // Land on the first node the preset wrote, so the author can hear what
       // arrived and immediately see what it is made of.
-      setOpenNode(next.nodes.findIndex((n) => n.fromPreset === preset.id));
+      setOpenNode(next.nodes.findIndex((n) => n.fromPreset === id));
       setPicking(false);
     },
     [chain, mutate, clearAudition, trackKind],
@@ -511,10 +496,10 @@ export function FxSection({
           opened one and changed their mind had no way back: picking something
           was the only thing that set these false, so the only exits were adding
           an effect they did not want or deselecting the clip. */}
-      <div className="flex gap-1">
+      <div className="flex flex-col gap-1">
         <button
           type="button"
-          className="hf-fx-preset w-full rounded-[4px] border border-dashed border-panel-border-input py-1 text-[11px] text-panel-text-2 hover:text-panel-text-0 disabled:opacity-40"
+          className="hf-fx-preset w-full rounded-[4px] border border-panel-text-0 py-1.5 text-[11px] font-semibold text-panel-text-0 disabled:opacity-40"
           aria-expanded={picking}
           disabled={disabled}
           onClick={() => {
@@ -530,7 +515,7 @@ export function FxSection({
         </button>
         <button
           type="button"
-          className="hf-fx-add w-full rounded-[4px] border border-dashed border-panel-border-input py-1 text-[11px] text-panel-text-2 hover:text-panel-text-0 disabled:opacity-40"
+          className="hf-fx-add self-end px-1 text-[10px] text-panel-text-2 hover:text-panel-text-0 disabled:opacity-40"
           aria-expanded={adding}
           disabled={disabled}
           onClick={() => {
@@ -542,7 +527,7 @@ export function FxSection({
             setPicking(false);
           }}
         >
-          {adding ? "Close" : "Add effect"}
+          {adding ? "Close" : "+ effect"}
         </button>
       </div>
     </div>