@drawnagency/primitives 0.1.61 → 0.1.63

package/dist/{chunk-UQ4OYRW7.js → chunk-2BHPWO7M.js}

@@ -1,10 +1,17 @@
+import {
+  Checkbox,
+  FormLabel,
+  Input
+} from "./chunk-5THS4K5D.js";
+import {
+  usePages
+} from "./chunk-4E66N6UV.js";
 import {
   DeleteIcon,
   DragHandle,
   IconButton,
-  SettingsIcon,
-  usePages
-} from "./chunk-WLMJCNU7.js";
+  SettingsIcon
+} from "./chunk-I5737FJY.js";
 import {
   cn
 } from "./chunk-7EOSDFS3.js";
@@ -79,58 +86,12 @@ function SettingsButton({ onClick }) {
 }
 
 // src/components/editor/SettingsForm.tsx
-import { useId as useId4, useState as useState2 } from "react";
-
-// src/components/shared/Input.tsx
-import { forwardRef as forwardRef2, useId } from "react";
-
-// src/components/shared/FormLabel.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function FormLabel({ htmlFor, children, className }) {
-  return /* @__PURE__ */ jsx5(
-    "label",
-    {
-      htmlFor,
-      className: cn("mb-1.5 block text-sm font-medium text-base-contrast", className),
-      children
-    }
-  );
-}
-
-// src/components/shared/Input.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var Input = forwardRef2(function Input2({ label, value, onChange, type = "text", className, disabled, error, ...rest }, ref) {
-  const id = useId();
-  const errorId = `${id}-error`;
-  return /* @__PURE__ */ jsxs3("div", { className, children: [
-    /* @__PURE__ */ jsx6(FormLabel, { htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx6(
-      "input",
-      {
-        ref,
-        id,
-        type,
-        value,
-        onChange: (e) => onChange(e.target.value),
-        disabled,
-        "aria-invalid": error ? true : void 0,
-        "aria-describedby": error ? errorId : void 0,
-        className: cn(
-          "w-full rounded border bg-base px-3 py-2 text-sm text-base-contrast focus:outline-none focus:ring-1",
-          error ? "border-red-600 focus:border-red-600 focus:ring-red-600" : "border-base-200 focus:border-base-contrast focus:ring-base-contrast",
-          disabled && "cursor-not-allowed opacity-50"
-        ),
-        ...rest
-      }
-    ),
-    error && /* @__PURE__ */ jsx6("p", { id: errorId, className: "mt-1 text-xs text-red-600", children: error })
-  ] });
-});
+import { useId as useId2, useState as useState2 } from "react";
 
 // src/components/shared/Select.tsx
-import { useId as useId2 } from "react";
+import { useId } from "react";
 import { ChevronDown } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function Select({
   label,
   value,
@@ -140,11 +101,11 @@ function Select({
   className,
   selectClassName
 }) {
-  const id = useId2();
-  return /* @__PURE__ */ jsxs4("div", { className, children: [
-    label && /* @__PURE__ */ jsx7(FormLabel, { htmlFor: id, children: label }),
-    /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx7(
+  const id = useId();
+  return /* @__PURE__ */ jsxs3("div", { className, children: [
+    label && /* @__PURE__ */ jsx5(FormLabel, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx5(
         "select",
         {
           id,
@@ -157,10 +118,10 @@ function Select({
             disabled && "cursor-not-allowed opacity-50",
             selectClassName
           ),
-          children: options.map((opt) => /* @__PURE__ */ jsx7("option", { value: opt.value, children: opt.label }, opt.value))
+          children: options.map((opt) => /* @__PURE__ */ jsx5("option", { value: opt.value, children: opt.label }, opt.value))
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx5(
         ChevronDown,
         {
           size: 14,
@@ -171,78 +132,8 @@ function Select({
   ] });
 }
 
-// src/components/shared/Checkbox.tsx
-import { useId as useId3 } from "react";
-import { Check } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-function Checkbox({
-  checked,
-  onChange,
-  label,
-  description,
-  disabled,
-  className,
-  startAdornment,
-  align = "start"
-}) {
-  const id = useId3();
-  return /* @__PURE__ */ jsxs5(
-    "label",
-    {
-      htmlFor: id,
-      className: cn(
-        "flex cursor-pointer gap-3 select-none hover:opacity-80",
-        align === "start" ? "items-start" : "items-center",
-        disabled && "cursor-not-allowed opacity-50",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs5(
-          "span",
-          {
-            className: cn(
-              "relative flex h-5 w-5 shrink-0 items-center justify-center",
-              align === "start" && "mt-0.5"
-            ),
-            children: [
-              /* @__PURE__ */ jsx8(
-                "input",
-                {
-                  id,
-                  type: "checkbox",
-                  checked,
-                  disabled,
-                  onChange: (e) => onChange(e.target.checked),
-                  className: "sr-only"
-                }
-              ),
-              /* @__PURE__ */ jsx8(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: cn(
-                    "flex h-5 w-5 items-center justify-center rounded border transition-colors",
-                    checked ? "border-primary bg-primary text-primary-contrast" : "border-base-300 bg-base hover:border-primary",
-                    disabled && "pointer-events-none"
-                  ),
-                  children: checked && /* @__PURE__ */ jsx8(Check, { size: 14, strokeWidth: 3 })
-                }
-              )
-            ]
-          }
-        ),
-        startAdornment,
-        /* @__PURE__ */ jsxs5("div", { className: "text-sm", children: [
-          /* @__PURE__ */ jsx8("span", { className: "font-medium text-base-contrast", children: label }),
-          description && /* @__PURE__ */ jsx8("span", { className: "block text-base-contrast-light", children: description })
-        ] })
-      ]
-    }
-  );
-}
-
 // src/components/shared/LinkField.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var TARGET_OPTIONS = [
   { label: "Same tab (_self)", value: "_self" },
   { label: "New tab (_blank)", value: "_blank" }
@@ -256,9 +147,9 @@ function LinkField({ label, value, onChange }) {
   }
   const pageId = isInternal ? value.pageId : "";
   const headings = pageId ? getPageHeadings(pageId) : [];
-  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsx9(FormLabel, { children: label }),
-    /* @__PURE__ */ jsx9("div", { className: "flex gap-2", role: "tablist", children: ["external", "internal"].map((kind) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx6(FormLabel, { children: label }),
+    /* @__PURE__ */ jsx6("div", { className: "flex gap-2", role: "tablist", children: ["external", "internal"].map((kind) => /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -273,7 +164,7 @@ function LinkField({ label, value, onChange }) {
       },
       kind
     )) }),
-    value.kind === "external" ? /* @__PURE__ */ jsx9(
+    value.kind === "external" ? /* @__PURE__ */ jsx6(
       Input,
       {
         label: "URL",
@@ -281,8 +172,8 @@ function LinkField({ label, value, onChange }) {
         placeholder: "https://...",
         onChange: (href) => onChange({ kind: "external", href, target: value.target })
       }
-    ) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
-      /* @__PURE__ */ jsx9(
+    ) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx6(
         Select,
         {
           label: "Page",
@@ -291,7 +182,7 @@ function LinkField({ label, value, onChange }) {
           onChange: (pid) => onChange({ kind: "internal", pageId: pid, anchorSectionId: null, target: value.target })
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx6(
         Select,
         {
           label: "Section",
@@ -302,7 +193,7 @@ function LinkField({ label, value, onChange }) {
         }
       )
     ] }),
-    value.kind === "external" && /* @__PURE__ */ jsx9(
+    value.kind === "external" && /* @__PURE__ */ jsx6(
       Select,
       {
         label: "Opens in",
@@ -316,7 +207,7 @@ function LinkField({ label, value, onChange }) {
 
 // src/components/shared/Tabs.tsx
 import { useState } from "react";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTabBar }) {
   const [uncontrolledId, setUncontrolledId] = useState(defaultTabId ?? tabs[0]?.id);
   const isControlled = activeTabId !== void 0;
@@ -326,8 +217,8 @@ function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTabBar })
     if (!isControlled) setUncontrolledId(id);
     onTabChange?.(id);
   }
-  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx10("div", { className: cn("border-b border-base-200", fullBleedTabBar && "-mx-6 px-6"), children: /* @__PURE__ */ jsx10("div", { className: "flex", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx7("div", { className: cn("border-b border-base-200", fullBleedTabBar && "-mx-6 px-6"), children: /* @__PURE__ */ jsx7("div", { className: "flex", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -342,12 +233,12 @@ function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTabBar })
       },
       tab.id
     )) }) }),
-    /* @__PURE__ */ jsx10("div", { role: "tabpanel", children: activeTab?.content })
+    /* @__PURE__ */ jsx7("div", { role: "tabpanel", children: activeTab?.content })
   ] });
 }
 
 // src/components/editor/SettingsForm.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function resolveValues(schema, values) {
   const resolved = {};
   for (const [key, field] of Object.entries(schema)) {
@@ -386,10 +277,10 @@ function RangeField({
   value,
   onChange
 }) {
-  const id = useId4();
-  return /* @__PURE__ */ jsxs8("div", { children: [
-    /* @__PURE__ */ jsx11(FormLabel, { htmlFor: id, children: field.label }),
-    /* @__PURE__ */ jsx11(
+  const id = useId2();
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsx8(FormLabel, { htmlFor: id, children: field.label }),
+    /* @__PURE__ */ jsx8(
       "input",
       {
         id,
@@ -409,7 +300,7 @@ function RangeField({
 function renderField(key, field, value, handleFieldChange) {
   switch (field.type) {
     case "text":
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx8(
         Input,
         {
           label: field.label,
@@ -420,7 +311,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "number":
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx8(
         Input,
         {
           label: field.label,
@@ -431,7 +322,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "checkbox":
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx8(
         Checkbox,
         {
           label: field.label,
@@ -441,7 +332,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "select":
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx8(
         Select,
         {
           label: field.label,
@@ -452,7 +343,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "range":
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx8(
         RangeField,
         {
           field,
@@ -462,7 +353,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "link":
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx8(
         LinkField,
         {
           label: field.label,
@@ -487,12 +378,12 @@ function SettingsForm({ schema, values, onChange, tabs }) {
     const listed = new Set(tabs.flatMap((t) => t.fields));
     const otherKeys = Object.keys(schema).filter((key) => !listed.has(key));
     const tabItems = [
-      ...tabs.map((t) => ({ id: t.label, label: t.label, content: /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-4", children: fields(t.fields) }) })),
-      ...otherKeys.length > 0 ? [{ id: "__other__", label: "Other", content: /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-4", children: fields(otherKeys) }) }] : []
+      ...tabs.map((t) => ({ id: t.label, label: t.label, content: /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-4", children: fields(t.fields) }) })),
+      ...otherKeys.length > 0 ? [{ id: "__other__", label: "Other", content: /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-4", children: fields(otherKeys) }) }] : []
     ];
-    return /* @__PURE__ */ jsx11(Tabs, { tabs: tabItems, fullBleedTabBar: true });
+    return /* @__PURE__ */ jsx8(Tabs, { tabs: tabItems, fullBleedTabBar: true });
   }
-  return /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-4", children: Object.entries(schema).map(([key, field]) => renderField(key, field, local[key], handleFieldChange)) });
+  return /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-4", children: Object.entries(schema).map(([key, field]) => renderField(key, field, local[key], handleFieldChange)) });
 }
 
 // src/components/shared/Popover.tsx
@@ -547,7 +438,7 @@ function useFocusTrap(ref, active) {
 }
 
 // src/components/shared/Popover.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Popover({
   isOpen,
   onClose,
@@ -597,7 +488,7 @@ function Popover({
   }, [isOpen, onClose, anchorRef]);
   if (!isOpen) return null;
   const effectiveAlign = align === "auto" ? resolvedAlign : align;
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       ref: panelRef,
@@ -614,11 +505,11 @@ function Popover({
 }
 
 // src/components/shared/PopoverItem.tsx
-import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var PopoverItem = forwardRef3(
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var PopoverItem = forwardRef2(
   function PopoverItem2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx10(
       "button",
       {
         ref,
@@ -652,9 +543,6 @@ function canDropBlock(source, dropContainerId) {
 }
 
 export {
-  FormLabel,
-  Input,
-  Checkbox,
   Tooltip,
   Kbd,
   DragHandle2 as DragHandle,

package/dist/chunk-4E66N6UV.js

@@ -0,0 +1,10 @@
+// src/components/shared/PagesContext.tsx
+import { createContext, useContext } from "react";
+var PagesContext = createContext({ pages: [], getPageHeadings: () => [] });
+function usePages() {
+  return useContext(PagesContext);
+}
+
+export {
+  usePages
+};

package/dist/chunk-5THS4K5D.js

@@ -0,0 +1,123 @@
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/shared/FormLabel.tsx
+import { jsx } from "react/jsx-runtime";
+function FormLabel({ htmlFor, children, className }) {
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      htmlFor,
+      className: cn("mb-1.5 block text-sm font-medium text-base-contrast", className),
+      children
+    }
+  );
+}
+
+// src/components/shared/Input.tsx
+import { forwardRef, useId } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Input = forwardRef(function Input2({ label, value, onChange, type = "text", className, disabled, error, ...rest }, ref) {
+  const id = useId();
+  const errorId = `${id}-error`;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx2(FormLabel, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        ref,
+        id,
+        type,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        disabled,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? errorId : void 0,
+        className: cn(
+          "w-full rounded border bg-base px-3 py-2 text-sm text-base-contrast focus:outline-none focus:ring-1",
+          error ? "border-red-600 focus:border-red-600 focus:ring-red-600" : "border-base-200 focus:border-base-contrast focus:ring-base-contrast",
+          disabled && "cursor-not-allowed opacity-50"
+        ),
+        ...rest
+      }
+    ),
+    error && /* @__PURE__ */ jsx2("p", { id: errorId, className: "mt-1 text-xs text-red-600", children: error })
+  ] });
+});
+
+// src/components/shared/Checkbox.tsx
+import { useId as useId2 } from "react";
+import { Check } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Checkbox({
+  checked,
+  onChange,
+  label,
+  description,
+  disabled,
+  className,
+  startAdornment,
+  align = "start"
+}) {
+  const id = useId2();
+  return /* @__PURE__ */ jsxs2(
+    "label",
+    {
+      htmlFor: id,
+      className: cn(
+        "flex cursor-pointer gap-3 select-none hover:opacity-80",
+        align === "start" ? "items-start" : "items-center",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            className: cn(
+              "relative flex h-5 w-5 shrink-0 items-center justify-center",
+              align === "start" && "mt-0.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  id,
+                  type: "checkbox",
+                  checked,
+                  disabled,
+                  onChange: (e) => onChange(e.target.checked),
+                  className: "sr-only"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "flex h-5 w-5 items-center justify-center rounded border transition-colors",
+                    checked ? "border-primary bg-primary text-primary-contrast" : "border-base-300 bg-base hover:border-primary",
+                    disabled && "pointer-events-none"
+                  ),
+                  children: checked && /* @__PURE__ */ jsx3(Check, { size: 14, strokeWidth: 3 })
+                }
+              )
+            ]
+          }
+        ),
+        startAdornment,
+        /* @__PURE__ */ jsxs2("div", { className: "text-sm", children: [
+          /* @__PURE__ */ jsx3("span", { className: "font-medium text-base-contrast", children: label }),
+          description && /* @__PURE__ */ jsx3("span", { className: "block text-base-contrast-light", children: description })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  FormLabel,
+  Input,
+  Checkbox
+};

package/dist/{chunk-TG43X7JO.js → chunk-75P6HWPN.js}

@@ -3,11 +3,31 @@ var RETIRED = /* @__PURE__ */ new Set(["split_content", "media_grid", "do_dont_g
 function upgradeLegacySection(raw) {
   if (!raw || typeof raw !== "object") return raw;
   const section = raw;
-  if (!RETIRED.has(section.type)) return raw;
-  if (section.type === "split_content") return upgradeSplitContent(section);
-  if (section.type === "do_dont") return upgradeDoDont(section);
+  const type = section.type;
+  if (type === "media" && hasDoDont(section)) return { ...section, type: "dodont_media" };
+  if (type === "container") return upgradeContainerChildren(section);
+  if (!RETIRED.has(type)) return raw;
+  if (type === "split_content") return upgradeSplitContent(section);
+  if (type === "do_dont") return upgradeDoDont(section);
   return upgradeGrid(section);
 }
+function hasDoDont(section) {
+  const content = section.content;
+  return !!content && typeof content === "object" && content.dodont != null;
+}
+function upgradeContainerChildren(section) {
+  const content = section.content;
+  const children = content && Array.isArray(content.children) ? content.children : null;
+  if (!children) return section;
+  let changed = false;
+  const mapped = children.map((child) => {
+    const up = upgradeLegacySection(child);
+    if (up !== child) changed = true;
+    return up;
+  });
+  if (!changed) return section;
+  return { ...section, content: { ...content, children: mapped } };
+}
 function buildRef(item, forceImage) {
   const type = forceImage ? "image" : item.type;
   const ref = { type, imageId: item.imageId ?? "" };
@@ -26,16 +46,20 @@ function buildRef(item, forceImage) {
 }
 function mapRefItem(item, parentId, index) {
   const content = {};
+  let type = "media";
   if (item.type === "linkedImage") {
     content.ref = buildRef(item, true);
     content.link = { kind: "external", href: item.href ?? "", target: item.target === "_blank" ? "_blank" : "_self" };
   } else if (item.type === "doDontImage") {
     content.ref = buildRef(item, true);
-    if (item.doDont !== void 0) content.dodont = item.doDont;
+    if (item.doDont !== void 0) {
+      content.dodont = item.doDont;
+      type = "dodont_media";
+    }
   } else {
     content.ref = buildRef(item, false);
   }
-  return { id: `${parentId}__media_${index}`, type: "media", content, options: {} };
+  return { id: `${parentId}__media_${index}`, type, content, options: {} };
 }
 function upgradeGrid(section) {
   const id = section.id;

package/dist/{chunk-ODCJQOVO.js → chunk-7IMQVDDJ.js}

@@ -1,6 +1,6 @@
 import {
   HexColorSchema
-} from "./chunk-BT7STGDW.js";
+} from "./chunk-TEYTLQVH.js";
 
 // src/schemas/audience.ts
 import { z } from "zod";