@hyperframes/studio 0.8.5 → 0.8.7

package/src/components/sidebar/PromptPreviewModal.tsx

@@ -0,0 +1,126 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useDialogBehavior } from "../ui/useDialogBehavior";
+
+export function PromptPreviewModal({
+  title,
+  prompt,
+  onClose,
+}: {
+  title: string;
+  prompt: string;
+  onClose: () => void;
+}) {
+  const [value, setValue] = useState(prompt);
+  const [copyState, setCopyState] = useState<"idle" | "copied" | "failed">("idle");
+  const [entered, setEntered] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  // Escape / focus trap / focus restore. A dirty draft vetoes Escape and
+  // backdrop close so a stray click can't discard edits (the X still closes).
+  const { requestClose } = useDialogBehavior({
+    open: true,
+    onClose,
+    containerRef,
+    canClose: () => valueRef.current === prompt,
+  });
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      setEntered(true);
+      textareaRef.current?.focus();
+    });
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(valueRef.current);
+      setCopyState("copied");
+    } catch {
+      setCopyState("failed");
+    }
+    setTimeout(() => setCopyState("idle"), 1500);
+  }, []);
+
+  return (
+    <div
+      className={`fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm transition-opacity duration-150 ease-out ${
+        entered ? "opacity-100" : "opacity-0"
+      }`}
+      onClick={requestClose}
+    >
+      <div
+        ref={containerRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={`Ask agent — ${title}`}
+        tabIndex={-1}
+        className="w-[560px] max-h-[80vh] flex flex-col rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl outline-none"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-5 py-4 border-b border-neutral-800/60">
+          <div>
+            <h3 className="text-sm font-medium text-neutral-200">Ask agent</h3>
+            <p className="text-xs text-neutral-500 mt-0.5">{title}</p>
+          </div>
+          <button
+            aria-label="Close"
+            className="p-1 rounded-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/50 active:scale-[0.95]"
+            onClick={onClose}
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              aria-hidden="true"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto px-5 py-4">
+          <p className="text-[11px] text-neutral-500 mb-2">
+            Edit the prompt below, then copy and paste into your AI agent
+          </p>
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void handleCopy();
+            }}
+            className="w-full min-h-[240px] text-[11px] text-neutral-200 leading-relaxed font-mono bg-neutral-900/60 rounded-lg p-3 border border-neutral-800 resize-y focus:outline-none focus:border-studio-accent/60 focus:ring-1 focus:ring-studio-accent/30"
+          />
+        </div>
+        <div className="flex items-center justify-between px-5 py-3 border-t border-neutral-800/60">
+          <span className="text-[11px] text-neutral-600">
+            {navigator.platform.includes("Mac") ? "⌘" : "Ctrl"}+Enter to copy
+          </span>
+          <button
+            className={`px-4 py-1.5 rounded-lg text-xs font-medium transition-colors active:scale-[0.97] ${
+              copyState === "copied"
+                ? "bg-emerald-500 text-white"
+                : copyState === "failed"
+                  ? "bg-red-500 text-white"
+                  : "bg-studio-accent/90 text-neutral-950 hover:bg-studio-accent"
+            }`}
+            onClick={handleCopy}
+          >
+            {copyState === "copied"
+              ? "Copied!"
+              : copyState === "failed"
+                ? "Copy failed"
+                : "Copy prompt"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/sidebar/assetHelpers.ts

@@ -24,6 +24,14 @@ export function basename(path: string): string {
   return dot > 0 ? name.slice(0, dot) : name;
 }
 
+/** Last path segment WITH its extension (basename() strips it). */
+export function filename(path: string): string {
+  return path.split("/").pop() ?? path;
+}
+
+/** Feedback shown on an asset row/card after a copy-path attempt. */
+export type CopyFeedback = { path: string; ok: boolean } | null;
+
 export function ext(path: string): string {
   const name = path.split("/").pop() ?? path;
   const dot = name.lastIndexOf(".");

package/src/contexts/TimelineEditContext.tsx

@@ -34,6 +34,11 @@ export function TimelineEditProvider({
       value.onMoveElements,
       value.onResizeElement,
       value.onToggleTrackHidden,
+      value.onSetAudioGroupAttributeLive,
+      value.onSetAudioGroupAttributeQuiet,
+      value.onGroupClips,
+      value.onSetElementAttributeLive,
+      value.onSetElementAttributeQuiet,
       value.onBlockedEditAttempt,
       value.onSplitElement,
       value.onRazorSplit,

package/src/hooks/timelineAudioGroupVolume.ts

@@ -0,0 +1,148 @@
+import { useCallback } from "react";
+import {
+  buildPatchTarget,
+  persistElementAttribute,
+  type RecordEditInput,
+} from "./timelineEditingHelpers";
+import type {
+  MutableRef,
+  UseTimelineElementVisibilityEditingInput,
+} from "./timelineTrackVisibility";
+
+/** Direct DOM write on the group element for the gesture in progress — no
+ *  file write, no history entry (mirrors FxParamRow's live/commit split). */
+function patchLiveGroupAttribute(
+  iframe: HTMLIFrameElement | null,
+  groupId: string,
+  attr: string,
+  value: string | null,
+): void {
+  const target = iframe?.contentDocument?.getElementById(groupId);
+  if (!target) return;
+  if (value === null) target.removeAttribute(attr);
+  else target.setAttribute(attr, value);
+}
+
+interface SetAudioGroupAttributeInput {
+  projectId: string;
+  activeCompPath: string | null;
+  groupId: string;
+  attr: string;
+  value: string | null;
+  label: string;
+  previewIframe: HTMLIFrameElement | null;
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  recordEdit: (input: RecordEditInput) => Promise<void>;
+  domEditSaveTimestampRef: MutableRef<number>;
+  pendingTimelineEditPathRef: MutableRef<Set<string>>;
+}
+
+/**
+ * Persist one attribute on the group element itself — e.g. the bus strip's
+ * volume slider writing `data-volume` on release. One undo entry; mirrors
+ * `createAudioGroupAndAssignMembers`'s save shape but for a single element
+ * and attribute rather than a member-assignment sweep.
+ */
+async function setAudioGroupAttribute({
+  projectId,
+  activeCompPath,
+  groupId,
+  attr,
+  value,
+  label,
+  previewIframe,
+  writeProjectFile,
+  recordEdit,
+  domEditSaveTimestampRef,
+  pendingTimelineEditPathRef,
+}: SetAudioGroupAttributeInput): Promise<string[]> {
+  const targetPath = activeCompPath || "index.html";
+  const patchTarget = buildPatchTarget({ domId: groupId });
+  if (!patchTarget) return [];
+
+  return persistElementAttribute({
+    projectId,
+    targetPath,
+    patchTarget,
+    attr,
+    value,
+    label,
+    writeProjectFile,
+    recordEdit,
+    domEditSaveTimestampRef,
+    pendingTimelineEditPathRef,
+    patchLive: (v) => patchLiveGroupAttribute(previewIframe, groupId, attr, v),
+    readLive: () =>
+      previewIframe?.contentDocument?.getElementById(groupId)?.getAttribute(attr) ?? null,
+  });
+}
+
+/**
+ * B7's bus strip: live-write the group's own attribute (`data-volume`, so
+ * far — B5's mute will reuse this too) while dragging, persist one undo entry
+ * on release. Unlike `useAudioGroupCarveAssignment`, this never touches
+ * member elements — the group id doubles as its own DOM id, so no selection
+ * or expanded-rows resolution is needed to find it.
+ */
+export function useSetAudioGroupAttribute({
+  projectIdRef,
+  activeCompPath,
+  showToast,
+  writeProjectFile,
+  recordEdit,
+  domEditSaveTimestampRef,
+  previewIframeRef,
+  pendingTimelineEditPathRef,
+  isRecordingRef,
+}: UseTimelineElementVisibilityEditingInput): {
+  setLive: (groupId: string, attr: string, value: string | null) => void;
+  setQuiet: (groupId: string, attr: string, value: string | null, label: string) => Promise<void>;
+} {
+  const setLive = useCallback(
+    (groupId: string, attr: string, value: string | null) => {
+      patchLiveGroupAttribute(previewIframeRef.current, groupId, attr, value);
+    },
+    [previewIframeRef],
+  );
+  const setQuiet = useCallback(
+    async (groupId: string, attr: string, value: string | null, label: string) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      try {
+        await setAudioGroupAttribute({
+          projectId: pid,
+          activeCompPath,
+          groupId,
+          attr,
+          value,
+          label,
+          previewIframe: previewIframeRef.current,
+          writeProjectFile,
+          recordEdit,
+          domEditSaveTimestampRef,
+          pendingTimelineEditPathRef,
+        });
+      } catch (error) {
+        console.error("[Timeline] Failed to set group attribute", error);
+        const message = error instanceof Error ? error.message : "Failed to update group";
+        showToast(message);
+      }
+    },
+    [
+      activeCompPath,
+      previewIframeRef,
+      writeProjectFile,
+      recordEdit,
+      domEditSaveTimestampRef,
+      pendingTimelineEditPathRef,
+      isRecordingRef,
+      showToast,
+      projectIdRef,
+    ],
+  );
+  return { setLive, setQuiet };
+}

package/src/hooks/timelineEditingHelpers.ts

@@ -1,5 +1,11 @@
 import { type TimelineElement, usePlayerStore } from "../player/store/playerStore";
-import { applyPatchByTarget, findTagByTarget, readAttributeByTarget } from "../utils/sourcePatcher";
+import {
+  applyPatchByTarget,
+  findTagByTarget,
+  readAttributeByTarget,
+  readTagSnippetByTarget,
+  type PatchOperation,
+} from "../utils/sourcePatcher";
 import {
   formatTimelineAttributeNumber,
   type TimelineStackingReorderIntent,
@@ -390,3 +396,74 @@ export async function persistTimelineBatchEdit(
 export { applyPatchByTarget, formatTimelineAttributeNumber };
 
 export { patchDocumentRootDuration } from "./timelineEditingGsap";
+
+export interface PersistElementAttributeInput {
+  projectId: string;
+  targetPath: string;
+  patchTarget: PatchTarget;
+  attr: string;
+  value: string | null;
+  label: string;
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  recordEdit: (input: RecordEditInput) => Promise<void>;
+  domEditSaveTimestampRef: { current: number };
+  pendingTimelineEditPathRef: { current: Set<string> };
+  /** Write the attribute directly on the live preview DOM node. */
+  patchLive: (value: string | null) => void;
+  /** Read the attribute's current value off the live preview DOM node. */
+  readLive: () => string | null;
+}
+
+/**
+ * One attribute, persisted to source and optimistically patched onto the
+ * live preview, with a revert on save failure. The shared core behind
+ * `setAudioGroupAttribute` (a group id addressed by its own DOM id) and
+ * `useSetElementAttribute` (an arbitrary timeline clip) — same shape, only
+ * how the live node is found and where the patch target resolves to differs,
+ * which is exactly what `patchLive`/`readLive`/`patchTarget` parameterize.
+ */
+export async function persistElementAttribute({
+  projectId,
+  targetPath,
+  patchTarget,
+  attr,
+  value,
+  label,
+  writeProjectFile,
+  recordEdit,
+  domEditSaveTimestampRef,
+  pendingTimelineEditPathRef,
+  patchLive,
+  readLive,
+}: PersistElementAttributeInput): Promise<string[]> {
+  const previousValue = readLive();
+  patchLive(value);
+
+  const before = await readFileContent(projectId, targetPath);
+  if (readTagSnippetByTarget(before, patchTarget) === undefined) {
+    throw new Error(`Unable to patch element in ${targetPath}`);
+  }
+  const operation: PatchOperation = { type: "attribute", property: attr, value };
+  const patched = applyPatchByTarget(before, patchTarget, operation);
+
+  pendingTimelineEditPathRef.current.add(targetPath);
+  domEditSaveTimestampRef.current = Date.now();
+  try {
+    const changedPaths = await saveProjectFilesWithHistory({
+      projectId,
+      label,
+      kind: "timeline",
+      files: { [targetPath]: patched },
+      readFile: async (path) => (path === targetPath ? before : readFileContent(projectId, path)),
+      writeFile: writeProjectFile,
+      recordEdit,
+    });
+    domEditSaveTimestampRef.current = Date.now();
+    return changedPaths;
+  } catch (error) {
+    // The optimistic live write already ran; unwind it on a save failure so
+    // the preview doesn't show a value that never reached disk.
+    patchLive(previousValue);
+    throw error;
+  }
+}

package/src/hooks/timelineElementFxAttribute.ts

@@ -0,0 +1,150 @@
+/**
+ * C1's clip-level FX write: persist one attribute directly on a specific
+ * timeline clip, addressed by the clip itself rather than the current
+ * selection — so applying a preset from the timeline FX popover doesn't
+ * depend on that clip already being selected in the property panel.
+ * Built on `persistElementAttribute` (`timelineEditingHelpers.ts`), the
+ * shared core `setAudioGroupAttribute` also uses.
+ */
+
+import { useCallback } from "react";
+import type { TimelineElement } from "../player";
+import {
+  buildPatchTarget,
+  findTimelineElementInIframe,
+  persistElementAttribute,
+} from "./timelineEditingHelpers";
+import type {
+  MutableRef,
+  UseTimelineElementVisibilityEditingInput,
+} from "./timelineTrackVisibility";
+
+function patchLiveElementAttribute(
+  iframe: HTMLIFrameElement | null,
+  element: TimelineElement,
+  attr: string,
+  value: string | null,
+  activeCompPath: string | null,
+): void {
+  const target = findTimelineElementInIframe(iframe, element, activeCompPath);
+  if (!target) return;
+  if (value === null) target.removeAttribute(attr);
+  else target.setAttribute(attr, value);
+}
+
+interface SetElementAttributeInput {
+  projectId: string;
+  activeCompPath: string | null;
+  element: TimelineElement;
+  attr: string;
+  value: string | null;
+  label: string;
+  previewIframe: HTMLIFrameElement | null;
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  recordEdit: Parameters<typeof persistElementAttribute>[0]["recordEdit"];
+  domEditSaveTimestampRef: MutableRef<number>;
+  pendingTimelineEditPathRef: MutableRef<Set<string>>;
+}
+
+async function setElementAttribute({
+  projectId,
+  activeCompPath,
+  element,
+  attr,
+  value,
+  label,
+  previewIframe,
+  writeProjectFile,
+  recordEdit,
+  domEditSaveTimestampRef,
+  pendingTimelineEditPathRef,
+}: SetElementAttributeInput): Promise<string[]> {
+  const targetPath = element.sourceFile || activeCompPath || "index.html";
+  const patchTarget = buildPatchTarget(element);
+  if (!patchTarget) return [];
+
+  return persistElementAttribute({
+    projectId,
+    targetPath,
+    patchTarget,
+    attr,
+    value,
+    label,
+    writeProjectFile,
+    recordEdit,
+    domEditSaveTimestampRef,
+    pendingTimelineEditPathRef,
+    patchLive: (v) => patchLiveElementAttribute(previewIframe, element, attr, v, activeCompPath),
+    readLive: () =>
+      findTimelineElementInIframe(previewIframe, element, activeCompPath)?.getAttribute(attr) ??
+      null,
+  });
+}
+
+export function useSetElementAttribute({
+  projectIdRef,
+  activeCompPath,
+  showToast,
+  writeProjectFile,
+  recordEdit,
+  domEditSaveTimestampRef,
+  previewIframeRef,
+  pendingTimelineEditPathRef,
+  isRecordingRef,
+}: UseTimelineElementVisibilityEditingInput): {
+  setLive: (element: TimelineElement, attr: string, value: string | null) => void;
+  setQuiet: (
+    element: TimelineElement,
+    attr: string,
+    value: string | null,
+    label: string,
+  ) => Promise<void>;
+} {
+  const setLive = useCallback(
+    (element: TimelineElement, attr: string, value: string | null) => {
+      patchLiveElementAttribute(previewIframeRef.current, element, attr, value, activeCompPath);
+    },
+    [previewIframeRef, activeCompPath],
+  );
+  const setQuiet = useCallback(
+    async (element: TimelineElement, attr: string, value: string | null, label: string) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      try {
+        await setElementAttribute({
+          projectId: pid,
+          activeCompPath,
+          element,
+          attr,
+          value,
+          label,
+          previewIframe: previewIframeRef.current,
+          writeProjectFile,
+          recordEdit,
+          domEditSaveTimestampRef,
+          pendingTimelineEditPathRef,
+        });
+      } catch (error) {
+        console.error("[Timeline] Failed to set element attribute", error);
+        const message = error instanceof Error ? error.message : "Failed to update effect";
+        showToast(message);
+      }
+    },
+    [
+      activeCompPath,
+      previewIframeRef,
+      writeProjectFile,
+      recordEdit,
+      domEditSaveTimestampRef,
+      pendingTimelineEditPathRef,
+      isRecordingRef,
+      showToast,
+      projectIdRef,
+    ],
+  );
+  return { setLive, setQuiet };
+}