@drawnagency/primitives 0.1.60 → 0.1.62

package/dist/chunk-2BHPWO7M.js

@@ -0,0 +1,558 @@
+import {
+  Checkbox,
+  FormLabel,
+  Input
+} from "./chunk-5THS4K5D.js";
+import {
+  usePages
+} from "./chunk-4E66N6UV.js";
+import {
+  DeleteIcon,
+  DragHandle,
+  IconButton,
+  SettingsIcon
+} from "./chunk-I5737FJY.js";
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/editor/DragHandle.tsx
+import { forwardRef } from "react";
+
+// src/components/shared/Tooltip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tooltip({ content, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("group/tooltip relative inline-flex", className), children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "pointer-events-none absolute left-1/2 top-full z-50 mt-1.5 -translate-x-1/2 opacity-0 transition-opacity delay-300 group-hover/tooltip:opacity-100",
+        role: "tooltip",
+        children: /* @__PURE__ */ jsx("span", { className: "block whitespace-nowrap rounded bg-tooltip px-2 py-1 text-center text-xs leading-relaxed text-tooltip-muted", children: content })
+      }
+    )
+  ] });
+}
+function Kbd({ children }) {
+  return /* @__PURE__ */ jsx("strong", { className: "text-tooltip-contrast", children });
+}
+
+// src/components/editor/DragHandle.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DragHandle2 = forwardRef(function DragHandle3(_, ref) {
+  return /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(Kbd, { children: "Drag" }),
+    " to move"
+  ] }), children: /* @__PURE__ */ jsx2(
+    IconButton,
+    {
+      ref,
+      icon: /* @__PURE__ */ jsx2(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
+    }
+  ) });
+});
+
+// src/components/editor/DeleteButton.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function DeleteButton({ onDelete }) {
+  return /* @__PURE__ */ jsx3(
+    IconButton,
+    {
+      icon: /* @__PURE__ */ jsx3(DeleteIcon, { size: 16 }),
+      label: "Delete section",
+      intent: "destructive",
+      onClick: onDelete,
+      className: "pointer-events-auto"
+    }
+  );
+}
+
+// src/components/editor/SettingsButton.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function SettingsButton({ onClick }) {
+  return /* @__PURE__ */ jsx4(
+    IconButton,
+    {
+      icon: /* @__PURE__ */ jsx4(SettingsIcon, { size: 16 }),
+      label: "Section settings",
+      onClick,
+      className: "pointer-events-auto"
+    }
+  );
+}
+
+// src/components/editor/SettingsForm.tsx
+import { useId as useId2, useState as useState2 } from "react";
+
+// src/components/shared/Select.tsx
+import { useId } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Select({
+  label,
+  value,
+  onChange,
+  options,
+  disabled,
+  className,
+  selectClassName
+}) {
+  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,
+          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__ */ jsx5("option", { value: opt.value, children: opt.label }, opt.value))
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        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 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" }
+];
+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__ */ 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",
+        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__ */ jsx6(
+      Input,
+      {
+        label: "URL",
+        value: value.href,
+        placeholder: "https://...",
+        onChange: (href) => onChange({ kind: "external", href, target: value.target })
+      }
+    ) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx6(
+        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__ */ jsx6(
+        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__ */ jsx6(
+      Select,
+      {
+        label: "Opens in",
+        value: value.target,
+        options: TARGET_OPTIONS,
+        onChange: (t) => onChange({ ...value, target: t })
+      }
+    )
+  ] });
+}
+
+// src/components/shared/Tabs.tsx
+import { useState } from "react";
+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;
+  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__ */ 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",
+        role: "tab",
+        "aria-selected": activeTab?.id === tab.id,
+        onClick: () => handleSelect(tab.id),
+        className: cn(
+          "cursor-pointer px-4 py-2 text-sm font-medium border-b-2 -mb-px",
+          activeTab?.id === tab.id ? "border-brand text-brand" : "border-transparent text-base-contrast-light hover:text-base-contrast"
+        ),
+        children: tab.label
+      },
+      tab.id
+    )) }) }),
+    /* @__PURE__ */ jsx7("div", { role: "tabpanel", children: activeTab?.content })
+  ] });
+}
+
+// src/components/editor/SettingsForm.tsx
+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)) {
+    resolved[key] = values[key] ?? field.default;
+  }
+  return resolved;
+}
+function coerceValue(field, value) {
+  if (field.type === "select" && "coerce" in field && field.coerce === "number") {
+    return Number(value);
+  }
+  return value;
+}
+function normalizeEmpty(field, value) {
+  if (field.type === "select" && "emptyIsUndefined" in field && field.emptyIsUndefined && value === "") {
+    return void 0;
+  }
+  return value;
+}
+function splitByTarget(schema, allValues) {
+  const content = {};
+  const options = {};
+  for (const [key, field] of Object.entries(schema)) {
+    const value = normalizeEmpty(field, coerceValue(field, allValues[key]));
+    const target = field.target ?? "options";
+    if (target === "content") {
+      content[key] = value;
+    } else {
+      options[key] = value;
+    }
+  }
+  return { content, options };
+}
+function RangeField({
+  field,
+  value,
+  onChange
+}) {
+  const id = useId2();
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsx8(FormLabel, { htmlFor: id, children: field.label }),
+    /* @__PURE__ */ jsx8(
+      "input",
+      {
+        id,
+        type: "range",
+        min: field.min,
+        max: field.max,
+        step: field.step,
+        value,
+        onChange: (e) => onChange(Number(e.target.value)),
+        className: cn(
+          "w-full accent-primary"
+        )
+      }
+    )
+  ] });
+}
+function renderField(key, field, value, handleFieldChange) {
+  switch (field.type) {
+    case "text":
+      return /* @__PURE__ */ jsx8(
+        Input,
+        {
+          label: field.label,
+          value: String(value ?? ""),
+          placeholder: field.placeholder,
+          onChange: (v) => handleFieldChange(key, v)
+        },
+        key
+      );
+    case "number":
+      return /* @__PURE__ */ jsx8(
+        Input,
+        {
+          label: field.label,
+          type: "number",
+          value: String(value ?? ""),
+          onChange: (v) => handleFieldChange(key, v === "" ? "" : Number(v))
+        },
+        key
+      );
+    case "checkbox":
+      return /* @__PURE__ */ jsx8(
+        Checkbox,
+        {
+          label: field.label,
+          checked: Boolean(value),
+          onChange: (checked) => handleFieldChange(key, checked)
+        },
+        key
+      );
+    case "select":
+      return /* @__PURE__ */ jsx8(
+        Select,
+        {
+          label: field.label,
+          value: String(value ?? ""),
+          options: field.options,
+          onChange: (v) => handleFieldChange(key, v)
+        },
+        key
+      );
+    case "range":
+      return /* @__PURE__ */ jsx8(
+        RangeField,
+        {
+          field,
+          value: Number(value ?? field.min),
+          onChange: (v) => handleFieldChange(key, v)
+        },
+        key
+      );
+    case "link":
+      return /* @__PURE__ */ jsx8(
+        LinkField,
+        {
+          label: field.label,
+          value: value ?? field.default,
+          onChange: (v) => handleFieldChange(key, v)
+        },
+        key
+      );
+    default:
+      return null;
+  }
+}
+function SettingsForm({ schema, values, onChange, tabs }) {
+  const [local, setLocal] = useState2(() => resolveValues(schema, values));
+  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 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__ */ 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__ */ jsx8(Tabs, { tabs: tabItems, fullBleedTabBar: true });
+  }
+  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
+import { useEffect as useEffect2, useLayoutEffect, useRef, useState as useState3 } from "react";
+
+// src/hooks/useFocusTrap.ts
+import { useEffect } from "react";
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function useFocusTrap(ref, active) {
+  useEffect(() => {
+    if (!active || !ref.current) return;
+    const container = ref.current;
+    const previouslyFocused = document.activeElement;
+    const getFocusable = () => Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+    const focusable = getFocusable();
+    if (focusable.length > 0) {
+      focusable[0].focus();
+    }
+    const handleKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      const elements = getFocusable();
+      if (elements.length === 0) return;
+      const first = elements[0];
+      const last = elements[elements.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    container.addEventListener("keydown", handleKeyDown);
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+      if (previouslyFocused && document.body.contains(previouslyFocused)) {
+        previouslyFocused.focus();
+      }
+    };
+  }, [active, ref]);
+}
+
+// src/components/shared/Popover.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Popover({
+  isOpen,
+  onClose,
+  anchorRef,
+  children,
+  align = "auto",
+  className
+}) {
+  const panelRef = useRef(null);
+  const [resolvedAlign, setResolvedAlign] = useState3("start");
+  useFocusTrap(panelRef, isOpen);
+  useLayoutEffect(() => {
+    if (!isOpen || align !== "auto") {
+      if (!isOpen) setResolvedAlign("start");
+      return;
+    }
+    const panel = panelRef.current;
+    if (!panel) return;
+    panel.style.left = "0";
+    panel.style.right = "auto";
+    const rect = panel.getBoundingClientRect();
+    if (rect.right > window.innerWidth) {
+      setResolvedAlign("end");
+    } else {
+      setResolvedAlign("start");
+    }
+    panel.style.left = "";
+    panel.style.right = "";
+  }, [isOpen, align]);
+  useEffect2(() => {
+    if (!isOpen) return;
+    function onKeyDown(e) {
+      if (e.key === "Escape") onClose();
+    }
+    function onMouseDown(e) {
+      const target = e.target;
+      if (panelRef.current?.contains(target)) return;
+      if (anchorRef.current?.contains(target)) return;
+      onClose();
+    }
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("mousedown", onMouseDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("mousedown", onMouseDown);
+    };
+  }, [isOpen, onClose, anchorRef]);
+  if (!isOpen) return null;
+  const effectiveAlign = align === "auto" ? resolvedAlign : align;
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      ref: panelRef,
+      role: "dialog",
+      "aria-modal": "false",
+      className: cn(
+        "absolute top-full z-50 mt-1 rounded-md border border-base-200 bg-base shadow-lg",
+        effectiveAlign === "end" ? "right-0" : "left-0",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/shared/PopoverItem.tsx
+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__ */ jsx10(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          "flex w-full cursor-pointer items-center gap-3 px-3 py-1.5 text-left text-xs hover:bg-base-accent",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+// src/lib/block-dnd.ts
+var ROOT_CONTAINER_ID = "__root__";
+function buildBlockDragData(args) {
+  return { dragType: "block", ...args };
+}
+function buildBlockDropData(args) {
+  return { ...args };
+}
+function isBlockDragData(data) {
+  return data.dragType === "block";
+}
+function canDropBlock(source, dropContainerId) {
+  if (source.blockId === dropContainerId) return false;
+  if (source.isContainer && dropContainerId !== ROOT_CONTAINER_ID) return false;
+  return true;
+}
+
+export {
+  Tooltip,
+  Kbd,
+  DragHandle2 as DragHandle,
+  DeleteButton,
+  SettingsButton,
+  Popover,
+  PopoverItem,
+  SettingsForm,
+  buildBlockDragData,
+  buildBlockDropData,
+  isBlockDragData,
+  canDropBlock
+};

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-RFZNNCAS.js → chunk-53DKVAB6.js}

@@ -2,13 +2,6 @@ import {
   getSection
 } from "./chunk-VKAGMEKE.js";
 
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
 // src/lib/nav.ts
 function toSectionId(text) {
   const slug = text.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/^-+|-+$/g, "");
@@ -99,62 +92,9 @@ async function ensureSanitizer() {
   if (!purifier && purifierPromise) await purifierPromise;
 }
 
-// src/lib/icons.ts
-import {
-  Check,
-  X,
-  ArrowRight,
-  Star,
-  Info,
-  AlertTriangle,
-  Heart,
-  Lightbulb,
-  Flag,
-  Shield,
-  Zap,
-  Eye,
-  Lock,
-  Globe,
-  Users,
-  Target,
-  Bookmark,
-  Clock,
-  ThumbsUp,
-  ThumbsDown
-} from "lucide-react";
-var curatedIcons = [
-  { id: "check", label: "Check", icon: Check },
-  { id: "x", label: "X", icon: X },
-  { id: "arrow-right", label: "Arrow Right", icon: ArrowRight },
-  { id: "star", label: "Star", icon: Star },
-  { id: "info", label: "Info", icon: Info },
-  { id: "alert-triangle", label: "Warning", icon: AlertTriangle },
-  { id: "heart", label: "Heart", icon: Heart },
-  { id: "lightbulb", label: "Lightbulb", icon: Lightbulb },
-  { id: "flag", label: "Flag", icon: Flag },
-  { id: "shield", label: "Shield", icon: Shield },
-  { id: "zap", label: "Zap", icon: Zap },
-  { id: "eye", label: "Eye", icon: Eye },
-  { id: "lock", label: "Lock", icon: Lock },
-  { id: "globe", label: "Globe", icon: Globe },
-  { id: "users", label: "Users", icon: Users },
-  { id: "target", label: "Target", icon: Target },
-  { id: "bookmark", label: "Bookmark", icon: Bookmark },
-  { id: "clock", label: "Clock", icon: Clock },
-  { id: "thumbs-up", label: "Thumbs Up", icon: ThumbsUp },
-  { id: "thumbs-down", label: "Thumbs Down", icon: ThumbsDown }
-];
-var iconMap = new Map(curatedIcons.map((e) => [e.id, e]));
-function getIcon(id) {
-  return iconMap.get(id);
-}
-
 export {
-  cn,
   toSectionId,
   generateNavLinks,
   sanitizeHtml,
-  ensureSanitizer,
-  curatedIcons,
-  getIcon
+  ensureSanitizer
 };