@hyperframes/studio 0.7.71 → 0.7.73

package/src/components/editor/propertyPanelFlatOverlaysSection.tsx

@@ -0,0 +1,108 @@
+import { useState } from "react";
+import type { RegistryItem } from "@hyperframes/core/registry";
+import { useBlockCatalog } from "../../hooks/useBlockCatalog";
+import { Film, Plus } from "../../icons/SystemIcons";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+import type { DomEditSelection } from "./domEditing";
+import { FLAT_PREVIEW_GRID } from "./propertyPanelFlatPrimitives";
+import type { ElementTiming } from "./propertyPanelFlatTimingDerivation";
+
+export const MEDIA_TREATMENT_OVERLAY_TAG = "media-treatment-overlay";
+
+export function filterMediaTreatmentOverlays(items: readonly RegistryItem[]): RegistryItem[] {
+  return items.filter(
+    (item) =>
+      item.type === "hyperframes:block" &&
+      item.tags?.includes(MEDIA_TREATMENT_OVERLAY_TAG) === true,
+  );
+}
+
+export function deriveMediaOverlayPlacement(
+  element: Pick<DomEditSelection, "dataAttributes" | "sourceFile">,
+  timing: Pick<ElementTiming, "start" | "duration">,
+) {
+  const authoredTrack = Number.parseInt(element.dataAttributes["track-index"] ?? "", 10);
+  return {
+    start: timing.start,
+    ...(timing.duration > 0 ? { duration: timing.duration } : {}),
+    ...(Number.isFinite(authoredTrack) ? { track: authoredTrack + 1 } : {}),
+    compositionPath: element.sourceFile,
+  };
+}
+
+export function FlatOverlaysSection({
+  onAddOverlay,
+}: {
+  onAddOverlay: (name: string) => Promise<void>;
+}) {
+  const track = useTrackDesignInput();
+  const { blocks, loading, error } = useBlockCatalog();
+  const overlays = filterMediaTreatmentOverlays(blocks);
+  const [adding, setAdding] = useState<string | null>(null);
+  const [previewing, setPreviewing] = useState<string | null>(null);
+
+  if (loading) {
+    return <div className="py-4 text-center text-[10px] text-panel-text-4">Loading overlays…</div>;
+  }
+  if (error) {
+    return <div className="py-4 text-center text-[10px] text-red-300">{error}</div>;
+  }
+
+  const busy = adding !== null;
+  return (
+    <div data-flat-overlays="true" className={FLAT_PREVIEW_GRID}>
+      {overlays.map((overlay) => (
+        <button
+          key={overlay.name}
+          type="button"
+          data-flat-overlay={overlay.name}
+          aria-label={`Add ${overlay.title}`}
+          disabled={busy}
+          title={overlay.description}
+          onPointerEnter={() => setPreviewing(overlay.name)}
+          onPointerLeave={() => setPreviewing(null)}
+          onFocus={() => setPreviewing(overlay.name)}
+          onBlur={() => setPreviewing(null)}
+          onClick={() => {
+            track("button", `Add ${overlay.title}`);
+            setAdding(overlay.name);
+            void onAddOverlay(overlay.name).finally(() => setAdding(null));
+          }}
+          className="group min-w-0 overflow-hidden border border-panel-hairline bg-panel-bg-soft text-left transition-colors hover:border-panel-border-input hover:bg-panel-bg disabled:cursor-wait disabled:opacity-50"
+        >
+          <span className="relative flex aspect-video w-full items-center justify-center overflow-hidden bg-black/20">
+            {previewing === overlay.name && overlay.preview?.video ? (
+              <video
+                src={overlay.preview.video}
+                poster={overlay.preview.poster}
+                autoPlay
+                muted
+                loop
+                playsInline
+                className="block h-full w-full object-cover"
+              />
+            ) : overlay.preview?.poster ? (
+              <img
+                data-flat-overlay-preview={overlay.name}
+                src={overlay.preview.poster}
+                alt=""
+                draggable={false}
+                loading="lazy"
+                className="block h-full w-full object-cover"
+              />
+            ) : (
+              <Film size={15} className="text-panel-text-4" />
+            )}
+            <Plus
+              size={12}
+              className="absolute right-1.5 top-1.5 text-white opacity-70 drop-shadow group-hover:text-panel-accent group-hover:opacity-100"
+            />
+          </span>
+          <span className="block truncate px-2 py-1.5 text-[10px] text-panel-text-2">
+            {adding === overlay.name ? "Adding…" : overlay.title}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/editor/propertyPanelFlatPrimitives.tsx

@@ -8,6 +8,8 @@ import {
   type PropertyValueTier,
 } from "./propertyPanelValueTier";
 
+export const FLAT_PREVIEW_GRID = "grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-1";
+
 /* ------------------------------------------------------------------ */
 /*  FlatRow — single-column label/value property row                   */
 /* ------------------------------------------------------------------ */

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

@@ -0,0 +1,79 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { GradingNumberField } from "./propertyPanelGradingNumberField";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function changeInput(input: HTMLInputElement, value: string) {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  if (!setter) throw new Error("Expected the native input setter");
+  setter.call(input, value);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function renderField() {
+  const callbacks = {
+    onBegin: vi.fn(),
+    onPreview: vi.fn(),
+    onSettle: vi.fn(),
+    onCancel: vi.fn(),
+  };
+  const host = document.body.appendChild(document.createElement("div"));
+  const root = createRoot(host);
+  act(() =>
+    root.render(
+      <GradingNumberField label="Level" value={10} min={-100} max={100} {...callbacks} />,
+    ),
+  );
+  const input = host.querySelector("input");
+  if (!input) throw new Error("Expected a grading field");
+  return { root, input, callbacks };
+}
+
+describe("GradingNumberField", () => {
+  it("does not begin or settle an untouched focus and blur", () => {
+    const { root, input, callbacks } = renderField();
+    act(() => input.focus());
+    act(() => input.blur());
+
+    expect(callbacks.onBegin).not.toHaveBeenCalled();
+    expect(callbacks.onPreview).not.toHaveBeenCalled();
+    expect(callbacks.onSettle).not.toHaveBeenCalled();
+    expect(callbacks.onCancel).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("cancels a real edit that returns to its baseline", () => {
+    const { root, input, callbacks } = renderField();
+    act(() => input.focus());
+    act(() => changeInput(input, "25"));
+    act(() => changeInput(input, "10"));
+    act(() => input.blur());
+
+    expect(callbacks.onBegin).toHaveBeenCalledOnce();
+    expect(callbacks.onSettle).not.toHaveBeenCalled();
+    expect(callbacks.onCancel).toHaveBeenCalledOnce();
+    act(() => root.unmount());
+  });
+
+  it("previews valid text and settles once on Enter", () => {
+    const { root, input, callbacks } = renderField();
+    act(() => input.focus());
+    act(() => changeInput(input, "-25"));
+    act(() => {
+      input.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "Enter" }));
+    });
+
+    expect(callbacks.onBegin).toHaveBeenCalledOnce();
+    expect(callbacks.onPreview).toHaveBeenLastCalledWith(-25);
+    expect(callbacks.onSettle).toHaveBeenCalledOnce();
+    act(() => root.unmount());
+  });
+});

package/src/components/editor/propertyPanelGradingNumberField.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useRef, useState } from "react";
+import { clampNumber } from "../../utils/studioHelpers";
+
+export function GradingNumberField({
+  label,
+  ariaLabel = label,
+  value,
+  min,
+  max,
+  disabled,
+  formatValue = String,
+  labelClassName = "min-w-0",
+  labelTextClassName = "block",
+  inputClassName = "w-full",
+  onBegin,
+  onPreview,
+  onSettle,
+  onCancel,
+}: {
+  label: string;
+  ariaLabel?: string;
+  value: number;
+  min: number;
+  max: number;
+  disabled?: boolean;
+  formatValue?: (value: number) => string;
+  labelClassName?: string;
+  labelTextClassName?: string;
+  inputClassName?: string;
+  onBegin: () => void;
+  onPreview: (value: number) => void;
+  onSettle: () => void;
+  onCancel: () => void;
+}) {
+  const [draft, setDraft] = useState(() => formatValue(value));
+  const focusedRef = useRef(false);
+  const cancelBlurRef = useRef(false);
+  const baselineRef = useRef(value);
+  const dirtyRef = useRef(false);
+
+  useEffect(() => {
+    if (!focusedRef.current) setDraft(formatValue(value));
+  }, [formatValue, value]);
+
+  const settle = () => {
+    focusedRef.current = false;
+    if (cancelBlurRef.current) {
+      cancelBlurRef.current = false;
+      return;
+    }
+    const parsed = Number(draft);
+    if (draft.trim() === "" || !Number.isFinite(parsed)) {
+      setDraft(formatValue(value));
+      if (dirtyRef.current) onCancel();
+      dirtyRef.current = false;
+      return;
+    }
+    const next = clampNumber(parsed, min, max);
+    setDraft(formatValue(next));
+    if (!dirtyRef.current || Object.is(next, baselineRef.current)) {
+      if (dirtyRef.current) onCancel();
+      dirtyRef.current = false;
+      return;
+    }
+    onPreview(next);
+    onSettle();
+    dirtyRef.current = false;
+  };
+
+  return (
+    <label className={labelClassName}>
+      <span className={labelTextClassName}>{label}</span>
+      <input
+        type="text"
+        inputMode="decimal"
+        aria-label={ariaLabel}
+        value={draft}
+        disabled={disabled}
+        onFocus={() => {
+          focusedRef.current = true;
+          baselineRef.current = value;
+          dirtyRef.current = false;
+          setDraft(formatValue(value));
+        }}
+        onChange={(event) => {
+          const next = event.target.value;
+          setDraft(next);
+          if (next.trim() === "") return;
+          const parsed = Number(next);
+          if (!Number.isFinite(parsed)) return;
+          const clamped = clampNumber(parsed, min, max);
+          if (!Object.is(clamped, baselineRef.current) && !dirtyRef.current) {
+            dirtyRef.current = true;
+            onBegin();
+          }
+          if (dirtyRef.current) onPreview(clamped);
+        }}
+        onBlur={settle}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            cancelBlurRef.current = true;
+            focusedRef.current = false;
+            setDraft(formatValue(value));
+            if (dirtyRef.current) onCancel();
+            dirtyRef.current = false;
+            event.currentTarget.blur();
+          } else if (event.key === "Enter") {
+            event.currentTarget.blur();
+          }
+        }}
+        className={`border-b border-panel-border-input/50 bg-transparent py-0.5 text-right font-mono text-[9px] text-panel-text-2 outline-none focus:border-panel-accent disabled:opacity-40 ${inputClassName}`}
+      />
+    </label>
+  );
+}

package/src/components/editor/propertyPanelPresetPreview.ts

@@ -0,0 +1,36 @@
+import type { NormalizedHfColorGrading } from "@hyperframes/core/color-grading";
+import type { ColorGradingPreviewOptions } from "./useColorGradingController";
+
+export function presetPreviewHandlers({
+  id,
+  label,
+  resolve,
+  onPreview,
+  onCommit,
+  onTrack,
+}: {
+  id: string;
+  label: string;
+  resolve: () => NormalizedHfColorGrading;
+  onPreview: (
+    grading: NormalizedHfColorGrading | null,
+    options?: ColorGradingPreviewOptions,
+  ) => void;
+  onCommit: (grading: NormalizedHfColorGrading) => void;
+  onTrack: (label: string) => void;
+}) {
+  return {
+    title: `Preview ${label}`,
+    onPointerEnter: () =>
+      onPreview(resolve(), {
+        animatedPreview: { kind: "presets" as const, id },
+      }),
+    onPointerLeave: () => onPreview(null),
+    onFocus: () => onPreview(resolve()),
+    onBlur: () => onPreview(null),
+    onClick: () => {
+      onTrack(label);
+      onCommit(resolve());
+    },
+  };
+}

package/src/components/editor/propertyPanelTypes.ts

@@ -19,6 +19,18 @@ export interface BackgroundRemovalResult {
   provider?: string;
 }
 
+export interface MediaOverlayPlacement {
+  start: number;
+  duration?: number;
+  track?: number;
+  compositionPath?: string;
+}
+
+export type AddMediaOverlayHandler = (
+  blockName: string,
+  placement: MediaOverlayPlacement,
+) => Promise<void>;
+
 export interface PropertyPanelProps {
   projectId: string;
   projectDir: string | null;
@@ -69,6 +81,7 @@ export interface PropertyPanelProps {
   onAskAgent: () => void;
   onToggleElementHidden?: (elementKey: string, hidden: boolean) => void | Promise<void>;
   onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>;
+  onAddMediaOverlay?: AddMediaOverlayHandler;
   fontAssets?: ImportedFontAsset[];
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
   previewIframeRef?: RefObject<HTMLIFrameElement | null>;