@drawnagency/primitives 0.1.87 → 0.1.88

package/dist/{chunk-6VOIZP2O.js → chunk-SK6GGTTO.js}

@@ -55,53 +55,11 @@ var ColorItemSchema = z.object({
   spaces: z.array(ColorSpaceSchema).describe("One or more color-space definitions (hex/rgb/cmyk/pantone) for this color.").min(1)
 });
 
-// src/components/brandguide/Colors.tsx
-import { useState as useState2, useEffect } from "react";
-import { Eye, EyeOff } from "lucide-react";
-
-// src/components/brandguide/ColorSwatchSettings.tsx
+// src/components/brandguide/ColorsView.tsx
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function mergeSpaces(spaces) {
-  return Object.assign({}, ...spaces);
-}
-function ColorSwatchSettings({ color, onChange }) {
-  const [localColor, setLocalColor] = useState(() => ({
-    ...color,
-    spaces: [mergeSpaces(color.spaces)]
-  }));
-  const space = localColor.spaces[0] || {};
-  const update = (updated) => {
-    setLocalColor(updated);
-    onChange(updated);
-  };
-  const updateSpace = (key, value) => {
-    const newSpace = { ...space, [key]: value || void 0 };
-    update({ ...localColor, spaces: [newSpace] });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        label: "Name",
-        value: localColor.name || "",
-        onChange: (name) => update({ ...localColor, name })
-      }
-    ),
-    ["hex", "rgb", "cmyk", "pantone"].map((key) => /* @__PURE__ */ jsx(
-      Input,
-      {
-        label: key.toUpperCase(),
-        value: space[key] || "",
-        onChange: (value) => updateSpace(key, value)
-      },
-      key
-    ))
-  ] });
-}
+import { Eye, EyeOff } from "lucide-react";
 
-// src/components/brandguide/Colors.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+// src/components/brandguide/colors-shared.ts
 function getContrastClass(hex) {
   if (!hex) return "text-white";
   const h = hex.replace("#", "");
@@ -116,32 +74,9 @@ var createColorItem = () => ({
   name: "",
   spaces: [{ hex: "#cccccc" }]
 });
-function buildContent(colors, options) {
-  const { label, columns, collapsing, showLabel } = options;
-  return {
-    type: "colors",
-    content: { colors },
-    ...label || columns || collapsing !== void 0 || showLabel !== void 0 ? { options: { label, columns, collapsing, showLabel } } : {}
-  };
-}
-function Colors({ colors, columns = 3, label, collapsing, showLabel = true, onChange, openModal, onDelete }) {
-  if (onChange && openModal) {
-    return /* @__PURE__ */ jsx2(
-      ColorsEditable,
-      {
-        colors,
-        columns,
-        label,
-        collapsing,
-        showLabel,
-        onChange,
-        openModal,
-        onDelete
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx2(ColorsView, { colors, columns, label, collapsing, showLabel });
-}
+
+// src/components/brandguide/ColorsView.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 function ColorsView({
   colors,
   columns,
@@ -149,8 +84,8 @@ function ColorsView({
   collapsing,
   showLabel
 }) {
-  const [expanded, setExpanded] = useState2(!collapsing);
-  const [copiedIndex, setCopiedIndex] = useState2(null);
+  const [expanded, setExpanded] = useState(!collapsing);
+  const [copiedIndex, setCopiedIndex] = useState(null);
   const handleCopy = (value, colorIndex) => {
     if (navigator.clipboard?.writeText) {
       navigator.clipboard.writeText(value);
@@ -167,38 +102,38 @@ function ColorsView({
     setCopiedIndex(colorIndex);
     setTimeout(() => setCopiedIndex(null), 1500);
   };
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    (showLabel && !!label || collapsing) && /* @__PURE__ */ jsxs2("div", { className: "mb-4 flex items-center gap-2", children: [
-      showLabel && !!label && /* @__PURE__ */ jsx2("span", { className: "text-lg font-bold", children: label }),
-      collapsing && /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs("div", { children: [
+    (showLabel && !!label || collapsing) && /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
+      showLabel && !!label && /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: label }),
+      collapsing && /* @__PURE__ */ jsxs(
         "button",
         {
           onClick: () => setExpanded(!expanded),
           className: "cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast",
           children: [
-            /* @__PURE__ */ jsx2("span", { children: expanded ? "Hide Details" : "Show Details" }),
-            expanded ? /* @__PURE__ */ jsx2(EyeOff, { size: 16 }) : /* @__PURE__ */ jsx2(Eye, { size: 16 })
+            /* @__PURE__ */ jsx("span", { children: expanded ? "Hide Details" : "Show Details" }),
+            expanded ? /* @__PURE__ */ jsx(EyeOff, { size: 16 }) : /* @__PURE__ */ jsx(Eye, { size: 16 })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: "@container", children: /* @__PURE__ */ jsx2("div", { className: cn("grid gap-4", containerGridClass[columns] || containerGridClass[3]), children: colors.map((color, i) => {
+    /* @__PURE__ */ jsx("div", { className: "@container", children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-4", containerGridClass[columns] || containerGridClass[3]), children: colors.map((color, i) => {
       const hex = color.spaces[0]?.hex;
       const contrast = getContrastClass(hex);
-      return /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-col overflow-hidden rounded-outer border border-base-200", children: [
-        /* @__PURE__ */ jsxs2("div", { className: cn("relative flex min-h-[80px] items-end p-3", contrast), style: { backgroundColor: hex || "#ccc" }, children: [
-          color.name && /* @__PURE__ */ jsx2("span", { className: "text-sm font-bold", children: color.name }),
-          copiedIndex === i && /* @__PURE__ */ jsx2("span", { className: cn(
+      return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden rounded-outer border border-base-200", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("relative flex min-h-[80px] items-end p-3", contrast), style: { backgroundColor: hex || "#ccc" }, children: [
+          color.name && /* @__PURE__ */ jsx("span", { className: "text-sm font-bold", children: color.name }),
+          copiedIndex === i && /* @__PURE__ */ jsx("span", { className: cn(
             "absolute top-2 right-2 rounded-full px-2.5 py-0.5 text-xs font-medium",
             getContrastClass(hex) === "text-black" ? "bg-black/15 text-black" : "bg-white/25 text-white"
           ), children: "Copied!" })
         ] }),
         expanded && // flex-1 so every swatch's label block grows to the tallest in its row.
-        /* @__PURE__ */ jsx2("div", { className: "flex-1 space-y-1 bg-base-accent p-3 text-sm", children: color.spaces.map(
+        /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-1 bg-base-accent p-3 text-sm", children: color.spaces.map(
           (space, j) => Object.entries(space).map(
-            ([key, value]) => value ? /* @__PURE__ */ jsxs2("button", { onClick: () => handleCopy(value, i), className: "cursor-pointer flex w-full justify-between hover:text-primary", children: [
-              /* @__PURE__ */ jsx2("span", { className: "font-medium uppercase", children: key }),
-              /* @__PURE__ */ jsx2("span", { children: value })
+            ([key, value]) => value ? /* @__PURE__ */ jsxs("button", { onClick: () => handleCopy(value, i), className: "cursor-pointer flex w-full justify-between hover:text-primary", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium uppercase", children: key }),
+              /* @__PURE__ */ jsx("span", { children: value })
             ] }, `${j}-${key}`) : null
           )
         ) })
@@ -206,6 +141,62 @@ function ColorsView({
     }) }) })
   ] });
 }
+
+// src/components/brandguide/ColorsEditable.tsx
+import { useState as useState3, useEffect } from "react";
+import { Eye as Eye2, EyeOff as EyeOff2 } from "lucide-react";
+
+// src/components/brandguide/ColorSwatchSettings.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function mergeSpaces(spaces) {
+  return Object.assign({}, ...spaces);
+}
+function ColorSwatchSettings({ color, onChange }) {
+  const [localColor, setLocalColor] = useState2(() => ({
+    ...color,
+    spaces: [mergeSpaces(color.spaces)]
+  }));
+  const space = localColor.spaces[0] || {};
+  const update = (updated) => {
+    setLocalColor(updated);
+    onChange(updated);
+  };
+  const updateSpace = (key, value) => {
+    const newSpace = { ...space, [key]: value || void 0 };
+    update({ ...localColor, spaces: [newSpace] });
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx2(
+      Input,
+      {
+        label: "Name",
+        value: localColor.name || "",
+        onChange: (name) => update({ ...localColor, name })
+      }
+    ),
+    ["hex", "rgb", "cmyk", "pantone"].map((key) => /* @__PURE__ */ jsx2(
+      Input,
+      {
+        label: key.toUpperCase(),
+        value: space[key] || "",
+        onChange: (value) => updateSpace(key, value)
+      },
+      key
+    ))
+  ] });
+}
+
+// src/components/brandguide/ColorsEditable.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function buildContent(colors, options) {
+  const { label, columns, collapsing, showLabel } = options;
+  return {
+    type: "colors",
+    content: { colors },
+    ...label || columns || collapsing !== void 0 || showLabel !== void 0 ? { options: { label, columns, collapsing, showLabel } } : {}
+  };
+}
 function ColorsEditable({
   colors,
   columns,
@@ -216,7 +207,7 @@ function ColorsEditable({
   openModal,
   onDelete
 }) {
-  const [expanded, setExpanded] = useState2(!collapsing);
+  const [expanded, setExpanded] = useState3(!collapsing);
   const options = { label, columns, collapsing, showLabel };
   useEffect(() => {
     setExpanded(!collapsing);
@@ -225,15 +216,15 @@ function ColorsEditable({
     const color = colors[index];
     openModal(
       "Color Settings",
-      /* @__PURE__ */ jsx2(ColorSwatchSettings, { color, onChange: (updated) => {
+      /* @__PURE__ */ jsx3(ColorSwatchSettings, { color, onChange: (updated) => {
         const newColors = colors.map((c, i) => i === index ? updated : c);
         onChange(buildContent(newColors, options));
       } })
     );
   };
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    (showLabel && !!label || collapsing) && /* @__PURE__ */ jsxs2("div", { className: "mb-4 flex items-center gap-2", children: [
-      showLabel && !!label && /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    (showLabel && !!label || collapsing) && /* @__PURE__ */ jsxs3("div", { className: "mb-4 flex items-center gap-2", children: [
+      showLabel && !!label && /* @__PURE__ */ jsx3(
         EditablePlainText,
         {
           tag: "span",
@@ -243,19 +234,19 @@ function ColorsEditable({
           className: "text-lg font-bold"
         }
       ),
-      collapsing && /* @__PURE__ */ jsxs2(
+      collapsing && /* @__PURE__ */ jsxs3(
         "button",
         {
           onClick: () => setExpanded(!expanded),
           className: "cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast",
           children: [
-            /* @__PURE__ */ jsx2("span", { children: expanded ? "Hide Details" : "Show Details" }),
-            expanded ? /* @__PURE__ */ jsx2(EyeOff, { size: 16 }) : /* @__PURE__ */ jsx2(Eye, { size: 16 })
+            /* @__PURE__ */ jsx3("span", { children: expanded ? "Hide Details" : "Show Details" }),
+            expanded ? /* @__PURE__ */ jsx3(EyeOff2, { size: 16 }) : /* @__PURE__ */ jsx3(Eye2, { size: 16 })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3(
       EditableGrid,
       {
         items: colors,
@@ -266,7 +257,7 @@ function ColorsEditable({
         createItem: createColorItem,
         isEditMode: true,
         onItemSettings: handleItemSettings,
-        renderItem: (color, { index }) => /* @__PURE__ */ jsx2(
+        renderItem: (color, { index }) => /* @__PURE__ */ jsx3(
           ColorSwatchEditable,
           {
             color,
@@ -295,8 +286,8 @@ function ColorSwatchEditable({
     const newColors = colors.map((c, i) => i === index ? updated : c);
     onChange(buildContent(newColors, options));
   };
-  return /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-col overflow-hidden rounded-outer border border-base-200", children: [
-    /* @__PURE__ */ jsx2("div", { className: cn("flex min-h-[80px] items-end p-3", contrast), style: { backgroundColor: hex || "#ccc" }, children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3("div", { className: "flex h-full flex-col overflow-hidden rounded-outer border border-base-200", children: [
+    /* @__PURE__ */ jsx3("div", { className: cn("flex min-h-[80px] items-end p-3", contrast), style: { backgroundColor: hex || "#ccc" }, children: /* @__PURE__ */ jsx3(
       EditablePlainText,
       {
         tag: "span",
@@ -308,17 +299,38 @@ function ColorSwatchEditable({
       }
     ) }),
     expanded && // flex-1 so every swatch's label block grows to the tallest in its row.
-    /* @__PURE__ */ jsx2("div", { className: "flex-1 space-y-1 bg-base-accent p-3 text-sm", children: color.spaces.map(
+    /* @__PURE__ */ jsx3("div", { className: "flex-1 space-y-1 bg-base-accent p-3 text-sm", children: color.spaces.map(
       (space, j) => Object.entries(space).map(
-        ([key, value]) => value ? /* @__PURE__ */ jsxs2("div", { className: "flex w-full justify-between", children: [
-          /* @__PURE__ */ jsx2("span", { className: "font-medium uppercase", children: key }),
-          /* @__PURE__ */ jsx2("span", { children: value })
+        ([key, value]) => value ? /* @__PURE__ */ jsxs3("div", { className: "flex w-full justify-between", children: [
+          /* @__PURE__ */ jsx3("span", { className: "font-medium uppercase", children: key }),
+          /* @__PURE__ */ jsx3("span", { children: value })
         ] }, `${j}-${key}`) : null
       )
     ) })
   ] });
 }
 
+// src/components/brandguide/Colors.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Colors({ colors, columns = 3, label, collapsing, showLabel = true, onChange, openModal, onDelete }) {
+  if (onChange && openModal) {
+    return /* @__PURE__ */ jsx4(
+      ColorsEditable,
+      {
+        colors,
+        columns,
+        label,
+        collapsing,
+        showLabel,
+        onChange,
+        openModal,
+        onDelete
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(ColorsView, { colors, columns, label, collapsing, showLabel });
+}
+
 // src/lib/text.ts
 function stripHtmlToPlainText(html) {
   return html.replace(/<(script|style)\b[^>]*>[\s\S]*?<\/\1>/gi, "").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
@@ -332,7 +344,7 @@ function pluralize(n, word) {
 }
 
 // src/components/sections/Colors/index.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var schema = z2.object({
   type: z2.literal("colors"),
   content: z2.object({
@@ -347,12 +359,13 @@ var schema = z2.object({
 });
 var Colors_default = defineSection({
   type: "colors",
+  interactive: true,
   category: "brand-guide",
   label: "Colors",
-  icon: /* @__PURE__ */ jsx3(Palette, { size: 18 }),
+  icon: /* @__PURE__ */ jsx5(Palette, { size: 18 }),
   schema,
   authoringNote: "A brand color palette. Each color may carry hex/rgb/cmyk/pantone values. Use to document brand colors with swatches.",
-  component: ({ content, options, onChange, openModal, onDelete }) => /* @__PURE__ */ jsx3(
+  component: ({ content, options, onChange, openModal, onDelete }) => /* @__PURE__ */ jsx5(
     Colors,
     {
       colors: content.content.colors,
@@ -390,12 +403,12 @@ import { z as z3 } from "zod";
 import { List, Columns2 } from "lucide-react";
 
 // src/components/sections/IconList/IconList.tsx
-import { useRef as useRef3, useEffect as useEffect4, useState as useState3, useCallback } from "react";
+import { useRef as useRef3, useEffect as useEffect4, useState as useState4, useCallback } from "react";
 import { Check as Check2, CopyPlus, Pencil, X as X2 } from "lucide-react";
 
 // src/components/primitives/IconPicker.tsx
 import { useEffect as useEffect2, useRef } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function IconPicker({ selected, onSelect, onClose, showRemove = true }) {
   const panelRef = useRef(null);
   useEffect2(() => {
@@ -405,16 +418,16 @@ function IconPicker({ selected, onSelect, onClose, showRemove = true }) {
     document.addEventListener("mousedown", handleMouseDown);
     return () => document.removeEventListener("mousedown", handleMouseDown);
   }, [onClose]);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: panelRef,
       className: "absolute z-50 w-56 rounded-lg border border-base-200 bg-base p-2 shadow-lg",
       children: [
-        /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-5 gap-1", children: curatedIcons.map((entry) => {
+        /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-5 gap-1", children: curatedIcons.map((entry) => {
           const Icon = entry.icon;
           const isSelected = selected === entry.id;
-          return /* @__PURE__ */ jsx4(
+          return /* @__PURE__ */ jsx6(
             "button",
             {
               "aria-label": entry.label,
@@ -424,12 +437,12 @@ function IconPicker({ selected, onSelect, onClose, showRemove = true }) {
                 isSelected && "ring-2 ring-primary bg-base-accent text-primary"
               ),
               onClick: () => onSelect(entry.id),
-              children: /* @__PURE__ */ jsx4(Icon, { size: 18 })
+              children: /* @__PURE__ */ jsx6(Icon, { size: 18 })
             },
             entry.id
           );
         }) }),
-        showRemove && /* @__PURE__ */ jsx4(
+        showRemove && /* @__PURE__ */ jsx6(
           "button",
           {
             className: "cursor-pointer mt-2 w-full rounded px-2 py-1.5 text-center text-xs text-base-contrast-light hover:bg-base-accent hover:text-base-contrast",
@@ -445,7 +458,7 @@ function IconPicker({ selected, onSelect, onClose, showRemove = true }) {
 // src/components/sections/IconList/DoDontToggle.tsx
 import { useEffect as useEffect3, useRef as useRef2 } from "react";
 import { Check, X } from "lucide-react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function DoDontToggle({ value, onSelect, onClose }) {
   const panelRef = useRef2(null);
   useEffect3(() => {
@@ -455,13 +468,13 @@ function DoDontToggle({ value, onSelect, onClose }) {
     document.addEventListener("mousedown", handleMouseDown);
     return () => document.removeEventListener("mousedown", handleMouseDown);
   }, [onClose]);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       ref: panelRef,
       className: "absolute z-50 w-44 rounded-lg border border-base-200 bg-base p-2 shadow-lg",
-      children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-3 gap-2", children: [
-        /* @__PURE__ */ jsxs4(
+      children: /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-3 gap-2", children: [
+        /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -473,12 +486,12 @@ function DoDontToggle({ value, onSelect, onClose }) {
             ),
             onClick: () => onSelect(void 0),
             children: [
-              /* @__PURE__ */ jsx5("span", { className: "flex h-5 w-5 items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" }),
-              /* @__PURE__ */ jsx5("span", { className: "text-xs font-medium", children: "None" })
+              /* @__PURE__ */ jsx7("span", { className: "flex h-5 w-5 items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" }),
+              /* @__PURE__ */ jsx7("span", { className: "text-xs font-medium", children: "None" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -490,12 +503,12 @@ function DoDontToggle({ value, onSelect, onClose }) {
             ),
             onClick: () => onSelect("do"),
             children: [
-              /* @__PURE__ */ jsx5(Check, { size: 20 }),
-              /* @__PURE__ */ jsx5("span", { className: "text-xs font-medium", children: "Do" })
+              /* @__PURE__ */ jsx7(Check, { size: 20 }),
+              /* @__PURE__ */ jsx7("span", { className: "text-xs font-medium", children: "Do" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -507,8 +520,8 @@ function DoDontToggle({ value, onSelect, onClose }) {
             ),
             onClick: () => onSelect("dont"),
             children: [
-              /* @__PURE__ */ jsx5(X, { size: 20 }),
-              /* @__PURE__ */ jsx5("span", { className: "text-xs font-medium", children: "Don't" })
+              /* @__PURE__ */ jsx7(X, { size: 20 }),
+              /* @__PURE__ */ jsx7("span", { className: "text-xs font-medium", children: "Don't" })
             ]
           }
         )
@@ -518,7 +531,7 @@ function DoDontToggle({ value, onSelect, onClose }) {
 }
 
 // src/components/sections/IconList/IconList.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function IconList({
   items,
   icon = null,
@@ -544,7 +557,7 @@ function IconList({
     [onChange, onItemsChange, icon, showLabel, stackText, dodont]
   );
   if (!isEditMode) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx8(
       ViewIconList,
       {
         items,
@@ -558,7 +571,7 @@ function IconList({
       }
     );
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8(
     EditIconList,
     {
       items,
@@ -600,10 +613,10 @@ function ViewIconList({
   iconClassName
 }) {
   const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon, dodont));
-  return /* @__PURE__ */ jsx6("div", { className: "grid gap-4 pb-4", children: items.map((item, i) => {
+  return /* @__PURE__ */ jsx8("div", { className: "grid gap-4 pb-4", children: items.map((item, i) => {
     const iconEntry = resolveIcon(item, defaultIcon, dodont);
     const iconColor = resolveIconColor(item, iconClassName, dodont);
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         className: cn(
@@ -611,25 +624,25 @@ function ViewIconList({
           hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1"
         ),
         children: [
-          hasAnyIcon && /* @__PURE__ */ jsx6(
+          hasAnyIcon && /* @__PURE__ */ jsx8(
             "div",
             {
               "data-testid": "icon-list-icon",
               className: cn("flex items-start pt-0.5", iconColor),
-              children: iconEntry && /* @__PURE__ */ jsx6(iconEntry.icon, { size: 18 })
+              children: iconEntry && /* @__PURE__ */ jsx8(iconEntry.icon, { size: 18 })
             }
           ),
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsxs6(
             "div",
             {
               "data-testid": "icon-list-content",
               className: stackText ? "flex flex-col" : void 0,
               children: [
-                showLabel && /* @__PURE__ */ jsxs5("span", { className: labelClassName, children: [
+                showLabel && /* @__PURE__ */ jsxs6("span", { className: labelClassName, children: [
                   item.label,
                   !stackText && " "
                 ] }),
-                /* @__PURE__ */ jsx6("span", { className: textClassName, children: item.text })
+                /* @__PURE__ */ jsx8("span", { className: textClassName, children: item.text })
               ]
             }
           )
@@ -655,7 +668,7 @@ function EditIconList({
     onChange: onItemsChange,
     createItem: () => ({ label: "", text: "" })
   });
-  const [dragState, setDragState] = useState3({ sourceId: null, targetId: null });
+  const [dragState, setDragState] = useState4({ sourceId: null, targetId: null });
   const updateItem = useCallback(
     (index, patch) => {
       const updated = wrappedItems.map(
@@ -678,8 +691,8 @@ function EditIconList({
     [wrappedItems, onItemsChange]
   );
   const hasAnyIcon = true;
-  return /* @__PURE__ */ jsxs5("div", { className: "group/list relative grid gap-4 pb-4", children: [
-    wrappedItems.map((wrapped, index) => /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs6("div", { className: "group/list relative grid gap-4 pb-4", children: [
+    wrappedItems.map((wrapped, index) => /* @__PURE__ */ jsx8(
       EditableRow,
       {
         id: wrapped.id,
@@ -702,7 +715,7 @@ function EditIconList({
       },
       wrapped.id
     )),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx8(
       TrailingDropZone,
       {
         index: wrappedItems.length,
@@ -711,10 +724,10 @@ function EditIconList({
         onReorder
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx8(
       IconButton,
       {
-        icon: /* @__PURE__ */ jsx6(AddIcon, { size: 16 }),
+        icon: /* @__PURE__ */ jsx8(AddIcon, { size: 16 }),
         label: "Add item",
         size: "lg",
         intent: "primary",
@@ -745,10 +758,10 @@ function EditableRow({
 }) {
   const rowRef = useRef3(null);
   const handleRef = useRef3(null);
-  const [iconHover, setIconHover] = useState3(false);
-  const [pickerOpen, setPickerOpen] = useState3(false);
-  const [dodontOpen, setDodontOpen] = useState3(false);
-  const [editingSuppressed, setEditingSuppressed] = useState3(false);
+  const [iconHover, setIconHover] = useState4(false);
+  const [pickerOpen, setPickerOpen] = useState4(false);
+  const [dodontOpen, setDodontOpen] = useState4(false);
+  const [editingSuppressed, setEditingSuppressed] = useState4(false);
   const iconEntry = resolveIcon(item, defaultIcon, dodont);
   const effectiveIconId = item.icon ?? defaultIcon ?? null;
   const iconColor = resolveIconColor(item, iconClassName, dodont);
@@ -796,7 +809,7 @@ function EditableRow({
       setEditingSuppressed(true);
     }
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: rowRef,
@@ -809,7 +822,7 @@ function EditableRow({
       onInput: onEditableActivity,
       onMouseMove: () => setEditingSuppressed(false),
       children: [
-        hasAnyIcon && /* @__PURE__ */ jsxs5(
+        hasAnyIcon && /* @__PURE__ */ jsxs6(
           "div",
           {
             "data-testid": "icon-list-icon",
@@ -817,7 +830,7 @@ function EditableRow({
             onMouseEnter: () => setIconHover(true),
             onMouseLeave: () => setIconHover(false),
             children: [
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx8(
                 "button",
                 {
                   className: "cursor-pointer transition-opacity hover:opacity-70",
@@ -826,10 +839,10 @@ function EditableRow({
                     setPickerOpen((prev) => !prev);
                     setDodontOpen(false);
                   },
-                  children: iconHover && !pickerOpen ? /* @__PURE__ */ jsx6(Pencil, { size: 18, className: "text-base-contrast-light" }) : iconEntry ? /* @__PURE__ */ jsx6(iconEntry.icon, { size: 18 }) : /* @__PURE__ */ jsx6("span", { className: "flex h-[18px] w-[18px] items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" })
+                  children: iconHover && !pickerOpen ? /* @__PURE__ */ jsx8(Pencil, { size: 18, className: "text-base-contrast-light" }) : iconEntry ? /* @__PURE__ */ jsx8(iconEntry.icon, { size: 18 }) : /* @__PURE__ */ jsx8("span", { className: "flex h-[18px] w-[18px] items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" })
                 }
               ),
-              pickerOpen && /* @__PURE__ */ jsx6("div", { className: "absolute top-full left-0 z-50 mt-1", children: /* @__PURE__ */ jsx6(
+              pickerOpen && /* @__PURE__ */ jsx8("div", { className: "absolute top-full left-0 z-50 mt-1", children: /* @__PURE__ */ jsx8(
                 IconPicker,
                 {
                   selected: effectiveIconId,
@@ -848,8 +861,8 @@ function EditableRow({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs5("div", { className: stackText ? "flex flex-col" : void 0, children: [
-          showLabel && /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsxs6("div", { className: stackText ? "flex flex-col" : void 0, children: [
+          showLabel && /* @__PURE__ */ jsx8(
             EditablePlainText,
             {
               tag: "span",
@@ -860,7 +873,7 @@ function EditableRow({
               className: cn(labelClassName, !stackText && "mr-1")
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx8(
             EditablePlainText,
             {
               tag: "span",
@@ -872,7 +885,7 @@ function EditableRow({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "div",
           {
             className: cn(
@@ -880,8 +893,8 @@ function EditableRow({
               editingSuppressed ? "opacity-0 pointer-events-none" : "opacity-0 group-hover/row:opacity-100 no-hover:opacity-100"
             ),
             children: [
-              /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx8(
                   "button",
                   {
                     "aria-label": "Set do/don't",
@@ -890,10 +903,10 @@ function EditableRow({
                       setPickerOpen(false);
                     },
                     className: "cursor-pointer rounded bg-base/80 p-1 shadow-sm text-base-contrast-light hover:text-primary",
-                    children: item.dodont === "do" ? /* @__PURE__ */ jsx6(Check2, { size: 14, className: "text-green-600" }) : item.dodont === "dont" ? /* @__PURE__ */ jsx6(X2, { size: 14, className: "text-red-600" }) : /* @__PURE__ */ jsx6(Pencil, { size: 14 })
+                    children: item.dodont === "do" ? /* @__PURE__ */ jsx8(Check2, { size: 14, className: "text-green-600" }) : item.dodont === "dont" ? /* @__PURE__ */ jsx8(X2, { size: 14, className: "text-red-600" }) : /* @__PURE__ */ jsx8(Pencil, { size: 14 })
                   }
                 ),
-                dodontOpen && /* @__PURE__ */ jsx6("div", { className: "absolute top-full right-0 z-50 mt-1", children: /* @__PURE__ */ jsx6(
+                dodontOpen && /* @__PURE__ */ jsx8("div", { className: "absolute top-full right-0 z-50 mt-1", children: /* @__PURE__ */ jsx8(
                   DoDontToggle,
                   {
                     value: item.dodont,
@@ -905,30 +918,30 @@ function EditableRow({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx8(
                 IconButton,
                 {
                   ref: handleRef,
-                  icon: /* @__PURE__ */ jsx6(DragHandle, { size: 14 }),
+                  icon: /* @__PURE__ */ jsx8(DragHandle, { size: 14 }),
                   label: "Drag to reorder",
                   size: "sm",
                   className: "cursor-grab rounded bg-base/80 p-1 shadow-sm text-base-contrast-light/80 hover:text-base-contrast active:cursor-grabbing",
                   tabIndex: -1
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx8(
                 "button",
                 {
                   "aria-label": "Duplicate item",
                   onClick: onDuplicate,
                   className: "cursor-pointer rounded bg-base/80 p-1 shadow-sm text-base-contrast-light hover:text-primary",
-                  children: /* @__PURE__ */ jsx6(CopyPlus, { size: 14 })
+                  children: /* @__PURE__ */ jsx8(CopyPlus, { size: 14 })
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx8(
                 IconButton,
                 {
-                  icon: /* @__PURE__ */ jsx6(DeleteIcon, { size: 14 }),
+                  icon: /* @__PURE__ */ jsx8(DeleteIcon, { size: 14 }),
                   label: "Delete item",
                   size: "sm",
                   intent: "destructive",
@@ -978,7 +991,7 @@ function TrailingDropZone({
     };
   }, [index, onReorder, setDragState]);
   const isDropTarget = dragState.targetId === trailingId && dragState.sourceId !== null;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       ref,
@@ -988,9 +1001,9 @@ function TrailingDropZone({
 }
 
 // src/components/sections/IconList/IconListSettings.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { Check as Check3, X as X3 } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function IconListSettings({
   icon: initialIcon,
   showLabel: initialShowLabel,
@@ -998,15 +1011,15 @@ function IconListSettings({
   dodont: initialDodont,
   onChange
 }) {
-  const [icon, setIcon] = useState4(initialIcon);
-  const [showLabel, setShowLabel] = useState4(initialShowLabel);
-  const [stackText, setStackText] = useState4(initialStackText);
-  const [dodont, setDodont] = useState4(initialDodont);
-  const [pickerOpen, setPickerOpen] = useState4(false);
+  const [icon, setIcon] = useState5(initialIcon);
+  const [showLabel, setShowLabel] = useState5(initialShowLabel);
+  const [stackText, setStackText] = useState5(initialStackText);
+  const [dodont, setDodont] = useState5(initialDodont);
+  const [pickerOpen, setPickerOpen] = useState5(false);
   const emit = (overrides) => onChange({ content: {}, options: { icon, showLabel, stackText, dodont, ...overrides } });
   const iconEntry = icon ? getIcon(icon) : null;
   const dodontActive = dodont === "do" || dodont === "dont";
-  const tile = (value, label, aria, glyph, tint) => /* @__PURE__ */ jsxs6(
+  const tile = (value, label, aria, glyph, tint) => /* @__PURE__ */ jsxs7(
     "button",
     {
       type: "button",
@@ -1023,29 +1036,29 @@ function IconListSettings({
       },
       children: [
         glyph,
-        /* @__PURE__ */ jsx7("span", { className: "text-xs font-medium", children: label })
+        /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium", children: label })
       ]
     }
   );
-  return /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs6("div", { children: [
-      /* @__PURE__ */ jsx7(FormLabel, { children: "Do / Don't list" }),
-      /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-3 gap-2", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsx9(FormLabel, { children: "Do / Don't list" }),
+      /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-3 gap-2", children: [
         tile(
           void 0,
           "None",
           "No do/don't",
-          /* @__PURE__ */ jsx7("span", { className: "flex h-5 w-5 items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" }),
+          /* @__PURE__ */ jsx9("span", { className: "flex h-5 w-5 items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" }),
           "text-base-contrast-light"
         ),
-        tile("do", "Do", "Do list", /* @__PURE__ */ jsx7(Check3, { size: 20 }), "text-green-600"),
-        tile("dont", "Don't", "Don't list", /* @__PURE__ */ jsx7(X3, { size: 20 }), "text-red-600")
+        tile("do", "Do", "Do list", /* @__PURE__ */ jsx9(Check3, { size: 20 }), "text-green-600"),
+        tile("dont", "Don't", "Don't list", /* @__PURE__ */ jsx9(X3, { size: 20 }), "text-red-600")
       ] })
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx7(FormLabel, { htmlFor: "icon-picker-btn", children: "Default Icon" }),
-      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx9(FormLabel, { htmlFor: "icon-picker-btn", children: "Default Icon" }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs7(
           "button",
           {
             id: "icon-picker-btn",
@@ -1058,12 +1071,12 @@ function IconListSettings({
               if (!dodontActive) setPickerOpen((prev) => !prev);
             },
             children: [
-              iconEntry && /* @__PURE__ */ jsx7(iconEntry.icon, { size: 16 }),
-              /* @__PURE__ */ jsx7("span", { children: iconEntry?.label ?? "None" })
+              iconEntry && /* @__PURE__ */ jsx9(iconEntry.icon, { size: 16 }),
+              /* @__PURE__ */ jsx9("span", { children: iconEntry?.label ?? "None" })
             ]
           }
         ),
-        icon && !dodontActive && /* @__PURE__ */ jsx7(
+        icon && !dodontActive && /* @__PURE__ */ jsx9(
           "button",
           {
             className: "cursor-pointer text-xs text-base-contrast-light hover:text-base-contrast",
@@ -1075,8 +1088,8 @@ function IconListSettings({
           }
         )
       ] }),
-      dodontActive && /* @__PURE__ */ jsx7("p", { className: "mt-1 text-xs text-base-contrast-light/70", children: "Whole-list Do/Don't overrides the default icon." }),
-      pickerOpen && !dodontActive && /* @__PURE__ */ jsx7("div", { className: "absolute top-full left-0 z-50 mt-1", children: /* @__PURE__ */ jsx7(
+      dodontActive && /* @__PURE__ */ jsx9("p", { className: "mt-1 text-xs text-base-contrast-light/70", children: "Whole-list Do/Don't overrides the default icon." }),
+      pickerOpen && !dodontActive && /* @__PURE__ */ jsx9("div", { className: "absolute top-full left-0 z-50 mt-1", children: /* @__PURE__ */ jsx9(
         IconPicker,
         {
           selected: icon,
@@ -1091,7 +1104,7 @@ function IconListSettings({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(
       Checkbox,
       {
         checked: showLabel,
@@ -1102,7 +1115,7 @@ function IconListSettings({
         label: "Show labels"
       }
     ),
-    showLabel && /* @__PURE__ */ jsx7(
+    showLabel && /* @__PURE__ */ jsx9(
       Checkbox,
       {
         checked: stackText,
@@ -1117,7 +1130,7 @@ function IconListSettings({
 }
 
 // src/components/sections/IconList/index.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var IconListItemSchema = z3.object({
   label: z3.string(),
   text: z3.string(),
@@ -1141,7 +1154,7 @@ var schema2 = z3.object({
 var doDontListPreset = {
   id: "do_dont_list",
   label: "Do / Don't list",
-  icon: /* @__PURE__ */ jsx8(Columns2, { size: 18 }),
+  icon: /* @__PURE__ */ jsx10(Columns2, { size: 18 }),
   build: (newId) => ({
     type: "container",
     content: {
@@ -1158,10 +1171,10 @@ var IconList_default = defineSection({
   type: "icon_list",
   category: "brand-guide",
   label: "Icon List",
-  icon: /* @__PURE__ */ jsx8(List, { size: 18 }),
+  icon: /* @__PURE__ */ jsx10(List, { size: 18 }),
   schema: schema2,
   authoringNote: "A list of labeled items, optionally with per-item icons and do/don't markers. Use for feature lists, guidelines, or do/don't guidance.",
-  component: ({ content, options, onChange }) => /* @__PURE__ */ jsx8(
+  component: ({ content, options, onChange }) => /* @__PURE__ */ jsx10(
     IconList,
     {
       items: content.content.items,
@@ -1187,11 +1200,11 @@ import { Image as ImageIcon } from "lucide-react";
 
 // src/components/sections/DoDontMedia/DoDontMediaBlock.tsx
 import { Check as Check4, X as X4 } from "lucide-react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function DoDontMediaBlock({ refValue, options, link, dodont, isEditMode, onRefChange }) {
-  return /* @__PURE__ */ jsxs7("div", { children: [
-    /* @__PURE__ */ jsx9("div", { className: "flex h-10 items-center justify-center pb-1", children: dodont === "do" ? /* @__PURE__ */ jsx9(Check4, { size: 28, className: "text-green-600" }) : /* @__PURE__ */ jsx9(X4, { size: 28, className: "text-red-600" }) }),
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs8("div", { children: [
+    /* @__PURE__ */ jsx11("div", { className: "flex h-10 items-center justify-center pb-1", children: dodont === "do" ? /* @__PURE__ */ jsx11(Check4, { size: 28, className: "text-green-600" }) : /* @__PURE__ */ jsx11(X4, { size: 28, className: "text-red-600" }) }),
+    /* @__PURE__ */ jsx11(
       MediaBlock,
       {
         refValue,
@@ -1205,7 +1218,7 @@ function DoDontMediaBlock({ refValue, options, link, dodont, isEditMode, onRefCh
 }
 
 // src/components/sections/DoDontMedia/index.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var schema3 = z4.object({
   type: z4.literal("dodont_media"),
   content: z4.object({
@@ -1228,10 +1241,10 @@ var DoDontMedia_default = defineSection({
   type: "dodont_media",
   label: "Do / Don't Media",
   category: "brand-guide",
-  icon: /* @__PURE__ */ jsx10(ImageIcon, { size: 18 }),
+  icon: /* @__PURE__ */ jsx12(ImageIcon, { size: 18 }),
   schema: schema3,
   authoringNote: "A single image or video tagged as a 'do' or 'don't' example. Use inside a Container to build side-by-side do/don't comparisons of visual usage.",
-  component: ({ content, options, onChange }) => /* @__PURE__ */ jsx10(
+  component: ({ content, options, onChange }) => /* @__PURE__ */ jsx12(
     DoDontMediaBlock,
     {
       refValue: content.content.ref,