@hyperframes/studio 0.8.51 → 0.8.53-desktop.0

package/src/styles/hexRatchet.test.ts

@@ -0,0 +1,201 @@
+// The hex ratchet (R12, AE2): a per-file baseline of colour literals that only ever goes down.
+// Per file so two sweep PRs touching one file conflict on its line and force a recount.
+// The baseline is never regenerated by a normal run: a missing one fails, and rewriting it needs
+// the named flag, so the number in git is one a human accepted.
+
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+import { listSourceFiles, REPO_ROOT, STYLES_DIR } from "./styleSources";
+
+const BASELINE_PATH = path.join(STYLES_DIR, "hex-baseline.json");
+
+const WRITE_FLAG = "HEX_BASELINE_WRITE";
+const LOWER_COMMAND = `${WRITE_FLAG}=1 bunx vitest run src/styles/hexRatchet.test.ts`;
+
+// A literal colour: `#abc`, `#aabbcc`, `#aabbccdd`, or functional notation. This test owns the
+// regex, so the baseline is whatever this rule sees.
+const COLOR_LITERAL = /#(?:[0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{3,4})\b|\b(?:rgba?|hsla?)\(/gi;
+
+/** Files whose whole job is to hold colour values. */
+function isTokenSource(relative: string): boolean {
+  return /styles\/(theme\.css|tailwind-preset\.shared\.js|tailwind-preset\.ts)$/.test(relative);
+}
+
+function isScanned(relative: string): boolean {
+  if (isTokenSource(relative) || /\.test\.tsx?$/.test(relative)) return false;
+  return /\.(tsx?|css)$/.test(relative);
+}
+
+/** Strings match first and are kept, so `"image/*"` or `"a//b"` never opens a comment. */
+const STRING_OR_COMMENT =
+  /("(?:\\.|[^"\\\n])*"|'(?:\\.|[^'\\\n])*'|`(?:\\.|[^`\\])*`)|\/\*[\s\S]*?\*\/|\/\/[^\n]*/g;
+
+/** Comments hold issue numbers like `#2291` that read as hex; count code only. */
+function stripComments(text: string, lineComments: boolean): string {
+  return text.replace(STRING_OR_COMMENT, (match, string?: string) => {
+    if (string !== undefined) return match;
+    return match.startsWith("//") && !lineComments ? match : "";
+  });
+}
+
+function countColorLiterals(text: string, lineComments = true): number {
+  return [...stripComments(text, lineComments).matchAll(COLOR_LITERAL)].length;
+}
+
+/** Repository-relative path to colour-literal count, for every scanned file. */
+function scan(): Map<string, number> {
+  const counts = new Map<string, number>();
+  for (const [file, text] of listSourceFiles(isScanned, REPO_ROOT)) {
+    const count = countColorLiterals(text, !file.endsWith(".css"));
+    if (count > 0) counts.set(file, count);
+  }
+  return counts;
+}
+
+interface Baseline {
+  readonly total: number;
+  readonly files: Readonly<Record<string, number>>;
+}
+
+function toBaseline(counts: ReadonlyMap<string, number>): Baseline {
+  const files: Record<string, number> = {};
+  let total = 0;
+  for (const key of [...counts.keys()].sort()) {
+    files[key] = counts.get(key) ?? 0;
+    total += files[key];
+  }
+  return { total, files };
+}
+
+/** Every file whose count moved, split by direction. */
+function compare(counts: ReadonlyMap<string, number>, baseline: Baseline) {
+  const risen: string[] = [];
+  const fallen: string[] = [];
+  // A file missing from the baseline has a baseline of zero, so a rename
+  // cannot smuggle its colours past the ratchet.
+  for (const [file, count] of counts) {
+    const allowed = baseline.files[file] ?? 0;
+    if (count > allowed) risen.push(`${file}: ${count} colour literals, baseline ${allowed}`);
+    if (count < allowed) fallen.push(`${file}: ${count}, baseline ${allowed}`);
+  }
+  for (const [file, allowed] of Object.entries(baseline.files)) {
+    if (!counts.has(file)) fallen.push(`${file}: now 0, baseline ${allowed}`);
+  }
+  return { risen, fallen };
+}
+
+// A rise is a failure. A fall is reported with the command that banks it, because a baseline
+// left high is a budget the next change can spend.
+function verdict(counts: ReadonlyMap<string, number>, baseline: Baseline | undefined): string[] {
+  if (baseline === undefined) {
+    return [`src/styles/hex-baseline.json is missing. Write it with: ${LOWER_COMMAND}`];
+  }
+  const { risen, fallen } = compare(counts, baseline);
+  if (risen.length > 0) {
+    return [
+      "Colour literals belong in src/styles/theme.css.",
+      ...risen,
+      `If these are unavoidable, lower is the only direction: ${LOWER_COMMAND}`,
+    ];
+  }
+  if (fallen.length > 0) return [`Colour literals went down. Bank it: ${LOWER_COMMAND}`, ...fallen];
+  return [];
+}
+
+function readBaseline(): Baseline | undefined {
+  if (!existsSync(BASELINE_PATH)) return undefined;
+  return JSON.parse(readFileSync(BASELINE_PATH, "utf8")) as Baseline;
+}
+
+describe("colour literal counter", () => {
+  it("counts a hex in a style object, in canvas code and in a stylesheet", () => {
+    expect(countColorLiterals(`<div style={{ background: "#161618" }} />`)).toBe(1);
+    expect(countColorLiterals(`context.fillStyle = "#090b0e";`)).toBe(1);
+    expect(countColorLiterals(`.ring { box-shadow: 0 0 0 1px rgb(110 231 183); }`)).toBe(1);
+    expect(countColorLiterals(`a { color: rgba(0, 0, 0, 0.5); border-color: hsl(0 0% 4%); }`)).toBe(
+      2,
+    );
+  });
+
+  it("does not mistake a fragment or an issue number for a colour", () => {
+    // Known limit: an identifier that is exactly 3, 4, 6 or 8 hex characters
+    // in code reads as a colour; the baseline absorbs it.
+    expect(countColorLiterals(`href="#section-two" // see #12345`)).toBe(0);
+  });
+
+  it("keeps a colour that follows comment-shaped text inside a string", () => {
+    expect(countColorLiterals(`accept="image/*"; const c = "#161618"; x = "*/";`)).toBe(1);
+    expect(countColorLiterals("const u = `x//y`; const c = '#161618';")).toBe(1);
+    expect(countColorLiterals(`.a { background: url(//cdn.test/a.png) #161618; }`, false)).toBe(1);
+  });
+
+  it("ignores a colour-shaped issue number in a line or block comment", () => {
+    expect(countColorLiterals(`const a = 1; // decision (#2291)`)).toBe(0);
+    expect(countColorLiterals(`/** see #2291 and rgba(0,0,0,1) */\nconst a = 1;`)).toBe(0);
+    expect(countColorLiterals(`fetch("https://x.test/#abc"); const c = "#161618"; // #2291`)).toBe(
+      2,
+    );
+  });
+
+  it("leaves the token sources and the tests out of the scan", () => {
+    expect(isScanned("packages/studio/src/styles/theme.css")).toBe(false);
+    expect(isScanned("packages/studio/src/styles/tailwind-preset.shared.js")).toBe(false);
+    expect(isScanned("packages/studio/src/styles/theme.test.ts")).toBe(false);
+    expect(isScanned("packages/studio/src/components/ui/Button.tsx")).toBe(true);
+  });
+});
+
+describe("hex ratchet", () => {
+  const baseline: Baseline = { total: 2, files: { "a.tsx": 2 } };
+
+  it("fails when a file's count rises, naming the file and both numbers", () => {
+    // Covers AE2.
+    const message = verdict(new Map([["a.tsx", 3]]), baseline).join("\n");
+
+    expect(message).toContain("a.tsx: 3 colour literals, baseline 2");
+    expect(message).toContain(LOWER_COMMAND);
+  });
+
+  it("passes when a count falls and says how to bank it", () => {
+    const message = verdict(new Map([["a.tsx", 1]]), baseline).join("\n");
+
+    expect(message).toContain("Colour literals went down");
+    expect(message).toContain(LOWER_COMMAND);
+  });
+
+  it("treats a file the baseline has never seen as a baseline of zero", () => {
+    const empty: Baseline = { total: 0, files: {} };
+
+    expect(verdict(new Map([["new.tsx", 0]]), empty)).toEqual([]);
+    expect(verdict(new Map([["new.tsx", 1]]), empty).join("\n")).toContain(
+      "new.tsx: 1 colour literals, baseline 0",
+    );
+  });
+
+  it("round-trips: a baseline written from a scan accepts that same scan", () => {
+    const counts = new Map([
+      ["b.css", 4],
+      ["a.tsx", 2],
+    ]);
+    const written = toBaseline(counts);
+
+    expect(Object.keys(written.files)).toEqual(["a.tsx", "b.css"]);
+    expect(written.total).toBe(6);
+    expect(verdict(counts, written)).toEqual([]);
+  });
+
+  it("fails with the flag named when there is no baseline at all", () => {
+    expect(verdict(new Map([["a.tsx", 0]]), undefined).join("\n")).toContain(`${WRITE_FLAG}=1`);
+  });
+
+  it("holds Studio at or below its committed colour-literal baseline", () => {
+    const counts = scan();
+    if (process.env[WRITE_FLAG] === "1") {
+      writeFileSync(BASELINE_PATH, `${JSON.stringify(toBaseline(counts), null, 2)}\n`);
+    }
+    const committed = readBaseline();
+
+    expect(verdict(counts, committed)).toEqual([]);
+  });
+});

package/src/styles/styleSources.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { listSourceFiles, toPosixPath } from "./styleSources";
+
+describe("style source paths", () => {
+  it("turns a Windows-style relative path into the forward-slash form the baseline uses", () => {
+    expect(toPosixPath("packages\\studio\\src\\App.tsx")).toBe("packages/studio/src/App.tsx");
+  });
+
+  it("leaves a forward-slash path alone", () => {
+    expect(toPosixPath("packages/studio/src/App.tsx")).toBe("packages/studio/src/App.tsx");
+  });
+
+  it("hands the keep filter and the map key the same forward-slash path", () => {
+    const seen: string[] = [];
+    const files = listSourceFiles((file) => (seen.push(file), file.endsWith("styleSources.ts")));
+
+    expect([...files.keys()]).toEqual(["styles/styleSources.ts"]);
+    expect(seen.every((file) => !file.includes("\\"))).toBe(true);
+  });
+});

package/src/styles/styleSources.ts

@@ -0,0 +1,47 @@
+// Where the style tests read from: Tailwind's entry resolved from `node_modules`, and the file list
+// that `@source` in `studio.css` describes, shared so the gate, ratchet and theme test agree.
+
+import { createRequire } from "node:module";
+import { readdirSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const STYLES_DIR = path.dirname(fileURLToPath(import.meta.url));
+const SRC_DIR = path.dirname(STYLES_DIR);
+export const REPO_ROOT = path.resolve(SRC_DIR, "../../..");
+
+const require = createRequire(import.meta.url);
+export const TAILWIND_DIR = path.dirname(require.resolve("tailwindcss/package.json"));
+
+/** Resolves `@import` for Tailwind's compiler: bare `tailwindcss`, or a path. */
+export 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") };
+}
+
+/** Forward slashes on every platform, so keys match the baseline file and the gate's messages. */
+export const toPosixPath = (relativePath: string): string => relativePath.replace(/\\/g, "/");
+
+/**
+ * Studio's own sources, keyed by path relative to `from`, for every file the
+ * caller keeps. Build output and dependencies are never walked.
+ */
+export function listSourceFiles(
+  keep: (relativePath: string) => boolean,
+  from: string = SRC_DIR,
+): Map<string, string> {
+  const files = new Map<string, string>();
+  const walk = (dir: string) => {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (entry.name !== "node_modules" && entry.name !== "dist") walk(full);
+      } else {
+        const relative = toPosixPath(path.relative(from, full));
+        if (keep(relative)) files.set(relative, readFileSync(full, "utf8"));
+      }
+    }
+  };
+  walk(SRC_DIR);
+  return files;
+}

package/src/styles/theme.css

@@ -41,12 +41,48 @@
   --color-media: #00e3ff;
   --color-container: #f5a623;
 
+  /* The two stops of the HeyGen brand gradient, worn by the header logo. Fixed brand values
+   * rather than roles, so they are not reachable as a background or text colour by mistake. */
+  --color-brand-gradient-from: #06e3fa;
+  --color-brand-gradient-to: #4fdb5e;
+
+  /* The timeline's own surfaces: darker and bluer than the shared scale, so they
+   * get their own names instead of snapping to the nearest --color-bg/-surface
+   * step (AD147: a host themes the timeline by overriding these). */
+  --timeline-shell-bg: #0a0a0b;
+  --timeline-shell-border: rgba(255, 255, 255, 0.05);
+  --timeline-ruler-border: rgba(255, 255, 255, 0.16);
+  --timeline-row-bg: #101014;
+  --timeline-row-border: rgba(255, 255, 255, 0.06);
+  --timeline-gutter-bg: #0e0f12;
+  --timeline-gutter-border: rgba(255, 255, 255, 0.1);
+  --timeline-text-primary: rgba(255, 255, 255, 0.92);
+  --timeline-text-secondary: rgba(255, 255, 255, 0.62);
+  --timeline-tick-text: rgba(255, 255, 255, 0.34);
+  --timeline-tick-major: rgba(255, 255, 255, 0.1);
+  --timeline-tick-minor: rgba(255, 255, 255, 0.06);
+  --timeline-clip-bg: #141922;
+  --timeline-clip-bg-active: #181e28;
+  --timeline-clip-border: rgba(255, 255, 255, 0.1);
+  --timeline-clip-border-hover: rgba(255, 255, 255, 0.18);
+  --timeline-clip-border-active: rgba(255, 255, 255, 0.24);
+  --timeline-handle: rgba(255, 255, 255, 0.2);
+  --timeline-resize-seam: rgba(255, 255, 255, 0.12);
+  --timeline-resize-active: rgba(255, 255, 255, 0.24);
+  --timeline-track-clip-fill: rgba(255, 255, 255, 0.055);
+  --timeline-track-clip-active: rgba(60, 230, 172, 0.16);
+  --timeline-track-label: rgba(255, 255, 255, 0.5);
+
   /* -------------------------------------------------------------- geometry */
 
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
 
+  /* The one radius every push-button wears, named by its role so a button does
+   * not have to know which step of the scale it sits on. */
+  --radius-button: var(--radius-md);
+
   /* Control heights: 24, 28 and 32 px. `--spacing-*` gives `h-ctl`, `min-h-ctl`
    * and friends. */
   --spacing-ctl-sm: 24px;
@@ -80,12 +116,23 @@
   --shadow-menu: 0 8px 24px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.4);
   --shadow-popover: 0 16px 40px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.45);
 
+  /* The primary button is the one light surface in a dark UI, so it reads as a
+   * raised key rather than a floating panel: a tight contact shadow, a soft
+   * ambient one, and an inner top highlight. */
+  --shadow-btn-primary:
+    0 1px 2px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.65);
+
   /* ---------------------------------------------------------------- motion */
 
   --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-out-expo: cubic-bezier(0.23, 1, 0.32, 1);
   --ease-in-out-circ: cubic-bezier(0.77, 0, 0.175, 1);
 
+  /* The curve for a small state change (hover, press, focus), named by role so
+   * a control does not have to pick one. The other two stay for motion that is
+   * meant to be noticed. */
+  --ease-standard: var(--ease-out-quint);
+
   /* Durations have no Tailwind namespace, so these are plain variables paired
    * with the `@utility` rules at the bottom of this file. All are at or under
    * 200 ms. */
@@ -126,11 +173,21 @@
   --color-panel-text-3: var(--color-text-3);
   --color-panel-text-4: var(--color-text-4);
   --color-panel-text-5: var(--color-text-5);
+  --color-panel-bg-soft: var(--color-bg-2);
+  --color-panel-bg-2: var(--color-bg-2);
   --color-panel-accent: var(--color-accent);
   --color-panel-danger: var(--color-danger);
   --color-panel-media: var(--color-media);
   --color-panel-container: var(--color-container);
 
+  /* Names Studio's markup invented that no config ever defined, so the classes
+   * compiled to nothing. Aliased to the token that was meant, rather than
+   * given values of their own, so there is still one source per decision.
+   * U12 rewrites the call sites and deletes these. */
+  --color-surface-hover: var(--color-hover);
+  --color-accent-red: var(--color-danger);
+  --text-2xs: var(--text-step-10);
+
   /* ------------------------------------------- deprecated: Tailwind palette */
 
   /* Verbatim Tailwind 4.3.3 defaults for stock colours markup still names, so

package/src/styles/theme.test.ts

@@ -4,10 +4,8 @@
  * 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";
@@ -15,23 +13,12 @@ import { compile } from "tailwindcss";
 import { afterEach, describe, expect, it } from "vitest";
 import studioPreset from "./tailwind-preset.shared.js";
 import { readIconTokens } from "./iconTokens";
+import { loadStylesheet, STYLES_DIR, TAILWIND_DIR } from "./styleSources";
 
 (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,
-  });
+  const compiled = await compile(source, { base: STYLES_DIR, loadStylesheet });
   return compiled.build(candidates);
 }
 

package/src/styles/tokenGate.test.ts

@@ -0,0 +1,109 @@
+// The token gate (R11, AE1). Tailwind silently drops a class it cannot compile, so `rounded-button`
+// renders as no radius and nothing goes red. This compiles Studio's real entry stylesheet with every
+// class the source claims and reports any candidate producing no selector as `file: class`.
+// Tailwind is the only judge, so there is no allowlist; a failing class is fixed, never excused.
+
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { compile } from "tailwindcss";
+import { describe, expect, it } from "vitest";
+import { extractClassCandidates } from "./classCandidates";
+import { listSourceFiles, loadStylesheet, STYLES_DIR } from "./styleSources";
+
+// A class selector in the emitted CSS, escapes removed: `.hover\:bg-surface\/50` reads back as its candidate.
+const CLASS_SELECTOR = /\.((?:\\.|[^\s.,{}()>+~:[\]#'"*/\\])+)/g;
+
+// Tailwind's `group`/`peer` variant markers (`group/card`) produce no rule of their own, so no
+// compiled selector can vouch for them. Nothing else is exempt.
+const MARKERS = new Set(["group", "peer"]);
+
+// `hf-` is HyperFrames' reserved prefix for semantic hooks, not utilities, so Tailwind is the
+// wrong judge of them.
+const HOOK_PREFIX = /^hf-/;
+
+/** Compile Studio's stylesheet and return every class it can produce. */
+async function resolvable(candidates: string[]): Promise<Set<string>> {
+  const compiled = await compile(readFileSync(path.join(STYLES_DIR, "studio.css"), "utf8"), {
+    base: STYLES_DIR,
+    loadStylesheet,
+  });
+  const css = compiled.build(candidates);
+  const selectors = new Set<string>();
+  for (const [, selector] of css.matchAll(CLASS_SELECTOR)) {
+    selectors.add(selector.replace(/\\(.)/g, "$1"));
+  }
+  return selectors;
+}
+
+// `file: class` for every class the sources claim that Tailwind cannot make. Sources are passed
+// in so the fixtures exercise the same code path as the tree.
+async function unresolved(sources: ReadonlyMap<string, string>): Promise<string[]> {
+  const claims = new Map<string, string[]>();
+  for (const [file, source] of sources) {
+    for (const candidate of extractClassCandidates(source)) {
+      const seen = claims.get(candidate.base);
+      if (seen) seen.push(file);
+      else claims.set(candidate.base, [file]);
+    }
+  }
+  const produced = await resolvable([...claims.keys()]);
+  const failures: string[] = [];
+  for (const [candidate, files] of claims) {
+    if (produced.has(candidate) || MARKERS.has(candidate.split("/")[0])) continue;
+    if (HOOK_PREFIX.test(candidate)) continue;
+    for (const file of files) failures.push(`${file}: ${candidate}`);
+  }
+  return failures.sort();
+}
+
+// Every file the gate reads, mirroring the `@source` globs in `studio.css`. Tests are excluded:
+// a fixture in a test is not markup.
+function studioSources(): Map<string, string> {
+  return listSourceFiles((file) => /\.tsx?$/.test(file) && !/\.test\.tsx?$/.test(file));
+}
+
+describe("token gate", () => {
+  it("names the file and the class when a class resolves to nothing", async () => {
+    // AE1: `rounded-hologram` looks like a token name but is defined nowhere. The map is named
+    // `buttonSizes`, not `sizeStyles`: the `cn()` that consumes it puts it in front of the gate.
+    const failures = await unresolved(
+      new Map([
+        [
+          "ui/Button.tsx",
+          `const buttonSizes = { md: "h-8 rounded-hologram text-mega" };
+           const Button = ({ size }) => <button className={cn(buttonSizes[size])} />;`,
+        ],
+      ]),
+    );
+
+    expect(failures).toEqual(["ui/Button.tsx: rounded-hologram", "ui/Button.tsx: text-mega"]);
+  });
+
+  it("accepts an arbitrary value and reports it as one", async () => {
+    const source = `<div className="text-[11px]" />`;
+
+    expect(await unresolved(new Map([["a.tsx", source]]))).toEqual([]);
+    expect(extractClassCandidates(source).filter((c) => c.arbitrary)).toHaveLength(1);
+  });
+
+  it("accepts variants, static utilities and Studio's own CSS classes", async () => {
+    // `timeline-clip` is a plain rule in `studio.css`, not a utility.
+    const source = `<div className="hover:bg-surface/50 text-center border-dashed timeline-clip" />`;
+
+    expect(await unresolved(new Map([["a.tsx", source]]))).toEqual([]);
+  });
+
+  it("leaves Studio's own hook prefix and Tailwind's variant markers alone", async () => {
+    const source = `<div className="group group/card peer hf-fx-node" />`;
+
+    expect(await unresolved(new Map([["a.tsx", source]]))).toEqual([]);
+  });
+
+  it("claims nothing for a template chunk that touches an interpolation", async () => {
+    expect(await unresolved(new Map([["a.tsx", "<div className={`w-${i}`} />"]]))).toEqual([]);
+  });
+
+  it("resolves every class Studio's own source claims", async () => {
+    expect(await unresolved(studioSources())).toEqual([]);
+  });
+});

package/src/utils/sourcePatcher.ts

@@ -3,7 +3,7 @@
  * Handles inline style updates, attribute changes, and text content.
  */
 
-function escapeRegex(s: string): string {
+export function escapeRegex(s: string): string {
   return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 

package/src/utils/studioHelpers.test.ts

@@ -2,6 +2,7 @@
 
 import { afterEach, describe, expect, it, vi } from "vitest";
 import {
+  historyTooltipLabel,
   findMatchingTimelineElementId,
   findTimelineIdByAncestor,
   resolveDroppedAssetDimensions,
@@ -217,3 +218,20 @@ describe("resolveElementTrack", () => {
     expect(resolveElementTrack({ authoredTrack: undefined, track: 3.6 })).toBe(4);
   });
 });
+
+describe("historyTooltipLabel", () => {
+  // A disabled control gets no pointer events, so its tooltip cannot be opened
+  // to read. The wording is checked here instead of through the DOM.
+  it("names the action that would be undone", () => {
+    expect(historyTooltipLabel("undo", "Move layer")).toMatch(/^Undo Move layer \(.+\)$/);
+  });
+
+  it("names the action that would be redone", () => {
+    expect(historyTooltipLabel("redo", "Move layer")).toMatch(/^Redo Move layer \(.+\)$/);
+  });
+
+  it("keeps the shortcut when the history is empty", () => {
+    expect(historyTooltipLabel("undo", undefined)).toMatch(/^Undo \(.+\)$/);
+    expect(historyTooltipLabel("redo", null)).toMatch(/^Redo \(.+\)$/);
+  });
+});

package/src/utils/studioHelpers.ts

@@ -22,13 +22,6 @@ export type RightPanelTab =
   | "block-params"
   | "slideshow"
   | "variables";
-export type RightInspectorPane = "layers" | "design";
-
-export interface RightInspectorPanes {
-  layers: boolean;
-  design: boolean;
-}
-
 export interface AgentModalAnchorPoint {
   x: number;
   y: number;
@@ -119,13 +112,23 @@ export function shouldIgnoreHistoryShortcut(target: EventTarget | null): boolean
   return isTypingTarget(target);
 }
 
-export function getHistoryShortcutLabel(action: "undo" | "redo"): string {
+function getHistoryShortcutLabel(action: "undo" | "redo"): string {
   const isMac =
     typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
   const modifier = isMac ? "Cmd" : "Ctrl";
   return action === "undo" ? `${modifier}+Z` : `${modifier}+Shift+Z`;
 }
 
+/** The Undo / Redo tooltip: the shortcut always, the last action's name when there is one. */
+export function historyTooltipLabel(
+  action: "undo" | "redo",
+  lastAction: string | null | undefined,
+): string {
+  const shortcut = getHistoryShortcutLabel(action);
+  const verb = action === "undo" ? "Undo" : "Redo";
+  return lastAction ? `${verb} ${lastAction} (${shortcut})` : `${verb} (${shortcut})`;
+}
+
 export type ElementMatchSelection = Pick<
   DomEditSelection,
   | "id"

package/src/utils/studioUiPreferences.test.ts

@@ -20,7 +20,6 @@ describe("studio UI preferences", () => {
     const storage = createStorage();
 
     writeStudioUiPreferences({ timelineVisible: false }, storage);
-    writeStudioUiPreferences({ leftWidth: 384, rightWidth: 424 }, storage);
     writeStudioUiPreferences({ playbackRate: 1.5 }, storage);
     writeStudioUiPreferences({ audioMuted: true }, storage);
     writeStudioUiPreferences({ audioVolume: 0.4 }, storage);
@@ -28,8 +27,6 @@ describe("studio UI preferences", () => {
 
     expect(readStudioUiPreferences(storage)).toEqual({
       timelineVisible: false,
-      leftWidth: 384,
-      rightWidth: 424,
       playbackRate: 1.5,
       audioMuted: true,
       audioVolume: 0.4,
@@ -57,9 +54,6 @@ describe("studio UI preferences", () => {
     storage.setItem(
       "hf-studio-ui-preferences",
       JSON.stringify({
-        leftCollapsed: "yes",
-        leftWidth: "wide",
-        rightWidth: Number.NaN,
         timelineVisible: true,
         playbackRate: Number.NaN,
         audioMuted: "false",
@@ -119,28 +113,28 @@ describe("thumbnailMode preference", () => {
 describe("per-project scoping", () => {
   it("keeps two projects' preferences independent", () => {
     const storage = createStorage();
-    writeStudioUiPreferences({ leftWidth: 300 }, storage, "alpha");
-    writeStudioUiPreferences({ leftWidth: 500 }, storage, "beta");
+    writeStudioUiPreferences({ playbackRate: 1.25 }, storage, "alpha");
+    writeStudioUiPreferences({ playbackRate: 2 }, storage, "beta");
 
-    expect(readStudioUiPreferences(storage, "alpha").leftWidth).toBe(300);
-    expect(readStudioUiPreferences(storage, "beta").leftWidth).toBe(500);
+    expect(readStudioUiPreferences(storage, "alpha").playbackRate).toBe(1.25);
+    expect(readStudioUiPreferences(storage, "beta").playbackRate).toBe(2);
   });
 
   it("a project with nothing saved yet inherits the pre-scoping global entry once", () => {
     const storage = createStorage();
-    storage.setItem("hf-studio-ui-preferences", JSON.stringify({ leftWidth: 600 }));
+    storage.setItem("hf-studio-ui-preferences", JSON.stringify({ playbackRate: 0.5 }));
 
-    expect(readStudioUiPreferences(storage, "gamma").leftWidth).toBe(600);
+    expect(readStudioUiPreferences(storage, "gamma").playbackRate).toBe(0.5);
   });
 
   it("stops inheriting the global entry once the project has its own write", () => {
     const storage = createStorage();
-    storage.setItem("hf-studio-ui-preferences", JSON.stringify({ leftWidth: 600 }));
+    storage.setItem("hf-studio-ui-preferences", JSON.stringify({ playbackRate: 0.5 }));
 
-    writeStudioUiPreferences({ leftWidth: 250 }, storage, "gamma");
+    writeStudioUiPreferences({ playbackRate: 1.75 }, storage, "gamma");
 
-    expect(readStudioUiPreferences(storage, "gamma").leftWidth).toBe(250);
-    expect(readStudioUiPreferences(storage, null).leftWidth).toBe(600);
+    expect(readStudioUiPreferences(storage, "gamma").playbackRate).toBe(1.75);
+    expect(readStudioUiPreferences(storage, null).playbackRate).toBe(0.5);
   });
 });