@hyperframes/studio 0.8.191 → 0.8.192

package/dist/ui.d.ts

@@ -95,8 +95,10 @@ interface TooltipProps {
     delay?: number;
     disabled?: boolean;
     side?: "top" | "bottom" | "left" | "right";
+    /** Wraps a long label at a reading width and cuts it at this many lines with an ellipsis. Unset, one line. */
+    lines?: number;
 }
-declare function Tooltip({ label, children, delay, side, disabled, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ label, children, delay, side, disabled, lines, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Studio's tailwind-merge config: teaches it the two scales `theme.css`

package/dist/ui.js

@@ -30,7 +30,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-FF5DM7BQ.js";
+} from "./chunk-7HZGKFFU.js";
 import "./chunk-MLKGABMK.js";
 export {
   Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.191",
+  "version": "0.8.192",
   "description": "",
   "repository": {
     "type": "git",
@@ -55,16 +55,17 @@
     "@mcp-b/global": "^5.0.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tanstack/react-virtual": "^3.14.13",
+    "acorn": "^8.17.0",
     "cn": "0.2.4",
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.191",
-    "@hyperframes/parsers": "0.8.191",
-    "@hyperframes/player": "0.8.191",
-    "@hyperframes/shader-transitions": "0.8.191",
-    "@hyperframes/studio-server": "0.8.191",
-    "@hyperframes/sdk": "0.8.191"
+    "@hyperframes/core": "0.8.192",
+    "@hyperframes/parsers": "0.8.192",
+    "@hyperframes/player": "0.8.192",
+    "@hyperframes/sdk": "0.8.192",
+    "@hyperframes/shader-transitions": "0.8.192",
+    "@hyperframes/studio-server": "0.8.192"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +82,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.191"
+    "@hyperframes/producer": "0.8.192"
   },
   "peerDependencies": {
     "react": "19",

package/src/captions/parser.test.ts

@@ -1,5 +1,5 @@
 // @vitest-environment node
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import { extractTranscript, buildCaptionModel, TranscriptWord } from "./parser";
 import { DEFAULT_STYLE, DEFAULT_CONTAINER, DEFAULT_ANIMATION_SET } from "./types";
 
@@ -156,6 +156,76 @@ describe("extractTranscript", () => {
     });
   });
 
+  it.each([
+    ["array delimiter", "'x ]; y'", "x ]; y"],
+    ["trailing-comma text", "'literal ,] and ,}'", "literal ,] and ,}"],
+    ["object-key text", "'{ text: example }'", "{ text: example }"],
+    ["escaped quotes", String.raw`'It\'s "quoted"'`, `It's "quoted"`],
+    ["escaped double quotes", String.raw`'Say \"hello\"'`, 'Say "hello"'],
+    ["escaped backslash", String.raw`'C:\\captions\\'`, "C:\\captions\\"],
+    ["hex and Unicode escapes", String.raw`'\x41\u0042\u{1D11E}'`, "AB\u{1D11E}"],
+    ["control escapes", String.raw`'one\ntwo\tthree'`, "one\ntwo\tthree"],
+  ])("preserves %s in JavaScript strings", (_name, literal, text) => {
+    const source = `<script>const TRANSCRIPT = [{ id: 'word-a', text: ${literal}, start: 0.25, end: 1.5 }];</script>`;
+    expect(extractTranscript(source)).toEqual([{ id: "word-a", text, start: 0.25, end: 1.5 }]);
+  });
+
+  it("preserves JSON values and filters malformed word entries", () => {
+    const source = `const TRANSCRIPT = [
+      null, 42, {"text":"missing timing"}, {"text":"bad timing","start":"0","end":1},
+      {"id":7,"text":"valid","start":-0.25,"end":1e1,"extra":{"items":[true,false,null]}}
+    ];`;
+    expect(extractTranscript(source)).toEqual([{ text: "valid", start: -0.25, end: 10 }]);
+  });
+
+  it("accepts comments around static values", () => {
+    expect(
+      extractTranscript(`const TRANSCRIPT = [
+        // Delimiter in a comment: ];
+        { text: 'hello', start: 0, end: 1, },
+      ] /* trailing comment */;`),
+    ).toEqual([{ text: "hello", start: 0, end: 1 }]);
+  });
+
+  it.each([
+    "[{ text: 'unterminated, start: 0, end: 1 }];",
+    "[{ text: 'hello', start: 0, end: 1 };",
+    String.raw`[{ text: '\xZZ', start: 0, end: 1 }];`,
+    "[{ text: 'hello', start: 0, end: 1 }] garbage;",
+    "[{ text: 'hello', start: 0, end: 1 },,];",
+    "[{ text: getText(), start: 0, end: 1 }];",
+    "[{ text: 'hello', start: offset, end: 1 }];",
+    "[{ text: 'hello', start: 1 + 2, end: 4 }];",
+    "[{ text: 'hello', start: -getTime(), end: 1 }];",
+    "[{ text: 'hello', start: 0, end: 1, extra: /pattern/ }];",
+    "[{ text: 'hello', start: 0, end: 1, extra: 1n }];",
+    "[{ get text() { return 'hello'; }, start: 0, end: 1 }];",
+    "[{ text: 'hello', start: 0, end: 1, extra() {} }];",
+    "[{ ['text']: 'hello', start: 0, end: 1 }];",
+    "[{ text, start: 0, end: 1 }];",
+    "[{ ...word, text: 'hello', start: 0, end: 1 }];",
+    "[...words];",
+    "[{ text: `hello ${getText()}`, start: 0, end: 1 }];",
+    "[{ text: 'hello', start: 0, end: 1, extra: { run: getText() } }];",
+    "[{ text: 'hello', start: 0, end: 1 }].map(transform);",
+    "[{ text: 'hello', start: 0, end: 1 }], run();",
+  ])("rejects malformed or executable initializers: %s", (initializer) => {
+    expect(extractTranscript(`const TRANSCRIPT = ${initializer}`)).toEqual([]);
+  });
+
+  it("never runs code while extracting a transcript", () => {
+    const getCaptionText = vi.fn(() => "hello");
+    vi.stubGlobal("getCaptionText", getCaptionText);
+    try {
+      expect(
+        extractTranscript("const TRANSCRIPT = [{ text: getCaptionText(), start: 0, end: 1 }];"),
+      ).toEqual([]);
+      expect(getCaptionText).not.toHaveBeenCalled();
+    } finally {
+      vi.unstubAllGlobals();
+    }
+  });
+
   describe("real-world source samples", () => {
     it("handles a realistic production-style TRANSCRIPT block with many words", () => {
       const source = `

package/src/captions/parser.ts

@@ -2,6 +2,14 @@
 // Parses a caption composition's JavaScript source to extract the transcript word array,
 // and builds a CaptionModel from a TranscriptWord array.
 
+import {
+  parseExpressionAt,
+  tokenizer,
+  type Expression,
+  type Property,
+  type SpreadElement,
+  type UnaryExpression,
+} from "acorn";
 import {
   CaptionModel,
   CaptionSegment,
@@ -129,24 +137,26 @@ function readTranscriptGroups(transcript: TranscriptWord[], groupEls: NodeListOf
  * Looks for `const TRANSCRIPT = [...]` or `const script = [...]` (also let/var)
  * and parses each `{ text, start, end }` object into TranscriptWord objects.
  *
+ * Supports static literals only; expressions are never evaluated.
  * Returns an empty array if no transcript is found or if parsing fails.
  */
 export function extractTranscript(source: string): TranscriptWord[] {
-  // Match: (const|let|var) (TRANSCRIPT|script) = [...]
-  // The array may span multiple lines and contain trailing commas.
-  // The lazy [\s\S]*? anchors on the first `];` — assumes transcript word
-  // text never contains a literal `];` string (safe for speech transcripts).
-  const varPattern = /(?:const|let|var)\s+(?:TRANSCRIPT|script)\s*=\s*(\[[\s\S]*?\]);/;
-  const match = source.match(varPattern);
+  // Locate the initializer in either JavaScript or a complete HTML composition.
+  // Acorn owns its boundary so delimiters inside strings remain literal text.
+  const varPattern = /\b(?:const|let|var)\s+(?:TRANSCRIPT|script)\s*=\s*(?=\[)/;
+  const match = varPattern.exec(source);
 
   if (!match) {
     return [];
   }
 
-  const arrayLiteral = match[1];
-
   try {
-    return parseTranscriptArray(arrayLiteral);
+    const options = { ecmaVersion: "latest" } as const;
+    const expression = parseExpressionAt(source, match.index + match[0].length, options);
+    if (expression.type !== "ArrayExpression") return [];
+    const nextToken = tokenizer(source.slice(expression.end), options).getToken();
+    if (nextToken.type.label !== ";") return [];
+    return parseTranscriptArray(readStaticValue(expression));
   } catch {
     return [];
   }
@@ -284,51 +294,75 @@ export function parseCaptionComposition(
   return model;
 }
 
-/**
- * Parses a JS array literal containing `{ text, start, end }` objects.
- *
- * Handles:
- * - Double-quoted and single-quoted string values
- * - Trailing commas after the last element or property
- * - Unquoted property keys (standard JS object literal syntax)
- * - Numeric values for start/end
- */
-function parseTranscriptArray(arrayLiteral: string): TranscriptWord[] {
-  // Try parsing as-is first (handles already-valid JSON)
-  let parsed: unknown;
-  try {
-    parsed = JSON.parse(arrayLiteral);
-  } catch {
-    // Not valid JSON — normalize single quotes, unquoted keys, trailing commas
-    let normalized = arrayLiteral;
-    normalized = normalized.replace(/'((?:[^'\\]|\\.)*)'/g, (_match, inner) => {
-      const escaped = inner.replace(/\\'/g, "'").replace(/"/g, '\\"');
-      return `"${escaped}"`;
-    });
-    normalized = normalized.replace(/([{,]\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/g, '$1"$2":');
-    normalized = normalized.replace(/,(\s*[}\]])/g, "$1");
-    parsed = JSON.parse(normalized);
+/** Decode data literals only, including metadata that is not used by captions. */
+function readStaticValue(node: Expression | SpreadElement | null): unknown {
+  switch (node?.type) {
+    case "Literal":
+      // Acorn's remaining literals are strings, numbers, booleans, or null.
+      if ("regex" in node || "bigint" in node) break;
+      return node.value;
+    case "UnaryExpression":
+      return readSignedNumber(node);
+    case "ArrayExpression":
+      return node.elements.map(readStaticValue);
+    case "ObjectExpression":
+      return Object.fromEntries(node.properties.map(readStaticProperty));
   }
+  throw new SyntaxError("Transcript values must be static literals");
+}
+
+function readSignedNumber(node: UnaryExpression): number {
+  if (
+    (node.operator !== "-" && node.operator !== "+") ||
+    node.argument.type !== "Literal" ||
+    typeof node.argument.value !== "number"
+  ) {
+    throw new SyntaxError("Transcript unary expressions must be signed numeric literals");
+  }
+  return node.operator === "-" ? -node.argument.value : node.argument.value;
+}
+
+function readStaticProperty(property: Property | SpreadElement): [string | number, unknown] {
+  if (
+    property.type !== "Property" ||
+    property.kind !== "init" ||
+    property.method ||
+    property.shorthand ||
+    property.computed
+  ) {
+    throw new SyntaxError("Transcript properties must be static data");
+  }
+  const key =
+    property.key.type === "Identifier" ? property.key.name : readStaticValue(property.key);
+  if (typeof key !== "string" && typeof key !== "number") {
+    throw new SyntaxError("Transcript property keys must be names or literals");
+  }
+  return [key, readStaticValue(property.value)];
+}
 
+function parseTranscriptArray(parsed: unknown): TranscriptWord[] {
   if (!Array.isArray(parsed)) {
     return [];
   }
 
   const words: TranscriptWord[] = [];
-  for (const item of parsed) {
+  const items: unknown[] = parsed;
+  for (const item of items) {
     if (
       item !== null &&
       typeof item === "object" &&
-      typeof (item as Record<string, unknown>).text === "string" &&
-      typeof (item as Record<string, unknown>).start === "number" &&
-      typeof (item as Record<string, unknown>).end === "number"
+      "text" in item &&
+      typeof item.text === "string" &&
+      "start" in item &&
+      typeof item.start === "number" &&
+      "end" in item &&
+      typeof item.end === "number"
     ) {
-      const entry = item as Record<string, unknown>;
       words.push({
-        ...(typeof entry.id === "string" ? { id: entry.id } : {}),
-        text: entry.text as string,
-        start: entry.start as number,
-        end: entry.end as number,
+        ...("id" in item && typeof item.id === "string" ? { id: item.id } : {}),
+        text: item.text,
+        start: item.start,
+        end: item.end,
       });
     }
   }

package/src/components/ui/Tooltip.test.tsx

@@ -108,3 +108,35 @@ it("wraps its child in a box-less span so a disabled child still gets hover", ()
   expect(trigger.parentElement?.className).toBe("contents");
   expect(trigger.parentElement?.parentElement?.parentElement).toBe(document.body);
 });
+
+it("keeps a label on one line unless it is given lines", async () => {
+  const trigger = mount();
+  act(() => trigger.focus());
+  await settle();
+
+  expect(bubble()?.className).toContain("whitespace-nowrap");
+  expect(bubble()?.querySelector("span")).toBeNull();
+});
+
+it("wraps a long label at a reading width and cuts it at its lines", async () => {
+  const label = "Make a 30 second launch promo for the spring release. ".repeat(6).trim();
+  const host = mountHost(
+    <Tooltip label={label} delay={0} lines={3}>
+      <button type="button" data-testid="long">
+        P
+      </button>
+    </Tooltip>,
+  );
+  act(() => host.querySelector<HTMLElement>('[data-testid="long"]')?.focus());
+  await settle();
+
+  const tip = bubble();
+  expect(tip?.className).toContain("whitespace-normal");
+  expect(tip?.className, "a long URL or path breaks too").toContain("break-words");
+  expect(tip?.className).toContain("max-w-[300px]");
+  expect(tip?.className).not.toContain("whitespace-nowrap");
+  const text = tip?.querySelector<HTMLElement>("span");
+  expect(text?.textContent).toBe(label);
+  expect(text?.className).toBe("line-clamp-(--tooltip-lines)");
+  expect(text?.style.getPropertyValue("--tooltip-lines")).toBe("3");
+});

package/src/components/ui/Tooltip.tsx

@@ -4,7 +4,14 @@
  */
 
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-import { cloneElement, useId, useRef, useState, type ReactElement } from "react";
+import {
+  cloneElement,
+  useId,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactElement,
+} from "react";
 import { cn } from "./cn";
 import { floatingMotion, POPUP_LAYER } from "./Menu";
 
@@ -16,6 +23,8 @@ interface TooltipProps {
   delay?: number;
   disabled?: boolean;
   side?: "top" | "bottom" | "left" | "right";
+  /** Wraps a long label at a reading width and cuts it at this many lines with an ellipsis. Unset, one line. */
+  lines?: number;
 }
 
 /** Matches the old bubble's gap from its trigger, and its viewport margin. */
@@ -28,6 +37,7 @@ export function Tooltip({
   delay = 400,
   side = "top",
   disabled = false,
+  lines,
 }: TooltipProps) {
   const [open, setOpen] = useState(false);
   const boxRef = useRef<HTMLSpanElement>(null);
@@ -52,11 +62,21 @@ export function Tooltip({
             id={tooltipId}
             role="tooltip"
             className={cn(
-              "pointer-events-none rounded-md border border-border-input bg-surface px-2 py-1 text-step-10 font-medium text-text-1 whitespace-nowrap shadow-menu",
+              "pointer-events-none rounded-md border border-border-input bg-surface px-2 py-1 text-step-10 font-medium text-text-1 shadow-menu",
+              lines ? "max-w-[300px] whitespace-normal break-words" : "whitespace-nowrap",
               floatingMotion("duration-tooltip"),
             )}
           >
-            {label}
+            {lines ? (
+              <span
+                className="line-clamp-(--tooltip-lines)"
+                style={{ "--tooltip-lines": lines } as CSSProperties}
+              >
+                {label}
+              </span>
+            ) : (
+              label
+            )}
           </BaseTooltip.Popup>
         </BaseTooltip.Positioner>
       </BaseTooltip.Portal>