@hyperframes/studio 0.8.50 → 0.8.51

package/src/styles/theme.test.ts

@@ -0,0 +1,196 @@
+// @vitest-environment happy-dom
+
+/** Guards the ways `theme.css` can silently break: a dropped CSS custom
+ * property, a utility that stops compiling, the stock Tailwind palette
+ * leaking back in, or the JS preset / legacy colours drifting from it. */
+
+import { createRequire } from "node:module";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { Gear, IconContext } from "@phosphor-icons/react";
+import { compile } from "tailwindcss";
+import { afterEach, describe, expect, it } from "vitest";
+import studioPreset from "./tailwind-preset.shared.js";
+import { readIconTokens } from "./iconTokens";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const STYLES_DIR = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+const TAILWIND_DIR = path.dirname(require.resolve("tailwindcss/package.json"));
+
+function loadStylesheet(id: string, base: string) {
+  const file = id === "tailwindcss" ? path.join(TAILWIND_DIR, "index.css") : path.resolve(base, id);
+  return { path: file, base: path.dirname(file), content: readFileSync(file, "utf8") };
+}
+
+async function buildSource(source: string, candidates: string[]): Promise<string> {
+  const compiled = await compile(source, {
+    base: STYLES_DIR,
+    loadStylesheet,
+  });
+  return compiled.build(candidates);
+}
+
+const build = (entry: string, candidates: string[]) =>
+  buildSource(readFileSync(path.join(STYLES_DIR, entry), "utf8"), candidates);
+
+function rootVariables(css: string): Map<string, string> {
+  const block = css.match(/:root, :host \{([\s\S]*?)\n {2}\}/);
+  const vars = new Map<string, string>();
+  for (const line of (block?.[1] ?? "").split(";")) {
+    const match = line.match(/(--[a-z0-9-]+):([\s\S]+)/i);
+    if (match) vars.set(match[1], match[2].trim().replace(/\s+/g, " "));
+  }
+  return vars;
+}
+
+const themeSource = readFileSync(path.join(STYLES_DIR, "theme.css"), "utf8");
+
+function declaredValue(name: string): string {
+  const match = themeSource.match(new RegExp(`\\n\\s*${name}:\\s*([^;]+);`));
+  if (!match) throw new Error(`theme.css does not declare ${name}`);
+  return match[1].trim();
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  document.documentElement.removeAttribute("style");
+});
+
+describe("studio theme", () => {
+  it("emits the semantic palette as custom properties and as utilities", async () => {
+    const css = await build("studio.css", ["bg-accent", "text-text-2", "border-border"]);
+
+    expect(rootVariables(css).get("--color-accent")).toBe("#3ce6ac");
+    expect(css).toContain(".bg-accent {");
+    expect(css).toContain("background-color: var(--color-accent)");
+  });
+
+  it("resolves an alpha modifier on a plain hex token through color-mix", async () => {
+    const css = await build("studio.css", ["bg-accent/30"]);
+
+    expect(css).toMatch(/\.bg-accent\\\/30 \{[\s\S]*?color-mix\(/);
+  });
+
+  it("drops every Tailwind default color Studio does not use", async () => {
+    // `palette-reset.css` clears the stock palette. The entries Studio's
+    // markup still references are re-declared as deprecated aliases (U12
+    // removes them); anything outside that set must no longer resolve.
+    const css = await build("studio.css", ["bg-neutral-750", "text-teal-500", "bg-neutral-800"]);
+
+    expect(css).not.toContain("bg-neutral-750");
+    expect(css).not.toContain("text-teal-500");
+    expect(css).toContain(".bg-neutral-800 {");
+  });
+
+  it("leaves a host's stock Tailwind colors alone when only theme.css is imported", async () => {
+    const css = await buildSource('@import "tailwindcss";\n@import "./theme.css";', [
+      "bg-teal-500",
+      "text-accent",
+    ]);
+
+    expect(css).toContain(".bg-teal-500 {");
+    expect(css).toContain(".text-accent {");
+  });
+
+  it("keeps selection, playhead and accent as three distinct colors", () => {
+    const accent = declaredValue("--color-accent");
+    const selection = declaredValue("--color-selection");
+    const playhead = declaredValue("--color-playhead");
+
+    expect(new Set([accent, selection, playhead]).size).toBe(3);
+  });
+
+  it("names every micro type step in use and leaves the Tailwind sizes alone", async () => {
+    const steps = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
+    const css = await build(
+      "studio.css",
+      steps.map((step) => `text-step-${step}`).concat(["text-xs", "text-sm", "text-lg"]),
+    );
+    const vars = rootVariables(css);
+
+    for (const step of steps) {
+      expect(vars.get(`--text-step-${step}`)).toBe(`${step}px`);
+      expect(css).toContain(`.text-step-${step} {`);
+    }
+    expect(vars.get("--text-xs")).toBe("0.75rem");
+    expect(vars.get("--text-sm")).toBe("0.875rem");
+    expect(vars.get("--text-lg")).toBe("1.125rem");
+  });
+
+  it("compiles a motion-duration utility with a reduced-motion variant", async () => {
+    const css = await build("studio.css", ["duration-press", "duration-open"]);
+
+    expect(css).toMatch(
+      /\.duration-press \{[\s\S]*?transition-duration: var\(--duration-press\)[\s\S]*?prefers-reduced-motion: reduce[\s\S]*?transition-duration: 0ms/,
+    );
+    expect(css).toContain(".duration-open {");
+  });
+
+  it("keeps every legacy Tailwind palette entry at its upstream default value", async () => {
+    // These are copies of Tailwind's own values, kept only so existing markup
+    // renders unchanged. A Tailwind upgrade that moves one of them would
+    // otherwise silently change Studio's colors.
+    const upstream = new Map(
+      [
+        ...readFileSync(path.join(TAILWIND_DIR, "theme.css"), "utf8").matchAll(
+          /\n\s*(--color-[a-z]+-(?:50|\d00|950)):\s*([^;]+);/g,
+        ),
+      ].map(([, name, value]) => [name, value.trim()]),
+    );
+    const legacy = [...themeSource.matchAll(/\n\s*(--color-[a-z]+-(?:50|\d00|950)):\s*([^;]+);/g)];
+
+    expect(legacy.length).toBeGreaterThan(0);
+    for (const [, name, value] of legacy) {
+      expect(upstream.has(name), `${name} is not a Tailwind default`).toBe(true);
+      expect(`${name}: ${value.trim()}`).toBe(`${name}: ${upstream.get(name)}`);
+    }
+  });
+
+  it("keeps the deprecated JS preset in step with the CSS it shadows", () => {
+    const colors = studioPreset.theme.extend.colors;
+
+    expect(colors.studio.accent.toLowerCase()).toBe(declaredValue("--color-accent"));
+    expect(colors.panel.surface.toLowerCase()).toBe(declaredValue("--color-surface"));
+  });
+
+  it("reads the icon defaults off the theme rather than hard-coding them", () => {
+    document.documentElement.style.setProperty("--icon-size", "14px");
+    document.documentElement.style.setProperty("--icon-weight", "bold");
+
+    expect(readIconTokens()).toEqual({ size: "14px", weight: "bold" });
+  });
+
+  it("gives a child icon the token size and weight when it sets neither", () => {
+    document.documentElement.style.setProperty("--icon-size", "14px");
+    document.documentElement.style.setProperty("--icon-weight", "bold");
+
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        React.createElement(
+          IconContext.Provider,
+          { value: readIconTokens() },
+          React.createElement(Gear, null),
+        ),
+      );
+    });
+    const inherited = host.querySelector("svg");
+    const inheritedShape = inherited?.innerHTML;
+    act(() => {
+      root.render(React.createElement(Gear, { size: 14, weight: "bold" }));
+    });
+    const explicitShape = host.querySelector("svg")?.innerHTML;
+    act(() => root.unmount());
+
+    expect(inherited?.getAttribute("width")).toBe("14px");
+    expect(inherited?.getAttribute("height")).toBe("14px");
+    expect(inheritedShape).toBe(explicitShape);
+  });
+});

package/src/utils/studioUiPreferences.ts

@@ -1,3 +1,6 @@
+import type { SerializedDockview } from "dockview-react";
+import { parseDockLayout } from "../components/dock/dockLayoutSchema";
+
 export interface StoredPreviewZoomState {
   zoomPercent: number;
   panX: number;
@@ -47,6 +50,8 @@ export interface StudioUiPreferences {
    * intentionally scoped to one mount.
    */
   agentToolsEnabled?: boolean;
+  /** The dock's serialized panel tree; parsed by `parseDockLayout` on read. */
+  dockLayout?: SerializedDockview;
 }
 
 const STUDIO_UI_PREFERENCES_KEY = "hf-studio-ui-preferences";
@@ -169,6 +174,8 @@ function readStorage(storage: Storage | null, key: string): StudioUiPreferences
     if (typeof parsed.agentToolsEnabled === "boolean") {
       preferences.agentToolsEnabled = parsed.agentToolsEnabled;
     }
+    const dockLayout = parseDockLayout(parsed.dockLayout);
+    if (dockLayout) preferences.dockLayout = dockLayout;
     return preferences;
   } catch {
     return {};

package/src/utils/timelineDropTrackInsert.test.ts

@@ -0,0 +1,134 @@
+import { describe, expect, it } from "vitest";
+import type { TimelineElement } from "../player";
+import {
+  applyTrackRenumbers,
+  planDropTrackInsert,
+  resolveDropTrack,
+} from "./timelineDropTrackInsert";
+
+function clip(id: string, track: number, start: number): TimelineElement {
+  return {
+    id,
+    key: id,
+    tag: "div",
+    start,
+    duration: 2,
+    track,
+    authoredTrack: track,
+    hfId: `hf-${id}`,
+    domId: id,
+    // Main-document elements carry no sourceFile, as in production.
+  };
+}
+
+const trackOrder = [0, 1, 2];
+const dropped = { id: "new", tag: "img", start: 5, duration: 3 };
+const elements = [clip("a", 0, 0), clip("b", 1, 0), clip("c", 2, 0)];
+const source = elements
+  .map(
+    (e) =>
+      `<div data-hf-id="${e.hfId}" id="${e.id}" data-start="0" data-track-index="${e.track}"></div>`,
+  )
+  .join("\n");
+
+describe("planDropTrackInsert", () => {
+  it("opens a lane between two rows and pushes the lanes below down", () => {
+    const plan = planDropTrackInsert({ elements, trackOrder, insertRow: 1, dropped });
+    expect(plan?.track).toBe(1);
+    expect(plan?.renumbers.map((r) => [r.element.id, r.track])).toEqual([
+      ["b", 2],
+      ["c", 3],
+    ]);
+  });
+
+  it("opens a lane above the first row", () => {
+    const plan = planDropTrackInsert({ elements, trackOrder, insertRow: 0, dropped });
+    expect(plan?.track).toBe(0);
+    expect(plan?.renumbers.map((r) => [r.element.id, r.track])).toEqual([
+      ["a", 1],
+      ["b", 2],
+      ["c", 3],
+    ]);
+  });
+
+  it("still renumbers when the peers' own sourceFile is a real path, not undefined", () => {
+    const subComp = elements.map((e) => ({ ...e, sourceFile: "sub.html" }));
+    const plan = planDropTrackInsert({ elements: subComp, trackOrder, insertRow: 1, dropped });
+    expect(plan?.track).toBe(1);
+    expect(plan?.renumbers.map((r) => [r.element.id, r.track])).toEqual([
+      ["b", 2],
+      ["c", 3],
+    ]);
+  });
+});
+
+describe("planDropTrackInsert against the display row order", () => {
+  it("counts an audio-group anchor row the way a clip drag does", () => {
+    // Rows shown: group anchor (-0.5), track 0, track 1. Row boundary 2 is between 0 and 1.
+    const grouped = elements.slice(0, 2).map((e) => (e.id === "a" ? { ...e, audioGroup: "g" } : e));
+    const plan = planDropTrackInsert({
+      elements: grouped,
+      trackOrder: [-0.5, 0, 1],
+      insertRow: 2,
+      dropped,
+    });
+    expect(plan?.track).toBe(1);
+    expect(plan?.renumbers.map((r) => [r.element.id, r.track])).toEqual([["b", 2]]);
+  });
+});
+
+describe("applyTrackRenumbers", () => {
+  it("rewrites only the renumbered clips' data-track-index", () => {
+    const plan = planDropTrackInsert({ elements, trackOrder, insertRow: 1, dropped });
+    const out = applyTrackRenumbers(source, plan!);
+    const tracks = [...out.matchAll(/id="(\w)"[^>]*data-track-index="(\d+)"/g)].map((m) => [
+      m[1],
+      +m[2],
+    ]);
+    expect(tracks).toEqual([
+      ["a", 0],
+      ["b", 2],
+      ["c", 3],
+    ]);
+  });
+
+  it("throws when a clip's opening tag is missing", () => {
+    const plan = planDropTrackInsert({ elements, trackOrder, insertRow: 1, dropped });
+    expect(() => applyTrackRenumbers("<div></div>", plan!)).toThrow(/Cannot renumber/);
+  });
+});
+
+describe("resolveDropTrack", () => {
+  it("keeps the aimed lane and the source when no insert is asked for", () => {
+    const out = resolveDropTrack({
+      source,
+      elements,
+      placement: { track: 2 },
+      dropped,
+    });
+    expect(out).toEqual({ source, track: 2 });
+  });
+
+  it("returns the new lane and the source with the lanes below pushed down", () => {
+    const out = resolveDropTrack({
+      source,
+      elements,
+      placement: { track: 1, insertRow: 1, trackOrder },
+      dropped,
+    });
+    expect(out.track).toBe(1);
+    expect(out.source).toContain('id="b" data-start="0" data-track-index="2"');
+  });
+
+  it("refuses to insert when a locked clip would have to move", () => {
+    const locked = elements.map((e) => (e.id === "b" ? { ...e, timelineLocked: true } : e));
+    expect(() =>
+      resolveDropTrack({
+        source,
+        elements: locked,
+        placement: { track: 1, insertRow: 1, trackOrder },
+        dropped,
+      }),
+    ).toThrow(/locked/);
+  });
+});

package/src/utils/timelineDropTrackInsert.ts

@@ -0,0 +1,83 @@
+import type { TimelineElement } from "../player";
+import { layoutAfterTrackInsert } from "../player/components/timelineDragLanding";
+import { canMoveTimelineElement } from "../player/components/timelineAuthoredMoveTarget";
+import type { TimelineDropPlacement } from "../player/components/timelineCallbacks";
+import { applyPatchByTarget, readAttributeByTarget } from "./sourcePatcher";
+import { buildPatchTarget } from "../hooks/timelineEditingHelpers";
+import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
+
+export interface DropTrackInsertPlan {
+  /** Lane the dropped clip is written on. */
+  track: number;
+  /** Existing clips whose lane changes to make room. */
+  renumbers: Array<{ element: TimelineElement; track: number }>;
+}
+
+/** Plan a new lane at boundary `insertRow` with the renumber a clip drag into a gutter uses.
+ *  Null when a locked clip would have to move. */
+export function planDropTrackInsert(input: {
+  elements: TimelineElement[];
+  /** The row order the timeline shows (anchor rows included), which `insertRow` indexes. */
+  trackOrder: readonly number[];
+  insertRow: number;
+  dropped: Pick<TimelineElement, "id" | "tag" | "start" | "duration">;
+}): DropTrackInsertPlan | null {
+  const { elements, trackOrder, insertRow, dropped } = input;
+  const newElement: TimelineElement = {
+    ...dropped,
+    key: dropped.id,
+    // Parked on an existing lane so it adds no lane of its own to the topology.
+    track: elements[0]?.track ?? 0,
+    // sameSourceFile compares this raw field: borrow the peers' value, not the resolved path.
+    sourceFile: elements[0]?.sourceFile,
+  };
+  const layout = layoutAfterTrackInsert(newElement, dropped.start, insertRow, null, {
+    elements: [...elements, newElement],
+    trackOrder: [...trackOrder],
+  });
+  if (!layout) return null;
+  const byKey = new Map(elements.map((e) => [e.key ?? e.id, e]));
+  const renumbers: DropTrackInsertPlan["renumbers"] = [];
+  for (const norm of layout.normalized) {
+    const key = norm.key ?? norm.id;
+    if (key === dropped.id) continue;
+    const src = byKey.get(key);
+    if (!src || norm.track === (src.authoredTrack ?? src.track)) continue;
+    if (!canMoveTimelineElement(src)) return null;
+    renumbers.push({ element: src, track: norm.track });
+  }
+  const track = layout.normalized.find((n) => (n.key ?? n.id) === dropped.id)?.track;
+  return track == null ? null : { track, renumbers };
+}
+
+/** Rewrite `data-track-index` on each renumbered clip's opening tag, via the shared source patcher. */
+export function applyTrackRenumbers(source: string, plan: DropTrackInsertPlan): string {
+  let out = source;
+  for (const { element, track } of plan.renumbers) {
+    const target = buildPatchTarget(element);
+    if (!target || readAttributeByTarget(out, target, "track-index") === undefined) {
+      throw new Error(`Cannot renumber the track of "${element.id}" in the source`);
+    }
+    out = applyPatchByTarget(out, target, {
+      type: "attribute",
+      property: "track-index",
+      value: formatTimelineAttributeNumber(track),
+    });
+  }
+  return out;
+}
+
+/** The lane a dropped clip is written on and the source with any lanes pushed down to make room. */
+export function resolveDropTrack(input: {
+  source: string;
+  elements: TimelineElement[];
+  placement: TimelineDropPlacement;
+  dropped: Pick<TimelineElement, "id" | "tag" | "start" | "duration">;
+}): { source: string; track: number } {
+  const { source, elements, placement, dropped } = input;
+  if (placement.insertRow == null) return { source, track: placement.track };
+  const { insertRow, trackOrder } = placement;
+  const plan = planDropTrackInsert({ elements, trackOrder, insertRow, dropped });
+  if (!plan) throw new Error("Cannot open a new track here: a locked clip would have to move.");
+  return { source: applyTrackRenumbers(source, plan), track: plan.track };
+}