@drawnagency/primitives 0.1.113 → 0.1.115

package/dist/{chunk-6BZ2KNTP.js → chunk-NX7TFHA4.js}

@@ -1,32 +1,29 @@
 import {
-  Checkbox
-} from "./chunk-F2LYQPXV.js";
+  Kbd,
+  Tooltip
+} from "./chunk-JCDZAFX2.js";
 import {
-  LinkField,
-  Select
-} from "./chunk-K7DYZXVU.js";
+  Button
+} from "./chunk-GGYY3JQJ.js";
+import {
+  Checkbox,
+  Tabs
+} from "./chunk-JR24U7FJ.js";
 import {
-  DeleteIcon,
   DragHandle,
   FormLabel,
   Input,
-  SettingsIcon,
+  LinkField,
+  Select,
   useMediaLibrary,
   useResolvedMedia
-} from "./chunk-JH762VUH.js";
-import {
-  Kbd,
-  Tooltip
-} from "./chunk-IINIZBQB.js";
-import {
-  Button
-} from "./chunk-WUJ3XNFI.js";
+} from "./chunk-RIITGTV3.js";
 import {
   IconButton
 } from "./chunk-IIDKW7AV.js";
 import {
   formatFileSize
-} from "./chunk-FRE2CCLV.js";
+} from "./chunk-CDBURDPX.js";
 import {
   cn
 } from "./chunk-7EOSDFS3.js";
@@ -34,7 +31,7 @@ import {
 // src/components/editor/DragHandle.tsx
 import { forwardRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var DragHandle2 = forwardRef(function DragHandle3({ tooltipSide }, ref) {
+var DragHandle2 = forwardRef(function DragHandle3({ tooltipSide, tabIndex = -1, "aria-describedby": ariaDescribedBy }, ref) {
   return /* @__PURE__ */ jsx(Tooltip, { side: tooltipSide, content: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Kbd, { children: "Drag" }),
     " to move"
@@ -45,18 +42,20 @@ var DragHandle2 = forwardRef(function DragHandle3({ tooltipSide }, ref) {
       icon: /* @__PURE__ */ jsx(DragHandle, { size: 18 }),
       label: "Drag to reorder section",
       className: "pointer-events-auto cursor-grab active:cursor-grabbing rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast",
-      tabIndex: -1
+      tabIndex,
+      "aria-describedby": ariaDescribedBy
     }
   ) });
 });
 
 // src/components/editor/DeleteButton.tsx
+import { Trash2 } from "lucide-react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function DeleteButton({ onDelete }) {
   return /* @__PURE__ */ jsx2(
     IconButton,
     {
-      icon: /* @__PURE__ */ jsx2(DeleteIcon, { size: 16 }),
+      icon: /* @__PURE__ */ jsx2(Trash2, { size: 16 }),
       label: "Delete section",
       intent: "destructive",
       onClick: onDelete,
@@ -66,12 +65,13 @@ function DeleteButton({ onDelete }) {
 }
 
 // src/components/editor/SettingsButton.tsx
+import { Settings } from "lucide-react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function SettingsButton({ onClick }) {
   return /* @__PURE__ */ jsx3(
     IconButton,
     {
-      icon: /* @__PURE__ */ jsx3(SettingsIcon, { size: 16 }),
+      icon: /* @__PURE__ */ jsx3(Settings, { size: 16 }),
       label: "Section settings",
       onClick,
       className: "pointer-events-auto"
@@ -80,7 +80,7 @@ function SettingsButton({ onClick }) {
 }
 
 // src/components/editor/SettingsForm.tsx
-import { useId, useState as useState3 } from "react";
+import { useId, useState as useState2 } from "react";
 
 // src/components/shared/VideoSourceField.tsx
 import { useState } from "react";
@@ -196,7 +196,7 @@ function VideoSourceField({ value, onChange }) {
           }
         )
       ] }),
-      error ? /* @__PURE__ */ jsx4("p", { className: "text-xs text-red-600", children: error }) : null,
+      error ? /* @__PURE__ */ jsx4("p", { className: "text-xs text-danger", children: error }) : null,
       !error && fallback ? /* @__PURE__ */ jsx4("p", { className: "text-xs text-base-contrast-light/70", children: "Added \u2014 couldn't fetch exact dimensions, using 16:9." }) : null,
       value?.type === "external" && value.provider === "instagram" ? /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx4("span", { className: "text-xs text-base-contrast-light", children: "Aspect" }),
@@ -265,40 +265,141 @@ function DocumentSourceField({ value, onChange }) {
   ] });
 }
 
-// src/components/shared/Tabs.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTabBar }) {
-  const [uncontrolledId, setUncontrolledId] = useState2(defaultTabId ?? tabs[0]?.id);
-  const isControlled = activeTabId !== void 0;
-  const activeId = isControlled ? activeTabId : uncontrolledId;
-  const activeTab = tabs.find((t) => t.id === activeId) ?? tabs[0];
-  function handleSelect(id) {
-    if (!isControlled) setUncontrolledId(id);
-    onTabChange?.(id);
-  }
-  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx6("div", { className: cn("border-b border-base-200", fullBleedTabBar && "-mx-6 px-6"), children: /* @__PURE__ */ jsx6("div", { className: "flex", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx6(
+// src/components/shared/SegmentedControl.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function SegmentedControl({ options, value, onChange, className }) {
+  return /* @__PURE__ */ jsx6("div", { role: "radiogroup", className: cn("inline-flex rounded border border-base-200 bg-base-accent", className), children: options.map((option) => {
+    const selected = option.value === value;
+    return /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
-        role: "tab",
-        "aria-selected": activeTab?.id === tab.id,
-        onClick: () => handleSelect(tab.id),
+        role: "radio",
+        "aria-checked": selected,
+        "aria-label": option.label,
+        onClick: () => {
+          if (!selected) onChange(option.value);
+        },
         className: cn(
-          "cursor-pointer px-4 py-2 text-sm font-medium border-b-2 -mb-px",
-          activeTab?.id === tab.id ? "border-primary text-primary" : "border-transparent text-base-contrast-light hover:text-base-contrast"
+          "cursor-pointer px-3 py-1 text-xs font-medium transition-colors first:rounded-l last:rounded-r",
+          selected ? "bg-base-contrast text-base-accent" : "text-base-contrast-light hover:text-base-contrast"
         ),
-        children: tab.label
+        children: option.label
       },
-      tab.id
-    )) }) }),
-    /* @__PURE__ */ jsx6("div", { role: "tabpanel", className: cn("flex min-h-0 flex-1 flex-col px-px", fullBleedTabBar && "pt-4"), children: activeTab?.content })
+      option.value
+    );
+  }) });
+}
+
+// src/components/shared/ColorPicker.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ColorPicker({ value, onChange, label = "Color", className }) {
+  return /* @__PURE__ */ jsx7(
+    "label",
+    {
+      className: cn(
+        "inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-base-200 focus-within:outline focus-within:outline-2 focus-within:outline-base-contrast",
+        className
+      ),
+      style: { backgroundColor: value },
+      children: /* @__PURE__ */ jsx7(
+        "input",
+        {
+          type: "color",
+          "aria-label": label,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          className: "sr-only"
+        }
+      )
+    }
+  );
+}
+
+// src/components/shared/BrandSwatchesContext.ts
+import { createContext, useContext } from "react";
+var BrandSwatchesContext = createContext([]);
+function useBrandSwatches() {
+  return useContext(BrandSwatchesContext);
+}
+
+// src/components/shared/ImageBackgroundField.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var MODES = [
+  { value: "none", label: "None" },
+  { value: "theme", label: "Light / Dark" },
+  { value: "custom", label: "Custom" }
+];
+var SURFACES = [
+  { value: "none", label: "None" },
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" }
+];
+function ImageBackgroundField({ label, value, onChange }) {
+  const swatches = useBrandSwatches();
+  const mode = value?.mode ?? "none";
+  function setMode(next) {
+    if (next === "theme") onChange({ mode: "theme", light: "none", dark: "none" });
+    else if (next === "custom") onChange({ mode: "custom", color: "#ffffff" });
+    else onChange(void 0);
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx8(FormLabel, { children: label }),
+    /* @__PURE__ */ jsx8(SegmentedControl, { options: MODES, value: mode, onChange: setMode, className: "self-start" }),
+    value?.mode === "theme" && /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-2 gap-3", children: [
+      /* @__PURE__ */ jsx8(
+        Select,
+        {
+          label: "Light mode",
+          value: value.light,
+          options: SURFACES,
+          onChange: (light) => onChange({ ...value, light })
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        Select,
+        {
+          label: "Dark mode",
+          value: value.dark,
+          options: SURFACES,
+          onChange: (dark) => onChange({ ...value, dark })
+        }
+      )
+    ] }),
+    value?.mode === "custom" && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx8(
+          ColorPicker,
+          {
+            label: "Background color",
+            value: value.color,
+            onChange: (color) => onChange({ mode: "custom", color })
+          }
+        ),
+        /* @__PURE__ */ jsx8("span", { className: "font-mono text-xs text-base-contrast-light", children: value.color })
+      ] }),
+      swatches.length > 0 && /* @__PURE__ */ jsx8("div", { role: "group", "aria-label": "Brand colors", className: "flex flex-wrap gap-2", children: swatches.map((s) => /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          "aria-label": s.name ? `${s.name} (${s.hex})` : s.hex,
+          "aria-pressed": s.hex === value.color.toLowerCase(),
+          title: s.name ?? s.hex,
+          onClick: () => onChange({ mode: "custom", color: s.hex }),
+          className: cn(
+            "h-7 w-7 cursor-pointer rounded-full border border-base-200",
+            "aria-pressed:outline aria-pressed:outline-2 aria-pressed:outline-offset-2 aria-pressed:outline-base-contrast"
+          ),
+          style: { backgroundColor: s.hex }
+        },
+        s.hex
+      )) })
+    ] })
   ] });
 }
 
 // src/components/editor/SettingsForm.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function resolveValues(schema, values) {
   const resolved = {};
   for (const [key, field] of Object.entries(schema)) {
@@ -339,8 +440,8 @@ function RangeField({
 }) {
   const id = useId();
   return /* @__PURE__ */ jsxs5("div", { children: [
-    /* @__PURE__ */ jsx7(FormLabel, { htmlFor: id, children: field.label }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(FormLabel, { htmlFor: id, children: field.label }),
+    /* @__PURE__ */ jsx9(
       "input",
       {
         id,
@@ -357,10 +458,10 @@ function RangeField({
     )
   ] });
 }
-function renderField(key, field, value, handleFieldChange) {
+function renderField(key, field, value, handleFieldChange, values) {
   switch (field.type) {
     case "text":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx9(
         Input,
         {
           label: field.label,
@@ -371,7 +472,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "number":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx9(
         Input,
         {
           label: field.label,
@@ -382,7 +483,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "checkbox":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx9(
         Checkbox,
         {
           label: field.label,
@@ -392,7 +493,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "select":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx9(
         Select,
         {
           label: field.label,
@@ -403,7 +504,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "range":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx9(
         RangeField,
         {
           field,
@@ -413,7 +514,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "link":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx9(
         LinkField,
         {
           label: field.label,
@@ -423,7 +524,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "video-source":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx9(
         VideoSourceField,
         {
           value,
@@ -432,7 +533,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "document-source":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx9(
         DocumentSourceField,
         {
           value,
@@ -440,29 +541,41 @@ function renderField(key, field, value, handleFieldChange) {
         },
         key
       );
+    case "image-background":
+      if (field.hidden?.(values)) return null;
+      return /* @__PURE__ */ jsx9(
+        ImageBackgroundField,
+        {
+          label: field.label,
+          value,
+          onChange: (v) => handleFieldChange(key, v)
+        },
+        key
+      );
     default:
       return null;
   }
 }
 function SettingsForm({ schema, values, onChange, tabs }) {
-  const [local, setLocal] = useState3(() => resolveValues(schema, values));
+  const [local, setLocal] = useState2(() => resolveValues(schema, values));
+  const allValues = { ...values, ...local };
   function handleFieldChange(key, newValue) {
     const next = { ...local, [key]: newValue };
     setLocal(next);
     onChange(splitByTarget(schema, next));
   }
   if (tabs) {
-    const fields = (keys) => keys.filter((key) => key in schema).map((key) => renderField(key, schema[key], local[key], handleFieldChange));
+    const fields = (keys) => keys.filter((key) => key in schema).map((key) => renderField(key, schema[key], local[key], handleFieldChange, allValues));
     const listed = new Set(tabs.flatMap((t) => t.fields));
     const otherKeys = Object.keys(schema).filter((key) => !listed.has(key));
     const panel = "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-px";
     const tabItems = [
-      ...tabs.map((t) => ({ id: t.label, label: t.label, content: /* @__PURE__ */ jsx7("div", { className: panel, children: fields(t.fields) }) })),
-      ...otherKeys.length > 0 ? [{ id: "__other__", label: "Other", content: /* @__PURE__ */ jsx7("div", { className: panel, children: fields(otherKeys) }) }] : []
+      ...tabs.map((t) => ({ id: t.label, label: t.label, content: /* @__PURE__ */ jsx9("div", { className: panel, children: fields(t.fields) }) })),
+      ...otherKeys.length > 0 ? [{ id: "__other__", label: "Other", content: /* @__PURE__ */ jsx9("div", { className: panel, children: fields(otherKeys) }) }] : []
     ];
-    return /* @__PURE__ */ jsx7(Tabs, { tabs: tabItems, fullBleedTabBar: true });
+    return /* @__PURE__ */ jsx9(Tabs, { tabs: tabItems, fullBleedTabBar: true });
   }
-  return /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-4", children: Object.entries(schema).map(([key, field]) => renderField(key, field, local[key], handleFieldChange)) });
+  return /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-4", children: Object.entries(schema).map(([key, field]) => renderField(key, field, local[key], handleFieldChange, allValues)) });
 }
 
 // src/lib/block-dnd.ts
@@ -478,10 +591,25 @@ function isBlockDragData(data) {
 }
 function canDropBlock(source, dropContainerId) {
   if (source.blockId === dropContainerId) return false;
-  if (source.isContainer && dropContainerId !== ROOT_CONTAINER_ID) return false;
+  if ((source.isContainer || source.isReference) && dropContainerId !== ROOT_CONTAINER_ID) return false;
   return true;
 }
 
+// src/components/shell/EditorContext.tsx
+import { createContext as createContext2, useContext as useContext2, useState as useState3, useCallback } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var EditorContext = createContext2(null);
+function useEditorContext() {
+  const context = useContext2(EditorContext);
+  if (!context) {
+    throw new Error("useEditorContext must be used within an EditorProvider");
+  }
+  return context;
+}
+function useOptionalEditorContext() {
+  return useContext2(EditorContext);
+}
+
 export {
   DragHandle2 as DragHandle,
   DeleteButton,
@@ -490,5 +618,7 @@ export {
   buildBlockDragData,
   buildBlockDropData,
   isBlockDragData,
-  canDropBlock
+  canDropBlock,
+  useEditorContext,
+  useOptionalEditorContext
 };

package/dist/{chunk-VWWY5TL5.js → chunk-O37AV27P.js}

@@ -3,16 +3,10 @@ import {
 } from "./chunk-FRVO75DK.js";
 import {
   safeNextPath
-} from "./chunk-S2L3BPLS.js";
-import {
-  NavEntrySchema
-} from "./chunk-REDDTTGJ.js";
+} from "./chunk-7SX42OP4.js";
 import {
   getSectionSchemaForType
 } from "./chunk-DMCGN5AS.js";
-import {
-  IndexSchema
-} from "./chunk-AHALSCQH.js";
 import {
   getAllSchemas
 } from "./chunk-FTPETWXE.js";
@@ -96,15 +90,6 @@ function onPrimaryVarValue(c) {
   return lightDark(light, dark, c?.darkMode === "optional");
 }
 
-// src/lib/grid.ts
-var gridColsClass = {
-  1: "grid-cols-1",
-  2: "grid-cols-1 min-sm:grid-cols-2",
-  3: "grid-cols-1 min-sm:grid-cols-2 lg:grid-cols-3",
-  4: "grid-cols-2 lg:grid-cols-4",
-  5: "grid-cols-2 min-sm:grid-cols-3 lg:grid-cols-5"
-};
-
 // src/lib/google-fonts.ts
 function buildGoogleFontsUrl(headingFont, bodyFont) {
   const fonts = /* @__PURE__ */ new Set();
@@ -115,33 +100,14 @@ function buildGoogleFontsUrl(headingFont, bodyFont) {
   return `https://fonts.googleapis.com/css2?${params}&display=swap`;
 }
 
-// src/lib/safeRedirect.ts
+// src/lib/safe-redirect.ts
 function safeRedirect(url, fallback) {
   if (!url) return fallback;
   return safeNextPath(url) ?? fallback;
 }
 
 // src/lib/loader.ts
-function parseNavFile(navFile) {
-  if (!navFile) return { entries: [], degraded: false };
-  const rawEntries = navFile.entries;
-  if (!Array.isArray(rawEntries)) {
-    console.warn("Invalid nav.json, falling back to a flat navigation");
-    return { entries: [], degraded: true };
-  }
-  const entries = [];
-  let dropped = 0;
-  for (const raw of rawEntries) {
-    const result = NavEntrySchema.safeParse(raw);
-    if (result.success) entries.push(result.data);
-    else dropped++;
-  }
-  if (dropped > 0) {
-    console.warn(`nav.json: dropped ${dropped} entr${dropped === 1 ? "y" : "ies"} this package version cannot represent; navigation is degraded`);
-  }
-  return { entries, degraded: dropped > 0 };
-}
-function mergeSiteContent(index, sectionFiles, navFile) {
+function mergeSiteContent(index, sectionFiles, sidecars = {}) {
   const sections = [];
   const canValidate = getAllSchemas().length >= 2;
   const orderedIds = index.pages.flatMap((p) => p.order);
@@ -172,47 +138,22 @@ function mergeSiteContent(index, sectionFiles, navFile) {
       sections.push({ section: raw, meta });
     }
   }
-  const nav = parseNavFile(navFile);
-  return { sections, index: { ...index, nav: nav.entries }, navDegraded: nav.degraded };
-}
-function loadStaticSiteContent(index, sectionGlob, navFile) {
+  const { nav, tags } = sidecars;
+  return {
+    sections,
+    index: { ...index, nav: nav?.entries ?? [], ...tags ? { tags: tags.entries } : {} },
+    navDegraded: nav?.degraded ?? false,
+    tagsDegraded: tags?.degraded ?? false
+  };
+}
+function loadStaticSiteContent(index, sectionGlob, sidecars = {}) {
   const sectionFiles = {};
   for (const [path, data] of Object.entries(sectionGlob)) {
     const filename = path.split("/").pop();
     const id = filename.replace(".json", "");
     sectionFiles[id] = data;
   }
-  return mergeSiteContent(index, sectionFiles, navFile);
-}
-async function loadSiteContent(contentDir) {
-  const fs = await import("fs/promises");
-  const path = await import("path");
-  const indexPath = path.join(contentDir, "index.json");
-  const indexRaw = JSON.parse(await fs.readFile(indexPath, "utf-8"));
-  const index = IndexSchema.parse(indexRaw);
-  const sectionFiles = {};
-  for (const id of index.pages.flatMap((p) => p.order)) {
-    const sectionPath = path.join(contentDir, "sections", `${id}.json`);
-    sectionFiles[id] = JSON.parse(await fs.readFile(sectionPath, "utf-8"));
-  }
-  let navRaw;
-  let readFailed = false;
-  try {
-    navRaw = await fs.readFile(path.join(contentDir, "nav.json"), "utf-8");
-  } catch (err) {
-    readFailed = err?.code !== "ENOENT";
-  }
-  let navFile;
-  let parseFailed = false;
-  if (navRaw !== void 0) {
-    try {
-      navFile = JSON.parse(navRaw);
-    } catch {
-      parseFailed = true;
-    }
-  }
-  const content = mergeSiteContent(index, sectionFiles, navFile);
-  return readFailed || parseFailed ? { ...content, navDegraded: true } : content;
+  return mergeSiteContent(index, sectionFiles, sidecars);
 }
 
 export {
@@ -228,10 +169,8 @@ export {
   primaryVarValue,
   accentVarValue,
   onPrimaryVarValue,
-  gridColsClass,
   buildGoogleFontsUrl,
   safeRedirect,
   mergeSiteContent,
-  loadStaticSiteContent,
-  loadSiteContent
+  loadStaticSiteContent
 };