@hyperframes/studio 0.6.107 → 0.6.108

package/src/components/editor/propertyPanelColorGradingSection.tsx

@@ -0,0 +1,355 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type RefObject,
+} from "react";
+import {
+  HF_COLOR_GRADING_ATTR,
+  HF_COLOR_GRADING_COLOR_SPACE,
+  isHfColorGradingActive,
+  normalizeHfColorGrading,
+  serializeHfColorGrading,
+  type HfColorGradingAdjustKey,
+  type HfColorGradingTarget,
+  type NormalizedHfColorGrading,
+} from "@hyperframes/core/color-grading";
+import { Compare, Palette, RotateCcw } from "../../icons/SystemIcons";
+import type { DomEditSelection } from "./domEditing";
+import { ColorGradingControls } from "./propertyPanelColorGradingControls";
+import { Section } from "./propertyPanelPrimitives";
+
+const DEFAULT_ADJUST: Record<HfColorGradingAdjustKey, number> = {
+  exposure: 0,
+  contrast: 0,
+  highlights: 0,
+  shadows: 0,
+  whites: 0,
+  blacks: 0,
+  temperature: 0,
+  tint: 0,
+  saturation: 0,
+};
+
+const DEFAULT_COLOR_GRADING: NormalizedHfColorGrading = {
+  enabled: true,
+  preset: "neutral",
+  intensity: 1,
+  adjust: DEFAULT_ADJUST,
+  lut: null,
+  colorSpace: HF_COLOR_GRADING_COLOR_SPACE,
+};
+
+const COLOR_GRADING_DATA_KEY = HF_COLOR_GRADING_ATTR.replace(/^data-/, "");
+
+interface RuntimeColorGradingStatus {
+  state: "missing" | "inactive" | "pending" | "active" | "unavailable";
+  message: string;
+}
+
+export function isColorGradingCapableElement(element: DomEditSelection): boolean {
+  return element.tagName === "video" || element.tagName === "img";
+}
+
+function readColorGradingFromElement(element: DomEditSelection): NormalizedHfColorGrading {
+  const grading =
+    normalizeHfColorGrading(element.dataAttributes[COLOR_GRADING_DATA_KEY]) ??
+    DEFAULT_COLOR_GRADING;
+  return { ...grading, intensity: 1 };
+}
+
+function toBridgeColorGrading(grading: NormalizedHfColorGrading): unknown {
+  if (!isHfColorGradingActive(grading)) return null;
+  const { enabled: _enabled, ...bridgeGrading } = grading;
+  return bridgeGrading;
+}
+
+function readRuntimeColorGradingStatus(
+  iframe: HTMLIFrameElement | null | undefined,
+  target: HfColorGradingTarget,
+): RuntimeColorGradingStatus {
+  try {
+    const win = iframe?.contentWindow as
+      | (Window & {
+          __hf?: {
+            colorGrading?: {
+              getStatus?: (
+                target: HfColorGradingTarget | string | null | undefined,
+              ) => RuntimeColorGradingStatus;
+            };
+          };
+        })
+      | null
+      | undefined;
+    const status = win?.__hf?.colorGrading?.getStatus?.(target);
+    return status ?? { state: "pending", message: "Waiting for runtime" };
+  } catch {
+    return { state: "unavailable", message: "Preview unavailable" };
+  }
+}
+
+function StatusPill({ status }: { status: RuntimeColorGradingStatus }) {
+  const dotClass =
+    status.state === "active"
+      ? "bg-emerald-400"
+      : status.state === "pending"
+        ? "bg-amber-300"
+        : status.state === "unavailable"
+          ? "bg-red-400"
+          : "bg-panel-text-5";
+  return (
+    <div className="flex min-w-0 items-center gap-1.5 rounded bg-panel-input px-2 py-1 text-[10px] font-medium text-panel-text-3">
+      <span className={`h-1.5 w-1.5 flex-shrink-0 rounded-full ${dotClass}`} />
+      <span className="truncate">{status.message}</span>
+    </div>
+  );
+}
+
+function HoldBeforeButton({
+  active,
+  disabled,
+  onHoldChange,
+}: {
+  active: boolean;
+  disabled: boolean;
+  onHoldChange: (holding: boolean) => void;
+}) {
+  const startHold = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    onHoldChange(true);
+    const release = () => {
+      onHoldChange(false);
+      window.removeEventListener("pointerup", release);
+      window.removeEventListener("pointercancel", release);
+      window.removeEventListener("blur", release);
+    };
+    window.addEventListener("pointerup", release);
+    window.addEventListener("pointercancel", release);
+    window.addEventListener("blur", release);
+  };
+  const stopHold = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    onHoldChange(false);
+  };
+
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      aria-pressed={active}
+      aria-label="Hold to show original"
+      onPointerDown={startHold}
+      onPointerUp={stopHold}
+      onPointerCancel={stopHold}
+      onBlur={() => {
+        if (active) onHoldChange(false);
+      }}
+      onKeyDown={(event) => {
+        if (disabled || (event.key !== " " && event.key !== "Enter")) return;
+        event.preventDefault();
+        if (!active) onHoldChange(true);
+      }}
+      onKeyUp={(event) => {
+        if (disabled || (event.key !== " " && event.key !== "Enter")) return;
+        event.preventDefault();
+        onHoldChange(false);
+      }}
+      className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded transition-colors ${
+        active
+          ? "bg-studio-accent text-black"
+          : "text-panel-text-4 hover:bg-panel-hover hover:text-panel-text-1"
+      } disabled:cursor-not-allowed disabled:opacity-40`}
+      title="Hold to show original"
+    >
+      <Compare size={13} />
+    </button>
+  );
+}
+
+export function ColorGradingSection({
+  element,
+  assets,
+  previewIframeRef,
+  onImportAssets,
+  onSetAttributeLive,
+}: {
+  element: DomEditSelection;
+  assets: string[];
+  previewIframeRef?: RefObject<HTMLIFrameElement | null>;
+  onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>;
+  onSetAttributeLive: (attr: string, value: string | null) => void | Promise<void>;
+}) {
+  const [grading, setGrading] = useState(() => readColorGradingFromElement(element));
+  const [compareEnabled, setCompareEnabled] = useState(false);
+  const [runtimeStatus, setRuntimeStatus] = useState<RuntimeColorGradingStatus>(() => ({
+    state: "pending",
+    message: "Waiting for runtime",
+  }));
+  const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingPersistValueRef = useRef<string | null | undefined>(undefined);
+  const onSetAttributeLiveRef = useRef(onSetAttributeLive);
+  const compareEnabledRef = useRef(compareEnabled);
+  onSetAttributeLiveRef.current = onSetAttributeLive;
+  compareEnabledRef.current = compareEnabled;
+  const target = useMemo(
+    (): HfColorGradingTarget => ({
+      id: element.id ?? null,
+      hfId: element.hfId ?? null,
+      selector: element.selector ?? null,
+      selectorIndex: element.selectorIndex ?? null,
+    }),
+    [element.hfId, element.id, element.selector, element.selectorIndex],
+  );
+
+  const refreshRuntimeStatus = useCallback(() => {
+    setRuntimeStatus(readRuntimeColorGradingStatus(previewIframeRef?.current, target));
+  }, [previewIframeRef, target]);
+
+  useEffect(() => {
+    refreshRuntimeStatus();
+  }, [refreshRuntimeStatus]);
+
+  useEffect(() => {
+    const iframe = previewIframeRef?.current;
+    if (!iframe) return;
+    const refresh = () => {
+      window.setTimeout(refreshRuntimeStatus, 50);
+    };
+    iframe.addEventListener("load", refresh);
+    const timer = window.setTimeout(refreshRuntimeStatus, 80);
+    return () => {
+      iframe.removeEventListener("load", refresh);
+      window.clearTimeout(timer);
+    };
+  }, [previewIframeRef, refreshRuntimeStatus]);
+
+  useEffect(() => {
+    return () => {
+      if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+      if (pendingPersistValueRef.current !== undefined) {
+        void onSetAttributeLiveRef.current(COLOR_GRADING_DATA_KEY, pendingPersistValueRef.current);
+        pendingPersistValueRef.current = undefined;
+      }
+    };
+  }, []);
+
+  const postColorGrading = useCallback(
+    (nextGrading: NormalizedHfColorGrading) => {
+      previewIframeRef?.current?.contentWindow?.postMessage(
+        {
+          source: "hf-parent",
+          type: "control",
+          action: "set-color-grading",
+          target,
+          grading: toBridgeColorGrading(nextGrading),
+        },
+        "*",
+      );
+    },
+    [previewIframeRef, target],
+  );
+
+  const postCompare = useCallback(
+    (enabled: boolean) => {
+      previewIframeRef?.current?.contentWindow?.postMessage(
+        {
+          source: "hf-parent",
+          type: "control",
+          action: "set-color-grading-compare",
+          target,
+          compare: {
+            enabled,
+            position: 1,
+            lineWidth: 0,
+          },
+        },
+        "*",
+      );
+    },
+    [previewIframeRef, target],
+  );
+
+  useEffect(
+    () => () => {
+      postCompare(false);
+    },
+    [postCompare],
+  );
+
+  const commitColorGrading = useCallback(
+    (nextGrading: NormalizedHfColorGrading) => {
+      setGrading(nextGrading);
+      setRuntimeStatus({ state: "pending", message: "Updating shader" });
+      postColorGrading(nextGrading);
+      const active = isHfColorGradingActive(nextGrading);
+      if (compareEnabledRef.current) {
+        postCompare(active);
+        if (!active) setCompareEnabled(false);
+      }
+      window.setTimeout(refreshRuntimeStatus, 50);
+      if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+      pendingPersistValueRef.current = isHfColorGradingActive(nextGrading)
+        ? serializeHfColorGrading(nextGrading)
+        : null;
+      persistTimerRef.current = setTimeout(() => {
+        const value = pendingPersistValueRef.current;
+        pendingPersistValueRef.current = undefined;
+        void onSetAttributeLive(COLOR_GRADING_DATA_KEY, value ?? null);
+      }, 350);
+    },
+    [onSetAttributeLive, postColorGrading, postCompare, refreshRuntimeStatus],
+  );
+
+  const commitCompare = useCallback(
+    (enabled: boolean) => {
+      const nextEnabled = enabled && isHfColorGradingActive(grading);
+      setCompareEnabled(nextEnabled);
+      if (nextEnabled) postColorGrading(grading);
+      postCompare(nextEnabled);
+      window.setTimeout(refreshRuntimeStatus, 50);
+    },
+    [grading, postColorGrading, postCompare, refreshRuntimeStatus],
+  );
+
+  return (
+    <Section
+      title="Color Grading"
+      icon={<Palette size={15} />}
+      accessory={
+        <div className="flex min-w-0 items-center gap-1.5">
+          <HoldBeforeButton
+            active={compareEnabled}
+            disabled={!isHfColorGradingActive(grading)}
+            onHoldChange={commitCompare}
+          />
+          <StatusPill status={runtimeStatus} />
+          <button
+            type="button"
+            onClick={(event) => {
+              event.stopPropagation();
+              commitColorGrading(DEFAULT_COLOR_GRADING);
+            }}
+            className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded text-panel-text-4 transition-colors hover:bg-panel-hover hover:text-panel-text-1"
+            title="Reset grading"
+          >
+            <RotateCcw size={12} />
+          </button>
+        </div>
+      }
+    >
+      <ColorGradingControls
+        grading={grading}
+        assets={assets}
+        onImportAssets={onImportAssets}
+        onCommitColorGrading={commitColorGrading}
+      />
+    </Section>
+  );
+}

package/src/components/editor/propertyPanelHelpers.ts

@@ -15,6 +15,7 @@ export interface PropertyPanelProps {
   onClearSelection: () => void;
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
+  onSetAttributeLive: (attr: string, value: string | null) => void | Promise<void>;
   onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
   onSetManualOffset: (element: DomEditSelection, next: { x: number; y: number }) => void;
   onSetManualSize: (element: DomEditSelection, next: { width: number; height: number }) => void;
@@ -24,7 +25,7 @@ export interface PropertyPanelProps {
   onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
   onRemoveTextField: (fieldKey: string) => void;
   onAskAgent: () => void;
-  onImportAssets?: (files: FileList) => Promise<string[]>;
+  onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>;
   fontAssets?: ImportedFontAsset[];
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
   previewIframeRef?: React.RefObject<HTMLIFrameElement | null>;

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -348,46 +348,41 @@ export function Section({
   defaultCollapsed?: boolean;
 }) {
   const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const collapseIcon = collapsed ? (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      className="flex-shrink-0 text-panel-text-5"
+    >
+      <path d="M6 2.5v7M2.5 6h7" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+    </svg>
+  ) : (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="currentColor"
+      className="flex-shrink-0 text-panel-text-5"
+    >
+      <path d="M2 3l3 4 3-4z" />
+    </svg>
+  );
 
   return (
     <section className="min-w-0 border-t border-panel-border">
-      <button
-        type="button"
-        onClick={() => setCollapsed((v) => !v)}
-        className="flex w-full items-center justify-between gap-2 px-4 py-2.5"
-      >
-        <h3 className="text-[12px] font-semibold text-panel-text-1">{title}</h3>
-        <div className="flex items-center gap-2">
-          {accessory}
-          {collapsed && (
-            <svg
-              width="12"
-              height="12"
-              viewBox="0 0 12 12"
-              fill="none"
-              className="flex-shrink-0 text-panel-text-5"
-            >
-              <path
-                d="M6 2.5v7M2.5 6h7"
-                stroke="currentColor"
-                strokeWidth="1.2"
-                strokeLinecap="round"
-              />
-            </svg>
-          )}
-          {!collapsed && (
-            <svg
-              width="10"
-              height="10"
-              viewBox="0 0 10 10"
-              fill="currentColor"
-              className="flex-shrink-0 text-panel-text-5"
-            >
-              <path d="M2 3l3 4 3-4z" />
-            </svg>
-          )}
-        </div>
-      </button>
+      <div className="flex w-full items-center gap-2 px-4 py-2.5">
+        <button
+          type="button"
+          onClick={() => setCollapsed((v) => !v)}
+          className="flex min-w-0 flex-1 items-center justify-between gap-2 text-left"
+        >
+          <h3 className="text-[12px] font-semibold text-panel-text-1">{title}</h3>
+          {collapseIcon}
+        </button>
+        {accessory && <div className="flex flex-shrink-0 items-center">{accessory}</div>}
+      </div>
       {!collapsed && <div className="px-4 pb-3">{children}</div>}
     </section>
   );

package/src/contexts/DomEditContext.tsx

@@ -14,6 +14,7 @@ export interface DomEditActionsValue extends Pick<
   | "clearDomSelection"
   | "handleDomStyleCommit"
   | "handleDomAttributeCommit"
+  | "handleDomAttributeLiveCommit"
   | "handleDomHtmlAttributeCommit"
   | "handleDomPathOffsetCommit"
   | "handleDomGroupPathOffsetCommit"
@@ -115,6 +116,7 @@ export function DomEditProvider({
     clearDomSelection,
     handleDomStyleCommit,
     handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
@@ -189,6 +191,7 @@ export function DomEditProvider({
       clearDomSelection,
       handleDomStyleCommit,
       handleDomAttributeCommit,
+      handleDomAttributeLiveCommit,
       handleDomHtmlAttributeCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
@@ -245,6 +248,7 @@ export function DomEditProvider({
       clearDomSelection,
       handleDomStyleCommit,
       handleDomAttributeCommit,
+      handleDomAttributeLiveCommit,
       handleDomHtmlAttributeCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,

package/src/contexts/PanelLayoutContext.tsx

@@ -22,6 +22,8 @@ export function PanelLayoutProvider({
     setRightCollapsed,
     rightPanelTab,
     setRightPanelTab,
+    rightInspectorPanes,
+    toggleRightInspectorPane,
     toggleLeftSidebar,
     handlePanelResizeStart,
     handlePanelResizeMove,
@@ -43,6 +45,8 @@ export function PanelLayoutProvider({
       setRightCollapsed,
       rightPanelTab,
       setRightPanelTab,
+      rightInspectorPanes,
+      toggleRightInspectorPane,
       toggleLeftSidebar,
       handlePanelResizeStart,
       handlePanelResizeMove,
@@ -58,6 +62,8 @@ export function PanelLayoutProvider({
       setRightCollapsed,
       rightPanelTab,
       setRightPanelTab,
+      rightInspectorPanes,
+      toggleRightInspectorPane,
       toggleLeftSidebar,
       handlePanelResizeStart,
       handlePanelResizeMove,

package/src/hooks/useDomEditCommits.ts

@@ -16,6 +16,9 @@ import { useDomGeometryCommits } from "./useDomGeometryCommits";
 import { useElementLifecycleOps } from "./useElementLifecycleOps";
 import { formatFieldsSuffix } from "./gsapScriptCommitHelpers";
 
+// Re-export so existing consumers keep their import path
+export { GSAP_CSS_FALLBACK_BLOCKED_MESSAGE } from "./useDomGeometryCommits";
+
 // ── Helpers ──
 
 function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
@@ -42,6 +45,8 @@ interface RecordEditInput {
   files: Record<string, { before: string; after: string }>;
 }
 
+export type { PersistDomEditOperations } from "./domEditCommitTypes";
+
 export interface UseDomEditCommitsParams {
   activeCompPath: string | null;
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
@@ -238,6 +243,7 @@ export function useDomEditCommits({
   const {
     handleDomStyleCommit,
     handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
     handleDomTextCommit,
     commitDomTextFields,
@@ -297,6 +303,7 @@ export function useDomEditCommits({
     resolveImportedFontAsset,
     handleDomStyleCommit,
     handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
     handleDomTextCommit,
     commitDomTextFields,

package/src/hooks/useDomEditSession.ts

@@ -203,6 +203,7 @@ export function useDomEditSession({
     resolveImportedFontAsset,
     handleDomStyleCommit,
     handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
     handleDomTextCommit,
     handleDomTextFieldStyleCommit,
@@ -265,8 +266,6 @@ export function useDomEditSession({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
   } = useDomEditWiring({
-    // Pre-existing prop-drilling clone (same param set forwarded to
-    // useDomEditWiring); surfaced by this PR's adjacent edits, not introduced.
     // fallow-ignore-next-line code-duplication
     projectId,
     activeCompPath,
@@ -374,6 +373,7 @@ export function useDomEditSession({
     clearDomSelection,
     handleDomStyleCommit,
     handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
     handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
     handleDomGroupPathOffsetCommit,