@drawnagency/primitives 0.1.118 → 0.1.120

package/dist/{chunk-CEFFP3CH.js → chunk-HZTPF6OK.js}

@@ -1,3 +1,6 @@
+import {
+  Button
+} from "./chunk-GGYY3JQJ.js";
 import {
   Checkbox,
   Tabs
@@ -5,22 +8,13 @@ import {
 import {
   DragHandle,
   FormLabel,
+  IconButton,
   Input,
   LinkField,
   Select,
   useMediaLibrary,
   useResolvedMedia
-} from "./chunk-RIITGTV3.js";
-import {
-  Kbd,
-  Tooltip
-} from "./chunk-JCDZAFX2.js";
-import {
-  Button
-} from "./chunk-GGYY3JQJ.js";
-import {
-  IconButton
-} from "./chunk-IIDKW7AV.js";
+} from "./chunk-LQHBC7C6.js";
 import {
   formatFileSize
 } from "./chunk-CDBURDPX.js";
@@ -30,16 +24,45 @@ import {
 
 // src/components/editor/DragHandle.tsx
 import { forwardRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+// src/components/shared/Tooltip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var sideClasses = {
+  bottom: "left-1/2 top-full mt-1.5 -translate-x-1/2",
+  right: "left-full top-1/2 ml-1.5 -translate-y-1/2",
+  "bottom-clamp": "top-full mt-1.5 left-1/2 -translate-x-1/2 max-xl:left-auto max-xl:right-0 max-xl:translate-x-0"
+};
+function Tooltip({ content, children, className, side = "bottom" }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("group/tooltip relative inline-flex", className), children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "pointer-events-none absolute z-50 opacity-0 transition-opacity delay-300 group-hover/tooltip:opacity-100",
+          sideClasses[side]
+        ),
+        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({ tooltipSide, tabIndex = -1, "aria-describedby": ariaDescribedBy }, ref) {
-  return /* @__PURE__ */ jsx(Tooltip, { side: tooltipSide, content: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Kbd, { children: "Drag" }),
+  return /* @__PURE__ */ jsx2(Tooltip, { side: tooltipSide, content: /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(Kbd, { children: "Drag" }),
     " to move"
-  ] }), children: /* @__PURE__ */ jsx(
+  ] }), children: /* @__PURE__ */ jsx2(
     IconButton,
     {
       ref,
-      icon: /* @__PURE__ */ jsx(DragHandle, { size: 18 }),
+      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,
@@ -50,12 +73,12 @@ var DragHandle2 = forwardRef(function DragHandle3({ tooltipSide, tabIndex = -1,
 
 // src/components/editor/DeleteButton.tsx
 import { Trash2 } from "lucide-react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function DeleteButton({ onDelete }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     IconButton,
     {
-      icon: /* @__PURE__ */ jsx2(Trash2, { size: 16 }),
+      icon: /* @__PURE__ */ jsx3(Trash2, { size: 16 }),
       label: "Delete section",
       intent: "destructive",
       onClick: onDelete,
@@ -66,12 +89,12 @@ function DeleteButton({ onDelete }) {
 
 // src/components/editor/SettingsButton.tsx
 import { Settings } from "lucide-react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function SettingsButton({ onClick }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     IconButton,
     {
-      icon: /* @__PURE__ */ jsx3(Settings, { size: 16 }),
+      icon: /* @__PURE__ */ jsx4(Settings, { size: 16 }),
       label: "Section settings",
       onClick,
       className: "pointer-events-auto"
@@ -84,7 +107,7 @@ import { useId, useState as useState2 } from "react";
 
 // src/components/shared/VideoSourceField.tsx
 import { useState } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var ASPECTS = [
   { label: "9:16", width: 9, height: 16 },
   { label: "4:5", width: 4, height: 5 },
@@ -133,9 +156,9 @@ function VideoSourceField({ value, onChange }) {
       setLoading(false);
     }
   }
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsx4(FormLabel, { children: "Source" }),
-    /* @__PURE__ */ jsx4("div", { className: "flex gap-2", role: "tablist", children: ["library", "embed"].map((m) => /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx5(FormLabel, { children: "Source" }),
+    /* @__PURE__ */ jsx5("div", { className: "flex gap-2", role: "tablist", children: ["library", "embed"].map((m) => /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -150,9 +173,9 @@ function VideoSourceField({ value, onChange }) {
       },
       m
     )) }),
-    mode === "library" ? /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
-      libraryImageId ? resolved.poster ? /* @__PURE__ */ jsx4("img", { src: resolved.poster, alt: "", className: "h-12 w-20 rounded object-cover" }) : /* @__PURE__ */ jsx4("span", { className: "text-sm text-base-contrast-light", children: "Video selected" }) : /* @__PURE__ */ jsx4("span", { className: "text-sm text-base-contrast-light", children: "No video selected" }),
-      /* @__PURE__ */ jsx4(
+    mode === "library" ? /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+      libraryImageId ? resolved.poster ? /* @__PURE__ */ jsx5("img", { src: resolved.poster, alt: "", className: "h-12 w-20 rounded object-cover" }) : /* @__PURE__ */ jsx5("span", { className: "text-sm text-base-contrast-light", children: "Video selected" }) : /* @__PURE__ */ jsx5("span", { className: "text-sm text-base-contrast-light", children: "No video selected" }),
+      /* @__PURE__ */ jsx5(
         Button,
         {
           type: "button",
@@ -162,9 +185,9 @@ function VideoSourceField({ value, onChange }) {
           children: "Choose video"
         }
       )
-    ] }) : /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx4(
+    ] }) : /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx5(
           "input",
           {
             type: "text",
@@ -184,7 +207,7 @@ function VideoSourceField({ value, onChange }) {
             className: "flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast placeholder:text-base-contrast-light focus:outline-none focus:ring-1 focus:ring-primary"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           Button,
           {
             type: "button",
@@ -196,13 +219,13 @@ function VideoSourceField({ value, onChange }) {
           }
         )
       ] }),
-      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" }),
+      error ? /* @__PURE__ */ jsx5("p", { className: "text-xs text-danger", children: error }) : null,
+      !error && fallback ? /* @__PURE__ */ jsx5("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__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx5("span", { className: "text-xs text-base-contrast-light", children: "Aspect" }),
         ASPECTS.map(({ label, width, height }) => {
           const active = value.width === width && value.height === height;
-          return /* @__PURE__ */ jsx4(
+          return /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -236,22 +259,22 @@ function useResolvedDocument(documentId) {
 }
 
 // src/components/shared/DocumentSourceField.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function DocumentSourceField({ value, onChange }) {
   const mediaLibrary = useMediaLibrary();
   const documentId = value?.documentId || void 0;
   const { entry, missing } = useResolvedDocument(documentId);
-  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsx5(FormLabel, { children: "Document" }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
-      entry ? /* @__PURE__ */ jsxs3("span", { className: "min-w-0 flex-1 truncate text-sm text-base-contrast", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx6(FormLabel, { children: "Document" }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
+      entry ? /* @__PURE__ */ jsxs4("span", { className: "min-w-0 flex-1 truncate text-sm text-base-contrast", children: [
         entry.filename,
-        /* @__PURE__ */ jsxs3("span", { className: "text-base-contrast-light", children: [
+        /* @__PURE__ */ jsxs4("span", { className: "text-base-contrast-light", children: [
           " \xB7 ",
           formatFileSize(entry.size)
         ] })
-      ] }) : /* @__PURE__ */ jsx5("span", { className: "flex-1 text-sm text-base-contrast-light", children: missing ? "File missing" : "No document selected" }),
-      /* @__PURE__ */ jsx5(
+      ] }) : /* @__PURE__ */ jsx6("span", { className: "flex-1 text-sm text-base-contrast-light", children: missing ? "File missing" : "No document selected" }),
+      /* @__PURE__ */ jsx6(
         Button,
         {
           type: "button",
@@ -266,11 +289,11 @@ function DocumentSourceField({ value, onChange }) {
 }
 
 // src/components/shared/SegmentedControl.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } 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) => {
+  return /* @__PURE__ */ jsx7("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(
+    return /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -292,9 +315,9 @@ function SegmentedControl({ options, value, onChange, className }) {
 }
 
 // src/components/shared/ColorPicker.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function ColorPicker({ value, onChange, label = "Color", className }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "label",
     {
       className: cn(
@@ -302,7 +325,7 @@ function ColorPicker({ value, onChange, label = "Color", className }) {
         className
       ),
       style: { backgroundColor: value },
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         "input",
         {
           type: "color",
@@ -324,7 +347,7 @@ function useBrandSwatches() {
 }
 
 // src/components/shared/ImageBackgroundField.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var MODES = [
   { value: "none", label: "None" },
   { value: "theme", label: "Light / Dark" },
@@ -343,11 +366,11 @@ function ImageBackgroundField({ label, value, onChange }) {
     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(
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx9(FormLabel, { children: label }),
+    /* @__PURE__ */ jsx9(SegmentedControl, { options: MODES, value: mode, onChange: setMode, className: "self-start" }),
+    value?.mode === "theme" && /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-3", children: [
+      /* @__PURE__ */ jsx9(
         Select,
         {
           label: "Light mode",
@@ -356,7 +379,7 @@ function ImageBackgroundField({ label, value, onChange }) {
           onChange: (light) => onChange({ ...value, light })
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         Select,
         {
           label: "Dark mode",
@@ -366,9 +389,9 @@ function ImageBackgroundField({ label, value, onChange }) {
         }
       )
     ] }),
-    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(
+    value?.mode === "custom" && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx9(
           ColorPicker,
           {
             label: "Background color",
@@ -376,9 +399,9 @@ function ImageBackgroundField({ label, value, onChange }) {
             onChange: (color) => onChange({ mode: "custom", color })
           }
         ),
-        /* @__PURE__ */ jsx8("span", { className: "font-mono text-xs text-base-contrast-light", children: value.color })
+        /* @__PURE__ */ jsx9("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(
+      swatches.length > 0 && /* @__PURE__ */ jsx9("div", { role: "group", "aria-label": "Brand colors", className: "flex flex-wrap gap-2", children: swatches.map((s) => /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
@@ -399,7 +422,7 @@ function ImageBackgroundField({ label, value, onChange }) {
 }
 
 // src/components/editor/SettingsForm.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function resolveValues(schema, values) {
   const resolved = {};
   for (const [key, field] of Object.entries(schema)) {
@@ -439,9 +462,9 @@ function RangeField({
   onChange
 }) {
   const id = useId();
-  return /* @__PURE__ */ jsxs5("div", { children: [
-    /* @__PURE__ */ jsx9(FormLabel, { htmlFor: id, children: field.label }),
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsx10(FormLabel, { htmlFor: id, children: field.label }),
+    /* @__PURE__ */ jsx10(
       "input",
       {
         id,
@@ -461,7 +484,7 @@ function RangeField({
 function renderField(key, field, value, handleFieldChange, values) {
   switch (field.type) {
     case "text":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         Input,
         {
           label: field.label,
@@ -472,7 +495,7 @@ function renderField(key, field, value, handleFieldChange, values) {
         key
       );
     case "number":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         Input,
         {
           label: field.label,
@@ -483,7 +506,7 @@ function renderField(key, field, value, handleFieldChange, values) {
         key
       );
     case "checkbox":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         Checkbox,
         {
           label: field.label,
@@ -493,7 +516,7 @@ function renderField(key, field, value, handleFieldChange, values) {
         key
       );
     case "select":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         Select,
         {
           label: field.label,
@@ -504,7 +527,7 @@ function renderField(key, field, value, handleFieldChange, values) {
         key
       );
     case "range":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         RangeField,
         {
           field,
@@ -514,7 +537,7 @@ function renderField(key, field, value, handleFieldChange, values) {
         key
       );
     case "link":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         LinkField,
         {
           label: field.label,
@@ -524,7 +547,7 @@ function renderField(key, field, value, handleFieldChange, values) {
         key
       );
     case "video-source":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         VideoSourceField,
         {
           value,
@@ -533,7 +556,7 @@ function renderField(key, field, value, handleFieldChange, values) {
         key
       );
     case "document-source":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         DocumentSourceField,
         {
           value,
@@ -543,7 +566,7 @@ function renderField(key, field, value, handleFieldChange, values) {
       );
     case "image-background":
       if (field.hidden?.(values)) return null;
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         ImageBackgroundField,
         {
           label: field.label,
@@ -570,14 +593,208 @@ function SettingsForm({ schema, values, onChange, tabs }) {
     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__ */ jsx9("div", { className: panel, children: fields(t.fields) }) })),
-      ...otherKeys.length > 0 ? [{ id: "__other__", label: "Other", content: /* @__PURE__ */ jsx9("div", { className: panel, children: fields(otherKeys) }) }] : []
+      ...tabs.map((t) => ({ id: t.label, label: t.label, content: /* @__PURE__ */ jsx10("div", { className: panel, children: fields(t.fields) }) })),
+      ...otherKeys.length > 0 ? [{ id: "__other__", label: "Other", content: /* @__PURE__ */ jsx10("div", { className: panel, children: fields(otherKeys) }) }] : []
     ];
-    return /* @__PURE__ */ jsx9(Tabs, { tabs: tabItems, fullBleedTabBar: true });
+    return /* @__PURE__ */ jsx10(Tabs, { tabs: tabItems, fullBleedTabBar: true });
   }
-  return /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-4", children: Object.entries(schema).map(([key, field]) => renderField(key, field, local[key], handleFieldChange, allValues)) });
+  return /* @__PURE__ */ jsx10("div", { className: "flex flex-col gap-4", children: Object.entries(schema).map(([key, field]) => renderField(key, field, local[key], handleFieldChange, allValues)) });
 }
 
+// src/components/shared/Popover.tsx
+import { useEffect as useEffect3, useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+
+// 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 useInitialFocus(ref, active) {
+  useEffect(() => {
+    if (!active || !ref.current) return;
+    const previouslyFocused = document.activeElement;
+    ref.current.querySelector(FOCUSABLE_SELECTOR)?.focus();
+    return () => {
+      if (previouslyFocused && document.body.contains(previouslyFocused)) {
+        previouslyFocused.focus();
+      }
+    };
+  }, [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 jsx11 } from "react/jsx-runtime";
+function Popover({
+  isOpen,
+  onClose,
+  anchorRef,
+  children,
+  align = "auto",
+  className,
+  portal = false,
+  placement = "bottom"
+}) {
+  const panelRef = useRef2(null);
+  const [resolvedAlign, setResolvedAlign] = useState3("start");
+  const [fixedPos, setFixedPos] = useState3(null);
+  useInitialFocus(panelRef, isOpen && (!portal || fixedPos !== null));
+  useLayoutEffect(() => {
+    if (!portal) return;
+    if (!isOpen) {
+      setFixedPos(null);
+      return;
+    }
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const update = () => {
+      const r = anchor.getBoundingClientRect();
+      const next = placement === "top" ? { left: r.left, bottom: window.innerHeight - r.top + 4 } : { left: r.left, top: r.bottom + 4 };
+      setFixedPos(
+        (prev) => prev && prev.left === next.left && prev.top === next.top && prev.bottom === next.bottom ? prev : next
+      );
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [isOpen, portal, placement, anchorRef]);
+  useLayoutEffect(() => {
+    if (portal) return;
+    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]);
+  const escapeLayerRef = useStackedEscape(onClose, { enabled: isOpen });
+  useLayoutEffect(() => {
+    escapeLayerRef.current = isOpen ? anchorRef.current?.closest("[data-modal-layer]") ?? null : null;
+  }, [isOpen, anchorRef, escapeLayerRef]);
+  useEffect3(() => {
+    if (!isOpen) return;
+    function onMouseDown(e) {
+      const target = e.target;
+      if (panelRef.current?.contains(target)) return;
+      if (anchorRef.current?.contains(target)) return;
+      const layer = target instanceof Element ? target.closest("[data-modal-layer]") : null;
+      if (layer && !layer.contains(anchorRef.current)) return;
+      onClose();
+    }
+    document.addEventListener("mousedown", onMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", onMouseDown);
+    };
+  }, [isOpen, onClose, anchorRef]);
+  if (!isOpen) return null;
+  const effectiveAlign = align === "auto" ? resolvedAlign : align;
+  if (portal) {
+    if (!fixedPos) return null;
+    return createPortal(
+      /* @__PURE__ */ jsx11(
+        "div",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "false",
+          "data-popover": "",
+          style: {
+            position: "fixed",
+            left: `${fixedPos.left}px`,
+            ...fixedPos.top !== void 0 ? { top: `${fixedPos.top}px` } : {},
+            ...fixedPos.bottom !== void 0 ? { bottom: `${fixedPos.bottom}px` } : {}
+          },
+          className: cn("z-50 rounded-md border border-base-200 bg-base shadow-lg", className),
+          children
+        }
+      ),
+      document.body
+    );
+  }
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      ref: panelRef,
+      role: "dialog",
+      "aria-modal": "false",
+      "data-popover": "",
+      className: cn(
+        "absolute z-50 rounded-md border border-base-200 bg-base shadow-lg",
+        placement === "top" ? "bottom-full mb-1" : "top-full mt-1",
+        effectiveAlign === "end" ? "right-0" : "left-0",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/shared/PopoverItem.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var PopoverItem = forwardRef2(
+  function PopoverItem2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx12(
+      "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) {
@@ -596,8 +813,8 @@ function canDropBlock(source, dropContainerId) {
 }
 
 // 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";
+import { createContext as createContext2, useContext as useContext2, useState as useState4, useCallback } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var EditorContext = createContext2(null);
 function useEditorContext() {
   const context = useContext2(EditorContext);
@@ -611,9 +828,13 @@ function useOptionalEditorContext() {
 }
 
 export {
+  Tooltip,
+  Kbd,
   DragHandle2 as DragHandle,
   DeleteButton,
   SettingsButton,
+  Popover,
+  PopoverItem,
   SettingsForm,
   buildBlockDragData,
   buildBlockDropData,