@drawnagency/primitives 0.1.108 → 0.1.110

package/dist/chunk-F2LYQPXV.js

@@ -0,0 +1,77 @@
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/shared/Checkbox.tsx
+import { useId } from "react";
+import { Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Checkbox({
+  checked,
+  onChange,
+  label,
+  description,
+  disabled,
+  className,
+  startAdornment,
+  align = "start"
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    "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__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "relative flex h-5 w-5 shrink-0 items-center justify-center",
+              align === "start" && "mt-0.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id,
+                  type: "checkbox",
+                  checked,
+                  disabled,
+                  onChange: (e) => onChange(e.target.checked),
+                  className: "sr-only"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "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__ */ jsx(Check, { size: 14, strokeWidth: 3 })
+                }
+              )
+            ]
+          }
+        ),
+        startAdornment,
+        /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-base-contrast", children: label }),
+          description && /* @__PURE__ */ jsx("span", { className: "block text-base-contrast-light", children: description })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  Checkbox
+};

package/dist/{chunk-5BM2Y3NJ.js → chunk-FRVO75DK.js}

@@ -26,7 +26,19 @@ function upgradeContainerChildren(section) {
     return up;
   });
   if (!changed) return section;
-  return { ...section, content: { ...content, children: mapped } };
+  return {
+    ...section,
+    content: {
+      ...content,
+      layout: content?.layout ?? "grid",
+      columns: normalizeColumns(content?.columns),
+      equalizeRowHeight: content?.equalizeRowHeight ?? false,
+      children: mapped
+    }
+  };
+}
+function normalizeColumns(columns) {
+  return typeof columns === "number" && Number.isFinite(columns) ? columns : 1;
 }
 function buildRef(item, forceImage) {
   const type = forceImage ? "image" : item.type;
@@ -75,7 +87,7 @@ function upgradeGrid(section) {
     id,
     type: "container",
     content: {
-      columns: content.columns,
+      columns: normalizeColumns(content.columns),
       layout: "grid",
       equalizeRowHeight: false,
       children: media.map((item, i) => mapRefItem(item, id, i))

package/dist/{chunk-VKAGMEKE.js → chunk-FTPETWXE.js}

@@ -10,6 +10,7 @@ function createRegistry() {
     registerSection(def) {
       sections.set(def.type, def);
       if (def.richTextFields) richText.set(def.type, def.richTextFields);
+      else richText.delete(def.type);
     },
     registerSchema(type, schema) {
       schemas.set(type, schema);

package/dist/{chunk-3TO4RRHY.js → chunk-GPPVYLEI.js}

@@ -7,6 +7,12 @@ var StorageConflictError = class extends Error {
   }
   currentVersion;
 };
+var NothingToPublishError = class extends Error {
+  constructor() {
+    super("No saved branch to publish");
+    this.name = "NothingToPublishError";
+  }
+};
 var IdempotencyLookupUnavailableError = class extends Error {
   constructor(cause) {
     super("Could not search draft history for the idempotency key");
@@ -31,6 +37,7 @@ var DOCUMENT_CACHE_CONTROL = "private, max-age=31536000, immutable";
 
 export {
   StorageConflictError,
+  NothingToPublishError,
   IdempotencyLookupUnavailableError,
   IDEMPOTENCY_TRAILER,
   IDEMPOTENCY_KEY_RE,

package/dist/{chunk-NLQ5F3RQ.js → chunk-HBULBDGP.js}

@@ -27,7 +27,7 @@ var ViewerCredentialSchema = z.object({
   createdAt: z.string()
 });
 function slugifyAudienceName(input) {
-  return input.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return input.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 32).replace(/-+$/g, "");
 }
 
 export {

package/dist/{chunk-IPKZ5FU6.js → chunk-NXGIHSL5.js}

@@ -1,26 +1,26 @@
 import {
-  Checkbox,
-  FormLabel,
-  Input
-} from "./chunk-5THS4K5D.js";
+  Checkbox
+} from "./chunk-F2LYQPXV.js";
 import {
   EditableGrid,
   EditablePlainText,
   MediaBlock,
   containerGridClass,
   useEditableCollection
-} from "./chunk-5IZ2KTMU.js";
+} from "./chunk-3GAG6ZXB.js";
 import {
   AddIcon,
   DeleteIcon,
   DragHandle,
+  FormLabel,
   IconButton,
+  Input,
   useMediaLibrary
-} from "./chunk-D6TLUVOP.js";
+} from "./chunk-ELQ4C677.js";
 import {
   DEFAULT_LINK,
   LinkValueSchema
-} from "./chunk-PZJL2S3Z.js";
+} from "./chunk-3ZRQ4G5F.js";
 import {
   DOCUMENT_MIME_TO_EXT
 } from "./chunk-BS5AQHZG.js";
@@ -36,7 +36,7 @@ import {
 } from "./chunk-7EOSDFS3.js";
 import {
   defineSection
-} from "./chunk-VKAGMEKE.js";
+} from "./chunk-FTPETWXE.js";
 import {
   HexColorSchema,
   SingleMediaReferenceSchema
@@ -63,10 +63,17 @@ var ColorItemSchema = z.object({
 });
 
 // src/components/brandguide/ColorsView.tsx
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Eye, EyeOff } from "lucide-react";
 
 // src/components/brandguide/colors-shared.ts
+var COLOR_SPACE_KEYS = ["hex", "rgb", "cmyk", "pantone"];
+function orderedSpaceEntries(space) {
+  return COLOR_SPACE_KEYS.flatMap((key) => {
+    const value = space[key];
+    return value ? [[key, value]] : [];
+  });
+}
 function getContrastClass(hex) {
   if (!hex) return "text-white";
   const h = hex.replace("#", "");
@@ -93,6 +100,10 @@ function ColorsView({
 }) {
   const [expanded, setExpanded] = useState(!collapsing);
   const [copiedIndex, setCopiedIndex] = useState(null);
+  const copiedTimerRef = useRef(null);
+  useEffect(() => () => {
+    if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+  }, []);
   const handleCopy = (value, colorIndex) => {
     if (navigator.clipboard?.writeText) {
       navigator.clipboard.writeText(value);
@@ -107,7 +118,8 @@ function ColorsView({
       document.body.removeChild(ta);
     }
     setCopiedIndex(colorIndex);
-    setTimeout(() => setCopiedIndex(null), 1500);
+    if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+    copiedTimerRef.current = setTimeout(() => setCopiedIndex(null), 1500);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     (showLabel && !!label || collapsing) && /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
@@ -137,12 +149,10 @@ function ColorsView({
         ] }),
         expanded && // flex-1 so every swatch's label block grows to the tallest in its row.
         /* @__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__ */ 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
-          )
+          (space, j) => orderedSpaceEntries(space).map(([key, 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}`))
         ) })
       ] }, i);
     }) }) })
@@ -150,28 +160,36 @@ function ColorsView({
 }
 
 // src/components/brandguide/ColorsEditable.tsx
-import { useState as useState3, useEffect } from "react";
+import { useState as useState3, useEffect as useEffect2 } 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);
+var KEYS = COLOR_SPACE_KEYS;
+function hasAnyValue(color) {
+  return color.spaces.some((s) => KEYS.some((k) => s[k]));
 }
 function ColorSwatchSettings({ color, onChange }) {
-  const [localColor, setLocalColor] = useState2(() => ({
-    ...color,
-    spaces: [mergeSpaces(color.spaces)]
-  }));
-  const space = localColor.spaces[0] || {};
+  const [localColor, setLocalColor] = useState2(color);
+  const spaces = localColor.spaces.length > 0 ? localColor.spaces : [{}];
+  const valueOf = (key) => spaces.find((s) => s[key])?.[key] ?? "";
   const update = (updated) => {
     setLocalColor(updated);
-    onChange(updated);
+    if (hasAnyValue(updated)) onChange(updated);
   };
   const updateSpace = (key, value) => {
-    const newSpace = { ...space, [key]: value || void 0 };
-    update({ ...localColor, spaces: [newSpace] });
+    const owner = spaces.findIndex((s) => s[key] !== void 0);
+    const target = owner === -1 ? 0 : owner;
+    const next = spaces.map((s, i) => {
+      if (i !== target) return s;
+      if (!value) {
+        const { [key]: _dropped, ...rest } = s;
+        return rest;
+      }
+      return { ...s, [key]: value };
+    }).filter((s, i) => i === 0 || Object.keys(s).length > 0);
+    update({ ...localColor, spaces: next });
   };
   return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsx2(
@@ -182,15 +200,16 @@ function ColorSwatchSettings({ color, onChange }) {
         onChange: (name) => update({ ...localColor, name })
       }
     ),
-    ["hex", "rgb", "cmyk", "pantone"].map((key) => /* @__PURE__ */ jsx2(
+    KEYS.map((key) => /* @__PURE__ */ jsx2(
       Input,
       {
         label: key.toUpperCase(),
-        value: space[key] || "",
+        value: valueOf(key),
         onChange: (value) => updateSpace(key, value)
       },
       key
-    ))
+    )),
+    !hasAnyValue(localColor) && /* @__PURE__ */ jsx2("p", { role: "alert", className: "mt-1 text-xs text-red-600", children: "Enter at least one value \u2014 this color won\u2019t be saved until you do." })
   ] });
 }
 
@@ -216,7 +235,7 @@ function ColorsEditable({
 }) {
   const [expanded, setExpanded] = useState3(!collapsing);
   const options = { label, columns, collapsing, showLabel };
-  useEffect(() => {
+  useEffect2(() => {
     setExpanded(!collapsing);
   }, [collapsing]);
   const handleItemSettings = (index) => {
@@ -307,12 +326,10 @@ function ColorSwatchEditable({
     ) }),
     expanded && // flex-1 so every swatch's label block grows to the tallest in its row.
     /* @__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__ */ 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
-      )
+      (space, j) => orderedSpaceEntries(space).map(([key, 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}`))
     ) })
   ] });
 }
@@ -410,15 +427,15 @@ 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 useState4, useCallback, useId } from "react";
+import { useRef as useRef4, useEffect as useEffect5, useState as useState4, useCallback, useId } 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 { useEffect as useEffect3, useRef as useRef2 } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function IconPicker({ selected, onSelect, onClose, showRemove = true }) {
-  const panelRef = useRef(null);
-  useEffect2(() => {
+  const panelRef = useRef2(null);
+  useEffect3(() => {
     function handleMouseDown(e) {
       if (panelRef.current && !panelRef.current.contains(e.target)) onClose();
     }
@@ -463,12 +480,12 @@ function IconPicker({ selected, onSelect, onClose, showRemove = true }) {
 }
 
 // src/components/sections/IconList/DoDontToggle.tsx
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
 import { Check, X } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function DoDontToggle({ value, onSelect, onClose }) {
-  const panelRef = useRef2(null);
-  useEffect3(() => {
+  const panelRef = useRef3(null);
+  useEffect4(() => {
     function handleMouseDown(e) {
       if (panelRef.current && !panelRef.current.contains(e.target)) onClose();
     }
@@ -677,9 +694,9 @@ function EditIconList({
     createItem: () => ({ label: "", text: "" })
   });
   const [dragState, setDragState] = useState4({ sourceId: null, targetId: null });
-  const cfgRef = useRef3({ listId, onReorder, onRemove, onInsertItem });
+  const cfgRef = useRef4({ listId, onReorder, onRemove, onInsertItem });
   cfgRef.current = { listId, onReorder, onRemove, onInsertItem };
-  useEffect4(() => {
+  useEffect5(() => {
     let cleanup;
     let cancelled = false;
     import("./adapter-HH47ZPGM.js").then(({ monitorForElements }) => {
@@ -798,9 +815,9 @@ function EditableRow({
   onUpdateItem,
   onDuplicate
 }) {
-  const rowRef = useRef3(null);
-  const handleRef = useRef3(null);
-  const itemRef = useRef3(item);
+  const rowRef = useRef4(null);
+  const handleRef = useRef4(null);
+  const itemRef = useRef4(item);
   itemRef.current = item;
   const [iconHover, setIconHover] = useState4(false);
   const [pickerOpen, setPickerOpen] = useState4(false);
@@ -809,7 +826,7 @@ function EditableRow({
   const iconEntry = resolveIcon(item, defaultIcon, dodont);
   const effectiveIconId = item.icon ?? defaultIcon ?? null;
   const iconColor = resolveIconColor(item, iconClassName, dodont);
-  useEffect4(() => {
+  useEffect5(() => {
     const row = rowRef.current;
     const handle = handleRef.current;
     if (!row || !handle) return;
@@ -1005,9 +1022,9 @@ function TrailingDropZone({
   dragState,
   setDragState
 }) {
-  const ref = useRef3(null);
+  const ref = useRef4(null);
   const trailingId = "__trailing__";
-  useEffect4(() => {
+  useEffect5(() => {
     const el = ref.current;
     if (!el) return;
     let cleanup;
@@ -1221,7 +1238,7 @@ var IconList_default = defineSection({
       showLabel: options?.showLabel,
       stackText: options?.stackText,
       dodont: options?.dodont,
-      onChange: onChange ? (c) => onChange(c) : void 0
+      onChange: onChange ? (c) => onChange({ ...c, options: content.options }) : void 0
     }
   ),
   defaults: () => ({
@@ -1335,7 +1352,7 @@ var DoDontMedia_default = defineSection({
 });
 
 // src/components/sections/Document/index.tsx
-import { useEffect as useEffect5, useState as useState7 } from "react";
+import { useEffect as useEffect6, useState as useState7 } from "react";
 import { z as z5 } from "zod";
 import { ExternalLink, FileText } from "lucide-react";
 
@@ -1563,7 +1580,7 @@ var schema4 = z5.object({
 });
 function useSiteDocument(sectionId) {
   const [docs, setDocs] = useState7(null);
-  useEffect5(() => {
+  useEffect6(() => {
     setDocs(getSiteDocuments());
     return subscribeSiteDocuments(setDocs);
   }, []);

package/dist/{chunk-CPTFFLK2.js → chunk-OTDA6KWL.js}

@@ -1,6 +1,6 @@
 import {
   RESERVED_SLUGS
-} from "./chunk-BOZUEKWL.js";
+} from "./chunk-UVIYI4J6.js";
 
 // src/lib/nav-tree.ts
 function reconcileNav(entries, pages) {
@@ -21,15 +21,22 @@ function reconcileNav(entries, pages) {
       continue;
     }
     if (entry?.kind !== "group") continue;
+    if (typeof entry.id !== "string" || entry.id === "") continue;
     if (seenGroupIds.has(entry.id)) continue;
     seenGroupIds.add(entry.id);
     const claimed = Array.isArray(entry.pageIds) ? entry.pageIds : [];
     const pageIds = claimed.filter((id) => {
-      if (!validIds.has(id) || placed.has(id)) return false;
+      if (typeof id !== "string" || !validIds.has(id) || placed.has(id)) return false;
       placed.add(id);
       return true;
     });
-    const group = { ...entry, pageIds };
+    const group = {
+      kind: "group",
+      id: entry.id,
+      label: typeof entry.label === "string" ? entry.label : "",
+      startCollapsed: entry.startCollapsed === true,
+      pageIds
+    };
     result.push(group);
   }
   for (const p of pageList) {

package/dist/chunk-OUYB2GCW.js

@@ -0,0 +1,194 @@
+import {
+  FormLabel,
+  Input
+} from "./chunk-ELQ4C677.js";
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/shared/PagesContext.tsx
+import { createContext, useContext } from "react";
+var PagesContext = createContext({ pages: [], getPageHeadings: () => [] });
+function usePages() {
+  return useContext(PagesContext);
+}
+
+// src/components/shared/Select.tsx
+import { useId } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Select({
+  label,
+  value,
+  onChange,
+  options,
+  disabled,
+  className,
+  selectClassName
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          id,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          disabled,
+          className: cn(
+            "w-full appearance-none rounded border border-base-200 bg-base py-2 pr-8 pl-3 text-sm text-base-contrast",
+            "focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast",
+            disabled && "cursor-not-allowed opacity-50",
+            selectClassName
+          ),
+          children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          size: 14,
+          className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-base-contrast-light"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/shared/LinkField.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TARGET_OPTIONS = [
+  { label: "Same tab (_self)", value: "_self" },
+  { label: "New tab (_blank)", value: "_blank" }
+];
+function LinkField({ label, value, onChange }) {
+  const { pages, getPageHeadings } = usePages();
+  const isInternal = value.kind === "internal";
+  function setMode(kind) {
+    if (kind === value.kind) return;
+    onChange(kind === "external" ? { kind: "external", href: "", target: value.target } : { kind: "internal", pageId: "", anchorSectionId: null, target: "_self" });
+  }
+  const pageId = isInternal ? value.pageId : "";
+  const headings = pageId ? getPageHeadings(pageId) : [];
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx2(FormLabel, { children: label }),
+    /* @__PURE__ */ jsx2("div", { className: "flex gap-2", role: "tablist", children: ["internal", "external"].map((kind) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": value.kind === kind,
+        onClick: () => setMode(kind),
+        className: cn(
+          "cursor-pointer rounded border px-3 py-1 text-sm capitalize",
+          value.kind === kind ? "border-primary bg-primary text-primary-contrast" : "border-base-200 text-base-contrast"
+        ),
+        children: kind === "external" ? "External URL" : "Internal page"
+      },
+      kind
+    )) }),
+    value.kind === "external" ? /* @__PURE__ */ jsx2(
+      Input,
+      {
+        label: "URL",
+        value: value.href,
+        placeholder: "https://...",
+        onChange: (href) => onChange({ kind: "external", href, target: value.target })
+      }
+    ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        Select,
+        {
+          label: "Page",
+          value: value.pageId,
+          options: [{ label: "Select a page\u2026", value: "" }, ...pages.map((p) => ({ label: p.title, value: p.id }))],
+          onChange: (pid) => onChange({ kind: "internal", pageId: pid, anchorSectionId: null, target: value.target })
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Select,
+        {
+          label: "Section",
+          value: value.anchorSectionId ?? "",
+          disabled: !pageId,
+          options: [{ label: "None (top of page)", value: "" }, ...headings.map((h) => ({ label: h.label, value: h.id }))],
+          onChange: (anchor) => onChange({ kind: "internal", pageId, anchorSectionId: anchor || null, target: value.target })
+        }
+      )
+    ] }),
+    value.kind === "external" && /* @__PURE__ */ jsx2(
+      Select,
+      {
+        label: "Opens in",
+        value: value.target,
+        options: TARGET_OPTIONS,
+        onChange: (t) => onChange({ ...value, target: t })
+      }
+    )
+  ] });
+}
+
+// src/components/shared/Button.tsx
+import { forwardRef } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var boxSize = {
+  sm: "rounded px-3 py-1.5 text-xs font-medium",
+  md: "rounded px-4 py-2 text-sm font-medium"
+};
+var ghostSize = {
+  sm: "text-xs font-medium",
+  md: "text-sm font-medium"
+};
+var variantClasses = {
+  primary: "bg-base-contrast text-base-accent hover:bg-base-contrast/90",
+  brand: "bg-primary text-primary-contrast hover:opacity-90",
+  secondary: "border border-base-200 text-base-contrast hover:bg-base-accent",
+  destructive: "border border-red-600 text-red-600 hover:bg-red-600 hover:text-white"
+};
+var ghostToneClasses = {
+  neutral: "text-base-contrast-light hover:text-base-contrast",
+  destructive: "text-red-600 hover:text-red-800"
+};
+var Button = forwardRef(function Button2({
+  variant = "primary",
+  size = "sm",
+  tone = "neutral",
+  fullWidth = false,
+  isLoading = false,
+  loadingLabel,
+  disabled,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const isGhost = variant === "ghost";
+  const resolvedDisabled = disabled || isLoading;
+  const label = isLoading && loadingLabel ? loadingLabel : children;
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      ref,
+      disabled: resolvedDisabled,
+      className: cn(
+        "inline-flex items-center justify-center transition-colors",
+        isGhost ? ghostSize[size] : boxSize[size],
+        isGhost ? ghostToneClasses[tone] : variantClasses[variant],
+        fullWidth && "w-full",
+        resolvedDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        className
+      ),
+      ...rest,
+      children: label
+    }
+  );
+});
+
+export {
+  Button,
+  PagesContext,
+  usePages,
+  Select,
+  LinkField
+};