@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/dialog.js

@@ -0,0 +1,185 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useControllableState, useLatest } from "../lib/use-controllable-state.js";
+import { Layer, useLayerDepth } from "../lib/layer.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { IconButton } from "./button.js";
+const PlainTitle = ({ asChild: _a, ...props }) => _jsx("h2", { ...props });
+const PlainDescription = ({ asChild: _a, ...props }) => _jsx("p", { ...props });
+const LayerPartsContext = React.createContext({ Title: PlainTitle, Description: PlainDescription });
+/** Lets a layer (Dialog, Alert Dialog, Sheet…) plug its accessible Title/Description into the shared header. */
+export function LayerPartsProvider({ value, children }) {
+    return _jsx(LayerPartsContext.Provider, { value: value, children: children });
+}
+function LayerDescriptionMount() {
+    const { registerDescription } = React.useContext(LayerPartsContext);
+    React.useLayoutEffect(() => registerDescription?.(), [registerDescription]);
+    return null;
+}
+/**
+ * The fixed top of a layer: title, optional description, icon and action. Shared by Dialog,
+ * Alert Dialog, Sheet and Drawer (exported under each name: `DialogHeader`, `SheetHeader`…).
+ */
+export const LayerHeader = React.forwardRef(function LayerHeader({ title, description, icon, action, srOnly, className, children, ...props }, ref) {
+    const { Title, Description } = React.useContext(LayerPartsContext);
+    const text = (_jsxs(_Fragment, { children: [_jsx(Title, { "data-slot": "layer-title", className: cn("font-display text-[1.3rem] leading-[1.2] text-balance text-fg", srOnly && "sr-only"), children: title }), description ? (_jsx(Description, { "data-slot": "layer-description", className: cn("mt-1 text-[13.5px] leading-relaxed text-pretty text-fg-muted", srOnly && "sr-only"), children: description })) : null, description ? _jsx(LayerDescriptionMount, {}) : null] }));
+    if (srOnly)
+        return _jsxs(_Fragment, { children: [text, children] });
+    return (_jsxs("div", { ref: ref, "data-slot": "layer-header", className: cn("vui-layer-header flex flex-none items-start gap-3.5 px-6 pt-5 pb-4 [[data-has-close]_&]:pe-14", className), ...props, children: [icon ? _jsx("div", { className: "flex flex-none items-center", children: icon }) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [text, children] }), action ? _jsx("div", { className: "flex flex-none items-center gap-1.5 self-center", children: action }) : null] }));
+});
+/** The scrolling middle of a layer. Header and footer stay fixed; only the body scrolls. */
+export const LayerBody = React.forwardRef(function LayerBody({ flush, className, onScroll, ...props }, ref) {
+    const [scrolled, setScrolled] = React.useState(false);
+    return (_jsx("div", { ref: ref, "data-slot": "layer-body", "data-scrolled": scrolled ? "" : undefined, onScroll: (e) => {
+            onScroll?.(e);
+            setScrolled(e.currentTarget.scrollTop > 0);
+        }, className: cn("vui-layer-body content-start text-sm text-fg", !flush && "px-6 pt-5 pb-5 [[data-slot=layer-header]+&]:pt-0", className), ...props }));
+});
+/** The fixed bottom of a layer: actions, primary last. Stacks (primary on top) inside a mobile sheet. */
+export const LayerFooter = React.forwardRef(function LayerFooter({ align = "end", className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, "data-slot": "layer-footer", className: cn("vui-layer-footer flex flex-none flex-wrap items-center gap-2 border-t border-line px-6 py-3.5", align === "end" && "justify-end", align === "between" && "justify-end [&>:first-child]:me-auto", align === "stretch" && "[&>*]:flex-1", className), ...props }));
+});
+const DialogRootContext = React.createContext(null);
+/** Read the nearest Dialog/Sheet/Drawer root — e.g. to close it from custom code (`requestOpenChange(false)`). */
+export function useDialogRoot() {
+    const ctx = React.useContext(DialogRootContext);
+    if (!ctx)
+        throw new Error("useDialogRoot must be used inside <Dialog>, <Sheet> or <Drawer>.");
+    return ctx;
+}
+/**
+ * A focused task that keeps the user in context (modal by default).
+ *
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild><Button>New contact</Button></DialogTrigger>
+ *   <DialogContent size="md">
+ *     <DialogHeader title="New contact" description="Add a contact manually." />
+ *     <DialogBody>…</DialogBody>
+ *     <DialogFooter>
+ *       <DialogClose asChild><Button>Cancel</Button></DialogClose>
+ *       <Button variant="primary">Save</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+export function Dialog({ open: openProp, defaultOpen = false, onOpenChange, modal = true, children }) {
+    const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange, name: "Dialog" });
+    const guardRef = React.useRef(undefined);
+    const pending = React.useRef(false);
+    const requestOpenChange = React.useCallback((next) => {
+        if (next || !guardRef.current)
+            return setOpen(next);
+        if (pending.current)
+            return;
+        const result = guardRef.current();
+        if (result === true)
+            return setOpen(false);
+        if (result === false)
+            return;
+        pending.current = true;
+        Promise.resolve(result)
+            .then((ok) => ok && setOpen(false))
+            .catch(() => { })
+            .finally(() => (pending.current = false));
+    }, [setOpen]);
+    const setGuard = React.useCallback((g) => (guardRef.current = g), []);
+    const ctx = React.useMemo(() => ({ open, requestOpenChange, setGuard, modal }), [open, requestOpenChange, setGuard, modal]);
+    return (_jsx(DialogRootContext.Provider, { value: ctx, children: _jsx(DialogPrimitive.Root, { open: open, onOpenChange: requestOpenChange, modal: modal, children: children }) }));
+}
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogClose = DialogPrimitive.Close;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogTitle = DialogPrimitive.Title;
+export const DialogDescription = DialogPrimitive.Description;
+/** The dimmed backdrop. `DialogContent` renders its own; export for custom layers. */
+export const DialogOverlay = React.forwardRef(function DialogOverlay({ className, blurred = true, ...props }, ref) {
+    return (_jsx(DialogPrimitive.Overlay, { ref: ref, "data-slot": "dialog-overlay", "data-overlay-blurred": blurred ? "" : undefined, className: cn("vui-overlay ui-fade", className), ...props }));
+});
+const dialogLabels = { close: "Close" };
+/**
+ * Internal: portal + overlay + layer depth + close guard + × button around a Radix Dialog.Content.
+ * Exported so other layers (Sheet, Drawer, Notification panel) share one implementation.
+ */
+export const LayerContentShell = React.forwardRef(function LayerContentShell({ dismissible = true, onBeforeClose, hideClose, container, labels, overlayClassName, className, children, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, onOpenAutoFocus, onCloseAutoFocus, ...props }, ref) {
+    const root = React.useContext(DialogRootContext);
+    // What had focus when the panel opened. Radix returns focus only to a Dialog.Trigger; a
+    // controlled dialog opened from a plain button (or a menu) would drop focus to <body> on close.
+    const returnTo = React.useRef(null);
+    const t = useLabels("dialog", dialogLabels, labels);
+    const scope = usePortalContainer();
+    const depth = useLayerDepth() + 1;
+    const modal = root?.modal ?? true;
+    const guard = useLatest(onBeforeClose);
+    // Register the guard with the root while mounted.
+    React.useEffect(() => {
+        if (!root)
+            return;
+        root.setGuard(onBeforeClose ? () => guard.current() : undefined);
+        return () => root.setGuard(undefined);
+    }, [root, Boolean(onBeforeClose)]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Drop aria-describedby when no description is mounted (no dangling reference, no Radix warning).
+    const [descriptions, setDescriptions] = React.useState(0);
+    const parts = React.useMemo(() => ({
+        Title: DialogPrimitive.Title,
+        Description: DialogPrimitive.Description,
+        registerDescription: () => {
+            setDescriptions((n) => n + 1);
+            return () => setDescriptions((n) => n - 1);
+        },
+    }), []);
+    const described = descriptions > 0 || "aria-describedby" in props;
+    return (_jsxs(DialogPrimitive.Portal, { container: container ?? scope, children: [modal ? _jsx(DialogOverlay, { blurred: depth === 1, className: overlayClassName }) : null, _jsx(Layer, { asChild: true, children: _jsxs(DialogPrimitive.Content, { ref: ref, "data-has-close": hideClose ? undefined : "", "aria-modal": modal, ...(described ? {} : { "aria-describedby": undefined }), className: cn("vui-layer-panel surface-popover", className), onEscapeKeyDown: (e) => {
+                        onEscapeKeyDown?.(e);
+                        if (!dismissible)
+                            e.preventDefault();
+                    }, onPointerDownOutside: (e) => {
+                        onPointerDownOutside?.(e);
+                        if (!dismissible)
+                            e.preventDefault();
+                    }, onInteractOutside: (e) => {
+                        onInteractOutside?.(e);
+                        // A non-modal panel (record preview) stays open while the page behind is used.
+                        if (!modal)
+                            e.preventDefault();
+                    }, onCloseAutoFocus: (e) => {
+                        onCloseAutoFocus?.(e);
+                        if (e.defaultPrevented)
+                            return;
+                        const el = returnTo.current;
+                        if (el && el.isConnected && el !== document.body) {
+                            e.preventDefault();
+                            el.focus();
+                        }
+                    }, onOpenAutoFocus: (e) => {
+                        // Fires before the focus scope moves focus in: activeElement is still the opener.
+                        returnTo.current = document.activeElement;
+                        onOpenAutoFocus?.(e);
+                        if (e.defaultPrevented)
+                            return;
+                        const target = e.currentTarget?.querySelector("[data-autofocus]");
+                        if (target) {
+                            e.preventDefault();
+                            target.focus();
+                        }
+                    }, ...props, children: [_jsx(LayerPartsProvider, { value: parts, children: children }), hideClose ? null : (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(IconButton, { label: t("close"), size: "sm", variant: "ghost", "data-slot": "layer-close", className: "absolute end-3 top-3 text-fg-muted hover:text-fg", children: _jsx(X, {}) }) }))] }) })] }));
+});
+/**
+ * The dialog panel. Renders its own portal and overlay, traps focus, closes on Esc, returns
+ * focus to the trigger. Initial focus goes to `[data-autofocus]` if present, else the first field.
+ */
+export const DialogContent = React.forwardRef(function DialogContent({ size = "md", mobile = "sheet", className, ...props }, ref) {
+    return (_jsx(LayerContentShell, { ref: ref, "data-slot": "dialog-content", "data-size": size, "data-mobile": mobile, className: cn("vui-dialog ui-dialog", className), ...props }));
+});
+/** `LayerHeader` for dialogs. */
+export const DialogHeader = LayerHeader;
+/** `LayerBody` for dialogs. */
+export const DialogBody = LayerBody;
+/** `LayerFooter` for dialogs. */
+export const DialogFooter = LayerFooter;

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import type { MenuEntry } from "../lib/variants.js";
+/** Root. Controlled (`open` / `onOpenChange`) or uncontrolled. */
+export declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+export interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+    /** Minimum width: `sm` 180px, `md` 220px. Item size follows. */
+    size?: "sm" | "md";
+}
+/** The menu panel. Portals into the nearest `ThemeScope`; only the first layer blurs in glass mode. */
+export declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
+    /** Leading icon (lucide element). */
+    icon?: React.ReactNode;
+    /** Second line under the label. */
+    description?: React.ReactNode;
+    /** Shortcut hint, e.g. `"mod+d"` (rendered with Kbd). Display only — bind it with `useHotkeys`. */
+    shortcut?: string | string[];
+    /** Trailing count or badge. */
+    badge?: React.ReactNode;
+    /** `"danger"` for destructive actions (Delete, Move to trash). */
+    tone?: "default" | "danger";
+    /** Reserve the indicator gutter so labels align with checkbox/radio items. */
+    inset?: boolean;
+}
+/**
+ * One action. `onSelect` fires on click, Enter and Space, then the menu closes; call
+ * `event.preventDefault()` in `onSelect` to keep it open (async actions).
+ * With `asChild` the child (a link) is rendered as the item and must hold its own content.
+ */
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface DropdownMenuCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> {
+    shortcut?: string | string[];
+    description?: React.ReactNode;
+}
+/** A toggle (`menuitemcheckbox`). Selecting closes the menu; call `event.preventDefault()` in `onSelect` to keep it open (column toggles). */
+export declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface DropdownMenuRadioItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
+    shortcut?: string | string[];
+    description?: React.ReactNode;
+}
+/** One choice inside a `DropdownMenuRadioGroup` (`menuitemradio`). */
+export declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Trailing text hint (when you don't want keycaps). */
+export declare function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+export interface DropdownMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> {
+    icon?: React.ReactNode;
+    inset?: boolean;
+}
+/** Opens a submenu on hover, Enter, Space or → (← in RTL). */
+export declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+/** A submenu panel. It is one layer deeper, so it is opaque in glass mode. */
+export declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    size?: "sm" | "md";
+} & React.RefAttributes<HTMLDivElement>>;
+/** Renders `MenuEntry[]` as dropdown items (use inside your own `DropdownMenuContent`). */
+export declare function DropdownMenuEntries({ items }: {
+    items: MenuEntry[];
+}): React.JSX.Element;
+declare const actionMenuLabels: {
+    trigger: string;
+};
+export type ActionMenuLabels = typeof actionMenuLabels;
+export interface ActionMenuProps extends Omit<DropdownMenuContentProps, "children"> {
+    /** The menu model, shared with Context Menu and Command. Entries with a failing `permission` are hidden. */
+    items: MenuEntry[];
+    /** Custom trigger element (rendered with `asChild`). Default: a "⋯" IconButton. */
+    trigger?: React.ReactElement;
+    /** Accessible name of the default trigger. Default "More actions". */
+    triggerLabel?: string;
+    /** Size of the default trigger. Default `"sm"`. */
+    triggerSize?: "xs" | "sm" | "md";
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Non-modal: the page stays scrollable and interactive while open. Default `true` (modal). */
+    modal?: boolean;
+    labels?: Partial<ActionMenuLabels>;
+}
+/**
+ * A one-line menu from data — the "⋯" in a table row, card or toolbar.
+ *
+ * ```tsx
+ * <ActionMenu items={[
+ *   { id: "edit", label: "Edit", icon: <Pencil />, shortcut: "mod+e", onSelect: edit },
+ *   { type: "separator" },
+ *   { id: "trash", label: "Move to trash", icon: <Trash2 />, tone: "danger", onSelect: trash },
+ * ]} />
+ * ```
+ */
+export declare function ActionMenu({ items, trigger, triggerLabel, triggerSize, open, defaultOpen, onOpenChange, modal, labels, align, ...contentProps }: ActionMenuProps): React.JSX.Element | null;
+export {};

package/dist/components/dropdown-menu.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { MoreHorizontal } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Layer } from "../lib/layer.js";
+import { useLabels } from "../lib/labels.js";
+import { MenuCheckIcon, MenuEntries, MenuItemContent, MenuRadioDot, MenuSizeContext, menuContentVariants, menuIndicatorClass, menuItemClass, menuLabelClass, menuSeparatorClass, useVisibleEntries, } from "../lib/menu.js";
+import { IconButton } from "./button.js";
+/** Root. Controlled (`open` / `onOpenChange`) or uncontrolled. */
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+/** The menu panel. Portals into the nearest `ThemeScope`; only the first layer blurs in glass mode. */
+export const DropdownMenuContent = React.forwardRef(function DropdownMenuContent({ className, size = "md", sideOffset = 6, collisionPadding = 12, align = "start", ...props }, ref) {
+    const container = usePortalContainer();
+    return (_jsx(DropdownMenuPrimitive.Portal, { container: container, children: _jsx(MenuSizeContext.Provider, { value: size, children: _jsx(Layer, { asChild: true, children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, "data-slot": "dropdown-menu-content", sideOffset: sideOffset, collisionPadding: collisionPadding, align: align, className: cn(menuContentVariants({ size }), "max-h-(--radix-dropdown-menu-content-available-height)", className), ...props }) }) }) }));
+});
+/**
+ * One action. `onSelect` fires on click, Enter and Space, then the menu closes; call
+ * `event.preventDefault()` in `onSelect` to keep it open (async actions).
+ * With `asChild` the child (a link) is rendered as the item and must hold its own content.
+ */
+export const DropdownMenuItem = React.forwardRef(function DropdownMenuItem({ className, icon, description, shortcut, badge, tone = "default", inset, asChild, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsx(DropdownMenuPrimitive.Item, { ref: ref, "data-slot": "dropdown-menu-item", "data-tone": tone, asChild: asChild, className: menuItemClass({ size, tone, inset, className }), ...props, children: asChild ? (children) : (_jsx(MenuItemContent, { icon: icon, description: description, shortcut: shortcut, badge: badge, children: children })) }));
+});
+/** A toggle (`menuitemcheckbox`). Selecting closes the menu; call `event.preventDefault()` in `onSelect` to keep it open (column toggles). */
+export const DropdownMenuCheckboxItem = React.forwardRef(function DropdownMenuCheckboxItem({ className, shortcut, description, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, "data-slot": "dropdown-menu-checkbox-item", className: menuItemClass({ size, inset: true, className }), ...props, children: [_jsx("span", { className: menuIndicatorClass, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(MenuCheckIcon, {}) }) }), _jsx(MenuItemContent, { shortcut: shortcut, description: description, children: children })] }));
+});
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+/** One choice inside a `DropdownMenuRadioGroup` (`menuitemradio`). */
+export const DropdownMenuRadioItem = React.forwardRef(function DropdownMenuRadioItem({ className, shortcut, description, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, "data-slot": "dropdown-menu-radio-item", className: menuItemClass({ size, inset: true, className }), ...props, children: [_jsx("span", { className: menuIndicatorClass, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(MenuRadioDot, {}) }) }), _jsx(MenuItemContent, { shortcut: shortcut, description: description, children: children })] }));
+});
+export const DropdownMenuLabel = React.forwardRef(function DropdownMenuLabel({ className, inset, ...props }, ref) {
+    return _jsx(DropdownMenuPrimitive.Label, { ref: ref, "data-slot": "dropdown-menu-label", className: cn(menuLabelClass, inset && "ps-8", className), ...props });
+});
+export const DropdownMenuSeparator = React.forwardRef(function DropdownMenuSeparator({ className, ...props }, ref) {
+    return _jsx(DropdownMenuPrimitive.Separator, { ref: ref, "data-slot": "dropdown-menu-separator", className: cn(menuSeparatorClass, className), ...props });
+});
+/** Trailing text hint (when you don't want keycaps). */
+export function DropdownMenuShortcut({ className, ...props }) {
+    return _jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ms-auto ps-4 font-mono text-[11px] tracking-wide text-fg-subtle", className), ...props });
+}
+/** Opens a submenu on hover, Enter, Space or → (← in RTL). */
+export const DropdownMenuSubTrigger = React.forwardRef(function DropdownMenuSubTrigger({ className, icon, inset, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsx(DropdownMenuPrimitive.SubTrigger, { ref: ref, "data-slot": "dropdown-menu-sub-trigger", className: menuItemClass({ size, inset, className: cn("data-[state=open]:bg-hover", className) }), ...props, children: _jsx(MenuItemContent, { icon: icon, chevron: true, children: children }) }));
+});
+/** A submenu panel. It is one layer deeper, so it is opaque in glass mode. */
+export const DropdownMenuSubContent = React.forwardRef(function DropdownMenuSubContent({ className, size: sizeProp, sideOffset = 4, collisionPadding = 12, ...props }, ref) {
+    const container = usePortalContainer();
+    const parentSize = React.useContext(MenuSizeContext);
+    const size = sizeProp ?? parentSize;
+    return (_jsx(DropdownMenuPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsx(DropdownMenuPrimitive.SubContent, { ref: ref, "data-slot": "dropdown-menu-sub-content", sideOffset: sideOffset, alignOffset: -5, collisionPadding: collisionPadding, className: cn(menuContentVariants({ size }), "max-h-(--radix-dropdown-menu-content-available-height)", className), ...props }) }) }));
+});
+/* ------------------------------------------------------------------ */
+/* Data-driven                                                         */
+/* ------------------------------------------------------------------ */
+const dropdownParts = {
+    Item: DropdownMenuItem,
+    CheckboxItem: DropdownMenuCheckboxItem,
+    RadioGroup: DropdownMenuRadioGroup,
+    RadioItem: DropdownMenuRadioItem,
+    Label: DropdownMenuLabel,
+    Separator: DropdownMenuSeparator,
+    Group: DropdownMenuGroup,
+    Sub: DropdownMenuSub,
+    SubTrigger: DropdownMenuSubTrigger,
+    SubContent: DropdownMenuSubContent,
+};
+/** Renders `MenuEntry[]` as dropdown items (use inside your own `DropdownMenuContent`). */
+export function DropdownMenuEntries({ items }) {
+    const visible = useVisibleEntries(items);
+    return _jsx(MenuEntries, { entries: visible, parts: dropdownParts });
+}
+const actionMenuLabels = { trigger: "More actions" };
+/**
+ * A one-line menu from data — the "⋯" in a table row, card or toolbar.
+ *
+ * ```tsx
+ * <ActionMenu items={[
+ *   { id: "edit", label: "Edit", icon: <Pencil />, shortcut: "mod+e", onSelect: edit },
+ *   { type: "separator" },
+ *   { id: "trash", label: "Move to trash", icon: <Trash2 />, tone: "danger", onSelect: trash },
+ * ]} />
+ * ```
+ */
+export function ActionMenu({ items, trigger, triggerLabel, triggerSize = "sm", open, defaultOpen, onOpenChange, modal, labels, align = "end", ...contentProps }) {
+    const t = useLabels("actionMenu", actionMenuLabels, labels);
+    const visible = useVisibleEntries(items);
+    if (visible.length === 0)
+        return null;
+    return (_jsxs(DropdownMenu, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, modal: modal, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: trigger ?? (_jsx(IconButton, { label: triggerLabel ?? t("trigger"), size: triggerSize, tooltip: false, children: _jsx(MoreHorizontal, {}) })) }), _jsx(DropdownMenuContent, { align: align, ...contentProps, children: _jsx(MenuEntries, { entries: visible, parts: dropdownParts }) })] }));
+}

package/dist/components/editor-layout.d.ts

@@ -0,0 +1,166 @@
+import * as React from "react";
+import type { MenuEntry } from "../lib/variants.js";
+import { TabsContent } from "./tabs.js";
+declare const editorLabels: {
+    panel: string;
+    togglePanel: string;
+    resizePanel: string;
+    focusMode: string;
+    exitFocusMode: string;
+    moreActions: string;
+    dirty: string;
+    saving: string;
+    saved: string;
+    savedJustNow: string;
+    savedPlain: string;
+    error: string;
+    retry: string;
+    offline: string;
+    loading: string;
+};
+export type EditorLayoutLabels = Partial<typeof editorLabels>;
+export interface EditorLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Side panel visibility (controlled). On narrow layouts this drives the sheet. */
+    panelOpen?: boolean;
+    /** Default `true` on wide layouts. Narrow layouts always start with the sheet closed. */
+    defaultPanelOpen?: boolean;
+    onPanelOpenChange?: (open: boolean) => void;
+    /** Panel width in px (controlled with `onPanelWidthChange`). */
+    panelWidth?: number;
+    /** Default 320. */
+    defaultPanelWidth?: number;
+    onPanelWidthChange?: (width: number) => void;
+    /** Drag (or arrow-key) the panel edge. */
+    resizable?: boolean;
+    /** Hides the panel and dims the bar until the pointer moves. `mod+shift+f` toggles it; Esc leaves it. */
+    focusMode?: boolean;
+    defaultFocusMode?: boolean;
+    /**
+     * Called when focus mode changes — hide the App shell sidebar from here
+     * (`<AppShell showSidebar={!focus}>`).
+     */
+    onFocusModeChange?: (on: boolean) => void;
+    /** Locked version: bar actions hidden, panel controls disabled. Show an Alert in `EditorCanvas notice`. */
+    readOnly?: boolean;
+    /**
+     * `"page"` (default): the page scrolls, bar and panel stick under the top bar.
+     * `"panes"`: the layout fills its parent's height and canvas and panel scroll on their own.
+     */
+    scroll?: "page" | "panes";
+    /** Where the bar sticks in `"page"` mode. Default `"var(--topbar-h)"`. Use `0` in your own scroll box. */
+    stickyTop?: number | string;
+    /** Register `mod+shift+,` (panel) and `mod+shift+f` (focus mode). Default `true`. */
+    shortcuts?: boolean;
+    labels?: EditorLayoutLabels;
+}
+/**
+ * The "edit one thing" page: a sticky bar with back link, title, save status and publish
+ * actions; a wide content canvas; and a side panel of collapsible settings sections (status,
+ * SEO, taxonomy…). Below 44rem (704px) of its own width the panel opens as a non-modal sheet.
+ *
+ * ```tsx
+ * <EditorLayout>
+ *   <EditorBar back={{ href: "/posts", label: "Posts" }} title="Spring menu launch"
+ *     status={<SaveStatus state="saved" at={savedAt} />}
+ *     actions={<><Button>Preview</Button><Button variant="primary">Publish</Button></>} />
+ *   <EditorCanvas width="prose">{editor}</EditorCanvas>
+ *   <EditorPanel>
+ *     <EditorPanelSection id="status" title="Status" summary="Draft">…</EditorPanelSection>
+ *   </EditorPanel>
+ * </EditorLayout>
+ * ```
+ */
+export declare const EditorLayout: React.ForwardRefExoticComponent<EditorLayoutProps & React.RefAttributes<HTMLDivElement>>;
+export interface EditorBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** "← Posts". The label hides on narrow layouts (it stays the accessible name). */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** Document title — text or an inline-editable title. */
+    title?: React.ReactNode;
+    /** `SaveStatus`. */
+    status?: React.ReactNode;
+    /** Primary actions, always visible ("Publish"). Hidden when the layout is `readOnly`. */
+    actions?: React.ReactNode;
+    /** Secondary actions ("Preview", "Schedule"); hidden below 640px — mirror them in `menu`. */
+    secondaryActions?: React.ReactNode;
+    /** "⋯" menu at the end. */
+    menu?: MenuEntry[];
+    /** Show the panel toggle button. Default `true`. */
+    panelToggle?: boolean;
+    /** Show the focus-mode button. Default `false` (the shortcut always works). */
+    focusToggle?: boolean;
+    labels?: EditorLayoutLabels;
+}
+/** The sticky publish bar: back, title, save status, actions, panel toggle. */
+export declare const EditorBar: React.ForwardRefExoticComponent<EditorBarProps & React.RefAttributes<HTMLDivElement>>;
+export type SaveState = "idle" | "dirty" | "saving" | "saved" | "error" | "offline";
+export interface SaveStatusProps extends React.HTMLAttributes<HTMLSpanElement> {
+    state: SaveState;
+    /** Time of the last save, for "Saved 2 min ago". */
+    at?: Date | number;
+    /** Shows "Retry" in the error state. */
+    onRetry?: () => void;
+    /** Warn before leaving the page while `dirty` or `saving` (`beforeunload`). Default `true`. */
+    guard?: boolean;
+    /** Fixed "now" for docs and tests. */
+    now?: Date | number;
+    labels?: EditorLayoutLabels;
+}
+/**
+ * Where the document's changes are: "Unsaved changes" · "Saving…" · "Saved 2 min ago" ·
+ * "Couldn't save · Retry" · "Offline · changes kept locally". A polite status; the error is an alert.
+ */
+export declare const SaveStatus: React.ForwardRefExoticComponent<SaveStatusProps & React.RefAttributes<HTMLSpanElement>>;
+export interface EditorCanvasProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Column width: `prose` 720px (default) · `wide` 1080px · `full`. */
+    width?: "prose" | "wide" | "full";
+    /** `surface` (default) or `scene` — the bare page background for distraction-free writing. */
+    tone?: "surface" | "scene";
+    /** Banner above the content (a read-only Alert, a conflict warning). */
+    notice?: React.ReactNode;
+    /** Skeleton title and paragraphs. */
+    loading?: boolean;
+    labels?: EditorLayoutLabels;
+}
+/** The writing area: a centred column with generous margins. */
+export declare const EditorCanvas: React.ForwardRefExoticComponent<EditorCanvasProps & React.RefAttributes<HTMLDivElement>>;
+export interface EditorPanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "defaultValue"> {
+    /** Panel tabs ("Document" / "Block"). Put each tab's sections in an `EditorPanelContent`. */
+    tabs?: {
+        id: string;
+        label: string;
+    }[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    /** Sticky footer inside the panel (e.g. "Move to trash"). */
+    footer?: React.ReactNode;
+    /** Accessible name of the complementary landmark. Default "Settings". */
+    "aria-label"?: string;
+    labels?: EditorLayoutLabels;
+}
+/** The side panel: `<aside>` of collapsible settings sections; a non-modal sheet on narrow layouts. */
+export declare const EditorPanel: React.ForwardRefExoticComponent<EditorPanelProps & React.RefAttributes<HTMLElement>>;
+export interface EditorPanelContentProps extends React.ComponentPropsWithoutRef<typeof TabsContent> {
+}
+/** The sections of one panel tab (`value` matches a tab `id`). */
+export declare const EditorPanelContent: React.ForwardRefExoticComponent<EditorPanelContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface EditorPanelSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /** Stable id: the open/closed state is remembered per id (localStorage). */
+    id?: string;
+    title: React.ReactNode;
+    /** One-line summary shown while folded ("Draft · Visible to everyone"). */
+    summary?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Controls at the end of the header (kept outside the toggle button). */
+    actions?: React.ReactNode;
+    /** Heading level to fit the page outline. Default 2. */
+    headingLevel?: 2 | 3;
+}
+/** A folding meta box in the panel: Status, Permalink, Categories, Featured image, SEO. */
+export declare const EditorPanelSection: React.ForwardRefExoticComponent<EditorPanelSectionProps & React.RefAttributes<HTMLElement>>;
+export {};