@hyperframes/studio 0.7.36 → 0.7.38

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -1,15 +1,19 @@
-import { useState } from "react";
-import { Check, ClipboardList, Film, Music } from "../../icons/SystemIcons";
+import { useEffect, useState } from "react";
+import { Check, ClipboardList, Film, Music, Scissors } from "../../icons/SystemIcons";
 import type { DomEditSelection } from "./domEditing";
 import {
+  type BackgroundRemovalProgress,
+  type BackgroundRemovalResult,
   formatNumericValue,
   formatTimingValue,
   LABEL,
   parseNumericValue,
   RESPONSIVE_GRID,
+  stripQueryAndHash,
 } from "./propertyPanelHelpers";
 import { Section, SegmentedControl, SelectField, SliderControl } from "./propertyPanelPrimitives";
 
+// fallow-ignore-next-line complexity
 export function MediaSection({
   projectDir,
   element,
@@ -17,6 +21,7 @@ export function MediaSection({
   onSetStyle,
   onSetAttribute,
   onSetHtmlAttribute,
+  onRemoveBackground,
 }: {
   projectDir: string | null;
   element: DomEditSelection;
@@ -24,8 +29,19 @@ export function MediaSection({
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
   onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
+  onRemoveBackground?: (
+    inputPath: string,
+    options: {
+      createBackgroundPlate?: boolean;
+      quality?: "fast" | "balanced" | "best";
+      onProgress?: (progress: BackgroundRemovalProgress) => void;
+    },
+  ) => Promise<BackgroundRemovalResult>;
 }) {
   const isVideo = element.tagName === "video";
+  const isAudio = element.tagName === "audio";
+  const isImage = element.tagName === "img";
+  const isVisualMedia = isVideo || isImage;
   const el = element.element;
 
   const volume = parseNumericValue(element.dataAttributes.volume ?? "") ?? 1;
@@ -53,15 +69,64 @@ export function MediaSection({
 
   const srcAttr = el.getAttribute("src") ?? "";
   const [copied, setCopied] = useState(false);
+  const [removeBusy, setRemoveBusy] = useState(false);
+  const [removeProgress, setRemoveProgress] = useState<BackgroundRemovalProgress | null>(null);
+  const [createPlate, setCreatePlate] = useState(false);
+  const [quality, setQuality] = useState<"fast" | "balanced" | "best">("balanced");
 
   const absoluteSrc =
     projectDir && srcAttr && !srcAttr.startsWith("http") ? `${projectDir}/${srcAttr}` : srcAttr;
+  const projectSrc =
+    srcAttr && !/^(?:https?:|data:|blob:)/i.test(srcAttr)
+      ? stripQueryAndHash(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr)
+      : "";
+  const canRemoveBackground = Boolean(onRemoveBackground && isVisualMedia && projectSrc);
+  const panelTitle = isImage ? "Image" : isVideo ? "Video" : "Audio";
+
+  useEffect(() => {
+    setRemoveProgress(null);
+    setCreatePlate(false);
+  }, [srcAttr]);
+
+  const applyCutoutResult = async (result: BackgroundRemovalResult) => {
+    await onSetHtmlAttribute("src", result.outputPath);
+    if (isVideo) {
+      await onSetAttribute("has-audio", "");
+      await onSetHtmlAttribute("muted", "true");
+    }
+  };
+
+  const runBackgroundRemoval = async () => {
+    if (!onRemoveBackground || !projectSrc || removeBusy) return;
+    setRemoveBusy(true);
+    setRemoveProgress({ status: "processing", progress: 0, stage: "Preparing" });
+    try {
+      const result = await onRemoveBackground(projectSrc, {
+        createBackgroundPlate: isVideo && createPlate,
+        quality,
+        onProgress: setRemoveProgress,
+      });
+      await applyCutoutResult(result);
+      setRemoveProgress({
+        status: "complete",
+        progress: 100,
+        stage: "Applied cutout",
+        ...result,
+      });
+    } catch (error) {
+      setRemoveProgress({
+        status: "failed",
+        progress: 0,
+        stage: "Failed",
+        error: error instanceof Error ? error.message : String(error),
+      });
+    } finally {
+      setRemoveBusy(false);
+    }
+  };
 
   return (
-    <Section
-      title={isVideo ? "Video" : "Audio"}
-      icon={isVideo ? <Film size={15} /> : <Music size={15} />}
-    >
+    <Section title={panelTitle} icon={isAudio ? <Music size={15} /> : <Film size={15} />}>
       <div className="space-y-4">
         {srcAttr && (
           <div className="min-w-0">
@@ -90,103 +155,192 @@ export function MediaSection({
           </div>
         )}
 
-        <div className="grid min-w-0 gap-1.5">
-          <span className={LABEL}>Volume</span>
-          <SliderControl
-            value={volumePercent}
-            min={0}
-            max={100}
-            step={1}
-            displayValue={`${volumePercent}%`}
-            formatDisplayValue={(next) => `${Math.round(next)}%`}
-            onCommit={(next) => {
-              void onSetAttribute("volume", formatNumericValue(next / 100));
-            }}
-          />
-        </div>
-
-        <div className="grid min-w-0 gap-1.5">
-          <span className={LABEL}>Playback rate</span>
-          <SliderControl
-            value={playbackRate * 100}
-            min={25}
-            max={300}
-            step={5}
-            displayValue={`${formatNumericValue(playbackRate)}x`}
-            formatDisplayValue={(next) => `${formatNumericValue(next / 100)}x`}
-            onCommit={(next) => {
-              void onSetAttribute("playback-rate", formatNumericValue(next / 100));
-            }}
-          />
-        </div>
-
-        <div className="grid min-w-0 gap-1.5">
-          <span className={LABEL}>Media start</span>
-          <SliderControl
-            value={Math.round(mediaStart * 100)}
-            min={0}
-            max={mediaStartMax * 100}
-            step={10}
-            displayValue={formatTimingValue(mediaStart)}
-            formatDisplayValue={(next) => formatTimingValue(next / 100)}
-            onCommit={(next) => {
-              void onSetAttribute("media-start", (next / 100).toFixed(2));
-            }}
-          />
-        </div>
-
-        <div className={RESPONSIVE_GRID}>
-          <div className="grid min-w-0 gap-1.5">
-            <span className={LABEL}>Loop</span>
-            <SegmentedControl
-              value={hasLoop ? "on" : "off"}
-              onChange={(next) => {
-                void onSetHtmlAttribute("loop", next === "on" ? "true" : null);
-              }}
-              options={[
-                { label: "On", value: "on" },
-                { label: "Off", value: "off" },
-              ]}
-            />
-          </div>
-          <div className="grid min-w-0 gap-1.5">
-            <span className={LABEL}>Muted</span>
-            <SegmentedControl
-              value={hasMuted ? "on" : "off"}
-              onChange={(next) => {
-                void onSetHtmlAttribute("muted", next === "on" ? "true" : null);
-              }}
-              options={[
-                { label: "On", value: "on" },
-                { label: "Off", value: "off" },
-              ]}
-            />
-          </div>
-        </div>
-
-        {isVideo && (
-          <div className="grid min-w-0 gap-1.5">
-            <span className={LABEL}>Has audio track</span>
-            <SegmentedControl
-              value={hasAudio ? "yes" : "no"}
-              onChange={(next) => {
-                if (next === "yes") {
-                  void onSetAttribute("has-audio", "true");
-                  void onSetHtmlAttribute("muted", null);
-                } else {
-                  void onSetAttribute("has-audio", "");
-                  void onSetHtmlAttribute("muted", "true");
+        {isVisualMedia && (
+          <div className="grid min-w-0 max-w-full gap-2 overflow-hidden rounded-md bg-panel-input/30 p-2">
+            <div className="flex min-w-0 items-center justify-between gap-2">
+              <div className="min-w-0">
+                <div className={LABEL}>Cutout</div>
+                <div className="mt-0.5 truncate text-[10px] text-panel-text-4">
+                  Create transparent {isVideo ? "WebM video" : "PNG image"}
+                </div>
+              </div>
+              <button
+                type="button"
+                disabled={!canRemoveBackground || removeBusy}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  void runBackgroundRemoval();
+                }}
+                className="flex h-8 flex-shrink-0 items-center gap-1.5 rounded-md bg-panel-input px-2.5 text-[11px] font-medium text-panel-text-2 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-50"
+                title={
+                  canRemoveBackground
+                    ? "Remove background and save a transparent asset"
+                    : "Select a project-local image or video asset"
                 }
-              }}
-              options={[
-                { label: "Yes", value: "yes" },
-                { label: "No", value: "no" },
-              ]}
-            />
+              >
+                <Scissors size={13} />
+                <span>{removeBusy ? "Working" : "Remove BG"}</span>
+              </button>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2">
+              <SelectField
+                label="Quality"
+                value={quality}
+                onChange={(next) => setQuality(next as typeof quality)}
+                options={["fast", "balanced", "best"]}
+              />
+              {isVideo ? (
+                <div className="grid min-w-0 gap-1.5">
+                  <span className={LABEL}>BG plate</span>
+                  <SegmentedControl
+                    value={createPlate ? "on" : "off"}
+                    onChange={(next) => setCreatePlate(next === "on")}
+                    options={[
+                      { label: "On", value: "on" },
+                      { label: "Off", value: "off" },
+                    ]}
+                  />
+                  <span className="text-[10px] leading-tight text-panel-text-4">
+                    Optional hole-cut background copy.
+                  </span>
+                </div>
+              ) : (
+                <div />
+              )}
+            </div>
+
+            {removeProgress && (
+              <div className="space-y-1">
+                <div className="flex min-w-0 items-center justify-between gap-2 text-[10px] text-panel-text-4">
+                  <span className="min-w-0 flex-1 truncate">
+                    {removeProgress.error ?? removeProgress.stage ?? "Processing"}
+                  </span>
+                  <span>{Math.round(removeProgress.progress)}%</span>
+                </div>
+                <div className="h-1 overflow-hidden rounded-full bg-panel-border">
+                  <div
+                    className={`h-full rounded-full ${
+                      removeProgress.status === "failed" ? "bg-red-400" : "bg-studio-accent"
+                    }`}
+                    style={{ width: `${Math.max(0, Math.min(100, removeProgress.progress))}%` }}
+                  />
+                </div>
+              </div>
+            )}
+
+            {removeProgress?.status === "complete" && removeProgress.outputPath && (
+              <div
+                className="truncate text-[10px] font-medium text-panel-text-3"
+                title={removeProgress.outputPath}
+              >
+                Applied {removeProgress.outputPath}
+              </div>
+            )}
           </div>
         )}
 
-        {isVideo && (
+        {(isVideo || isAudio) && (
+          <>
+            <div className="grid min-w-0 gap-1.5">
+              <span className={LABEL}>Volume</span>
+              <SliderControl
+                value={volumePercent}
+                min={0}
+                max={100}
+                step={1}
+                displayValue={`${volumePercent}%`}
+                formatDisplayValue={(next) => `${Math.round(next)}%`}
+                onCommit={(next) => {
+                  void onSetAttribute("volume", formatNumericValue(next / 100));
+                }}
+              />
+            </div>
+
+            <div className="grid min-w-0 gap-1.5">
+              <span className={LABEL}>Playback rate</span>
+              <SliderControl
+                value={playbackRate * 100}
+                min={25}
+                max={300}
+                step={5}
+                displayValue={`${formatNumericValue(playbackRate)}x`}
+                formatDisplayValue={(next) => `${formatNumericValue(next / 100)}x`}
+                onCommit={(next) => {
+                  void onSetAttribute("playback-rate", formatNumericValue(next / 100));
+                }}
+              />
+            </div>
+
+            <div className="grid min-w-0 gap-1.5">
+              <span className={LABEL}>Media start</span>
+              <SliderControl
+                value={Math.round(mediaStart * 100)}
+                min={0}
+                max={mediaStartMax * 100}
+                step={10}
+                displayValue={formatTimingValue(mediaStart)}
+                formatDisplayValue={(next) => formatTimingValue(next / 100)}
+                onCommit={(next) => {
+                  void onSetAttribute("media-start", (next / 100).toFixed(2));
+                }}
+              />
+            </div>
+
+            <div className={RESPONSIVE_GRID}>
+              <div className="grid min-w-0 gap-1.5">
+                <span className={LABEL}>Loop</span>
+                <SegmentedControl
+                  value={hasLoop ? "on" : "off"}
+                  onChange={(next) => {
+                    void onSetHtmlAttribute("loop", next === "on" ? "true" : null);
+                  }}
+                  options={[
+                    { label: "On", value: "on" },
+                    { label: "Off", value: "off" },
+                  ]}
+                />
+              </div>
+              <div className="grid min-w-0 gap-1.5">
+                <span className={LABEL}>Muted</span>
+                <SegmentedControl
+                  value={hasMuted ? "on" : "off"}
+                  onChange={(next) => {
+                    void onSetHtmlAttribute("muted", next === "on" ? "true" : null);
+                  }}
+                  options={[
+                    { label: "On", value: "on" },
+                    { label: "Off", value: "off" },
+                  ]}
+                />
+              </div>
+            </div>
+
+            {isVideo && (
+              <div className="grid min-w-0 gap-1.5">
+                <span className={LABEL}>Has audio track</span>
+                <SegmentedControl
+                  value={hasAudio ? "yes" : "no"}
+                  onChange={(next) => {
+                    if (next === "yes") {
+                      void onSetAttribute("has-audio", "true");
+                      void onSetHtmlAttribute("muted", null);
+                    } else {
+                      void onSetAttribute("has-audio", "");
+                      void onSetHtmlAttribute("muted", "true");
+                    }
+                  }}
+                  options={[
+                    { label: "Yes", value: "yes" },
+                    { label: "No", value: "no" },
+                  ]}
+                />
+              </div>
+            )}
+          </>
+        )}
+
+        {isVisualMedia && (
           <>
             <div className={RESPONSIVE_GRID}>
               <SelectField

package/src/components/editor/propertyPanelTypes.ts

@@ -0,0 +1,111 @@
+import type { RefObject } from "react";
+import type { ArcPathSegment, GsapAnimation } from "@hyperframes/parsers/gsap-parser";
+import type { DomEditSelection } from "./domEditing";
+import type { ImportedFontAsset } from "./fontAssets";
+
+export interface BackgroundRemovalProgress {
+  status: "processing" | "complete" | "failed";
+  progress: number;
+  stage?: string;
+  outputPath?: string;
+  backgroundOutputPath?: string;
+  error?: string;
+  provider?: string;
+}
+
+export interface BackgroundRemovalResult {
+  outputPath: string;
+  backgroundOutputPath?: string;
+  provider?: string;
+}
+
+export interface PropertyPanelProps {
+  projectId: string;
+  projectDir: string | null;
+  assets: string[];
+  element: DomEditSelection | null;
+  multiSelectCount?: number;
+  copiedAgentPrompt: boolean;
+  onClearSelection: () => void;
+  onUngroup?: () => 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>;
+  onApplyColorGradingScope?: (
+    scope: "source-file" | "project",
+    value: string | null,
+  ) => Promise<{ changedFiles: number; changedElements: number }>;
+  onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
+  onRemoveBackground?: (
+    inputPath: string,
+    options: {
+      createBackgroundPlate?: boolean;
+      quality?: "fast" | "balanced" | "best";
+      onProgress?: (progress: BackgroundRemovalProgress) => void;
+    },
+  ) => Promise<BackgroundRemovalResult>;
+  onSetManualOffset: (element: DomEditSelection, next: { x: number; y: number }) => void;
+  onSetManualSize: (element: DomEditSelection, next: { width: number; height: number }) => void;
+  onSetManualRotation: (element: DomEditSelection, next: { angle: number }) => void;
+  onSetText: (value: string, fieldKey?: string) => void;
+  onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
+  onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
+  onRemoveTextField: (fieldKey: string) => void;
+  onAskAgent: () => void;
+  onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>;
+  fontAssets?: ImportedFontAsset[];
+  onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
+  previewIframeRef?: RefObject<HTMLIFrameElement | null>;
+  gsapAnimations?: GsapAnimation[];
+  gsapMultipleTimelines?: boolean;
+  gsapUnsupportedTimelinePattern?: boolean;
+  onUpdateGsapProperty?: (animId: string, prop: string, value: number | string) => void;
+  onUpdateGsapMeta?: (
+    animId: string,
+    updates: { duration?: number; ease?: string; position?: number },
+  ) => void;
+  onDeleteGsapAnimation?: (animId: string) => void;
+  onAddGsapProperty?: (animId: string, prop: string) => void;
+  onRemoveGsapProperty?: (animId: string, prop: string) => void;
+  onUpdateGsapFromProperty?: (animId: string, prop: string, value: number | string) => void;
+  onAddGsapFromProperty?: (animId: string, prop: string) => void;
+  onRemoveGsapFromProperty?: (animId: string, prop: string) => void;
+  onAddGsapAnimation?: (method: "to" | "from" | "set" | "fromTo") => void;
+  onSetArcPath?: (
+    animId: string,
+    config: {
+      enabled: boolean;
+      autoRotate?: boolean | number;
+      segments?: ArcPathSegment[];
+    },
+  ) => void;
+  onUpdateArcSegment?: (
+    animId: string,
+    segmentIndex: number,
+    update: Partial<ArcPathSegment>,
+  ) => void;
+  onUnroll?: (animationId: string) => void;
+  onAddKeyframe?: (
+    animationId: string,
+    percentage: number,
+    property: string,
+    value: number | string,
+  ) => void;
+  onRemoveKeyframe?: (animationId: string, percentage: number) => void;
+  onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
+  onSetAllKeyframeEases?: (animationId: string, ease: string) => void;
+  onConvertToKeyframes?: (animationId: string, duration?: number) => void;
+  onCommitAnimatedProperty?: (
+    selection: DomEditSelection,
+    property: string,
+    value: number | string,
+  ) => Promise<void>;
+  onCommitAnimatedProperties?: (
+    selection: DomEditSelection,
+    props: Record<string, number | string>,
+  ) => Promise<void>;
+  onSeekToTime?: (time: number) => void;
+  recordingState?: "idle" | "recording" | "preview";
+  recordingDuration?: number;
+  onToggleRecording?: () => void;
+}

package/src/components/nle/CompositionBreadcrumb.tsx

@@ -33,8 +33,9 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
           });
           onNavigate(stack.length - 2);
         }}
-        className="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 transition-colors"
-        title="Back (Esc)"
+        className="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 active:scale-[0.98] transition-colors"
+        title="Back (Esc, or double-click empty timeline)"
+        aria-label="Back to parent composition"
       >
         <ArrowLeft size={12} weight="bold" />
       </button>