@pixel-point/toolcraft 0.0.6 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixel-point/toolcraft",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
   "bin": {

package/src/generate.test.mjs

@@ -95,7 +95,7 @@ describe("generateToolcraft", () => {
     assert.equal(packageJson.scripts["verify:perf"], "pnpm test:browser:perf");
     assert.equal(
       packageJson.scripts["verify:final"],
-      "pnpm ai:check && pnpm test && pnpm build && pnpm test:browser && pnpm test:browser:perf",
+      "pnpm ai:check && pnpm test && pnpm build && pnpm test:browser",
     );
 
     assert.ok(await fs.stat(path.join(targetDir, "playwright.config.ts")));

package/templates/runtime/contracts/component-contracts.test.ts

@@ -30,6 +30,7 @@ describe("Toolcraft template component contracts", () => {
       "imagePicker",
       "palette",
       "actions",
+      "collectionActions",
       "panelActions",
       "customControl",
     ] as const) {
@@ -221,7 +222,7 @@ describe("Toolcraft template component contracts", () => {
       "Every visible custom-control element must justify its space by enabling selection, ordering, preview, removal, upload, editing, or status that affects the product.",
     );
     expect(contract.aiUsageRules).toContain(
-      "Do not use a custom control to recreate a built-in Slider, RangeSlider, Select, Segmented, Switch, Checkbox, Color, ColorOpacity, Gradient, FontPicker, ImagePicker, FileDrop, TextInput, CodeTextarea, RangeInput, Palette, Actions, Curves, AnchorGrid, ChannelMixer, Vector, or PanelActions control.",
+      "Do not use a custom control to recreate a built-in Slider, RangeSlider, Select, Segmented, Switch, Checkbox, Color, ColorOpacity, Gradient, FontPicker, ImagePicker, FileDrop, TextInput, CodeTextarea, RangeInput, Palette, Actions, CollectionActions, Curves, AnchorGrid, ChannelMixer, Vector, or PanelActions control.",
     );
     expect(contract.aiUsageRules).toContain(
       "Custom controls may use Toolcraft primitives for small app-specific chrome, but must not import or render low-level runtime surfaces or duplicate toolbar, timeline, layers, canvas, panel, or built-in control mechanics.",
@@ -258,6 +259,35 @@ describe("Toolcraft template component contracts", () => {
     );
   });
 
+  it("documents CollectionActions as canvas-backed add/remove controls", () => {
+    const contract = getToolcraftComponentContract("collectionActions");
+
+    expect(contract.stateMode).toBe("controlled");
+    expect(contract.decisionCatalog?.strictness).toBe("exact-owner");
+    expect(contract.decisionCatalog?.ownsValueModel).toContain(
+      "repeatable product entity collection",
+    );
+    expect(contract.decisionCatalog?.useWhen).toContain(
+      "Use CollectionActions instead of a count Slider when the user edits the actual set of items rather than only a numeric amount.",
+    );
+    expect(contract.decisionCatalog?.doNotReplaceWith).toContain(
+      "Do not use Slider to add or remove real collection items.",
+    );
+    expect(contract.decisionCatalog?.layoutConstraints).toContain(
+      "recommendedMaxItems is an agent/layout/performance hint, not a hard add limit; hardMaxItems is allowed only for real algorithm, format, API, export, or proven performance limits.",
+    );
+    expect(contract.decisionCatalog?.requiredAcceptance.join(" ")).toMatch(
+      /canvas preview and export/i,
+    );
+    expect(contract.aiUsageRules).toContain(
+      "Adding or removing collection items must update the runtime target array consumed by the renderer and export; do not add panel-only items.",
+    );
+    expect(contract.aiUsageRules).toContain(
+      "recommendedMaxItems is advisory only and must not disable the plus button. Use hardMaxItems only when a real product, algorithm, API, export, or measured performance limit requires it.",
+    );
+    expect(contract.aiUsageRules.join(" ")).toMatch(/TextInput/);
+  });
+
   it("documents Palette as a constrained design-token color control", () => {
     const contract = getToolcraftComponentContract("palette");
 
@@ -352,7 +382,7 @@ describe("Toolcraft template component contracts", () => {
       "Aspect ratio presets are the only interaction that may resize both canvas dimensions from a preset; manual size inputs are exact output dimensions.",
     );
     expect(contract.aiUsageRules).toContain(
-      "For non-vector raster, Canvas 2D, WebGL, and WebGPU previews, set canvas.renderScale: true so the runtime adds Resolution scale after canvas sizing. The scale changes backing pixels from 1x to 2x without changing visible canvas size, and adding/enabling it requires a full pnpm verify:perf checkpoint.",
+      "For non-vector raster, Canvas 2D, WebGL, and WebGPU previews, set canvas.renderScale: true so the runtime adds Resolution scale after canvas sizing. The scale changes backing pixels from 1x to 2x without changing visible canvas size, and adding/enabling it requires targeted browser evidence that the canvas stays responsive at the selected scale.",
     );
     expect(contract.aiUsageRules).toContain(
       "After enabling canvas.renderScale, verify that canvas preview stays responsive while dragging sliders and other high-frequency controls at the selected scale.",
@@ -728,7 +758,10 @@ describe("Toolcraft template component contracts", () => {
       "Performance matrices must declare rendererWorkload as none, simple-composition, text-output, vector-output, or pixel-output.",
     );
     expect(contract.aiUsageRules).toContain(
-      "A full performance checkpoint must run with pnpm verify:perf when the first working app version exists, renderer/canvas/animation/export/timeline/layers change, canvas.renderScale or the Resolution scale retina slider is added/enabled, a bug that previously broke functionality is fixed, any performance optimization lands, or the user requests performance, lag, jank, animation speed, or drag/zoom stabilization work.",
+      "A full performance checkpoint must run with pnpm verify:perf only when the first working app version exists or the user requests performance, lag, jank, animation speed, drag/zoom stabilization work, or otherwise complains about performance.",
+    );
+    expect(contract.aiUsageRules).toContain(
+      "Renderer, canvas, animation, export, timeline, layers, canvas.renderScale, bug fixes, and performance-sensitive control changes use targeted functional/browser checks first and targeted performance scenarios only for touched workload, viewport, or export paths.",
     );
     expect(contract.aiUsageRules).toContain(
       "Performance fixes must preserve selected output and preview quality; do not reduce image quality, selected renderScale, export resolution, source media fidelity, or canvas backing pixels as the hidden way to pass budgets.",
@@ -876,6 +909,9 @@ describe("Toolcraft template component contracts", () => {
     expect(contract.aiUsageRules).toContain(
       "Ordinary controls-panel section collapsed/expanded state persists as a runtime UI preference per app. It is not undo/redo state, not settings import/export state, and Reset controls must not clear it. Runtime technical Setup/settings sections and sticky footer Export sections are not collapsible.",
     );
+    expect(contract.aiUsageRules).toContain(
+      "Ordinary controls-panel section headers expose the runtime section reset action before the collapse button; it dispatches controls.resetTargets and restores only that section's control targets to their schema defaultValue.",
+    );
     expect(contract.aiUsageRules).toContain(
       "Ordinary controls-panel body sections use 8px top spacing and 24px bottom spacing for their control content. Runtime technical Setup/settings sections use 12px top and bottom spacing to match side padding. Sticky footer action sections keep their dedicated spacing.",
     );

package/templates/runtime/contracts/component-contracts.ts

@@ -392,6 +392,55 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "Acceptance and browser tests must click each Actions button and prove the product output or runtime state for the nearby entity changed.",
     ],
   },
+  collectionActions: {
+    ...control("collectionActions", "CollectionActions", "standalone", "component-owned"),
+    decisionCatalog: decisionCatalog({
+      strictness: "exact-owner",
+      ownsValueModel: [
+        "repeatable product entity collection",
+        "add/remove product items",
+        "dynamic list of visible controls",
+        "canvas-backed collection size",
+      ],
+      useWhen: [
+        "Use CollectionActions when users can add or remove repeated product entities such as colors, glyphs, symbols, points, rules, variants, or object entries.",
+        "Use CollectionActions instead of a count Slider when the user edits the actual set of items rather than only a numeric amount.",
+      ],
+      doNotReplaceWith: [
+        "Do not use Slider to add or remove real collection items.",
+        "Do not use plain Actions for add/remove collection ownership; Actions are local commands, not collection state owners.",
+        "Do not use CollectionActions for panel-only lists that do not affect canvas preview or export.",
+      ],
+      acceptableAlternatives: [
+        "Use fileDrop multiple when the repeated entities are uploaded images.",
+        "Use Gradient when the repeated entities are gradient stops inside an adjustable gradient.",
+        "Use customControl only when the repeated entity needs interactions no built-in collection item control can express.",
+      ],
+      layoutConstraints: [
+        "CollectionActions sits at the start of its section, renders the collection label on the left, and keeps remove/add icon buttons together on the right.",
+        "Homogeneous repeated item controls do not render visible per-item labels when the collection label already names the group.",
+        "Collection item controls follow normal density rules: plain color items use equal 50% columns when they fit, while color+opacity items stay stacked.",
+        "CollectionActions is a compound control and follows content-width compound divider rules when sharing a section with sibling controls.",
+        "recommendedMaxItems is an agent/layout/performance hint, not a hard add limit; hardMaxItems is allowed only for real algorithm, format, API, export, or proven performance limits.",
+      ],
+      requiredAcceptance: [
+        "Prove plus adds a runtime item and that the new item appears in or affects canvas preview and export.",
+        "Prove minus removes a runtime item and that the removed item disappears from or stops affecting canvas preview and export.",
+        "Prove minItems prevents deleting below the minimum and recommendedMaxItems does not silently block adding more items.",
+      ],
+    }),
+    stateMode: "controlled",
+    aiUsageRules: [
+      "Use CollectionActions for repeatable product entities whose actual item list can grow or shrink.",
+      "Adding or removing collection items must update the runtime target array consumed by the renderer and export; do not add panel-only items.",
+      "Do not model add/remove item behavior with a Slider count when users need to edit the actual items.",
+      "recommendedMaxItems is advisory only and must not disable the plus button. Use hardMaxItems only when a real product, algorithm, API, export, or measured performance limit requires it.",
+      "CollectionActions item controls use built-in controls whenever possible, such as Color, ColorOpacity, TextInput, Select, Segmented, Slider, Switch, Checkbox, or RangeInput.",
+      "Do not add visible labels like Color 1, Color 2, Item 1, or Item 2 for homogeneous collection items when the collection label already explains the group.",
+      "Use compact half-width item layout whenever the child control is allowed to fit in a half row; color items without opacity are the default two-column case.",
+      "Acceptance must add and remove items through the browser UI and prove canvas/export output follows the changed collection.",
+    ],
+  },
   panelActions: {
     ...control("panelActions", "PanelActions", "standalone", "component-owned"),
     decisionCatalog: decisionCatalog({
@@ -928,7 +977,7 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
     }),
     aiUsageRules: [
       "Use custom controls only for product interactions that built-in controls cannot express.",
-      "Do not use a custom control to recreate a built-in Slider, RangeSlider, Select, Segmented, Switch, Checkbox, Color, ColorOpacity, Gradient, FontPicker, ImagePicker, FileDrop, TextInput, CodeTextarea, RangeInput, Palette, Actions, Curves, AnchorGrid, ChannelMixer, Vector, or PanelActions control.",
+      "Do not use a custom control to recreate a built-in Slider, RangeSlider, Select, Segmented, Switch, Checkbox, Color, ColorOpacity, Gradient, FontPicker, ImagePicker, FileDrop, TextInput, CodeTextarea, RangeInput, Palette, Actions, CollectionActions, Curves, AnchorGrid, ChannelMixer, Vector, or PanelActions control.",
       "Custom controls may use Toolcraft primitives for small app-specific chrome, but must not import or render low-level runtime surfaces or duplicate toolbar, timeline, layers, canvas, panel, or built-in control mechanics.",
       "Custom controls must render the minimum UI needed to understand the value, context, and available actions; avoid decorative metadata and text that repeats what the section, label, or visible item already explains.",
       "Every visible custom-control element must justify its space by enabling selection, ordering, preview, removal, upload, editing, or status that affects the product.",
@@ -961,7 +1010,7 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "The runtime Canvas width and Canvas height block uses the technical Setup section and renders without a visible section heading; do not add a separate Canvas section label above these fields.",
       "When the user manually edits Canvas width or Canvas height, the runtime keeps the typed dimension, keeps the other dimension unchanged, switches Aspect ratio to Custom, and shows the reduced current ratio in the custom ratio inputs.",
       "Aspect ratio presets are the only interaction that may resize both canvas dimensions from a preset; manual size inputs are exact output dimensions.",
-      "For non-vector raster, Canvas 2D, WebGL, and WebGPU previews, set canvas.renderScale: true so the runtime adds Resolution scale after canvas sizing. The scale changes backing pixels from 1x to 2x without changing visible canvas size, and adding/enabling it requires a full pnpm verify:perf checkpoint.",
+      "For non-vector raster, Canvas 2D, WebGL, and WebGPU previews, set canvas.renderScale: true so the runtime adds Resolution scale after canvas sizing. The scale changes backing pixels from 1x to 2x without changing visible canvas size, and adding/enabling it requires targeted browser evidence that the canvas stays responsive at the selected scale.",
       "After enabling canvas.renderScale, verify that canvas preview stays responsive while dragging sliders and other high-frequency controls at the selected scale.",
       "Performance fixes for canvas.renderScale must preserve the selected visual quality; do not silently downsample, stretch a lower-resolution backing canvas, blur output, or clamp canvas.renderScale below the user's chosen value to pass budgets.",
       "Do not enable canvas.renderScale for DOM/SVG/vector-native previews; preserve vector fidelity through native vector rendering instead of raster supersampling.",
@@ -1058,7 +1107,8 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "Expensive renderers must cache decoded media, source pixels, glyph atlases, gradients, and other reusable inputs by media id, canvas size, and stable control keys.",
       "Slider drags and high-frequency controls must debounce or coalesce preview work, cancel stale async renders, and avoid re-decoding media on every control change.",
       "Performance matrices must declare rendererWorkload as none, simple-composition, text-output, vector-output, or pixel-output.",
-      "A full performance checkpoint must run with pnpm verify:perf when the first working app version exists, renderer/canvas/animation/export/timeline/layers change, canvas.renderScale or the Resolution scale retina slider is added/enabled, a bug that previously broke functionality is fixed, any performance optimization lands, or the user requests performance, lag, jank, animation speed, or drag/zoom stabilization work.",
+      "A full performance checkpoint must run with pnpm verify:perf only when the first working app version exists or the user requests performance, lag, jank, animation speed, drag/zoom stabilization work, or otherwise complains about performance.",
+      "Renderer, canvas, animation, export, timeline, layers, canvas.renderScale, bug fixes, and performance-sensitive control changes use targeted functional/browser checks first and targeted performance scenarios only for touched workload, viewport, or export paths.",
       "Performance fixes must preserve selected output and preview quality; do not reduce image quality, selected renderScale, export resolution, source media fidelity, or canvas backing pixels as the hidden way to pass budgets.",
       "When canvas or slider interactions lag, diagnose where the slowdown comes from before changing output quality: renderer technique, React update frequency, decoded media, shader/program setup, buffer uploads, layout work, async render cancellation, or animation scheduling.",
       "Renderer specs must include a Renderer Technique Decision Matrix with sourceRepresentation, productRepresentation, previewRenderer, exportRenderer, rendererWorkload, rendererStrategy, whyNotAlternativeStrategies, fidelityRisks, and performanceRisks.",
@@ -1138,6 +1188,7 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "Every visible controls-panel section title renders through the standard 36px collapsible header row with vertically centered text and the runtime collapse icon; generated apps must not hand-build section headers.",
       "Controls-panel section expand and collapse uses the standard runtime height/opacity animation; generated apps must not replace it with instant custom section visibility.",
       "Ordinary controls-panel section collapsed/expanded state persists as a runtime UI preference per app. It is not undo/redo state, not settings import/export state, and Reset controls must not clear it. Runtime technical Setup/settings sections and sticky footer Export sections are not collapsible.",
+      "Ordinary controls-panel section headers expose the runtime section reset action before the collapse button; it dispatches controls.resetTargets and restores only that section's control targets to their schema defaultValue.",
       "Ordinary controls-panel body sections use 8px top spacing and 24px bottom spacing for their control content. Runtime technical Setup/settings sections use 12px top and bottom spacing to match side padding. Sticky footer action sections keep their dedicated spacing.",
       "Broad section titles such as Flow, Icon, Shapes, Scene, Text, Typography, or Motion are only valid for small cohesive groups; use specific titles such as Flow Motion, Flow Geometry, Letter Burst, Shape Colors, Logo Glow, Logo Plate, or Text Block for larger groups.",
       "Section titles in one controls panel must be unique.",

package/templates/runtime/contracts/decision-contracts.test.ts

@@ -89,9 +89,10 @@ describe("Toolcraft template decision contract", () => {
     expect(rule?.desiredBehavior).toMatch(/canvas drag, pan, pinch, zoom, and radar\/center/i);
     expect(rule?.desiredBehavior).toMatch(/playback state/i);
     expect(rule?.desiredBehavior).toMatch(/first working version/i);
-    expect(rule?.desiredBehavior).toMatch(/renderer\/canvas\/animation\/export\/timeline\/layers/i);
-    expect(rule?.desiredBehavior).toMatch(/bug that previously broke functionality/i);
     expect(rule?.desiredBehavior).toMatch(/optimize performance/i);
+    expect(rule?.desiredBehavior).toMatch(/otherwise complains about performance/i);
+    expect(rule?.desiredBehavior).toMatch(/targeted functional\/browser checks/i);
+    expect(rule?.desiredBehavior).toMatch(/touched workload\/viewport\/export paths/i);
     expect(rule?.desiredBehavior).toMatch(/full performance checkpoint/i);
   });
 

package/templates/runtime/contracts/decision-contracts.ts

@@ -237,7 +237,7 @@ export const TOOLCRAFT_DECISION_CONTRACT = [
     currentConstraint:
       "Performance coverage currently asks every visible non-action control for a performance scenario.",
     desiredBehavior:
-      "Heavy workload controls get min/default/max workload coverage; ordinary controls get lightweight responsiveness coverage so they cannot hang or break input. Animated previews suspend or coalesce non-essential animation work during canvas drag, pan, pinch, zoom, and radar/center interactions without changing user playback state. A full performance checkpoint is required when the first working version of an app exists, when renderer/canvas/animation/export/timeline/layers change, when canvas.renderScale or the Resolution scale retina slider is added/enabled, after fixing a bug that previously broke functionality, after any performance optimization, and whenever the user asks to optimize performance, fix lag, remove jank, speed up animation, or stabilize drag/zoom. Performance fixes must preserve the selected render scale and must not pass budgets by silently downsampling, stretching a lower-resolution backing canvas, blurring output, or clamping canvas.renderScale below the user's chosen value. Browser performance tests read budgets from typed performance config and run sequentially for stable measurements.",
+      "Heavy workload controls get min/default/max workload coverage; ordinary controls get lightweight responsiveness coverage so they cannot hang or break input. Animated previews suspend or coalesce non-essential animation work during canvas drag, pan, pinch, zoom, and radar/center interactions without changing user playback state. A full performance checkpoint is required only when the first working version of an app exists, or whenever the user explicitly asks to optimize performance, fix lag, remove jank, speed up animation, stabilize drag/zoom, or otherwise complains about performance. Renderer, canvas, animation, export, timeline, layers, canvas.renderScale, bug fixes, and performance-sensitive controls need targeted functional/browser checks first and targeted performance scenarios only for touched workload/viewport/export paths. Performance fixes must preserve the selected render scale and must not pass budgets by silently downsampling, stretching a lower-resolution backing canvas, blurring output, or clamping canvas.renderScale below the user's chosen value. Browser performance tests read budgets from typed performance config and run sequentially for stable measurements.",
     enforcement: ["performance-validator", "browser-helper", "starter-agents"],
     id: "performance-coverage-levels",
     level: "invariant",

package/templates/runtime/react/controls-panel.test.tsx

@@ -1271,6 +1271,24 @@ describe("ControlsPanel", () => {
       });
     });
 
+    fireEvent.change(fontSizeInput, {
+      target: { value: "768" },
+    });
+    fireEvent.blur(fontSizeInput);
+
+    await waitFor(() => {
+      expect(JSON.parse(screen.getByTestId("font-value").textContent ?? "{}")).toEqual({
+        color: "#FFFFFF",
+        fontId: "roboto",
+        fontSize: 768,
+        fontWeight: "400",
+        letterSpacing: "wider",
+        lineHeight: "relaxed",
+        opacity: 100,
+        textCase: "uppercase",
+      });
+    });
+
     const colorHexInput = screen.getByLabelText("Color hex") as HTMLInputElement;
     fireEvent.change(colorHexInput, {
       target: { value: "#C1FF00" },
@@ -1286,7 +1304,7 @@ describe("ControlsPanel", () => {
       expect(JSON.parse(screen.getByTestId("font-value").textContent ?? "{}")).toEqual({
         color: "#C1FF00",
         fontId: "roboto",
-        fontSize: 24,
+        fontSize: 768,
         fontWeight: "400",
         letterSpacing: "wider",
         lineHeight: "relaxed",
@@ -3264,6 +3282,173 @@ describe("ControlsPanel", () => {
     expect(screen.getByTestId("enabled-value").textContent).toBe("true");
   });
 
+  it("resets only controls from the selected section header action", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                toneName: {
+                  defaultValue: "Soft",
+                  label: "Tone name",
+                  target: "tone.name",
+                  type: "text",
+                },
+              },
+              title: "Tone",
+            },
+            {
+              controls: {
+                prompt: {
+                  defaultValue: "Poster",
+                  label: "Prompt",
+                  target: "generation.prompt",
+                  type: "text",
+                },
+              },
+              title: "Output",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    fireEvent.change(screen.getByDisplayValue("Soft"), {
+      target: { value: "Sharp" },
+    });
+    fireEvent.change(screen.getByDisplayValue("Poster"), {
+      target: { value: "Banner" },
+    });
+
+    const toneHeader = screen
+      .getByText("Tone")
+      .closest<HTMLElement>('[data-slot="control-section-header"]');
+    const headerButtons = toneHeader?.querySelectorAll("button");
+
+    expect(headerButtons?.[0]?.getAttribute("data-control-section-reset-button")).toBe("");
+    expect(headerButtons?.[1]?.getAttribute("data-control-section-collapse-button")).toBe("");
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset Tone section" }));
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["tone.name"]).toBe("Soft");
+    expect(values["generation.prompt"]).toBe("Banner");
+    expect(container.querySelector('[data-control-section-reset-button]')).toBeTruthy();
+  });
+
+  it("renders collection actions as add/remove controls for runtime item arrays", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                colors: {
+                  defaultValue: [{ hex: "#DFFF1A" }, { hex: "#8CFF3A" }],
+                  itemControl: {
+                    defaultValue: { hex: "#C1FF00" },
+                    label: "Color",
+                    type: "color",
+                  },
+                  label: "Colors",
+                  minItems: 1,
+                  recommendedMaxItems: 2,
+                  target: "bead.colors",
+                  type: "collectionActions",
+                },
+              },
+              title: "Bead Colors",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    const addButton = screen.getByRole("button", { name: "Add Color" });
+    const removeButton = screen.getByRole("button", { name: "Remove Color" });
+    const collectionHeader = container.querySelector(
+      '[data-slot="collection-actions-control-header"]',
+    );
+    const colorGrid = container.querySelector(
+      '[data-slot="collection-actions-items-grid"]',
+    );
+
+    expect(collectionHeader?.textContent).toContain("Colors");
+    expect(collectionHeader?.lastElementChild?.contains(removeButton)).toBe(true);
+    expect(collectionHeader?.lastElementChild?.contains(addButton)).toBe(true);
+    expect(colorGrid).toBeTruthy();
+    expect(colorGrid?.children).toHaveLength(2);
+    expect(screen.queryByText("Color 1")).toBeNull();
+    expect(screen.queryByText("Color 2")).toBeNull();
+
+    fireEvent.click(addButton);
+    fireEvent.click(addButton);
+
+    let values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["bead.colors"]).toHaveLength(4);
+    expect(screen.queryByText("Color 4")).toBeNull();
+    expect(colorGrid?.children).toHaveLength(4);
+    expect((addButton as HTMLButtonElement).disabled).toBe(false);
+
+    fireEvent.click(removeButton);
+    fireEvent.click(removeButton);
+    fireEvent.click(removeButton);
+
+    values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["bead.colors"]).toHaveLength(1);
+    expect((removeButton as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("renders collection item controls beyond color lists", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                labels: {
+                  defaultValue: ["Alpha"],
+                  itemControl: {
+                    defaultValue: "New label",
+                    label: "Label",
+                    type: "text",
+                  },
+                  minItems: 1,
+                  target: "glyph.labels",
+                  type: "collectionActions",
+                },
+              },
+              title: "Glyph Labels",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    fireEvent.click(screen.getByRole("button", { name: "Add Label" }));
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["glyph.labels"]).toEqual(["Alpha", "New label"]);
+    expect(screen.getByDisplayValue("Alpha")).toBeTruthy();
+    expect(screen.getByDisplayValue("New label")).toBeTruthy();
+  });
+
   it("commits canvas size controls to runtime state on blur or Enter", () => {
     const { container } = renderControlsPanel();