@pixel-point/toolcraft 0.0.7 → 0.0.8

package/package.json

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

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

@@ -224,6 +224,12 @@ describe("Toolcraft template component contracts", () => {
     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, CollectionActions, Curves, AnchorGrid, ChannelMixer, Vector, or PanelActions control.",
     );
+    expect(contract.aiUsageRules).toContain(
+      "When a custom control owns a growable, removable, selectable, or reorderable runtime item set, its builtInFitCheck must explicitly check collectionActions and actions before choosing custom; this is based on the value model and user workflow, not on entity names such as masks or glyphs.",
+    );
+    expect(contract.aiUsageRules).toContain(
+      "Do not justify custom controls with icons, layout, styling, compactness, or custom buttons alone. The fit check must name the product interaction or value model that built-ins cannot express.",
+    );
     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.",
     );
@@ -254,6 +260,12 @@ describe("Toolcraft template component contracts", () => {
     expect(contract.aiUsageRules).toContain(
       "Do not use Actions for animation transport; Play, Pause, Resume, Restart, and Scrub belong to the top timeline when timeline behavior exists.",
     );
+    expect(contract.decisionCatalog?.layoutConstraints).toContain(
+      "When an Actions button group wraps below its label, the wrapped button row starts at the left edge of the control content instead of centering or staying right-aligned.",
+    );
+    expect(contract.aiUsageRules).toContain(
+      "When an Actions button group no longer fits beside its label and wraps to a second row, align the wrapped button row to the left.",
+    );
     expect(contract.aiUsageRules).toContain(
       'For local reset-like actions, use product-specific values such as "reset-current-layer" or "reset-palette" and handle them through ToolcraftApp onPanelAction; do not use a bare "reset" value unless the action intentionally runs controls.reset.',
     );
@@ -286,6 +298,10 @@ describe("Toolcraft template component contracts", () => {
       "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/);
+    expect(contract.aiUsageRules.join(" ")).toMatch(/FontPicker/);
+    expect(contract.aiUsageRules).toContain(
+      "Use FontPicker as the collection item control when each repeated item is a typography/text-style entity; do not split its font, color, opacity, size, case, letter-spacing, or line-height into sibling collection fields.",
+    );
   });
 
   it("documents Palette as a constrained design-token color control", () => {
@@ -568,22 +584,31 @@ describe("Toolcraft template component contracts", () => {
       'Pair renderer-owned output background color with export.includeBackground in one Background section directly before export settings. Use an equal-width inline row with the export.includeBackground Switch labeled "Include" on the left and the background Color parameter with label false on the right; each control occupies one half of the row.',
     );
     expect(color.aiUsageRules).toContain(
-      "Preview, PNG export, and video export must read the runtime background color value instead of hardcoding that background in CSS, Canvas fillStyle, or WebGL clearColor. export.includeBackground controls only PNG alpha; it must not make live preview, workspace canvas backing, or video transparent.",
+      "Preview, PNG export, and video export must read the runtime background color value instead of hardcoding that background in CSS, Canvas fillStyle, or WebGL clearColor. export.includeBackground controls live preview product background and PNG alpha; it must not make the Toolcraft canvas shell/backing or video output transparent.",
     );
     expect(color.aiUsageRules).toContain(
       "When one short numeric/text field and one Color field configure the same entity, keep them in one two-column inline layout group.",
     );
     expect(color.aiUsageRules).toContain(
-      'Mixed inline rows require visible labels on both controls. The required Background row is the only section-title-owned exception: use the Switch label "Include" and set the background Color control label to false. Color fields in other mixed rows must not be unlabeled.',
+      'Mixed inline rows require visible labels on both controls. The required Background row is the section-title-owned exception: use the Switch label "Include" and set the background Color control label to false. Palette variation color banks are the other exception when the group/section label already names the color bank.',
     );
     expect(color.aiUsageRules).toContain(
       "Plain Color popovers must not show opacity controls. If opacity is editable, use ColorOpacity instead.",
     );
     expect(color.aiUsageRules).toContain(
-      "Show visible labels for Color and ColorOpacity controls inside mixed sections that contain any non-color controls.",
+      "Decide color label visibility from the user's point of view. Omit labels for color banks that only add palette variety, such as Accent Shades, Bead Colors, or palette.accent1..5.",
+    );
+    expect(color.aiUsageRules).toContain(
+      "Make color label visibility a group-level decision: do not mix labeled and unlabeled items inside one semantic color bank.",
     );
     expect(color.aiUsageRules).toContain(
-      "Omit visible color field labels only when the section contains color controls and no other control types.",
+      "Keep visible labels when colors edit distinct user-facing entities or roles, such as Fill, Stroke, Background, Connector, Object, or Highlight.",
+    );
+    expect(color.aiUsageRules).toContain(
+      "A color bank can share a section with distribution controls such as Spread, Mix, or Randomness and still keep each color item unlabeled when the section title names the palette context.",
+    );
+    expect(color.aiUsageRules).toContain(
+      "If a multi-color bank has an odd trailing plain Color, keep that last Color at half width; only ColorOpacity or intentionally full-width compound controls occupy a full row.",
     );
     expect(gradient.aiUsageRules).toContain(
       "Gradient is a compound control; acceptance must prove gradient.gradientType, gradient.angle, gradient.stops.position, gradient.stops.color, and gradient.stops.opacity all affect the product output when visible.",
@@ -600,6 +625,9 @@ describe("Toolcraft template component contracts", () => {
     expect(fontPicker.aiUsageRules).toContain(
       'Do not recreate FontPicker with a plain Select plus separate sliders; use type: "fontPicker" so the popup mechanics and footer controls stay intact.',
     );
+    expect(fontPicker.aiUsageRules).toContain(
+      "FontPicker standard/default text color is #FFFFFF with opacity 100; omit color/opacity or use those values unless the prompt or reference explicitly requires a different initial text color.",
+    );
     expect(fontPicker.aiUsageRules).toContain(
       "Any product text controlled by FontPicker must render fontId, fontWeight, fontSize, letterSpacing, lineHeight, textCase, color, and opacity in preview and export; do not leave typography values as panel-only runtime state.",
     );
@@ -743,14 +771,20 @@ describe("Toolcraft template component contracts", () => {
       "Custom renderers must define performance budgets for media import, preview updates, control drags, and export/copy before implementation.",
     );
     expect(contract.aiUsageRules).toContain(
-      "Controls that change renderer workload, such as Char Size, Grid Density, Matrix Scale, Sample Count, Resolution, Blur Radius, Iterations, Particle Count, or Quality, must be tested at min, default, and max values.",
+      "Controls that change renderer workload by changing output dimensions, element count, density, sample count, iteration count, blur/filter radius, shader branch cost, media processing, text layout, or export quality must be tested at min, default, and max values.",
     );
     expect(contract.aiUsageRules).toContain(
-      "Hash differs is not enough for workload controls; tests must assert semantic direction, for example smaller Char Size increases glyph/cell density and larger Char Size decreases it.",
+      "For workload control scenarios, stressFixture is the tested control value. If the app has an independent heavy baseline such as large media, long text, many items, high render scale, or dense source state, declare workloadFixture and apply it before the measured control interaction.",
+    );
+    expect(contract.aiUsageRules).toContain(
+      "Hash differs is not enough for workload controls; tests must assert semantic direction, such as density increasing item count or size changes reducing/increasing rendered cells.",
     );
     expect(contract.aiUsageRules).toContain(
       "Performance tests must use representative fixtures and the same renderer/export path as the running app, not only tiny 32px fixtures or isolated helper state.",
     );
+    expect(contract.aiUsageRules).toContain(
+      'Media-import workload fixtures and media workload baselines must use fixture kind "media" with numeric width and height at least 1920x1080-equivalent; 640x480 preview fixtures cannot satisfy upload, effect-control, or image-processing performance coverage.',
+    );
     expect(contract.aiUsageRules).toContain(
       "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.",
     );
@@ -790,8 +824,19 @@ describe("Toolcraft template component contracts", () => {
     expect(contract.aiUsageRules).toContain(
       'productRepresentation "mixed" is valid only when rendererTechnique.layers proves at least two different content families.',
     );
+    expect(contract.aiUsageRules).toContain(
+      "Custom renderer apps must declare rendererPipeline with render passes, cache keys, execution location, preview/export quality, and interaction invalidation before implementation.",
+    );
+    expect(contract.aiUsageRules).toContain(
+      "Render Pipeline Inventory must explain which runtime targets invalidate each expensive pass; high-frequency interactions such as animation frames, drag, zoom, pan, timeline playback, and mask movement must not invalidate upstream decode/preprocess/pixel-transform work unless that target truly changes the upstream result.",
+    );
+    expect(contract.aiUsageRules).toContain(
+      "Cache-sensitive render passes such as decode, preprocess, pixel-transform, text-layout, rasterize, and composite must declare cache keys so tests can reject full recomputation on every control change.",
+    );
     expect(contract.aiUsageRules.join("\n")).toMatch(/rendererTechnique/);
     expect(contract.aiUsageRules.join("\n")).toMatch(/rendererTechnique\.layers/);
+    expect(contract.aiUsageRules.join("\n")).toMatch(/rendererPipeline/);
+    expect(contract.aiUsageRules.join("\n")).toMatch(/Render Pipeline Inventory/);
     expect(contract.aiUsageRules.join("\n")).toMatch(/sourceRepresentation/);
     expect(contract.aiUsageRules.join("\n")).toMatch(/productRepresentation/);
     expect(contract.aiUsageRules.join("\n")).toMatch(/previewRenderer/);
@@ -809,11 +854,14 @@ describe("Toolcraft template component contracts", () => {
       "Text-output and vector-output visible previews must preserve native output fidelity. Do not render a low-resolution offscreen canvas or texture and upscale it to the product size.",
     );
     expect(contract.aiUsageRules).toContain(
-      "Pixel-output renderers must use WebGL or WebGPU even when the scene is static.",
+      "Pixel-output renderers must treat WebGL/WebGPU as the default candidate even when the scene is static; Canvas 2D is allowed only when measured worst-case evidence shows the CPU path preserves quality and remains responsive.",
     );
     expect(contract.aiUsageRules).toContain(
       "Procedural pixel renderers, shader-like effects, animated mesh gradients, and large exportable previews should use WebGL or WebGPU for pixel work instead of main-thread ImageData loops.",
     );
+    expect(contract.aiUsageRules).toContain(
+      "Detail-heavy Canvas 2D pixel/media renderers may stay on CPU only when rendererTechnique records measured stress evidence for rejecting WebGL/WebGPU; if the heavy media stress fails, move pixel work to GPU instead of lowering quality.",
+    );
     expect(contract.aiUsageRules).toContain(
       "WebGL and WebGPU renderers must initialize contexts, programs, shaders, pipelines, textures, and large buffers once, then update uniforms or stable buffers when controls change.",
     );
@@ -830,11 +878,14 @@ describe("Toolcraft template component contracts", () => {
       "Animated preview renderers must suspend or coalesce non-essential animation work while the user drags, pans, pinches, zooms, or centers the canvas viewport, then resume from the correct timeline or autonomous time without changing the user's play/pause state.",
     );
     expect(contract.aiUsageRules).toContain(
-      "If a generated app uses ImageData, getImageData, or putImageData for procedural output, performance validation must fail unless the renderer is converted to GPU rendering or the CPU path is removed.",
+      "If a generated app uses ImageData, getImageData, or putImageData for procedural output, performance validation must fail unless rendererTechnique records measured WebGL/WebGPU comparison evidence that the CPU path preserves quality and responsiveness, or the renderer is moved to GPU.",
     );
     expect(contract.aiUsageRules).toContain(
       "Performance matrices must declare rendererStrategy so tests can distinguish none, dom, svg, canvas-2d, webgl, and webgpu renderer paths.",
     );
+    expect(contract.aiUsageRules).toContain(
+      "If a renderer cannot meet the budget, first optimize renderer technique, caching, invalidation, scheduling, and critical-path work. Only change exposed product ranges, work units, or controls after recording measured evidence that the requested quality ceiling is impossible; do not silently reduce product quality to pass budgets.",
+    );
   });
 
   it("documents reference runtime clone mode as a tested composition contract", () => {
@@ -1156,10 +1207,10 @@ describe("Toolcraft template component contracts", () => {
       'Product-output apps must expose a dedicated "Background" section directly before the first export settings section. With PNG export that first section is Image Export; with video-only export it is Video Export.',
     );
     expect(contract.aiUsageRules).toContain(
-      "Product-output apps must pass the includeBackground runtime value to createToolcraftPngExportCanvas only for PNG alpha.",
+      "Product-output apps must pass the includeBackground runtime value to createToolcraftPngExportCanvas for PNG alpha and call shouldIncludeToolcraftPreviewBackground(state) for live preview product background.",
     );
     expect(contract.aiUsageRules).toContain(
-      "PNG export must use createToolcraftPngExportCanvas so background transparency and selected image dimensions or retina fallback are applied consistently without making live preview, workspace canvas backing, or video transparent.",
+      "PNG export must use createToolcraftPngExportCanvas so background transparency and selected image dimensions or retina fallback are applied consistently; turning Include off makes preview product background and PNG alpha transparent without hiding the Toolcraft canvas backing or video background.",
     );
     expect(contract.aiUsageRules).toContain(
       "Video export must keep product background and use getToolcraftRetinaExportSize for retina dimensions.",
@@ -1184,15 +1235,33 @@ describe("Toolcraft template component contracts", () => {
   it("documents file upload ownership across single-layer and multi-layer apps", () => {
     const contract = getToolcraftComponentContract("fileDrop");
 
-    expect(contract.commands).toEqual(["media.delete", "media.import"]);
+    expect(contract.commands).toEqual(["media.delete", "media.import", "media.reorder"]);
+    expect(contract.aiUsageRules).toContain(
+      'Use fileDrop with assetKind: "image" for image-only source media and assetKind: "file" for arbitrary uploaded files.',
+    );
     expect(contract.aiUsageRules).toContain(
       "In single-layer apps, the runtime shows the uploaded image as the fileDrop preview and provides the clear action.",
     );
+    expect(contract.aiUsageRules).toContain(
+      "In file mode, the runtime shows uploaded files as a sortable list with paperclip icons, file names, remove buttons, and --border/5 separators.",
+    );
+    expect(contract.aiUsageRules).toContain(
+      "In single-layer apps, global Reset controls and section reset must remove uploaded fileDrop source media and return the fileDrop target to defaultValue.",
+    );
     expect(contract.aiUsageRules).toContain(
       "Use fileDrop with multiple: true when the app needs several uploaded images as one source set; do not build a custom thumbnail uploader for this.",
     );
     expect(contract.aiUsageRules).toContain(
-      "When multiple uploaded images are present, the runtime appends media, shows a four-column preview grid, puts the add-more tile last, and exposes per-image removal.",
+      "When multiple uploaded images are present, the runtime appends media, shows a sortable four-column preview grid, puts the add-more tile last, and exposes per-image removal.",
+    );
+    expect(contract.aiUsageRules).toContain(
+      "Canvas drops route to the first visible matching fileDrop target by asset kind: image files prefer image uploaders, non-image files prefer file uploaders, and file uploaders accept images only when no image uploader matches.",
+    );
+    expect(contract.aiUsageRules).toContain(
+      "Dragging thumbnails reorders runtime mediaAssets; preview, export, and renderer mapping must consume that media order instead of maintaining a separate product-only order.",
+    );
+    expect(contract.aiUsageRules).toContain(
+      "Do not create custom upload buttons, file lists, or file sorting for generic source uploads when fileDrop can represent the source set.",
     );
     expect(contract.aiUsageRules).toContain(
       "In multi-layer apps, deletion and visibility belong to the Layers panel; fileDrop remains an upload target.",
@@ -1226,6 +1295,9 @@ describe("Toolcraft template component contracts", () => {
     expect(contract.aiUsageRules).toContain(
       "Render multiple related color fields in one section with at most two colors per row.",
     );
+    expect(contract.aiUsageRules).toContain(
+      "If a multi-color bank has an odd trailing plain Color, keep that last Color at half width; only ColorOpacity or intentionally full-width compound controls occupy a full row.",
+    );
   });
 
   it("documents CodeTextarea as generic multiline text input", () => {

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

@@ -375,6 +375,7 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       layoutConstraints: [
         "Keep local actions close to the entity they affect.",
         "Keep action labels short and scoped by the section title; prefer Randomize, Clear, Sort, Normalize, Duplicate, or Reset when the section already names the target.",
+        "When an Actions button group wraps below its label, the wrapped button row starts at the left edge of the control content instead of centering or staying right-aligned.",
       ],
       requiredAcceptance: [
         "Prove each action dispatches the intended command or product side effect for the nearby entity only.",
@@ -388,6 +389,7 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "Do not use Actions for final product delivery actions; use sticky panelActions for Export, Copy, Download, Generate, or Apply.",
       "Do not use Actions for global reset; the controls panel header owns global reset.",
       "Do not use Actions for animation transport; Play, Pause, Resume, Restart, and Scrub belong to the top timeline when timeline behavior exists.",
+      "When an Actions button group no longer fits beside its label and wraps to a second row, align the wrapped button row to the left.",
       'For local reset-like actions, use product-specific values such as "reset-current-layer" or "reset-palette" and handle them through ToolcraftApp onPanelAction; do not use a bare "reset" value unless the action intentionally runs controls.reset.',
       "Acceptance and browser tests must click each Actions button and prove the product output or runtime state for the nearby entity changed.",
     ],
@@ -435,7 +437,8 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "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.",
+      "CollectionActions item controls use built-in controls whenever possible, such as Color, ColorOpacity, TextInput, Select, Segmented, Slider, Switch, Checkbox, RangeInput, or FontPicker.",
+      "Use FontPicker as the collection item control when each repeated item is a typography/text-style entity; do not split its font, color, opacity, size, case, letter-spacing, or line-height into sibling collection fields.",
       "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.",
@@ -501,8 +504,8 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "Video export browser coverage must load the exported blob metadata and prove video.duration matches the edited runtime timeline duration; blobSize/blobType checks alone are not enough.",
       "Video export must report frame-based progress through reportProgress during render/encode steps. PNG export should report phase progress for render, blob, and handoff when those phases are asynchronous.",
       'Product-output apps must expose a dedicated "Background" section directly before the first export settings section. With PNG export that first section is Image Export; with video-only export it is Video Export.',
-      "Product-output apps must pass the includeBackground runtime value to createToolcraftPngExportCanvas only for PNG alpha.",
-      "PNG export must use createToolcraftPngExportCanvas so background transparency and selected image dimensions or retina fallback are applied consistently without making live preview, workspace canvas backing, or video transparent.",
+      "Product-output apps must pass the includeBackground runtime value to createToolcraftPngExportCanvas for PNG alpha and call shouldIncludeToolcraftPreviewBackground(state) for live preview product background.",
+      "PNG export must use createToolcraftPngExportCanvas so background transparency and selected image dimensions or retina fallback are applied consistently; turning Include off makes preview product background and PNG alpha transparent without hiding the Toolcraft canvas backing or video background.",
       "Video export must keep product background and use getToolcraftRetinaExportSize for retina dimensions.",
       "Copy PNG can be a secondary action when clipboard output is useful, but copy does not replace export.",
       "Add Copy PNG as a secondary action only when the prompt/reference includes clipboard output or the product clearly benefits from paste/share workflows.",
@@ -621,7 +624,8 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       ],
       layoutConstraints: [
         "Plain Color controls may render two per row only when no opacity is present.",
-        "Color fields in mixed sections need visible labels.",
+        "Odd trailing plain Color controls in a multi-color bank keep the same half-width footprint as paired colors.",
+        "Color label visibility depends on user usefulness: palette variation banks omit per-item labels; distinct color roles keep labels.",
       ],
       requiredAcceptance: [
         "Prove the selected color affects product output, preview, or export.",
@@ -633,18 +637,21 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "Keep a color inside a section when it configures the same entity as nearby controls. Example: Square 1 (Right) contains Connections, Hover radius, and Color in one section.",
       "Use a standalone color section only when the color itself is the whole semantic section; the section title must describe the product role such as Background, Object, Connector, Accent, Gradient, or Brand.",
       "When color belongs to the same object or effect as nearby controls, keep it inside that section and use a concise field label that is unambiguous in context, such as Color in a Square section or Symbol color in a mixed Style section.",
-      "Show visible labels for Color and ColorOpacity controls inside mixed sections that contain any non-color controls.",
-      "Omit visible color field labels only when the section contains color controls and no other control types.",
+      "Decide color label visibility from the user's point of view. Omit labels for color banks that only add palette variety, such as Accent Shades, Bead Colors, or palette.accent1..5.",
+      "Make color label visibility a group-level decision: do not mix labeled and unlabeled items inside one semantic color bank.",
+      "Keep visible labels when colors edit distinct user-facing entities or roles, such as Fill, Stroke, Background, Connector, Object, or Highlight.",
+      "A color bank can share a section with distribution controls such as Spread, Mix, or Randomness and still keep each color item unlabeled when the section title names the palette context.",
       "The standalone default applies only to color-only sections; mixed semantic sections keep color grouped with nearby controls.",
       "Never use generic Color or Colors as a generated section title. If no meaningful color role exists and the colors are just basic colors, use a neutral section title such as Appearance instead of omitting the title.",
       "Do not split a grouped object section into a separate generated Color section; if the color role is unclear, ask the user before implementation.",
       "When one short numeric/text field and one Color field configure the same entity, keep them in one two-column inline layout group.",
-      'Mixed inline rows require visible labels on both controls. The required Background row is the only section-title-owned exception: use the Switch label "Include" and set the background Color control label to false. Color fields in other mixed rows must not be unlabeled.',
+      'Mixed inline rows require visible labels on both controls. The required Background row is the section-title-owned exception: use the Switch label "Include" and set the background Color control label to false. Palette variation color banks are the other exception when the group/section label already names the color bank.',
       "Plain Color popovers must not show opacity controls. If opacity is editable, use ColorOpacity instead.",
       "Product-output apps always expose renderer-owned output background color as a schema color target such as appearance.background or scene.background.",
       'Pair renderer-owned output background color with export.includeBackground in one Background section directly before export settings. Use an equal-width inline row with the export.includeBackground Switch labeled "Include" on the left and the background Color parameter with label false on the right; each control occupies one half of the row.',
-      "Preview, PNG export, and video export must read the runtime background color value instead of hardcoding that background in CSS, Canvas fillStyle, or WebGL clearColor. export.includeBackground controls only PNG alpha; it must not make live preview, workspace canvas backing, or video transparent.",
+      "Preview, PNG export, and video export must read the runtime background color value instead of hardcoding that background in CSS, Canvas fillStyle, or WebGL clearColor. export.includeBackground controls live preview product background and PNG alpha; it must not make the Toolcraft canvas shell/backing or video output transparent.",
       "Render multiple related color fields in one section with at most two colors per row.",
+      "If a multi-color bank has an odd trailing plain Color, keep that last Color at half width; only ColorOpacity or intentionally full-width compound controls occupy a full row.",
     ],
   },
   gradient: {
@@ -725,6 +732,7 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "FontPicker owns the font preview select, virtualized font popup, category filters, search, preview loading, font-weight select, font-size input, text-case select, text color/opacity control, letter-spacing slider, and line-height slider.",
       "Do not recreate FontPicker with a plain Select plus separate sliders; use type: \"fontPicker\" so the popup mechanics and footer controls stay intact.",
       "Use one object value with fontId, fontWeight, fontSize, letterSpacing, lineHeight, textCase, color, and opacity. Keep typography renderers wired to all eight parts.",
+      "FontPicker standard/default text color is #FFFFFF with opacity 100; omit color/opacity or use those values unless the prompt or reference explicitly requires a different initial text color.",
       "Any product text controlled by FontPicker must render fontId, fontWeight, fontSize, letterSpacing, lineHeight, textCase, color, and opacity in preview and export; do not leave typography values as panel-only runtime state.",
       "FontPicker is an atomic compound typography control. Do not split any owned typography part into a neighboring schema control for the same product text entity.",
       "Do not put a help tooltip on FontPicker just to list its owned fields. If the section title and FontPicker labels already make the text target clear, omit description.",
@@ -863,20 +871,27 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       ],
       layoutConstraints: [
         "FileDrop lives in the controls panel; single-layer apps use its preview and clear behavior.",
-        "When fileDrop has multiple: true and more than one image is present, the runtime renders a four-column thumbnail grid with the add-more tile last.",
+        "When fileDrop has multiple: true and more than one image is present, the runtime renders a sortable four-column thumbnail grid with the add-more tile last.",
+        "When fileDrop has assetKind: file, the runtime renders a sortable file list with a paperclip icon, filename, remove button, and row separators using --border/5.",
       ],
       requiredAcceptance: [
-        "Prove file import changes media state and product output; prove clear removes source material.",
+        "Prove file import changes media state and product output; prove clear, reorder, and section/global reset update source material.",
       ],
     }),
     aiUsageRules: [
       "Use fileDrop for source material uploads in the controls panel, not on the canvas.",
+      'Use fileDrop with assetKind: "image" for image-only source media and assetKind: "file" for arbitrary uploaded files.',
       "In single-layer apps, the runtime shows the uploaded image as the fileDrop preview and provides the clear action.",
+      "In file mode, the runtime shows uploaded files as a sortable list with paperclip icons, file names, remove buttons, and --border/5 separators.",
+      "In single-layer apps, global Reset controls and section reset must remove uploaded fileDrop source media and return the fileDrop target to defaultValue.",
       "Use fileDrop with multiple: true when the app needs several uploaded images as one source set; do not build a custom thumbnail uploader for this.",
-      "When multiple uploaded images are present, the runtime appends media, shows a four-column preview grid, puts the add-more tile last, and exposes per-image removal.",
+      "When multiple uploaded images are present, the runtime appends media, shows a sortable four-column preview grid, puts the add-more tile last, and exposes per-image removal.",
+      "Canvas drops route to the first visible matching fileDrop target by asset kind: image files prefer image uploaders, non-image files prefer file uploaders, and file uploaders accept images only when no image uploader matches.",
+      "Dragging thumbnails reorders runtime mediaAssets; preview, export, and renderer mapping must consume that media order instead of maintaining a separate product-only order.",
+      "Do not create custom upload buttons, file lists, or file sorting for generic source uploads when fileDrop can represent the source set.",
       "In multi-layer apps, deletion and visibility belong to the Layers panel; fileDrop remains an upload target.",
     ],
-    commands: ["media.delete", "media.import"],
+    commands: ["media.delete", "media.import", "media.reorder"],
   },
   imagePicker: {
     ...control("imagePicker", "ImagePicker", "standalone", "component-owned"),
@@ -978,6 +993,8 @@ 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, CollectionActions, Curves, AnchorGrid, ChannelMixer, Vector, or PanelActions control.",
+      "When a custom control owns a growable, removable, selectable, or reorderable runtime item set, its builtInFitCheck must explicitly check collectionActions and actions before choosing custom; this is based on the value model and user workflow, not on entity names such as masks or glyphs.",
+      "Do not justify custom controls with icons, layout, styling, compactness, or custom buttons alone. The fit check must name the product interaction or value model that built-ins cannot express.",
       "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.",
@@ -1101,9 +1118,11 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
   performanceAcceptance: {
     aiUsageRules: [
       "Custom renderers must define performance budgets for media import, preview updates, control drags, and export/copy before implementation.",
-      "Controls that change renderer workload, such as Char Size, Grid Density, Matrix Scale, Sample Count, Resolution, Blur Radius, Iterations, Particle Count, or Quality, must be tested at min, default, and max values.",
-      "Hash differs is not enough for workload controls; tests must assert semantic direction, for example smaller Char Size increases glyph/cell density and larger Char Size decreases it.",
+      "Controls that change renderer workload by changing output dimensions, element count, density, sample count, iteration count, blur/filter radius, shader branch cost, media processing, text layout, or export quality must be tested at min, default, and max values.",
+      "For workload control scenarios, stressFixture is the tested control value. If the app has an independent heavy baseline such as large media, long text, many items, high render scale, or dense source state, declare workloadFixture and apply it before the measured control interaction.",
+      "Hash differs is not enough for workload controls; tests must assert semantic direction, such as density increasing item count or size changes reducing/increasing rendered cells.",
       "Performance tests must use representative fixtures and the same renderer/export path as the running app, not only tiny 32px fixtures or isolated helper state.",
+      "Media-import workload fixtures and media workload baselines must use fixture kind \"media\" with numeric width and height at least 1920x1080-equivalent; 640x480 preview fixtures cannot satisfy upload, effect-control, or image-processing performance coverage.",
       "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.",
@@ -1114,6 +1133,9 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "Renderer specs must include a Renderer Technique Decision Matrix with sourceRepresentation, productRepresentation, previewRenderer, exportRenderer, rendererWorkload, rendererStrategy, whyNotAlternativeStrategies, fidelityRisks, and performanceRisks.",
       "Custom renderer apps must mirror the Renderer Technique Decision Matrix in typed rendererTechnique config so validation can reject contradictory renderer choices.",
       "Custom renderer specs must include a Renderer Layer Inventory and mirror it in typed rendererTechnique.layers so dense raster backgrounds cannot silently rasterize semantic foreground output.",
+      "Custom renderer apps must declare rendererPipeline with render passes, cache keys, execution location, preview/export quality, and interaction invalidation before implementation.",
+      "Render Pipeline Inventory must explain which runtime targets invalidate each expensive pass; high-frequency interactions such as animation frames, drag, zoom, pan, timeline playback, and mask movement must not invalidate upstream decode/preprocess/pixel-transform work unless that target truly changes the upstream result.",
+      "Cache-sensitive render passes such as decode, preprocess, pixel-transform, text-layout, rasterize, and composite must declare cache keys so tests can reject full recomputation on every control change.",
       "Semantic foreground output such as product lines, shapes, icons, text, object bounds, and meaningful markers should use DOM or SVG by default; dense raster backgrounds do not justify rasterizing low-count foreground geometry or text.",
       "Editing handles must be DOM/SVG overlays, excluded from export, and written through runtime state instead of being drawn into the product raster layer.",
       "Product foreground and editing handle renderer layers must declare uiSelector so browser tests can verify the visible layer exists.",
@@ -1122,17 +1144,18 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "Do not switch renderer technology just because it seems more modern or faster. Preview and export may use different renderers only when the decision matrix explains why and export/copy remains product-quality.",
       "Choose renderer workload by product fidelity before choosing rendering technology: ASCII, glyph grids, code art, subtitles, typography, or monospace text products are text-output unless the product intentionally rasterizes them into per-pixel effects.",
       "Text-output and vector-output visible previews must preserve native output fidelity. Do not render a low-resolution offscreen canvas or texture and upscale it to the product size.",
-      "Pixel-output renderers must use WebGL or WebGPU even when the scene is static.",
+      "Pixel-output renderers must treat WebGL/WebGPU as the default candidate even when the scene is static; Canvas 2D is allowed only when measured worst-case evidence shows the CPU path preserves quality and remains responsive.",
       "Procedural pixel renderers, shader-like effects, animated mesh gradients, and large exportable previews should use WebGL or WebGPU for pixel work instead of main-thread ImageData loops.",
+      "Detail-heavy Canvas 2D pixel/media renderers may stay on CPU only when rendererTechnique records measured stress evidence for rejecting WebGL/WebGPU; if the heavy media stress fails, move pixel work to GPU instead of lowering quality.",
       "WebGL and WebGPU renderers must initialize contexts, programs, shaders, pipelines, textures, and large buffers once, then update uniforms or stable buffers when controls change.",
       "For keyframe or playback renderers, texture upload and media decode must be keyed to source media/resource changes, not to timeline time or evaluated settings. Timeline-only updates must reuse decoded media and existing GPU resources.",
       "Do not create WebGL/WebGPU contexts, shader programs, textures, or requestAnimationFrame loops directly in the React render path.",
       "Animation loops must cancel scheduled frames during cleanup.",
       "Animated preview renderers must suspend or coalesce non-essential animation work while the user drags, pans, pinches, zooms, or centers the canvas viewport, then resume from the correct timeline or autonomous time without changing the user's play/pause state.",
-      "If a generated app uses ImageData, getImageData, or putImageData for procedural output, performance validation must fail unless the renderer is converted to GPU rendering or the CPU path is removed.",
+      "If a generated app uses ImageData, getImageData, or putImageData for procedural output, performance validation must fail unless rendererTechnique records measured WebGL/WebGPU comparison evidence that the CPU path preserves quality and responsiveness, or the renderer is moved to GPU.",
       "Performance matrices must declare rendererStrategy so tests can distinguish none, dom, svg, canvas-2d, webgl, and webgpu renderer paths.",
       "Browser verification must interact with the actual UI, exercise worst-case control values, and fail if the app freezes, creates runaway render loops, drops canvas zoom/offset, or misses the performance budget.",
-      "If a renderer cannot meet the budget, reduce the work units, clamp the control range, move work off the critical path, or remove the control.",
+      "If a renderer cannot meet the budget, first optimize renderer technique, caching, invalidation, scheduling, and critical-path work. Only change exposed product ranges, work units, or controls after recording measured evidence that the requested quality ceiling is impossible; do not silently reduce product quality to pass budgets.",
     ],
     capabilities: ["performance-budgets", "workload-control-tests"],
     commands: [],

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

@@ -177,7 +177,7 @@ export const TOOLCRAFT_DECISION_CONTRACT = [
     currentConstraint:
       "Product-output apps expose final output delivery through sticky footer panelActions.",
     desiredBehavior:
-      'Static products include Export PNG plus an "Image Export" section for format and 2K/4K/8K resolution; animated products include Export Video and Export PNG plus "Video Export" settings. Copy can be secondary, but it does not replace export. Product apps expose a required "Background" section directly before export settings, with a Switch labeled "Include" and a background color control with label false in one equal-width row. Standard export helpers own runtime PNG transparency and selected image dimensions or retina fallback, while live preview, workspace canvas backing, and video keep the background.',
+      'Static products include Export PNG plus an "Image Export" section for format and 2K/4K/8K resolution; animated products include Export Video and Export PNG plus "Video Export" settings. Copy can be secondary, but it does not replace export. Product apps expose a required "Background" section directly before export settings, with a Switch labeled "Include" and a background color control with label false in one equal-width row. Standard helpers own runtime PNG transparency, live preview product-background visibility, and selected image dimensions or retina fallback, while Toolcraft canvas backing and video keep the background.',
     enforcement: ["acceptance-validator", "performance-validator", "browser-helper", "starter-agents"],
     id: "output-export-required",
     level: "invariant",

package/templates/runtime/export/export.test.ts

@@ -8,6 +8,7 @@ import {
   getToolcraftRetinaExportPixelRatio,
   getToolcraftRetinaExportSize,
   shouldIncludeToolcraftExportBackground,
+  shouldIncludeToolcraftPreviewBackground,
 } from "./export";
 
 function createState(schema = defineToolcraft({ canvas: { enabled: true }, panels: {} })): ToolcraftState {
@@ -89,6 +90,36 @@ describe("Toolcraft export helpers", () => {
     expect(shouldIncludeToolcraftExportBackground({ format: "video", schema })).toBe(true);
   });
 
+  it("uses include-background runtime state for live preview background", () => {
+    const state = createState();
+
+    expect(shouldIncludeToolcraftPreviewBackground({ state })).toBe(true);
+
+    state.values["export.includeBackground"] = false;
+    expect(shouldIncludeToolcraftPreviewBackground({ state })).toBe(false);
+
+    state.values["export.includeBackground"] = true;
+    expect(shouldIncludeToolcraftPreviewBackground({ state })).toBe(true);
+  });
+
+  it("keeps video export background independent from preview include state", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      export: {
+        png: {
+          background: "transparent",
+        },
+      },
+      panels: {},
+    });
+    const state = createState(schema);
+
+    state.values["export.includeBackground"] = false;
+
+    expect(shouldIncludeToolcraftPreviewBackground({ state })).toBe(false);
+    expect(shouldIncludeToolcraftExportBackground({ format: "video", schema })).toBe(true);
+  });
+
   it("uses at least 2x pixel ratio for retina export", () => {
     expect(getToolcraftRetinaExportPixelRatio(1)).toBe(2);
     expect(getToolcraftRetinaExportPixelRatio(1.5)).toBe(2);

package/templates/runtime/export/export.ts

@@ -16,6 +16,11 @@ export type ToolcraftExportBackgroundOptions = {
   schema: ResolvedToolcraftAppSchema;
 };
 
+export type ToolcraftPreviewBackgroundOptions = {
+  includeBackgroundTarget?: string;
+  state: ToolcraftState;
+};
+
 export type ToolcraftExportSizeOptions = {
   devicePixelRatio?: number;
   state: ToolcraftState;
@@ -129,6 +134,42 @@ export function shouldIncludeToolcraftExportBackground({
   return schema.export.png.background !== "transparent";
 }
 
+export function shouldIncludeToolcraftPreviewBackground({
+  includeBackgroundTarget = "export.includeBackground",
+  state,
+}: ToolcraftPreviewBackgroundOptions): boolean {
+  const includeBackgroundValue = state.values[includeBackgroundTarget];
+
+  if (typeof includeBackgroundValue === "boolean") {
+    return includeBackgroundValue;
+  }
+
+  if (typeof includeBackgroundValue === "string") {
+    const normalizedValue = includeBackgroundValue.trim().toLowerCase();
+
+    if (
+      normalizedValue === "false" ||
+      normalizedValue === "off" ||
+      normalizedValue === "no" ||
+      normalizedValue === "transparent" ||
+      normalizedValue === "exclude"
+    ) {
+      return false;
+    }
+
+    if (
+      normalizedValue === "true" ||
+      normalizedValue === "on" ||
+      normalizedValue === "yes" ||
+      normalizedValue === "include"
+    ) {
+      return true;
+    }
+  }
+
+  return true;
+}
+
 export function createToolcraftPngExportCanvas({
   background = "#000000",
   canvasFactory = () => document.createElement("canvas"),

package/templates/runtime/react/canvas-shell.test.tsx

@@ -43,7 +43,13 @@ function CanvasStateProbe() {
       <span data-testid="canvas-zoom">{state.canvas.zoom}</span>
       <span data-testid="media-count">{state.mediaAssets.length}</span>
       <span data-testid="media-size">
-        {state.mediaAssets[0]?.size.width ?? 0},{state.mediaAssets[0]?.size.height ?? 0}
+        {state.mediaAssets[0]?.size?.width ?? 0},{state.mediaAssets[0]?.size?.height ?? 0}
+      </span>
+      <span data-testid="media-targets">
+        {state.mediaAssets.map((asset) => asset.sourceTarget ?? "none").join(",")}
+      </span>
+      <span data-testid="media-kinds">
+        {state.mediaAssets.map((asset) => asset.assetKind ?? "image").join(",")}
       </span>
     </>
   );
@@ -376,6 +382,76 @@ describe("CanvasShell", () => {
     expect(screen.getByRole("button", { name: "Select material.png" })).toBeTruthy();
   });
 
+  it("routes canvas drops to image and file upload targets by asset kind", async () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { width: 300, height: 200, unit: "px" },
+        upload: true,
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                files: {
+                  assetKind: "file",
+                  label: "Files",
+                  multiple: true,
+                  target: "source.files",
+                  type: "fileDrop",
+                },
+                image: {
+                  label: "Image",
+                  target: "source.image",
+                  type: "fileDrop",
+                },
+              },
+              title: "Sources",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    render(
+      <ToolcraftRoot schema={schema}>
+        <div style={{ height: 640, position: "relative", width: 640 }}>
+          <CanvasShell />
+          <CanvasStateProbe />
+        </div>
+      </ToolcraftRoot>,
+    );
+
+    const canvas = screen.getByRole("application", { name: "Canvas viewport" });
+    const imageFile = new File(["image"], "material.png", { type: "image/png" });
+    const textFile = new File(["notes"], "notes.txt", { type: "text/plain" });
+
+    fireEvent.drop(canvas, {
+      clientX: 0,
+      clientY: 0,
+      dataTransfer: {
+        files: [imageFile, textFile],
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("media-count").textContent).toBe("2");
+    });
+
+    expect(screen.getByTestId("media-targets").textContent?.split(",").sort()).toEqual([
+      "source.files",
+      "source.image",
+    ]);
+    expect(screen.getByTestId("media-kinds").textContent?.split(",").sort()).toEqual([
+      "file",
+      "image",
+    ]);
+    expect(screen.getByRole("button", { name: "Select material.png" })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Select notes.txt" })).toBeNull();
+  });
+
   it("hides media when a parent layer group is hidden", () => {
     render(
       <ToolcraftRoot