@hyperframes/studio 0.8.50 → 0.8.53-desktop.0

package/src/components/sidebar/LeftSidebar.tsx

@@ -1,334 +0,0 @@
-import {
-  memo,
-  useState,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
-import { CompositionsTab } from "./CompositionsTab";
-import { AssetsTab } from "./AssetsTab";
-import { trackStudioEvent } from "../../utils/studioTelemetry";
-import { safeLocalStorage } from "../../utils/safeStorage";
-import { resolveMasterCompositionPath } from "../../utils/studioUrlState";
-import { BlocksTab, type BlockPreviewInfo } from "./BlocksTab";
-import { FileTree } from "../editor/FileTree";
-import { Tooltip } from "../ui";
-
-export type SidebarTab = "compositions" | "assets" | "code" | "blocks";
-
-export interface LeftSidebarHandle {
-  selectTab: (tab: SidebarTab) => void;
-  getTab: () => SidebarTab;
-}
-
-const STORAGE_KEY = "hf-studio-sidebar-tab";
-
-const SIDEBAR_TABS: Array<{ id: SidebarTab; label: string; tooltip: string }> = [
-  { id: "code", label: "Code", tooltip: "Source code editor" },
-  { id: "compositions", label: "Comps", tooltip: "Compositions and sub-compositions" },
-  { id: "assets", label: "Assets", tooltip: "Videos, images, audio, fonts" },
-  { id: "blocks", label: "Catalog", tooltip: "Browse blocks and components" },
-];
-
-// Both the `localStorage` reference and `getItem` itself can throw when the
-// browsing context is partitioned or site data is blocked — the same case
-// telemetry/config.ts documents. This runs as a `useState` initializer, so an
-// unguarded throw here takes the whole editor to the crash boundary rather
-// than losing one remembered tab.
-export function getPersistedTab(): SidebarTab {
-  let stored: string | null = null;
-  try {
-    stored = safeLocalStorage()?.getItem(STORAGE_KEY) ?? null;
-  } catch {
-    /* storage unavailable — fall back to the default tab */
-  }
-  if (stored === "assets") return "assets";
-  if (stored === "code") return "code";
-  if (stored === "blocks") return "blocks";
-  return "compositions";
-}
-
-interface LeftSidebarProps {
-  width?: number;
-  projectId: string;
-  compositions: string[];
-  assets: string[];
-  activeComposition: string | null;
-  onSelectComposition: (comp: string) => void;
-  onImportFiles?: (files: FileList, dir?: string) => void | Promise<void>;
-  fileTree?: string[];
-  editingFile?: { path: string; content: string | null } | null;
-  onSelectFile?: (path: string) => void;
-  onCreateFile?: (path: string) => void;
-  onCreateFolder?: (path: string) => void;
-  onDeleteFile?: (path: string) => void;
-  onRenameFile?: (oldPath: string, newPath: string) => void;
-  onDuplicateFile?: (path: string) => void;
-  onMoveFile?: (oldPath: string, newPath: string) => void;
-  codeChildren?: ReactNode;
-  onRenderComposition?: (comp: string) => void;
-  isRendering?: boolean;
-  onLint?: () => void;
-  linting?: boolean;
-  lintFindingCount?: number;
-  lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
-  onToggleCollapse?: () => void;
-  onAddBlock?: (blockName: string) => void | Promise<void>;
-  onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
-  takeoverContent?: ReactNode;
-  onAddAssetToTimeline?: (path: string) => void;
-  onAddCompositionToTimeline?: (path: string) => void;
-}
-
-export const LeftSidebar = memo(
-  forwardRef<LeftSidebarHandle, LeftSidebarProps>(function LeftSidebar(
-    {
-      width = 240,
-      projectId,
-      compositions,
-      assets,
-      activeComposition,
-      onSelectComposition,
-      onImportFiles,
-      fileTree: fileProp,
-      editingFile,
-      onSelectFile,
-      onCreateFile,
-      onCreateFolder,
-      onDeleteFile,
-      onRenameFile,
-      onDuplicateFile,
-      onMoveFile,
-      codeChildren,
-      onRenderComposition,
-      isRendering,
-      onLint,
-      linting,
-      lintFindingCount,
-      lintFindingsByFile,
-      onToggleCollapse,
-      onAddBlock,
-      onPreviewBlock,
-      takeoverContent,
-      onAddAssetToTimeline,
-      onAddCompositionToTimeline,
-    },
-    ref,
-  ) {
-    const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
-    const tabRef = useRef(tab);
-    tabRef.current = tab;
-    const tablistRef = useRef<HTMLDivElement>(null);
-    const masterCompositionPath = useMemo(
-      () => resolveMasterCompositionPath(compositions),
-      [compositions],
-    );
-
-    const selectTab = useCallback((t: SidebarTab) => {
-      setTab(t);
-      try {
-        safeLocalStorage()?.setItem(STORAGE_KEY, t);
-      } catch {
-        /* storage unavailable — the tab just won't be remembered */
-      }
-      trackStudioEvent("tab_switch", { panel: "left_sidebar", tab: t });
-    }, []);
-
-    const getTab = useCallback(() => tabRef.current, []);
-
-    useImperativeHandle(ref, () => ({ selectTab, getTab }), [selectTab, getTab]);
-
-    // APG tabs pattern: Left/Right move focus AND selection between tabs.
-    const handleTablistKeyDown = useCallback(
-      (e: React.KeyboardEvent) => {
-        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-        e.preventDefault();
-        const ids = SIDEBAR_TABS.map((t) => t.id);
-        const idx = ids.indexOf(tabRef.current);
-        const next = ids[(idx + (e.key === "ArrowRight" ? 1 : -1) + ids.length) % ids.length];
-        selectTab(next);
-        tablistRef.current?.querySelector<HTMLButtonElement>(`[data-tab-id="${next}"]`)?.focus();
-      },
-      [selectTab],
-    );
-
-    return (
-      <div
-        className="flex flex-col h-full overflow-hidden rounded-lg border border-neutral-800/50 bg-neutral-950"
-        style={{ width }}
-      >
-        {takeoverContent ? (
-          <div className="flex min-h-0 flex-1">{takeoverContent}</div>
-        ) : (
-          <>
-            {/* Tabs — Code first */}
-            <div className="border-b border-neutral-800/50 px-3 py-3 flex-shrink-0">
-              <div className="flex items-center gap-2">
-                <div
-                  ref={tablistRef}
-                  role="tablist"
-                  aria-label="Sidebar panels"
-                  onKeyDown={handleTablistKeyDown}
-                  className="grid min-w-0 flex-1 gap-0.5 rounded-[18px] bg-neutral-900 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
-                  style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr" }}
-                >
-                  {SIDEBAR_TABS.map((t) => (
-                    <Tooltip key={t.id} label={t.tooltip} side="bottom">
-                      <button
-                        type="button"
-                        role="tab"
-                        data-tab-id={t.id}
-                        aria-selected={tab === t.id}
-                        aria-controls={`sidebar-panel-${t.id}`}
-                        tabIndex={tab === t.id ? 0 : -1}
-                        onClick={() => selectTab(t.id)}
-                        className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all active:scale-[0.97] ${
-                          tab === t.id
-                            ? "bg-neutral-800 text-white"
-                            : "text-neutral-500 hover:text-neutral-200"
-                        }`}
-                      >
-                        {t.label}
-                      </button>
-                    </Tooltip>
-                  ))}
-                </div>
-                {onToggleCollapse && (
-                  <button
-                    type="button"
-                    onClick={onToggleCollapse}
-                    className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-transparent text-neutral-500 transition-colors hover:border-neutral-800 hover:bg-neutral-900 hover:text-neutral-300"
-                    title="Hide sidebar"
-                    aria-label="Hide sidebar"
-                  >
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      aria-hidden="true"
-                    >
-                      <path d="m14 7-5 5 5 5" />
-                      <path d="M19 4v16" />
-                    </svg>
-                  </button>
-                )}
-              </div>
-            </div>
-
-            {/* Tab content */}
-            {tab === "compositions" && (
-              <div
-                id="sidebar-panel-compositions"
-                role="tabpanel"
-                className="flex flex-col flex-1 min-h-0"
-              >
-                <CompositionsTab
-                  projectId={projectId}
-                  compositions={compositions}
-                  activeComposition={activeComposition}
-                  masterCompositionPath={masterCompositionPath}
-                  onSelect={onSelectComposition}
-                  onAddToTimeline={onAddCompositionToTimeline}
-                  onRenderComposition={onRenderComposition}
-                  isRendering={isRendering}
-                  lintFindingsByFile={lintFindingsByFile}
-                />
-              </div>
-            )}
-            {tab === "assets" && (
-              <div
-                id="sidebar-panel-assets"
-                role="tabpanel"
-                className="flex flex-col flex-1 min-h-0"
-              >
-                <AssetsTab
-                  projectId={projectId}
-                  assets={assets}
-                  onImport={onImportFiles}
-                  onDelete={onDeleteFile}
-                  onRename={onRenameFile}
-                  onAddAssetToTimeline={onAddAssetToTimeline}
-                />
-              </div>
-            )}
-            {tab === "code" && (
-              <div id="sidebar-panel-code" role="tabpanel" className="flex flex-1 min-h-0">
-                {(fileProp?.length ?? 0) > 0 && (
-                  <div className="w-[160px] flex-shrink-0 border-r border-neutral-800 overflow-y-auto">
-                    <FileTree
-                      files={fileProp ?? []}
-                      activeFile={editingFile?.path ?? null}
-                      onSelectFile={onSelectFile ?? (() => {})}
-                      onCreateFile={onCreateFile}
-                      onCreateFolder={onCreateFolder}
-                      onDeleteFile={onDeleteFile}
-                      onRenameFile={onRenameFile}
-                      onDuplicateFile={onDuplicateFile}
-                      onMoveFile={onMoveFile}
-                      onImportFiles={onImportFiles}
-                      lintFindingsByFile={lintFindingsByFile}
-                    />
-                  </div>
-                )}
-                <div className="flex-1 overflow-hidden min-w-0">
-                  {codeChildren ?? (
-                    <div className="flex items-center justify-center h-full text-neutral-600 text-sm">
-                      Select a file to edit
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-
-            {tab === "blocks" && (
-              <div
-                id="sidebar-panel-blocks"
-                role="tabpanel"
-                className="flex flex-col flex-1 min-h-0"
-              >
-                <BlocksTab onAddBlock={onAddBlock} onPreviewBlock={onPreviewBlock} />
-              </div>
-            )}
-
-            {/* Lint button pinned at the bottom */}
-            {onLint && (
-              <div className="border-t border-neutral-800 p-2 flex-shrink-0">
-                <button
-                  onClick={onLint}
-                  disabled={linting}
-                  className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 enabled:hover:text-amber-300 enabled:hover:bg-neutral-800 enabled:active:scale-[0.98] transition-colors disabled:opacity-40"
-                >
-                  <svg
-                    width="12"
-                    height="12"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                  >
-                    <path d="M9 11l3 3L22 4" />
-                    <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
-                  </svg>
-                  {linting ? "Linting…" : "Lint"}
-                  {!linting && lintFindingCount != null && lintFindingCount > 0 && (
-                    <span className="ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-400">
-                      {lintFindingCount}
-                    </span>
-                  )}
-                </button>
-              </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>
-  );
-}