@agent-native/core 0.80.9 → 0.80.11

package/corpus/templates/design/app/components/design/canvas-primitive-style.ts

@@ -0,0 +1,241 @@
+/**
+ * Single source of truth for canvas-primitive visual styles.
+ *
+ * Both the board draft preview (DraftPrimitiveContent in MultiScreenCanvas.tsx)
+ * and the committed HTML renderer (appendCanvasPrimitiveToHtml in
+ * DesignEditor.tsx) must use these helpers so that what you see while drawing
+ * (preview) is pixel-identical to what gets committed — fixing the B5 color
+ * jump and the B6 ellipse border-radius jump.
+ *
+ * Design decisions:
+ * - Fill: `hsl(var(--primary) / 0.12)` — the calm, theme-adaptive tint already
+ *   used by the draft preview.  NOT the saturated blue previously hard-coded in
+ *   appendCanvasPrimitiveToHtml (`rgba(37,99,235,0.16)`).
+ * - Stroke: `hsl(var(--primary) / 0.7)` — same CSS-var approach, adapts to
+ *   light/dark mode automatically.
+ * - Stroke width: 1px for div-based shapes.
+ * - Ellipse: borderRadius "50%" in both paths — no more "oval on commit" jump.
+ * - Rect: borderRadius "2px" (small, matches the previous committed value; the
+ *   preview used Tailwind `rounded-sm` which resolves to 2px).
+ * - Frame: dashed border, slightly lighter fill (matches preview semantics).
+ * - Text: inherits current color; dashed outline as placeholder affordance.
+ *
+ * CSS custom properties (`hsl(var(--primary) / …)`) work in the committed HTML
+ * because the iframe inherits the design-editor stylesheet that defines
+ * `--primary`.  When a `fill` / `stroke` override is already present on the
+ * primitive those are passed through unchanged so user-chosen colors are never
+ * clobbered.
+ */
+
+import type * as React from "react";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type CanvasPrimitiveKind =
+  | "rect"
+  | "rectangle"
+  | "ellipse"
+  | "text"
+  | "frame";
+
+/**
+ * Canonical visual properties for a div-based canvas primitive.
+ * All values are plain CSS strings (usable verbatim in both React CSSProperties
+ * and HTML style attributes).
+ */
+export interface CanvasPrimitiveVisual {
+  background: string;
+  border: string;
+  borderRadius: string;
+  /** Only set for text primitives */
+  color?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Canonical tokens
+// ---------------------------------------------------------------------------
+
+/** Default fill tint — calm, theme-adaptive, not saturated. */
+const DEFAULT_FILL = "hsl(var(--primary) / 0.12)";
+
+/** Default stroke — uses the same hue at higher opacity for clarity. */
+const DEFAULT_STROKE = "hsl(var(--primary) / 0.7)";
+
+/** Stroke width in pixels for div-based shapes. */
+const DEFAULT_STROKE_WIDTH_PX = 1;
+
+/** Border shorthand shared by rect + ellipse. */
+const DEFAULT_BORDER = `${DEFAULT_STROKE_WIDTH_PX}px solid ${DEFAULT_STROKE}`;
+
+/** Frame gets a dashed border to signal it is a layout container. */
+const FRAME_BORDER = `${DEFAULT_STROKE_WIDTH_PX}px dashed ${DEFAULT_STROKE}`;
+
+/** Very faint fill for frames so the interior is readable. */
+const FRAME_FILL = "hsl(var(--primary) / 0.05)";
+
+/** Small radius matching Tailwind `rounded-sm` (2 px). */
+const RECT_RADIUS = "2px";
+
+// ---------------------------------------------------------------------------
+// canvasPrimitiveVisual
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns the canonical CanvasPrimitiveVisual for the given kind.
+ *
+ * Usage (React preview):
+ *   const v = canvasPrimitiveVisual("ellipse");
+ *   <div style={{ background: v.background, border: v.border, borderRadius: v.borderRadius }} />
+ *
+ * Usage (committed HTML):
+ *   const v = canvasPrimitiveVisual("ellipse");
+ *   el.style.background = v.background;
+ *   el.style.border = v.border;
+ *   el.style.borderRadius = v.borderRadius;
+ */
+export function canvasPrimitiveVisual(
+  kind: CanvasPrimitiveKind,
+): CanvasPrimitiveVisual {
+  switch (kind) {
+    case "ellipse":
+      return {
+        background: DEFAULT_FILL,
+        border: DEFAULT_BORDER,
+        borderRadius: "50%",
+      };
+    case "frame":
+      return {
+        background: FRAME_FILL,
+        border: FRAME_BORDER,
+        borderRadius: RECT_RADIUS,
+      };
+    case "text":
+      return {
+        background: "transparent",
+        border: `${DEFAULT_STROKE_WIDTH_PX}px dashed hsl(var(--primary) / 0.6)`,
+        borderRadius: RECT_RADIUS,
+        color: "currentColor",
+      };
+    case "rect":
+    case "rectangle":
+    default:
+      return {
+        background: DEFAULT_FILL,
+        border: DEFAULT_BORDER,
+        borderRadius: RECT_RADIUS,
+      };
+  }
+}
+
+// ---------------------------------------------------------------------------
+// canvasPrimitiveStyleString
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns an inline CSS style string for the given kind, ready to assign to
+ * `element.setAttribute("style", …)` or to splice into generated HTML.
+ *
+ * Override parameters let callers pass a user-chosen fill/stroke instead of
+ * the defaults — if undefined the canonical tokens are used.
+ *
+ * Example output for "ellipse":
+ *   "background:hsl(var(--primary) / 0.12);border:1px solid hsl(var(--primary) / 0.7);border-radius:50%"
+ */
+export function canvasPrimitiveStyleString(
+  kind: CanvasPrimitiveKind,
+  overrides?: { fill?: string; stroke?: string; strokeWidth?: number },
+): string {
+  const v = canvasPrimitiveVisual(kind);
+
+  // Apply caller overrides so user-chosen colours are preserved.
+  let background = v.background;
+  let border = v.border;
+
+  if (overrides?.fill) {
+    background = overrides.fill;
+  }
+  if (overrides?.stroke || overrides?.strokeWidth !== undefined) {
+    const stroke = overrides.stroke ?? DEFAULT_STROKE;
+    const width = overrides.strokeWidth ?? DEFAULT_STROKE_WIDTH_PX;
+    const style = kind === "frame" || kind === "text" ? "dashed" : "solid";
+    border = `${width}px ${style} ${stroke}`;
+  }
+
+  const parts: string[] = [
+    `background:${background}`,
+    `border:${border}`,
+    `border-radius:${v.borderRadius}`,
+  ];
+
+  if (v.color) {
+    parts.push(`color:${v.color}`);
+  }
+
+  return parts.join(";");
+}
+
+// ---------------------------------------------------------------------------
+// canvasPrimitiveReactStyle
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns a React CSSProperties object for the given kind, ready to spread
+ * onto a JSX `style` prop.
+ *
+ * Override parameters preserve user-chosen fill/stroke colours.
+ *
+ * Example:
+ *   <div style={canvasPrimitiveReactStyle("ellipse")} />
+ */
+export function canvasPrimitiveReactStyle(
+  kind: CanvasPrimitiveKind,
+  overrides?: { fill?: string; stroke?: string; strokeWidth?: number },
+): React.CSSProperties {
+  const v = canvasPrimitiveVisual(kind);
+
+  let background = v.background as string | undefined;
+  let borderColor: string | undefined;
+  let borderWidth: number | string | undefined = DEFAULT_STROKE_WIDTH_PX;
+  let borderStyle: string | undefined = "solid";
+
+  if (kind === "frame" || kind === "text") {
+    borderStyle = "dashed";
+  }
+
+  if (overrides?.fill) {
+    background = overrides.fill;
+  }
+  if (overrides?.stroke) {
+    borderColor = overrides.stroke;
+  } else {
+    // Extract from canonical border shorthand: "Npx style color"
+    const borderParts = v.border.split(" ");
+    // e.g. ["1px", "solid", "hsl(...)"] — colour may have spaces inside parens
+    borderColor = borderParts.slice(2).join(" ");
+  }
+  if (overrides?.strokeWidth !== undefined) {
+    borderWidth = overrides.strokeWidth;
+  }
+
+  const style: React.CSSProperties = {
+    background,
+    border: undefined,
+    borderColor,
+    borderWidth,
+    borderStyle,
+    borderRadius: v.borderRadius,
+  };
+
+  if (v.color) {
+    style.color = v.color;
+  }
+
+  // For text kind, clear fill-as-background since text uses `color`
+  if (kind === "text") {
+    style.background = "transparent";
+  }
+
+  return style;
+}

package/corpus/templates/design/app/components/design/index.ts

@@ -1,8 +1,24 @@
 export { DesignCanvas } from "./DesignCanvas";
+export type {
+  MotionTrackWire,
+  IframeHotkeyPayload,
+  IframeContextMenuPayload,
+} from "./DesignCanvas";
 export { DeviceFrame } from "./DeviceFrame";
 export { DrawOverlay } from "./DrawOverlay";
 export { EditPanel } from "./EditPanel";
+export type { InspectorTab } from "./EditPanel";
+export {
+  MotionDock,
+  type MotionDockProps,
+  type MotionDockTrack,
+} from "./MotionDock";
 export { QuestionFlow } from "./QuestionFlow";
+export { ReviewPanel } from "./ReviewPanel";
+export type { ReviewPanelProps, ReviewVersionOption } from "./ReviewPanel";
+export { StatesPanel } from "./StatesPanel";
+export type { StatesPanelProps } from "./StatesPanel";
+export { TokensPanel, type TokensPanelProps } from "./TokensPanel";
 export { TweaksPanel } from "./TweaksPanel";
 export type {
   DrawAnnotation,

package/corpus/templates/design/app/components/design/inspector/AutoLayoutMatrix.tsx

@@ -147,6 +147,7 @@ export interface AutoLayoutMatrixProps {
   onPaddingLinkedChange: (linked: boolean) => void;
   onClipContentChange?: (clipContent: boolean) => void;
   onDistribute?: (axis: DistributionAxis) => void;
+  onGapModeChange?: (mode: "fixed" | "auto", axis: DistributionAxis) => void;
   onChildSizingChange: (
     axis: AutoLayoutSizingAxis,
     sizing: AutoLayoutSizing,
@@ -246,6 +247,7 @@ export function AutoLayoutMatrix({
   onPaddingLinkedChange,
   onClipContentChange,
   onDistribute,
+  onGapModeChange,
   onChildSizingChange,
   onChildMinMaxChange,
   onApplyVariable,
@@ -455,6 +457,7 @@ export function AutoLayoutMatrix({
                 value={value.gap}
                 onGapChange={onGapChange}
                 onDistribute={onDistribute}
+                onGapModeChange={onGapModeChange}
                 label={copy.gap}
                 disabled={disabled}
                 direction={value.direction}
@@ -858,6 +861,7 @@ function GapField({
   value,
   onGapChange,
   onDistribute,
+  onGapModeChange,
   label,
   disabled,
   direction,
@@ -866,6 +870,7 @@ function GapField({
   value: number;
   onGapChange: (gap: number) => void;
   onDistribute?: (axis: DistributionAxis) => void;
+  onGapModeChange?: (mode: "fixed" | "auto", axis: DistributionAxis) => void;
   label: string;
   disabled: boolean;
   direction: AutoLayoutDirection;
@@ -928,16 +933,20 @@ function GapField({
               <DropdownMenuCheckboxItem
                 checked={gapMode !== "auto"}
                 className="text-[12px]"
-                onSelect={() => {
-                  /* Fixed gap: keep current numeric value (already numeric). */
-                }}
+                onSelect={() => onGapModeChange?.("fixed", direction)}
               >
                 {"Fixed" /* i18n-ignore design gap mode label */}
               </DropdownMenuCheckboxItem>
               <DropdownMenuCheckboxItem
                 checked={gapMode === "auto"}
                 className="text-[12px]"
-                onSelect={() => onDistribute(direction)}
+                onSelect={() => {
+                  if (onGapModeChange) {
+                    onGapModeChange("auto", direction);
+                    return;
+                  }
+                  onDistribute?.(direction);
+                }}
               >
                 {"Auto" /* i18n-ignore design gap mode label */}
               </DropdownMenuCheckboxItem>
@@ -1227,9 +1236,9 @@ export function SizingField({
               tooltipLabel={`${axis} size`}
               icon={null}
               value={Math.round(resolvedSize ?? 0)}
-              onChange={(next) => onSizeChange!(Math.max(1, Math.round(next)))}
+              onChange={(next) => onSizeChange!(Math.max(0, Math.round(next)))}
               unit="px"
-              min={1}
+              min={0}
               step={1}
               precision={0}
               disabled={disabled}

package/corpus/templates/design/app/components/design/inspector/DesignColorPicker.tsx

@@ -28,6 +28,13 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   Tooltip,
   TooltipContent,
@@ -651,6 +658,24 @@ const NOISE_FALLBACK_CSS =
   "repeating-conic-gradient(#0000 0% 25%, #00000010 0% 50%) 0 0 / 6px 6px, #8a8a8a";
 const PATTERN_FALLBACK_CSS =
   "repeating-linear-gradient(45deg, #00000014 0 6px, #ffffff14 6px 12px), #9aa0a6";
+const BLEND_MODE_OPTIONS = [
+  { value: "normal", label: "Normal" },
+  { value: "multiply", label: "Multiply" },
+  { value: "screen", label: "Screen" },
+  { value: "overlay", label: "Overlay" },
+  { value: "darken", label: "Darken" },
+  { value: "lighten", label: "Lighten" },
+  { value: "color-dodge", label: "Color dodge" }, // i18n-ignore design blend mode label
+  { value: "color-burn", label: "Color burn" }, // i18n-ignore design blend mode label
+  { value: "hard-light", label: "Hard light" }, // i18n-ignore design blend mode label
+  { value: "soft-light", label: "Soft light" }, // i18n-ignore design blend mode label
+  { value: "difference", label: "Difference" },
+  { value: "exclusion", label: "Exclusion" },
+  { value: "hue", label: "Hue" },
+  { value: "saturation", label: "Saturation" },
+  { value: "color", label: "Color" },
+  { value: "luminosity", label: "Luminosity" },
+] as const;
 
 // ─── Main component ────────────────────────────────────────────────────────────
 
@@ -662,9 +687,9 @@ export function DesignColorPicker({
   label: _label,
   opacity,
   onOpacityChange,
-  blendMode: _blendMode,
-  onBlendModeChange: _onBlendModeChange,
-  showBlendMode: _showBlendMode,
+  blendMode,
+  onBlendModeChange,
+  showBlendMode = false,
   fillRows: _fillRows,
   selectedFillId: _selectedFillId,
   onFillSelect: _onFillSelect,
@@ -693,6 +718,11 @@ export function DesignColorPicker({
   const hsv = rgbaToHsv(color);
   const hsl = rgbaToHsl(color);
   const effectiveOpacity = opacity ?? alphaToOpacity(color.a);
+  const blendModeValue = BLEND_MODE_OPTIONS.some(
+    (option) => option.value === blendMode,
+  )
+    ? blendMode
+    : "normal";
 
   const [mode, setMode] = useState<DesignColorMode>("hex");
   const [hexDraft, setHexDraft] = useState(() => toDisplayHex(color));
@@ -1506,6 +1536,39 @@ export function DesignColorPicker({
                   </div>
                 )}
 
+                {showBlendMode && onBlendModeChange && (
+                  <div className="border-t border-border/70 px-3 py-2.5">
+                    <div className="flex items-center gap-1.5">
+                      <span className="min-w-0 flex-1 text-[11px] text-muted-foreground">
+                        {copy.blendMode}
+                      </span>
+                      <Select
+                        value={blendModeValue}
+                        disabled={disabled}
+                        onValueChange={onBlendModeChange}
+                      >
+                        <SelectTrigger
+                          aria-label={copy.blendMode}
+                          className="h-6 min-w-0 flex-1 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-1.5 text-[11px] shadow-none focus:ring-1 focus:ring-[var(--design-editor-accent-color)]"
+                        >
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {BLEND_MODE_OPTIONS.map((option) => (
+                            <SelectItem
+                              key={option.value}
+                              value={option.value}
+                              className="text-[11px]"
+                            >
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                )}
+
                 {/* ── Document colors ──────────────────────────────────────── */}
                 {/* Renders the palette of colors already used in the design.
                     When `documentColors` is provided, those swatches are shown;

package/corpus/templates/design/app/components/design/inspector/InspectorAiActions.tsx

@@ -0,0 +1,145 @@
+import { useT } from "@agent-native/core/client";
+import {
+  IconClipboard,
+  IconChevronDown,
+  IconSparkles,
+} from "@tabler/icons-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Textarea } from "@/components/ui/textarea";
+import { useAgentEditRequest } from "@/hooks/useAgentEditRequest";
+import { cn } from "@/lib/utils";
+
+export interface InspectorAiActionsProps {
+  /** CSS selector for the currently-selected element, if any. */
+  selector?: string;
+  /** Source id (data-code-layer-id) of the selected element, if any. */
+  sourceId?: string;
+  /** Active file id. */
+  fileId?: string;
+  /** Active file name (e.g. "index.html"). */
+  filename?: string;
+  /** The design id. */
+  designId?: string;
+  /** When false, the controls are disabled. */
+  canEdit: boolean;
+}
+
+/**
+ * Compact inspector block that lets the user type a freeform AI edit request
+ * and either route it to the agent chat sidebar ("Apply with AI") or copy the
+ * prompt to the clipboard ("Copy prompt").
+ *
+ * Collapsed by default to keep the inspector clean.
+ */
+export function InspectorAiActions({
+  selector,
+  sourceId,
+  fileId,
+  filename,
+  designId,
+  canEdit,
+}: InspectorAiActionsProps) {
+  const t = useT();
+  const { sendEdit, copyPrompt } = useAgentEditRequest();
+  const [open, setOpen] = useState(false);
+  const [request, setRequest] = useState("");
+
+  const args = {
+    message: request,
+    selector,
+    sourceId,
+    fileId,
+    filename,
+    designId,
+  };
+  const disabled = !canEdit || !request.trim();
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} className="w-full">
+      <CollapsibleTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            "flex w-full items-center justify-between gap-1 rounded px-2 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+          )}
+        >
+          <span className="flex items-center gap-1.5">
+            <IconSparkles className="size-3.5 shrink-0" />
+            {t("designEditor.localSourceEdit.askAi")}
+          </span>
+          <IconChevronDown
+            className={cn(
+              "size-3.5 shrink-0 transition-transform duration-150",
+              open && "rotate-180",
+            )}
+          />
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-none">
+        <div className="flex flex-col gap-2 px-1 pb-2 pt-1">
+          <Textarea
+            value={request}
+            onChange={(e) => setRequest(e.target.value)}
+            placeholder={
+              selector
+                ? t("designEditor.localSourceEdit.describeElementChange")
+                : t("designEditor.localSourceEdit.describeChange")
+            }
+            className="min-h-[64px] resize-none text-xs"
+            disabled={!canEdit}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !disabled) {
+                e.preventDefault();
+                void sendEdit(args);
+                setRequest("");
+                setOpen(false);
+              }
+            }}
+          />
+          <div className="flex gap-1.5">
+            <Button
+              size="sm"
+              variant="default"
+              className="flex-1 gap-1.5 text-xs"
+              disabled={disabled}
+              onClick={() => {
+                void sendEdit(args);
+                setRequest("");
+                setOpen(false);
+              }}
+            >
+              <IconSparkles className="size-3.5 shrink-0" />
+              {t("designEditor.localSourceEdit.applyWithAi")}
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              className="gap-1.5 text-xs"
+              disabled={disabled}
+              onClick={() => {
+                void copyPrompt(args);
+              }}
+              title={t("designEditor.localSourceEdit.copyPromptTooltip")}
+            >
+              <IconClipboard className="size-3.5 shrink-0" />
+              {t("designEditor.localSourceEdit.copyPrompt")}
+            </Button>
+          </div>
+          {selector && (
+            <p className="text-[10px] leading-tight text-muted-foreground truncate">
+              {t("designEditor.localSourceEdit.targeting")}{" "}
+              <code className="font-mono">{selector}</code>
+            </p>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/corpus/templates/design/app/components/design/inspector/SHADER_INTEGRATION.md

@@ -6,6 +6,30 @@ right spot plus copy-pasteable code to insert or replace.
 
 Do NOT rely on line numbers — they drift. Use the search strings instead.
 
+## Status: shader fills are user-reachable and applyable
+
+The **Shader Fills** card in `DesignExtensionsPanel.tsx` (inspector slot
+`design.editor.inspector`) is the live entry point: open it, **Browse Shaders**,
+pick a preset, tune it with `ShaderControls`, and the iframe previews the fill as
+a CSS gradient (`preview-shader-fill`). With an element selected on the canvas, the
+card's **Apply fill** button persists that fill via the `apply-shader-fill` action.
+
+`apply-shader-fill` is **no longer gated** — it is SAFETY-gated, not Builder-gated:
+
+- It asserts **editor** access on the target design (`accessFilter` read +
+  `assertAccess("design", id, "editor")`) before any write.
+- It only persists **HTML design-file** sources. localhost / fusion / inline-html
+  sources return the preview value and write nothing.
+- It writes a single inline-style `background` onto the target node through the
+  deterministic HTML editor (`applyVisualEdit`, the same persist path as
+  `apply-visual-edit`), reusing the strict CSS-colour allowlist from
+  `shared/shader-fill.ts` so `descriptor.colors` can never inject CSS.
+
+Sections (a), (b), (d), and (f) below remain optional ways to surface shaders in
+_other_ inspector seams (the colour picker fill type, the effects panel, the
+artboard WebGL bridge, design-system tokens) and are not required for the
+card-based apply path that ships today.
+
 ---
 
 ## (a) DesignColorPicker.tsx — Add `"shader"` fill type
@@ -351,20 +375,17 @@ if (fill.type === "shader") {
 
 ---
 
-## (e) Changelog entry (DEFERRED)
-
-The shader feature is not yet user-reachable — it still needs all seam files wired.
-Do NOT add a changelog entry yet.
+## (e) Changelog entry
 
-Once the seam files are integrated and the feature is accessible from the UI (a user
-can apply a shader fill from the fill picker or add a shader effect from the effects
-panel), run:
+The shader-fills card is now user-reachable and the apply path persists, so a
+user-facing changelog entry is warranted. From the `templates/design/` directory:
 
 ```bash
-agent-native changelog add "Add GPU shader fills and effects — 8 presets (MeshGradient, GrainGradient, Voronoi, Metaballs, Warp, GodRays, Dithering, PaperTexture) with live preview and agent-tunable params" --type added
+agent-native changelog add "Add GPU shader fills — 8 presets (MeshGradient, GrainGradient, Voronoi, Metaballs, Warp, GodRays, Dithering, PaperTexture) with live preview and one-click apply to the selected element" --type added
 ```
 
-from the `templates/design/` directory.
+(The effects-panel surface from section (b) is still optional; scope the changelog
+line to what actually ships.)
 
 ---
 
@@ -407,14 +428,23 @@ shader token picker.
 
 ## Integration Checklist
 
+Shipped (card-based preview + apply path):
+
+- [x] `DesignExtensionsPanel.tsx` — Shader Fills card opens `ShaderFillsPanel`
+- [x] `DesignExtensionsPanel.tsx` — "Apply fill" persists via `apply-shader-fill`
+- [x] `actions/apply-shader-fill.ts` — persists fill as CSS background (editor-gated)
+- [x] `actions/preview-shader-fill.ts` — preview-only CSS (unchanged)
+- [x] `actions/apply-shader.ts` exists (planning/codegen snippet)
+- [x] `actions/get-shader.ts` exists
+
+Optional follow-ups (other inspector seams):
+
 - [ ] `DesignColorPicker.tsx` — `DesignFillType` includes `"shader"`
 - [ ] `DesignColorPicker.tsx` — `DesignPaintType` includes `"shader"`
 - [ ] `DesignColorPicker.tsx` — shader button renders in paint-type row
 - [ ] `DesignColorPicker.tsx` — `ShaderControls` renders when `paintType === "shader"`
 - [ ] `EditPanel.tsx` — `ShaderEffectRow` renders in `EffectsProperties`
 - [ ] `EditPanel.tsx` — "Add Shader" option in effects dropdown
-- [ ] `actions/apply-shader.ts` exists
-- [ ] `actions/get-shader.ts` exists
 - [ ] `DesignCanvas.tsx` — shader bridge script injected into artboard
 - [ ] `DesignCanvas.tsx` — `data-shader` attribute serialized for shader fills
-- [ ] Changelog entry added (after feature is user-reachable)
+- [ ] Changelog entry added (see section (e))

package/corpus/templates/design/app/components/visual-editor/DrawOverlay.tsx

@@ -453,7 +453,7 @@ export function DrawOverlay({
   const toolbar = (
     <div
       data-draw-toolbar
-      className="pointer-events-auto fixed bottom-4 left-1/2 z-[110] flex -translate-x-1/2 items-center gap-2 rounded-xl border border-border bg-popover px-3 py-2 shadow-2xl"
+      className="pointer-events-auto fixed bottom-20 left-1/2 z-[110] flex max-w-[calc(100vw-1rem)] -translate-x-1/2 flex-wrap items-center justify-center gap-2 rounded-xl border border-border bg-popover px-3 py-2 shadow-2xl"
     >
       {/* Color picker */}
       <div className="flex gap-1">