@drawnagency/primitives 0.1.59 → 0.1.61

package/dist/chunk-UQ4OYRW7.js

@@ -0,0 +1,670 @@
+import {
+  DeleteIcon,
+  DragHandle,
+  IconButton,
+  SettingsIcon,
+  usePages
+} from "./chunk-WLMJCNU7.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 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 })
+  ] });
+});
+
+// src/components/shared/Select.tsx
+import { useId as useId2 } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function Select({
+  label,
+  value,
+  onChange,
+  options,
+  disabled,
+  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(
+        "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__ */ jsx7("option", { value: opt.value, children: opt.label }, opt.value))
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        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/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";
+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__ */ 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(
+      "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__ */ jsx9(
+      Input,
+      {
+        label: "URL",
+        value: value.href,
+        placeholder: "https://...",
+        onChange: (href) => onChange({ kind: "external", href, target: value.target })
+      }
+    ) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      /* @__PURE__ */ jsx9(
+        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__ */ jsx9(
+        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__ */ jsx9(
+      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 jsx10, jsxs as jsxs7 } 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__ */ 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(
+      "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__ */ jsx10("div", { role: "tabpanel", children: activeTab?.content })
+  ] });
+}
+
+// src/components/editor/SettingsForm.tsx
+import { jsx as jsx11, jsxs as jsxs8 } 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 = useId4();
+  return /* @__PURE__ */ jsxs8("div", { children: [
+    /* @__PURE__ */ jsx11(FormLabel, { htmlFor: id, children: field.label }),
+    /* @__PURE__ */ jsx11(
+      "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__ */ jsx11(
+        Input,
+        {
+          label: field.label,
+          value: String(value ?? ""),
+          placeholder: field.placeholder,
+          onChange: (v) => handleFieldChange(key, v)
+        },
+        key
+      );
+    case "number":
+      return /* @__PURE__ */ jsx11(
+        Input,
+        {
+          label: field.label,
+          type: "number",
+          value: String(value ?? ""),
+          onChange: (v) => handleFieldChange(key, v === "" ? "" : Number(v))
+        },
+        key
+      );
+    case "checkbox":
+      return /* @__PURE__ */ jsx11(
+        Checkbox,
+        {
+          label: field.label,
+          checked: Boolean(value),
+          onChange: (checked) => handleFieldChange(key, checked)
+        },
+        key
+      );
+    case "select":
+      return /* @__PURE__ */ jsx11(
+        Select,
+        {
+          label: field.label,
+          value: String(value ?? ""),
+          options: field.options,
+          onChange: (v) => handleFieldChange(key, v)
+        },
+        key
+      );
+    case "range":
+      return /* @__PURE__ */ jsx11(
+        RangeField,
+        {
+          field,
+          value: Number(value ?? field.min),
+          onChange: (v) => handleFieldChange(key, v)
+        },
+        key
+      );
+    case "link":
+      return /* @__PURE__ */ jsx11(
+        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__ */ 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) }) }] : []
+    ];
+    return /* @__PURE__ */ jsx11(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)) });
+}
+
+// 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 jsx12 } 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__ */ jsx12(
+    "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 forwardRef3 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var PopoverItem = forwardRef3(
+  function PopoverItem2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx13(
+      "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 {
+  FormLabel,
+  Input,
+  Checkbox,
+  Tooltip,
+  Kbd,
+  DragHandle2 as DragHandle,
+  DeleteButton,
+  SettingsButton,
+  Popover,
+  PopoverItem,
+  SettingsForm,
+  buildBlockDragData,
+  buildBlockDropData,
+  isBlockDragData,
+  canDropBlock
+};