@pixel-point/toolcraft 0.0.6 → 0.0.8

package/templates/starter/docs/toolcraft/schema-reference.md

@@ -45,7 +45,7 @@ export: {
 - `appearance.background` or `scene.background` as a `color` control;
 - `export.includeBackground` as a boolean/options control.
 
-PNG exporters should call `createToolcraftPngExportCanvas({ background, includeBackground, resolution, state, render })`, where `background`, `includeBackground`, and `resolution` come from runtime state. `includeBackground` controls only PNG alpha; live preview, workspace canvas backing, and video export keep the product background. For every app with `Export PNG`, `resolution` comes from `export.image.resolution`: `2k`, `4k`, and `8k` render actual 2048/4096/8192px long-edge PNGs. `current` or omitted resolution falls back to retina sizing. Video export always includes the product background, uses `getToolcraftRetinaExportSize`, and must prove exported metadata duration matches the runtime timeline duration.
+PNG exporters should call `createToolcraftPngExportCanvas({ background, includeBackground, resolution, state, render })`, where `background`, `includeBackground`, and `resolution` come from runtime state. Live preview renderers should call `shouldIncludeToolcraftPreviewBackground(state)` and hide only the product-rendered background when it returns false; do not hide or replace the Toolcraft canvas shell/backing. For every app with `Export PNG`, `resolution` comes from `export.image.resolution`: `2k`, `4k`, and `8k` render actual 2048/4096/8192px long-edge PNGs. `current` or omitted resolution falls back to retina sizing. Video export always includes the product background, uses `getToolcraftRetinaExportSize`, and must prove exported metadata duration matches the runtime timeline duration.
 
 Every app with `Export PNG` exposes a separate `Image Export` controls section. For still-output apps it sits directly above sticky footer actions. For animated apps with both `Export PNG` and `Export Video`, it sits immediately before `Video Export`:
 
@@ -140,7 +140,7 @@ Resolved `canvas.size` exists for every canvas app, but visible `Aspect ratio`,
 
 When the user manually edits `Canvas width` or `Canvas height`, the runtime treats that as an exact custom output size. It keeps the typed dimension, keeps the other dimension unchanged, switches `Aspect ratio` to `Custom`, and shows the reduced current ratio in the custom ratio inputs. Only selecting an aspect preset may resize both dimensions from a canonical preset.
 
-For non-vector raster, Canvas 2D, WebGL, or WebGPU previews, set `canvas.renderScale: true`. Runtime appends `Resolution scale` after canvas sizing in the first technical `Setup` section. The slider ranges from `1x` to `2x`, defaults to `2x`, and changes the renderer backing pixels without changing the visible CSS size or product output dimensions. Adding or enabling this slider requires a full `pnpm verify:perf` checkpoint. Performance fixes must preserve the selected scale and keep the canvas responsive while dragging sliders or other high-frequency controls at that scale. Diagnose whether lag comes from renderer technique, React update frequency, decoded media, shader/program setup, buffer uploads, layout work, stale async renders, or animation scheduling before reducing quality. Do not silently downsample, stretch a lower-resolution backing canvas, blur output, or clamp `canvas.renderScale` below the user's chosen value. Do not enable it for DOM/SVG/vector-native previews; use native vector rendering for those.
+For non-vector raster, Canvas 2D, WebGL, or WebGPU previews, set `canvas.renderScale: true`. Runtime appends `Resolution scale` after canvas sizing in the first technical `Setup` section. The slider ranges from `1x` to `2x`, defaults to `2x`, and changes the renderer backing pixels without changing the visible CSS size or product output dimensions. Adding or enabling this slider requires targeted browser evidence that the canvas stays responsive while dragging sliders or other high-frequency controls at the selected scale. Full `pnpm verify:perf` is required only for the first working app version or explicit performance complaints. Performance fixes must preserve the selected scale. Diagnose whether lag comes from renderer technique, React update frequency, decoded media, shader/program setup, buffer uploads, layout work, stale async renders, or animation scheduling before reducing quality. Do not silently downsample, stretch a lower-resolution backing canvas, blur output, or clamp `canvas.renderScale` below the user's chosen value. Do not enable it for DOM/SVG/vector-native previews; use native vector rendering for those.
 
 ## Panels
 
@@ -161,12 +161,13 @@ Use built-ins before custom controls. Unknown `type` values render nothing unles
 | `anchorGrid` | Anchor picker | `defaultValue`, `target` |
 | `channelMixer` | RGB-only channel matrix mixer with R/G/B tabs and Red/Green/Blue source sliders | `defaultValue`, `target`, `label` |
 | `checkbox` | Checkbox field | `defaultValue`, `target`, `label` |
+| `collectionActions` | Add/remove buttons for repeatable product entities and their runtime-backed item controls | `defaultValue: []`, `itemControl`, `itemDefaultValue`, `itemLabel`, `minItems`, `recommendedMaxItems`, `hardMaxItems`, `target` |
 | `code` | Multiline textarea | `defaultValue`, `target`, `label` |
 | `color` | Hex color picker | `defaultValue: { hex }`, `target`, `label` |
 | `colorOpacity` | Hex color picker plus opacity percent input | `defaultValue: { hex, opacity }`, `target`, `label` |
 | `curves` | RGB or single curve editor | `defaultValue`, `target`, `variant: "single"`, `interpolation: "smooth" \| "monotone"` |
-| `fileDrop` | Upload/drop input | `accept`, `multiple`, `target` |
-| `fontPicker` | Font preview select with popup, category search, weight, size, text case, text color/opacity, letter spacing, and line height; product text must consume `fontId`, `fontWeight`, `fontSize`, `letterSpacing`, `lineHeight`, `textCase`, `color`, and `opacity` | `defaultValue: { fontId, fontWeight, fontSize, letterSpacing, lineHeight, textCase, color, opacity }`, `target` |
+| `fileDrop` | Upload/drop input; `assetKind: "image"` owns image previews and `assetKind: "file"` owns sortable arbitrary file lists | `assetKind`, `accept`, `multiple`, `defaultValue`, `target` |
+| `fontPicker` | Font preview select with popup, category search, weight, size, text case, text color/opacity, letter spacing, and line height; product text must consume `fontId`, `fontWeight`, `fontSize`, `letterSpacing`, `lineHeight`, `textCase`, `color`, and `opacity`; default text color is `#FFFFFF` at `100` opacity | `defaultValue: { fontId, fontWeight, fontSize, letterSpacing, lineHeight, textCase, color, opacity }`, `target` |
 | `gradient` | Gradient editor | `defaultValue: { angle, gradientType, stops }`, `target` |
 | `imagePicker` | Image choice grid | `items`, `defaultValue`, `target` |
 | `palette` | Constrained design-token palette picker for family + shade | `defaultValue: { family, shade }`, `target` |
@@ -184,6 +185,8 @@ Use built-ins before custom controls. Unknown `type` values render nothing unles
 
 For `slider` and `rangeSlider`, `unit` is a measurement or scale suffix, not the entity being counted. Use units such as `%`, `px`, `°`, `x`, `s`, `ms`, `fps`, `rows`, or `cols` only when they clarify the number. Do not add repeated nouns such as `letters`, `shapes`, `words`, `symbols`, `items`, `particles`, or `layers` when the label or section already names that entity. If the value needs a noun, rename the label or section. Word or acronym units, when truly needed, render with a space (`5 cols`, `17 fps`); compact symbol/CSS units stay tight (`70%`, `24px`).
 
+Use `collectionActions` when the product owns a growable/shrinkable item list. `minItems` protects the smallest valid output, `recommendedMaxItems` is only a design recommendation, and `hardMaxItems` is valid only for a real product or technical limit. Adding/removing items must update the runtime array and the renderer/export must consume that same array. Do not pair a count slider with hidden fixed item controls when the user needs to add or remove actual entities. The collection label is on the left and remove/add buttons stay on the right. Homogeneous repeated items do not show visible per-item labels when the collection label already names the group. `itemControl.type` supports normal item built-ins such as `color`, `colorOpacity`, `text`, `select`, `segmented`, `slider`, `switch`, `checkbox`, `rangeInput`, and `fontPicker`; item controls still follow normal density rules, so plain colors use equal 50% columns when they fit. Use `fontPicker` as the item control when each repeated item is a text style or typography entity; do not split its font, weight, size, case, color/opacity, letter spacing, or line height into sibling collection fields.
+
 ## Control Selection Inventory
 
 Before writing schema controls, map product needs to built-ins by value model, not visual similarity.
@@ -235,6 +238,8 @@ Section expand/collapse uses the standard runtime height/opacity animation. Do n
 
 Ordinary section collapsed/expanded state persists as a per-app runtime UI preference. It is not undo/redo state, not settings import/export state, and `Reset controls` must not clear it. Runtime technical `Setup` / settings sections and sticky footer `Export` sections are not collapsible.
 
+Ordinary section headers expose the runtime section reset action before the collapse button. It dispatches `controls.resetTargets` and restores only that section's control targets to their schema `defaultValue`.
+
 Ordinary controls-panel body sections use 8px top spacing and 24px bottom spacing for their control content. Runtime technical `Setup` / settings sections use 12px top and bottom spacing to match side padding. Sticky footer action sections keep their dedicated spacing.
 
 Large built-in compound controls inside mixed sections render content-width internal dividers with 18px between each rendered divider and the control content. If a compound control is the first item in that section, render only its bottom internal divider and remove the top internal padding. If a section contains exactly one control, whether simple or compound, only the parent section dividers render. Single `curves` are not compound for dividers; RGB `curves` are compound.
@@ -249,7 +254,7 @@ If a target prefix has to be split across sections, the spec must name the workf
 
 Switch and checkbox labels name the setting context only. Do not prefix them with `Enable` or `Disable`; use `CRT`, `Glow`, `Loop`, or `Guides` instead. If the nearest section title already names the context, do not duplicate it as the visible toggle label. Use a short contextual label such as `Include` or, only for icon-only visual toggles, `label: false` with the product meaning in `target` and `description`.
 
-Inline two-column groups are preferred when controls tune one close product meaning and labels/values fit. Short numeric text pairs can be inline. Related short `select` pairs can be inline, especially workflow pairs such as `Format` + `Resolution`, `Codec` + `Profile`, or `Width unit` + `Height unit`. Use stacked one-control rows only as a fit fallback when a label, selected value, or option text would clip, truncate, or lose padding; record that fallback reason in the spec or worklog. A short numeric/text field may also pair with one related plain `color` field when both configure the same entity, such as `Mask size` and `Color` inside `Mask`. `colorOpacity` never renders in inline two-column groups; if either color control has opacity, keep the controls stacked. Color controls show visible field labels in mixed sections that contain any non-color control. Omit visible color labels only in color-only sections. Mixed inline rows require visible labels on every field, except the required Background row where the color control uses `label: false` because the section title owns the context. Color fields in other mixed rows must not be unlabeled. Two adjacent `switch` or `checkbox` controls for the same product entity must share one inline row when both visible labels fit without truncation; the runtime auto-pairs safe adjacent toggles by target entity, and schemas should stack them only when either label is too long. A single `switch` or `checkbox` may share an inline row with one related parameter control when the toggle label fits and both controls edit the same entity; shorten the toggle label when the section title already supplies context. Toggle plus parameter rows are equal-width two-column rows: each control occupies one half, never intrinsic toggle width plus remaining space. The required Background row uses `Include` plus unlabeled background color. Schema `slider` and `rangeSlider` controls always stay stacked at full width; the only built-in exception is the paired letter-spacing and line-height footer sliders inside `fontPicker`. Do not place sibling controls for case, color, opacity, size, weight, letter spacing, or line height when the same text entity already uses `fontPicker`.
+Inline two-column groups are preferred when controls tune one close product meaning and labels/values fit. Short numeric text pairs can be inline. Related short `select` pairs can be inline, especially workflow pairs such as `Format` + `Resolution`, `Codec` + `Profile`, or `Width unit` + `Height unit`. Use stacked one-control rows only as a fit fallback when a label, selected value, or option text would clip, truncate, or lose padding; record that fallback reason in the spec or worklog. A short numeric/text field may also pair with one related plain `color` field when both configure the same entity, such as `Mask size` and `Color` inside `Mask`. `colorOpacity` never renders in inline two-column groups; if either color control has opacity, keep the controls stacked. Color labels are semantic, not automatic: decide once for the whole color group, omit per-item labels such as `Color 1` for palette variation banks like `Accent Shades` or `Bead Colors`, and do not mix labeled and unlabeled items inside that bank. Sibling controls like `Spread` or `Randomness` do not force item labels; keep visible labels only when colors edit distinct roles such as `Fill`, `Stroke`, `Background`, `Connector`, or `Object`. Related plain color banks render two per row, and an odd trailing plain color remains half-width instead of stretching to a full row. Mixed inline rows require visible labels on every field except the required Background row and palette variation color banks whose group/section label already names the bank. Two adjacent `switch` or `checkbox` controls for the same product entity must share one inline row when both visible labels fit without truncation; the runtime auto-pairs safe adjacent toggles by target entity, and schemas should stack them only when either label is too long. A single `switch` or `checkbox` may share an inline row with one related parameter control when the toggle label fits and both controls edit the same entity; shorten the toggle label when the section title already supplies context. Toggle plus parameter rows are equal-width two-column rows: each control occupies one half, never intrinsic toggle width plus remaining space. The required Background row uses `Include` plus unlabeled background color. Schema `slider` and `rangeSlider` controls always stay stacked at full width; the only built-in exception is the paired letter-spacing and line-height footer sliders inside `fontPicker`. Do not place sibling controls for case, color, opacity, size, weight, letter spacing, or line height when the same text entity already uses `fontPicker`.
 
 `rangeSlider` is always a full-width two-thumb control. Do not include it in `layoutGroups`. Its `defaultValue` must start with different lower and upper values, such as `[20, 80]`, so the two handles do not collapse into one apparent slider. Manual range labels accept built-in separators such as slash, hyphen, spaces, and dashes.
 
@@ -261,7 +266,7 @@ Order controls by decision flow inside each section:
 - `mode`: mode, type, filter, blend, style, and preset selectors;
 - `primary`, `spatial`, `color`: core product parameters;
 - `strength`: intensity, opacity, scale, depth;
-- `detail`: grain, noise, blur, density, radius, quality;
+- `detail`: noise, texture, blur, density, radius, quality;
 - `advanced`: secondary tuning;
 - `action`: footer actions.
 

package/templates/starter/docs/toolcraft/workflow.md

@@ -19,7 +19,7 @@ Do not edit implementation files until this preflight is complete.
 
 ## Task Routing
 
-Use the smallest reading set that covers the changed surface.
+Use the smallest reading set that covers the changed surface. If a task touches multiple surfaces, combine every matching row instead of picking only the closest one.
 
 | Task type | Read before editing |
 | --- | --- |
@@ -29,7 +29,7 @@ Use the smallest reading set that covers the changed surface.
 | Renderer, canvas output, visual technique | `renderer-technique.md`, `performance.md`, `acceptance-testing.md` |
 | Timeline, keyframes, animation transport | `decision-contract.md`, `component-rules.md`, `acceptance-testing.md`, `performance.md` |
 | Layers | `decision-contract.md`, `component-rules.md`, `acceptance-testing.md` |
-| Export, copy, media, background | `schema-reference.md`, `component-rules.md`, `acceptance-testing.md` |
+| Export, copy, media, background | `schema-reference.md`, `component-rules.md`, `acceptance-testing.md`, `performance.md` |
 | Broken control, visual mismatch, failed build, export bug, performance issue | `decision-contract.md`, the relevant component/runtime doc, and the failing test/log first |
 | Figma implementation | Use Figma MCP/design context, then `assembly-workflow.md` and the relevant component docs |
 
@@ -73,15 +73,12 @@ Choose the tier from `AGENTS.md` before editing. Use the tier to decide checks.
 
 - Tier 0-1: targeted docs/typecheck/unit plus focused browser when visual.
 - Tier 2: `pnpm verify:quick` plus relevant browser acceptance.
-- Tier 3: `pnpm verify:quick`, targeted browser acceptance, and relevant `pnpm verify:perf` scenarios.
-- Tier 4: `pnpm verify:final`, then start `pnpm dev` for the local URL.
+- Tier 3: `pnpm verify:quick`, targeted browser acceptance, and targeted performance scenarios only for touched workload/viewport/export paths.
+- Tier 4: `pnpm verify:final`; add `pnpm verify:perf` only for the first working app version or explicit performance complaints, then start `pnpm dev` for the local URL.
 
-Run a full performance checkpoint with `pnpm verify:perf` when:
+Run a full performance checkpoint with `pnpm verify:perf` only when:
 
 - the first working version of the app exists;
-- renderer, canvas, animation, export, timeline, or layers change;
-- a bug that previously broke functionality is fixed;
-- a performance optimization lands;
-- the user asks to optimize performance, fix lag, remove jank, speed up animation, or stabilize drag/zoom.
+- the user explicitly asks to optimize performance, fix lag, remove jank, speed up animation, stabilize drag/zoom, or otherwise complains about performance.
 
-Fast feature loops may defer full performance only when none of these checkpoint triggers apply. Record the deferred check and reason in the worklog.
+Fast feature loops after the first working version do not run the full performance suite by default. Renderer, canvas, animation, export, timeline, layers, `canvas.renderScale`, bug fixes, and performance-sensitive controls still need targeted functional/browser checks first, plus targeted performance scenarios only when they directly exercise the touched path. Record any skipped full performance run and reason in the worklog.

package/templates/starter/e2e/app-performance.spec.ts

@@ -110,12 +110,49 @@ function getScenarioBudgetAssertionPattern(scenarioId: string): RegExp {
 
 function getScenarioStressFixturePattern(scenarioId: string): RegExp {
   return new RegExp(
-    `getToolcraftPerformanceStressValue(?:\\s*<[^>]+>)?\\s*\\(\\s*(?:starterPerformance|appPerformance)\\s*,\\s*(["'\`])${escapeRegExp(
+    `(?:getToolcraftPerformanceStressValue(?:\\s*<[^>]+>)?\\s*\\(\\s*(?:starterPerformance|appPerformance)|dragToolcraftSliderToPerformanceStressValue\\s*\\([\\s\\S]*?(?:starterPerformance|appPerformance)|applyToolcraftPerformanceStressFixture\\s*\\(\\s*page\\s*,\\s*(?:starterPerformance|appPerformance))\\s*,\\s*(["'\`])${escapeRegExp(
       scenarioId,
     )}\\1`,
   );
 }
 
+function getScenarioWorkloadFixturePattern(scenarioId: string): RegExp {
+  return new RegExp(
+    `(?:getToolcraftPerformanceWorkloadValue(?:\\s*<[^>]+>)?\\s*\\(\\s*(?:starterPerformance|appPerformance)|applyToolcraftPerformanceWorkloadFixture\\s*\\(\\s*page\\s*,\\s*(?:starterPerformance|appPerformance))\\s*,\\s*(["'\`])${escapeRegExp(
+      scenarioId,
+    )}\\1`,
+  );
+}
+
+function getScenarioCustomStressFixturePattern(scenarioId: string): RegExp {
+  return new RegExp(
+    `applyToolcraftPerformanceStressFixture\\s*\\(\\s*page\\s*,\\s*(?:starterPerformance|appPerformance)\\s*,\\s*(["'\`])${escapeRegExp(
+      scenarioId,
+    )}\\1`,
+  );
+}
+
+function getScenarioCustomWorkloadFixturePattern(scenarioId: string): RegExp {
+  return new RegExp(
+    `applyToolcraftPerformanceWorkloadFixture\\s*\\(\\s*page\\s*,\\s*(?:starterPerformance|appPerformance)\\s*,\\s*(["'\`])${escapeRegExp(
+      scenarioId,
+    )}\\1`,
+  );
+}
+
+function getScenarioSliderStressValuePattern(scenarioId: string): RegExp {
+  return new RegExp(
+    `dragToolcraftSliderToPerformanceStressValue\\s*\\([\\s\\S]*?(?:starterPerformance|appPerformance)\\s*,\\s*(["'\`])${escapeRegExp(
+      scenarioId,
+    )}\\1`,
+  );
+}
+
+function getFirstMatchIndex(source: string, pattern: RegExp): number {
+  const match = pattern.exec(source);
+  return match?.index ?? -1;
+}
+
 test("browser performance matrix points at real Playwright tests", () => {
   const browserTestSources = readSiblingBrowserTestSources();
 
@@ -154,15 +191,71 @@ test("browser performance tests use real Toolcraft interactions", () => {
       continue;
     }
 
-    if (scenario.workload) {
+    if (scenario.workload || scenario.stress === true || scenario.stressFixture) {
       expect(
         scenario.stressFixture,
-        `${scenario.id} workload scenario must declare stressFixture so browser tests cannot use toy inputs.`,
+        `${scenario.id} stress scenario must declare stressFixture so browser tests cannot use toy inputs.`,
       ).toBeDefined();
       expect(
         browserTestSource,
         `${scenario.id} must read the declared stress fixture with getToolcraftPerformanceStressValue(appPerformance, "${scenario.id}") before measuring performance.`,
       ).toMatch(getScenarioStressFixturePattern(scenario.id));
+
+      if (
+        scenario.stressFixture?.kind === "custom" &&
+        typeof scenario.stressFixture.value === "object" &&
+        scenario.stressFixture.value !== null &&
+        !Array.isArray(scenario.stressFixture.value)
+      ) {
+        expect(
+          browserTestSource,
+          `${scenario.id} custom stress fixture must be applied with applyToolcraftPerformanceStressFixture so every heavy-state key is mapped through the real UI before measurement.`,
+        ).toMatch(getScenarioCustomStressFixturePattern(scenario.id));
+      }
+    }
+
+    if (scenario.workloadFixture) {
+      const workloadFixtureIndex = getFirstMatchIndex(
+        browserTestSource,
+        getScenarioWorkloadFixturePattern(scenario.id),
+      );
+      const stressFixtureIndex = getFirstMatchIndex(
+        browserTestSource,
+        getScenarioStressFixturePattern(scenario.id),
+      );
+      const budgetAssertionIndex = getFirstMatchIndex(
+        browserTestSource,
+        getScenarioBudgetAssertionPattern(scenario.id),
+      );
+
+      expect(
+        browserTestSource,
+        `${scenario.id} must apply the declared workloadFixture with getToolcraftPerformanceWorkloadValue(appPerformance, "${scenario.id}") or applyToolcraftPerformanceWorkloadFixture before measuring performance.`,
+      ).toMatch(getScenarioWorkloadFixturePattern(scenario.id));
+      expect(
+        workloadFixtureIndex,
+        `${scenario.id} must apply workloadFixture before stressFixture so the measured control runs inside the heavy app baseline.`,
+      ).toBeGreaterThanOrEqual(0);
+      expect(
+        stressFixtureIndex,
+        `${scenario.id} must read/apply stressFixture after workloadFixture.`,
+      ).toBeGreaterThan(workloadFixtureIndex);
+      expect(
+        budgetAssertionIndex,
+        `${scenario.id} must assert budget only after workloadFixture is applied.`,
+      ).toBeGreaterThan(workloadFixtureIndex);
+
+      if (
+        scenario.workloadFixture.kind === "custom" &&
+        typeof scenario.workloadFixture.value === "object" &&
+        scenario.workloadFixture.value !== null &&
+        !Array.isArray(scenario.workloadFixture.value)
+      ) {
+        expect(
+          browserTestSource,
+          `${scenario.id} custom workload fixture must be applied with applyToolcraftPerformanceWorkloadFixture so every baseline-state key is mapped through the real UI before measurement.`,
+        ).toMatch(getScenarioCustomWorkloadFixturePattern(scenario.id));
+      }
     }
 
     if (scenario.interaction === "control-drag") {
@@ -190,6 +283,13 @@ test("browser performance tests use real Toolcraft interactions", () => {
           `${scenario.id} drags discrete slider "${scenario.controlLabel}" and must verify Toolcraft marker-budget behavior plus smooth drag.`,
         ).toMatch(/expectToolcraftDiscreteSliderDragSmoothness\s*\(/);
       }
+
+      if (scenario.workload && scenario.controlLabel) {
+        expect(
+          browserTestSource,
+          `${scenario.id} workload slider drags must apply the exact stressFixture.value with dragToolcraftSliderToPerformanceStressValue instead of hand-dividing by max or typing a ratio.`,
+        ).toMatch(getScenarioSliderStressValuePattern(scenario.id));
+      }
     }
 
     if (scenario.interaction === "control-change") {
@@ -284,6 +384,39 @@ test("browser performance tests use real Toolcraft interactions", () => {
       ).not.toMatch(/canvas\.setOffset|canvas\.panBy|canvas\.zoom|Zoom in|Zoom out|Center canvas/);
     }
 
+    if (scenario.interaction === "timeline-playback") {
+      expect(
+        browserTestSource,
+        `${scenario.id} must use the real timeline playback UI while measuring frames.`,
+      ).toMatch(/measureToolcraftInteraction\s*\([\s\S]*(Play playback|Pause playback|timeline-playback|data-slot=["']timeline-playback)/);
+      expect(
+        browserTestSource,
+        `${scenario.id} must not satisfy timeline playback performance by dispatching timeline state directly.`,
+      ).not.toMatch(/timeline\.setCurrentTime|timeline\.setPlaying|timeline\.play|timeline\.pause/);
+    }
+
+    if (scenario.interaction === "timeline-scrub") {
+      expect(
+        browserTestSource,
+        `${scenario.id} must scrub the real timeline UI while measuring interaction responsiveness.`,
+      ).toMatch(/measureToolcraftInteraction\s*\([\s\S]*(Playback position|timeline-playback-handle|data-slot=["']timeline-playback-handle|page\.mouse\.(?:down|move|up))/);
+      expect(
+        browserTestSource,
+        `${scenario.id} must not satisfy timeline scrub performance by setting timeline time directly.`,
+      ).not.toMatch(/timeline\.setCurrentTime|canvas\.setCurrentTime/);
+    }
+
+    if (scenario.interaction === "mask-drag") {
+      expect(
+        browserTestSource,
+        `${scenario.id} must measure a real canvas handle/mask drag.`,
+      ).toMatch(/measureToolcraftInteraction\s*\([\s\S]*dragCanvasHandle\s*\(/);
+      expect(
+        browserTestSource,
+        `${scenario.id} must not fake mask drag coverage with direct runtime state mutation.`,
+      ).not.toMatch(/mask\.(?:set|update|move)|canvas\.setOffset|canvas\.panBy/);
+    }
+
     if (scenario.interaction === "viewport-zoom-stress") {
       expect(
         browserTestSource,

package/templates/starter/e2e/performance-helpers.ts

@@ -21,6 +21,26 @@ export type ToolcraftInteractionOptions = {
   settleMs?: number;
 };
 
+export type ToolcraftStressFixtureApplyContext = {
+  config: ToolcraftPerformanceConfig;
+  fixture: Record<string, unknown>;
+  key: string;
+  page: Page;
+  scenarioId: string;
+};
+
+export type ToolcraftStressFixtureAppliers = Record<
+  string,
+  (
+    value: unknown,
+    context: ToolcraftStressFixtureApplyContext,
+  ) => Promise<void> | void
+>;
+
+function isToolcraftStressFixtureObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
 export async function startToolcraftFrameProbe(
   page: Page,
 ): Promise<() => Promise<ToolcraftFrameProbeResult>> {
@@ -371,6 +391,161 @@ export async function dragToolcraftSliderByLabel(
   await page.mouse.up();
 }
 
+export async function dragToolcraftSliderToValue(
+  page: Page,
+  label: string,
+  value: number,
+): Promise<void> {
+  const field = await getToolcraftFieldByLabel(page, label);
+  const slider = field.locator('[data-slot="slider"], [role="slider"]').first();
+
+  await expect(slider, `Toolcraft slider "${label}" should be visible`).toBeVisible();
+
+  const range = await slider.evaluate((element) => {
+    const htmlElement = element as HTMLElement;
+    const min = Number(
+      htmlElement.getAttribute("aria-valuemin") ??
+        (htmlElement as HTMLInputElement).min ??
+        "0",
+    );
+    const max = Number(
+      htmlElement.getAttribute("aria-valuemax") ??
+        (htmlElement as HTMLInputElement).max ??
+        "100",
+    );
+
+    return {
+      max: Number.isFinite(max) ? max : 100,
+      min: Number.isFinite(min) ? min : 0,
+    };
+  });
+  const denominator = range.max - range.min;
+  const ratio = denominator === 0 ? 0 : (value - range.min) / denominator;
+
+  await dragToolcraftSliderByLabel(page, label, Math.min(1, Math.max(0, ratio)));
+}
+
+export async function dragToolcraftSliderToPerformanceStressValue(
+  page: Page,
+  label: string,
+  config: ToolcraftPerformanceConfig,
+  scenarioId: string,
+): Promise<void> {
+  const value = getToolcraftPerformanceStressValue(config, scenarioId);
+
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" must provide a numeric stressFixture.value for slider "${label}".`,
+    );
+  }
+
+  await dragToolcraftSliderToValue(page, label, value);
+}
+
+export async function applyToolcraftPerformanceStressFixture(
+  page: Page,
+  config: ToolcraftPerformanceConfig,
+  scenarioId: string,
+  appliers: ToolcraftStressFixtureAppliers,
+): Promise<Record<string, unknown>> {
+  const fixture = getToolcraftPerformanceStressValue(config, scenarioId);
+
+  if (!isToolcraftStressFixtureObject(fixture)) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" must provide an object stressFixture.value for combined fixture application.`,
+    );
+  }
+
+  const fixtureKeys = Object.keys(fixture);
+  if (fixtureKeys.length === 0) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" stressFixture.value must contain at least one key.`,
+    );
+  }
+
+  const missingKeys = fixtureKeys.filter((key) => !appliers[key]);
+  if (missingKeys.length > 0) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" is missing fixture appliers for: ${missingKeys.join(
+        ", ",
+      )}.`,
+    );
+  }
+
+  const extraKeys = Object.keys(appliers).filter((key) => !fixtureKeys.includes(key));
+  if (extraKeys.length > 0) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" declares fixture appliers not present in stressFixture.value: ${extraKeys.join(
+        ", ",
+      )}.`,
+    );
+  }
+
+  for (const key of fixtureKeys) {
+    await appliers[key]!(fixture[key], {
+      config,
+      fixture,
+      key,
+      page,
+      scenarioId,
+    });
+  }
+
+  return fixture;
+}
+
+export async function applyToolcraftPerformanceWorkloadFixture(
+  page: Page,
+  config: ToolcraftPerformanceConfig,
+  scenarioId: string,
+  appliers: ToolcraftStressFixtureAppliers,
+): Promise<Record<string, unknown>> {
+  const fixture = getToolcraftPerformanceWorkloadValue(config, scenarioId);
+
+  if (!isToolcraftStressFixtureObject(fixture)) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" must provide an object workloadFixture.value for baseline fixture application.`,
+    );
+  }
+
+  const fixtureKeys = Object.keys(fixture);
+  if (fixtureKeys.length === 0) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" workloadFixture.value must contain at least one key.`,
+    );
+  }
+
+  const missingKeys = fixtureKeys.filter((key) => !appliers[key]);
+  if (missingKeys.length > 0) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" is missing workload fixture appliers for: ${missingKeys.join(
+        ", ",
+      )}.`,
+    );
+  }
+
+  const extraKeys = Object.keys(appliers).filter((key) => !fixtureKeys.includes(key));
+  if (extraKeys.length > 0) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" declares workload fixture appliers not present in workloadFixture.value: ${extraKeys.join(
+        ", ",
+      )}.`,
+    );
+  }
+
+  for (const key of fixtureKeys) {
+    await appliers[key]!(fixture[key], {
+      config,
+      fixture,
+      key,
+      page,
+      scenarioId,
+    });
+  }
+
+  return fixture;
+}
+
 export async function dragToolcraftCanvasViewport(
   page: Page,
   delta: { x: number; y: number } = { x: 96, y: -64 },
@@ -553,6 +728,28 @@ export function getToolcraftPerformanceStressValue<TValue = unknown>(
   return scenario.stressFixture.value as TValue;
 }
 
+export function getToolcraftPerformanceWorkloadValue<TValue = unknown>(
+  config: ToolcraftPerformanceConfig,
+  scenarioId: string,
+): TValue {
+  const scenario = config.scenarios.find((item) => item.id === scenarioId);
+
+  if (!scenario) {
+    throw new Error(`Toolcraft performance scenario "${scenarioId}" was not found.`);
+  }
+
+  if (
+    !scenario.workloadFixture ||
+    !Object.prototype.hasOwnProperty.call(scenario.workloadFixture, "value")
+  ) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" does not declare workloadFixture.value.`,
+    );
+  }
+
+  return scenario.workloadFixture.value as TValue;
+}
+
 export function expectToolcraftScenarioPerformanceBudget(
   result: ToolcraftPerformanceBudgetResult,
   config: ToolcraftPerformanceConfig,

package/templates/starter/package.json

@@ -16,10 +16,13 @@
     "verify:quick": "pnpm ai:check && pnpm test",
     "verify:ui": "pnpm test:browser",
     "verify:perf": "pnpm test:browser:perf",
-    "verify:final": "pnpm ai:check && pnpm test && pnpm build && pnpm test:browser && pnpm test:browser:perf"
+    "verify:final": "pnpm ai:check && pnpm test && pnpm build && pnpm test:browser"
   },
   "dependencies": {
     "@base-ui/react": "^1.4.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/inter": "^5.2.8",
     "@phosphor-icons/react": "^2.1.10",
     "@repo/toolcraft-runtime": "workspace:*",