@hyperframes/studio 0.8.49 → 0.8.51

package/src/components/StudioGlobalDragOverlay.tsx

@@ -1,24 +0,0 @@
-export function StudioGlobalDragOverlay() {
-  return (
-    <div className="hf-backdrop-in absolute inset-0 z-[90] flex items-center justify-center bg-black/50 backdrop-blur-sm pointer-events-none">
-      <div className="flex flex-col items-center gap-3 px-8 py-6 rounded-xl border-2 border-dashed border-studio-accent/60 bg-studio-accent/[0.06]">
-        <svg
-          width="32"
-          height="32"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="text-studio-accent"
-        >
-          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-          <polyline points="7 10 12 15 17 10" />
-          <line x1="12" y1="15" x2="12" y2="3" />
-        </svg>
-        <span className="text-sm font-medium text-studio-accent">Drop to add at the playhead</span>
-      </div>
-    </div>
-  );
-}

package/src/components/storyboard/AgentChatMessageButton.test.tsx

@@ -1,47 +0,0 @@
-// @vitest-environment happy-dom
-
-import React, { act } from "react";
-import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { AgentChatMessageButton } from "./AgentChatMessageButton";
-
-(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
-
-afterEach(() => {
-  document.body.innerHTML = "";
-  vi.useRealTimers();
-  vi.restoreAllMocks();
-});
-
-describe("AgentChatMessageButton", () => {
-  it("reports a successful copy and resets to an explicit re-copy action", async () => {
-    vi.useFakeTimers();
-    const writeText = vi.fn().mockResolvedValue(undefined);
-    Object.defineProperty(navigator, "clipboard", {
-      configurable: true,
-      value: { writeText },
-    });
-    const onCopied = vi.fn();
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    act(() => {
-      root.render(<AgentChatMessageButton message="handoff" onCopied={onCopied} />);
-    });
-
-    const button = host.querySelector("button");
-    if (!button) throw new Error("copy button not rendered");
-    await act(async () => {
-      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-      await Promise.resolve();
-    });
-
-    expect(writeText).toHaveBeenCalledWith("handoff");
-    expect(onCopied).toHaveBeenCalledOnce();
-    expect(button.textContent).toBe("Copied — paste in your agent chat");
-
-    act(() => vi.advanceTimersByTime(3000));
-    expect(button.textContent).toBe("Copy again");
-    act(() => root.unmount());
-  });
-});

package/src/components/storyboard/AgentChatMessageButton.tsx

@@ -1,45 +0,0 @@
-import { useEffect, useState } from "react";
-import { Button } from "../ui/Button";
-
-export const APPLY_STORYBOARD_FEEDBACK_MESSAGE =
-  "Read the storyboard feedback I saved in .hyperframes/frame-comments.json and revise the frames.";
-
-export function AgentChatMessageButton({
-  message,
-  label = "Copy prompt for agent",
-  onCopied,
-}: {
-  message: string;
-  label?: string;
-  onCopied?: () => void;
-}) {
-  const [copyState, setCopyState] = useState<"idle" | "copied" | "again" | "failed">("idle");
-
-  useEffect(() => {
-    if (copyState !== "copied") return;
-    const timeout = window.setTimeout(() => setCopyState("again"), 3000);
-    return () => window.clearTimeout(timeout);
-  }, [copyState]);
-
-  const copyMessage = async () => {
-    try {
-      await navigator.clipboard.writeText(message);
-      setCopyState("copied");
-      onCopied?.();
-    } catch {
-      setCopyState("failed");
-    }
-  };
-
-  return (
-    <Button size="sm" variant="secondary" onClick={() => void copyMessage()}>
-      {copyState === "copied"
-        ? "Copied — paste in your agent chat"
-        : copyState === "again"
-          ? "Copy again"
-          : copyState === "failed"
-            ? "Copy failed"
-            : label}
-    </Button>
-  );
-}

package/src/components/storyboard/FramePoster.test.tsx

@@ -1,61 +0,0 @@
-// @vitest-environment happy-dom
-
-import React, { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it } from "vitest";
-import { FramePoster } from "./FramePoster";
-
-(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
-
-const roots: Root[] = [];
-
-afterEach(() => {
-  act(() => roots.splice(0).forEach((root) => root.unmount()));
-  document.body.replaceChildren();
-});
-
-// A fresh host per render: several cases compare two surfaces side by side.
-function renderPoster(surface?: "tile" | "hero"): HTMLImageElement {
-  const host = document.createElement("div");
-  document.body.appendChild(host);
-  const root = createRoot(host);
-  roots.push(root);
-  act(() => {
-    root.render(
-      <FramePoster
-        projectId="demo"
-        src="frames/01-hero.html"
-        seconds={3}
-        title="hero"
-        surface={surface}
-      />,
-    );
-  });
-  const img = host.querySelector("img");
-  if (!img) throw new Error("poster did not render an <img>");
-  return img;
-}
-
-describe("FramePoster", () => {
-  // Regression: the contact sheet stretched a 240x135 capture across a wide,
-  // high-density card, making body copy, thin lines, and sprite details blurry.
-  it.each([
-    [undefined, "storyboard"],
-    ["tile", "storyboard"],
-    ["hero", "source"],
-  ] as const)("captures the %s surface at %s density", (surface, output) => {
-    const url = new URL(renderPoster(surface).src);
-
-    expect(url.searchParams.get("output")).toBe(output);
-    expect(url.pathname).toBe("/api/projects/demo/thumbnail/frames/01-hero.html");
-  });
-
-  it("defaults to the tile surface", () => {
-    expect(renderPoster().className).toBe(renderPoster("tile").className);
-  });
-
-  it("letterboxes only the hero, so a tile still fills its cell", () => {
-    expect(renderPoster("hero").className).toContain("object-contain");
-    expect(renderPoster("tile").className).toContain("object-cover");
-  });
-});

package/src/components/storyboard/FramePoster.tsx

@@ -1,86 +0,0 @@
-import { buildProjectApiPath } from "../../utils/projectRouting";
-import { useEffect, useState } from "react";
-import { buildCompositionThumbnailUrl } from "../../player/components/CompositionThumbnail";
-
-export interface FramePosterProps {
-  projectId: string;
-  /** Project-relative path to the frame's HTML sub-composition. */
-  src: string;
-  /** Time (seconds) to seek to for the poster. */
-  seconds: number;
-  title: string;
-  /**
-   * Where this poster is rendered. A contact-sheet tile is ~300px wide and there
-   * are many of them; the focus hero is up to 900px wide and there is exactly
-   * one. Tiles use a bounded high-density capture; the hero uses source density.
-   * The surface also decides whether the result fills or letterboxes its cell.
-   */
-  surface?: "tile" | "hero";
-  /**
-   * Project content signature to key the poster URL on. The thumbnail route
-   * regenerates when the frame's source changes, but the browser only refetches
-   * when the URL does — so bake the signature in to pick up fresh posters after
-   * a background board refresh.
-   */
-  posterVersion?: string;
-}
-
-/**
- * Server-rendered poster for a frame. The thumbnail route seeks the composition
- * by time (at its real fps) and caches the result, so there's no live iframe,
- * no postMessage seek, and no client-side fps assumption. Shared by the
- * contact-sheet tile and the frame-focus view.
- */
-export function FramePoster({
-  projectId,
-  src,
-  seconds,
-  title,
-  surface = "tile",
-  posterVersion,
-}: FramePosterProps) {
-  const [failed, setFailed] = useState(false);
-  // The <img> is reused (no key) when a tile/hero swaps to a different frame, so a
-  // prior load error would stick. Reset when the poster target changes — including
-  // a new posterVersion, so a frame that failed mid-write retries once it settles.
-  useEffect(() => setFailed(false), [src, seconds, posterVersion, surface]);
-  if (failed) {
-    return (
-      <div className="flex h-full w-full items-center justify-center text-[11px] text-neutral-600">
-        Preview unavailable
-      </div>
-    );
-  }
-  let url = buildCompositionThumbnailUrl({
-    previewUrl: buildProjectApiPath(projectId, `/preview/comp/${src}`),
-    seekTime: seconds,
-    duration: 0,
-    origin: window.location.origin,
-    // The normal 240x135 preview is unreadable in the contact sheet, while source
-    // density is unbounded across all tiles. Give tiles a capped review density
-    // and reserve true source output for the single focus hero.
-    output: surface === "hero" ? "source" : "storyboard",
-  });
-  if (posterVersion) {
-    const withVersion = new URL(url, window.location.origin);
-    withVersion.searchParams.set("sig", posterVersion);
-    url = withVersion.toString();
-  }
-  return (
-    <img
-      src={url}
-      alt={title}
-      draggable={false}
-      loading="lazy"
-      onError={() => setFailed(true)}
-      className={`h-full w-full ${surface === "hero" ? "object-contain" : "object-cover"}`}
-    />
-  );
-}
-
-/** Time (seconds) to show a frame at — past the intro so the key moment is visible. */
-export function posterTime(frame: { poster?: number; durationSeconds?: number }): number {
-  if (frame.poster != null) return frame.poster;
-  if (frame.durationSeconds != null) return frame.durationSeconds * 0.66;
-  return 1.5;
-}

package/src/components/storyboard/StoryboardDirection.tsx

@@ -1,45 +0,0 @@
-import type { StoryboardGlobals } from "@hyperframes/core/storyboard";
-
-export interface StoryboardDirectionProps {
-  globals: StoryboardGlobals;
-  frameCount: number;
-}
-
-/**
- * Global direction header: the message/thesis plus arc, audience, and format.
- * This is the storyboard's "north star" pulled from the manifest frontmatter.
- */
-export function StoryboardDirection({ globals, frameCount }: StoryboardDirectionProps) {
-  const meta = [
-    { label: "Arc", value: globals.arc },
-    { label: "Audience", value: globals.audience },
-    { label: "Voice", value: globals.extra.voice },
-    { label: "Format", value: globals.format },
-    { label: "Frames", value: String(frameCount) },
-  ].filter((item): item is { label: string; value: string } => Boolean(item.value));
-
-  return (
-    <header className="border-b border-neutral-800 pb-5">
-      <div className="text-[11px] font-medium uppercase tracking-wider text-neutral-500">
-        Storyboard
-      </div>
-      {globals.message ? (
-        <h1 className="mt-1 text-2xl font-semibold leading-tight text-neutral-100">
-          {globals.message}
-        </h1>
-      ) : (
-        <h1 className="mt-1 text-2xl font-semibold leading-tight text-neutral-400">
-          Untitled storyboard
-        </h1>
-      )}
-      <dl className="mt-4 flex flex-wrap gap-x-8 gap-y-2">
-        {meta.map((item) => (
-          <div key={item.label} className="flex items-baseline gap-2">
-            <dt className="text-[11px] uppercase tracking-wider text-neutral-500">{item.label}</dt>
-            <dd className="text-sm text-neutral-300">{item.value}</dd>
-          </div>
-        ))}
-      </dl>
-    </header>
-  );
-}