npm - @hyperframes/studio - Versions diffs - 0.5.0-alpha.6 → 0.5.0-alpha.8 - Mend

@hyperframes/studio 0.5.0-alpha.6 → 0.5.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/assets/index-C9f5eif8.js +105 -0
package/dist/index.html +1 -1
package/package.json +4 -4
package/src/App.tsx +64 -26
package/src/components/LintModal.tsx +3 -4
package/src/components/editor/domEditing.test.ts +37 -0
package/src/components/editor/domEditing.ts +4 -1
package/src/components/sidebar/AssetsTab.tsx +3 -4
package/src/player/components/EditModal.tsx +5 -20
package/src/player/components/Timeline.test.ts +84 -0
package/src/player/components/Timeline.tsx +197 -27
package/src/player/components/timelineZoom.test.ts +21 -0
package/src/player/components/timelineZoom.ts +11 -0
package/src/utils/clipboard.test.ts +88 -0
package/src/utils/clipboard.ts +57 -0
package/dist/assets/index-CDSQavT7.js +0 -105

package/dist/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-CDSQavT7.js"></script>
+    <script type="module" crossorigin src="/assets/index-C9f5eif8.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-0Zt0t13W.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.5.0-alpha.6",
+  "version": "0.5.0-alpha.8",
   "description": "",
   "repository": {
     "type": "git",
@@ -32,8 +32,8 @@
     "@phosphor-icons/react": "^2.1.10",
     "codemirror": "^6.0.1",
     "motion": "^12.38.0",
-    "@hyperframes/core": "0.5.0-alpha.6",
-    "@hyperframes/player": "0.5.0-alpha.6"
+    "@hyperframes/core": "0.5.0-alpha.8",
+    "@hyperframes/player": "0.5.0-alpha.8"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
@@ -47,7 +47,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.5.0-alpha.6"
+    "@hyperframes/producer": "0.5.0-alpha.8"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/App.tsx CHANGED Viewed

@@ -28,6 +28,7 @@ import { CaptionTimeline } from "./captions/components/CaptionTimeline";
 import { useCaptionStore } from "./captions/store";
 import { useCaptionSync } from "./captions/hooks/useCaptionSync";
 import { parseCaptionComposition } from "./captions/parser";
+import { copyTextToClipboard } from "./utils/clipboard";
 import {
   applyPatchByTarget,
   readAttributeByTarget,
@@ -166,6 +167,23 @@ function toRelativeProjectAssetPath(sourceFile: string, assetPath: string): stri
   return [...fromParts.map(() => ".."), ...targetParts].join("/") || assetPath;
 }
+function isAbsoluteFilePath(value: string): boolean {
+  return /^(?:\/|[A-Za-z]:[\\/]|\\\\)/.test(value);
+}
+function toProjectAbsolutePath(projectDir: string | null, sourceFile: string): string | undefined {
+  const trimmedSource = sourceFile.trim();
+  if (!trimmedSource) return undefined;
+  const normalizedSource = trimmedSource.replace(/\\/g, "/");
+  if (isAbsoluteFilePath(normalizedSource)) return normalizedSource;
+  const normalizedRoot = projectDir?.trim().replace(/\\/g, "/").replace(/\/+$/, "");
+  if (!normalizedRoot) return undefined;
+  return `${normalizedRoot}/${normalizedSource.replace(/^\.?\//, "")}`;
+}
 function ensureImportedFontFace(
   html: string,
   asset: ImportedFontAsset,
@@ -574,6 +592,7 @@ export function StudioApp() {
   });
   const [editingFile, setEditingFile] = useState<EditingFile | null>(null);
+  const [projectDir, setProjectDir] = useState<string | null>(null);
   const [activeCompPath, setActiveCompPath] = useState<string | null>(null);
   const [fileTree, setFileTree] = useState<string[]>([]);
   const [compIdToSrc, setCompIdToSrc] = useState<Map<string, string>>(new Map());
@@ -589,6 +608,7 @@ export function StudioApp() {
   const [rightCollapsed, setRightCollapsed] = useState(true);
   const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab>("renders");
   const [domEditSelection, setDomEditSelection] = useState<DomEditSelection | null>(null);
+  const [agentPromptTagSnippet, setAgentPromptTagSnippet] = useState<string | undefined>();
   const [copiedAgentPrompt, setCopiedAgentPrompt] = useState(false);
   const [agentModalOpen, setAgentModalOpen] = useState(false);
   const [previewIframe, setPreviewIframe] = useState<HTMLIFrameElement | null>(null);
@@ -1036,10 +1056,13 @@ export function StudioApp() {
     let cancelled = false;
     fetch(`/api/projects/${projectId}`)
       .then((r) => r.json())
-      .then((data: { files?: string[] }) => {
+      .then((data: { files?: string[]; dir?: string }) => {
         if (!cancelled && data.files) setFileTree(data.files);
+        if (!cancelled) setProjectDir(typeof data.dir === "string" ? data.dir : null);
       })
-      .catch(() => {});
+      .catch(() => {
+        if (!cancelled) setProjectDir(null);
+      });
     return () => {
       cancelled = true;
     };
@@ -1428,6 +1451,7 @@ export function StudioApp() {
   const applyDomSelection = useCallback(
     (selection: DomEditSelection | null, options?: { revealPanel?: boolean }) => {
       setDomEditSelection(selection);
+      setAgentPromptTagSnippet(undefined);
       setCopiedAgentPrompt(false);
       if (selection) {
         if (options?.revealPanel !== false) {
@@ -1490,6 +1514,34 @@ export function StudioApp() {
     [activeCompPath, compIdToSrc, fileTree, isMasterView, timelineElements],
   );
+  const preloadAgentPromptSnippet = useCallback(
+    async (selection: DomEditSelection) => {
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      const targetPath = selection.sourceFile || activeCompPath || "index.html";
+      try {
+        const response = await fetch(
+          `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
+        );
+        if (!response.ok) return;
+        const data = (await response.json()) as { content?: string };
+        const html = data.content;
+        const tagSnippet =
+          typeof html === "string" ? readTagSnippetByTarget(html, selection) : undefined;
+        setAgentPromptTagSnippet((current) => {
+          if (domEditSelectionRef.current !== selection) return current;
+          return tagSnippet;
+        });
+      } catch {
+        // Runtime outerHTML is still available as a synchronous copy fallback.
+      }
+    },
+    [activeCompPath],
+  );
   const resolveImportedFontAsset = useCallback(
     (fontFamilyValue: string): ImportedFontAsset | null => {
       const family = primaryFontFamilyValue(fontFamilyValue);
@@ -1892,43 +1944,29 @@ export function StudioApp() {
   const handleAskAgent = useCallback(() => {
     if (!domEditSelection) return;
+    setAgentPromptTagSnippet(undefined);
+    void preloadAgentPromptSnippet(domEditSelection);
     setAgentModalOpen(true);
-  }, [domEditSelection]);
+  }, [domEditSelection, preloadAgentPromptSnippet]);
   const handleAgentModalSubmit = useCallback(
     async (userInstruction: string) => {
       if (!domEditSelection) return;
-      const pid = projectIdRef.current;
-      if (!pid) return;
       const targetPath = domEditSelection.sourceFile || activeCompPath || "index.html";
-      const response = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`);
-      if (!response.ok) throw new Error(`Failed to read ${targetPath}`);
-      const data = (await response.json()) as { content?: string };
-      const html = data.content;
-      const tagSnippet =
-        typeof html === "string" ? readTagSnippetByTarget(html, domEditSelection) : undefined;
+      const tagSnippet = agentPromptTagSnippet ?? domEditSelection.element.outerHTML;
       const prompt = buildElementAgentPrompt({
         selection: domEditSelection,
         currentTime,
         tagSnippet,
         userInstruction,
+        sourceFilePath: toProjectAbsolutePath(projectDir, targetPath),
       });
-      try {
-        await navigator.clipboard.writeText(prompt);
-      } catch {
-        const textarea = document.createElement("textarea");
-        textarea.value = prompt;
-        textarea.setAttribute("readonly", "true");
-        textarea.style.position = "fixed";
-        textarea.style.opacity = "0";
-        document.body.appendChild(textarea);
-        textarea.select();
-        document.execCommand("copy");
-        document.body.removeChild(textarea);
+      const copied = await copyTextToClipboard(prompt);
+      if (!copied) {
+        showToast("Could not copy prompt to clipboard.", "error");
+        return;
       }
       setAgentModalOpen(false);
@@ -1936,7 +1974,7 @@ export function StudioApp() {
       setCopiedAgentPrompt(true);
       copiedAgentTimerRef.current = setTimeout(() => setCopiedAgentPrompt(false), 1600);
     },
-    [activeCompPath, currentTime, domEditSelection],
+    [activeCompPath, agentPromptTagSnippet, currentTime, domEditSelection, projectDir, showToast],
   );
   const handlePreviewIframeRef = useCallback(

package/src/components/LintModal.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { XIcon, WarningIcon, CheckCircleIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { copyTextToClipboard } from "../utils/clipboard";
 export interface LintFinding {
   severity: "error" | "warning";
@@ -30,12 +31,10 @@ export function LintModal({
       return line;
     });
     const text = `Fix these HyperFrames lint issues for project "${projectId}":\n\nProject path: ${window.location.href}\n\n${lines.join("\n\n")}`;
-    try {
-      await navigator.clipboard.writeText(text);
+    const copiedText = await copyTextToClipboard(text);
+    if (copiedText) {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // ignore
     }
   };

package/src/components/editor/domEditing.test.ts CHANGED Viewed

@@ -467,6 +467,43 @@ describe("patch builders and prompt builder", () => {
     expect(prompt).toContain("Do not modify other elements' data-* attributes or positioning.");
   });
+  it("uses an absolute source path in copied agent prompts when provided", () => {
+    const selection = {
+      element: {} as HTMLElement,
+      id: "editable-card",
+      selector: "#editable-card",
+      selectorIndex: undefined,
+      sourceFile: "index.html",
+      compositionPath: "index.html",
+      compositionSrc: undefined,
+      isCompositionHost: false,
+      label: "Drag me first",
+      tagName: "div",
+      boundingBox: { x: 108, y: 112, width: 380, height: 196 },
+      textContent: "Drag me first",
+      dataAttributes: {},
+      inlineStyles: {},
+      computedStyles: {},
+      textFields: [],
+      capabilities: {
+        canSelect: true,
+        canEditStyles: true,
+        canMove: true,
+        canResize: true,
+        canDetachFromLayout: false,
+      },
+    } satisfies DomEditSelection;
+    const prompt = buildElementAgentPrompt({
+      selection,
+      currentTime: 1.25,
+      sourceFilePath: "/tmp/hf-studio-project/index.html",
+    });
+    expect(prompt).toContain("Source file: /tmp/hf-studio-project/index.html");
+    expect(prompt).not.toContain("Source file: index.html");
+  });
   it("serializes child text fields back into HTML", () => {
     expect(
       serializeDomEditTextFields([

package/src/components/editor/domEditing.ts CHANGED Viewed

@@ -697,12 +697,15 @@ export function buildElementAgentPrompt({
   currentTime,
   tagSnippet,
   userInstruction,
+  sourceFilePath,
 }: {
   selection: DomEditSelection;
   currentTime: number;
   tagSnippet?: string;
   userInstruction?: string;
+  sourceFilePath?: string;
 }): string {
+  const displayedSourceFile = sourceFilePath?.trim() || selection.sourceFile;
   const lines = [
     "## HyperFrames element edit request v1",
     "Schema version: 1",
@@ -711,7 +714,7 @@ export function buildElementAgentPrompt({
     "",
     `Composition: ${selection.compositionPath}`,
     `Playback time: ${formatTime(currentTime)}`,
-    `Source file: ${selection.sourceFile}`,
+    `Source file: ${displayedSourceFile}`,
     `DOM id: ${selection.id ?? "(none)"}`,
     `Selector: ${selection.selector ?? "(none)"}`,
     `Selector index: ${selection.selectorIndex ?? 0}`,

package/src/components/sidebar/AssetsTab.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import { memo, useState, useCallback, useRef } from "react";
 import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
 import { MEDIA_EXT, IMAGE_EXT, VIDEO_EXT, AUDIO_EXT } from "../../utils/mediaTypes";
 import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
+import { copyTextToClipboard } from "../../utils/clipboard";
 interface AssetsTabProps {
   projectId: string;
@@ -298,12 +299,10 @@ export const AssetsTab = memo(function AssetsTab({
   );
   const handleCopyPath = useCallback(async (path: string) => {
-    try {
-      await navigator.clipboard.writeText(path);
+    const copied = await copyTextToClipboard(path);
+    if (copied) {
       setCopiedPath(path);
       setTimeout(() => setCopiedPath(null), 1500);
-    } catch {
-      // ignore
     }
   }, []);

package/src/player/components/EditModal.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import { useMountEffect } from "../../hooks/useMountEffect";
 import { usePlayerStore } from "../store/playerStore";
 import { formatTime } from "../lib/time";
 import { buildPromptCopyText, buildTimelineAgentPrompt } from "./timelineEditing";
+import { copyTextToClipboard } from "../../utils/clipboard";
 interface EditPopoverProps {
   rangeStart: number;
@@ -62,16 +63,8 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
   }, [start, end, elementsInRange, prompt]);
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(buildClipboardText());
-    } catch {
-      const ta = document.createElement("textarea");
-      ta.value = buildClipboardText();
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand("copy");
-      document.body.removeChild(ta);
-    }
+    const copied = await copyTextToClipboard(buildClipboardText());
+    if (!copied) return;
     setCopiedAgentPrompt(true);
     setTimeout(() => {
       setCopiedAgentPrompt(false);
@@ -82,16 +75,8 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
   const handleCopyPrompt = useCallback(async () => {
     const promptText = buildPromptCopyText(prompt);
     if (!promptText) return;
-    try {
-      await navigator.clipboard.writeText(promptText);
-    } catch {
-      const ta = document.createElement("textarea");
-      ta.value = promptText;
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand("copy");
-      document.body.removeChild(ta);
-    }
+    const copied = await copyTextToClipboard(promptText);
+    if (!copied) return;
     setCopiedPromptOnly(true);
     setTimeout(() => {
       setCopiedPromptOnly(false);

package/src/player/components/Timeline.test.ts CHANGED Viewed

@@ -1,11 +1,14 @@
 import { describe, it, expect } from "vitest";
 import {
+  formatTimelineTickLabel,
   generateTicks,
   getDefaultDroppedTrack,
   getTimelineCanvasHeight,
   resolveTimelineAssetDrop,
   getTimelinePlayheadLeft,
+  getTimelineScrollLeftForZoomAnchor,
   getTimelineScrollLeftForZoomTransition,
+  shouldShowTimelineShortcutHint,
   shouldHandleTimelineDeleteKey,
   shouldAutoScrollTimeline,
 } from "./Timeline";
@@ -78,6 +81,20 @@ describe("generateTicks", () => {
       expect(major[0]).toBe(0);
     }
   });
+  it("uses denser major labels as timeline zoom increases", () => {
+    const fitTicks = generateTicks(180, 10);
+    const zoomedTicks = generateTicks(180, 48);
+    expect(fitTicks.major[1] - fitTicks.major[0]).toBe(15);
+    expect(zoomedTicks.major[1] - zoomedTicks.major[0]).toBe(5);
+    expect(zoomedTicks.minor).toContain(1);
+    expect(zoomedTicks.minor).toContain(4);
+  });
+  it("keeps labels readable instead of placing one at every tiny tick", () => {
+    const { major } = generateTicks(180, 80);
+    expect(major[1] - major[0]).toBe(2);
+  });
 });
 describe("formatTime", () => {
@@ -118,6 +135,20 @@ describe("formatTime", () => {
   });
 });
+describe("formatTimelineTickLabel", () => {
+  it("uses minute-second labels for normal timeline intervals", () => {
+    expect(formatTimelineTickLabel(90, 180, 5)).toBe("1:30");
+  });
+  it("uses hour labels for long timelines", () => {
+    expect(formatTimelineTickLabel(3661, 4000, 60)).toBe("1:01:01");
+  });
+  it("shows subsecond labels when the major ruler interval is below one second", () => {
+    expect(formatTimelineTickLabel(1.5, 3, 0.5)).toBe("0:01.5");
+  });
+});
 describe("shouldAutoScrollTimeline", () => {
   it("never auto-scrolls in fit mode", () => {
     expect(shouldAutoScrollTimeline("fit", 1200, 800)).toBe(false);
@@ -144,6 +175,48 @@ describe("getTimelineScrollLeftForZoomTransition", () => {
     expect(getTimelineScrollLeftForZoomTransition("manual", "manual", 480)).toBe(480);
   });
 });
+describe("getTimelineScrollLeftForZoomAnchor", () => {
+  it("preserves the time under the pointer when zooming in", () => {
+    expect(
+      getTimelineScrollLeftForZoomAnchor({
+        pointerX: 300,
+        currentScrollLeft: 200,
+        gutter: 32,
+        currentPixelsPerSecond: 10,
+        nextPixelsPerSecond: 20,
+        duration: 120,
+      }),
+    ).toBe(668);
+  });
+  it("clamps negative scroll targets", () => {
+    expect(
+      getTimelineScrollLeftForZoomAnchor({
+        pointerX: 300,
+        currentScrollLeft: 0,
+        gutter: 32,
+        currentPixelsPerSecond: 20,
+        nextPixelsPerSecond: 5,
+        duration: 120,
+      }),
+    ).toBe(0);
+  });
+  it("preserves current scroll when inputs are invalid", () => {
+    expect(
+      getTimelineScrollLeftForZoomAnchor({
+        pointerX: 300,
+        currentScrollLeft: 120,
+        gutter: 32,
+        currentPixelsPerSecond: 0,
+        nextPixelsPerSecond: 20,
+        duration: 120,
+      }),
+    ).toBe(120);
+  });
+});
 describe("getTimelinePlayheadLeft", () => {
   it("converts time to a pixel offset from the gutter", () => {
     expect(getTimelinePlayheadLeft(4, 20)).toBe(112);
@@ -165,6 +238,17 @@ describe("getTimelineCanvasHeight", () => {
   });
 });
+describe("shouldShowTimelineShortcutHint", () => {
+  it("shows the hint when the timeline does not vertically overflow", () => {
+    expect(shouldShowTimelineShortcutHint(220, 220)).toBe(true);
+    expect(shouldShowTimelineShortcutHint(220.5, 220)).toBe(true);
+  });
+  it("hides the hint when timeline tracks need vertical scrolling", () => {
+    expect(shouldShowTimelineShortcutHint(221.5, 220)).toBe(false);
+  });
+});
 describe("shouldHandleTimelineDeleteKey", () => {
   it("handles Delete and Backspace when focus is not in an editor", () => {
     expect(shouldHandleTimelineDeleteKey({ key: "Delete" })).toBe(true);