@hyperframes/studio 0.8.104 → 0.8.106

package/src/utils/blockCategories.ts

@@ -8,15 +8,47 @@ export type { BlockCategory };
 export { BLOCK_CATEGORIES, resolveBlockCategory };
 
 const COLOR_MAP: Record<BlockCategory, { bg: string; text: string; dot: string }> = {
-  transitions: { bg: "bg-blue-500/15", text: "text-blue-400", dot: "bg-blue-400" },
-  vfx: { bg: "bg-purple-500/15", text: "text-purple-400", dot: "bg-purple-400" },
-  social: { bg: "bg-pink-500/15", text: "text-pink-400", dot: "bg-pink-400" },
-  data: { bg: "bg-green-500/15", text: "text-green-400", dot: "bg-green-400" },
-  scenes: { bg: "bg-amber-500/15", text: "text-amber-400", dot: "bg-amber-400" },
-  captions: { bg: "bg-cyan-500/15", text: "text-cyan-400", dot: "bg-cyan-400" },
-  effects: { bg: "bg-rose-500/15", text: "text-rose-400", dot: "bg-rose-400" },
-  "text-effects": { bg: "bg-violet-500/15", text: "text-violet-400", dot: "bg-violet-400" },
-  "code-animation": { bg: "bg-emerald-500/15", text: "text-emerald-400", dot: "bg-emerald-400" },
+  transitions: {
+    bg: "bg-blue-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_255),var(--color-blue-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_255),var(--color-blue-400))]",
+  },
+  vfx: {
+    bg: "bg-purple-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_305),var(--color-purple-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_305),var(--color-purple-400))]",
+  },
+  social: {
+    bg: "bg-pink-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_350),var(--color-pink-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_350),var(--color-pink-400))]",
+  },
+  data: {
+    bg: "bg-green-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_152),var(--color-green-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_152),var(--color-green-400))]",
+  },
+  scenes: { bg: "bg-amber-500/15", text: "text-warning-ink", dot: "bg-warning-ink" },
+  captions: {
+    bg: "bg-cyan-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_212),var(--color-cyan-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_212),var(--color-cyan-400))]",
+  },
+  effects: {
+    bg: "bg-rose-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_13),var(--color-rose-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_13),var(--color-rose-400))]",
+  },
+  "text-effects": {
+    bg: "bg-violet-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_294),var(--color-violet-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_294),var(--color-violet-400))]",
+  },
+  "code-animation": {
+    bg: "bg-emerald-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_163),var(--color-emerald-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_163),var(--color-emerald-400))]",
+  },
 };
 
 export function getCategoryColors(category: BlockCategory) {

package/src/utils/clipboardPayload.ts

@@ -17,11 +17,13 @@ export type ClipboardPayload =
       clips: TimelineClipboardClip[];
       sourceFile: string;
       projectId?: string;
+      copiedInComposition?: string;
     }
   | {
       kind: "dom-element";
       html: string;
       sourceFile: string;
+      projectId?: string;
       originSelector?: string;
       originSelectorIndex?: number;
     };
@@ -62,7 +64,15 @@ export function deserializeClipboardPayload(json: string): ClipboardPayload | nu
     });
     if (clips.length === 0) return null;
     const projectId = typeof obj.projectId === "string" ? obj.projectId : undefined;
-    return { kind: "timeline-clip", clips, sourceFile: obj.sourceFile, projectId };
+    const copiedInComposition =
+      typeof obj.copiedInComposition === "string" ? obj.copiedInComposition : undefined;
+    return {
+      kind: "timeline-clip",
+      clips,
+      sourceFile: obj.sourceFile,
+      projectId,
+      copiedInComposition,
+    };
   }
   if (obj.kind === "dom-element") {
     if (typeof obj.html !== "string") return null;
@@ -70,6 +80,7 @@ export function deserializeClipboardPayload(json: string): ClipboardPayload | nu
       kind: "dom-element",
       html: obj.html,
       sourceFile: obj.sourceFile,
+      projectId: typeof obj.projectId === "string" ? obj.projectId : undefined,
       originSelector: typeof obj.originSelector === "string" ? obj.originSelector : undefined,
       originSelectorIndex:
         typeof obj.originSelectorIndex === "number" ? obj.originSelectorIndex : undefined,

package/src/utils/studioPendingEdits.ts

@@ -39,6 +39,27 @@ export function hasStudioPendingEdits(): boolean {
   return pendingEditPromises.size > 0 || focusedField() !== null;
 }
 
+export function isStudioEditSaving(): boolean {
+  return pendingEditPromises.size > 0;
+}
+
+export function afterStudioPendingEdits(run: () => void): () => void {
+  let waiting = true;
+  const check = () => {
+    if (!waiting) return;
+    if (isStudioEditSaving()) {
+      void Promise.allSettled([...pendingEditPromises]).then(check);
+      return;
+    }
+    waiting = false;
+    run();
+  };
+  check();
+  return () => {
+    waiting = false;
+  };
+}
+
 export function trackStudioPendingEdit(
   result: Promise<unknown> | unknown,
 ): Promise<unknown> | undefined {

package/src/utils/studioTheme.test.tsx

@@ -0,0 +1,141 @@
+// @vitest-environment happy-dom
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ThemeToggle } from "../components/ThemeToggle";
+import { cleanupMounted, mountHost } from "../components/ui/mountHost.testHelpers";
+import { savedStudioTheme, shownStudioTheme } from "./studioTheme";
+
+const KEY = "hf-studio-ui-preferences";
+const page = new DOMParser().parseFromString(
+  readFileSync(path.join(__dirname, "../../index.html"), "utf8"),
+  "text/html",
+);
+const scripts = [...page.querySelectorAll("script")];
+const boot = scripts.find((script) => !script.type)?.textContent ?? "";
+
+function store(theme: unknown) {
+  localStorage.setItem(KEY, JSON.stringify({ theme }));
+}
+
+function boots(): "light" | "dark" {
+  new Function(boot)();
+  return shownStudioTheme();
+}
+
+afterEach(() => {
+  cleanupMounted();
+  localStorage.clear();
+  delete document.documentElement.dataset.theme;
+});
+
+describe("Studio's theme", () => {
+  it.each([["light"], ["dark"], [undefined], ["neon"]])(
+    "boots to the theme the owner picks (saved %s)",
+    (saved) => {
+      store(saved);
+      expect(boots()).toBe(savedStudioTheme());
+    },
+  );
+
+  it.each([["null"], ["{not json"], ['"dark"']])("boots to the owner's pick from %s", (raw) => {
+    localStorage.setItem(KEY, raw);
+    expect(boots()).toBe(savedStudioTheme());
+  });
+
+  it("opens light the first time", () => {
+    expect(boots()).toBe("light");
+    expect(savedStudioTheme()).toBe("light");
+  });
+
+  it("runs the boot script before the app's module", () => {
+    expect(boot).toContain(`"${KEY}"`);
+    expect(scripts.findIndex((script) => !script.type)).toBeLessThan(
+      scripts.findIndex((script) => script.type === "module"),
+    );
+  });
+
+  it("flips the document between light and dark and keeps the choice", async () => {
+    store("dark");
+    const host = mountHost(<ThemeToggle />);
+    const button = () => host.querySelector("button")!;
+    expect(button().getAttribute("aria-label")).toBe("Switch to light theme");
+
+    await act(async () => button().click());
+    expect(document.documentElement.dataset.theme).toBe("paper");
+    expect(JSON.parse(localStorage.getItem(KEY)!).theme).toBe("light");
+    expect(button().getAttribute("aria-label")).toBe("Switch to dark theme");
+
+    await act(async () => button().click());
+    expect(document.documentElement.dataset.theme).toBeUndefined();
+    expect(JSON.parse(localStorage.getItem(KEY)!).theme).toBe("dark");
+  });
+
+  it("follows the theme on screen, not only its own clicks", async () => {
+    store("light");
+    const host = mountHost(<ThemeToggle />);
+    expect(host.querySelector("button")!.getAttribute("aria-label")).toBe("Switch to light theme");
+    await act(async () => {
+      document.documentElement.dataset.theme = "paper";
+    });
+    expect(host.querySelector("button")!.getAttribute("aria-label")).toBe("Switch to dark theme");
+  });
+});
+
+describe("the reveal", () => {
+  function stubTransition() {
+    const animate = vi.fn();
+    Object.assign(document.documentElement, { animate });
+    const markers: (string | undefined)[] = [];
+    const finish: (() => void)[] = [];
+    const start = vi.fn((update: () => void) => {
+      markers.push(document.documentElement.dataset.themeReveal);
+      update();
+      return { ready: Promise.resolve(), finished: new Promise<void>((done) => finish.push(done)) };
+    });
+    Object.assign(document, { startViewTransition: start });
+    return { animate, start, markers, finish };
+  }
+
+  afterEach(() => {
+    Reflect.deleteProperty(document, "startViewTransition");
+    Reflect.deleteProperty(document.documentElement, "animate");
+    vi.unstubAllGlobals();
+  });
+
+  it("grows from the button's centre when the keyboard presses it, marked while it runs", async () => {
+    const { animate, markers, finish } = stubTransition();
+    vi.stubGlobal("innerWidth", 1000);
+    vi.stubGlobal("innerHeight", 500);
+    const button = mountHost(<ThemeToggle />).querySelector("button")!;
+    button.getBoundingClientRect = () => ({ left: 890, top: 10, width: 20, height: 20 }) as DOMRect;
+    await act(async () => {
+      button.dispatchEvent(new MouseEvent("click", { bubbles: true, detail: 0 }));
+    });
+    expect(markers).toEqual([""]);
+    expect(animate.mock.calls[0]![0].clipPath[1]).toMatch(/^circle\(129\.0\d*% at 90% 4%\)$/);
+    await act(async () => finish[0]!());
+    expect(document.documentElement.dataset.themeReveal).toBeUndefined();
+  });
+
+  it("keeps the marker for a second reveal that starts before the first ends", async () => {
+    const { finish } = stubTransition();
+    const button = mountHost(<ThemeToggle />).querySelector("button")!;
+    await act(async () => button.click());
+    await act(async () => button.click());
+    await act(async () => finish[0]!());
+    expect(document.documentElement.dataset.themeReveal).toBe("");
+    await act(async () => finish[1]!());
+    expect(document.documentElement.dataset.themeReveal).toBeUndefined();
+  });
+
+  it("switches without the reveal under reduced motion", async () => {
+    const { start } = stubTransition();
+    vi.stubGlobal("matchMedia", (query: string) => ({ matches: query.includes("reduce") }));
+    const button = mountHost(<ThemeToggle />).querySelector("button")!;
+    await act(async () => button.click());
+    expect(start).not.toHaveBeenCalled();
+    expect(document.documentElement.dataset.theme).toBe("paper");
+  });
+});

package/src/utils/studioTheme.ts

@@ -0,0 +1,34 @@
+// Studio's own app opens on the toggle's saved choice, else light. Light is `data-theme="paper"`
+// on the document element, the hook theme.css keys on; dark is no attribute. index.html applies
+// `savedStudioTheme` before the first paint; studioTheme.test.tsx holds the two together.
+import { useSyncExternalStore } from "react";
+import {
+  readStudioUiPreferences,
+  writeStudioUiPreferences,
+  type StudioTheme,
+} from "./studioUiPreferences";
+
+export function savedStudioTheme(): StudioTheme {
+  return readStudioUiPreferences().theme ?? "light";
+}
+
+export function shownStudioTheme(): StudioTheme {
+  return document.documentElement.dataset.theme === "paper" ? "light" : "dark";
+}
+
+export function setStudioTheme(theme: StudioTheme): void {
+  writeStudioUiPreferences({ theme });
+  const root = document.documentElement;
+  if (theme === "light") root.dataset.theme = "paper";
+  else delete root.dataset.theme;
+}
+
+function subscribe(listener: () => void): () => void {
+  const observer = new MutationObserver(listener);
+  observer.observe(document.documentElement, { attributeFilter: ["data-theme"] });
+  return () => observer.disconnect();
+}
+
+export function useShownStudioTheme(): StudioTheme {
+  return useSyncExternalStore(subscribe, shownStudioTheme);
+}

package/src/utils/studioUiPreferences.ts

@@ -2,6 +2,7 @@ import type { SerializedDockview } from "dockview-react";
 import { parseDockLayout } from "../components/dock/dockLayoutSchema";
 
 export type TimelineTimeDisplayMode = "time" | "frame";
+export type StudioTheme = "light" | "dark";
 
 export interface StudioUiPreferences {
   timelineVisible?: boolean;
@@ -41,6 +42,7 @@ export interface StudioUiPreferences {
    * intentionally scoped to one mount.
    */
   agentToolsEnabled?: boolean;
+  theme?: StudioTheme;
   /** The dock's serialized panel tree; parsed by `parseDockLayout` on read. */
   dockLayout?: SerializedDockview;
 }
@@ -128,6 +130,7 @@ function readStorage(storage: Storage | null, key: string): StudioUiPreferences
     if (typeof parsed.rippleEditEnabled === "boolean") {
       preferences.rippleEditEnabled = parsed.rippleEditEnabled;
     }
+    if (parsed.theme === "light" || parsed.theme === "dark") preferences.theme = parsed.theme;
     if (parsed.timeDisplayMode === "time" || parsed.timeDisplayMode === "frame") {
       preferences.timeDisplayMode = parsed.timeDisplayMode;
     }

package/src/utils/typingTarget.test.ts

@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 
 import { afterEach, describe, expect, it } from "vitest";
-import { isTypingTarget } from "./typingTarget";
+import { isTypingTarget, ownsPlainKeys } from "./typingTarget";
 import { isEditableTarget } from "./timelineDiscovery";
 
 afterEach(() => {
@@ -41,6 +41,13 @@ describe("isTypingTarget", () => {
     expect(isTypingTarget(mount('<div role="combobox"></div>'))).toBe(true);
   });
 
+  it("gives a focused slider its plain keys but leaves Cmd shortcuts to the app", () => {
+    const slider = mount('<div role="slider" tabindex="0"></div>');
+    expect(ownsPlainKeys(slider)).toBe(true);
+    // Undo, copy and group still reach the app while a slider has focus.
+    expect(isTypingTarget(slider)).toBe(false);
+  });
+
   it("leaves the keys alone for anything that is not being typed into", () => {
     expect(isTypingTarget(mount("<div>plain</div>"))).toBe(false);
     expect(isTypingTarget(mount("<button>press</button>"))).toBe(false);

package/src/utils/typingTarget.ts

@@ -21,6 +21,11 @@ export function isTypingTarget(target: EventTarget | null): boolean {
   return element.closest(TYPING_SELECTOR) !== null;
 }
 
+/** Plain keys (arrows, Delete) also belong to a focused slider; Cmd shortcuts still do not. */
+export function ownsPlainKeys(target: EventTarget | null): boolean {
+  return isTypingTarget(target) || asElement(target)?.closest("[role='slider']") != null;
+}
+
 /**
  * Things a keystroke belongs to rather than to a shortcut. `contenteditable` is
  * matched by value as well, for a host whose own property is not yet true.