@pixel-point/toolcraft 0.0.17 → 0.0.19

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

@@ -37,6 +37,7 @@ describe("starter acceptance worklog contract", () => {
 \`\`\`md
 ### Not a delivery iteration
 - Request: Forged request.
+- Source reviewed: forged-reference.mp4 video reference.
 \`\`\`
 
 ## Evidence`,
@@ -98,7 +99,7 @@ describe("starter acceptance worklog contract", () => {
     expect(acceptanceTesting).toContain("builtInFitCheck");
   });
 
-  it("requires product worklogs to record storyboard evidence for video references", () => {
+  it("reports video wording as an unregistered input when typed references are empty", () => {
     const worklog = createAgentWorklogFixture({
       evidenceLines: [
         "- Source reviewed: user prompt, ref.mp4, src/app/product-renderer.tsx.",
@@ -110,34 +111,169 @@ describe("starter acceptance worklog contract", () => {
       },
     });
 
-    expect(getAgentWorklogValidationErrors(worklog)).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.",
+    expect(
+      getAgentWorklogValidationErrors(worklog, { motionReferences: [] }),
+    ).toContain(
+      "agent-worklog.md cites a video reference, screen recording, GIF, extracted frames, or contact sheet, but starterTransferMode.referenceInputs registers no motion reference input.",
     );
   });
 
-  it("accepts product worklogs that record video reference storyboard and transition evidence", () => {
+  it("requires one exact typed summary for each timed motion-reference study", () => {
+    const motionReference = {
+      contactSheetPath:
+        "src/app/reference-studies/study-main/contact-sheet.png",
+      referenceId:
+        "motion-reference-v1-aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+      requiresRealTimeReview: true,
+      requiresSlowedReview: true,
+      sourceSha256:
+        "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
+      studyId: "study-main",
+      timingMode: "seconds" as const,
+    };
     const worklog = createAgentWorklogFixture({
       evidenceLines: [
-        "- Source reviewed: user prompt, ref.mp4, extracted frames, contact sheet, src/app/product-renderer.tsx.",
+        "- Source reviewed: user prompt, ref.mp4, extracted frames, src/app/product-renderer.tsx.",
         "- Contract applied: Toolcraft workflow and video-reference-analysis.",
       ],
-      extraDecisionSections: [
-        [
-          "### 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.",
-        ].join("\n"),
-      ],
       trailFields: {
         "Alternatives rejected": "Single screenshot implementation because the video behavior changes frame to frame.",
         "Contract rules applied": "video-reference-analysis and acceptance-product-observable.",
-        "Reference inputs": "/fixtures/reference-motion/ref.mp4 video reference, extracted frames, contact sheet.",
-        "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.",
+        "Source/reference checked": "User prompt and /fixtures/reference-motion/ref.mp4 video.",
       },
     });
 
-    expect(getAgentWorklogValidationErrors(worklog)).toEqual([]);
+    expect(
+      getAgentWorklogValidationErrors(worklog, {
+        motionReferences: [motionReference],
+      }),
+    ).toEqual([
+      expect.stringContaining('motion reference study "study-main"'),
+    ]);
+
+    const genericKeywords = worklog.replace(
+      "## Decision Trail",
+      [
+        "### Video Reference Study",
+        "- Evidence: storyboard frames and transition analysis from the contact sheet.",
+        "",
+        "## Decision Trail",
+      ].join("\n"),
+    );
+    expect(
+      getAgentWorklogValidationErrors(genericKeywords, {
+        motionReferences: [motionReference],
+      }),
+    ).toEqual([
+      expect.stringContaining('motion reference study "study-main"'),
+    ]);
+
+    const exactRecord = [
+      "- Motion reference study:",
+      `referenceId=${motionReference.referenceId};`,
+      `studyId=${motionReference.studyId};`,
+      `sourceSha256=${motionReference.sourceSha256};`,
+      `timingMode=${motionReference.timingMode};`,
+      `contactSheetPath=${motionReference.contactSheetPath};`,
+      "review=real-time,slowed.",
+    ].join(" ");
+    for (const inexactRecord of [
+      exactRecord.replace(
+        motionReference.referenceId,
+        `${motionReference.referenceId}x`,
+      ),
+      exactRecord.replace("studyId=study-main", "studyId=study-other"),
+      exactRecord.replace(
+        motionReference.sourceSha256,
+        `c${motionReference.sourceSha256.slice(1)}`,
+      ),
+      exactRecord.replace("timingMode=seconds", "timingMode=ordinal"),
+      exactRecord.replace(
+        motionReference.contactSheetPath,
+        "src/app/reference-studies/study-main/other-sheet.png",
+      ),
+      exactRecord.replace("review=real-time,slowed", "review=real-time"),
+    ]) {
+      expect(
+        getAgentWorklogValidationErrors(`${worklog}\n${inexactRecord}`, {
+          motionReferences: [motionReference],
+        }),
+      ).toEqual([
+        expect.stringContaining('motion reference study "study-main"'),
+      ]);
+    }
+    expect(
+      getAgentWorklogValidationErrors(`${worklog}\n${exactRecord}`, {
+        motionReferences: [motionReference],
+      }),
+    ).toEqual([]);
+  });
+
+  it("requires ordered-frame review for ordinal evidence and rejects timing review wording", () => {
+    const motionReference = {
+      contactSheetPath:
+        "src/app/reference-studies/study-ordinal/contact-sheet.png",
+      referenceId:
+        "motion-reference-v1-aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+      requiresRealTimeReview: false,
+      requiresSlowedReview: false,
+      sourceSha256:
+        "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
+      studyId: "study-ordinal",
+      timingMode: "ordinal" as const,
+    };
+    const base = createAgentWorklogFixture();
+    const timedWording = `${base}\n- Motion reference study: referenceId=${motionReference.referenceId}; studyId=${motionReference.studyId}; sourceSha256=${motionReference.sourceSha256}; timingMode=ordinal; contactSheetPath=${motionReference.contactSheetPath}; review=real-time,slowed.`;
+    expect(
+      getAgentWorklogValidationErrors(timedWording, {
+        motionReferences: [motionReference],
+      }),
+    ).toEqual([
+      expect.stringContaining('motion reference study "study-ordinal"'),
+    ]);
+
+    const ordinalRecord = timedWording.replace(
+      "review=real-time,slowed",
+      "review=ordered-frames",
+    );
+    expect(
+      getAgentWorklogValidationErrors(ordinalRecord, {
+        motionReferences: [motionReference],
+      }),
+    ).toEqual([]);
+  });
+
+  it("does not let one record satisfy two nested studies", () => {
+    const referenceId =
+      "motion-reference-v1-aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
+    const sourceSha256 =
+      "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb";
+    const first = {
+      contactSheetPath:
+        "src/app/reference-studies/study-one/contact-sheet.png",
+      referenceId,
+      requiresRealTimeReview: true,
+      requiresSlowedReview: false,
+      sourceSha256,
+      studyId: "study-one",
+      timingMode: "seconds" as const,
+    };
+    const second = {
+      ...first,
+      contactSheetPath:
+        "src/app/reference-studies/study-two/contact-sheet.png",
+      studyId: "study-two",
+    };
+    const worklog = `${createAgentWorklogFixture()}\n- Motion reference study: referenceId=${referenceId}; studyId=study-one; sourceSha256=${sourceSha256}; timingMode=seconds; contactSheetPath=${first.contactSheetPath}; review=real-time.`;
+
+    expect(
+      getAgentWorklogValidationErrors(worklog, {
+        motionReferences: [first, second],
+      }),
+    ).toEqual([
+      expect.stringContaining('motion reference study "study-two"'),
+    ]);
   });
 
   it("does not treat ordinary video export worklog evidence as a video reference", () => {

package/templates/starter/src/app/starter-performance.gates.test.ts

@@ -20,9 +20,6 @@ import {
   type ToolcraftEnvelopePerformanceConfig,
   validateToolcraftPerformanceCoverage,
 } from "@repo/toolcraft-runtime";
-import {
-  validateToolcraftCurrentPerformanceImpactInventory,
-} from "../../scripts/toolcraft-verification-receipt.mjs";
 import {
   createToolcraftScriptLineBudgetPolicy,
   getToolcraftScriptProductionEntryPaths,
@@ -146,6 +143,9 @@ function collectPerformanceSpecFacts(source: string, fileName: string) {
   });
 }
 
+// Hang-only ceiling: functional gate duration is never product performance evidence.
+const TOOLCRAFT_FUNCTIONAL_GATE_TIMEOUT_MS = 60_000;
+
 describe("Toolcraft starter performance gates", () => {
   it(
     "keeps generated verification scripts within shared recursive budgets",
@@ -153,7 +153,7 @@ describe("Toolcraft starter performance gates", () => {
       const result = await evaluateGeneratedScriptBudgets(projectDir);
       expect(result.lineBudgetViolations).toEqual([]);
     },
-    15_000,
+    TOOLCRAFT_FUNCTIONAL_GATE_TIMEOUT_MS,
   );
 
   it("classifies every script extension and production-looking test by reachability", async () => {
@@ -355,13 +355,27 @@ describe("Toolcraft starter performance gates", () => {
     expect(playwrightConfigForbidsFocusedTests()).toBe(true);
   });
 
+  it("keeps later feature verification product-only and outside proof authority", () => {
+    const source = readFileSync(
+      join(projectDir, "scripts/run-feature-verification.mjs"),
+      "utf8",
+    );
+
+    expect(source).toContain("Promise.all");
+    expect(source).toContain("resolveToolcraftPlaywrightTestTitles");
+    expect(source).toContain("TOOLCRAFT_BROWSER_SERVER_MODE: \"dev\"");
+    expect(source).not.toMatch(
+      /executeToolcraftDeliveryLifecycle|measureToolcraftPerformanceCheckpoint|collectToolcraftVerificationInputs/iu,
+    );
+  });
+
   it("keeps verification lifecycle authority in the runtime contract", () => {
     expect(starterPerformance).not.toHaveProperty("browserCheckPolicy");
     expect(TOOLCRAFT_PERFORMANCE_VERIFICATION_LIFECYCLE).toEqual({
       delivery: {
         command: "verify:delivery",
-        modes: ["functional", "performance-iteration"],
-        selectors: "automatic",
+        modes: ["initial-functional", "performance-iteration"],
+        selectors: "initial-complete-or-authority-exact",
       },
       fullPerformance: {
         command: "verify:perf",
@@ -380,18 +394,6 @@ describe("Toolcraft starter performance gates", () => {
     ).toEqual([]);
   });
 
-  it("maps every product production module to current renderer pass ownership", async () => {
-    const knownPassIds = (starterPerformance.rendererPipeline?.passes ?? []).map(
-      ({ id }) => id,
-    );
-    await expect(
-      validateToolcraftCurrentPerformanceImpactInventory({
-        knownPassIds,
-        rootDir: projectDir,
-      }),
-    ).resolves.toBeDefined();
-  });
-
   it("keeps unresolved kernel decisions pending during functional delivery", () => {
     const performanceConfig: ToolcraftEnvelopePerformanceConfig = starterPerformance;
     const rawAssessment = assessToolcraftRenderPlan(starterSchema, {

package/templates/starter/src/app/starter-performance.lifecycle.test.ts

@@ -12,8 +12,8 @@ import { projectDir } from "./starter-performance-test-utils";
 
 const expectedRequiredPackageScriptNames = [
   "ai:check", "build", "dev", "dev:restart", "docs:check", "preview",
-  "preview:restart", "test", "test:browser", "typecheck", "verify:delivery",
-  "verify:kernel", "verify:perf", "verify:receipt",
+  "preview:restart", "reference:study", "test", "test:browser", "test:feature", "typecheck",
+  "verify:delivery", "verify:kernel", "verify:perf", "verify:receipt",
 ] as const;
 
 describe("Toolcraft starter performance lifecycle", () => {
@@ -59,6 +59,20 @@ describe("Toolcraft starter performance lifecycle", () => {
       'playwright install chromium && playwright test --grep-invert "browser perf:|toolcraft kernel:"',
     );
     expect(packageJson.scripts?.["test:browser:perf"]).toBeUndefined();
+    expect(packageJson.scripts?.["test:feature"]).toBe(
+      "node scripts/run-feature-verification.mjs",
+    );
+    const featureRunner = readFileSync(
+      join(projectDir, "scripts/run-feature-verification.mjs"),
+      "utf8",
+    );
+    expect(featureRunner).toContain(
+      "toolcraft-feature-verification-reporter.ts",
+    );
+    expect(featureRunner).toContain("--workers=1");
+    expect(featureRunner).not.toMatch(
+      /runToolcraftProofPackageScript|verify:delivery|verify:perf|test:browser/iu,
+    );
     const performanceRunner = readFileSync(
       join(projectDir, "scripts/run-browser-performance.mjs"),
       "utf8",
@@ -161,12 +175,12 @@ describe("Toolcraft starter performance lifecycle", () => {
 
     for (const { relativePath, source } of docSources) {
       expect(source, relativePath).toMatch(/first (?:product )?delivery/i);
-      expect(source, relativePath).toMatch(/later[^\n]{0,40}delivery/i);
+      expect(source, relativePath).toMatch(/later[^\n]{0,60}(?:edits|feature work)/i);
       expect(source, relativePath).toMatch(
         /(?:performance complaint|localized complaint)/i,
       );
       expect(source, relativePath).toMatch(
-        /(?:full audit|complete (?:performance )?(?:audit|review))/i,
+        /(?:full[- ]audit|complete (?:performance )?(?:audit|review))/i,
       );
       expect(source, relativePath).toContain(
         TOOLCRAFT_DELIVERY_VERIFICATION_COMMAND,
@@ -241,14 +255,16 @@ describe("Toolcraft starter performance lifecycle", () => {
     expect(documentation).toMatch(
       /first product delivery[^\n]*full functional acceptance[^\n]*no measured performance/i,
     );
-    expect(documentation).toMatch(/later delivery[^\n]*functional-targeted/i);
+    expect(documentation).toMatch(
+      /later(?: ordinary)? edits[^\n]*(?:focused|directly relevant|feature-focused)/i,
+    );
     expect(documentation).toMatch(
       /complaint[^\n]*one-authority-targeted-performance-iteration/i,
     );
     expect(documentation).toMatch(/full-performance/i);
     expect(documentation).toMatch(/needs-agent-judgment/i);
     expect(documentation).toMatch(
-      /later[^\n]{0,40}delivery[^\n]*(?:same )?bare command[^\n]*exact ownership/i,
+      /repeated bare command[^\n]*protected no-op/i,
     );
     expect(documentation).not.toMatch(
       /first stable[^\n]*(?:full performance|full checkpoint|baseline)/i,

package/templates/starter/src/app/test-evidence/browser-runtime-contract.ts

@@ -20,12 +20,13 @@ export const TOOLCRAFT_BROWSER_RUNTIME_EVIDENCE_TYPES = [
   "canvas-render-scale-backing",
   "command-side-effect",
   "compound-control-part",
-  "conditional-control-hidden",
-  "conditional-control-visible",
+  "control-applicability-hidden",
+  "control-applicability-visible",
   "discrete-slider-layout",
   "exported-artifact",
   "infinity-mode-restoration",
   "infinity-scene-bounds-image-export",
+  "infinity-scene-bounds-svg-export",
   "infinity-scene-bounds-video-export",
   "image-export-artifact",
   "layer-grouping",
@@ -73,6 +74,8 @@ export const TOOLCRAFT_BROWSER_RUNTIME_EVIDENCE_TYPES = [
   "product-observable-change",
   "reference-parity",
   "segmented-control-layout",
+  "selection-scoped-control",
+  "svg-export-artifact",
   "timeline-duration",
   "timeline-keyframes",
   "timeline-loop",

package/templates/starter/src/routes/index.tsx

@@ -9,6 +9,7 @@ export function StarterHome(): React.JSX.Element {
       className="h-dvh min-h-dvh"
       controlRenderers={starterComposition.controlRenderers}
       exportRenderer={starterComposition.exportRenderer}
+      infiniteCanvasContent={starterComposition.infiniteCanvasContent}
       modelPresentation={starterComposition.modelPresentation}
       onPanelAction={starterComposition.onPanelAction}
       renderDefaultCanvasMedia={starterComposition.renderDefaultCanvasMedia}

package/templates/starter/tsconfig.json

@@ -11,6 +11,7 @@
     "src",
     "scripts/toolcraft-delivery-receipt.types.test.mts",
     "scripts/toolcraft-functional-proof-model.types.test.mts",
+    "scripts/toolcraft-motion-reference-artifacts.types.test.mts",
     "scripts/toolcraft-targeted-performance-report.types.test.mts",
     "vite.config.ts"
   ]

package/templates/ui/components/composites/tabs.tsx

@@ -26,7 +26,7 @@ const tabsListVariants = cva(
       },
       variant: {
         control:
-          "w-full rounded-md border border-[color:color-mix(in_oklab,var(--border)_12%,transparent)] bg-[color:color-mix(in_oklab,var(--input)_5%,transparent)] p-0 text-[color:color-mix(in_oklab,var(--foreground)_72%,transparent)] [&>[data-slot=tabs-trigger]]:relative [&>[data-slot=tabs-trigger]:has(+[data-slot=tabs-trigger])]:border-r-0 [&>[data-slot=tabs-trigger][data-active]+[data-slot=tabs-trigger]]:border-l-[color:color-mix(in_oklab,var(--border)_10%,transparent)]",
+          "w-full rounded-md p-0 text-[color:color-mix(in_oklab,var(--foreground)_72%,transparent)] [&>[data-slot=tabs-trigger]]:relative [&>[data-slot=tabs-trigger]:has(+[data-slot=tabs-trigger])]:border-r-0 [&>[data-slot=tabs-trigger][data-active]+[data-slot=tabs-trigger]]:border-l-[color:color-mix(in_oklab,var(--border)_10%,transparent)]",
         default: "bg-transparent",
         line: "gap-1 bg-transparent pl-0",
       },
@@ -69,7 +69,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
       className={cn(
         "relative inline-flex h-[var(--tabs-trigger-height,calc(100%-1px))] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-[color:color-mix(in_oklab,var(--foreground)_60%,transparent)] transition-none group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] hover:text-[color:var(--foreground)] focus-visible:border-[color:var(--ring)] focus-visible:ring-[3px] focus-visible:ring-[color:color-mix(in_oklab,var(--ring)_50%,transparent)] focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-[color:var(--muted-foreground)] dark:hover:text-[color:var(--foreground)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         "group-data-[size=header-lg]/tabs-list:px-2.5 group-data-[size=header-lg]/tabs-list:text-xs-plus",
-        "group-data-[variant=control]/tabs-list:min-w-0 group-data-[variant=control]/tabs-list:rounded-none group-data-[variant=control]/tabs-list:border-[color:color-mix(in_oklab,var(--border)_12%,transparent)] group-data-[variant=control]/tabs-list:bg-transparent group-data-[variant=control]/tabs-list:px-2 group-data-[variant=control]/tabs-list:transition-all group-data-[variant=control]/tabs-list:first:rounded-l-md group-data-[variant=control]/tabs-list:last:rounded-r-md group-data-[variant=control]/tabs-list:hover:bg-[color:color-mix(in_oklab,var(--foreground)_10%,transparent)] group-data-[variant=control]/tabs-list:hover:text-[color:var(--foreground)] group-data-[variant=control]/tabs-list:data-active:hover:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] group-data-[variant=control]/tabs-list:data-active:hover:text-[color:var(--foreground)]",
+        "group-data-[variant=control]/tabs-list:h-full group-data-[variant=control]/tabs-list:min-w-0 group-data-[variant=control]/tabs-list:rounded-none group-data-[variant=control]/tabs-list:border-[color:color-mix(in_oklab,var(--border)_12%,transparent)] group-data-[variant=control]/tabs-list:bg-[color:color-mix(in_oklab,var(--input)_5%,transparent)] group-data-[variant=control]/tabs-list:px-2 group-data-[variant=control]/tabs-list:transition-all group-data-[variant=control]/tabs-list:first:rounded-l-md group-data-[variant=control]/tabs-list:last:rounded-r-md group-data-[variant=control]/tabs-list:hover:bg-[color:color-mix(in_oklab,var(--foreground)_10%,transparent)] group-data-[variant=control]/tabs-list:hover:text-[color:var(--foreground)] group-data-[variant=control]/tabs-list:data-active:border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] group-data-[variant=control]/tabs-list:data-active:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] group-data-[variant=control]/tabs-list:data-active:text-[color:var(--foreground)] group-data-[variant=control]/tabs-list:data-active:hover:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] group-data-[variant=control]/tabs-list:data-active:hover:text-[color:var(--foreground)]",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:border-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         `${activeSelectedItemClassName} dark:data-active:text-[color:var(--foreground)]`,
         "after:absolute after:bg-[color:var(--foreground)] after:opacity-0 after:transition-none group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[var(--tabs-indicator-bottom,-5px)] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",

package/templates/ui/components/controls/collection-actions/collection-item-groups.test.tsx

@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { CollectionItemGroups } from "./collection-item-groups";
+
+describe("CollectionItemGroups", () => {
+  it("renders a line only before adjacent logical groups", () => {
+    const { container } = render(
+      <CollectionItemGroups>
+        <div>Strength A</div>
+        <div>Strength B</div>
+      </CollectionItemGroups>,
+    );
+    const groups = container.querySelectorAll(
+      '[data-slot="collection-item-group"]',
+    );
+
+    expect(groups).toHaveLength(2);
+    expect(groups[0]?.className).not.toContain("border-t");
+    expect(groups[1]?.className).toContain("border-t");
+    expect(container.textContent).not.toMatch(/Item 1|Item 2/u);
+  });
+
+  it("renders no line for one logical group", () => {
+    const { container } = render(
+      <CollectionItemGroups>
+        <div>Only group</div>
+      </CollectionItemGroups>,
+    );
+
+    expect(
+      container.querySelector('[data-slot="collection-item-group"]')
+        ?.className,
+    ).not.toContain("border-t");
+  });
+});

package/templates/ui/components/controls/collection-actions/collection-item-groups.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+
+export type CollectionItemGroupsProps = {
+  children: React.ReactNode;
+};
+
+export function CollectionItemGroups({
+  children,
+}: CollectionItemGroupsProps): React.JSX.Element {
+  const groups = React.Children.toArray(children);
+
+  return (
+    <div className="min-w-0" data-slot="collection-item-groups">
+      {groups.map((group, index) => {
+        const key =
+          React.isValidElement(group) && group.key !== null ? group.key : index;
+
+        return (
+          <div
+            className={
+              index === 0
+                ? "min-w-0"
+                : "mt-[18px] min-w-0 border-t border-[color:color-mix(in_oklab,var(--border)_5%,transparent)] pt-[18px]"
+            }
+            data-slot="collection-item-group"
+            key={key}
+          >
+            {group}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/ui/components/controls/collection-actions/index.ts

@@ -2,3 +2,5 @@
 
 export { CollectionActionsControl } from "./collection-actions-control";
 export type { CollectionActionsControlProps } from "./collection-actions-control";
+export { CollectionItemGroups } from "./collection-item-groups";
+export type { CollectionItemGroupsProps } from "./collection-item-groups";

package/templates/ui/components/controls/file-drop/file-drop-collection-control.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../../lib/utils";
+import {
+  CollectionActionsControl,
+  CollectionItemGroups,
+} from "../collection-actions";
+import { Field } from "../../primitives";
+import { FileDropPresentationMessages } from "./file-drop-presentation-messages";
+import type {
+  FileDropCollectionActions,
+  FileDropPresentation,
+  FileDropPresentationEntry,
+  FileDropPresentationItem,
+} from "./file-drop-types";
+
+type FileDropCollectionSlotControl = (
+  props: Readonly<{
+    collectionSlot: true;
+    onFilesSelect: (files: File[]) => void;
+    presentation: FileDropPresentation<string, unknown, unknown>;
+  }>,
+) => React.JSX.Element;
+
+type FileDropCollectionControlProps = {
+  actions: FileDropCollectionActions;
+  canRemoveAttachedItem: boolean;
+  entries: readonly FileDropPresentationEntry[];
+  onFilesSelect?: (files: File[]) => void;
+  onRemoveAttachedItem: (item: FileDropPresentationItem, index: number) => void;
+  presentation: FileDropPresentation<string, unknown, unknown>;
+  SlotControl: FileDropCollectionSlotControl;
+};
+
+export function FileDropCollectionControl({
+  actions,
+  canRemoveAttachedItem,
+  entries,
+  onFilesSelect,
+  onRemoveAttachedItem,
+  presentation,
+  SlotControl,
+}: FileDropCollectionControlProps): React.JSX.Element {
+  const pendingBaseCountRef = React.useRef(entries.length);
+  const [hasPendingSlot, setHasPendingSlot] = React.useState(
+    () => entries.length === 0,
+  );
+  const itemLabel = actions.itemLabel ?? "file";
+
+  React.useEffect(() => {
+    if (entries.length === 0 && !hasPendingSlot) {
+      pendingBaseCountRef.current = 0;
+      setHasPendingSlot(true);
+    } else if (hasPendingSlot && entries.length > pendingBaseCountRef.current) {
+      setHasPendingSlot(false);
+    }
+  }, [entries.length, hasPendingSlot]);
+
+  const canAddSlot = actions.canAdd !== false && !hasPendingSlot;
+  const canRemoveSlot = hasPendingSlot
+    ? entries.length > 0
+    : entries.length > 0 && canRemoveAttachedItem;
+
+  function renderSlot(
+    item: FileDropPresentationItem | null,
+    index: number,
+    key: React.Key,
+  ): React.JSX.Element {
+    const itemContent = item ? actions.renderItemContent?.(item, index) : null;
+
+    return (
+      <div
+        className={cn("min-w-0", itemContent && "space-y-4")}
+        data-slot="file-drop-collection-slot"
+        key={key}
+      >
+        <SlotControl
+          collectionSlot
+          onFilesSelect={(files) => onFilesSelect?.(files.slice(0, 1))}
+          presentation={{
+            ...presentation,
+            allowsFileBatch: false,
+            allowsFolderSelection: false,
+            emptyTitle: `Upload ${itemLabel} ${index + 1}`,
+            feedback: undefined,
+            items: item ? [item] : [],
+            secondaryActions: [],
+            status: undefined,
+          }}
+        />
+        {itemContent}
+      </div>
+    );
+  }
+
+  return (
+    <Field className="min-w-0" style={{ gap: "6px" }}>
+      <CollectionActionsControl
+        addLabel={actions.addLabel}
+        canAdd={canAddSlot}
+        canRemove={canRemoveSlot}
+        name={actions.name}
+        onAdd={() => {
+          pendingBaseCountRef.current = entries.length;
+          setHasPendingSlot(true);
+        }}
+        onRemove={() => {
+          if (hasPendingSlot) {
+            setHasPendingSlot(false);
+            return;
+          }
+
+          const entry = entries[entries.length - 1];
+
+          if (entry) {
+            onRemoveAttachedItem(entry.item, entry.sourceIndex);
+          }
+        }}
+        removeLabel={actions.removeLabel}
+      />
+      <CollectionItemGroups>
+        {entries.map((entry, index) =>
+          renderSlot(entry.item, index, entry.key),
+        )}
+        {hasPendingSlot
+          ? renderSlot(null, entries.length, `pending-${entries.length}`)
+          : null}
+      </CollectionItemGroups>
+      <FileDropPresentationMessages
+        feedback={presentation.feedback}
+        status={presentation.status}
+      />
+    </Field>
+  );
+}