npm - @hyperframes/studio - Versions diffs - 0.2.1 → 0.2.2-alpha.3 - Mend

@hyperframes/studio 0.2.1 → 0.2.2-alpha.3

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 (21) hide show

package/dist/assets/index-BT9D8I7B.css +1 -0
package/dist/assets/index-DA_l-VKo.js +93 -0
package/dist/index.html +2 -2
package/package.json +2 -2
package/src/App.tsx +213 -8
package/src/captions/components/CaptionAnimationPanel.tsx +269 -0
package/src/captions/components/CaptionOverlay.tsx +622 -0
package/src/captions/components/CaptionPropertyPanel.tsx +275 -0
package/src/captions/components/CaptionTimeline.tsx +187 -0
package/src/captions/components/shared.tsx +26 -0
package/src/captions/generator.test.ts +279 -0
package/src/captions/generator.ts +376 -0
package/src/captions/hooks/useCaptionSync.ts +168 -0
package/src/captions/index.ts +10 -0
package/src/captions/parser.test.ts +377 -0
package/src/captions/parser.ts +314 -0
package/src/captions/store.ts +272 -0
package/src/captions/types.ts +207 -0
package/src/components/nle/NLELayout.tsx +1 -1
package/dist/assets/index-Bkp9HQbo.css +0 -1
package/dist/assets/index-DfhSlTti.js +0 -93

package/dist/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-DfhSlTti.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Bkp9HQbo.css">
+    <script type="module" crossorigin src="/assets/index-DA_l-VKo.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BT9D8I7B.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.2.1",
+  "version": "0.2.2-alpha.3",
   "description": "",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     "@phosphor-icons/react": "^2.1.10",
     "codemirror": "^6.0.1",
     "motion": "^12.38.0",
-    "@hyperframes/core": "0.2.1"
+    "@hyperframes/core": "0.2.2-alpha.3"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

package/src/App.tsx CHANGED Viewed

@@ -12,6 +12,12 @@ import { LintModal } from "./components/LintModal";
 import type { LintFinding } from "./components/LintModal";
 import { MediaPreview } from "./components/MediaPreview";
 import { isMediaFile } from "./utils/mediaTypes";
+import { CaptionOverlay } from "./captions/components/CaptionOverlay";
+import { CaptionPropertyPanel } from "./captions/components/CaptionPropertyPanel";
+import { CaptionTimeline } from "./captions/components/CaptionTimeline";
+import { useCaptionStore } from "./captions/store";
+import { useCaptionSync } from "./captions/hooks/useCaptionSync";
+import { parseCaptionComposition } from "./captions/parser";
 interface EditingFile {
   path: string;
@@ -50,12 +56,134 @@ export function StudioApp() {
   const [fileTree, setFileTree] = useState<string[]>([]);
   const [compIdToSrc, setCompIdToSrc] = useState<Map<string, string>>(new Map());
   const renderQueue = useRenderQueue(projectId);
+  const captionEditMode = useCaptionStore((s) => s.isEditMode);
+  const captionHasSelection = useCaptionStore((s) => s.selectedSegmentIds.size > 0);
+  const captionSync = useCaptionSync(projectId);
   // Resizable and collapsible panel widths
   const [leftWidth, setLeftWidth] = useState(240);
   const [rightWidth, setRightWidth] = useState(400);
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   const [rightCollapsed, setRightCollapsed] = useState(true);
+  // Auto-enter caption edit mode when the iframe contains .caption-group elements.
+  // This is a subscription to external events (postMessage from runtime) — useEffect
+  // is appropriate here. The runtime fires "state"/"timeline" messages after all
+  // compositions load, which triggers caption detection.
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!projectId) return;
+    let activating = false;
+    const tryActivateCaptions = () => {
+      if (useCaptionStore.getState().isEditMode || activating) {
+        return;
+      }
+      const iframe = previewIframeRef.current;
+      let doc: Document | null = null;
+      let win: Window | null = null;
+      try {
+        doc = iframe?.contentDocument ?? null;
+        win = iframe?.contentWindow ?? null;
+      } catch {
+        return;
+      }
+      if (!doc || !win) return;
+      const groups = doc.querySelectorAll(".caption-group");
+      if (groups.length === 0) return;
+      // Find the captions composition source path.
+      // The runtime strips data-composition-src after loading, so also check
+      // data-composition-file (set by the bundler) and the compIdToSrc map.
+      let captionSrcPath: string | null = null;
+      // Strategy 1: data-composition-src or data-composition-file attributes
+      const compHosts = doc.querySelectorAll("[data-composition-src], [data-composition-file]");
+      for (const host of compHosts) {
+        const src =
+          host.getAttribute("data-composition-src") || host.getAttribute("data-composition-file");
+        if (src && src.includes("captions")) {
+          captionSrcPath = src;
+          break;
+        }
+      }
+      // Strategy 2: compIdToSrc map (built from raw index.html before runtime strips attrs)
+      if (!captionSrcPath) {
+        for (const [id, src] of compIdToSrc) {
+          if (id.includes("caption") || src.includes("caption")) {
+            captionSrcPath = src;
+            break;
+          }
+        }
+      }
+      // Strategy 3: activeCompPath if viewing captions directly
+      if (!captionSrcPath && activeCompPath?.includes("captions")) {
+        captionSrcPath = activeCompPath;
+      }
+      // Strategy 4: find composition element with "caption" in its ID
+      if (!captionSrcPath) {
+        const captionComp = doc.querySelector('[data-composition-id*="caption"]');
+        if (captionComp) {
+          const compId = captionComp.getAttribute("data-composition-id") || "";
+          captionSrcPath = compIdToSrc.get(compId) || null;
+        }
+      }
+      if (!captionSrcPath) return;
+      activating = true;
+      const srcPath = captionSrcPath;
+      fetch(`/api/projects/${projectId}/files/${encodeURIComponent(srcPath)}`)
+        .then((r) => r.json())
+        .then((data: { content?: string }) => {
+          if (!data.content || !doc || !win || useCaptionStore.getState().isEditMode) return;
+          const root = doc.querySelector("[data-composition-id]");
+          const w = parseInt(root?.getAttribute("data-width") ?? "1920", 10);
+          const h = parseInt(root?.getAttribute("data-height") ?? "1080", 10);
+          const dur = parseFloat(root?.getAttribute("data-duration") ?? "0");
+          const model = parseCaptionComposition(doc, win, data.content, w, h, dur);
+          if (!model) return;
+          const store = useCaptionStore.getState();
+          store.setModel(model);
+          store.setSourceFilePath(srcPath);
+          store.setEditMode(true);
+          captionSync.loadOverrides();
+        })
+        .catch(() => {})
+        .finally(() => {
+          activating = false;
+        });
+    };
+    // Listen for runtime messages that signal composition loading is complete
+    const handleMessage = (e: MessageEvent) => {
+      const data = e.data;
+      if (data?.source === "hf-preview" && (data?.type === "state" || data?.type === "timeline")) {
+        tryActivateCaptions();
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    // Try immediately in case compositions are already loaded
+    tryActivateCaptions();
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [activeCompPath, projectId, compIdToSrc, captionSync]);
+  // Auto-expand right panel when a caption word is selected
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (captionEditMode) {
+      setRightCollapsed(!captionHasSelection);
+    }
+  }, [captionHasSelection, captionEditMode]);
   const [globalDragOver, setGlobalDragOver] = useState(false);
   const [uploadToast, setUploadToast] = useState<string | null>(null);
   const [timelineVisible, setTimelineVisible] = useState(false);
@@ -159,12 +287,14 @@ export function StudioApp() {
     [compIdToSrc, activePreviewUrl],
   );
   const [lintModal, setLintModal] = useState<LintFinding[] | null>(null);
+  const [consoleErrors, setConsoleErrors] = useState<LintFinding[] | null>(null);
   const [linting, setLinting] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
   const refreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const projectIdRef = useRef(projectId);
   const previewIframeRef = useRef<HTMLIFrameElement | null>(null);
+  const consoleErrorsRef = useRef<LintFinding[]>([]);
   // Listen for external file changes (user editing HTML outside the editor).
   // In dev: use Vite HMR. In embedded/production: use SSE from /api/events.
@@ -673,7 +803,69 @@ export function StudioApp() {
             }}
             onIframeRef={(iframe) => {
               previewIframeRef.current = iframe;
+              consoleErrorsRef.current = [];
+              setConsoleErrors(null);
+              if (!iframe) return;
+              // Attach error capture after each iframe load (content resets on navigation)
+              const attachErrorCapture = () => {
+                try {
+                  const win = iframe.contentWindow as (Window & typeof globalThis) | null;
+                  if (!win) return;
+                  // Guard against double-patching
+                  if ((win as unknown as Record<string, unknown>).__hfErrorCapture) return;
+                  (win as unknown as Record<string, unknown>).__hfErrorCapture = true;
+                  const origError = win.console.error.bind(win.console);
+                  win.console.error = function (...args: unknown[]) {
+                    origError(...args);
+                    const text = args
+                      .map((a) => (a instanceof Error ? a.message : String(a)))
+                      .join(" ");
+                    if (text.includes("favicon")) return;
+                    consoleErrorsRef.current = [
+                      ...consoleErrorsRef.current,
+                      { severity: "error", message: text },
+                    ];
+                    setConsoleErrors([...consoleErrorsRef.current]);
+                  };
+                  win.addEventListener("error", (e: ErrorEvent) => {
+                    const text = e.message || String(e);
+                    consoleErrorsRef.current = [
+                      ...consoleErrorsRef.current,
+                      { severity: "error", message: text },
+                    ];
+                    setConsoleErrors([...consoleErrorsRef.current]);
+                  });
+                } catch {
+                  // cross-origin — can't attach
+                }
+              };
+              // Attach now (iframe may already be loaded) and on future loads
+              attachErrorCapture();
+              iframe.addEventListener("load", () => {
+                consoleErrorsRef.current = [];
+                setConsoleErrors(null);
+                attachErrorCapture();
+              });
             }}
+            previewOverlay={
+              captionEditMode ? <CaptionOverlay iframeRef={previewIframeRef} /> : undefined
+            }
+            timelineFooter={
+              captionEditMode ? (
+                <div
+                  className="border-t border-neutral-800/30 flex-shrink-0"
+                  style={{ height: 60 }}
+                >
+                  <div className="flex items-center gap-1.5 px-2 py-0.5">
+                    <span className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider">
+                      Captions
+                    </span>
+                  </div>
+                  <CaptionTimeline pixelsPerSecond={100} />
+                </div>
+              ) : undefined
+            }
             timelineVisible={timelineVisible}
             onToggleTimeline={() => setTimelineVisible((v) => !v)}
           />
@@ -693,14 +885,18 @@ export function StudioApp() {
               className="flex flex-col border-l border-neutral-800 bg-neutral-900 flex-shrink-0"
               style={{ width: rightWidth }}
             >
-              <RenderQueue
-                jobs={renderQueue.jobs}
-                projectId={projectId}
-                onDelete={renderQueue.deleteRender}
-                onClearCompleted={renderQueue.clearCompleted}
-                onStartRender={(format) => renderQueue.startRender(30, "standard", format)}
-                isRendering={renderQueue.isRendering}
-              />
+              {captionEditMode ? (
+                <CaptionPropertyPanel iframeRef={previewIframeRef} />
+              ) : (
+                <RenderQueue
+                  jobs={renderQueue.jobs}
+                  projectId={projectId}
+                  onDelete={renderQueue.deleteRender}
+                  onClearCompleted={renderQueue.clearCompleted}
+                  onStartRender={(format) => renderQueue.startRender(30, "standard", format)}
+                  isRendering={renderQueue.isRendering}
+                />
+              )}
             </div>
           </>
         )}
@@ -711,6 +907,15 @@ export function StudioApp() {
         <LintModal findings={lintModal} projectId={projectId} onClose={() => setLintModal(null)} />
       )}
+      {/* Console errors modal — auto-shows when composition has runtime errors */}
+      {consoleErrors !== null && consoleErrors.length > 0 && projectId && (
+        <LintModal
+          findings={consoleErrors}
+          projectId={projectId}
+          onClose={() => setConsoleErrors(null)}
+        />
+      )}
       {/* Global drag-drop overlay */}
       {globalDragOver && (
         <div className="absolute inset-0 z-[90] flex items-center justify-center bg-black/50 backdrop-blur-sm pointer-events-none">

package/src/captions/components/CaptionAnimationPanel.tsx ADDED Viewed

@@ -0,0 +1,269 @@
+import { memo, useCallback } from "react";
+import { useCaptionStore } from "../store";
+import type { CaptionAnimation } from "../types";
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const ENTRANCE_PRESETS = [
+  "none",
+  "fade",
+  "slide-up",
+  "slide-down",
+  "slide-left",
+  "slide-right",
+  "pop",
+  "slam",
+  "bounce",
+  "typewriter",
+  "blur-in",
+  "flip",
+  "drop",
+];
+const HIGHLIGHT_PRESETS = [
+  "none",
+  "color-change",
+  "scale-pop",
+  "glow-pulse",
+  "underline-sweep",
+  "background-fill",
+  "bounce",
+];
+const EXIT_PRESETS = [
+  "none",
+  "fade",
+  "slide-up",
+  "slide-down",
+  "slide-left",
+  "slide-right",
+  "scatter",
+  "drop",
+  "collapse",
+  "blur-out",
+  "shrink",
+];
+const EASE_PRESETS = [
+  "power1.out",
+  "power2.out",
+  "power3.out",
+  "power4.out",
+  "power1.in",
+  "power2.in",
+  "power3.in",
+  "power1.inOut",
+  "power2.inOut",
+  "back.out(1.7)",
+  "elastic.out(1,0.3)",
+  "bounce.out",
+];
+import { Section, Row, inputCls } from "./shared";
+// ---------------------------------------------------------------------------
+// Animation phase controls
+// ---------------------------------------------------------------------------
+interface AnimationPhaseProps {
+  label: string;
+  presets: string[];
+  animation: CaptionAnimation | null;
+  showIntensity?: boolean;
+  onChange: (update: Partial<CaptionAnimation>) => void;
+}
+function AnimationPhase({
+  label,
+  presets,
+  animation,
+  showIntensity,
+  onChange,
+}: AnimationPhaseProps) {
+  const preset = animation?.preset ?? "none";
+  const duration = animation?.duration ?? 0.2;
+  const ease = animation?.ease ?? "power2.out";
+  const stagger = animation?.stagger ?? 0;
+  const intensity = animation?.intensity ?? 1;
+  return (
+    <Section label={label}>
+      <Row label="Preset">
+        <select
+          value={preset}
+          onChange={(e) => onChange({ preset: e.target.value })}
+          className={inputCls}
+        >
+          {presets.map((p) => (
+            <option key={p} value={p}>
+              {p}
+            </option>
+          ))}
+        </select>
+      </Row>
+      <Row label="Duration">
+        <input
+          type="number"
+          value={duration}
+          step={0.05}
+          min={0}
+          max={2}
+          onChange={(e) => onChange({ duration: Number(e.target.value) })}
+          className={inputCls}
+        />
+      </Row>
+      <Row label="Ease">
+        <select
+          value={ease}
+          onChange={(e) => onChange({ ease: e.target.value })}
+          className={inputCls}
+        >
+          {EASE_PRESETS.map((e) => (
+            <option key={e} value={e}>
+              {e}
+            </option>
+          ))}
+        </select>
+      </Row>
+      <Row label="Stagger">
+        <input
+          type="number"
+          value={stagger}
+          step={0.02}
+          min={0}
+          max={0.5}
+          onChange={(e) => onChange({ stagger: Number(e.target.value) })}
+          className={inputCls}
+        />
+      </Row>
+      {showIntensity && (
+        <Row label="Intensity">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={1}
+              step={0.01}
+              value={intensity}
+              onChange={(e) => onChange({ intensity: Number(e.target.value) })}
+              className="flex-1 accent-studio-accent"
+            />
+            <span className="text-2xs text-neutral-400 font-mono w-8 text-right flex-shrink-0">
+              {intensity.toFixed(2)}
+            </span>
+          </div>
+        </Row>
+      )}
+    </Section>
+  );
+}
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+export const CaptionAnimationPanel = memo(function CaptionAnimationPanel() {
+  const model = useCaptionStore((s) => s.model);
+  const selectedGroupId = useCaptionStore((s) => s.selectedGroupId);
+  const selectedSegmentIds = useCaptionStore((s) => s.selectedSegmentIds);
+  const updateGroupAnimation = useCaptionStore((s) => s.updateGroupAnimation);
+  const applyAnimationToAll = useCaptionStore((s) => s.applyAnimationToAll);
+  // Resolve which group to edit
+  let resolvedGroupId: string | null = selectedGroupId;
+  if (!resolvedGroupId && model && selectedSegmentIds.size > 0) {
+    const firstSegmentId = [...selectedSegmentIds][0];
+    if (firstSegmentId) {
+      for (const [gid, group] of model.groups) {
+        if (group.segmentIds.includes(firstSegmentId)) {
+          resolvedGroupId = gid;
+          break;
+        }
+      }
+    }
+  }
+  const group = resolvedGroupId ? model?.groups.get(resolvedGroupId) : undefined;
+  const animation = group?.animation;
+  // All hooks must be called before any early return
+  const handleEntranceChange = useCallback(
+    (update: Partial<CaptionAnimation>) => {
+      if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "entrance", update);
+    },
+    [resolvedGroupId, updateGroupAnimation],
+  );
+  const handleHighlightChange = useCallback(
+    (update: Partial<CaptionAnimation>) => {
+      if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "highlight", update);
+    },
+    [resolvedGroupId, updateGroupAnimation],
+  );
+  const handleExitChange = useCallback(
+    (update: Partial<CaptionAnimation>) => {
+      if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "exit", update);
+    },
+    [resolvedGroupId, updateGroupAnimation],
+  );
+  const handleApplyToAll = useCallback(() => {
+    if (animation) applyAnimationToAll(animation);
+  }, [animation, applyAnimationToAll]);
+  // Empty state — after all hooks
+  if (!group || !resolvedGroupId || !animation) {
+    return (
+      <div className="flex items-center justify-center h-full px-4 text-center">
+        <p className="text-xs text-neutral-500">Select a caption group to edit animations</p>
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Scrollable content */}
+      <div className="flex-1 overflow-y-auto px-3 py-2">
+        <AnimationPhase
+          label="Entrance"
+          presets={ENTRANCE_PRESETS}
+          animation={animation.entrance}
+          onChange={handleEntranceChange}
+        />
+        <AnimationPhase
+          label="Highlight"
+          presets={HIGHLIGHT_PRESETS}
+          animation={animation.highlight}
+          showIntensity
+          onChange={handleHighlightChange}
+        />
+        <AnimationPhase
+          label="Exit"
+          presets={EXIT_PRESETS}
+          animation={animation.exit}
+          onChange={handleExitChange}
+        />
+      </div>
+      {/* Footer */}
+      <div className="flex-shrink-0 px-3 py-2 border-t border-neutral-800">
+        <button
+          type="button"
+          onClick={handleApplyToAll}
+          className="w-full py-1.5 rounded border border-neutral-700 text-2xs text-neutral-300 hover:border-studio-accent/50 hover:text-studio-accent transition-colors"
+        >
+          Apply to all groups
+        </button>
+      </div>
+    </div>
+  );
+});