veryfront 0.1.1123 → 0.1.1124

package/esm/src/react/components/ui/anchored-surface.js

@@ -0,0 +1,58 @@
+/**
+ * Shared behavioral machinery for Popover and DropdownMenu.
+ * TODO(a11y): focus trap, portal + collision-aware positioning (flip/shift),
+ * aria-controls, side/align offsets.
+ * DropdownMenu: roving focus, typeahead, Tab, aria-activedescendant, sub menus.
+ * @module react/components/ui/anchored-surface
+ */
+import * as React from "react";
+import { cx as cn } from "./cva.js";
+import { Slot } from "./slot.js";
+import { Floating } from "./floating.js";
+import { useDisclosure } from "./disclosure.js";
+/**
+ * Creates a fresh context instance plus the AnchoredRoot, AnchoredTrigger, and
+ * AnchoredContent parts -- all bound to that context.
+ *
+ * Each skin (Popover, DropdownMenu) calls this ONCE at module scope so their
+ * contexts are distinct objects. This prevents cross-binding when one skin is
+ * nested inside the other or inside a modal skin: a DropdownMenuItem close
+ * call only affects the DropdownMenu whose context is in scope, never a
+ * Popover above it in the tree.
+ */
+export function createAnchoredSurfaceParts() {
+    const Context = React.createContext(null);
+    /**
+     * Anchor `<span>` + disclosure state + context provider.
+     * The span is the positioning anchor for `Floating`.
+     */
+    function AnchoredRoot({ children, open, defaultOpen, onOpenChange }) {
+        const { open: isOpen, setOpen } = useDisclosure({ open, defaultOpen, onOpenChange });
+        const anchorRef = React.useRef(null);
+        const ctx = React.useMemo(() => ({ open: isOpen, setOpen, anchorRef }), [isOpen, setOpen]);
+        return (React.createElement("span", { ref: anchorRef, className: "relative inline-block" },
+            React.createElement(Context.Provider, { value: ctx }, children)));
+    }
+    /**
+     * Toggle trigger. Sets `aria-haspopup` and `aria-expanded`; toggles open on
+     * click. Skins differ only in the `haspopup` value they supply.
+     */
+    function AnchoredTrigger({ children, asChild, onClick, haspopup, ...props }) {
+        const ctx = React.useContext(Context);
+        const Comp = asChild ? Slot : "button";
+        return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), "aria-haspopup": haspopup, "aria-expanded": ctx?.open, onClick: (e) => {
+                onClick?.(e);
+                // Guard ctx before reading ctx.open (trigger may render outside a Root).
+                if (ctx)
+                    ctx.setOpen(!ctx.open);
+            }, ...props }, children));
+    }
+    /** `Floating` wrapper with base classes. Skins extend via `className` and `role`. */
+    function AnchoredContent({ children, className, align, ...props }) {
+        const ctx = React.useContext(Context);
+        if (!ctx)
+            return null;
+        return (React.createElement(Floating, { anchorRef: ctx.anchorRef, open: ctx.open, align: align, onDismiss: () => ctx.setOpen(false), className: cn("z-50 overflow-hidden rounded-lg bg-[var(--popover)] text-[var(--foreground)] shadow-sm outline-none", className), ...props }, children));
+    }
+    return { Context, AnchoredRoot, AnchoredTrigger, AnchoredContent };
+}

package/esm/src/react/components/ui/collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/collapsible.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,yCAAyC;AACzC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,0CAA0C;AAC1C,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAgBvC;AAED,gDAAgD;AAChD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC5F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wEAAwE;AACxE,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAkB9C;AAED,sDAAsD;AACtD,wBAAgB,kBAAkB,CAChC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC3D,KAAK,CAAC,YAAY,GAAG,IAAI,CAQ3B"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/collapsible.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,yCAAyC;AACzC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,0CAA0C;AAC1C,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAUvC;AAED,gDAAgD;AAChD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC5F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wEAAwE;AACxE,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAkB9C;AAED,sDAAsD;AACtD,wBAAgB,kBAAkB,CAChC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC3D,KAAK,CAAC,YAAY,GAAG,IAAI,CAQ3B"}

package/esm/src/react/components/ui/collapsible.js

@@ -11,18 +11,12 @@
  */
 import * as React from "react";
 import { Slot } from "./slot.js";
+import { useDisclosure } from "./disclosure.js";
 const CollapsibleContext = React.createContext(null);
 /** Collapsible root — owns open state. */
 export function Collapsible({ open, defaultOpen, onOpenChange, disabled, children, ...props }) {
-    const [internal, setInternal] = React.useState(defaultOpen ?? false);
-    const isControlled = open !== undefined;
-    const isOpen = isControlled ? open : internal;
-    const toggle = React.useCallback(() => {
-        const next = !isOpen;
-        if (!isControlled)
-            setInternal(next);
-        onOpenChange?.(next);
-    }, [isOpen, isControlled, onOpenChange]);
+    const { open: isOpen, setOpen } = useDisclosure({ open, defaultOpen, onOpenChange });
+    const toggle = React.useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
     return (React.createElement("div", { "data-state": isOpen ? "open" : "closed", ...props },
         React.createElement(CollapsibleContext.Provider, { value: { open: isOpen, toggle, disabled } }, children)));
 }

package/esm/src/react/components/ui/dialog.d.ts

@@ -3,10 +3,7 @@
  * Trigger / Content + Header / Title / Description / Body / Footer / Action /
  * Cancel / Close / Form). Classes ported 1:1 from Studio's `Dialog` (tokens
  * remapped; `Heading` level 2 + `Text` inlined). Modal overlay + centered panel;
- * dismisses on `Escape` and overlay click.
- *
- * TODO(a11y): focus trap + restore, `aria-labelledby`/`aria-describedby` wiring,
- * scroll-lock, portal, enter/exit animation. Private to the chat module.
+ * dismisses on `Escape` and overlay click. A11y work tracked in modal-surface.tsx.
  *
  * @module react/components/ui/dialog
  */
@@ -20,9 +17,9 @@ export interface DialogProps {
     onOpenChange?: (open: boolean) => void;
 }
 /** Dialog root — owns open state. */
-export declare function Dialog({ children, open, defaultOpen, onOpenChange, }: DialogProps): React.ReactElement;
+export declare function Dialog(props: DialogProps): React.ReactElement;
 /** Trigger — opens the dialog. `asChild` merges onto the child element. */
-export declare function DialogTrigger({ children, asChild, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare function DialogTrigger(props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
 }): React.ReactElement;
 /** Modal surface — overlay + centered panel, rendered while open. */
@@ -49,7 +46,7 @@ export declare function DialogAction({ isLoading, variant, size, type, ...props
 /** Alternate button (secondary, default size) that closes the dialog. */
 export declare function DialogCancel({ className, variant, size, onClick, ...props }: ButtonProps): React.ReactElement;
 /** Closes the dialog. `asChild` merges onto the child element. */
-export declare function DialogClose({ children, asChild, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare function DialogClose(props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
 }): React.ReactElement;
 //# sourceMappingURL=dialog.d.ts.map

package/esm/src/react/components/ui/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/dialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/dialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAU,KAAK,WAAW,EAAiB,MAAM,aAAa,CAAC;AAatE,oCAAoC;AACpC,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,qCAAqC;AACrC,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAE7D;AAED,2EAA2E;AAC3E,wBAAgB,aAAa,CAC3B,KAAK,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAC3E,KAAK,CAAC,YAAY,CAEpB;AAED,qEAAqE;AACrE,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAalE;AAED,8CAA8C;AAC9C,wBAAgB,YAAY,CAC1B,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAEpB;AAED;qEACqE;AACrE,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,YAAY,CAU/D;AAED,oDAAoD;AACpD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,YAAY,CAUjE;AAED,oDAAoD;AACpD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,CAU3D;AAED,qDAAqD;AACrD,wBAAgB,YAAY,CAC1B,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAEpB;AAED,uFAAuF;AACvF,wBAAgB,UAAU,CACxB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,GACjE,KAAK,CAAC,YAAY,CAEpB;AAED,0CAA0C;AAC1C,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,yDAAyD;AACzD,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,IAAe,EACf,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAUxC;AAED,yEAAyE;AACzE,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,OAAqB,EACrB,IAAgB,EAChB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAclC;AAED,kEAAkE;AAClE,wBAAgB,WAAW,CACzB,KAAK,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAC3E,KAAK,CAAC,YAAY,CAEpB"}

package/esm/src/react/components/ui/dialog.js

@@ -3,70 +3,29 @@
  * Trigger / Content + Header / Title / Description / Body / Footer / Action /
  * Cancel / Close / Form). Classes ported 1:1 from Studio's `Dialog` (tokens
  * remapped; `Heading` level 2 + `Text` inlined). Modal overlay + centered panel;
- * dismisses on `Escape` and overlay click.
- *
- * TODO(a11y): focus trap + restore, `aria-labelledby`/`aria-describedby` wiring,
- * scroll-lock, portal, enter/exit animation. Private to the chat module.
+ * dismisses on `Escape` and overlay click. A11y work tracked in modal-surface.tsx.
  *
  * @module react/components/ui/dialog
  */
 import * as React from "react";
 import { cx as cn } from "./cva.js";
-import { Slot } from "./slot.js";
 import { ScrollFade } from "./scroll-fade.js";
 import { Button, LoadingButton } from "./button.js";
-const DialogContext = React.createContext(null);
-function useDialog() {
-    const ctx = React.useContext(DialogContext);
-    if (!ctx)
-        throw new Error("Dialog parts must be used within <Dialog>");
-    return ctx;
-}
+import { createModalSurfaceParts } from "./modal-surface.js";
+// Per-skin context + machinery -- distinct from Drawer's instance so a
+// DrawerClose nested inside a Dialog cannot accidentally close the Dialog.
+const { ModalRoot: _Root, useModal: _hook, ModalTrigger: _Trigger, ModalClose: _Close, ModalContent: _Content, } = createModalSurfaceParts("Dialog");
 /** Dialog root — owns open state. */
-export function Dialog({ children, open, defaultOpen, onOpenChange, }) {
-    const [internal, setInternal] = React.useState(defaultOpen ?? false);
-    const isControlled = open !== undefined;
-    const isOpen = isControlled ? open : internal;
-    const setOpen = React.useCallback((next) => {
-        if (!isControlled)
-            setInternal(next);
-        onOpenChange?.(next);
-    }, [isControlled, onOpenChange]);
-    return (React.createElement(DialogContext.Provider, { value: { open: isOpen, setOpen } }, children));
+export function Dialog(props) {
+    return React.createElement(_Root, { ...props });
 }
 /** Trigger — opens the dialog. `asChild` merges onto the child element. */
-export function DialogTrigger({ children, asChild, onClick, ...props }) {
-    const ctx = useDialog();
-    const Comp = asChild ? Slot : "button";
-    return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), onClick: (e) => {
-            onClick?.(e);
-            ctx.setOpen(true);
-        }, ...props }, children));
+export function DialogTrigger(props) {
+    return React.createElement(_Trigger, { ...props });
 }
 /** Modal surface — overlay + centered panel, rendered while open. */
 export function DialogContent({ className, children, ...props }) {
-    const ctx = useDialog();
-    const panelRef = React.useRef(null);
-    React.useEffect(() => {
-        if (!ctx.open)
-            return;
-        const onKeyDown = (e) => {
-            if (e.key === "Escape")
-                ctx.setOpen(false);
-        };
-        document.addEventListener("keydown", onKeyDown);
-        // Focus the first focusable descendant on open (radix-like) — e.g. a
-        // CommandInput — falling back to the panel itself. Full focus-trap is TODO.
-        const panel = panelRef.current;
-        const focusable = panel?.querySelector('input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])');
-        (focusable ?? panel)?.focus();
-        return () => document.removeEventListener("keydown", onKeyDown);
-    }, [ctx.open]);
-    if (!ctx.open)
-        return null;
-    return (React.createElement("div", { className: "fixed inset-0 z-50" },
-        React.createElement("div", { className: "fixed inset-0 bg-[var(--overlay)]", onClick: () => ctx.setOpen(false) }),
-        React.createElement("div", { ref: panelRef, role: "dialog", "aria-modal": "true", tabIndex: -1, className: cn("fixed left-1/2 top-1/2 z-50 w-[calc(100%-3rem)] max-w-xl max-h-[85vh] -translate-x-1/2 -translate-y-1/2", "rounded-xl bg-[var(--dialog)] text-[var(--foreground)] shadow-lg outline-none overflow-hidden flex flex-col", className), ...props }, children)));
+    return (React.createElement(_Content, { className: cn("fixed left-1/2 top-1/2 z-50 w-[calc(100%-3rem)] max-w-xl max-h-[85vh] -translate-x-1/2 -translate-y-1/2", "rounded-xl bg-[var(--dialog)] text-[var(--foreground)] shadow-lg outline-none overflow-hidden flex flex-col", className), ...props }, children));
 }
 /** Left-aligned title + description block. */
 export function DialogHeader({ className, ...props }) {
@@ -99,18 +58,13 @@ export function DialogAction({ isLoading, variant = "primary", size = "default",
 }
 /** Alternate button (secondary, default size) that closes the dialog. */
 export function DialogCancel({ className, variant = "secondary", size = "default", onClick, ...props }) {
-    const ctx = useDialog();
+    const ctx = _hook();
     return (React.createElement(Button, { variant: variant, size: size, className: className, onClick: (e) => {
             onClick?.(e);
             ctx.setOpen(false);
         }, ...props }));
 }
 /** Closes the dialog. `asChild` merges onto the child element. */
-export function DialogClose({ children, asChild, onClick, ...props }) {
-    const ctx = useDialog();
-    const Comp = asChild ? Slot : "button";
-    return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), onClick: (e) => {
-            onClick?.(e);
-            ctx.setOpen(false);
-        }, ...props }, children));
+export function DialogClose(props) {
+    return React.createElement(_Close, { ...props });
 }

package/esm/src/react/components/ui/disclosure.d.ts

@@ -0,0 +1,12 @@
+/** Options accepted by `useDisclosure`. */
+export interface DisclosureOptions {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** Returns `{ open, setOpen }`, handling controlled and uncontrolled usage. */
+export declare function useDisclosure({ open, defaultOpen, onOpenChange }: DisclosureOptions): {
+    open: boolean;
+    setOpen: any;
+};
+//# sourceMappingURL=disclosure.d.ts.map

package/esm/src/react/components/ui/disclosure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/disclosure.ts"],"names":[],"mappings":"AAMA,2CAA2C;AAC3C,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,+EAA+E;AAC/E,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,iBAAiB;;;EAiBnF"}

package/esm/src/react/components/ui/disclosure.js

@@ -0,0 +1,22 @@
+/**
+ * useDisclosure: shared controlled/uncontrolled open state for overlay surfaces.
+ * @module react/components/ui/disclosure
+ */
+import * as React from "react";
+/** Returns `{ open, setOpen }`, handling controlled and uncontrolled usage. */
+export function useDisclosure({ open, defaultOpen, onOpenChange }) {
+    const [internal, setInternal] = React.useState(defaultOpen ?? false);
+    const isControlled = open !== undefined;
+    const isOpen = open ?? internal;
+    // Latest-ref pattern: setOpen keeps a stable identity across parent renders
+    // (so effect consumers do not re-register listeners) while always invoking
+    // the caller's current onOpenChange.
+    const onOpenChangeRef = React.useRef(onOpenChange);
+    onOpenChangeRef.current = onOpenChange;
+    const setOpen = React.useCallback((next) => {
+        if (!isControlled)
+            setInternal(next);
+        onOpenChangeRef.current?.(next);
+    }, [isControlled]);
+    return { open: isOpen, setOpen };
+}

package/esm/src/react/components/ui/drawer.d.ts

@@ -3,10 +3,8 @@
  * Vaul-style component). Same API shape for the parts we need: Root / Trigger /
  * Content (overlay + sheet + drag handle) / Title / Header / Body / Footer /
  * Close. Surface classes ported 1:1 from Studio (tokens remapped). Slides up
- * from the bottom; dismisses on `Escape` and overlay click.
- *
- * TODO(a11y): focus trap + restore, drag-to-dismiss / snap points, scroll-lock,
- * portal, enter/exit animation. Private to the chat module.
+ * from the bottom; dismisses on `Escape` and overlay click. A11y work tracked
+ * in modal-surface.tsx.
  *
  * @module react/components/ui/drawer
  */
@@ -19,9 +17,9 @@ export interface DrawerProps {
     onOpenChange?: (open: boolean) => void;
 }
 /** Drawer root — owns open state. */
-export declare function Drawer({ children, open, defaultOpen, onOpenChange, }: DrawerProps): React.ReactElement;
+export declare function Drawer(props: DrawerProps): React.ReactElement;
 /** Trigger — opens the drawer. `asChild` merges onto the child element. */
-export declare function DrawerTrigger({ children, asChild, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare function DrawerTrigger(props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
 }): React.ReactElement;
 /** Bottom sheet — overlay + sliding surface with a drag handle. */
@@ -35,7 +33,7 @@ export declare function DrawerBody({ className, ...props }: React.HTMLAttributes
 /** Sticky footer, full-width stacked actions. */
 export declare function DrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
 /** Closes the drawer. `asChild` merges onto the child element. */
-export declare function DrawerClose({ children, asChild, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare function DrawerClose(props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
 }): React.ReactElement;
 //# sourceMappingURL=drawer.d.ts.map

package/esm/src/react/components/ui/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,oCAAoC;AACpC,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,qCAAqC;AACrC,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,GACb,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAalC;AAED,2EAA2E;AAC3E,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAe5F;AAED,mEAAmE;AACnE,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA2ClE;AAED,8EAA8E;AAC9E,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,YAAY,CAO/D;AAED,6BAA6B;AAC7B,wBAAgB,YAAY,CAC1B,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAEpB;AAED,4BAA4B;AAC5B,wBAAgB,UAAU,CACxB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAOpB;AAED,iDAAiD;AACjD,wBAAgB,YAAY,CAC1B,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAUpB;AAED,kEAAkE;AAClE,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAe5F"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,oCAAoC;AACpC,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,qCAAqC;AACrC,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAE7D;AAED,2EAA2E;AAC3E,wBAAgB,aAAa,CAC3B,KAAK,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAC3E,KAAK,CAAC,YAAY,CAEpB;AAED,mEAAmE;AACnE,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAkBlE;AAED,8EAA8E;AAC9E,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,YAAY,CAO/D;AAED,6BAA6B;AAC7B,wBAAgB,YAAY,CAC1B,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAEpB;AAED,4BAA4B;AAC5B,wBAAgB,UAAU,CACxB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAOpB;AAED,iDAAiD;AACjD,wBAAgB,YAAY,CAC1B,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAUpB;AAED,kEAAkE;AAClE,wBAAgB,WAAW,CACzB,KAAK,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAC3E,KAAK,CAAC,YAAY,CAEpB"}

package/esm/src/react/components/ui/drawer.js

@@ -3,67 +3,28 @@
  * Vaul-style component). Same API shape for the parts we need: Root / Trigger /
  * Content (overlay + sheet + drag handle) / Title / Header / Body / Footer /
  * Close. Surface classes ported 1:1 from Studio (tokens remapped). Slides up
- * from the bottom; dismisses on `Escape` and overlay click.
- *
- * TODO(a11y): focus trap + restore, drag-to-dismiss / snap points, scroll-lock,
- * portal, enter/exit animation. Private to the chat module.
+ * from the bottom; dismisses on `Escape` and overlay click. A11y work tracked
+ * in modal-surface.tsx.
  *
  * @module react/components/ui/drawer
  */
 import * as React from "react";
 import { cx as cn } from "./cva.js";
-import { Slot } from "./slot.js";
-const DrawerContext = React.createContext(null);
-function useDrawer() {
-    const ctx = React.useContext(DrawerContext);
-    if (!ctx)
-        throw new Error("Drawer parts must be used within <Drawer>");
-    return ctx;
-}
+import { createModalSurfaceParts } from "./modal-surface.js";
+// Per-skin context + machinery -- distinct from Dialog's instance so a
+// DialogClose nested inside a Drawer cannot accidentally close the Drawer.
+const { ModalRoot: _Root, ModalTrigger: _Trigger, ModalClose: _Close, ModalContent: _Content } = createModalSurfaceParts("Drawer");
 /** Drawer root — owns open state. */
-export function Drawer({ children, open, defaultOpen, onOpenChange, }) {
-    const [internal, setInternal] = React.useState(defaultOpen ?? false);
-    const isControlled = open !== undefined;
-    const isOpen = isControlled ? open : internal;
-    const setOpen = React.useCallback((next) => {
-        if (!isControlled)
-            setInternal(next);
-        onOpenChange?.(next);
-    }, [isControlled, onOpenChange]);
-    return (React.createElement(DrawerContext.Provider, { value: { open: isOpen, setOpen } }, children));
+export function Drawer(props) {
+    return React.createElement(_Root, { ...props });
 }
 /** Trigger — opens the drawer. `asChild` merges onto the child element. */
-export function DrawerTrigger({ children, asChild, onClick, ...props }) {
-    const ctx = useDrawer();
-    const Comp = asChild ? Slot : "button";
-    return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), onClick: (e) => {
-            onClick?.(e);
-            ctx.setOpen(true);
-        }, ...props }, children));
+export function DrawerTrigger(props) {
+    return React.createElement(_Trigger, { ...props });
 }
 /** Bottom sheet — overlay + sliding surface with a drag handle. */
 export function DrawerContent({ children, className, ...props }) {
-    const ctx = useDrawer();
-    const sheetRef = React.useRef(null);
-    React.useEffect(() => {
-        if (!ctx.open)
-            return;
-        const onKeyDown = (e) => {
-            if (e.key === "Escape")
-                ctx.setOpen(false);
-        };
-        document.addEventListener("keydown", onKeyDown);
-        const focusable = sheetRef.current?.querySelector('input:not([disabled]), textarea:not([disabled]), button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])');
-        (focusable ?? sheetRef.current)?.focus();
-        return () => document.removeEventListener("keydown", onKeyDown);
-    }, [ctx.open]);
-    if (!ctx.open)
-        return null;
-    return (React.createElement("div", { className: "fixed inset-0 z-50" },
-        React.createElement("div", { className: "fixed inset-0 bg-[var(--overlay)]", onClick: () => ctx.setOpen(false) }),
-        React.createElement("div", { ref: sheetRef, role: "dialog", "aria-modal": "true", tabIndex: -1, className: cn("fixed inset-x-0 bottom-0 z-50 flex flex-col max-h-[85vh] w-full rounded-t-xl bg-[var(--drawer)] text-[var(--foreground)] outline-none", className), ...props },
-            React.createElement("div", { "aria-hidden": "true", className: "mx-auto mt-3 h-[3px] w-[30px] shrink-0 rounded-full bg-[var(--outline-border)]" }),
-            children)));
+    return (React.createElement(_Content, { className: cn("fixed inset-x-0 bottom-0 z-50 flex flex-col max-h-[85vh] w-full rounded-t-xl bg-[var(--drawer)] text-[var(--foreground)] outline-none", className), lead: React.createElement("div", { "aria-hidden": "true", className: "mx-auto mt-3 h-[3px] w-[30px] shrink-0 rounded-full bg-[var(--outline-border)]" }), ...props }, children));
 }
 /** Drawer title — 18px medium (Studio Heading-ish). Add `sr-only` to hide. */
 export function DrawerTitle({ className, ...props }) {
@@ -82,11 +43,6 @@ export function DrawerFooter({ className, ...props }) {
     return (React.createElement("div", { className: cn("shrink-0 px-4 pb-4 pt-3 flex flex-col gap-3 [&>button]:w-full", className), ...props }));
 }
 /** Closes the drawer. `asChild` merges onto the child element. */
-export function DrawerClose({ children, asChild, onClick, ...props }) {
-    const ctx = useDrawer();
-    const Comp = asChild ? Slot : "button";
-    return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), onClick: (e) => {
-            onClick?.(e);
-            ctx.setOpen(false);
-        }, ...props }, children));
+export function DrawerClose(props) {
+    return React.createElement(_Close, { ...props });
 }

package/esm/src/react/components/ui/dropdown-menu.d.ts

@@ -3,11 +3,8 @@
  * shape (Root / Trigger / Content / Group / Item / ItemMeta / Separator /
  * Label). Classes are ported 1:1 from Studio's `DropdownMenu` (token names
  * remapped to veryfront's `[var(--token)]` vocabulary). Opens below the
- * trigger; dismisses on outside-click, `Escape`, and item select.
- *
- * TODO(a11y): roving focus + arrow-key navigation, typeahead, `Tab` handling,
- * portal + collision-aware positioning (flip/shift), `aria-activedescendant`,
- * RadioItem/CheckboxItem/Sub menus. Private to the chat module.
+ * trigger; dismisses on outside-click, `Escape`, and item select. A11y work
+ * tracked in anchored-surface.tsx.
  *
  * @module react/components/ui/dropdown-menu
  */
@@ -20,9 +17,9 @@ export interface DropdownMenuProps {
     onOpenChange?: (open: boolean) => void;
 }
 /** DropdownMenu root — owns open state and the positioning anchor. */
-export declare function DropdownMenu({ children, open, defaultOpen, onOpenChange, }: DropdownMenuProps): React.ReactElement;
+export declare function DropdownMenu(props: DropdownMenuProps): React.ReactElement;
 /** Trigger — toggles the menu. `asChild` merges onto the child element. */
-export declare function DropdownMenuTrigger({ children, asChild, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare function DropdownMenuTrigger(props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
 }): React.ReactElement;
 /** Props accepted by `<DropdownMenuContent>`. */

package/esm/src/react/components/ui/dropdown-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/dropdown-menu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,0CAA0C;AAC1C,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,GACb,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAgBxC;AAED,2EAA2E;AAC3E,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAiB5F;AAED,iDAAiD;AACjD,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpF,oDAAoD;IACpD,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAED,gFAAgF;AAChF,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,KAAe,EACf,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAmBtD;AAED,4EAA4E;AAC5E,wBAAgB,iBAAiB,CAC/B,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACzE,KAAK,CAAC,YAAY,CAMpB;AAED,8CAA8C;AAC9C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC1F,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAyB5C;AAED,mEAAmE;AACnE,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,YAAY,CAWrB;AAED,kEAAkE;AAClE,wBAAgB,qBAAqB,CACnC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACpC,KAAK,CAAC,YAAY,CAEpB;AAED,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,YAAY,CAWrB"}
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/dropdown-menu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,0CAA0C;AAC1C,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAEzE;AAED,2EAA2E;AAC3E,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAC3E,KAAK,CAAC,YAAY,CAEpB;AAED,iDAAiD;AACjD,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpF,oDAAoD;IACpD,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAED,gFAAgF;AAChF,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,KAAe,EACf,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAWtD;AAED,4EAA4E;AAC5E,wBAAgB,iBAAiB,CAC/B,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACzE,KAAK,CAAC,YAAY,CAMpB;AAED,8CAA8C;AAC9C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC1F,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAyB5C;AAED,mEAAmE;AACnE,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,YAAY,CAWrB;AAED,kEAAkE;AAClE,wBAAgB,qBAAqB,CACnC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACpC,KAAK,CAAC,YAAY,CAEpB;AAED,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,YAAY,CAWrB"}

package/esm/src/react/components/ui/dropdown-menu.js

@@ -3,48 +3,29 @@
  * shape (Root / Trigger / Content / Group / Item / ItemMeta / Separator /
  * Label). Classes are ported 1:1 from Studio's `DropdownMenu` (token names
  * remapped to veryfront's `[var(--token)]` vocabulary). Opens below the
- * trigger; dismisses on outside-click, `Escape`, and item select.
- *
- * TODO(a11y): roving focus + arrow-key navigation, typeahead, `Tab` handling,
- * portal + collision-aware positioning (flip/shift), `aria-activedescendant`,
- * RadioItem/CheckboxItem/Sub menus. Private to the chat module.
+ * trigger; dismisses on outside-click, `Escape`, and item select. A11y work
+ * tracked in anchored-surface.tsx.
  *
  * @module react/components/ui/dropdown-menu
  */
 import * as React from "react";
 import { cx as cn } from "./cva.js";
 import { Slot } from "./slot.js";
-import { Floating } from "./floating.js";
-const MenuContext = React.createContext(null);
+import { createAnchoredSurfaceParts } from "./anchored-surface.js";
+// Per-skin context + machinery -- distinct from Popover's instance so a
+// Popover nested inside a DropdownMenu cannot accidentally close the menu.
+const { Context: _ctx, AnchoredRoot: _Root, AnchoredTrigger: _Trigger, AnchoredContent: _Content } = createAnchoredSurfaceParts();
 /** DropdownMenu root — owns open state and the positioning anchor. */
-export function DropdownMenu({ children, open, defaultOpen, onOpenChange, }) {
-    const [internal, setInternal] = React.useState(defaultOpen ?? false);
-    const isControlled = open !== undefined;
-    const isOpen = isControlled ? open : internal;
-    const setOpen = React.useCallback((next) => {
-        if (!isControlled)
-            setInternal(next);
-        onOpenChange?.(next);
-    }, [isControlled, onOpenChange]);
-    const anchorRef = React.useRef(null);
-    return (React.createElement("span", { ref: anchorRef, className: "relative inline-block" },
-        React.createElement(MenuContext.Provider, { value: { open: isOpen, setOpen, anchorRef } }, children)));
+export function DropdownMenu(props) {
+    return React.createElement(_Root, { ...props });
 }
 /** Trigger — toggles the menu. `asChild` merges onto the child element. */
-export function DropdownMenuTrigger({ children, asChild, onClick, ...props }) {
-    const ctx = React.useContext(MenuContext);
-    const Comp = asChild ? Slot : "button";
-    return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), "aria-haspopup": "menu", "aria-expanded": ctx?.open, onClick: (e) => {
-            onClick?.(e);
-            ctx?.setOpen(!ctx.open);
-        }, ...props }, children));
+export function DropdownMenuTrigger(props) {
+    return React.createElement(_Trigger, { ...props, haspopup: "menu" });
 }
 /** Menu surface — rendered below the trigger while open. No border (Studio). */
 export function DropdownMenuContent({ children, className, align = "start", ...props }) {
-    const ctx = React.useContext(MenuContext);
-    if (!ctx)
-        return null;
-    return (React.createElement(Floating, { anchorRef: ctx.anchorRef, open: ctx.open, align: align, onDismiss: () => ctx.setOpen(false), role: "menu", className: cn("z-50 min-w-[260px] overflow-hidden rounded-lg bg-[var(--popover)] p-2.5 shadow-sm outline-none", className), ...props }, children));
+    return (React.createElement(_Content, { role: "menu", align: align, className: cn("min-w-[260px] p-2.5", className), ...props }, children));
 }
 /** Groups related items with a tight inner gap (Studio: `gap-px p-0.5`). */
 export function DropdownMenuGroup({ children, className }) {
@@ -52,7 +33,7 @@ export function DropdownMenuGroup({ children, className }) {
 }
 /** A selectable menu item. Icons render at `size-3.5` (14px). */
 export function DropdownMenuItem({ children, className, onSelect, onClick, disabled, asChild, ...props }) {
-    const ctx = React.useContext(MenuContext);
+    const ctx = React.useContext(_ctx);
     const Comp = asChild ? Slot : "button";
     return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), role: "menuitem", "aria-disabled": disabled || undefined, className: cn("relative flex w-full cursor-pointer select-none items-center gap-2.5 rounded-md px-3 h-[36px] text-base font-normal text-left text-[var(--foreground)] outline-none transition-colors", "hover:bg-[var(--tertiary)] focus:bg-[var(--tertiary)] dark:hover:bg-[var(--accent)] dark:focus:bg-[var(--accent)]", "disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3.5 [&_svg]:shrink-0", className), onClick: (e) => {
             if (disabled)

package/esm/src/react/components/ui/modal-surface.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Shared behavioral machinery for Dialog and Drawer.
+ * TODO(a11y): focus trap, aria-labelledby, scroll-lock, portal, animation.
+ * Drawer: drag-to-dismiss / snap points.
+ * @module react/components/ui/modal-surface
+ */
+import * as React from "react";
+import { type DisclosureOptions } from "./disclosure.js";
+/** Open/close state shared between a modal skin's Root and its parts. */
+export interface ModalState {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+/** Props for the shared modal content shell. */
+export interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Extra node rendered before `children` -- used by Drawer for the drag handle. */
+    lead?: React.ReactNode;
+}
+type ModalBtnProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+};
+/**
+ * Creates a fresh context instance plus the Root, useModal, ModalTrigger,
+ * ModalClose, and ModalContent parts -- all bound to that context.
+ *
+ * Each skin (Dialog, Drawer) calls this ONCE at module scope so their contexts
+ * are distinct objects. This prevents cross-binding when one skin is nested
+ * inside the other: a DrawerClose inside a Dialog will only close the Drawer,
+ * never the Dialog, because the two contexts cannot overlap.
+ *
+ * @param name - Component name used in the thrown error (e.g. "Dialog").
+ */
+export declare function createModalSurfaceParts(name: string): {
+    ModalRoot: ({ children, open, defaultOpen, onOpenChange }: DisclosureOptions & {
+        children: React.ReactNode;
+    }) => React.ReactElement;
+    useModal: () => ModalState;
+    ModalTrigger: ({ children, asChild, onClick, ...props }: ModalBtnProps) => React.ReactElement;
+    ModalClose: ({ children, asChild, onClick, ...props }: ModalBtnProps) => React.ReactElement;
+    ModalContent: ({ className, children, lead, ...props }: ModalContentProps) => React.ReactElement | null;
+};
+export {};
+//# sourceMappingURL=modal-surface.d.ts.map

package/esm/src/react/components/ui/modal-surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-surface.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/modal-surface.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,iBAAiB,EAAiB,MAAM,iBAAiB,CAAC;AAExE,yEAAyE;AACzE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC;AAED,gDAAgD;AAChD,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,mFAAmF;IACnF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,KAAK,aAAa,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAsB3F;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM;+DAKD,iBAAiB,GAAG;QACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,KACA,KAAK,CAAC,YAAY;oBAOA,UAAU;6DAQa,aAAa,KACtD,KAAK,CAAC,YAAY;2DAmBuB,aAAa,KACtD,KAAK,CAAC,YAAY;4DAmBsB,iBAAiB,KACzD,KAAK,CAAC,YAAY,GAAG,IAAI;EA2B7B"}