@pixel-point/toolcraft 0.0.9 → 0.0.11

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

@@ -12,6 +12,12 @@ import {
 import {
   getToolcraftControlOrderTargets,
   type ToolcraftComponentAcceptance,
+  type ToolcraftReferenceCoverage,
+  type ToolcraftReferenceFeatureInventoryItem,
+  type ToolcraftReferenceStudyEvidence,
+  type ToolcraftReferenceTimelineCoverage,
+  type ToolcraftTransferMode,
+  type ToolcraftVideoReferenceStudyEvidence,
   starterAcceptance,
   starterControlSectionInventory,
   starterProductReadiness,
@@ -101,6 +107,7 @@ const requiredAgentWorklogDecisionTrailFields = [
   "Task type",
   "User-visible result",
   "Source/reference checked",
+  "Reference inputs",
   "Docs/contracts read",
   "Contract rules applied",
   "Decision",
@@ -111,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,
@@ -134,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,
@@ -157,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: {
@@ -186,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: {
@@ -214,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"),
@@ -267,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;
 }
@@ -333,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[] = [];
 
@@ -395,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.');
   }
@@ -455,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 ||
@@ -677,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) ||
@@ -807,6 +1216,19 @@ describe("Toolcraft template app acceptance coverage", () => {
     expect(validateToolcraftAcceptanceCoverage(starterSchema, starterAcceptance)).toEqual([]);
   });
 
+  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([]);
@@ -827,7 +1249,7 @@ describe("Toolcraft template app acceptance coverage", () => {
     ).toEqual([]);
   });
 
-  it("requires fileDrop acceptance to prove upload, clear, and reset lifecycle", () => {
+  it("requires fileDrop acceptance to prove upload, clear, reset, and image transforms", () => {
     const fileDropSchema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -870,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: {
@@ -907,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.",
       },
     ]);
 
@@ -922,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) {
@@ -1142,7 +1692,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -1184,20 +1734,79 @@ describe("Toolcraft template app acceptance coverage", () => {
     );
   });
 
-  it("requires browser reload acceptance when localStorage persistence is enabled", () => {
-    const persistentSchema = defineToolcraft({
-      canvas: { enabled: true },
+  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: [
-            {
-              controls: {
-                opacity: {
-                  defaultValue: 0.75,
-                  label: "Opacity",
-                  target: "appearance.opacity",
-                  type: "slider",
-                },
+          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: [
+            {
+              controls: {
+                opacity: {
+                  defaultValue: 0.75,
+                  label: "Opacity",
+                  target: "appearance.opacity",
+                  type: "slider",
+                },
               },
               title: "Appearance",
             },
@@ -1305,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,
@@ -1383,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 },
@@ -1502,7 +2124,6 @@ describe("Toolcraft template app acceptance coverage", () => {
     });
 
     const acceptance = [
-      "runtime.settingsTransfer",
       "mesh.anchor",
       "mesh.focus",
       "mesh.gradient",
@@ -1518,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"
@@ -2536,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;
     }
 
@@ -2589,6 +3213,247 @@ describe("Toolcraft template app acceptance coverage", () => {
     expect(getAgentWorklogValidationErrors(worklogSource)).toEqual([]);
   });
 
+  it("requires product worklogs to record storyboard evidence for video references", () => {
+    const videoWorklogWithoutStudy = `
+      # 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 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: 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.
+
+      ## 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
@@ -2700,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
 
@@ -2710,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.
 
@@ -2728,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
@@ -2739,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
@@ -2751,33 +3617,507 @@ 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: Declare performance scenarios for renderer and controls.
+      - Reason: Canvas effects are performance-sensitive.
+      - Evidence: src/app/app-performance.ts.
+
+      ## Decision Trail
+
+      ### Iteration 1 — Initial product build
+
+      - 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, src/app/app-performance.ts, e2e/app-controls.spec.ts.
+      - Contract applied: performance-coverage-levels.
+
+      ## Verification
+
+      - Run: pnpm test failed.
+      - Run: pnpm verify:perf not complete.
+
+      ## Risks
+
+      - Risk: Required checks are not complete.
+    `;
+
+    expect(getAgentWorklogValidationErrors(incompletePerfWorklog)).toEqual(
+      expect.arrayContaining([
+        "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 first working product worklogs to record a browser performance checkpoint", () => {
+    const missingPerfWorklog = `
+      # 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: 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(
+      isPassedAgentBrowserPerfRunLine(
+        "- Browser: performance checkpoint runner agent-browser",
+      ),
+    ).toBe(true);
+    expect(
+      isPassedAgentBrowserPerfRunLine(
+        "- Verification: agent-browser perf checkpoint",
+      ),
+    ).toBe(true);
+    expect(
+      isPassedPlaywrightFallbackPerfRunLine(
+        "- Verification: playwright-fallback browser performance checkpoint",
+      ),
+    ).toBe(true);
+    expect(isPassedPlaywrightFallbackPerfRunLine("- Run: pnpm verify:perf")).toBe(true);
+    expect(
+      isPassedPlaywrightFallbackPerfRunLine(
+        "- Run: pnpm verify:perf not complete",
+      ),
+    ).toBe(false);
+    expect(
+      isPassedAgentBrowserPerfRunLine(
+        "- Verification: agent-browser perf checkpoint planned after build",
+      ),
+    ).toBe(false);
+    expect(
+      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
 
@@ -2815,6 +4155,7 @@ describe("Toolcraft template app acceptance coverage", () => {
       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:".',
@@ -2994,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.",
@@ -3074,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),
@@ -3102,7 +4463,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                       value: "reset",
                     },
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3157,7 +4518,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3226,7 +4587,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3292,7 +4653,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3359,7 +4720,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3422,7 +4783,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3487,7 +4848,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                 outputActions: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export PNG",
                       value: "export.png",
                     },
@@ -3569,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",
                     },
@@ -3588,7 +4949,6 @@ describe("Toolcraft template app acceptance coverage", () => {
           ],
           title: "Controls",
         },
-        timeline: { enabled: true, mode: "playback" },
       },
     });
 
@@ -3643,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",
                     },
@@ -3662,7 +5022,6 @@ describe("Toolcraft template app acceptance coverage", () => {
           ],
           title: "Controls",
         },
-        timeline: { enabled: true, mode: "playback" },
       },
     });
     const imageFormatAcceptance = makeControlAcceptance("export.image.format", "select");
@@ -3714,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: {
@@ -3764,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: {
@@ -3806,7 +5165,7 @@ describe("Toolcraft template app acceptance coverage", () => {
         },
       },
     });
-    const errors = validateToolcraftAcceptanceCoverage(schemaWithValidDependency, [
+    const branchErrors = validateToolcraftAcceptanceCoverage(schemaWithBranchDisabledDependency, [
       makeControlAcceptance("distribution.fillMode", "segmented"),
       {
         ...makeControlAcceptance("distribution.fillAmount", "slider"),
@@ -3816,10 +5175,48 @@ describe("Toolcraft template app acceptance coverage", () => {
       },
     ]);
 
-    expect(errors).not.toEqual(
+    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,
+                  target: "distribution.fillAmount",
+                  type: "slider",
+                },
+              },
+              title: "Distribution",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    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",
+        ),
       ]),
     );
   });
@@ -4654,6 +6051,189 @@ describe("Toolcraft template app acceptance coverage", () => {
     );
   });
 
+  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",
+        },
+      ),
+    ).toEqual(
+      expect.arrayContaining([
+        '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 feature-level behavior evidence for reference inventory items", () => {
+    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], 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.',
+    );
+  });
+
   it("rejects reference-runtime-clone apps that disable the Toolcraft canvas shell", () => {
     const schemaWithoutCanvas = defineToolcraft({
       canvas: {
@@ -4788,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",
         },
@@ -4811,41 +6393,165 @@ describe("Toolcraft template app acceptance coverage", () => {
         sourceOfTruth: "reference-runtime",
       }),
     ).toContain(
-      'reference-runtime-clone transport behaviorCoverage "pause-resume" requires referenceTimeline mode "toolcraft-playback", "toolcraft-keyframes", or "custom-reference-timeline"; mode "none" is only for references with no user-facing transport behavior.',
+      'reference-runtime-clone transport behaviorCoverage "pause-resume" requires referenceTimeline mode "toolcraft-playback", "toolcraft-keyframes", or "custom-reference-timeline"; mode "none" is only for references with no user-facing transport behavior.',
+    );
+  });
+
+  it("rejects reference clones that hide restart transport behind timeline none", () => {
+    expect(
+      validateToolcraftAcceptanceCoverage(starterSchema, starterAcceptance, {
+        behaviorCoverage: [
+          "canvas-sizing",
+          "control-mapping",
+          "renderer-state",
+          "restart",
+          "time-progress",
+        ],
+        mode: "reference-runtime-clone",
+        referenceName: "legacy restart animation",
+        referenceTimeline: { behaviorCoverage: [], mode: "none" },
+        sourceOfTruth: "reference-runtime",
+      }),
+    ).toContain(
+      'reference-runtime-clone transport behaviorCoverage "restart", "time-progress" requires referenceTimeline mode "toolcraft-playback", "toolcraft-keyframes", or "custom-reference-timeline"; mode "none" is only for references with no user-facing transport behavior.',
+    );
+  });
+
+  it("requires playback reference timelines to declare concrete behavior coverage", () => {
+    expect(
+      validateToolcraftAcceptanceCoverage(starterSchema, starterAcceptance, {
+        behaviorCoverage: ["canvas-sizing", "control-mapping", "renderer-state"],
+        mode: "reference-runtime-clone",
+        referenceName: "legacy playback animation",
+        referenceTimeline: { behaviorCoverage: [], mode: "toolcraft-playback" },
+        sourceOfTruth: "reference-runtime",
+      }),
+    ).toContain(
+      'referenceTimeline mode "toolcraft-playback" must list the concrete timeline transport behaviors in behaviorCoverage.',
+    );
+  });
+
+  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("rejects reference clones that hide restart transport behind timeline none", () => {
+  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(starterSchema, starterAcceptance, {
-        behaviorCoverage: [
-          "canvas-sizing",
-          "control-mapping",
-          "renderer-state",
-          "restart",
-          "time-progress",
+      validateToolcraftAcceptanceCoverage(
+        schemaWithPlaybackTimeline,
+        [
+          ...starterAcceptance,
+          {
+            ...playbackTimelineAcceptance,
+            id: "reference.timeline.playback",
+            referenceTimelineCoverage: "playback",
+          },
         ],
-        mode: "reference-runtime-clone",
-        referenceName: "legacy restart animation",
-        referenceTimeline: { behaviorCoverage: [], mode: "none" },
-        sourceOfTruth: "reference-runtime",
-      }),
+        {
+          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(
-      'reference-runtime-clone transport behaviorCoverage "restart", "time-progress" requires referenceTimeline mode "toolcraft-playback", "toolcraft-keyframes", or "custom-reference-timeline"; mode "none" is only for references with no user-facing transport behavior.',
+      "panels.timeline.defaultDurationSeconds (8) must match referenceTimeline.loopDuration.seconds (6).",
     );
   });
 
-  it("requires playback reference timelines to declare concrete behavior coverage", () => {
+  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(starterSchema, starterAcceptance, {
-        behaviorCoverage: ["canvas-sizing", "control-mapping", "renderer-state"],
-        mode: "reference-runtime-clone",
-        referenceName: "legacy playback animation",
-        referenceTimeline: { behaviorCoverage: [], mode: "toolcraft-playback" },
-        sourceOfTruth: "reference-runtime",
-      }),
+      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-playback" must list the concrete timeline transport behaviors in behaviorCoverage.',
+      '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.',
     );
   });
 
@@ -4885,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;
 
@@ -5017,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: [
             {
@@ -5043,7 +6752,12 @@ describe("Toolcraft template app acceptance coverage", () => {
         },
         timeline: undefined,
       },
-    } as const;
+      toolbar: {
+        history: true,
+        radar: true,
+        zoom: true,
+      },
+    });
 
     expect(
       validateToolcraftAcceptanceCoverage(
@@ -5069,12 +6783,109 @@ describe("Toolcraft template app acceptance coverage", () => {
     ).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",
+        },
+      ),
+    ).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", () => {
     const schemaWithPlaybackTimeline = {
       ...starterSchema,
       panels: {
         ...starterSchema.panels,
-        timeline: { enabled: true, mode: "playback" as const },
+        timeline: { defaultDurationSeconds: 8, enabled: true, mode: "playback" as const },
       },
     };
 
@@ -5083,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",
         },
       ),
@@ -5199,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",
@@ -5451,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) {
@@ -5461,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)) {
@@ -5538,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: [
             {
@@ -5564,7 +7410,12 @@ describe("Toolcraft template app acceptance coverage", () => {
         },
         timeline: undefined,
       },
-    };
+      toolbar: {
+        history: true,
+        radar: true,
+        zoom: true,
+      },
+    });
 
     expect(
       validateToolcraftAcceptanceCoverage(schemaWithAmbiguousSlider, [
@@ -6053,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,
@@ -6067,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.",
       ]),
     );
   });
@@ -6816,7 +8667,7 @@ describe("Toolcraft template app acceptance coverage", () => {
       ]),
     ).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/disabledWhen inside that section instead of splitting branch controls into their own section.',
+        '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.',
       ]),
     );
   });
@@ -6869,7 +8720,7 @@ describe("Toolcraft template app acceptance coverage", () => {
       ]),
     ).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/disabledWhen inside that section instead of splitting branch controls into their own section.',
+        '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.',
       ]),
     );
   });
@@ -7221,49 +9072,131 @@ 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: {
+                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",
                 },
-                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",
             },
@@ -7271,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",
@@ -7289,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: "mode changes rendered output",
+          automatedTestName: "fx preset changes rendered output",
           browser: true,
-          browserTestName: "browser: mode selector changes rendered output",
+          browserTestName: "browser: fx preset selector changes rendered output",
           componentType: "segmented",
           evidence: "rendered-pixels",
-          expectedObservable: "Changing Mode switches shader pattern.",
-          fixture: "mode fixture",
-          id: "shader.mode",
+          expectedObservable: "Changing FX Preset switches the shader preset.",
+          fixture: "fx preset fixture",
+          id: "shader.fxPreset",
           kind: "control",
           optionCoverage: "each-visible-item",
-          target: "shader.mode",
-          userAction: "Select each Mode option.",
+          target: "shader.fxPreset",
+          userAction: "Select each FX Preset option.",
         },
       ]),
     ).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.',
+        "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 },
       },
     };
 
@@ -7478,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.',
     );
   });
 
@@ -7533,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 },
       },
     };
 
@@ -7638,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 },
       },
     };
 
@@ -7730,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 },
       },
     };