@hyperframes/studio 0.8.190 → 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.190",
+  "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.190",
-    "@hyperframes/parsers": "0.8.190",
-    "@hyperframes/sdk": "0.8.190",
-    "@hyperframes/player": "0.8.190",
-    "@hyperframes/shader-transitions": "0.8.190",
-    "@hyperframes/studio-server": "0.8.190"
+    "@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.190"
+    "@hyperframes/producer": "0.8.192"
   },
   "peerDependencies": {
     "react": "19",

package/src/captions/parser.dom.test.ts

@@ -0,0 +1,126 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from "vitest";
+import { generateCaptionHtml } from "./generator";
+import { parseCaptionComposition } from "./parser";
+
+const transcript = "We asked what you needed. Forty-seven percent".split(" ").map((text, i) => ({
+  id: `word-${i}`,
+  text,
+  start: i * 0.5,
+  end: i * 0.5 + 0.4,
+}));
+const source = `const TRANSCRIPT = ${JSON.stringify(transcript)};`;
+
+function createCaptionDocument(
+  groupSizes: number[],
+  groupClass = "caption-group",
+  wordClass = "word",
+) {
+  const doc = document.implementation.createHTMLDocument();
+  let offset = 0;
+  for (const size of groupSizes) {
+    const group = doc.createElement("div");
+    group.className = groupClass;
+    for (const word of transcript.slice(offset, offset + size)) {
+      const span = doc.createElement("span");
+      span.className = wordClass;
+      span.textContent = word.text;
+      group.appendChild(span);
+    }
+    doc.body.appendChild(group);
+    offset += size;
+  }
+  return doc;
+}
+
+function importCaptions(doc: Document, captionSource = source) {
+  const model = parseCaptionComposition(doc, window, captionSource, 1920, 1080, 4);
+  expect(model).not.toBeNull();
+  if (!model) throw new Error("Expected a caption model");
+  const groups = model.groupOrder.map((id) =>
+    model.groups.get(id)?.segmentIds.map((segmentId) => model.segments.get(segmentId)?.text),
+  );
+  return { model, groups };
+}
+
+describe("parseCaptionComposition grouping", () => {
+  it.each([{ sizes: [5, 2] }, { sizes: [2, 4, 1] }])(
+    "preserves authored group sizes $sizes",
+    ({ sizes }) => {
+      const { model, groups } = importCaptions(createCaptionDocument(sizes));
+      expect(groups.map((group) => group?.length)).toEqual(sizes);
+      expect(groups.flat()).toEqual(transcript.map((word) => word.text));
+      expect(
+        [...model.segments.values()].map(({ wordId, text, start, end }) => ({
+          id: wordId,
+          text,
+          start,
+          end,
+        })),
+      ).toEqual(transcript);
+      for (const group of model.groups.values()) {
+        expect(group.segmentIds.map((id) => model.segments.get(id)?.groupIndex)).toEqual(
+          group.segmentIds.map((_, index) => index),
+        );
+      }
+    },
+  );
+
+  it.each(["caption-line", "caption-block"])(
+    "supports %s with caption-word spans",
+    (groupClass) => {
+      const { groups } = importCaptions(
+        createCaptionDocument([2, 4, 1], groupClass, "caption-word"),
+      );
+      expect(groups.map((group) => group?.length)).toEqual([2, 4, 1]);
+    },
+  );
+
+  it("does not count nested caption lines as additional groups", () => {
+    const doc = createCaptionDocument([2, 4, 1]);
+    for (const group of doc.querySelectorAll(".caption-group")) {
+      const line = doc.createElement("div");
+      line.className = "caption-line";
+      line.append(...group.childNodes);
+      group.appendChild(line);
+    }
+    expect(importCaptions(doc).groups.map((group) => group?.length)).toEqual([2, 4, 1]);
+  });
+
+  it.each([
+    { name: "absent", sizes: [] },
+    { name: "incomplete", sizes: [2, 1] },
+    { name: "empty", sizes: [0, 0] },
+  ])("uses default grouping without losing words when DOM groups are $name", ({ sizes }) => {
+    const { groups } = importCaptions(createCaptionDocument(sizes));
+    expect(groups).toEqual([
+      transcript.slice(0, 5).map((word) => word.text),
+      transcript.slice(5).map((word) => word.text),
+    ]);
+  });
+
+  it("keeps authored boundaries when generated captions are imported again", () => {
+    const original = importCaptions(createCaptionDocument([2, 4, 1]));
+    const html = generateCaptionHtml(original.model);
+    const doc = document.implementation.createHTMLDocument();
+    doc.body.innerHTML = html;
+    const template = doc.querySelector("template");
+    if (!template) throw new Error("Expected generated caption template");
+    doc.body.replaceChildren(template.content.cloneNode(true));
+    const script = doc.querySelector("script")?.textContent;
+    if (!script) throw new Error("Expected generated caption script");
+    // Execute only our generator's output to create its real group and word elements.
+    new Function("document", "window", "gsap", script)(
+      doc,
+      {},
+      {
+        timeline: () => ({ to() {} }),
+      },
+    );
+    expect(importCaptions(doc, html).groups).toEqual([
+      transcript.slice(0, 2).map((word) => word.text),
+      transcript.slice(2, 6).map((word) => word.text),
+      transcript.slice(6).map((word) => word.text),
+    ]);
+  });
+});

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,
@@ -38,23 +46,32 @@ export function buildCaptionModel(
   transcript: TranscriptWord[],
   options: BuildOptions,
 ): CaptionModel {
-  const { width, height, duration, wordsPerGroup = 5 } = options;
+  const { wordsPerGroup = 5 } = options;
+  const wordGroups: TranscriptWord[][] = [];
+  for (let offset = 0; offset < transcript.length; offset += wordsPerGroup) {
+    wordGroups.push(transcript.slice(offset, offset + wordsPerGroup));
+  }
+  return buildGroupedCaptionModel(wordGroups, options);
+}
 
+function buildGroupedCaptionModel(
+  wordGroups: TranscriptWord[][],
+  { width, height, duration }: BuildOptions,
+): CaptionModel {
   const segments = new Map<string, CaptionSegment>();
   const groups = new Map<string, CaptionGroup>();
   const groupOrder: string[] = [];
 
-  // Chunk the transcript into groups of wordsPerGroup
-  for (let groupIdx = 0; groupIdx < transcript.length; groupIdx += wordsPerGroup) {
-    const chunk = transcript.slice(groupIdx, groupIdx + wordsPerGroup);
-    const groupId = `group-${groupIdx / wordsPerGroup}`;
+  for (const chunk of wordGroups) {
+    const groupId = `group-${groups.size}`;
     const segmentIds: string[] = [];
 
     chunk.forEach((word, wordIdx) => {
-      const segmentId = `segment-${groupIdx + wordIdx}`;
+      const segmentIndex = segments.size;
+      const segmentId = `segment-${segmentIndex}`;
       const segment: CaptionSegment = {
         id: segmentId,
-        wordId: word.id ?? `w${groupIdx + wordIdx}`,
+        wordId: word.id ?? `w${segmentIndex}`,
         text: word.text,
         start: word.start,
         end: word.end,
@@ -96,30 +113,50 @@ export function buildCaptionModel(
   };
 }
 
+const GROUP_SELECTOR = ".caption-group, .caption-line, .caption-block";
+const WORD_SELECTOR = ".word, .caption-word";
+
+/** Read outer groups in transcript order; return null if their word counts do not match. */
+function readTranscriptGroups(transcript: TranscriptWord[], groupEls: NodeListOf<Element>) {
+  const wordGroups: TranscriptWord[][] = [];
+  let offset = 0;
+  for (const group of groupEls) {
+    // Caption templates can nest layout lines inside a single timed group.
+    if (group.parentElement?.closest(GROUP_SELECTOR)) continue;
+    const size = group.querySelectorAll(WORD_SELECTOR).length;
+    if (size === 0) continue;
+    wordGroups.push(transcript.slice(offset, offset + size));
+    offset += size;
+  }
+  return offset === transcript.length ? wordGroups : null;
+}
+
 /**
  * Extracts a transcript word array from caption composition source code.
  *
  * 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 [];
   }
@@ -130,7 +167,8 @@ export function extractTranscript(source: string): TranscriptWord[] {
  * from the source and reading computed styles from rendered elements.
  *
  * Runs in the Studio (outside the iframe). Reads computed styles from iframe DOM
- * elements to build a fully-styled CaptionModel.
+ * elements to build a fully-styled CaptionModel. Preserves DOM group boundaries
+ * when they account for every transcript word; otherwise uses default grouping.
  *
  * Returns null if no transcript is found in the source.
  */
@@ -149,25 +187,19 @@ export function parseCaptionComposition(
   }
 
   // Step 2: Look for grouping and word elements in the iframe DOM
-  const groupEls = iframeDoc.querySelectorAll(".caption-group, .caption-line, .caption-block");
-  const wordEls = iframeDoc.querySelectorAll(".word, .caption-word");
-
-  // Step 3: Infer wordsPerGroup from element counts
-  let wordsPerGroup = 5; // default
-  if (groupEls.length > 0 && wordEls.length > 0) {
-    wordsPerGroup = Math.round(wordEls.length / groupEls.length);
-    if (wordsPerGroup < 1) {
-      wordsPerGroup = 1;
-    }
-  }
+  const groupEls = iframeDoc.querySelectorAll(GROUP_SELECTOR);
+  const wordEls = iframeDoc.querySelectorAll(WORD_SELECTOR);
 
-  // Step 4: Build the caption model with inferred grouping
-  const model = buildCaptionModel(transcript, {
+  // Preserve authored boundaries when the DOM accounts for the complete transcript.
+  const wordGroups = readTranscriptGroups(transcript, groupEls);
+  const options = {
     width: compositionWidth,
     height: compositionHeight,
     duration: compositionDuration,
-    wordsPerGroup,
-  });
+  };
+  const model = wordGroups
+    ? buildGroupedCaptionModel(wordGroups, options)
+    : buildCaptionModel(transcript, options);
 
   // Step 5: Read computed styles from the first word or group element
   const firstWordEl = wordEls.item(0) as Element | null;
@@ -262,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/StudioRightPanels.tsx

@@ -8,6 +8,7 @@ import { BlockParamsPanel } from "./editor/BlockParamsPanel";
 import { RenderQueuePanel } from "./renders/RenderQueuePanel";
 import { SlideshowPanel } from "./panels/SlideshowPanel";
 import { VariablesPanel } from "./panels/VariablesPanel";
+import { MotionBlurPanel } from "./panels/MotionBlurPanel";
 import { Dock } from "./dock/Dock";
 import { useDockLayoutStore } from "./dock/dockLayoutStore";
 import type { RenderJob } from "./renders/useRenderQueue";
@@ -300,6 +301,14 @@ export const StudioRightPanels = memo(function StudioRightPanels({
           recordEdit={recordEdit}
         />
       </Dock.Panel>
+      <Dock.Panel id="motionBlur">
+        <MotionBlurPanel
+          sdkSession={sdkSession}
+          publishSdkSession={publishSdkSession}
+          reloadPreview={reloadPreview}
+          recordEdit={recordEdit}
+        />
+      </Dock.Panel>
       <Dock.Panel id="slideshow">
         <SlideshowPanel
           scenes={slideshowScenes}

package/src/components/dock/DockTab.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useSyncExternalStore } from "react";
 import {
+  Aperture,
   BracketsCurly,
   ChartBarHorizontal,
   Code,
@@ -29,6 +30,7 @@ const TAB_ICONS: Record<PanelId, Icon> = {
   renders: FilmSlate,
   variables: BracketsCurly,
   slideshow: Presentation,
+  motionBlur: Aperture,
 };
 
 /**

package/src/components/dock/dockAccessibility.test.ts

@@ -158,9 +158,9 @@ describe("dock tab strips", () => {
   it("jump to the first and last tab with Home and End", () => {
     const tabs = tabsOf("design");
     press(tabs[0] as HTMLElement, "End");
-    expect(api.getPanel("design")?.group.activePanel?.id).toBe("variables");
-    expect(document.activeElement).toBe(tabs[3]);
-    press(tabs[3] as HTMLElement, "Home");
+    expect(api.getPanel("design")?.group.activePanel?.id).toBe("motionBlur");
+    expect(document.activeElement).toBe(tabs[4]);
+    press(tabs[4] as HTMLElement, "Home");
     expect(api.getPanel("design")?.group.activePanel?.id).toBe("design");
   });
 });

package/src/components/dock/dockLayout.ts

@@ -9,7 +9,7 @@ const MIN_SIDE_W = 200;
 const MIN_SIDE_W_FLOOR = 120;
 const DEFAULT_TIMELINE_H = 360;
 const DEFAULT_LEFT = ["compositions", "assets", "code", "catalog"] as const;
-const DEFAULT_RIGHT = ["design", "layers", "renders", "variables"] as const;
+const DEFAULT_RIGHT = ["design", "layers", "renders", "variables", "motionBlur"] as const;
 
 /** Preferred side widths; when they overflow the preview's floor the right yields first, then the left. */
 export function defaultSideWidths(viewportWidth: number) {

package/src/components/dock/panelRegistry.ts

@@ -12,6 +12,7 @@ export const PANEL_IDS = [
   "renders",
   "variables",
   "slideshow",
+  "motionBlur",
 ] as const;
 
 export type PanelId = (typeof PANEL_IDS)[number];
@@ -56,6 +57,11 @@ export const PANEL_DEFINITIONS = {
   renders: { title: "Renders", zone: "right", reopen: { near: "design", direction: "within" } },
   variables: { title: "Variables", zone: "right", reopen: { near: "design", direction: "within" } },
   slideshow: { title: "Slideshow", zone: "right", reopen: { near: "design", direction: "within" } },
+  motionBlur: {
+    title: "Blur",
+    zone: "right",
+    reopen: { near: "design", direction: "within" },
+  },
 } as const satisfies Record<PanelId, PanelDefinition>;
 
 export function isPanelId(value: unknown): value is PanelId {