@drawnagency/primitives 0.1.112 → 0.1.114

package/dist/{chunk-WUJ3XNFI.js → chunk-GGYY3JQJ.js}

@@ -3,7 +3,6 @@ import {
 } from "./chunk-7EOSDFS3.js";
 
 // src/components/shared/Button.tsx
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 var boxSize = {
   sm: "rounded px-3 py-1.5 text-xs font-medium",
@@ -17,45 +16,41 @@ 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"
+  destructive: "border border-danger text-danger hover:bg-danger hover:text-white"
 };
 var ghostToneClasses = {
   neutral: "text-base-contrast-light hover:text-base-contrast",
-  destructive: "text-red-600 hover:text-red-800"
+  destructive: "text-danger hover:text-danger-hover"
 };
-var Button = forwardRef(function Button2({
+function Button({
   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 disabled = rest.href === void 0 ? rest.disabled || isLoading : false;
   const label = isLoading && loadingLabel ? loadingLabel : children;
-  return /* @__PURE__ */ jsx(
-    "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
-    }
+  const classes = cn(
+    "inline-flex items-center justify-center transition-colors",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+    isGhost ? ghostSize[size] : boxSize[size],
+    isGhost ? ghostToneClasses[tone] : variantClasses[variant],
+    fullWidth && "w-full",
+    disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+    className
   );
-});
+  if (rest.href !== void 0) {
+    return /* @__PURE__ */ jsx("a", { className: classes, ...rest, children: label });
+  }
+  const { ref, disabled: _disabled, ...buttonRest } = rest;
+  return /* @__PURE__ */ jsx("button", { ref, disabled, className: classes, ...buttonRest, children: label });
+}
 
 export {
   Button

package/dist/{chunk-VLPELTPI.js → chunk-IP2SEBAJ.js}

@@ -1,6 +1,6 @@
 import {
   RESERVED_SLUGS
-} from "./chunk-HSXMOS5Q.js";
+} from "./chunk-PTY2RG2K.js";
 
 // src/lib/nav-tree.ts
 function reconcileNav(entries, pages) {
@@ -133,6 +133,9 @@ function moveNavEntry(index, from, to) {
 }
 
 // src/lib/pages.ts
+function pageDisplayTitle(title) {
+  return title || "Untitled";
+}
 function slugifyPageSlug(input) {
   return input.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
@@ -199,6 +202,7 @@ export {
   setGroupStartCollapsed,
   deleteGroup,
   moveNavEntry,
+  pageDisplayTitle,
   slugifyPageSlug,
   uniquePageSlug,
   audiencePasses,

package/dist/{chunk-IINIZBQB.js → chunk-JCDZAFX2.js}

@@ -30,7 +30,7 @@ function Kbd({ children }) {
 }
 
 // src/components/shared/Popover.tsx
-import { useEffect as useEffect2, useLayoutEffect, useRef, useState } from "react";
+import { useEffect as useEffect3, useLayoutEffect, useRef as useRef2, useState } from "react";
 import { createPortal } from "react-dom";
 
 // src/hooks/useFocusTrap.ts
@@ -56,6 +56,32 @@ function useInitialFocus(ref, active) {
   }, [active, ref]);
 }
 
+// src/hooks/useStackedEscape.ts
+import { useEffect as useEffect2, useRef } from "react";
+function useStackedEscape(onEscape, { enabled, before }) {
+  const layerRef = useRef(null);
+  useEffect2(() => {
+    if (!enabled) return;
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape") return;
+      const own = layerRef.current;
+      const layers = document.querySelectorAll("[data-modal-layer]");
+      const above = Array.from(layers).some((el) => {
+        if (el === own) return false;
+        if (!own) return true;
+        return Boolean(own.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING);
+      });
+      if (above) return;
+      if (before?.(e)) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [enabled, onEscape, before]);
+  return layerRef;
+}
+
 // src/components/shared/Popover.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 function Popover({
@@ -68,7 +94,7 @@ function Popover({
   portal = false,
   placement = "bottom"
 }) {
-  const panelRef = useRef(null);
+  const panelRef = useRef2(null);
   const [resolvedAlign, setResolvedAlign] = useState("start");
   const [fixedPos, setFixedPos] = useState(null);
   useInitialFocus(panelRef, isOpen && (!portal || fixedPos !== null));
@@ -114,13 +140,9 @@ function Popover({
     panel.style.left = "";
     panel.style.right = "";
   }, [isOpen, align]);
-  useEffect2(() => {
+  useStackedEscape(onClose, { enabled: isOpen });
+  useEffect3(() => {
     if (!isOpen) return;
-    function onKeyDown(e) {
-      if (e.key !== "Escape") return;
-      if (document.querySelector("[data-modal-layer]")) return;
-      onClose();
-    }
     function onMouseDown(e) {
       const target = e.target;
       if (panelRef.current?.contains(target)) return;
@@ -128,10 +150,8 @@ function Popover({
       if (target instanceof Element && target.closest("[data-modal-layer]")) return;
       onClose();
     }
-    document.addEventListener("keydown", onKeyDown);
     document.addEventListener("mousedown", onMouseDown);
     return () => {
-      document.removeEventListener("keydown", onKeyDown);
       document.removeEventListener("mousedown", onMouseDown);
     };
   }, [isOpen, onClose, anchorRef]);

package/dist/chunk-JR24U7FJ.js

@@ -0,0 +1,120 @@
+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(
+                CheckboxBox,
+                {
+                  checked,
+                  className: cn(!checked && "hover:border-primary", disabled && "pointer-events-none")
+                }
+              )
+            ]
+          }
+        ),
+        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 })
+        ] })
+      ]
+    }
+  );
+}
+function CheckboxBox({ checked, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors",
+        checked ? "border-primary bg-primary text-primary-contrast" : "border-base-300 bg-base",
+        className
+      ),
+      children: checked && /* @__PURE__ */ jsx(Check, { size: 14, strokeWidth: 3 })
+    }
+  );
+}
+
+// src/components/shared/Tabs.tsx
+import { useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } 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__ */ jsxs2("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx2("div", { className: cn("border-b border-base-200", fullBleedTabBar && "-mx-6 px-6"), children: /* @__PURE__ */ jsx2("div", { className: "flex", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx2(
+      "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-primary text-primary" : "border-transparent text-base-contrast-light hover:text-base-contrast"
+        ),
+        children: tab.label
+      },
+      tab.id
+    )) }) }),
+    /* @__PURE__ */ jsx2("div", { role: "tabpanel", className: cn("flex min-h-0 flex-1 flex-col px-px", fullBleedTabBar && "pt-4"), children: activeTab?.content })
+  ] });
+}
+
+export {
+  Checkbox,
+  CheckboxBox,
+  Tabs
+};

package/dist/{chunk-SW6PCQQD.js → chunk-KQA772WQ.js}

@@ -1,6 +1,6 @@
 import {
   requireSessionSecret
-} from "./chunk-S2L3BPLS.js";
+} from "./chunk-7SX42OP4.js";
 
 // src/auth/capabilities.ts
 function deriveUiCapabilities(auth) {
@@ -65,6 +65,7 @@ async function verifyAudienceClaims(token) {
 async function verifyAudienceToken(token) {
   return (await verifyAudienceClaims(token))?.audience ?? null;
 }
+var IMPERSONATION_MAX_AGE_SECONDS = 60 * 60;
 function setSessionCookie(cookies, token, isProduction) {
   cookies.set(SESSION_COOKIE, token, {
     httpOnly: true,