@pixel-point/toolcraft 0.0.8 → 0.0.11

package/templates/starter/src/app/starter-acceptance.test.ts

@@ -12,7 +12,14 @@ import {
 import {
   getToolcraftControlOrderTargets,
   type ToolcraftComponentAcceptance,
+  type ToolcraftReferenceCoverage,
+  type ToolcraftReferenceFeatureInventoryItem,
+  type ToolcraftReferenceStudyEvidence,
+  type ToolcraftReferenceTimelineCoverage,
+  type ToolcraftTransferMode,
+  type ToolcraftVideoReferenceStudyEvidence,
   starterAcceptance,
+  starterControlSectionInventory,
   starterProductReadiness,
   starterTransferMode,
   validateToolcraftAcceptanceCoverage,
@@ -100,6 +107,7 @@ const requiredAgentWorklogDecisionTrailFields = [
   "Task type",
   "User-visible result",
   "Source/reference checked",
+  "Reference inputs",
   "Docs/contracts read",
   "Contract rules applied",
   "Decision",
@@ -110,6 +118,10 @@ const requiredAgentWorklogDecisionTrailFields = [
   "Skipped checks",
   "Risks",
 ] as const;
+const worklogVideoReferencePattern =
+  /\b(?:source\/reference checked|source reviewed|reference inputs):[^\n]*(?:reference\s+(?:video|gif)|screen\s*recording|contact[-\s]*sheet|storyboard|frame[-\s]*by[-\s]*frame|extracted[-\s]*frames?|cleanshot|ffprobe|[^\s]+\.(?:mp4|mov|webm|gif))\b/i;
+const worklogVideoReferenceStudyPattern =
+  /\b(video reference study|storyboard|frame[-\s]*by[-\s]*frame|transition analysis|frame[-\s]*to[-\s]*frame|contact[-\s]*sheet|extracted frames?)\b/i;
 
 const playbackTimelineAcceptance: ToolcraftComponentAcceptance = {
   automated: true,
@@ -133,9 +145,133 @@ const playbackTimelineAcceptance: ToolcraftComponentAcceptance = {
     "rendered-frame",
   ],
   userAction:
-    "Edit timeline duration, scrub the playback range, then pause and resume playback from the timeline panel.",
+    "Edit timeline duration, verify the seamless forward-only loop still stitches first and last frames with no mirror, yoyo, ping-pong, or reverse motion, then scrub, pause, and resume playback from the timeline panel.",
 };
 
+const keyframesTimelineAcceptance: ToolcraftComponentAcceptance = {
+  automated: true,
+  automatedTestName: "timeline keyframes evaluate rendered output",
+  browser: true,
+  browserTestName: "browser: timeline keyframes evaluate rendered output",
+  componentType: "timeline",
+  evidence: "timeline-output",
+  expectedObservable:
+    "Keyframed values create editable rows and change rendered output at different timeline times.",
+  fixture: "keyframes timeline fixture",
+  id: "timeline.keyframes",
+  kind: "runtime",
+  target: "timeline.keyframes",
+  timelineCoverage: "keyframes",
+  userAction: "Create a keyframe, edit its value, and scrub the timeline.",
+};
+
+const productDerivedEightSecondLoop = {
+  evidence:
+    "The product timing fixture derives one complete forward animation cycle over 8s from the authored playback baseline.",
+  seconds: 8,
+  source: "product-derived" as const,
+};
+
+const referenceStudyEvidence = {
+  behaviorEvidence:
+    "Ran the original app in a local browser and checked canvas sizing, controls, and renderer state changes.",
+  referenceLocation: "/fixtures/legacy-badge-wall",
+  reproductionSteps:
+    "Installed dependencies, started the reference app, opened it in the browser, and compared behavior against the port.",
+  sourceEvidence:
+    "Inspected reference routes, renderer, control state, export handlers, and media lifecycle source files.",
+  status: "ran-original",
+} satisfies ToolcraftReferenceStudyEvidence;
+
+const videoReferenceMotionAcceptance: ToolcraftComponentAcceptance = {
+  automated: true,
+  automatedTestName: "video reference motion matches frame delta study",
+  browser: true,
+  browserTestName: "browser: video reference motion matches frame delta study",
+  componentType: "custom-renderer",
+  evidence: "product-output",
+  expectedObservable:
+    "The renderer preserves the video reference behavior observed across the storyboard transitions.",
+  fixture: "video reference storyboard fixture",
+  id: "reference.video.motion",
+  kind: "runtime",
+  target: "reference.video.motion",
+  userAction:
+    "Compare the implemented renderer against the storyboard frames and frame-to-frame behavior deltas.",
+};
+
+const videoReferenceStudyEvidence = {
+  acceptanceMapping: [
+    {
+      acceptanceId: "reference.video.motion",
+      behavior: "Planted contact points stretch across adjacent frames before retargeting.",
+      frameIds: ["f000", "f012", "f024"],
+    },
+  ],
+  behaviorDecomposition:
+    "The video reference is decomposed into body movement, persistent contact points, delayed release, and retargeted anchors. The implementation copies those behaviors rather than a single static frame.",
+  extractionEvidence:
+    "Extracted frames with ffmpeg and reviewed contact sheets before implementation.",
+  referenceLocation: "/fixtures/reference-motion/ref.mp4",
+  storyboard: [
+    {
+      behaviorObservation:
+        "Body starts moving while several endpoints remain planted in canvas space.",
+      frameId: "f000",
+      frameSource: "frames/frame_000.png",
+      timeSeconds: 0,
+      visualObservation: "The body is near the left side with legs extended outward.",
+    },
+    {
+      behaviorObservation:
+        "Body advances and planted endpoints stretch instead of following immediately.",
+      frameId: "f012",
+      frameSource: "frames/frame_012.png",
+      timeSeconds: 0.2,
+      visualObservation: "Several endpoints stay near the earlier canvas positions.",
+    },
+    {
+      behaviorObservation:
+        "Over-extended legs begin to release and choose new anchors.",
+      frameId: "f024",
+      frameSource: "frames/frame_024.png",
+      timeSeconds: 0.4,
+      visualObservation: "One side shows a retargeted leg group closer to the body.",
+    },
+    {
+      behaviorObservation:
+        "The new anchor pattern stabilizes before the next release.",
+      frameId: "f036",
+      frameSource: "frames/frame_036.png",
+      timeSeconds: 0.6,
+      visualObservation: "Legs settle into a new spread with the body further right.",
+    },
+  ],
+  transitionAnalysis: [
+    {
+      behaviorDelta:
+        "Between f000 and f012, body position changes faster than several leg endpoints, proving contact memory.",
+      fromFrameId: "f000",
+      id: "f000-f012",
+      toFrameId: "f012",
+    },
+    {
+      behaviorDelta:
+        "Between f012 and f024, over-extension triggers release and retargeting instead of continuous sine motion.",
+      fromFrameId: "f012",
+      id: "f012-f024",
+      toFrameId: "f024",
+    },
+    {
+      behaviorDelta:
+        "Between f024 and f036, newly planted anchors remain stable while the body keeps moving.",
+      fromFrameId: "f024",
+      id: "f024-f036",
+      toFrameId: "f036",
+    },
+  ],
+} satisfies ToolcraftVideoReferenceStudyEvidence;
+
 function makeControlAcceptance(
   target: string,
   componentType: string,
@@ -156,7 +292,91 @@ function makeControlAcceptance(
   };
 }
 
-function createSettingsTransferThresholdSchema(settingsTransfer: false | "auto" = false) {
+function makeReferenceFeatureInventory(
+  extra: readonly ToolcraftReferenceFeatureInventoryItem[] = [],
+): readonly ToolcraftReferenceFeatureInventoryItem[] {
+  return [
+    {
+      acceptanceId: "reference.canvasSizing",
+      behaviorEvidence:
+        "Observed the reference output keep its authored dimensions in the browser.",
+      featureName: "Canvas sizing",
+      id: "canvas-sizing",
+      referenceBehavior: "The reference renderer owns the output dimensions.",
+      sourceEvidence: "Inspected reference renderer sizing and browser output.",
+      status: "ported",
+      toolcraftMapping:
+        "Toolcraft editable-output canvas starts from the reference dimensions and keeps runtime sizing visible.",
+    },
+    {
+      acceptanceId: "reference.controlMapping",
+      behaviorEvidence:
+        "Changed reference controls in the browser and observed renderer parameters update.",
+      featureName: "Control mapping",
+      id: "control-mapping",
+      referenceBehavior: "Reference controls update renderer parameters directly.",
+      sourceEvidence: "Inspected reference control state and parameter wiring.",
+      status: "ported",
+      toolcraftMapping:
+        "Toolcraft schema controls write runtime values consumed by the renderer.",
+    },
+    {
+      acceptanceId: "reference.rendererState",
+      behaviorEvidence:
+        "Observed reference renderer state persist across multiple animation frames.",
+      featureName: "Renderer state",
+      id: "renderer-state",
+      referenceBehavior: "Reference renderer mutable state persists across frames.",
+      sourceEvidence: "Inspected reference renderer lifecycle and frame updates.",
+      status: "ported",
+      toolcraftMapping:
+        "Toolcraft renderer keeps equivalent mutable state and invalidation lifecycle.",
+    },
+    ...extra,
+  ];
+}
+
+function makeReferenceCoverageAcceptance(
+  id: string,
+  referenceCoverage: ToolcraftReferenceCoverage,
+): ToolcraftComponentAcceptance {
+  return {
+    automated: true,
+    automatedTestName: `${id} preserves reference behavior`,
+    browser: true,
+    browserTestName: `browser: ${id} preserves reference behavior`,
+    componentType: "custom-renderer",
+    evidence: "product-output",
+    expectedObservable: `${id} preserves the reference behavior in Toolcraft output.`,
+    fixture: `${id} fixture`,
+    id,
+    kind: "runtime",
+    referenceCoverage,
+    userAction: `Exercise ${id}.`,
+  };
+}
+
+function makeReferenceTimelineCoverageAcceptance(
+  id: string,
+  referenceTimelineCoverage: ToolcraftReferenceTimelineCoverage,
+): ToolcraftComponentAcceptance {
+  return {
+    automated: true,
+    automatedTestName: `${id} preserves reference timeline behavior`,
+    browser: true,
+    browserTestName: `browser: ${id} preserves reference timeline behavior`,
+    componentType: "custom-timeline",
+    evidence: "timeline-output",
+    expectedObservable: `${id} preserves the reference timeline behavior.`,
+    fixture: `${id} fixture`,
+    id,
+    kind: "runtime",
+    referenceTimelineCoverage,
+    userAction: `Exercise ${id}.`,
+  };
+}
+
+function createMandatorySetupSchema(settingsTransfer: false | "auto" = false) {
   return defineToolcraft({
     canvas: { enabled: true },
     panels: {
@@ -185,13 +405,13 @@ function createSettingsTransferThresholdSchema(settingsTransfer: false | "auto"
   });
 }
 
-function createSettingsTransferThresholdAcceptance() {
+function createMandatorySetupAcceptance() {
   return Array.from({ length: 12 }, (_, index) =>
     makeControlAcceptance(`settings.control${index}`, "slider"),
   );
 }
 
-function createSettingsTransferBelowThresholdWithCanvasSizeSchema() {
+function createMandatorySetupWithCanvasSizeSchema() {
   return defineToolcraft({
     canvas: { enabled: true, size: { height: 720, unit: "px", width: 1280 } },
     panels: {
@@ -213,14 +433,14 @@ function createSettingsTransferBelowThresholdWithCanvasSizeSchema() {
             title: "Transform",
           },
         ],
-        title: "Below Threshold Settings",
+        title: "Runtime Setup Settings",
       },
     },
     settingsTransfer: false,
   });
 }
 
-function createSettingsTransferBelowThresholdWithCanvasSizeAcceptance() {
+function createMandatorySetupWithCanvasSizeAcceptance() {
   return [
     makeControlAcceptance("canvas.size.width", "text"),
     makeControlAcceptance("canvas.size.height", "text"),
@@ -266,7 +486,7 @@ function stripJsComments(source: string): string {
 }
 
 function getMarkdownHeadingLevel(line: string): number | null {
-  const match = /^(#{1,6})\s+\S/.exec(line);
+  const match = /^(#{1,6})\s+\S/.exec(line.trim());
 
   return match ? match[1].length : null;
 }
@@ -332,6 +552,104 @@ function escapeRegExp(value: string): string {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
+const incompleteRequiredCheckPattern =
+  /\b(?:fail(?:ed|s|ing)?|not complete|not completed|incomplete|pending|blocked|planned|todo|to do|to run|will run|not run|not started|not yet|queued)\b/i;
+const requiredCheckNamePattern =
+  /\b(?:(?:pnpm\s+)?(?:verify:final|verify:perf|test:browser:perf|test:browser|verify:quick|test|build)|browser performance checkpoint|agent-browser|playwright-fallback)\b/i;
+const browserPerformanceCheckpointPattern =
+  /\b(?:agent-browser|browser performance checkpoint|performance checkpoint|verify:perf|test:browser:perf|playwright-fallback)\b/i;
+const fallbackPerfReasonPattern =
+  /\b(?:agent[- ]browser|agent[- ]controlled browser).*\b(?:unavailable|not available|missing|absent)|\bagent-browser-unavailable\b|\b(?:no|without)\s+(?:agent[- ]browser|agent[- ]controlled browser)\b|\b(?:CI|non-agent automation|non-agent run)\b/i;
+
+function getWorklogLines(source: string): string[] {
+  return source
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+}
+
+function isAllowedPerfSkipLine(line: string): boolean {
+  return (
+    browserPerformanceCheckpointPattern.test(line) &&
+    /\bnot required\b/i.test(line) &&
+    /\b(?:post-first|after first|not first|feature loop|non-performance)\b/i.test(line)
+  );
+}
+
+function isIncompleteOrSkippedLine(line: string): boolean {
+  return (
+    /\b(?:skip|skipped|not required)\b/i.test(line) ||
+    incompleteRequiredCheckPattern.test(line)
+  );
+}
+
+function isVerificationEvidenceLine(line: string): boolean {
+  return /\b(?:Run|Verification|Browser):/i.test(line);
+}
+
+function isPassedAgentBrowserPerfRunLine(line: string): boolean {
+  return (
+    isVerificationEvidenceLine(line) &&
+    /\bagent-browser\b/i.test(line) &&
+    /\b(?:performance|perf|checkpoint)\b/i.test(line) &&
+    !isIncompleteOrSkippedLine(line)
+  );
+}
+
+function isPassedPlaywrightFallbackPerfRunLine(line: string): boolean {
+  return (
+    isVerificationEvidenceLine(line) &&
+    (/\bpnpm\s+verify:perf\b/i.test(line) ||
+      (/\bplaywright-fallback\b/i.test(line) &&
+        /\b(?:performance|perf|checkpoint)\b/i.test(line))) &&
+    !isIncompleteOrSkippedLine(line)
+  );
+}
+
+function getAgentWorklogVerificationGateErrors(source: string): string[] {
+  const lines = getWorklogLines(source);
+  const errors: string[] = [];
+  const hasPassedAgentBrowserPerfRun = lines.some(isPassedAgentBrowserPerfRunLine);
+  const hasPassedPlaywrightFallbackPerfRun = lines.some(
+    isPassedPlaywrightFallbackPerfRunLine,
+  );
+  const hasFallbackPerfReason = lines.some((line) => fallbackPerfReasonPattern.test(line));
+  const hasPassedPerfRun =
+    hasPassedAgentBrowserPerfRun ||
+    (hasPassedPlaywrightFallbackPerfRun && hasFallbackPerfReason);
+  const hasAllowedPerfSkip = lines.some(isAllowedPerfSkipLine);
+  const failedRequiredCheckLine = lines.find(
+    (line) => requiredCheckNamePattern.test(line) && incompleteRequiredCheckPattern.test(line),
+  );
+  const skippedRequiredCheckLine = lines.find(
+    (line) =>
+      /^-?\s*(?:Skipped checks|Skip):/i.test(line) &&
+      requiredCheckNamePattern.test(line) &&
+      !/\bnone\b/i.test(line) &&
+      !isAllowedPerfSkipLine(line),
+  );
+
+  if (failedRequiredCheckLine) {
+    errors.push(
+      "agent-worklog.md required checks must be passed before final delivery; do not report failed, incomplete, pending, or blocked verification.",
+    );
+  }
+
+  if (skippedRequiredCheckLine) {
+    errors.push(
+      "agent-worklog.md must not list required checks as skipped unless they are explicitly not required for a post-first-working non-performance edit.",
+    );
+  }
+
+  if (!hasPassedPerfRun && !hasAllowedPerfSkip) {
+    errors.push(
+      "agent-worklog.md Verification must record the browser performance checkpoint for first working product delivery: use agent-browser when available, or `pnpm verify:perf` with an explicit fallback reason when no agent browser or CI/non-agent automation is used.",
+    );
+  }
+
+  return errors;
+}
+
 function getAgentWorklogValidationErrors(source: string): string[] {
   const errors: string[] = [];
 
@@ -394,10 +712,21 @@ function getAgentWorklogValidationErrors(source: string): string[] {
     errors.push("agent-worklog.md Evidence must name reviewed files, references, or contract rules.");
   }
 
+  if (
+    worklogVideoReferencePattern.test(source) &&
+    !worklogVideoReferenceStudyPattern.test(source)
+  ) {
+    errors.push(
+      "agent-worklog.md cites a video reference, screen recording, GIF, extracted frames, or contact sheet; record a Video Reference Study with storyboard frames and frame-to-frame transition analysis.",
+    );
+  }
+
   if (!/\bpnpm\s+(verify|test|build|typecheck)|browser|Playwright|perf/i.test(verificationBody)) {
     errors.push("agent-worklog.md Verification must list concrete test/build/browser/performance checks.");
   }
 
+  errors.push(...getAgentWorklogVerificationGateErrors(source));
+
   if (!/\b(Risk|None):\s*\S/i.test(risksBody)) {
     errors.push('agent-worklog.md Risks must include either "Risk:" entries or "None:" with a reason.');
   }
@@ -454,7 +783,7 @@ function sourceDefinesProductCanvasContent(): boolean {
 function schemaHasProductSurface(): boolean {
   return (
     (starterSchema.panels.controls?.sections ?? []).some(
-      (section) => Object.keys(section.controls).length > 0,
+      (section) => section.title !== "Setup" && Object.keys(section.controls).length > 0,
     ) ||
     starterSchema.panels.layers === true ||
     starterSchema.panels.timeline?.enabled === true ||
@@ -676,12 +1005,93 @@ function sourceHasVideoDurationMetadataCoverage(source: string): boolean {
   );
 }
 
+function sourceHasVideoDimensionMetadataCoverage(source: string): boolean {
+  const hasVideoMetadataReader =
+    /\bdocument\.createElement\s*\(\s*["']video["']\s*\)/.test(source) &&
+    /\bURL\.createObjectURL\b/.test(source) &&
+    /\bloadedmetadata\b|\bonloadedmetadata\b/.test(source) &&
+    /\bvideo\.videoWidth\b/.test(source) &&
+    /\bvideo\.videoHeight\b/.test(source);
+  const hasResolutionCoverage =
+    /\b(?:export\.video\.resolution|video resolution|resolution)\b/i.test(source) &&
+    /\bcurrent\b/i.test(source) &&
+    /\b4k\b/i.test(source);
+  const has4kDimensionExpectation =
+    /\b(?:3840|2160)\b/.test(source) || /\bgetToolcraftVideoExportSize\b/.test(source);
+
+  return hasVideoMetadataReader && hasResolutionCoverage && has4kDimensionExpectation;
+}
+
 function sourceHasCustomMovOrProResEncoder(source: string): boolean {
   return /\bVideoEncoder\b|\bffmpeg\b|\bFFmpeg\b|\bProRes\b|\bprores\b|\btranscoder\b/i.test(
     source,
   );
 }
 
+function sourceUsesVideoExportSizeHelper(source: string): boolean {
+  return /\bgetToolcraftVideoExportSize\b/.test(source);
+}
+
+function sourceHasUnsafeVideoLongEdgeSizing(source: string): boolean {
+  return (
+    /\b(?:export\.video\.resolution|videoResolution|VideoResolution)\b[\s\S]{0,500}\b4096\b/i.test(
+      source,
+    ) ||
+    /\b4096\b[\s\S]{0,500}\b(?:export\.video\.resolution|videoResolution|VideoResolution)\b/i.test(
+      source,
+    )
+  );
+}
+
+function sourceHasCaptureStreamBeforeCanvasSizing(source: string): boolean {
+  const captureStreamMatches = Array.from(
+    source.matchAll(/\b([A-Za-z_$][A-Za-z0-9_$]*)\.captureStream\s*\(/g),
+  );
+
+  if (captureStreamMatches.length === 0) {
+    return false;
+  }
+
+  return captureStreamMatches.some((match) => {
+    const canvasName = match[1];
+    const captureStreamIndex = match.index ?? 0;
+    const beforeCaptureStream = source.slice(
+      Math.max(0, captureStreamIndex - 2000),
+      captureStreamIndex,
+    );
+    const escapedCanvasName = escapeRegExp(canvasName);
+
+    return (
+      !new RegExp(`\\b${escapedCanvasName}\\.width\\s*=`).test(beforeCaptureStream) ||
+      !new RegExp(`\\b${escapedCanvasName}\\.height\\s*=`).test(beforeCaptureStream)
+    );
+  });
+}
+
+function sourceHandlesVideoRecorderOrEncoderErrors(source: string): boolean {
+  const usesMediaRecorder = /\bnew\s+MediaRecorder\b/.test(source);
+  const usesVideoEncoder = /\bnew\s+VideoEncoder\b/.test(source);
+  const mediaRecorderRejectsErrors =
+    /\.\s*onerror\s*=[\s\S]{0,700}\b(?:reject|throw|Promise\.reject)\b/.test(source) ||
+    /\.addEventListener\s*\(\s*["']error["'][\s\S]{0,900}\b(?:reject|throw|Promise\.reject)\b/.test(
+      source,
+    );
+  const videoEncoderRejectsErrors =
+    /\bnew\s+VideoEncoder\s*\(\s*\{[\s\S]{0,1200}\berror\s*:[\s\S]{0,700}\b(?:reject|throw|Promise\.reject)\b/.test(
+      source,
+    );
+
+  if (usesMediaRecorder && !mediaRecorderRejectsErrors) {
+    return false;
+  }
+
+  if (usesVideoEncoder && !videoEncoderRejectsErrors) {
+    return false;
+  }
+
+  return true;
+}
+
 function sourceHasImageExportDimensionCoverage(source: string): boolean {
   const hasImageDecoder =
     /\bcreateImageBitmap\b/.test(source) ||
@@ -806,7 +1216,40 @@ describe("Toolcraft template app acceptance coverage", () => {
     expect(validateToolcraftAcceptanceCoverage(starterSchema, starterAcceptance)).toEqual([]);
   });
 
-  it("requires fileDrop acceptance to prove upload, clear, and reset lifecycle", () => {
+  it("rejects generated apps without the mandatory runtime setup controls panel", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {},
+    });
+
+    expect(validateToolcraftAcceptanceCoverage(schema, [])).toEqual(
+      expect.arrayContaining([
+        "Generated Toolcraft apps must define a controls panel so the mandatory runtime Setup section is visible.",
+      ]),
+    );
+  });
+
+  it("requires generated product apps to publish a control section inventory", () => {
+    if (!schemaHasProductSurface()) {
+      expect(starterControlSectionInventory).toEqual([]);
+      return;
+    }
+
+    expect(
+      starterControlSectionInventory.length,
+      "Product apps must export starterControlSectionInventory so section grouping decisions are machine-checkable.",
+    ).toBeGreaterThan(0);
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        starterSchema,
+        starterAcceptance,
+        starterTransferMode,
+        starterControlSectionInventory,
+      ),
+    ).toEqual([]);
+  });
+
+  it("requires fileDrop acceptance to prove upload, clear, reset, and image transforms", () => {
     const fileDropSchema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -849,12 +1292,69 @@ describe("Toolcraft template app acceptance coverage", () => {
       ]),
     ).toEqual(
       expect.arrayContaining([
-        "Source / source (media.source) fileDrop acceptance must prove upload/import, clear/remove, and section or global reset remove source media.",
+        "Source / source (media.source) fileDrop acceptance must prove upload/import, clear/remove, and section or global reset restore default source media or remove uploaded source media when no default exists.",
+        "Source / source (media.source) image fileDrop acceptance must prove rotate and flip actions update runtime media transform metadata and that preview, renderer, or export consumes the transform.",
+      ]),
+    );
+  });
+
+  it("requires predefined fileDrop media acceptance to prove attached default restore", () => {
+    const fileDropSchema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      media: {
+        defaultAssets: [
+          {
+            dataUrl: "data:image/png;base64,AAAA",
+            fileName: "default-source.png",
+            sourceTarget: "media.source",
+          },
+        ],
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  defaultValue: null,
+                  label: "Source image",
+                  target: "media.source",
+                  type: "fileDrop",
+                },
+              },
+              title: "Source",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(fileDropSchema, [
+        {
+          automated: true,
+          automatedTestName: "source image upload reset lifecycle",
+          browser: true,
+          browserTestName: "browser: source image upload reset lifecycle",
+          componentType: "fileDrop",
+          evidence: "media-lifecycle",
+          expectedObservable:
+            "Upload, clear, reset, rotate, and flip update the source preview and renderer.",
+          fixture: "source image fixture",
+          id: "media.source",
+          kind: "control",
+          target: "media.source",
+          userAction:
+            "Upload a source image, clear it, use Reset controls, rotate 90°, flip horizontal, and verify runtime media transform metadata is consumed by preview.",
+        },
       ]),
+    ).toContain(
+      "Source / source (media.source) fileDrop acceptance must prove predefined media.defaultAssets render as attached files, can be removed to an empty source/canvas state, and are restored by section or global Reset.",
     );
   });
 
-  it("accepts fileDrop lifecycle coverage that includes reset", () => {
+  it("accepts fileDrop lifecycle coverage that includes reset and image transforms", () => {
     const fileDropSchema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -886,13 +1386,13 @@ describe("Toolcraft template app acceptance coverage", () => {
         componentType: "fileDrop",
         evidence: "media-lifecycle",
         expectedObservable:
-          "Uploading a source image changes the media preview; Clear, section reset, and global Reset controls remove the source media and restore the empty upload state.",
+          "Uploading a source image changes the media preview; rotate and flip actions update runtime media transform metadata and rendered output; Clear, section reset, and global Reset controls remove the source media and restore the empty upload state.",
         fixture: "source image fixture",
         id: "media.source",
         kind: "control",
         target: "media.source",
         userAction:
-          "Upload a source image, clear it, upload again, then use section reset and Reset controls.",
+          "Upload a source image, rotate it, flip it, clear it, upload again, then use section reset and Reset controls.",
       },
     ]);
 
@@ -901,6 +1401,77 @@ describe("Toolcraft template app acceptance coverage", () => {
     ).toEqual([]);
   });
 
+  it("requires multiple fileDrop acceptance to prove runtime media reorder", () => {
+    const fileDropSchema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                sources: {
+                  defaultValue: [],
+                  label: "Source images",
+                  multiple: true,
+                  target: "media.sources",
+                  type: "fileDrop",
+                },
+              },
+              title: "Source",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(fileDropSchema, [
+        {
+          automated: true,
+          automatedTestName: "source images upload clear reset and transform",
+          browser: true,
+          browserTestName: "browser: source images upload clear reset and transform",
+          componentType: "fileDrop",
+          evidence: "media-lifecycle",
+          expectedObservable:
+            "Uploading source images changes the media preview; rotate and flip actions update runtime media transform metadata and rendered output; Clear and Reset controls remove media.",
+          fixture: "source images fixture",
+          id: "media.sources",
+          kind: "control",
+          target: "media.sources",
+          userAction:
+            "Upload two source images, rotate one, flip it, clear the images, and use Reset controls.",
+        },
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        "Source / sources (media.sources) multiple fileDrop acceptance must prove thumbnail/file reorder updates runtime media order and that preview, renderer, or export consumes that order.",
+      ]),
+    );
+
+    expect(
+      validateToolcraftAcceptanceCoverage(fileDropSchema, [
+        {
+          automated: true,
+          automatedTestName: "source images upload reorder transform and reset",
+          browser: true,
+          browserTestName: "browser: source images upload reorder transform and reset",
+          componentType: "fileDrop",
+          evidence: "media-lifecycle",
+          expectedObservable:
+            "Uploading source images changes the preview; drag reorder updates runtime media order used by rendered output; rotate and flip update runtime media transform metadata used by export; Clear, section reset, and global Reset controls remove media.",
+          fixture: "source images fixture",
+          id: "media.sources",
+          kind: "control",
+          target: "media.sources",
+          userAction:
+            "Upload two source images, drag to reorder thumbnails, rotate and flip the selected image, clear them, then use section reset and Reset controls.",
+        },
+      ]),
+    ).toEqual([]);
+  });
+
   it("rejects fake video duration browser coverage that falls back to expected duration", () => {
     const fakeCoverage = `
       async function getVideoDuration(page, buffer, mimeType) {
@@ -994,7 +1565,7 @@ describe("Toolcraft template app acceptance coverage", () => {
 
     expect(validateToolcraftAcceptanceCoverage(fixedOutputSchema, starterAcceptance)).toEqual(
       expect.arrayContaining([
-        'canvas.sizing mode "fixed-output" requires a runtime acceptance entry with canvasSizingCoverage "fixed-output-size" explaining why width and height are intentionally non-editable. A user-provided base/default size should normally use "editable-output".',
+        'canvas.sizing mode "fixed-output" requires a runtime acceptance entry with canvasSizingCoverage "fixed-output-size" explaining why width and height are intentionally non-editable. Product/output apps must use "editable-output"; user-provided, reference, fixed-format, or base/default sizes belong in canvas.size as editable initial values.',
       ]),
     );
   });
@@ -1047,14 +1618,184 @@ describe("Toolcraft template app acceptance coverage", () => {
       ]),
     ).toEqual(
       expect.arrayContaining([
-        'canvas.sizing canvasSizingCoverage "fixed-output-size" must explain why the product output dimensions are intentionally fixed, not merely initialized from a default size.',
+        'canvas.sizing canvasSizingCoverage "fixed-output-size" must explain why the output dimensions are intentionally fixed for a non-product/internal fixture, not merely initialized from a default size.',
       ]),
     );
   });
 
-  it("requires browser reload acceptance when localStorage persistence is enabled", () => {
-    const persistentSchema = defineToolcraft({
-      canvas: { enabled: true },
+  it("rejects fixed canvas sizing justified only by a missing reference size editor", () => {
+    const fixedOutputSchema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 1080, unit: "px", width: 1920 },
+        sizing: { mode: "fixed-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                prompt: {
+                  defaultValue: "Describe the effect",
+                  label: "Prompt",
+                  orderRole: "input",
+                  target: "generation.prompt",
+                  type: "text",
+                },
+              },
+              title: "Generation",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(fixedOutputSchema, [
+        ...starterAcceptance,
+        {
+          automated: true,
+          automatedTestName: "canvas output remains fixed",
+          browser: true,
+          browserTestName: "browser: canvas output remains fixed",
+          canvasSizingCoverage: "fixed-output-size",
+          componentType: "fixed-output canvas",
+          evidence: "product-output",
+          expectedObservable:
+            "The WebGL output remains fixed at 1920x1080 because the reference app has no user-facing output size editor.",
+          fixture: "default canvas fixture",
+          id: "canvas.sizing",
+          kind: "runtime",
+          userAction: "Open the app.",
+        },
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining("cannot be justified by the reference or previous app lacking a size editor"),
+      ]),
+    );
+  });
+
+  it("rejects fixed canvas sizing for exportable product apps even when reference dimensions are fixed", () => {
+    const fixedExportSchema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 900, unit: "px", width: 1440 },
+        sizing: { mode: "fixed-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                outputActions: {
+                  actions: [
+                    {
+                      icon: "upload-simple",
+                      label: "Export PNG",
+                      value: "export.png",
+                    },
+                  ],
+                  target: "actions.output",
+                  type: "panelActions",
+                },
+              },
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(fixedExportSchema, [
+        ...starterAcceptance,
+        {
+          automated: true,
+          automatedTestName: "fixed reference size is preserved",
+          browser: true,
+          browserTestName: "browser: fixed reference size is preserved",
+          canvasSizingCoverage: "fixed-output-size",
+          componentType: "fixed-output canvas",
+          evidence: "product-output",
+          expectedObservable:
+            "The exported shader canvas remains reference-defined and fixed at 1440x900.",
+          fixture: "shader reference fixture",
+          id: "canvas.sizing",
+          kind: "runtime",
+          userAction: "Open the app.",
+        },
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        'Product/output apps with export actions must use canvas.sizing mode "editable-output" so Aspect ratio, Canvas width, and Canvas height are always available. Put reference, fixed-format, or user-requested dimensions in canvas.size as the initial value instead of hiding size controls with "fixed-output".',
+      ]),
+    );
+  });
+
+  it("requires intrinsic media sizing acceptance for upload apps that let media own canvas size", () => {
+    const intrinsicUploadSchema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "intrinsic-media" },
+        upload: true,
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(validateToolcraftAcceptanceCoverage(intrinsicUploadSchema, starterAcceptance)).toEqual(
+      expect.arrayContaining([
+        'canvas.sizing mode "intrinsic-media" with upload requires a runtime acceptance entry with canvasSizingCoverage "intrinsic-media-size" proving the app is a true media-viewer/source-native product where imported media natural dimensions intentionally own canvas.size. Uploaded background/source images inside product canvases must use "editable-output" and keep the current canvas size.',
+      ]),
+    );
+  });
+
+  it("accepts explicit intrinsic media sizing when browser coverage proves source-native canvas sizing", () => {
+    const intrinsicUploadSchema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "intrinsic-media" },
+        upload: true,
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(intrinsicUploadSchema, [
+        ...starterAcceptance,
+        {
+          automated: true,
+          automatedTestName: "media viewer uses uploaded natural dimensions",
+          browser: true,
+          browserTestName: "browser: upload source-native image updates canvas.size",
+          canvasSizingCoverage: "intrinsic-media-size",
+          componentType: "canvas",
+          evidence: "media-lifecycle",
+          expectedObservable:
+            "Uploading a 1400x900 image intentionally changes canvas.size to the image natural dimensions.",
+          fixture: "source-native media viewer fixture",
+          id: "canvas.intrinsicSizing",
+          kind: "runtime",
+          userAction: "Upload an image with known natural dimensions.",
+        },
+      ]),
+    ).toEqual([]);
+  });
+
+  it("requires browser reload acceptance when localStorage persistence is enabled", () => {
+    const persistentSchema = defineToolcraft({
+      canvas: { enabled: true },
       panels: {
         controls: {
           sections: [
@@ -1173,67 +1914,29 @@ describe("Toolcraft template app acceptance coverage", () => {
     );
   });
 
-  it("requires settings transfer when product schema crosses the complexity threshold", () => {
-    const complexSchema = createSettingsTransferThresholdSchema(false);
+  it("does not require app-authored settings transfer because setup controls are runtime-mandatory", () => {
+    const complexSchema = createMandatorySetupSchema(false);
 
     expect(
       validateToolcraftAcceptanceCoverage(
         complexSchema,
-        createSettingsTransferThresholdAcceptance(),
+        createMandatorySetupAcceptance(),
       ),
-    ).toEqual(
-      expect.arrayContaining([
-        expect.stringContaining(
-          "settingsTransfer is required for this complex product app because settings-transfer eligibility was reached.",
-        ),
-      ]),
-    );
+    ).toEqual([]);
   });
 
-  it("does not count runtime canvas size controls toward settings transfer eligibility", () => {
-    const belowThresholdSchema = createSettingsTransferBelowThresholdWithCanvasSizeSchema();
+  it("accepts small schemas because settings transfer setup is runtime-mandatory", () => {
+    const smallSchema = createMandatorySetupWithCanvasSizeSchema();
     const errors = validateToolcraftAcceptanceCoverage(
-      belowThresholdSchema,
-      createSettingsTransferBelowThresholdWithCanvasSizeAcceptance(),
-    );
-
-    expect(errors).not.toEqual(
-      expect.arrayContaining([
-        expect.stringContaining(
-          "settingsTransfer is required for this complex product app because settings-transfer eligibility was reached.",
-        ),
-      ]),
+      smallSchema,
+      createMandatorySetupWithCanvasSizeAcceptance(),
     );
-  });
-
-  it("allows explicit settings transfer opt-out only with runtime evidence", () => {
-    const complexSchema = createSettingsTransferThresholdSchema(false);
-    const acceptance: ToolcraftComponentAcceptance[] = [
-      ...createSettingsTransferThresholdAcceptance(),
-      {
-        automated: true,
-        automatedTestName: "settings transfer intentionally omitted for session-only app",
-        browser: true,
-        browserTestName: "browser: settings transfer intentionally omitted",
-        componentType: "settingsTransfer",
-        evidence: "persistence-state",
-        expectedObservable:
-          "The complex app is session-only and intentionally does not expose portable settings.",
-        fixture: "settings transfer opt-out fixture",
-        id: "settings.transfer.optOut",
-        kind: "runtime",
-        settingsTransferCoverage: "opt-out",
-        target: "runtime.settingsTransfer",
-        userAction:
-          "Open the session-only app, change temporary settings, and verify no portable settings workflow is required.",
-      },
-    ];
 
-    expect(validateToolcraftAcceptanceCoverage(complexSchema, acceptance)).toEqual([]);
+    expect(errors).toEqual([]);
   });
 
   it("passes complex schemas with auto settings transfer enabled", () => {
-    const complexSchema = createSettingsTransferThresholdSchema("auto");
+    const complexSchema = createMandatorySetupSchema("auto");
     const acceptance: ToolcraftComponentAcceptance[] = [
       {
         automated: true,
@@ -1251,12 +1954,63 @@ describe("Toolcraft template app acceptance coverage", () => {
         userAction:
           "Change one complex setting, export settings, change it again, import the JSON, and observe the restored value.",
       },
-      ...createSettingsTransferThresholdAcceptance(),
+      ...createMandatorySetupAcceptance(),
     ];
 
     expect(validateToolcraftAcceptanceCoverage(complexSchema, acceptance)).toEqual([]);
   });
 
+  it("rejects app-authored controls that try to own runtime setup targets", () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        renderScale: true,
+        size: { height: 1080, unit: "px", width: 1920 },
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                manualWidth: {
+                  defaultValue: 1200,
+                  label: "Width",
+                  target: "canvas.size.width",
+                  type: "text",
+                },
+                manualRenderScale: {
+                  defaultValue: 1,
+                  label: "Scale",
+                  max: 2,
+                  min: 1,
+                  target: "canvas.renderScale",
+                  type: "slider",
+                },
+                manualTimeline: {
+                  defaultValue: true,
+                  label: "Timeline",
+                  target: "panels.timeline.extended",
+                  type: "switch",
+                },
+              },
+              title: "Runtime Duplicates",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(validateToolcraftAcceptanceCoverage(schema, [])).toEqual(
+      expect.arrayContaining([
+        'Runtime Setup must not include the Timeline switch unless panels.timeline is enabled.',
+        'Runtime Duplicates / manualWidth uses runtime Setup target "canvas.size.width". Runtime Setup owns Export Settings, Import Settings, Aspect ratio, Canvas width, Canvas height, Resolution scale, and Timeline; do not declare these controls in app-authored sections.',
+        'Runtime Duplicates / manualRenderScale uses runtime Setup target "canvas.renderScale". Runtime Setup owns Export Settings, Import Settings, Aspect ratio, Canvas width, Canvas height, Resolution scale, and Timeline; do not declare these controls in app-authored sections.',
+        'Runtime Duplicates / manualTimeline uses runtime Setup target "panels.timeline.extended". Runtime Setup owns Export Settings, Import Settings, Aspect ratio, Canvas width, Canvas height, Resolution scale, and Timeline; do not declare these controls in app-authored sections.',
+      ]),
+    );
+  });
+
   it("requires compound controls to cover every semantic value part", () => {
     const compoundSchema = defineToolcraft({
       canvas: { enabled: true },
@@ -1370,7 +2124,6 @@ describe("Toolcraft template app acceptance coverage", () => {
     });
 
     const acceptance = [
-      "runtime.settingsTransfer",
       "mesh.anchor",
       "mesh.focus",
       "mesh.gradient",
@@ -1386,9 +2139,7 @@ describe("Toolcraft template app acceptance coverage", () => {
       browser: true,
       browserTestName: `browser: ${target} changes output`,
       componentType:
-        target === "runtime.settingsTransfer"
-          ? "settingsTransfer"
-          : target === "mesh.anchor"
+        target === "mesh.anchor"
           ? "anchorGrid"
           : target === "mesh.focus"
             ? "vector"
@@ -2109,7 +2860,6 @@ describe("Toolcraft template app acceptance coverage", () => {
                   step: 0.1,
                   target: "field.speed",
                   type: "slider",
-                  unit: "x",
                 },
               },
               layoutGroups: [
@@ -2167,6 +2917,57 @@ describe("Toolcraft template app acceptance coverage", () => {
     );
   });
 
+  it("rejects x units on slider value labels", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                strength: {
+                  defaultValue: 0.4,
+                  label: "Strength",
+                  max: 1,
+                  min: 0,
+                  step: 0.01,
+                  target: "glass.strength",
+                  type: "slider",
+                  unit: "x",
+                },
+              },
+              title: "Glass",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schema, [
+        {
+          automated: true,
+          automatedTestName: "strength changes glass output",
+          browser: true,
+          browserTestName: "browser: strength slider changes glass output",
+          componentType: "slider",
+          evidence: "rendered-pixels",
+          expectedObservable: "Changing Strength changes the rendered glass strength.",
+          fixture: "glass strength fixture",
+          id: "glass.strength",
+          kind: "control",
+          target: "glass.strength",
+          userAction: "Drag the Strength slider.",
+        },
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        'Glass / strength (glass.strength) uses unit "x", but Toolcraft slider values do not use x suffixes. Omit unit for scale, multiplier, intensity, opacity, strength, depth, and shader amount values unless a real measurement unit applies.',
+      ]),
+    );
+  });
+
   it("accepts compound controls only when every semantic value part is declared", () => {
     const gradientSchema = defineToolcraft({
       canvas: { enabled: true },
@@ -2354,6 +3155,11 @@ describe("Toolcraft template app acceptance coverage", () => {
         schemaHasProductSurface(),
         "Product readiness requires product surface: controls, layers, timeline, canvasContent, or acceptance coverage.",
       ).toBe(true);
+      expect(
+        starterSchema.panels.controls,
+        "Generated product apps must define a controls panel so runtime Setup, product controls, background, export settings, and sticky export actions are visible.",
+      ).toBeTruthy();
+      expect(starterSchema.panels.controls?.sections[0]?.title).toBe("Setup");
       return;
     }
 
@@ -2407,26 +3213,267 @@ describe("Toolcraft template app acceptance coverage", () => {
     expect(getAgentWorklogValidationErrors(worklogSource)).toEqual([]);
   });
 
-  it("rejects stale or incomplete product worklogs", () => {
-    const staleWorklog = `
+  it("requires product worklogs to record storyboard evidence for video references", () => {
+    const videoWorklogWithoutStudy = `
       # Implementation Worklog
 
       ## Status
 
-      Mode: starter
+      Mode: product
+
+      ## Decision Trail
+
+      ### Iteration 1 — Product build
+
+      - Request: Build a product from a motion reference.
+      - Task type: Toolcraft product build.
+      - User-visible result: The product renders the requested motion.
+      - Source/reference checked: User prompt and /fixtures/reference-motion/ref.mp4 video.
+      - Reference inputs: /fixtures/reference-motion/ref.mp4 video reference.
+      - Docs/contracts read: workflow, assembly, acceptance, performance.
+      - Contract rules applied: runtime-shell-required and acceptance-product-observable.
+      - Decision: Use a Toolcraft renderer.
+      - Alternatives rejected: Raw DOM because renderer output needs canvas behavior.
+      - State/output mapping: Runtime values drive canvasContent.
+      - Files changed: src/app/app-schema.ts and src/app/product-renderer.tsx.
+      - Verification: pnpm verify:final passed; browser performance checkpoint used agent-browser.
+      - Skipped checks: None.
+      - Risks: None.
 
       ## Decisions
 
       ### Renderer
-
-      - Decision: No product renderer yet.
-      - Reason: The starter is neutral.
-      - Evidence: No canvasContent.
+      - Decision: Use SVG.
+      - Reason: Vector output.
+      - Evidence: src/app/product-renderer.tsx.
 
       ### Timeline
+      - Decision: Use playback.
+      - Reason: Motion output.
+      - Evidence: src/app/app-schema.ts.
 
-      - Decision: No timeline yet.
-      - Reason: No animation.
+      ### Layers
+      - Decision: No layers.
+      - Reason: Single output.
+      - Evidence: src/app/app-schema.ts.
+
+      ### Controls
+      - Decision: Use schema controls.
+      - Reason: Runtime owns controls.
+      - Evidence: src/app/app-schema.ts.
+
+      ### Export
+      - Decision: Use panel actions.
+      - Reason: Product output export.
+      - Evidence: src/routes/index.tsx.
+
+      ### Performance
+      - Decision: Measure motion.
+      - Reason: Motion can lag.
+      - Evidence: src/app/app-performance.ts.
+
+      ## Evidence
+
+      - Source reviewed: user prompt, ref.mp4, src/app/product-renderer.tsx.
+      - Contract applied: Toolcraft workflow.
+      - Evidence: pnpm verify:final passed.
+
+      ## Verification
+
+      - Run: pnpm verify:final passed.
+      - Run: browser performance checkpoint passed with agent-browser.
+
+      ## Risks
+
+      - None: no known risk.
+    `;
+
+    expect(getAgentWorklogValidationErrors(videoWorklogWithoutStudy)).toContain(
+      "agent-worklog.md cites a video reference, screen recording, GIF, extracted frames, or contact sheet; record a Video Reference Study with storyboard frames and frame-to-frame transition analysis.",
+    );
+  });
+
+  it("accepts product worklogs that record video reference storyboard and transition evidence", () => {
+    const videoWorklogWithStudy = `
+      # Implementation Worklog
+
+      ## Status
+
+      Mode: product
+
+      ## Decision Trail
+
+      ### Iteration 1 — Product build
+
+      - Request: Build a product from a motion reference.
+      - Task type: Toolcraft product build.
+      - User-visible result: The product renders the requested motion.
+      - Source/reference checked: User prompt, /fixtures/reference-motion/ref.mp4 video, extracted frames, and contact sheet.
+      - Reference inputs: /fixtures/reference-motion/ref.mp4 video reference, extracted frames, contact sheet.
+      - Docs/contracts read: workflow, assembly, acceptance, performance.
+      - Contract rules applied: video-reference-analysis and acceptance-product-observable.
+      - Decision: Use a Toolcraft renderer.
+      - Alternatives rejected: Single screenshot implementation because the video behavior changes frame to frame.
+      - State/output mapping: Runtime values drive canvasContent.
+      - Files changed: src/app/app-schema.ts and src/app/product-renderer.tsx.
+      - Verification: pnpm verify:final passed; browser performance checkpoint used agent-browser.
+      - Skipped checks: None.
+      - Risks: None.
+
+      ## Decisions
+
+      ### Renderer
+      - Decision: Use SVG.
+      - Reason: Vector output.
+      - Evidence: src/app/product-renderer.tsx.
+
+      ### Timeline
+      - Decision: Use playback.
+      - Reason: Motion output.
+      - Evidence: src/app/app-schema.ts.
+
+      ### Layers
+      - Decision: No layers.
+      - Reason: Single output.
+      - Evidence: src/app/app-schema.ts.
+
+      ### Controls
+      - Decision: Use schema controls.
+      - Reason: Runtime owns controls.
+      - Evidence: src/app/app-schema.ts.
+
+      ### Export
+      - Decision: Use panel actions.
+      - Reason: Product output export.
+      - Evidence: src/routes/index.tsx.
+
+      ### Performance
+      - Decision: Measure motion.
+      - Reason: Motion can lag.
+      - Evidence: src/app/app-performance.ts.
+
+      ### Video Reference Study
+      - Decision: Implement from storyboard frames and frame-to-frame transition analysis.
+      - Reason: The video reference defines behavior, not only a static visual state.
+      - Evidence: extracted frames f000/f012/f024/f036 and transition analysis between adjacent frames.
+
+      ## Evidence
+
+      - Source reviewed: user prompt, ref.mp4, extracted frames, contact sheet, src/app/product-renderer.tsx.
+      - Contract applied: Toolcraft workflow and video-reference-analysis.
+      - Evidence: pnpm verify:final passed.
+
+      ## Verification
+
+      - Run: pnpm verify:final passed.
+      - Run: browser performance checkpoint passed with agent-browser.
+
+      ## Risks
+
+      - None: no known risk.
+    `;
+
+    expect(getAgentWorklogValidationErrors(videoWorklogWithStudy)).toEqual([]);
+  });
+
+  it("does not treat ordinary video export worklog evidence as a video reference", () => {
+    const videoExportWorklog = `
+      # Implementation Worklog
+
+      ## Status
+
+      Mode: product
+
+      ## Decision Trail
+
+      ### Iteration 1 — Product build
+
+      - Request: Build an animated product with export.
+      - Task type: Toolcraft product build.
+      - User-visible result: The product renders and exports video.
+      - Source/reference checked: User prompt, app schema, export handler, and browser export behavior.
+      - Reference inputs: None.
+      - Docs/contracts read: workflow, assembly, acceptance, performance.
+      - Contract rules applied: output-export-required and acceptance-product-observable.
+      - Decision: Use Toolcraft export helpers.
+      - Alternatives rejected: Blob-only checks because metadata must prove exported video behavior.
+      - State/output mapping: Runtime timeline state drives preview and export frames.
+      - Files changed: src/app/app-schema.ts and src/app/export.ts.
+      - Verification: pnpm verify:final passed; browser performance checkpoint used agent-browser.
+      - Skipped checks: None.
+      - Risks: None.
+
+      ## Decisions
+
+      ### Renderer
+      - Decision: Use Canvas 2D.
+      - Reason: Product output is simple animated geometry.
+      - Evidence: src/app/product-renderer.tsx.
+
+      ### Timeline
+      - Decision: Use playback.
+      - Reason: Export Video requires runtime timeline time.
+      - Evidence: src/app/app-schema.ts.
+
+      ### Layers
+      - Decision: No layers.
+      - Reason: Single output.
+      - Evidence: src/app/app-schema.ts.
+
+      ### Controls
+      - Decision: Use schema controls.
+      - Reason: Runtime owns controls.
+      - Evidence: src/app/app-schema.ts.
+
+      ### Export
+      - Decision: Expose Export PNG and Export Video.
+      - Reason: Animated products need still and video output.
+      - Evidence: src/app/export.ts.
+
+      ### Performance
+      - Decision: Measure export and animation.
+      - Reason: Video export can be expensive.
+      - Evidence: src/app/app-performance.ts.
+
+      ## Evidence
+
+      - Source reviewed: user prompt, app schema, export handler, browser export behavior.
+      - Contract applied: Toolcraft workflow.
+      - Evidence: pnpm verify:final passed.
+
+      ## Verification
+
+      - Run: pnpm verify:final passed.
+      - Run: browser performance checkpoint passed with agent-browser.
+
+      ## Risks
+
+      - None: no known risk.
+    `;
+
+    expect(getAgentWorklogValidationErrors(videoExportWorklog)).toEqual([]);
+  });
+
+  it("rejects stale or incomplete product worklogs", () => {
+    const staleWorklog = `
+      # Implementation Worklog
+
+      ## Status
+
+      Mode: starter
+
+      ## Decisions
+
+      ### Renderer
+
+      - Decision: No product renderer yet.
+      - Reason: The starter is neutral.
+      - Evidence: No canvasContent.
+
+      ### Timeline
+
+      - Decision: No timeline yet.
+      - Reason: No animation.
       - Evidence: panels.timeline is omitted.
 
       ### Layers
@@ -2518,7 +3565,7 @@ describe("Toolcraft template app acceptance coverage", () => {
 
       - Decision: Run viewport-stability and animation drag budgets.
       - Reason: Animation and canvas movement are performance-sensitive.
-      - Evidence: pnpm verify:perf browser run.
+      - Evidence: agent-browser performance checkpoint.
 
       ## Decision Trail
 
@@ -2528,13 +3575,14 @@ describe("Toolcraft template app acceptance coverage", () => {
       - Task type: Renderer, schema, timeline, export, and performance.
       - User-visible result: The canvas renders the animated poster, the top timeline controls playback, and sticky footer actions export video and PNG.
       - Source/reference checked: User prompt plus the generated product renderer requirements.
+      - Reference inputs: None.
       - Docs/contracts read: workflow.md, assembly-workflow.md, schema-reference.md, component-rules.md, renderer-technique.md, performance.md.
       - Contract rules applied: runtime-shell-required, controls-layout-heuristics, timeline-enabled-behavior, output-export-required, performance-coverage-levels.
       - Decision: Use SVG foreground with Canvas 2D background and Toolcraft playback timeline.
       - Alternatives rejected: DOM-only output because dense animation can jank; app-local timeline because playback UI is runtime-owned.
       - State/output mapping: Background and motion controls update runtime values consumed by product-renderer.tsx; timeline state drives rendered frame time; footer actions read the same renderer state for export.
       - Files changed: src/app/app-schema.ts, src/app/app-performance.ts, src/app/product-renderer.tsx, e2e/app-controls.spec.ts.
-      - Verification: pnpm verify:quick; pnpm verify:perf; browser timeline pause/resume and canvas drag stress.
+      - Verification: pnpm verify:quick; agent-browser performance checkpoint; browser timeline pause/resume and canvas drag stress.
       - Skipped checks: None.
       - Risks: None; browser and performance gates cover the touched surfaces.
 
@@ -2546,7 +3594,7 @@ describe("Toolcraft template app acceptance coverage", () => {
       ## Verification
 
       - Run: pnpm verify:quick
-      - Run: pnpm verify:perf
+      - Run: agent-browser performance checkpoint
       - Browser: timeline pause/resume and canvas drag stress.
 
       ## Risks
@@ -2557,8 +3605,8 @@ describe("Toolcraft template app acceptance coverage", () => {
     expect(getAgentWorklogValidationErrors(productWorklog)).toEqual([]);
   });
 
-  it("rejects product worklogs without an actionable decision trail", () => {
-    const worklog = `
+  it("rejects product worklogs that report incomplete required performance gates", () => {
+    const incompletePerfWorklog = `
       # Implementation Worklog
 
       ## Status
@@ -2569,116 +3617,591 @@ describe("Toolcraft template app acceptance coverage", () => {
 
       ### Renderer
 
-      - Decision: Use WebGL.
-      - Reason: Dense animation needs batched rendering.
-      - Evidence: src/app/app-performance.ts.
+      - Decision: Use Canvas 2D custom renderer.
+      - Reason: The product output is a rasterized text effect.
+      - Evidence: src/app/product-renderer.tsx and src/app/app-performance.ts.
 
       ### Timeline
 
-      - Decision: Use playback timeline.
-      - Reason: The product exposes play and scrub.
+      - Decision: Use Toolcraft playback timeline.
+      - Reason: The product is animated and exportable.
       - Evidence: appSchema.panels.timeline.mode.
 
       ### Layers
 
       - Decision: Do not enable layers.
-      - Reason: The product is single-output.
+      - Reason: The product has one generated output.
       - Evidence: appSchema.panels.layers is omitted.
 
       ### Controls
 
       - Decision: Group controls by product entity.
-      - Reason: Sections map to product behavior.
-      - Evidence: src/app/app-schema.ts.
+      - Reason: Controls map to text, motion, effects, and export.
+      - Evidence: src/app/app-schema.ts control targets.
 
       ### Export
 
       - Decision: Provide PNG and video export.
-      - Reason: The app is animated.
-      - Evidence: panelActions.
+      - Reason: The product is animated but still frames are useful.
+      - Evidence: panelActions plus export handlers.
 
       ### Performance
 
-      - Decision: Run perf coverage.
-      - Reason: Renderer is animated.
-      - Evidence: pnpm verify:perf.
+      - Decision: Declare performance scenarios for renderer and controls.
+      - Reason: Canvas effects are performance-sensitive.
+      - Evidence: src/app/app-performance.ts.
 
       ## Decision Trail
 
-      ### Iteration 1 — Product build
+      ### Iteration 1 — Initial product build
 
-      - Request: Build an animated product app.
-      - Task type: Renderer, controls, and export.
-      - Docs/contracts read: workflow.md and renderer-technique.md.
-      - Decision: Use WebGL and playback timeline.
-      - Files changed: src/app/app-schema.ts and src/app/product-renderer.tsx.
-      - Verification: pnpm verify:quick.
-      - Risks: Performance still needs browser proof.
+      - Request: Build an animated raster text app.
+      - Task type: Renderer, schema, timeline, export, and performance.
+      - User-visible result: The app renders the animated text effect and exposes export actions.
+      - Source/reference checked: User prompt and product renderer requirements.
+      - Reference inputs: None.
+      - Docs/contracts read: workflow.md, assembly-workflow.md, schema-reference.md, performance.md.
+      - Contract rules applied: runtime-shell-required, output-export-required, performance-coverage-levels.
+      - Decision: Use Canvas 2D renderer and Toolcraft timeline.
+      - Alternatives rejected: DOM-only output because the final effect is pixel-composited.
+      - State/output mapping: Schema values feed product-renderer.tsx and panel actions read the same state for export.
+      - Files changed: src/app/app-schema.ts, src/app/product-renderer.tsx, src/app/app-performance.ts.
+      - Verification: pnpm test failed; pnpm verify:perf not complete.
+      - Skipped checks: pnpm verify:final and pnpm verify:perf are not complete yet.
+      - Risks: Product contract tests still need updates before final delivery.
 
       ## Evidence
 
-      - Source reviewed: src/app/app-schema.ts.
-      - Contract applied: runtime-shell-required.
+      - Source reviewed: src/app/app-schema.ts, src/app/app-performance.ts, e2e/app-controls.spec.ts.
+      - Contract applied: performance-coverage-levels.
 
       ## Verification
 
-      - Run: pnpm verify:quick
+      - Run: pnpm test failed.
+      - Run: pnpm verify:perf not complete.
 
       ## Risks
 
-      - Risk: performance needs a follow-up run.
+      - Risk: Required checks are not complete.
     `;
 
-    expect(getAgentWorklogValidationErrors(worklog)).toEqual(
+    expect(getAgentWorklogValidationErrors(incompletePerfWorklog)).toEqual(
       expect.arrayContaining([
-        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "User-visible result:".',
-        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "Source/reference checked:".',
-        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "Contract rules applied:".',
-        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "Alternatives rejected:".',
-        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "State/output mapping:".',
-        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "Skipped checks:".',
+        "agent-worklog.md required checks must be passed before final delivery; do not report failed, incomplete, pending, or blocked verification.",
+        "agent-worklog.md must not list required checks as skipped unless they are explicitly not required for a post-first-working non-performance edit.",
+        "agent-worklog.md Verification must record the browser performance checkpoint for first working product delivery: use agent-browser when available, or `pnpm verify:perf` with an explicit fallback reason when no agent browser or CI/non-agent automation is used.",
       ]),
     );
   });
 
-  it("requires product output apps to expose export actions in the sticky footer", () => {
-    if (starterProductReadiness.mode !== "product" && !schemaHasProductSurface()) {
-      return;
-    }
+  it("requires first working product worklogs to record a browser performance checkpoint", () => {
+    const missingPerfWorklog = `
+      # Implementation Worklog
 
-    const panelActionTexts = getSchemaPanelActionSearchTexts();
-    const browserTestSources = readBrowserTestSources();
-    const productImplementationSource = getProductImplementationSource();
-    const productRuntimeImplementationSource = getProductRuntimeImplementationSource();
-    const backgroundColorTargets = getSchemaBackgroundControlTargets(new Set(["color"]));
-    const backgroundToggleTargets = getSchemaBackgroundControlTargets(
-      new Set(["checkbox", "select", "segmented", "switch"]),
+      ## Status
+
+      Mode: product
+
+      ## Decisions
+
+      ### Renderer
+
+      - Decision: Use SVG renderer.
+      - Reason: The product output is vector-native.
+      - Evidence: src/app/product-renderer.tsx.
+
+      ### Timeline
+
+      - Decision: Do not enable timeline.
+      - Reason: The product is still output.
+      - Evidence: appSchema.panels.timeline is omitted.
+
+      ### Layers
+
+      - Decision: Do not enable layers.
+      - Reason: The product edits one output.
+      - Evidence: appSchema.panels.layers is omitted.
+
+      ### Controls
+
+      - Decision: Group controls by product entity.
+      - Reason: Each section maps to visible output behavior.
+      - Evidence: src/app/app-schema.ts.
+
+      ### Export
+
+      - Decision: Provide PNG export.
+      - Reason: The product is a still image.
+      - Evidence: panelActions.
+
+      ### Performance
+
+      - Decision: Cover visible control responsiveness.
+      - Reason: First working product delivery must prove performance coverage.
+      - Evidence: app-performance.ts.
+
+      ## Decision Trail
+
+      ### Iteration 1 — Initial product build
+
+      - Request: Build a still vector poster app.
+      - Task type: Schema, renderer, export, acceptance, and performance.
+      - User-visible result: The canvas renders the poster and exports PNG.
+      - Source/reference checked: User prompt.
+      - Reference inputs: None.
+      - Docs/contracts read: workflow.md, assembly-workflow.md, performance.md.
+      - Contract rules applied: runtime-shell-required, output-export-required, performance-coverage-levels.
+      - Decision: Use SVG renderer with Toolcraft controls.
+      - Alternatives rejected: Canvas output because vector output must stay crisp.
+      - State/output mapping: Schema values feed product-renderer.tsx and export uses runtime state.
+      - Files changed: src/app/app-schema.ts, src/app/product-renderer.tsx, src/app/app-performance.ts.
+      - Verification: pnpm verify:quick; pnpm verify:final.
+      - Skipped checks: None.
+      - Risks: None; final functional gate passed.
+
+      ## Evidence
+
+      - Source reviewed: src/app/app-schema.ts, src/app/product-renderer.tsx.
+      - Contract applied: runtime-shell-required, performance-coverage-levels.
+
+      ## Verification
+
+      - Run: pnpm verify:quick
+      - Run: pnpm verify:final
+
+      ## Risks
+
+      - None: functional checks passed.
+    `;
+
+    expect(getAgentWorklogValidationErrors(missingPerfWorklog)).toContain(
+      "agent-worklog.md Verification must record the browser performance checkpoint for first working product delivery: use agent-browser when available, or `pnpm verify:perf` with an explicit fallback reason when no agent browser or CI/non-agent automation is used.",
     );
+  });
 
+  it("recognizes supported browser performance checkpoint evidence line formats", () => {
     expect(
-      panelActionTexts.length,
-      "Product apps must define panelActions in the controls panel sticky footer.",
-    ).toBeGreaterThan(0);
+      isPassedAgentBrowserPerfRunLine(
+        "- Browser: performance checkpoint runner agent-browser",
+      ),
+    ).toBe(true);
     expect(
-      panelActionTexts.some(textLooksLikePngExport),
-      "Every product app must expose Export PNG or Download PNG through panelActions.",
+      isPassedAgentBrowserPerfRunLine(
+        "- Verification: agent-browser perf checkpoint",
+      ),
     ).toBe(true);
     expect(
-      productImplementationSource,
-      "PNG export must use createToolcraftPngExportCanvas so background transparency and retina sizing follow the standard runtime contract.",
-    ).toMatch(/\bcreateToolcraftPngExportCanvas\b/);
+      isPassedPlaywrightFallbackPerfRunLine(
+        "- Verification: playwright-fallback browser performance checkpoint",
+      ),
+    ).toBe(true);
+    expect(isPassedPlaywrightFallbackPerfRunLine("- Run: pnpm verify:perf")).toBe(true);
     expect(
-      productImplementationSource,
-      "PNG export must pass includeBackground from runtime state to createToolcraftPngExportCanvas; do not hardcode PNG transparency or background inclusion in schema only.",
-    ).toMatch(/\bcreateToolcraftPngExportCanvas\s*\(\s*\{[\s\S]*\bincludeBackground\s*:/);
+      isPassedPlaywrightFallbackPerfRunLine(
+        "- Run: pnpm verify:perf not complete",
+      ),
+    ).toBe(false);
     expect(
-      productRuntimeImplementationSource,
-      "Live preview must read include-background state through shouldIncludeToolcraftPreviewBackground(state) so turning Include off hides the product preview background without affecting video export.",
-    ).toMatch(/\bshouldIncludeToolcraftPreviewBackground\b/);
+      isPassedAgentBrowserPerfRunLine(
+        "- Verification: agent-browser perf checkpoint planned after build",
+      ),
+    ).toBe(false);
     expect(
-      backgroundColorTargets.length,
-      "Every product app with Export PNG must expose a user-facing background color control.",
-    ).toBeGreaterThan(0);
+      isPassedAgentBrowserPerfRunLine(
+        "- Browser: will run agent-browser performance checkpoint",
+      ),
+    ).toBe(false);
+    expect(
+      isPassedPlaywrightFallbackPerfRunLine("- Run: pnpm verify:perf not run"),
+    ).toBe(false);
+  });
+
+  it("recognizes explicit agent-browser fallback reason aliases", () => {
+    expect(
+      fallbackPerfReasonPattern.test("- Fallback reason: agent-browser-unavailable."),
+    ).toBe(true);
+    expect(
+      fallbackPerfReasonPattern.test("- Fallback reason: agent-browser unavailable."),
+    ).toBe(true);
+  });
+
+  it("allows Playwright fallback perf only with an explicit fallback reason", () => {
+    const playwrightFallbackWorklog = `
+      # Implementation Worklog
+
+      ## Status
+
+      Mode: product
+
+      ## Decisions
+
+      ### Renderer
+
+      - Decision: Use SVG renderer.
+      - Reason: The product output is vector-native.
+      - Evidence: src/app/product-renderer.tsx.
+
+      ### Timeline
+
+      - Decision: Do not enable timeline.
+      - Reason: The product is still output.
+      - Evidence: appSchema.panels.timeline is omitted.
+
+      ### Layers
+
+      - Decision: Do not enable layers.
+      - Reason: The product edits one output.
+      - Evidence: appSchema.panels.layers is omitted.
+
+      ### Controls
+
+      - Decision: Group controls by product entity.
+      - Reason: Each section maps to visible output behavior.
+      - Evidence: src/app/app-schema.ts.
+
+      ### Export
+
+      - Decision: Provide PNG export.
+      - Reason: The product is a still image.
+      - Evidence: panelActions.
+
+      ### Performance
+
+      - Decision: Use Playwright fallback for the browser performance checkpoint.
+      - Reason: The run is CI/non-agent automation with no agent browser available.
+      - Evidence: pnpm verify:perf.
+
+      ## Decision Trail
+
+      ### Iteration 1 — Initial product build
+
+      - Request: Build a still vector poster app.
+      - Task type: Schema, renderer, export, acceptance, and performance.
+      - User-visible result: The canvas renders the poster and exports PNG.
+      - Source/reference checked: User prompt.
+      - Reference inputs: None.
+      - Docs/contracts read: workflow.md, assembly-workflow.md, performance.md.
+      - Contract rules applied: runtime-shell-required, output-export-required, performance-coverage-levels.
+      - Decision: Use SVG renderer with Toolcraft controls.
+      - Alternatives rejected: Canvas output because vector output must stay crisp.
+      - State/output mapping: Schema values feed product-renderer.tsx and export uses runtime state.
+      - Files changed: src/app/app-schema.ts, src/app/product-renderer.tsx, src/app/app-performance.ts.
+      - Verification: pnpm verify:quick; pnpm verify:final; pnpm verify:perf.
+      - Skipped checks: None.
+      - Risks: None; final functional and fallback performance gates passed.
+
+      ## Evidence
+
+      - Source reviewed: src/app/app-schema.ts, src/app/product-renderer.tsx.
+      - Contract applied: runtime-shell-required, performance-coverage-levels.
+
+      ## Verification
+
+      - Run: pnpm verify:quick
+      - Run: pnpm verify:final
+      - Run: pnpm verify:perf
+      - Fallback reason: no agent browser available in CI/non-agent automation.
+
+      ## Risks
+
+      - None: fallback performance evidence is recorded with reason.
+    `;
+
+    expect(getAgentWorklogValidationErrors(playwrightFallbackWorklog)).toEqual([]);
+  });
+
+  it("rejects Playwright fallback perf without an explicit fallback reason", () => {
+    const missingFallbackReasonWorklog = `
+      # Implementation Worklog
+
+      ## Status
+
+      Mode: product
+
+      ## Decisions
+
+      ### Renderer
+
+      - Decision: Use SVG renderer.
+      - Reason: The product output is vector-native.
+      - Evidence: src/app/product-renderer.tsx.
+
+      ### Timeline
+
+      - Decision: Do not enable timeline.
+      - Reason: The product is still output.
+      - Evidence: appSchema.panels.timeline is omitted.
+
+      ### Layers
+
+      - Decision: Do not enable layers.
+      - Reason: The product edits one output.
+      - Evidence: appSchema.panels.layers is omitted.
+
+      ### Controls
+
+      - Decision: Group controls by product entity.
+      - Reason: Each section maps to visible output behavior.
+      - Evidence: src/app/app-schema.ts.
+
+      ### Export
+
+      - Decision: Provide PNG export.
+      - Reason: The product is a still image.
+      - Evidence: panelActions.
+
+      ### Performance
+
+      - Decision: Run performance coverage.
+      - Reason: First working product delivery must prove performance.
+      - Evidence: pnpm verify:perf.
+
+      ## Decision Trail
+
+      ### Iteration 1 — Initial product build
+
+      - Request: Build a still vector poster app.
+      - Task type: Schema, renderer, export, acceptance, and performance.
+      - User-visible result: The canvas renders the poster and exports PNG.
+      - Source/reference checked: User prompt.
+      - Reference inputs: None.
+      - Docs/contracts read: workflow.md, assembly-workflow.md, performance.md.
+      - Contract rules applied: runtime-shell-required, output-export-required, performance-coverage-levels.
+      - Decision: Use SVG renderer with Toolcraft controls.
+      - Alternatives rejected: Canvas output because vector output must stay crisp.
+      - State/output mapping: Schema values feed product-renderer.tsx and export uses runtime state.
+      - Files changed: src/app/app-schema.ts, src/app/product-renderer.tsx, src/app/app-performance.ts.
+      - Verification: pnpm verify:quick; pnpm verify:final; pnpm verify:perf.
+      - Skipped checks: None.
+      - Risks: None; final functional and performance gates passed.
+
+      ## Evidence
+
+      - Source reviewed: src/app/app-schema.ts, src/app/product-renderer.tsx.
+      - Contract applied: runtime-shell-required, performance-coverage-levels.
+
+      ## Verification
+
+      - Run: pnpm verify:quick
+      - Run: pnpm verify:final
+      - Run: pnpm verify:perf
+
+      ## Risks
+
+      - None: checks passed.
+    `;
+
+    expect(getAgentWorklogValidationErrors(missingFallbackReasonWorklog)).toContain(
+      "agent-worklog.md Verification must record the browser performance checkpoint for first working product delivery: use agent-browser when available, or `pnpm verify:perf` with an explicit fallback reason when no agent browser or CI/non-agent automation is used.",
+    );
+  });
+
+  it("allows explicit post-first-working non-performance skips of the full performance suite", () => {
+    const postFirstWorklog = `
+      # Implementation Worklog
+
+      ## Status
+
+      Mode: product
+
+      ## Decisions
+
+      ### Renderer
+
+      - Decision: Keep the existing SVG renderer.
+      - Reason: This pass changes copy only.
+      - Evidence: No renderer files changed.
+
+      ### Timeline
+
+      - Decision: Keep timeline disabled.
+      - Reason: The product remains still output.
+      - Evidence: appSchema.panels.timeline is omitted.
+
+      ### Layers
+
+      - Decision: Keep layers disabled.
+      - Reason: No layer workflow changed.
+      - Evidence: appSchema.panels.layers is omitted.
+
+      ### Controls
+
+      - Decision: Keep existing controls.
+      - Reason: This pass only updates labels.
+      - Evidence: src/app/app-schema.ts labels.
+
+      ### Export
+
+      - Decision: Keep PNG export.
+      - Reason: Export behavior did not change.
+      - Evidence: panelActions unchanged.
+
+      ### Performance
+
+      - Decision: Skip full perf for this post-first-working copy pass.
+      - Reason: No renderer, workload, viewport, animation, export, or performance-sensitive control changed.
+      - Evidence: Prior iteration recorded agent-browser performance checkpoint.
+
+      ## Decision Trail
+
+      ### Iteration 2 — Copy refinement
+
+      - Request: Rename two labels in an already delivered app.
+      - Task type: Tier 0 copy update after the first working version.
+      - User-visible result: The labels are clearer and product output is unchanged.
+      - Source/reference checked: Existing app schema.
+      - Reference inputs: None.
+      - Docs/contracts read: workflow.md and component-rules.md.
+      - Contract rules applied: controls-layout-heuristics.
+      - Decision: Keep renderer, export, and performance matrix unchanged.
+      - Alternatives rejected: Running full perf because this is a post-first-working non-performance edit.
+      - State/output mapping: Label text changes do not alter runtime values or renderer state.
+      - Files changed: src/app/app-schema.ts.
+      - Verification: pnpm verify:quick.
+      - Skipped checks: full performance checkpoint not required for this post-first-working non-performance feature loop.
+      - Risks: None; output behavior is unchanged.
+
+      ## Evidence
+
+      - Source reviewed: src/app/app-schema.ts.
+      - Contract applied: controls-layout-heuristics.
+
+      ## Verification
+
+      - Run: pnpm verify:quick
+      - Skipped checks: full performance checkpoint not required for this post-first-working non-performance feature loop.
+
+      ## Risks
+
+      - None: no performance-sensitive behavior changed.
+    `;
+
+    expect(getAgentWorklogValidationErrors(postFirstWorklog)).toEqual([]);
+  });
+
+  it("rejects product worklogs without an actionable decision trail", () => {
+    const worklog = `
+      # Implementation Worklog
+
+      ## Status
+
+      Mode: product
+
+      ## Decisions
+
+      ### Renderer
+
+      - Decision: Use WebGL.
+      - Reason: Dense animation needs batched rendering.
+      - Evidence: src/app/app-performance.ts.
+
+      ### Timeline
+
+      - Decision: Use playback timeline.
+      - Reason: The product exposes play and scrub.
+      - Evidence: appSchema.panels.timeline.mode.
+
+      ### Layers
+
+      - Decision: Do not enable layers.
+      - Reason: The product is single-output.
+      - Evidence: appSchema.panels.layers is omitted.
+
+      ### Controls
+
+      - Decision: Group controls by product entity.
+      - Reason: Sections map to product behavior.
+      - Evidence: src/app/app-schema.ts.
+
+      ### Export
+
+      - Decision: Provide PNG and video export.
+      - Reason: The app is animated.
+      - Evidence: panelActions.
+
+      ### Performance
+
+      - Decision: Run perf coverage.
+      - Reason: Renderer is animated.
+      - Evidence: pnpm verify:perf.
+
+      ## Decision Trail
+
+      ### Iteration 1 — Product build
+
+      - Request: Build an animated product app.
+      - Task type: Renderer, controls, and export.
+      - Docs/contracts read: workflow.md and renderer-technique.md.
+      - Decision: Use WebGL and playback timeline.
+      - Files changed: src/app/app-schema.ts and src/app/product-renderer.tsx.
+      - Verification: pnpm verify:quick.
+      - Risks: Performance still needs browser proof.
+
+      ## Evidence
+
+      - Source reviewed: src/app/app-schema.ts.
+      - Contract applied: runtime-shell-required.
+
+      ## Verification
+
+      - Run: pnpm verify:quick
+
+      ## Risks
+
+      - Risk: performance needs a follow-up run.
+    `;
+
+    expect(getAgentWorklogValidationErrors(worklog)).toEqual(
+      expect.arrayContaining([
+        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "User-visible result:".',
+        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "Source/reference checked:".',
+        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "Reference inputs:".',
+        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "Contract rules applied:".',
+        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "Alternatives rejected:".',
+        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "State/output mapping:".',
+        'agent-worklog.md Decision Trail iteration "Iteration 1 — Product build" must include "Skipped checks:".',
+      ]),
+    );
+  });
+
+  it("requires product output apps to expose export actions in the sticky footer", () => {
+    if (starterProductReadiness.mode !== "product" && !schemaHasProductSurface()) {
+      return;
+    }
+
+    const panelActionTexts = getSchemaPanelActionSearchTexts();
+    const browserTestSources = readBrowserTestSources();
+    const productImplementationSource = getProductImplementationSource();
+    const productRuntimeImplementationSource = getProductRuntimeImplementationSource();
+    const backgroundColorTargets = getSchemaBackgroundControlTargets(new Set(["color"]));
+    const backgroundToggleTargets = getSchemaBackgroundControlTargets(
+      new Set(["checkbox", "select", "segmented", "switch"]),
+    );
+
+    expect(
+      panelActionTexts.length,
+      "Product apps must define panelActions in the controls panel sticky footer.",
+    ).toBeGreaterThan(0);
+    expect(
+      panelActionTexts.some(textLooksLikePngExport),
+      "Every product app must expose Export PNG or Download PNG through panelActions.",
+    ).toBe(true);
+    expect(
+      productImplementationSource,
+      "PNG export must use createToolcraftPngExportCanvas so background transparency and retina sizing follow the standard runtime contract.",
+    ).toMatch(/\bcreateToolcraftPngExportCanvas\b/);
+    expect(
+      productImplementationSource,
+      "PNG export must pass includeBackground from runtime state to createToolcraftPngExportCanvas; do not hardcode PNG transparency or background inclusion in schema only.",
+    ).toMatch(/\bcreateToolcraftPngExportCanvas\s*\(\s*\{[\s\S]*\bincludeBackground\s*:/);
+    expect(
+      productRuntimeImplementationSource,
+      "Live preview must read include-background state through shouldIncludeToolcraftPreviewBackground(state) so turning Include off hides the product preview background without affecting video export.",
+    ).toMatch(/\bshouldIncludeToolcraftPreviewBackground\b/);
+    expect(
+      backgroundColorTargets.length,
+      "Every product app with Export PNG must expose a user-facing background color control.",
+    ).toBeGreaterThan(0);
     expect(
       backgroundToggleTargets.length,
       'Every product app with Export PNG must expose export.includeBackground in the required "Background" section as a Switch labeled "Include".',
@@ -2812,8 +4335,24 @@ describe("Toolcraft template app acceptance coverage", () => {
     ).toBeGreaterThanOrEqual(2);
     expect(
       productImplementationSource,
-      "Video export must use getToolcraftRetinaExportSize so video dimensions follow the same retina export contract.",
-    ).toMatch(/\bgetToolcraftRetinaExportSize\b/);
+      "Video export must use getToolcraftVideoExportSize so current and 4K dimensions follow the standard encoder-safe export contract.",
+    ).toMatch(/\bgetToolcraftVideoExportSize\b/);
+    expect(
+      sourceUsesVideoExportSizeHelper(productImplementationSource),
+      "Video export must use getToolcraftVideoExportSize instead of custom video dimension math.",
+    ).toBe(true);
+    expect(
+      sourceHasUnsafeVideoLongEdgeSizing(productImplementationSource),
+      "Video export must not use PNG-style 4096px long-edge sizing for 4K video; getToolcraftVideoExportSize fits inside 3840x2160.",
+    ).toBe(false);
+    expect(
+      sourceHasCaptureStreamBeforeCanvasSizing(productImplementationSource),
+      "When using captureStream, video export must set canvas width/height before captureStream/MediaRecorder setup.",
+    ).toBe(false);
+    expect(
+      sourceHandlesVideoRecorderOrEncoderErrors(productImplementationSource),
+      "Video export must reject MediaRecorder/VideoEncoder errors instead of returning corrupt video blobs.",
+    ).toBe(true);
     expect(
       productImplementationSource,
       "Video export must use shouldIncludeToolcraftExportBackground so PNG transparency does not remove the video background.",
@@ -2892,6 +4431,10 @@ describe("Toolcraft template app acceptance coverage", () => {
       sourceHasVideoDurationMetadataCoverage(browserTestSources),
       "Video export browser coverage must load the exported blob as a <video>, wait for loadedmetadata, and compare video.duration with the edited timeline duration. blobSize/blobType checks alone do not prove timeline-length export.",
     ).toBe(true);
+    expect(
+      sourceHasVideoDimensionMetadataCoverage(browserTestSources),
+      "Video export browser coverage must load exported video metadata and assert video.videoWidth/video.videoHeight for both Current and 4K resolution paths. Blob size or selected control values alone do not prove conversion dimensions.",
+    ).toBe(true);
     if (hasMovOrProResFormat) {
       expect(
         sourceHasCustomMovOrProResEncoder(productImplementationSource),
@@ -2920,7 +4463,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                       value: "reset",
                     },
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -2975,7 +4518,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3044,7 +4587,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3110,7 +4653,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3177,7 +4720,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3240,7 +4783,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3305,7 +4848,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3387,12 +4930,12 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "download",
+                      icon: "upload-simple",
                       label: "Export Video",
                       value: "export.video",
                     },
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3406,7 +4949,6 @@ describe("Toolcraft template app acceptance coverage", () => {
           ],
           title: "Controls",
         },
-        timeline: { enabled: true, mode: "playback" },
       },
     });
 
@@ -3461,12 +5003,12 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "download",
+                      icon: "upload-simple",
                       label: "Export Video",
                       value: "export.video",
                     },
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3480,7 +5022,6 @@ describe("Toolcraft template app acceptance coverage", () => {
           ],
           title: "Controls",
         },
-        timeline: { enabled: true, mode: "playback" },
       },
     });
     const imageFormatAcceptance = makeControlAcceptance("export.image.format", "select");
@@ -3532,7 +5073,7 @@ describe("Toolcraft template app acceptance coverage", () => {
     );
   });
 
-  it("requires disabledWhen controls to reference a real target and prove disabled behavior", () => {
+  it("rejects disabled product controls and requires visibleWhen for unavailable controls", () => {
     const schemaWithDisabledDependency = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -3582,12 +5123,12 @@ describe("Toolcraft template app acceptance coverage", () => {
           "disabledWhen target distribution.mode does not match another schema control target",
         ),
         expect.stringContaining(
-          "uses disabledWhen and acceptance must prove the control becomes disabled/unavailable",
+          "uses disabledWhen. Generated product panels should show only controls usable in the current state",
         ),
       ]),
     );
 
-    const schemaWithValidDependency = defineToolcraft({
+    const schemaWithBranchDisabledDependency = defineToolcraft({
       canvas: { enabled: true },
       panels: {
         controls: {
@@ -3606,10 +5147,52 @@ describe("Toolcraft template app acceptance coverage", () => {
                 },
                 fillAmount: {
                   defaultValue: 50,
-                  disabledWhen: {
-                    equals: "full",
-                    target: "distribution.fillMode",
-                  },
+                  disabledWhen: {
+                    equals: "full",
+                    target: "distribution.fillMode",
+                  },
+                  label: "Fill level",
+                  max: 100,
+                  min: 0,
+                  target: "distribution.fillAmount",
+                  type: "slider",
+                },
+              },
+              title: "Distribution",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const branchErrors = validateToolcraftAcceptanceCoverage(schemaWithBranchDisabledDependency, [
+      makeControlAcceptance("distribution.fillMode", "segmented"),
+      {
+        ...makeControlAcceptance("distribution.fillAmount", "slider"),
+        expectedObservable:
+          "Fill level changes partial fill output and becomes disabled when Fill mode is Full.",
+        userAction: "Switch Fill mode to Full, verify Fill level is disabled, then switch to Partial and drag it.",
+      },
+    ]);
+
+    expect(branchErrors).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining(
+          "uses disabledWhen. Generated product panels should show only controls usable in the current state",
+        ),
+      ]),
+    );
+
+    const schemaWithDisabledControl = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                fillAmount: {
+                  defaultValue: 50,
+                  disabled: true,
                   label: "Fill level",
                   max: 100,
                   min: 0,
@@ -3624,20 +5207,16 @@ describe("Toolcraft template app acceptance coverage", () => {
         },
       },
     });
-    const errors = validateToolcraftAcceptanceCoverage(schemaWithValidDependency, [
-      makeControlAcceptance("distribution.fillMode", "segmented"),
-      {
-        ...makeControlAcceptance("distribution.fillAmount", "slider"),
-        expectedObservable:
-          "Fill level changes partial fill output and becomes disabled when Fill mode is Full.",
-        userAction: "Switch Fill mode to Full, verify Fill level is disabled, then switch to Partial and drag it.",
-      },
-    ]);
 
-    expect(errors).not.toEqual(
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithDisabledControl, [
+        makeControlAcceptance("distribution.fillAmount", "slider"),
+      ]),
+    ).toEqual(
       expect.arrayContaining([
-        expect.stringContaining("disabledWhen target"),
-        expect.stringContaining("uses disabledWhen and acceptance must prove"),
+        expect.stringContaining(
+          "sets disabled: true. Generated product panels should show only controls usable in the current state",
+        ),
       ]),
     );
   });
@@ -3761,18 +5340,271 @@ describe("Toolcraft template app acceptance coverage", () => {
               controls: {
                 crt: {
                   defaultValue: true,
-                  label: "Enable CRT",
-                  target: "style.crt",
+                  label: "Enable CRT",
+                  target: "style.crt",
+                  type: "switch",
+                },
+                guides: {
+                  defaultValue: false,
+                  label: "Disable guides",
+                  target: "overlay.guides",
+                  type: "checkbox",
+                },
+              },
+              title: "Style",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithActionLabels, [
+        makeControlAcceptance("style.crt", "switch"),
+        makeControlAcceptance("overlay.guides", "checkbox"),
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining(
+          'style.crt) toggle labels must name the setting context only; use "CRT", "Background", "Glow", or "Loop" instead of "Enable CRT".',
+        ),
+        expect.stringContaining(
+          'overlay.guides) toggle labels must name the setting context only; use "CRT", "Background", "Glow", or "Loop" instead of "Disable guides".',
+        ),
+      ]),
+    );
+
+    const schemaWithContextLabels = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                crt: {
+                  defaultValue: true,
+                  label: "CRT",
+                  target: "style.crt",
+                  type: "switch",
+                },
+                guides: {
+                  defaultValue: false,
+                  label: "Guides",
+                  target: "overlay.guides",
+                  type: "checkbox",
+                },
+              },
+              title: "Style",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const errors = validateToolcraftAcceptanceCoverage(schemaWithContextLabels, [
+      makeControlAcceptance("style.crt", "switch"),
+      makeControlAcceptance("overlay.guides", "checkbox"),
+    ]);
+
+    expect(errors).not.toEqual(
+      expect.arrayContaining([
+        expect.stringContaining("toggle labels must name the setting context only"),
+      ]),
+    );
+  });
+
+  it("rejects binary control labels that duplicate their section title", () => {
+    const schemaWithDuplicateToggleLabel = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                includeBackground: {
+                  defaultValue: true,
+                  label: "Background",
+                  target: "export.includeBackground",
+                  type: "switch",
+                },
+              },
+              title: "Background",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithDuplicateToggleLabel, [
+        makeControlAcceptance("export.includeBackground", "switch"),
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining(
+          'export.includeBackground) toggle label "Background" duplicates section title "Background". Use a shorter contextual label such as "Include" or rename the toggle to a more specific setting.',
+        ),
+      ]),
+    );
+  });
+
+  it("rejects single Actions controls that duplicate their only button label", () => {
+    const schemaWithDuplicateActionLabel = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                wash: {
+                  actions: [{ label: "Wash", value: "wash" }],
+                  defaultValue: null,
+                  label: "Wash",
+                  target: "flow.washSignal",
+                  type: "actions",
+                },
+              },
+              title: "Flow",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithDuplicateActionLabel, [
+        makeControlAcceptance("flow.washSignal", "actions"),
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining(
+          'flow.washSignal) single Actions control label "Wash" duplicates its only button label "Wash". Keep the button as the command and use a short context label such as "Ink wash", "Palette action", or "Current layer".',
+        ),
+      ]),
+    );
+  });
+
+  it("allows single Actions controls with a concise context label", () => {
+    const schemaWithContextActionLabel = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                wash: {
+                  actions: [{ label: "Wash", value: "wash" }],
+                  defaultValue: null,
+                  label: "Ink wash",
+                  target: "flow.washSignal",
+                  type: "actions",
+                },
+              },
+              title: "Flow",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const errors = validateToolcraftAcceptanceCoverage(schemaWithContextActionLabel, [
+      makeControlAcceptance("flow.washSignal", "actions"),
+    ]);
+
+    expect(errors).not.toEqual(
+      expect.arrayContaining([
+        expect.stringContaining("single Actions control label"),
+      ]),
+    );
+  });
+
+  it("allows short Include toggle plus an unlabeled background color in the required row", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                includeBackground: {
+                  defaultValue: true,
+                  description:
+                    "Controls preview and PNG background visibility while video keeps the background.",
+                  label: "Include",
+                  target: "export.includeBackground",
+                  type: "switch",
+                },
+                background: {
+                  defaultValue: "#0F0F0F",
+                  label: false,
+                  target: "appearance.background",
+                  type: "color",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["includeBackground", "background"],
+                  layout: "inline",
+                },
+              ],
+              title: "Background",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const errors = validateToolcraftAcceptanceCoverage(schema, [
+      makeControlAcceptance("export.includeBackground", "switch"),
+      makeControlAcceptance("appearance.background", "color"),
+    ]);
+
+    expect(errors).not.toEqual(
+      expect.arrayContaining([
+        expect.stringContaining("duplicates section title"),
+        expect.stringContaining("too long for a two-column toggle row"),
+        expect.stringContaining("must use the short visible label"),
+        expect.stringContaining("must use label false"),
+      ]),
+    );
+  });
+
+  it("allows short visible toggle labels beside one related parameter", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                loop: {
+                  defaultValue: true,
+                  label: "Loop",
+                  target: "animation.loop",
                   type: "switch",
                 },
-                guides: {
-                  defaultValue: false,
-                  label: "Disable guides",
-                  target: "overlay.guides",
-                  type: "checkbox",
+                duration: {
+                  defaultValue: "8",
+                  label: false,
+                  target: "animation.duration",
+                  type: "text",
                 },
               },
-              title: "Style",
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["loop", "duration"],
+                  layout: "inline",
+                },
+              ],
+              title: "Playback",
             },
           ],
           title: "Controls",
@@ -3780,43 +5612,32 @@ describe("Toolcraft template app acceptance coverage", () => {
       },
     });
 
-    expect(
-      validateToolcraftAcceptanceCoverage(schemaWithActionLabels, [
-        makeControlAcceptance("style.crt", "switch"),
-        makeControlAcceptance("overlay.guides", "checkbox"),
-      ]),
-    ).toEqual(
-      expect.arrayContaining([
-        expect.stringContaining(
-          'style.crt) toggle labels must name the setting context only; use "CRT", "Background", "Glow", or "Loop" instead of "Enable CRT".',
-        ),
-        expect.stringContaining(
-          'overlay.guides) toggle labels must name the setting context only; use "CRT", "Background", "Glow", or "Loop" instead of "Disable guides".',
-        ),
-      ]),
+    const errors = validateToolcraftAcceptanceCoverage(schema, [
+      makeControlAcceptance("animation.loop", "switch"),
+      makeControlAcceptance("animation.duration", "text"),
+    ]);
+
+    expect(errors).not.toEqual(
+      expect.arrayContaining([expect.stringContaining("compact toggle-plus-parameter row")]),
     );
+  });
 
-    const schemaWithContextLabels = defineToolcraft({
+  it("rejects CodeTextarea for short single-line text content", () => {
+    const schema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
         controls: {
           sections: [
             {
               controls: {
-                crt: {
-                  defaultValue: true,
-                  label: "CRT",
-                  target: "style.crt",
-                  type: "switch",
-                },
-                guides: {
-                  defaultValue: false,
-                  label: "Guides",
-                  target: "overlay.guides",
-                  type: "checkbox",
+                buttonText: {
+                  defaultValue: "Glass",
+                  label: "Text",
+                  target: "button.text",
+                  type: "code",
                 },
               },
-              title: "Style",
+              title: "Button",
             },
           ],
           title: "Controls",
@@ -3824,34 +5645,35 @@ describe("Toolcraft template app acceptance coverage", () => {
       },
     });
 
-    const errors = validateToolcraftAcceptanceCoverage(schemaWithContextLabels, [
-      makeControlAcceptance("style.crt", "switch"),
-      makeControlAcceptance("overlay.guides", "checkbox"),
-    ]);
-
-    expect(errors).not.toEqual(
+    expect(
+      validateToolcraftAcceptanceCoverage(schema, [
+        makeControlAcceptance("button.text", "code"),
+      ]),
+    ).toEqual(
       expect.arrayContaining([
-        expect.stringContaining("toggle labels must name the setting context only"),
+        expect.stringContaining("uses CodeTextarea for short single-line text"),
       ]),
     );
   });
 
-  it("rejects binary control labels that duplicate their section title", () => {
-    const schemaWithDuplicateToggleLabel = defineToolcraft({
+  it("allows CodeTextarea when a short default documents long multiline intent", () => {
+    const schema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
         controls: {
           sections: [
             {
               controls: {
-                includeBackground: {
-                  defaultValue: true,
-                  label: "Background",
-                  target: "export.includeBackground",
-                  type: "switch",
+                prompt: {
+                  defaultValue: "Describe the scene",
+                  description:
+                    "Long multiline prompt content for generated output.",
+                  label: "Prompt",
+                  target: "generation.prompt",
+                  type: "code",
                 },
               },
-              title: "Background",
+              title: "Generation",
             },
           ],
           title: "Controls",
@@ -3860,19 +5682,17 @@ describe("Toolcraft template app acceptance coverage", () => {
     });
 
     expect(
-      validateToolcraftAcceptanceCoverage(schemaWithDuplicateToggleLabel, [
-        makeControlAcceptance("export.includeBackground", "switch"),
+      validateToolcraftAcceptanceCoverage(schema, [
+        makeControlAcceptance("generation.prompt", "code"),
       ]),
-    ).toEqual(
+    ).not.toEqual(
       expect.arrayContaining([
-        expect.stringContaining(
-          'export.includeBackground) toggle label "Background" duplicates section title "Background". Use a shorter contextual label such as "Include" or rename the toggle to a more specific setting.',
-        ),
+        expect.stringContaining("uses CodeTextarea for short single-line text"),
       ]),
     );
   });
 
-  it("allows short Include toggle plus an unlabeled background color in the required row", () => {
+  it("rejects visible parameter labels beside one related toggle", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -3880,29 +5700,27 @@ describe("Toolcraft template app acceptance coverage", () => {
           sections: [
             {
               controls: {
-                includeBackground: {
+                loop: {
                   defaultValue: true,
-                  description:
-                    "Controls preview and PNG background visibility while video keeps the background.",
-                  label: "Include",
-                  target: "export.includeBackground",
+                  label: "Loop",
+                  target: "animation.loop",
                   type: "switch",
                 },
-                background: {
-                  defaultValue: "#0F0F0F",
-                  label: false,
-                  target: "appearance.background",
-                  type: "color",
+                duration: {
+                  defaultValue: "8",
+                  label: "Duration",
+                  target: "animation.duration",
+                  type: "text",
                 },
               },
               layoutGroups: [
                 {
                   columns: 2,
-                  controls: ["includeBackground", "background"],
+                  controls: ["loop", "duration"],
                   layout: "inline",
                 },
               ],
-              title: "Background",
+              title: "Playback",
             },
           ],
           title: "Controls",
@@ -3910,22 +5728,21 @@ describe("Toolcraft template app acceptance coverage", () => {
       },
     });
 
-    const errors = validateToolcraftAcceptanceCoverage(schema, [
-      makeControlAcceptance("export.includeBackground", "switch"),
-      makeControlAcceptance("appearance.background", "color"),
-    ]);
-
-    expect(errors).not.toEqual(
+    expect(
+      validateToolcraftAcceptanceCoverage(schema, [
+        makeControlAcceptance("animation.loop", "switch"),
+        makeControlAcceptance("animation.duration", "text"),
+      ]),
+    ).toEqual(
       expect.arrayContaining([
-        expect.stringContaining("duplicates section title"),
-        expect.stringContaining("too long for a two-column toggle row"),
-        expect.stringContaining("must use the short visible label"),
-        expect.stringContaining("must use label false"),
+        expect.stringContaining(
+          'Playback layoutGroups inline row "loop, duration" pairs a toggle with parameter labels duration "Duration". In toggle-plus-parameter rows, the non-toggle parameter must use label false; if that label is needed, stack the controls instead.',
+        ),
       ]),
     );
   });
 
-  it("allows short visible toggle labels beside one related parameter", () => {
+  it("rejects segmented controls in inline half-width layout rows", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -3933,27 +5750,31 @@ describe("Toolcraft template app acceptance coverage", () => {
           sections: [
             {
               controls: {
-                loop: {
+                includeText: {
                   defaultValue: true,
-                  label: "Loop",
-                  target: "animation.loop",
+                  label: "Include",
+                  target: "text.enabled",
                   type: "switch",
                 },
-                duration: {
-                  defaultValue: "8",
-                  label: "Duration",
-                  target: "animation.duration",
-                  type: "text",
+                dragTarget: {
+                  defaultValue: "glass",
+                  label: "Drag",
+                  options: [
+                    { label: "Glass", value: "glass" },
+                    { label: "Text", value: "text" },
+                  ],
+                  target: "text.dragTarget",
+                  type: "segmented",
                 },
               },
               layoutGroups: [
                 {
                   columns: 2,
-                  controls: ["loop", "duration"],
+                  controls: ["includeText", "dragTarget"],
                   layout: "inline",
                 },
               ],
-              title: "Playback",
+              title: "Glass Text",
             },
           ],
           title: "Controls",
@@ -3961,13 +5782,17 @@ describe("Toolcraft template app acceptance coverage", () => {
       },
     });
 
-    const errors = validateToolcraftAcceptanceCoverage(schema, [
-      makeControlAcceptance("animation.loop", "switch"),
-      makeControlAcceptance("animation.duration", "text"),
-    ]);
-
-    expect(errors).not.toEqual(
-      expect.arrayContaining([expect.stringContaining("compact toggle-plus-parameter row")]),
+    expect(
+      validateToolcraftAcceptanceCoverage(schema, [
+        makeControlAcceptance("text.enabled", "switch"),
+        makeControlAcceptance("text.dragTarget", "segmented"),
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining(
+          'Glass Text layoutGroups inline row "includeText, dragTarget" includes segmented control dragTarget. Segmented is full-width and must not share a two-column or half-width row; use Select when a finite choice must fit beside another control.',
+        ),
+      ]),
     );
   });
 
@@ -4185,44 +6010,227 @@ describe("Toolcraft template app acceptance coverage", () => {
               title: "Output",
             },
           ],
-          title: "Controls",
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schema, [
+        makeControlAcceptance("output.background", "switch"),
+        makeControlAcceptance("debug.diagnosticOverlay", "switch"),
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        'Output layoutGroups inline row "background, diagnosticOverlay" includes switch labels diagnosticOverlay "Diagnostic overlay" that are too long for a two-column toggle row. Switches share a row only when every visible label fits without truncation; shorten labels or stack them.',
+      ]),
+    );
+  });
+
+  it("requires explicit reference behavior coverage in reference-runtime-clone mode", () => {
+    expect(
+      validateToolcraftAcceptanceCoverage(starterSchema, starterAcceptance, {
+        behaviorCoverage: [
+          "canvas-sizing",
+          "control-mapping",
+          "renderer-state",
+          "renderer-loop",
+        ],
+        mode: "reference-runtime-clone",
+        referenceName: "legacy badge wall",
+        sourceOfTruth: "reference-runtime",
+      } as never),
+    ).toEqual(
+      expect.arrayContaining([
+        'reference-runtime-clone behaviorCoverage "canvas-sizing" is missing an acceptance entry with referenceCoverage "canvas-sizing".',
+        'reference-runtime-clone behaviorCoverage "control-mapping" is missing an acceptance entry with referenceCoverage "control-mapping".',
+        'reference-runtime-clone behaviorCoverage "renderer-state" is missing an acceptance entry with referenceCoverage "renderer-state".',
+        'reference-runtime-clone behaviorCoverage "renderer-loop" is missing an acceptance entry with referenceCoverage "renderer-loop".',
+        'reference-runtime-clone transferMode must declare referenceTimeline with mode "none", "toolcraft-playback", "toolcraft-keyframes", or "custom-reference-timeline".',
+      ]),
+    );
+  });
+
+  it("requires a reference feature inventory before accepting a reference-runtime-clone", () => {
+    const referenceAcceptance = [
+      ...starterAcceptance,
+      makeReferenceCoverageAcceptance("reference.canvasSizing", "canvas-sizing"),
+      makeReferenceCoverageAcceptance("reference.controlMapping", "control-mapping"),
+      makeReferenceCoverageAcceptance("reference.rendererState", "renderer-state"),
+    ];
+
+    expect(
+      validateToolcraftAcceptanceCoverage(starterSchema, referenceAcceptance, {
+        behaviorCoverage: ["canvas-sizing", "control-mapping", "renderer-state"],
+        mode: "reference-runtime-clone",
+        referenceName: "legacy badge wall",
+        referenceTimeline: { behaviorCoverage: [], mode: "none" },
+        sourceOfTruth: "reference-runtime",
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        "reference-runtime-clone transferMode must declare referenceFeatureInventory with every user-visible and output-affecting behavior from the inspected reference, mapped to Toolcraft implementation and acceptance coverage.",
+        'reference-runtime-clone behaviorCoverage "canvas-sizing" must be represented in referenceFeatureInventory by an item whose acceptanceId points to that referenceCoverage.',
+        'reference-runtime-clone behaviorCoverage "control-mapping" must be represented in referenceFeatureInventory by an item whose acceptanceId points to that referenceCoverage.',
+        'reference-runtime-clone behaviorCoverage "renderer-state" must be represented in referenceFeatureInventory by an item whose acceptanceId points to that referenceCoverage.',
+        "reference.canvasSizing declares reference coverage but is not mapped from referenceFeatureInventory. Every reference acceptance row must correspond to an inventoried reference feature.",
+      ]),
+    );
+  });
+
+  it("requires reference study evidence before accepting a reference-runtime-clone", () => {
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        starterSchema,
+        [
+          ...starterAcceptance,
+          makeReferenceCoverageAcceptance("reference.canvasSizing", "canvas-sizing"),
+          makeReferenceCoverageAcceptance("reference.controlMapping", "control-mapping"),
+          makeReferenceCoverageAcceptance("reference.rendererState", "renderer-state"),
+        ],
+        {
+          behaviorCoverage: ["canvas-sizing", "control-mapping", "renderer-state"],
+          mode: "reference-runtime-clone",
+          referenceFeatureInventory: makeReferenceFeatureInventory(),
+          referenceName: "legacy badge wall",
+          referenceTimeline: { behaviorCoverage: [], mode: "none" },
+          sourceOfTruth: "reference-runtime",
+        },
+      ),
+    ).toContain(
+      "reference-runtime-clone transferMode must declare referenceStudy proving the reference was inspected and, when runnable or reconstructable, run or restored locally before implementation.",
+    );
+  });
+
+  it("requires a concrete blocker for source-only reference study", () => {
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        starterSchema,
+        [
+          ...starterAcceptance,
+          makeReferenceCoverageAcceptance("reference.canvasSizing", "canvas-sizing"),
+          makeReferenceCoverageAcceptance("reference.controlMapping", "control-mapping"),
+          makeReferenceCoverageAcceptance("reference.rendererState", "renderer-state"),
+        ],
+        {
+          behaviorCoverage: ["canvas-sizing", "control-mapping", "renderer-state"],
+          mode: "reference-runtime-clone",
+          referenceFeatureInventory: makeReferenceFeatureInventory(),
+          referenceName: "legacy badge wall",
+          referenceStudy: {
+            ...referenceStudyEvidence,
+            sourceOnlyReason: "Source review was enough.",
+            status: "source-inspection-only",
+          },
+          referenceTimeline: { behaviorCoverage: [], mode: "none" },
+          sourceOfTruth: "reference-runtime",
+        },
+      ),
+    ).toContain(
+      "referenceStudy.sourceOnlyReason must state the concrete blocker that made running or restoring the reference unavailable.",
+    );
+  });
+
+  it("rejects reference feature inventory items that are not backed by reference acceptance coverage", () => {
+    const ordinaryControlAcceptance = makeControlAcceptance("appearance.opacity", "slider");
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        starterSchema,
+        [
+          ...starterAcceptance,
+          ordinaryControlAcceptance,
+          makeReferenceCoverageAcceptance("reference.controlMapping", "control-mapping"),
+          makeReferenceCoverageAcceptance("reference.rendererState", "renderer-state"),
+        ],
+        {
+          behaviorCoverage: ["canvas-sizing", "control-mapping", "renderer-state"],
+          mode: "reference-runtime-clone",
+          referenceFeatureInventory: [
+            {
+              acceptanceId: "appearance.opacity",
+              behaviorEvidence:
+                "Observed the reference browser output preserve its canvas dimensions.",
+              featureName: "Canvas sizing",
+              id: "canvas-sizing",
+              referenceBehavior:
+                "The reference renderer owns output sizing and canvas dimensions.",
+              sourceEvidence: "Inspected reference renderer sizing source.",
+              status: "ported",
+              toolcraftMapping:
+                "Toolcraft editable-output sizing preserves the reference dimensions.",
+            },
+            ...makeReferenceFeatureInventory().slice(1),
+          ],
+          referenceName: "legacy badge wall",
+          referenceTimeline: { behaviorCoverage: [], mode: "none" },
+          sourceOfTruth: "reference-runtime",
         },
-      },
-    });
-
-    expect(
-      validateToolcraftAcceptanceCoverage(schema, [
-        makeControlAcceptance("output.background", "switch"),
-        makeControlAcceptance("debug.diagnosticOverlay", "switch"),
-      ]),
+      ),
     ).toEqual(
       expect.arrayContaining([
-        'Output layoutGroups inline row "background, diagnosticOverlay" includes switch labels diagnosticOverlay "Diagnostic overlay" that are too long for a two-column toggle row. Switches share a row only when every visible label fits without truncation; shorten labels or stack them.',
+        'referenceFeatureInventory "canvas-sizing" acceptanceId "appearance.opacity" must point to an acceptance entry with referenceCoverage or referenceTimelineCoverage.',
+        'reference-runtime-clone behaviorCoverage "canvas-sizing" must be represented in referenceFeatureInventory by an item whose acceptanceId points to that referenceCoverage.',
       ]),
     );
   });
 
-  it("requires explicit reference behavior coverage in reference-runtime-clone mode", () => {
+  it("requires feature-level behavior evidence for reference inventory items", () => {
     expect(
-      validateToolcraftAcceptanceCoverage(starterSchema, starterAcceptance, {
-        behaviorCoverage: [
-          "canvas-sizing",
-          "control-mapping",
-          "renderer-state",
-          "renderer-loop",
+      validateToolcraftAcceptanceCoverage(
+        starterSchema,
+        [
+          ...starterAcceptance,
+          makeReferenceCoverageAcceptance("reference.canvasSizing", "canvas-sizing"),
+          makeReferenceCoverageAcceptance("reference.controlMapping", "control-mapping"),
+          makeReferenceCoverageAcceptance("reference.rendererState", "renderer-state"),
         ],
-        mode: "reference-runtime-clone",
-        referenceName: "legacy badge wall",
-        sourceOfTruth: "reference-runtime",
-      } as never),
-    ).toEqual(
-      expect.arrayContaining([
-        'reference-runtime-clone behaviorCoverage "canvas-sizing" is missing an acceptance entry with referenceCoverage "canvas-sizing".',
-        'reference-runtime-clone behaviorCoverage "control-mapping" is missing an acceptance entry with referenceCoverage "control-mapping".',
-        'reference-runtime-clone behaviorCoverage "renderer-state" is missing an acceptance entry with referenceCoverage "renderer-state".',
-        'reference-runtime-clone behaviorCoverage "renderer-loop" is missing an acceptance entry with referenceCoverage "renderer-loop".',
-        'reference-runtime-clone transferMode must declare referenceTimeline with mode "none", "toolcraft-playback", "toolcraft-keyframes", or "custom-reference-timeline".',
-      ]),
+        {
+          behaviorCoverage: ["canvas-sizing", "control-mapping", "renderer-state"],
+          mode: "reference-runtime-clone",
+          referenceFeatureInventory: [
+            { ...makeReferenceFeatureInventory()[0], behaviorEvidence: "" },
+            ...makeReferenceFeatureInventory().slice(1),
+          ],
+          referenceName: "legacy badge wall",
+          referenceStudy: referenceStudyEvidence,
+          referenceTimeline: { behaviorCoverage: [], mode: "none" },
+          sourceOfTruth: "reference-runtime",
+        },
+      ),
+    ).toContain(
+      'referenceFeatureInventory "canvas-sizing" must include behaviorEvidence from the original, restored, or source-only reference study proving this feature was observed before Toolcraft mapping.',
+    );
+  });
+
+  it("requires explicit user evidence before marking reference behavior intentionally changed", () => {
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        starterSchema,
+        [
+          ...starterAcceptance,
+          makeReferenceCoverageAcceptance("reference.canvasSizing", "canvas-sizing"),
+          makeReferenceCoverageAcceptance("reference.controlMapping", "control-mapping"),
+          makeReferenceCoverageAcceptance("reference.rendererState", "renderer-state"),
+        ],
+        {
+          behaviorCoverage: ["canvas-sizing", "control-mapping", "renderer-state"],
+          mode: "reference-runtime-clone",
+          referenceFeatureInventory: [
+            {
+              ...makeReferenceFeatureInventory()[0],
+              status: "intentionally-changed",
+              userApprovedChangeReason: "Cleaner implementation.",
+            },
+            ...makeReferenceFeatureInventory().slice(1),
+          ],
+          referenceName: "legacy badge wall",
+          referenceTimeline: { behaviorCoverage: [], mode: "none" },
+          sourceOfTruth: "reference-runtime",
+        },
+      ),
+    ).toContain(
+      'referenceFeatureInventory "canvas-sizing" userApprovedChangeReason must cite explicit user approval or redesign/change-request evidence.',
     );
   });
 
@@ -4360,7 +6368,9 @@ describe("Toolcraft template app acceptance coverage", () => {
         {
           behaviorCoverage: ["canvas-sizing", "control-mapping", "renderer-state"],
           mode: "reference-runtime-clone",
+          referenceFeatureInventory: makeReferenceFeatureInventory(),
           referenceName: "legacy badge wall",
+          referenceStudy: referenceStudyEvidence,
           referenceTimeline: { behaviorCoverage: [], mode: "none" },
           sourceOfTruth: "reference-runtime",
         },
@@ -4421,6 +6431,130 @@ describe("Toolcraft template app acceptance coverage", () => {
     );
   });
 
+  it("requires Toolcraft reference playback timelines to declare loop duration provenance", () => {
+    const schemaWithPlaybackTimeline = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
+      },
+    };
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithPlaybackTimeline,
+        [
+          ...starterAcceptance,
+          {
+            ...playbackTimelineAcceptance,
+            id: "reference.timeline.playback",
+            referenceTimelineCoverage: "playback",
+          },
+        ],
+        {
+          behaviorCoverage: [
+            "canvas-sizing",
+            "control-mapping",
+            "renderer-state",
+            "pause-resume",
+          ],
+          mode: "reference-runtime-clone",
+          referenceName: "legacy playback animation",
+          referenceTimeline: { behaviorCoverage: ["playback"], mode: "toolcraft-playback" },
+          sourceOfTruth: "reference-runtime",
+        },
+      ),
+    ).toContain(
+      'referenceTimeline mode "toolcraft-playback" must declare loopDuration with source, seconds, and evidence. Do not let runtime/template fallback duration such as 8s stand in for reference loop intent.',
+    );
+  });
+
+  it("requires Toolcraft reference timeline loop duration to match the timeline default", () => {
+    const schemaWithPlaybackTimeline = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
+      },
+    };
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithPlaybackTimeline,
+        [
+          ...starterAcceptance,
+          {
+            ...playbackTimelineAcceptance,
+            id: "reference.timeline.playback",
+            referenceTimelineCoverage: "playback",
+          },
+        ],
+        {
+          behaviorCoverage: [
+            "canvas-sizing",
+            "control-mapping",
+            "renderer-state",
+            "pause-resume",
+          ],
+          mode: "reference-runtime-clone",
+          referenceName: "legacy playback animation",
+          referenceTimeline: {
+            behaviorCoverage: ["playback"],
+            loopDuration: {
+              evidence:
+                "The reference app completes one seamless forward playback cycle over 6s.",
+              seconds: 6,
+              source: "reference",
+            },
+            mode: "toolcraft-playback",
+          },
+          sourceOfTruth: "reference-runtime",
+        },
+      ),
+    ).toContain(
+      "panels.timeline.defaultDurationSeconds (8) must match referenceTimeline.loopDuration.seconds (6).",
+    );
+  });
+
+  it("requires Toolcraft reference keyframe timelines to declare loop duration provenance", () => {
+    const schemaWithKeyframesTimeline = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "keyframes" as const },
+      },
+    };
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithKeyframesTimeline,
+        [
+          ...starterAcceptance,
+          playbackTimelineAcceptance,
+          {
+            ...keyframesTimelineAcceptance,
+            id: "reference.timeline.keyframes",
+            referenceTimelineCoverage: "keyframes",
+          },
+        ],
+        {
+          behaviorCoverage: [
+            "canvas-sizing",
+            "control-mapping",
+            "renderer-state",
+            "time-progress",
+          ],
+          mode: "reference-runtime-clone",
+          referenceName: "legacy keyframe animation",
+          referenceTimeline: { behaviorCoverage: ["keyframes"], mode: "toolcraft-keyframes" },
+          sourceOfTruth: "reference-runtime",
+        },
+      ),
+    ).toContain(
+      'referenceTimeline mode "toolcraft-keyframes" must declare loopDuration with source, seconds, and evidence. Do not let runtime/template fallback duration such as 8s stand in for reference loop intent.',
+    );
+  });
+
   it("rejects right-panel transport controls when timeline playback owns transport", () => {
     const schemaWithPanelTransportControls = {
       ...starterSchema,
@@ -4457,7 +6591,7 @@ describe("Toolcraft template app acceptance coverage", () => {
           ],
           title: "Controls",
         },
-        timeline: { enabled: true, mode: "playback" as const },
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
       },
     } as const;
 
@@ -4589,10 +6723,13 @@ describe("Toolcraft template app acceptance coverage", () => {
   });
 
   it("accepts explicit autonomous animation intent for decorative self-running output", () => {
-    const schemaWithAutonomousAnimation = {
-      ...starterSchema,
+    const schemaWithAutonomousAnimation = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+        upload: true,
+      },
       panels: {
-        ...starterSchema.panels,
         controls: {
           sections: [
             {
@@ -4615,7 +6752,12 @@ describe("Toolcraft template app acceptance coverage", () => {
         },
         timeline: undefined,
       },
-    } as const;
+      toolbar: {
+        history: true,
+        radar: true,
+        zoom: true,
+      },
+    });
 
     expect(
       validateToolcraftAcceptanceCoverage(
@@ -4633,12 +6775,109 @@ describe("Toolcraft template app acceptance coverage", () => {
             ],
             mode: "autonomous",
             reason:
-              "The shimmer is decorative self-running output and does not expose product time transport.",
+              "The shimmer is decorative self-running output and does not expose product time transport.",
+          },
+          mode: "new-toolcraft-app",
+        },
+      ),
+    ).toEqual([]);
+  });
+
+  it("requires a top timeline when video export exists", () => {
+    const schemaWithVideoExportWithoutTimeline = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            makeVideoExportSection(),
+            {
+              actionGroup: "secondary",
+              controls: {
+                outputActions: {
+                  actions: [
+                    {
+                      icon: "upload-simple",
+                      label: "Export Video",
+                      value: "export.video",
+                    },
+                  ],
+                  target: "actions.output",
+                  type: "panelActions",
+                },
+              },
+              title: "Export",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(validateToolcraftAcceptanceCoverage(schemaWithVideoExportWithoutTimeline)).toContain(
+      'Apps with Export Video must enable the top Toolcraft timeline. Use panels.timeline mode "playback" for product animation transport, or mode "keyframes" when exported animation is driven by keyframes; autonomous no-timeline animation is only allowed when there is no video export.',
+    );
+  });
+
+  it("rejects autonomous animation intent when video export exists", () => {
+    const schemaWithAutonomousVideoExport = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            makeVideoExportSection(),
+            {
+              actionGroup: "secondary",
+              controls: {
+                outputActions: {
+                  actions: [
+                    {
+                      icon: "upload-simple",
+                      label: "Export Video",
+                      value: "export.video",
+                    },
+                  ],
+                  target: "actions.output",
+                  type: "panelActions",
+                },
+              },
+              title: "Export",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithAutonomousVideoExport,
+        [],
+        {
+          animationIntent: {
+            behaviorCoverage: [
+              "no-user-facing-transport",
+              "no-play-pause",
+              "no-scrub",
+              "no-duration-control",
+              "no-loop-control",
+              "no-export-at-time",
+            ],
+            mode: "autonomous",
+            reason:
+              "The shader is decorative self-running output with no transport controls.",
           },
           mode: "new-toolcraft-app",
         },
       ),
-    ).toEqual([]);
+    ).toContain(
+      'starterTransferMode.animationIntent mode "autonomous" conflicts with Export Video. Video export creates product-time behavior, so the renderer and export must use the top Toolcraft timeline duration, loop, and deterministic timestamps.',
+    );
   });
 
   it("rejects timeline animation intent when the timeline mode does not match", () => {
@@ -4646,7 +6885,7 @@ describe("Toolcraft template app acceptance coverage", () => {
       ...starterSchema,
       panels: {
         ...starterSchema.panels,
-        timeline: { enabled: true, mode: "playback" as const },
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
       },
     };
 
@@ -4655,7 +6894,10 @@ describe("Toolcraft template app acceptance coverage", () => {
         schemaWithPlaybackTimeline,
         [playbackTimelineAcceptance],
         {
-          animationIntent: { mode: "timeline-keyframes" },
+          animationIntent: {
+            loopDuration: productDerivedEightSecondLoop,
+            mode: "timeline-keyframes",
+          },
           mode: "new-toolcraft-app",
         },
       ),
@@ -4771,7 +7013,36 @@ describe("Toolcraft template app acceptance coverage", () => {
         {
           behaviorCoverage: ["canvas-sizing", "control-mapping", "renderer-state"],
           mode: "reference-runtime-clone",
+          referenceFeatureInventory: makeReferenceFeatureInventory([
+            {
+              acceptanceId: "reference.timeline.stateJump",
+              behaviorEvidence:
+                "Clicked the reference timeline state buttons and observed discrete renderer state jumps.",
+              featureName: "Timeline state jump",
+              id: "timeline-state-jump",
+              referenceBehavior:
+                "The reference timeline state buttons jump to discrete renderer states.",
+              sourceEvidence: "Inspected reference timeline state button handlers.",
+              status: "ported",
+              toolcraftMapping:
+                "The custom reference timeline control keeps the same state-jump behavior.",
+            },
+            {
+              acceptanceId: "reference.timeline.trimRange",
+              behaviorEvidence:
+                "Dragged the reference trim handles and observed the active playback/render range change.",
+              featureName: "Timeline trim range",
+              id: "timeline-trim-range",
+              referenceBehavior:
+                "The reference trim handles edit the active playback/render range.",
+              sourceEvidence: "Inspected reference trim handle drag behavior.",
+              status: "ported",
+              toolcraftMapping:
+                "The custom reference timeline control keeps the same trim range behavior.",
+            },
+          ]),
           referenceName: "legacy state timeline",
+          referenceStudy: referenceStudyEvidence,
           referenceTimeline: {
             behaviorCoverage: ["state-jump", "trim-range"],
             mode: "custom-reference-timeline",
@@ -5023,7 +7294,7 @@ describe("Toolcraft template app acceptance coverage", () => {
     }
   });
 
-  it("requires each browser acceptance entry to point at a Playwright test", () => {
+  it("requires each browser acceptance entry to point at a fallback Playwright test", () => {
     const browserTestSources = readBrowserTestSources();
 
     for (const entry of starterAcceptance) {
@@ -5033,7 +7304,7 @@ describe("Toolcraft template app acceptance coverage", () => {
 
       expect(
         browserTestSources,
-        `${entry.id} must be backed by a Playwright test named "${entry.browserTestName}".`,
+        `${entry.id} must be backed by a fallback Playwright test named "${entry.browserTestName}".`,
       ).toContain(entry.browserTestName);
 
       if (entry.timelineCoverage === "playback" && acceptanceCoversTimelineDurationEdit(entry)) {
@@ -5110,10 +7381,13 @@ describe("Toolcraft template app acceptance coverage", () => {
   });
 
   it("accepts stepped continuous sliders without forcing the discrete visual variant", () => {
-    const schemaWithAmbiguousSlider = {
-      ...starterSchema,
+    const schemaWithAmbiguousSlider = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+        upload: true,
+      },
       panels: {
-        ...starterSchema.panels,
         controls: {
           sections: [
             {
@@ -5136,7 +7410,12 @@ describe("Toolcraft template app acceptance coverage", () => {
         },
         timeline: undefined,
       },
-    };
+      toolbar: {
+        history: true,
+        radar: true,
+        zoom: true,
+      },
+    });
 
     expect(
       validateToolcraftAcceptanceCoverage(schemaWithAmbiguousSlider, [
@@ -5252,7 +7531,6 @@ describe("Toolcraft template app acceptance coverage", () => {
                   step: 0.1,
                   target: "animation.speed",
                   type: "slider",
-                  unit: "x",
                   variant: "continuous",
                 },
                 depth: {
@@ -5626,8 +7904,8 @@ describe("Toolcraft template app acceptance coverage", () => {
         controls: schema.panels.controls
           ? {
               ...schema.panels.controls,
-              sections: schema.panels.controls.sections.map((section, index) =>
-                index === 0 ? { ...section, title: undefined } : section,
+              sections: schema.panels.controls.sections.map((section) =>
+                section.title === "Shader" ? { ...section, title: undefined } : section,
               ),
             }
           : schema.panels.controls,
@@ -5640,7 +7918,7 @@ describe("Toolcraft template app acceptance coverage", () => {
       ]),
     ).toEqual(
       expect.arrayContaining([
-        "untitled section 1 is missing a controls section title. Every visible controls-panel section must name the product entity, workflow stage, or behavior it edits.",
+        "untitled section 2 is missing a controls section title. Every visible controls-panel section must name the product entity, workflow stage, or behavior it edits.",
       ]),
     );
   });
@@ -6145,7 +8423,7 @@ describe("Toolcraft template app acceptance coverage", () => {
       ]),
     ).toEqual(
       expect.arrayContaining([
-        'Controls for product entity "squares.right" are split across sections: Square 1 (Right), Appearance. Keep controls for the same product entity in one semantic section unless the spec names a real workflow split.',
+        'Controls for product entity "squares.right" are split across sections: Square 1 (Right), Appearance. Keep controls for the same product entity in one semantic section unless the Control Section Inventory declares workflowStage and splitReason for every split section.',
       ]),
     );
   });
@@ -6201,6 +8479,252 @@ describe("Toolcraft template app acceptance coverage", () => {
     ).toEqual([]);
   });
 
+  it("rejects stale control section inventory entries", () => {
+    const schemaWithInventoryMismatch = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                kind: {
+                  defaultValue: "soft",
+                  label: "Kind",
+                  options: [
+                    { label: "Soft", value: "soft" },
+                    { label: "Sharp", value: "sharp" },
+                  ],
+                  orderRole: "mode",
+                  target: "shape.kind",
+                  type: "select",
+                },
+                count: {
+                  defaultValue: 12,
+                  label: "Count",
+                  max: 40,
+                  min: 1,
+                  orderRole: "detail",
+                  target: "shape.count",
+                  type: "slider",
+                  variant: "continuous",
+                },
+              },
+              title: "Shape",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithInventoryMismatch,
+        [
+          makeControlAcceptance("shape.kind", "select"),
+          makeControlAcceptance("shape.count", "slider"),
+        ],
+        starterTransferMode,
+        [
+          {
+            entity: "Shape",
+            groupingReason: "Shape setup",
+            targets: ["shape.kind"],
+            title: "Shape",
+          },
+        ],
+      ),
+    ).toEqual(
+      expect.arrayContaining([
+        'Control Section Inventory entry "Shape" must include a concrete groupingReason explaining why these controls belong together.',
+        'Control Section Inventory entry "Shape" is missing rendered target "shape.count". The inventory must cover every product control in the section.',
+      ]),
+    );
+  });
+
+  it("allows explicit workflow split evidence for one target entity", () => {
+    const schemaWithWorkflowSplit = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                size: {
+                  defaultValue: 64,
+                  label: "Size",
+                  max: 128,
+                  min: 16,
+                  orderRole: "primary",
+                  target: "object.shape.size",
+                  type: "slider",
+                  unit: "px",
+                  variant: "continuous",
+                },
+              },
+              title: "Shape Structure",
+            },
+            {
+              controls: {
+                count: {
+                  defaultValue: 12,
+                  label: "Count",
+                  max: 40,
+                  min: 1,
+                  orderRole: "detail",
+                  target: "object.shape.count",
+                  type: "slider",
+                  variant: "continuous",
+                },
+              },
+              title: "Shape Density",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithWorkflowSplit,
+        [
+          makeControlAcceptance("object.shape.size", "slider"),
+          makeControlAcceptance("object.shape.count", "slider"),
+        ],
+        starterTransferMode,
+        [
+          {
+            entity: "Object shape",
+            groupingReason: "Structure controls tune the physical footprint of the object.",
+            splitReason:
+              "Structure and density are separate workflow stages in this editor.",
+            targets: ["object.shape.size"],
+            title: "Shape Structure",
+            workflowStage: "structure",
+          },
+          {
+            entity: "Object shape",
+            groupingReason: "Density controls tune how many objects appear after structure is set.",
+            splitReason:
+              "Density is separated from structure because users set count after the shape footprint.",
+            targets: ["object.shape.count"],
+            title: "Shape Density",
+            workflowStage: "density",
+          },
+        ],
+      ),
+    ).toEqual([]);
+  });
+
+  it("rejects mode-gated controls split away from their selector section", () => {
+    const schemaWithSplitModeBranch = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                sourceMode: {
+                  defaultValue: "preset",
+                  label: "Source",
+                  options: [
+                    { label: "Preset", value: "preset" },
+                    { label: "Image", value: "image" },
+                  ],
+                  orderRole: "mode",
+                  target: "source.mode",
+                  type: "segmented",
+                },
+              },
+              title: "Source",
+            },
+            {
+              controls: {
+                sourceUpload: {
+                  accept: "image/*",
+                  assetKind: "image",
+                  defaultValue: null,
+                  label: "Image",
+                  orderRole: "input",
+                  target: "source.upload",
+                  type: "fileDrop",
+                  visibleWhen: { equals: "image", target: "source.mode" },
+                },
+              },
+              title: "Image",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithSplitModeBranch, [
+        makeControlAcceptance("source.mode", "segmented"),
+        makeControlAcceptance("source.upload", "fileDrop"),
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        'Image / sourceUpload is gated by visibleWhen target "source.mode" in Source, but it belongs to the same dependency group. Keep selectors and their dependent controls in one semantic section when they describe one product entity or branch; use visibleWhen for branch-specific controls inside that section instead of splitting branch controls into their own section. Do not use disabledWhen for product controls.',
+      ]),
+    );
+  });
+
+  it("rejects selector branch sections even when targets do not share a prefix", () => {
+    const schemaWithSplitOptionBranch = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                shapeKind: {
+                  defaultValue: "generated",
+                  label: "Shape",
+                  options: [
+                    { label: "Generated", value: "generated" },
+                    { label: "Library", value: "library" },
+                  ],
+                  orderRole: "mode",
+                  target: "shape.kind",
+                  type: "segmented",
+                },
+              },
+              title: "Shape",
+            },
+            {
+              controls: {
+                libraryAsset: {
+                  defaultValue: null,
+                  label: "Library",
+                  orderRole: "input",
+                  target: "asset.upload",
+                  type: "fileDrop",
+                  visibleWhen: { equals: "library", target: "shape.kind" },
+                },
+              },
+              title: "Library",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithSplitOptionBranch, [
+        makeControlAcceptance("shape.kind", "segmented"),
+        makeControlAcceptance("asset.upload", "fileDrop"),
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        'Library / libraryAsset is gated by visibleWhen target "shape.kind" in Shape, but it belongs to the same dependency group. Keep selectors and their dependent controls in one semantic section when they describe one product entity or branch; use visibleWhen for branch-specific controls inside that section instead of splitting branch controls into their own section. Do not use disabledWhen for product controls.',
+      ]),
+    );
+  });
+
   it("rejects splitting FontPicker-owned typography into sibling controls", () => {
     const schemaWithSplitTypographyBlock = defineToolcraft({
       canvas: { enabled: true },
@@ -6548,38 +9072,109 @@ describe("Toolcraft template app acceptance coverage", () => {
           ],
           title: "Controls",
         },
-      },
-    });
-
-    expect(
-      validateToolcraftAcceptanceCoverage(schemaWithUsefulColorLabels, [
-        makeControlAcceptance("palette.accent1", "color"),
-        makeControlAcceptance("palette.accent2", "color"),
-        makeControlAcceptance("palette.spread", "slider"),
-        makeControlAcceptance("object.fill", "color"),
-        makeControlAcceptance("object.stroke", "color"),
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithUsefulColorLabels, [
+        makeControlAcceptance("palette.accent1", "color"),
+        makeControlAcceptance("palette.accent2", "color"),
+        makeControlAcceptance("palette.spread", "slider"),
+        makeControlAcceptance("object.fill", "color"),
+        makeControlAcceptance("object.stroke", "color"),
+      ]),
+    ).toEqual([]);
+  });
+
+  it("requires mode selectors to appear before dependent controls", () => {
+    const schemaWithLateModeSelector = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        controls: {
+          sections: [
+            {
+              controls: {
+                depth: {
+                  defaultValue: 0.64,
+                  label: "Depth",
+                  max: 1,
+                  min: 0,
+                  target: "shader.depth",
+                  type: "slider",
+                  variant: "continuous",
+                },
+                mode: {
+                  defaultValue: "liquid",
+                  label: "Mode",
+                  options: [
+                    { label: "Silk", value: "silk" },
+                    { label: "Liquid", value: "liquid" },
+                    { label: "Crystal", value: "crystal" },
+                  ],
+                  target: "shader.mode",
+                  type: "segmented",
+                },
+              },
+              title: "Volume",
+            },
+          ],
+          title: "Shader",
+        },
+      },
+    };
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithLateModeSelector, [
+        {
+          automated: true,
+          automatedTestName: "depth changes rendered output",
+          browser: true,
+          browserTestName: "browser: depth slider changes rendered output",
+          componentType: "slider",
+          evidence: "rendered-pixels",
+          expectedObservable: "Changing Depth changes shader contrast.",
+          fixture: "depth fixture",
+          id: "shader.depth",
+          kind: "control",
+          target: "shader.depth",
+          userAction: "Drag the Depth slider.",
+        },
+        {
+          automated: true,
+          automatedTestName: "mode changes rendered output",
+          browser: true,
+          browserTestName: "browser: mode selector changes rendered output",
+          componentType: "segmented",
+          evidence: "rendered-pixels",
+          expectedObservable: "Changing Mode switches shader pattern.",
+          fixture: "mode fixture",
+          id: "shader.mode",
+          kind: "control",
+          optionCoverage: "each-visible-item",
+          target: "shader.mode",
+          userAction: "Select each Mode option.",
+        },
       ]),
-    ).toEqual([]);
+    ).toEqual(
+      expect.arrayContaining([
+        'Volume / mode (shader.mode) has orderRole "mode" after depth (shader.depth) with orderRole "strength". Move mode/input/primary controls before dependent strength/detail/advanced controls or split them into an earlier section.',
+      ]),
+    );
   });
 
-  it("requires mode selectors to appear before dependent controls", () => {
-    const schemaWithLateModeSelector = {
-      ...starterSchema,
+  it("accepts explicit order roles when selectors lead dependent controls", () => {
+    const schemaWithOrderedControls = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+        upload: true,
+      },
       panels: {
-        ...starterSchema.panels,
         controls: {
           sections: [
             {
               controls: {
-                depth: {
-                  defaultValue: 0.64,
-                  label: "Depth",
-                  max: 1,
-                  min: 0,
-                  target: "shader.depth",
-                  type: "slider",
-                  variant: "continuous",
-                },
                 blend: {
                   defaultValue: "liquid",
                   label: "Blend",
@@ -6588,9 +9183,20 @@ describe("Toolcraft template app acceptance coverage", () => {
                     { label: "Liquid", value: "liquid" },
                     { label: "Crystal", value: "crystal" },
                   ],
+                  orderRole: "mode" as const,
                   target: "shader.blend",
                   type: "segmented",
                 },
+                depth: {
+                  defaultValue: 0.64,
+                  label: "Depth",
+                  max: 1,
+                  min: 0,
+                  orderRole: "strength" as const,
+                  target: "shader.depth",
+                  type: "slider",
+                  variant: "continuous",
+                },
               },
               title: "Volume",
             },
@@ -6598,10 +9204,34 @@ describe("Toolcraft template app acceptance coverage", () => {
           title: "Shader",
         },
       },
-    };
+      toolbar: {
+        history: true,
+        radar: true,
+        zoom: true,
+      },
+    });
 
+    expect(getToolcraftControlOrderTargets(schemaWithOrderedControls)).toEqual([
+      "shader.blend",
+      "shader.depth",
+    ]);
     expect(
-      validateToolcraftAcceptanceCoverage(schemaWithLateModeSelector, [
+      validateToolcraftAcceptanceCoverage(schemaWithOrderedControls, [
+        {
+          automated: true,
+          automatedTestName: "blend changes rendered output",
+          browser: true,
+          browserTestName: "browser: blend selector changes rendered output",
+          componentType: "segmented",
+          evidence: "rendered-pixels",
+          expectedObservable: "Changing Blend switches shader pattern.",
+          fixture: "blend fixture",
+          id: "shader.blend",
+          kind: "control",
+          optionCoverage: "each-visible-item",
+          target: "shader.blend",
+          userAction: "Select each Blend option.",
+        },
         {
           automated: true,
           automatedTestName: "depth changes rendered output",
@@ -6616,188 +9246,484 @@ describe("Toolcraft template app acceptance coverage", () => {
           target: "shader.depth",
           userAction: "Drag the Depth slider.",
         },
+      ]),
+    ).toEqual([]);
+  });
+
+  it("requires overwide segmented controls to shorten labels or use select", () => {
+    const schemaWithOverwideSegmentedControl = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        controls: {
+          sections: [
+            {
+              controls: {
+                preset: {
+                  defaultValue: "full-stack",
+                  label: "FX Preset",
+                  options: [
+                    { label: "Full Stack", value: "full-stack" },
+                    { label: "RGB Split", value: "rgb-split" },
+                    { label: "Shade", value: "shade" },
+                    { label: "Lines", value: "lines" },
+                    { label: "Off", value: "off" },
+                  ],
+                  orderRole: "mode" as const,
+                  target: "shader.fxPreset",
+                  type: "segmented",
+                },
+              },
+              title: "Style",
+            },
+          ],
+          title: "Shader",
+        },
+      },
+    };
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithOverwideSegmentedControl, [
         {
           automated: true,
-          automatedTestName: "blend changes rendered output",
+          automatedTestName: "fx preset changes rendered output",
           browser: true,
-          browserTestName: "browser: blend selector changes rendered output",
+          browserTestName: "browser: fx preset selector changes rendered output",
           componentType: "segmented",
           evidence: "rendered-pixels",
-          expectedObservable: "Changing Blend switches shader pattern.",
-          fixture: "blend fixture",
-          id: "shader.blend",
+          expectedObservable: "Changing FX Preset switches the shader preset.",
+          fixture: "fx preset fixture",
+          id: "shader.fxPreset",
           kind: "control",
           optionCoverage: "each-visible-item",
-          target: "shader.blend",
-          userAction: "Select each Blend option.",
+          target: "shader.fxPreset",
+          userAction: "Select each FX Preset option.",
         },
       ]),
     ).toEqual(
       expect.arrayContaining([
-        'Volume / blend (shader.blend) has orderRole "mode" after depth (shader.depth) with orderRole "strength". Move mode/input/primary controls before dependent strength/detail/advanced controls or split them into an earlier section.',
+        "Style / preset (shader.fxPreset) segmented controls must preserve cell padding: use at most 4 short options (max 9 characters per label and 24 total) or shorten labels first; if the compact names still exceed the budget, use a select dropdown instead.",
+      ]),
+    );
+  });
+
+  it("requires timeline playback coverage when a playback timeline is enabled", () => {
+    const schemaWithPlaybackTimeline = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
+      },
+    };
+
+    expect(validateToolcraftAcceptanceCoverage(schemaWithPlaybackTimeline, [])).toEqual(
+      expect.arrayContaining([
+        'panels.timeline mode "playback" requires a runtime acceptance entry with timelineCoverage "playback" proving pause, scrub, duration/loop, and rendered-frame behavior.',
+      ]),
+    );
+  });
+
+  it("requires playback timeline coverage to prove duration drives renderer progress", () => {
+    const schemaWithPlaybackTimeline = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
+      },
+    };
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithPlaybackTimeline, [
+        {
+          automated: true,
+          automatedTestName: "timeline playback controls drive rendered output",
+          browser: true,
+          browserTestName: "browser: timeline playback controls drive rendered output",
+          componentType: "timeline",
+          evidence: "timeline-output",
+          expectedObservable:
+            "Pause, scrub, and playback update visible renderer output.",
+          fixture: "timeline playback fixture",
+          id: "timeline.playback",
+          kind: "runtime",
+          target: "timeline.playback",
+          timelineCoverage: "playback",
+          timelinePlaybackCoverage: ["pause-resume", "scrub", "rendered-frame"],
+          userAction: "Pause, scrub, and resume timeline playback.",
+        },
       ]),
+    ).toContain(
+      'timeline.playback timelineCoverage "playback" must declare timelinePlaybackCoverage for pause-resume, scrub, duration, loop, and rendered-frame. Duration coverage must prove renderer progress maps 0..state.timeline.durationSeconds, not a local fixed animation duration.',
+    );
+  });
+
+  it("requires timeline animation intent to declare loop duration provenance", () => {
+    const schemaWithPlaybackTimeline = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
+      },
+    };
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithPlaybackTimeline,
+        [playbackTimelineAcceptance],
+        {
+          animationIntent: { mode: "timeline-playback" },
+          mode: "new-toolcraft-app",
+        } as unknown as ToolcraftTransferMode,
+      ),
+    ).toContain(
+      'starterTransferMode.animationIntent mode "timeline-playback" must declare loopDuration with source, seconds, and evidence. Do not let runtime/template fallback duration such as 8s stand in for product loop intent.',
+    );
+  });
+
+  it("requires playback timeline apps to declare matching playback animation intent", () => {
+    const schemaWithPlaybackTimeline = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
+      },
+    };
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithPlaybackTimeline,
+        [playbackTimelineAcceptance],
+        {
+          animationIntent: { mode: "none" },
+          mode: "new-toolcraft-app",
+        },
+      ),
+    ).toContain(
+      'panels.timeline mode "playback" requires starterTransferMode.animationIntent mode "timeline-playback" with loopDuration provenance.',
+    );
+  });
+
+  it("requires keyframe timeline apps to declare matching keyframe animation intent", () => {
+    const schemaWithKeyframesTimeline = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "keyframes" as const },
+      },
+    };
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithKeyframesTimeline,
+        [playbackTimelineAcceptance],
+        {
+          animationIntent: { mode: "none" },
+          mode: "new-toolcraft-app",
+        },
+      ),
+    ).toContain(
+      'panels.timeline mode "keyframes" requires starterTransferMode.animationIntent mode "timeline-keyframes" with loopDuration provenance.',
+    );
+  });
+
+  it("requires declared loop duration to match timeline default duration", () => {
+    const schemaWithPlaybackTimeline = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
+      },
+    };
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithPlaybackTimeline,
+        [playbackTimelineAcceptance],
+        {
+          animationIntent: {
+            loopDuration: {
+              evidence:
+                "The product timing model derives a six second forward animation cycle from the authored baseline.",
+              seconds: 6,
+              source: "product-derived",
+            },
+            mode: "timeline-playback",
+          },
+          mode: "new-toolcraft-app",
+        },
+      ),
+    ).toContain(
+      "panels.timeline.defaultDurationSeconds (8) must match starterTransferMode.animationIntent.loopDuration.seconds (6).",
     );
   });
 
-  it("accepts explicit order roles when selectors lead dependent controls", () => {
-    const schemaWithOrderedControls = {
+  it("rejects runtime fallback evidence as a loop duration source", () => {
+    const schemaWithPlaybackTimeline = {
       ...starterSchema,
       panels: {
         ...starterSchema.panels,
-        controls: {
-          sections: [
-            {
-              controls: {
-                blend: {
-                  defaultValue: "liquid",
-                  label: "Blend",
-                  options: [
-                    { label: "Silk", value: "silk" },
-                    { label: "Liquid", value: "liquid" },
-                    { label: "Crystal", value: "crystal" },
-                  ],
-                  orderRole: "mode" as const,
-                  target: "shader.blend",
-                  type: "segmented",
-                },
-                depth: {
-                  defaultValue: 0.64,
-                  label: "Depth",
-                  max: 1,
-                  min: 0,
-                  orderRole: "strength" as const,
-                  target: "shader.depth",
-                  type: "slider",
-                  variant: "continuous",
-                },
-              },
-              title: "Volume",
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
+      },
+    };
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithPlaybackTimeline,
+        [playbackTimelineAcceptance],
+        {
+          animationIntent: {
+            loopDuration: {
+              evidence: "Use the runtime default 8s fallback because Toolcraft starts there.",
+              seconds: 8,
+              source: "product-derived",
             },
-          ],
-          title: "Shader",
+            mode: "timeline-playback",
+          },
+          mode: "new-toolcraft-app",
         },
+      ),
+    ).toContain(
+      "starterTransferMode.animationIntent.loopDuration.evidence must not cite the runtime/template fallback 8s default as the product loop source. Use reference timing, an explicit user request, or a product-derived timing rule.",
+    );
+  });
+
+  it("requires video reference study when a new app cites video reference evidence", () => {
+    const schemaWithPlaybackTimeline = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        timeline: { defaultDurationSeconds: 5.8, enabled: true, mode: "playback" as const },
       },
     };
 
-    expect(getToolcraftControlOrderTargets(schemaWithOrderedControls)).toEqual([
-      "shader.blend",
-      "shader.depth",
-    ]);
     expect(
-      validateToolcraftAcceptanceCoverage(schemaWithOrderedControls, [
-        playbackTimelineAcceptance,
+      validateToolcraftAcceptanceCoverage(
+        schemaWithPlaybackTimeline,
+        [playbackTimelineAcceptance],
         {
-          automated: true,
-          automatedTestName: "blend changes rendered output",
-          browser: true,
-          browserTestName: "browser: blend selector changes rendered output",
-          componentType: "segmented",
-          evidence: "rendered-pixels",
-          expectedObservable: "Changing Blend switches shader pattern.",
-          fixture: "blend fixture",
-          id: "shader.blend",
-          kind: "control",
-          optionCoverage: "each-visible-item",
-          target: "shader.blend",
-          userAction: "Select each Blend option.",
+          animationIntent: {
+            loopDuration: {
+              evidence:
+                "The source reference video /fixtures/reference-motion/ref.mp4 was inspected for motion behavior.",
+              seconds: 5.8,
+              source: "reference",
+            },
+            mode: "timeline-playback",
+          },
+          mode: "new-toolcraft-app",
         },
+      ),
+    ).toContain(
+      "starterTransferMode cites a video reference, screen recording, GIF, extracted frames, or contact sheet; declare videoReferenceStudy with storyboard frames, frame-to-frame transition analysis, behavior decomposition, and acceptance mapping before implementation.",
+    );
+  });
+
+  it("does not require video reference study for ordinary video export intent", () => {
+    const schemaWithPlaybackTimeline = defineToolcraft({
+      canvas: {
+        enabled: true,
+        upload: true,
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+        timeline: { defaultDurationSeconds: 6, enabled: true, mode: "playback" as const },
+      },
+      toolbar: {
+        history: true,
+        radar: true,
+        zoom: true,
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithPlaybackTimeline,
+        [playbackTimelineAcceptance],
         {
-          automated: true,
-          automatedTestName: "depth changes rendered output",
-          browser: true,
-          browserTestName: "browser: depth slider changes rendered output",
-          componentType: "slider",
-          evidence: "rendered-pixels",
-          expectedObservable: "Changing Depth changes shader contrast.",
-          fixture: "depth fixture",
-          id: "shader.depth",
-          kind: "control",
-          target: "shader.depth",
-          userAction: "Drag the Depth slider.",
+          animationIntent: {
+            loopDuration: {
+              evidence:
+                "The product timing model derives a six second cycle for exported video output.",
+              seconds: 6,
+              source: "product-derived",
+            },
+            mode: "timeline-playback",
+          },
+          mode: "new-toolcraft-app",
         },
-      ]),
+      ),
     ).toEqual([]);
   });
 
-  it("requires overwide segmented controls to shorten labels or use select", () => {
-    const schemaWithOverwideSegmentedControl = {
-      ...starterSchema,
+  it("accepts a new app video reference only with storyboard and transition acceptance mapping", () => {
+    const schemaWithPlaybackTimeline = defineToolcraft({
+      canvas: {
+        enabled: true,
+        upload: true,
+      },
       panels: {
-        ...starterSchema.panels,
         controls: {
-          sections: [
+          sections: [],
+          title: "Controls",
+        },
+        timeline: { defaultDurationSeconds: 5.8, enabled: true, mode: "playback" as const },
+      },
+      toolbar: {
+        history: true,
+        radar: true,
+        zoom: true,
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(
+        schemaWithPlaybackTimeline,
+        [playbackTimelineAcceptance, videoReferenceMotionAcceptance],
+        {
+          animationIntent: {
+            loopDuration: {
+              evidence:
+                "The source reference timing comes from the inspected motion reference asset.",
+              seconds: 5.8,
+              source: "reference",
+            },
+            mode: "timeline-playback",
+          },
+          mode: "new-toolcraft-app",
+          videoReferenceStudy: videoReferenceStudyEvidence,
+        },
+      ),
+    ).toEqual([]);
+  });
+
+  it("rejects incomplete video reference studies", () => {
+    expect(
+      validateToolcraftAcceptanceCoverage(starterSchema, [], {
+        mode: "new-toolcraft-app",
+        videoReferenceStudy: {
+          acceptanceMapping: [
             {
-              controls: {
-                preset: {
-                  defaultValue: "full-stack",
-                  label: "FX Preset",
-                  options: [
-                    { label: "Full Stack", value: "full-stack" },
-                    { label: "RGB Split", value: "rgb-split" },
-                    { label: "Shade", value: "shade" },
-                    { label: "Lines", value: "lines" },
-                    { label: "Off", value: "off" },
-                  ],
-                  orderRole: "mode" as const,
-                  target: "shader.fxPreset",
-                  type: "segmented",
-                },
-              },
-              title: "Style",
+              acceptanceId: "missing.acceptance",
+              behavior: "Motion behavior",
+              frameIds: ["f001"],
             },
           ],
-          title: "Shader",
+          behaviorDecomposition: "",
+          extractionEvidence: "",
+          referenceLocation: "/fixtures/reference-motion/ref.mp4",
+          storyboard: [
+            {
+              behaviorObservation: "Only one frame was inspected.",
+              frameId: "f001",
+              frameSource: "frames/frame_001.png",
+              timeSeconds: 0,
+              visualObservation: "A single static state.",
+            },
+          ],
+          transitionAnalysis: [],
         },
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        "videoReferenceStudy.extractionEvidence must explain how frames were inspected or extracted before implementation.",
+        "videoReferenceStudy.behaviorDecomposition must decompose the observed frame-to-frame changes into product behavior to preserve.",
+        "videoReferenceStudy.storyboard must include at least four timecoded frames so the reference is studied as motion, not a single screenshot.",
+        "videoReferenceStudy.transitionAnalysis must include at least three frame-to-frame deltas proving how behavior changes between sampled frames.",
+        'videoReferenceStudy.acceptanceMapping "Motion behavior" points to missing acceptanceId "missing.acceptance".',
+      ]),
+    );
+  });
+
+  it("requires playback timeline coverage to prove seamless forward-only loop behavior follows edited duration", () => {
+    const schemaWithPlaybackTimeline = {
+      ...starterSchema,
+      panels: {
+        ...starterSchema.panels,
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
       },
     };
 
     expect(
-      validateToolcraftAcceptanceCoverage(schemaWithOverwideSegmentedControl, [
+      validateToolcraftAcceptanceCoverage(schemaWithPlaybackTimeline, [
         {
           automated: true,
-          automatedTestName: "fx preset changes rendered output",
+          automatedTestName: "timeline duration edit drives renderer output",
           browser: true,
-          browserTestName: "browser: fx preset selector changes rendered output",
-          componentType: "segmented",
-          evidence: "rendered-pixels",
-          expectedObservable: "Changing FX Preset switches the shader preset.",
-          fixture: "fx preset fixture",
-          id: "shader.fxPreset",
-          kind: "control",
-          optionCoverage: "each-visible-item",
-          target: "shader.fxPreset",
-          userAction: "Select each FX Preset option.",
+          browserTestName: "browser: timeline duration edit drives renderer output",
+          componentType: "timeline",
+          evidence: "timeline-output",
+          expectedObservable:
+            "Editing timeline duration changes the playback range and renderer follows state.timeline.durationSeconds.",
+          fixture: "timeline playback fixture",
+          id: "timeline.playback",
+          kind: "runtime",
+          target: "timeline.playback",
+          timelineCoverage: "playback",
+          timelinePlaybackCoverage: [
+            "pause-resume",
+            "scrub",
+            "duration",
+            "loop",
+            "rendered-frame",
+          ],
+          userAction: "Edit timeline duration, scrub the range, pause, and resume playback.",
         },
       ]),
-    ).toEqual(
-      expect.arrayContaining([
-        "Style / preset (shader.fxPreset) segmented controls must preserve cell padding: use at most 4 short options (max 9 characters per label and 24 total) or shorten labels first; if the compact names still exceed the budget, use a select dropdown instead.",
-      ]),
+    ).toContain(
+      'timeline.playback timelinePlaybackCoverage "loop" must prove a seamless forward-only product loop: motion advances in one direction, avoids mirror/yoyo/ping-pong/reverse fallbacks, first and last frames stitch without a visible jump, and the same seam holds after changing timeline duration.',
     );
   });
 
-  it("requires timeline playback coverage when a playback timeline is enabled", () => {
+  it("rejects incomplete seamless loop evidence that omits fallback direction checks", () => {
     const schemaWithPlaybackTimeline = {
       ...starterSchema,
       panels: {
         ...starterSchema.panels,
-        timeline: { enabled: true, mode: "playback" as const },
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
       },
     };
 
-    expect(validateToolcraftAcceptanceCoverage(schemaWithPlaybackTimeline, [])).toEqual(
-      expect.arrayContaining([
-        'panels.timeline mode "playback" requires a runtime acceptance entry with timelineCoverage "playback" proving pause, scrub, duration/loop, and rendered-frame behavior.',
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithPlaybackTimeline, [
+        {
+          automated: true,
+          automatedTestName: "timeline duration edit verifies a seamless forward-only loop",
+          browser: true,
+          browserTestName: "browser: timeline duration edit verifies loop seam",
+          componentType: "timeline",
+          evidence: "timeline-output",
+          expectedObservable:
+            "Editing timeline duration keeps a seamless forward-only loop and stitches first and last frames.",
+          fixture: "timeline playback fixture",
+          id: "timeline.playback",
+          kind: "runtime",
+          target: "timeline.playback",
+          timelineCoverage: "playback",
+          timelinePlaybackCoverage: [
+            "pause-resume",
+            "scrub",
+            "duration",
+            "loop",
+            "rendered-frame",
+          ],
+          userAction:
+            "Edit timeline duration and verify first and last frames stitch with no mirror fallback.",
+        },
       ]),
+    ).toContain(
+      'timeline.playback timelinePlaybackCoverage "loop" must prove a seamless forward-only product loop: motion advances in one direction, avoids mirror/yoyo/ping-pong/reverse fallbacks, first and last frames stitch without a visible jump, and the same seam holds after changing timeline duration.',
     );
   });
 
-  it("requires playback timeline coverage to prove duration drives renderer progress", () => {
+  it("rejects generic seamless loop evidence that omits first-last frame stitching", () => {
     const schemaWithPlaybackTimeline = {
       ...starterSchema,
       panels: {
         ...starterSchema.panels,
-        timeline: { enabled: true, mode: "playback" as const },
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
       },
     };
 
@@ -6805,24 +9731,31 @@ describe("Toolcraft template app acceptance coverage", () => {
       validateToolcraftAcceptanceCoverage(schemaWithPlaybackTimeline, [
         {
           automated: true,
-          automatedTestName: "timeline playback controls drive rendered output",
+          automatedTestName: "timeline duration edit verifies a generic loop",
           browser: true,
-          browserTestName: "browser: timeline playback controls drive rendered output",
+          browserTestName: "browser: timeline duration edit verifies a generic loop",
           componentType: "timeline",
           evidence: "timeline-output",
           expectedObservable:
-            "Pause, scrub, and playback update visible renderer output.",
+            "Editing timeline duration keeps a seamless forward-only loop with no mirror, yoyo, ping-pong, or reverse fallback.",
           fixture: "timeline playback fixture",
           id: "timeline.playback",
           kind: "runtime",
           target: "timeline.playback",
           timelineCoverage: "playback",
-          timelinePlaybackCoverage: ["pause-resume", "scrub", "rendered-frame"],
-          userAction: "Pause, scrub, and resume timeline playback.",
+          timelinePlaybackCoverage: [
+            "pause-resume",
+            "scrub",
+            "duration",
+            "loop",
+            "rendered-frame",
+          ],
+          userAction:
+            "Edit timeline duration and verify the loop remains forward-only with no mirror, yoyo, ping-pong, or reverse fallback.",
         },
       ]),
     ).toContain(
-      'timeline.playback timelineCoverage "playback" must declare timelinePlaybackCoverage for pause-resume, scrub, duration, loop, and rendered-frame. Duration coverage must prove renderer progress maps 0..state.timeline.durationSeconds, not a local fixed animation duration.',
+      'timeline.playback timelinePlaybackCoverage "loop" must prove a seamless forward-only product loop: motion advances in one direction, avoids mirror/yoyo/ping-pong/reverse fallbacks, first and last frames stitch without a visible jump, and the same seam holds after changing timeline duration.',
     );
   });
 
@@ -6860,7 +9793,7 @@ describe("Toolcraft template app acceptance coverage", () => {
           ],
           title: "Controls",
         },
-        timeline: { enabled: true, mode: "keyframes" as const },
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "keyframes" as const },
       },
     };
 
@@ -6965,7 +9898,7 @@ describe("Toolcraft template app acceptance coverage", () => {
           ],
           title: "Controls",
         },
-        timeline: { enabled: true, mode: "keyframes" as const },
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "keyframes" as const },
       },
     };
 
@@ -7057,7 +9990,7 @@ describe("Toolcraft template app acceptance coverage", () => {
           ],
           title: "Controls",
         },
-        timeline: { enabled: true, mode: "keyframes" as const },
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "keyframes" as const },
       },
     };