@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/sidebar.d.ts

@@ -0,0 +1,171 @@
+import * as React from "react";
+import { type BadgeSpec, type NavIcon, type NavNode } from "../lib/nav.js";
+export type { BadgeSpec, NavIcon, NavItem, NavGroup, NavSeparator, NavNode, NavEntry, FlatNavItem, ActiveNav, FilterNavOptions } from "../lib/nav.js";
+declare const sidebarLabels: {
+    label: string;
+    collapse: string;
+    expand: string;
+    collapseShort: string;
+    badge: string;
+    newTab: string;
+    showSubmenu: string;
+    switchApp: string;
+    apps: string;
+    workspaces: string;
+    loading: string;
+};
+export type SidebarLabels = typeof sidebarLabels;
+/** Collapsed state and helpers of the nearest `Sidebar`. */
+export declare function useSidebar(): {
+    collapsed: boolean;
+    setCollapsed: (v: boolean) => void;
+    toggle: () => void;
+    mode: "desktop" | "mobile";
+    variant: "nav" | "surface";
+};
+export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, "dir"> {
+    /** `nav`: dark in both themes (default). `surface`: same background as the content — client portals, websites. */
+    variant?: "nav" | "surface";
+    /** Rail mode (icons only, submenus as flyouts). */
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Allow the rail. Default `true`. */
+    collapsible?: boolean;
+    /** `mobile`: always expanded, accordion levels instead of flyouts (inside the App shell's Sheet). */
+    mode?: "desktop" | "mobile";
+    /** Toggle shortcut, e.g. `"mod+\\"`. Default off (App shell turns it on). `mod+b` is never used — it is Bold in editors. */
+    shortcut?: string | false;
+    /** Called after any link is followed. */
+    onNavigate?: () => void;
+    labels?: Partial<SidebarLabels>;
+}
+/**
+ * The primary app navigation. Dark in both themes; the active section's submenu stays open in
+ * place, other sections open as flyouts, and the rail turns every submenu into a flyout.
+ * Router-agnostic: links and the current path come from `VamosProvider`.
+ *
+ * ```tsx
+ * <Sidebar>
+ *   <SidebarHeader><AppSwitcher apps={apps} activeApp="site" /></SidebarHeader>
+ *   <SidebarContent><SidebarNav items={nav} badges={{ comments: 4 }} /></SidebarContent>
+ *   <SidebarFooter><SidebarCollapseButton /></SidebarFooter>
+ * </Sidebar>
+ * ```
+ */
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
+/** Top slot: app switcher, workspace switcher, logo. */
+export declare const SidebarHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarContentProps extends React.HTMLAttributes<HTMLElement> {
+    /** Accessible name of the `nav`. Default "Main navigation" (`sidebar.label`). */
+    "aria-label"?: string;
+}
+/** The scrolling `<nav>` with the menu. */
+export declare const SidebarContent: React.ForwardRefExoticComponent<SidebarContentProps & React.RefAttributes<HTMLElement>>;
+/** Bottom slot: shared menu, collapse button, user. */
+export declare const SidebarFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Section heading ("Content"). In the rail it becomes a hairline. */
+    label?: React.ReactNode;
+}
+/** A section: optional heading plus a list of `SidebarItem`s. */
+export declare const SidebarGroup: React.ForwardRefExoticComponent<SidebarGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** A hairline between sections. */
+export declare function SidebarSeparator({ className }: {
+    className?: string;
+}): React.JSX.Element;
+export interface SidebarItemProps {
+    /** Stable key (matches `badges` and the active trail in `SidebarNav`). */
+    id?: string;
+    label: string;
+    href?: string;
+    icon?: NavIcon;
+    /** Count, label or `{ count, tone, dot, label }`. */
+    badge?: BadgeSpec;
+    /** `true`, or a reason shown as a badge ("Coming soon"). */
+    disabled?: boolean | string;
+    external?: boolean;
+    /** Force the active state. Default: from `SidebarNav`'s trail or the current path. */
+    active?: boolean;
+    /** `SidebarSubItem`s. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * A level-1 item (icon + label). With children it is a section: open in place when active,
+ * a flyout otherwise (and always in the rail), an accordion in the mobile sheet.
+ */
+export declare function SidebarItem({ id, label, href, icon: Icon, badge, disabled, external, active, children, className }: SidebarItemProps): React.JSX.Element;
+export interface SidebarSubItemProps {
+    id?: string;
+    label: string;
+    href?: string;
+    badge?: BadgeSpec;
+    disabled?: boolean | string;
+    external?: boolean;
+    active?: boolean;
+    /** Level-3 `SidebarSubItem`s: a collapsible inline, a heading + list in a flyout. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/** A level-2 (or level-3) link under a `SidebarItem`. */
+export declare function SidebarSubItem({ id, label, href, badge, disabled, external, active, children, className }: SidebarSubItemProps): React.JSX.Element;
+export interface SidebarNavProps {
+    items: NavNode[];
+    /** Live counts by item id, separate from the config so updates don't rebuild the tree: `{ comments: 4 }`. */
+    badges?: Record<string, BadgeSpec | undefined>;
+    /** Feature flags / module toggles for `feature`. */
+    features?: Record<string, boolean | undefined>;
+    /** Active trail override (App shell resolves it across every nav on the page). Default: `resolveActive(items, currentPath)`. */
+    trail?: string[];
+    /** Wraps the menu in its own `<nav>` with this name (e.g. a second "Workspace" menu in the footer). */
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * Renders a `NavNode[]` config with the same parts as the compound API (identical DOM). Items the
+ * user can't see (`permission` via `can`, `feature`) are filtered out before render — **UI only**;
+ * enforce permissions on the server.
+ */
+export declare function SidebarNav({ items, badges, features, trail: trailProp, className, ...props }: SidebarNavProps): React.JSX.Element;
+/** Toggles the rail. `aria-pressed` is true while collapsed. */
+export declare const SidebarCollapseButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+/** Placeholder rows while permissions load. */
+export declare function SidebarSkeleton({ rows, className }: {
+    rows?: number;
+    className?: string;
+}): React.JSX.Element;
+export interface AppSwitcherApp {
+    id: string;
+    name: string;
+    description?: string;
+    icon?: React.ComponentType<{
+        className?: string;
+        strokeWidth?: number;
+    }> | React.ReactNode;
+    href: string;
+}
+export interface AppSwitcherProps {
+    apps: AppSwitcherApp[];
+    activeApp?: string;
+    /** Called instead of following the app's `href` (the App shell switches in place). */
+    onSelect?: (id: string) => void;
+    /** Small line under the app name. Default the app's description. */
+    subtitle?: React.ReactNode;
+    workspaces?: {
+        id: string;
+        name: string;
+        logo?: string;
+    }[];
+    activeWorkspace?: string;
+    onWorkspaceChange?: (id: string) => void;
+    /** Extra links at the bottom ("Manage apps & modules…"). */
+    footer?: React.ReactNode;
+    className?: string;
+    labels?: Partial<SidebarLabels>;
+}
+/**
+ * The app (and workspace) switcher in `SidebarHeader`: a panel of every app the user can open.
+ * With a single app it is a static title.
+ */
+export declare function AppSwitcher({ apps, activeApp, onSelect, subtitle, workspaces, activeWorkspace, onWorkspaceChange, footer, className, labels }: AppSwitcherProps): React.JSX.Element | null;

package/dist/components/sidebar.js

@@ -0,0 +1,421 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Collapsible, Popover as PopoverPrimitive } from "radix-ui";
+import { ArrowUpRight, Check, ChevronDown, ChevronRight, ChevronsUpDown, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { useCan, useLink, useNavigation } from "../lib/provider.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Layer } from "../lib/layer.js";
+import { useHoverIntent } from "../lib/use-hover-intent.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { useHotkeys } from "../lib/use-hotkeys.js";
+import { filterNav, isAbsoluteHref, isNavGroup, isNavSeparator, normaliseBadge, resolveActive, } from "../lib/nav.js";
+import { Tooltip, TooltipContent, TooltipRoot, TooltipTrigger } from "./tooltip.js";
+const sidebarLabels = {
+    label: "Main navigation",
+    collapse: "Collapse sidebar",
+    expand: "Expand sidebar",
+    collapseShort: "Collapse",
+    badge: "{count, plural, one {# new} other {# new}}",
+    newTab: "opens in a new tab",
+    showSubmenu: "Show {label} pages",
+    switchApp: "Switch app, current: {app}",
+    apps: "Apps",
+    workspaces: "Workspaces",
+    loading: "Loading menu",
+};
+const SidebarContext = React.createContext(null);
+/** Collapsed state and helpers of the nearest `Sidebar`. */
+export function useSidebar() {
+    const ctx = React.useContext(SidebarContext);
+    if (!ctx)
+        throw new Error("useSidebar must be used inside <Sidebar>.");
+    return { collapsed: ctx.collapsed, setCollapsed: ctx.setCollapsed, toggle: () => ctx.setCollapsed(!ctx.collapsed), mode: ctx.mode, variant: ctx.variant };
+}
+const useSidebarCtx = () => {
+    const ctx = React.useContext(SidebarContext);
+    if (!ctx)
+        throw new Error("Sidebar parts must be used inside <Sidebar>.");
+    return ctx;
+};
+/** Active trail from `SidebarNav` (data-driven); `null` in the compound API (each item checks its own href). */
+const TrailContext = React.createContext(null);
+const SubContext = React.createContext({ placement: "inline", depth: 1 });
+/**
+ * The primary app navigation. Dark in both themes; the active section's submenu stays open in
+ * place, other sections open as flyouts, and the rail turns every submenu into a flyout.
+ * Router-agnostic: links and the current path come from `VamosProvider`.
+ *
+ * ```tsx
+ * <Sidebar>
+ *   <SidebarHeader><AppSwitcher apps={apps} activeApp="site" /></SidebarHeader>
+ *   <SidebarContent><SidebarNav items={nav} badges={{ comments: 4 }} /></SidebarContent>
+ *   <SidebarFooter><SidebarCollapseButton /></SidebarFooter>
+ * </Sidebar>
+ * ```
+ */
+export const Sidebar = React.forwardRef(function Sidebar({ variant = "nav", collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, collapsible = true, mode = "desktop", shortcut = false, onNavigate, labels, className, children, ...props }, ref) {
+    const t = useLabels("sidebar", sidebarLabels, labels);
+    const [collapsedState, setCollapsed] = useControllableState({ value: collapsedProp, defaultValue: defaultCollapsed, onChange: onCollapsedChange, name: "Sidebar" });
+    const collapsed = mode === "desktop" && collapsible && collapsedState;
+    useHotkeys(shortcut || "", () => setCollapsed(!collapsedState), { enabled: Boolean(shortcut) && collapsible && mode === "desktop" });
+    const ctx = React.useMemo(() => ({ collapsed, setCollapsed, collapsible, variant, mode, onNavigate, t }), [collapsed, setCollapsed, collapsible, variant, mode, onNavigate, t]);
+    return (_jsx(SidebarContext.Provider, { value: ctx, children: _jsx("aside", { ref: ref, "data-slot": "sidebar", "data-variant": variant, "data-mode": mode, "data-collapsed": collapsed ? "" : undefined, className: cn("vui-sidebar surface-nav relative flex h-full min-h-0 shrink-0 flex-col text-[13.5px]", mode === "desktop" && "border-e border-nav-line", variant === "surface" && "border-line", className), ...props, children: children }) }));
+});
+/** Top slot: app switcher, workspace switcher, logo. */
+export const SidebarHeader = React.forwardRef(function SidebarHeader({ className, ...props }, ref) {
+    return _jsx("div", { ref: ref, "data-slot": "sidebar-header", className: cn("grid gap-1 border-b border-nav-line p-2", className), ...props });
+});
+/** The scrolling `<nav>` with the menu. */
+export const SidebarContent = React.forwardRef(function SidebarContent({ className, ...props }, ref) {
+    const { t } = useSidebarCtx();
+    return (_jsx("nav", { ref: ref, "data-slot": "sidebar-content", "aria-label": props["aria-label"] ?? t("label"), className: cn("min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain py-2 scrollbar-none", className), ...props }));
+});
+/** Bottom slot: shared menu, collapse button, user. */
+export const SidebarFooter = React.forwardRef(function SidebarFooter({ className, ...props }, ref) {
+    return _jsx("div", { ref: ref, "data-slot": "sidebar-footer", className: cn("border-t border-nav-line", className), ...props });
+});
+/** A section: optional heading plus a list of `SidebarItem`s. */
+export const SidebarGroup = React.forwardRef(function SidebarGroup({ label, className, children, ...props }, ref) {
+    const { collapsed } = useSidebarCtx();
+    const id = React.useId();
+    return (_jsxs("div", { ref: ref, "data-slot": "sidebar-group", role: label ? "group" : undefined, "aria-labelledby": label ? id : undefined, className: cn("grid", className), ...props, children: [label ? (collapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { id: id, className: "sr-only", children: label }), _jsx("span", { "aria-hidden": true, className: "mx-4 my-2 h-px bg-nav-line" })] })) : (_jsx("span", { id: id, className: "px-4.5 pt-4 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: label }))) : null, _jsx("ul", { className: "grid gap-px", children: children })] }));
+});
+/** A hairline between sections. */
+export function SidebarSeparator({ className }) {
+    return _jsx("div", { role: "separator", "data-slot": "sidebar-separator", className: cn("mx-4 my-2 h-px bg-nav-line", className) });
+}
+/* ------------------------------------------------------------------ */
+/* Badge                                                                */
+/* ------------------------------------------------------------------ */
+const badgeTone = {
+    accent: "bg-accent text-accent-fg",
+    danger: "bg-danger-solid text-white",
+    warning: "tone-warning bg-[color-mix(in_srgb,var(--warning)_26%,transparent)] text-nav-fg-strong",
+    neutral: "bg-nav-active text-nav-fg-strong",
+};
+const dotTone = { accent: "bg-accent", danger: "bg-danger-solid", warning: "bg-warning", neutral: "bg-nav-fg" };
+/** The count / dot next to a sidebar item. Visual only; the accessible text is added to the link name. */
+function SidebarBadgeView({ spec, rail }) {
+    const { format } = useLocale();
+    const b = normaliseBadge(spec);
+    if (!b)
+        return null;
+    if (rail || b.dot) {
+        return _jsx("span", { "aria-hidden": true, "data-slot": "sidebar-badge", className: cn("size-1.5 shrink-0 rounded-full", rail && "absolute end-2 top-2", dotTone[b.tone]) });
+    }
+    const text = b.count !== undefined ? (b.count > 99 ? `${format.number(99)}+` : format.number(b.count)) : b.text;
+    return (_jsx("span", { "aria-hidden": true, "data-slot": "sidebar-badge", className: cn("min-w-[18px] shrink-0 rounded-full px-1.5 text-center text-[10.5px] font-semibold leading-[18px] tabular", badgeTone[b.tone]), children: text }));
+}
+function useBadgeText(spec) {
+    const { t } = useSidebarCtx();
+    const b = normaliseBadge(spec);
+    if (!b)
+        return undefined;
+    if (b.label)
+        return b.label;
+    if (b.count !== undefined)
+        return t("badge", { count: b.count });
+    return b.text;
+}
+/* ------------------------------------------------------------------ */
+/* Items                                                               */
+/* ------------------------------------------------------------------ */
+function hrefsOf(children) {
+    const out = [];
+    React.Children.forEach(children, (c) => {
+        if (!React.isValidElement(c))
+            return;
+        if (c.props.href)
+            out.push(c.props.href);
+        if (c.props.children)
+            out.push(...hrefsOf(c.props.children));
+    });
+    return out;
+}
+function useItemActive(id, href, children, explicit) {
+    const trail = React.useContext(TrailContext);
+    const { isActive } = useNavigation();
+    if (explicit !== undefined)
+        return { inTrail: explicit, current: explicit };
+    if (trail && id)
+        return { inTrail: trail.includes(id), current: trail[trail.length - 1] === id };
+    const self = href ? isActive(href) : false;
+    const child = hrefsOf(children).some((h) => isActive(h));
+    return { inTrail: self || child, current: self && !child };
+}
+const rowBase = "relative flex w-full items-center gap-3 rounded-ui-sm text-start outline-none transition-colors focus-ring";
+/** An `<a>` through the app router, a `<button>` (no href) or a disabled `<span>`. */
+const LinkRow = React.forwardRef(function LinkRow({ href, external, disabled, className, children, onClick, buttonProps, ...rest }, ref) {
+    const Link = useLink();
+    const { onNavigate } = useSidebarCtx();
+    if (disabled) {
+        return (_jsx("span", { ref: ref, "aria-disabled": "true", className: cn(className, "cursor-not-allowed opacity-45"), ...rest, children: children }));
+    }
+    if (!href) {
+        return (_jsx("button", { ref: ref, type: "button", className: className, onClick: onClick, ...buttonProps, ...rest, children: children }));
+    }
+    const ext = external ?? isAbsoluteHref(href);
+    const handle = (e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented)
+            onNavigate?.();
+    };
+    if (ext) {
+        return (_jsx("a", { ref: ref, href: href, target: "_blank", rel: "noopener noreferrer", className: className, onClick: handle, ...rest, children: children }));
+    }
+    return (_jsx(Link, { ref: ref, href: href, className: className, onClick: handle, ...rest, children: children }));
+});
+function ExternalMark() {
+    const { t } = useSidebarCtx();
+    return (_jsxs(_Fragment, { children: [_jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5 shrink-0 opacity-60 rtl:-scale-x-100" }), _jsxs("span", { className: "sr-only", children: ["(", t("newTab"), ")"] })] }));
+}
+/**
+ * A level-1 item (icon + label). With children it is a section: open in place when active,
+ * a flyout otherwise (and always in the rail), an accordion in the mobile sheet.
+ */
+export function SidebarItem({ id, label, href, icon: Icon, badge, disabled, external, active, children, className }) {
+    const ctx = useSidebarCtx();
+    const { collapsed, mode, t, variant } = ctx;
+    const { inTrail, current } = useItemActive(id, href, children, active);
+    const hasChildren = React.Children.toArray(children).length > 0;
+    const badgeText = useBadgeText(badge);
+    const reason = typeof disabled === "string" ? disabled : undefined;
+    const inline = hasChildren && !collapsed && mode === "desktop" && inTrail;
+    const flyout = mode === "desktop" && !disabled && (collapsed || (hasChildren && !inline));
+    const accordion = hasChildren && mode === "mobile";
+    const rowClass = cn(rowBase, "mx-2 h-(--sidebar-item-h) w-auto", collapsed ? "justify-center px-0" : "px-2.5", inTrail ? "bg-nav-active font-medium text-nav-fg-strong" : "hover:bg-nav-hover hover:text-nav-fg-strong", className);
+    const content = (_jsxs(_Fragment, { children: [inTrail ? _jsx("span", { "aria-hidden": true, className: "absolute -start-2 top-1.5 bottom-1.5 w-[3px] rounded-e-full bg-accent" }) : null, Icon ? _jsx(Icon, { "aria-hidden": true, className: cn("size-[17px] shrink-0", inTrail ? (variant === "surface" ? "text-accent-ink" : "text-accent") : "opacity-80"), strokeWidth: 1.8 }) : null, _jsx("span", { className: cn("min-w-0 flex-1 truncate", collapsed && "sr-only"), children: label }), badgeText ? _jsxs("span", { className: "sr-only", children: [", ", badgeText] }) : null, reason && !collapsed ? _jsx("span", { className: "shrink-0 rounded-full bg-nav-hover px-1.5 text-[10.5px] leading-[18px] text-nav-fg", children: reason }) : null, reason && collapsed ? _jsxs("span", { className: "sr-only", children: [", ", reason] }) : null, !reason ? _jsx(SidebarBadgeView, { spec: badge, rail: collapsed }) : null, (external ?? (href ? isAbsoluteHref(href) : false)) && !collapsed ? _jsx(ExternalMark, {}) : null, flyout && hasChildren && !collapsed ? _jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 opacity-0 transition-opacity group-hover/item:opacity-50 rtl:-scale-x-100" }) : null] }));
+    if (accordion) {
+        return (_jsxs(SidebarAccordionItem, { label: label, href: href, defaultOpen: inTrail, rowClass: rowClass, current: current, disabled: disabled, external: external, showLabel: t("showSubmenu", { label }), children: [content, _jsx(SubContext.Provider, { value: { placement: "mobile", depth: 1 }, children: children })] }));
+    }
+    if (flyout) {
+        return (_jsxs(SidebarFlyoutItem, { label: label, href: href, rowClass: rowClass, current: current, inTrail: inTrail, external: external, hasChildren: hasChildren, children: [content, hasChildren ? _jsx(SubContext.Provider, { value: { placement: "flyout", depth: 1 }, children: children }) : null] }));
+    }
+    return (_jsxs("li", { "data-slot": "sidebar-item", className: "group/item", children: [_jsx(LinkRow, { href: href, external: external, disabled: disabled, "aria-current": current ? "page" : inTrail && hasChildren ? "true" : undefined, className: rowClass, children: content }), inline ? (_jsx("ul", { className: "mx-2 mt-px mb-1 grid gap-px rounded-ui-sm bg-nav-sub py-1", children: _jsx(SubContext.Provider, { value: { placement: "inline", depth: 1 }, children: children }) })) : null] }));
+}
+function SidebarAccordionItem({ label, href, defaultOpen, rowClass, current, disabled, external, showLabel, children, }) {
+    const [open, setOpen] = React.useState(defaultOpen);
+    const [content, sub] = children;
+    return (_jsx(Collapsible.Root, { asChild: true, open: open, onOpenChange: setOpen, children: _jsxs("li", { "data-slot": "sidebar-item", className: "group/item", children: [_jsxs("div", { className: "relative flex items-center", children: [href ? (_jsx(LinkRow, { href: href, external: external, disabled: disabled, "aria-current": current ? "page" : undefined, className: cn(rowClass, "flex-1 pe-10"), children: content })) : (_jsx(Collapsible.Trigger, { asChild: true, children: _jsx("button", { type: "button", className: cn(rowClass, "flex-1 pe-10"), children: content }) })), href ? (_jsx(Collapsible.Trigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": showLabel, className: "absolute end-3 grid size-7 place-items-center rounded-ui-sm text-nav-fg hover:bg-nav-hover hover:text-nav-fg-strong focus-ring", children: _jsx(ChevronDown, { "aria-hidden": true, className: cn("size-4 transition-transform", open && "rotate-180") }) }) })) : (_jsx(ChevronDown, { "aria-hidden": true, className: cn("pointer-events-none absolute end-5 size-4 transition-transform", open && "rotate-180") }))] }), _jsx(Collapsible.Content, { className: "ui-collapse", children: _jsx("ul", { "aria-label": label, className: "mx-2 mt-px mb-1 grid gap-px rounded-ui-sm bg-nav-sub py-1", children: sub }) })] }) }));
+}
+function focusables(root) {
+    return root ? Array.from(root.querySelectorAll("a[href],button:not([disabled])")) : [];
+}
+function SidebarFlyoutItem({ label, href, rowClass, current, inTrail, external, hasChildren, children, }) {
+    const { collapsed, variant } = useSidebarCtx();
+    const { dir } = useLocale();
+    const container = usePortalContainer();
+    const [content, sub] = children;
+    const hover = useHoverIntent({ openDelay: 60, closeDelay: 180, openOnFocus: false });
+    const triggerRef = React.useRef(null);
+    const viaKeyboard = React.useRef(false);
+    const pointerType = React.useRef("mouse");
+    const panelRef = React.useRef(null);
+    const forward = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const backward = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+    // Leaf in the rail: a tooltip is enough.
+    if (!hasChildren) {
+        return (_jsx("li", { "data-slot": "sidebar-item", className: "group/item", children: _jsx(Tooltip, { content: label, side: dir === "rtl" ? "left" : "right", children: _jsx(LinkRow, { ref: triggerRef, href: href, external: external, "aria-current": current ? "page" : undefined, className: rowClass, children: content }) }) }));
+    }
+    const openWithKeyboard = () => {
+        viaKeyboard.current = true;
+        hover.setOpen(true);
+    };
+    const close = (refocus) => {
+        hover.setOpen(false);
+        if (refocus)
+            triggerRef.current?.focus();
+    };
+    return (_jsxs(PopoverPrimitive.Root, { open: hover.open, onOpenChange: (o) => (o ? hover.setOpen(true) : close(false)), modal: false, children: [_jsx("li", { "data-slot": "sidebar-item", className: "group/item", children: _jsx(PopoverPrimitive.Anchor, { asChild: true, children: _jsx(LinkRow, { ref: triggerRef, href: href, external: external, "aria-current": current ? "page" : inTrail ? "true" : undefined, "aria-haspopup": "true", "aria-expanded": hover.open, className: cn(rowClass, hover.open && !inTrail && "bg-nav-hover text-nav-fg-strong"), ...hover.triggerProps, onPointerDown: (e) => (pointerType.current = e.pointerType), onClick: (e) => {
+                            // Touch: the first tap opens the flyout, the second follows the link (WordPress-style).
+                            if (!href) {
+                                e.preventDefault();
+                                if (hover.open)
+                                    close(false);
+                                else if (e.detail === 0)
+                                    openWithKeyboard();
+                                else
+                                    hover.setOpen(true);
+                                return;
+                            }
+                            if (pointerType.current === "touch" && !hover.open) {
+                                e.preventDefault();
+                                hover.setOpen(true);
+                            }
+                        }, onKeyDown: (e) => {
+                            if (e.key === forward || (e.key === "ArrowDown" && !href && hover.open)) {
+                                e.preventDefault();
+                                if (hover.open)
+                                    focusables(panelRef.current)[0]?.focus();
+                                else
+                                    openWithKeyboard();
+                            }
+                            else if (e.key === "Escape" && hover.open) {
+                                e.preventDefault();
+                                close(true);
+                            }
+                        }, children: content }) }) }), _jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(PopoverPrimitive.Content, { ref: (node) => {
+                            panelRef.current = node;
+                            hover.contentRef(node);
+                        }, side: dir === "rtl" ? "left" : "right", align: "start", sideOffset: 8, alignOffset: -6, collisionPadding: 12, "aria-label": label, "data-slot": "sidebar-flyout", "data-variant": variant, className: "vui-sidebar-flyout ui-pop z-(--z-popover) min-w-52 max-w-72 rounded-ui-lg p-1.5 text-[13px] outline-none", ...hover.contentProps, onOpenAutoFocus: (e) => {
+                            // Radix skips links on auto-focus; focus the first item ourselves when opened from the keyboard.
+                            e.preventDefault();
+                            if (viaKeyboard.current)
+                                focusables(e.currentTarget)[0]?.focus();
+                            viaKeyboard.current = false;
+                        }, onCloseAutoFocus: (e) => e.preventDefault(), onEscapeKeyDown: (e) => {
+                            e.preventDefault();
+                            close(true);
+                        }, onKeyDown: (e) => {
+                            const items = focusables(panelRef.current);
+                            const i = items.indexOf(document.activeElement);
+                            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                                e.preventDefault();
+                                const next = e.key === "ArrowDown" ? (i + 1) % items.length : (i - 1 + items.length) % items.length;
+                                items[next]?.focus();
+                            }
+                            else if (e.key === "Home" || e.key === "End") {
+                                e.preventDefault();
+                                items[e.key === "Home" ? 0 : items.length - 1]?.focus();
+                            }
+                            else if (e.key === backward) {
+                                e.preventDefault();
+                                close(true);
+                            }
+                        }, children: [collapsed ? _jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: label }) : null, _jsx(SubContext.Provider, { value: { placement: "flyout", depth: 1, close: () => close(false) }, children: _jsx("ul", { className: "grid gap-px", children: sub }) })] }) }) })] }));
+}
+/** A level-2 (or level-3) link under a `SidebarItem`. */
+export function SidebarSubItem({ id, label, href, badge, disabled, external, active, children, className }) {
+    const { placement, depth, close } = React.useContext(SubContext);
+    const { inTrail, current } = useItemActive(id, href, children, active);
+    const badgeText = useBadgeText(badge);
+    const hasChildren = React.Children.toArray(children).length > 0;
+    const [open, setOpen] = React.useState(inTrail);
+    if (process.env.NODE_ENV !== "production" && depth > 2)
+        console.warn("[vamos-ui] Sidebar supports up to 3 levels.");
+    const flyout = placement === "flyout";
+    const pad = flyout ? (depth > 1 ? "ps-5 pe-2.5" : "px-2.5") : depth > 1 ? "ps-[54px] pe-3" : "ps-[42px] pe-3";
+    const rowClass = cn(rowBase, "gap-2 py-1.5 text-[13px]", flyout ? "rounded-ui-sm hover:bg-nav-hover hover:text-nav-fg-strong" : "hover:text-nav-fg-strong", pad, current ? "font-medium text-nav-fg-strong" : undefined, className);
+    const body = (_jsxs(_Fragment, { children: [current && flyout ? _jsx(Check, { "aria-hidden": true, className: "size-3.5 shrink-0 text-accent" }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), badgeText ? _jsxs("span", { className: "sr-only", children: [", ", badgeText] }) : null, typeof disabled === "string" ? _jsx("span", { className: "shrink-0 text-[10.5px] text-nav-fg/70", children: disabled }) : _jsx(SidebarBadgeView, { spec: badge, rail: false }), (external ?? (href ? isAbsoluteHref(href) : false)) ? _jsx(ExternalMark, {}) : null] }));
+    if (hasChildren && flyout) {
+        return (_jsxs("li", { "data-slot": "sidebar-sub-item", className: "mt-1 first:mt-0", children: [_jsx("p", { className: "px-2.5 pt-1.5 pb-1 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: label }), _jsx("ul", { className: "grid gap-px", children: _jsx(SubContext.Provider, { value: { placement, depth: depth + 1, close }, children: children }) })] }));
+    }
+    if (hasChildren) {
+        return (_jsx(Collapsible.Root, { asChild: true, open: open, onOpenChange: setOpen, children: _jsxs("li", { "data-slot": "sidebar-sub-item", children: [_jsx(Collapsible.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn(rowClass, inTrail && "text-nav-fg-strong"), children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), _jsx(ChevronDown, { "aria-hidden": true, className: cn("size-3.5 shrink-0 opacity-60 transition-transform", open && "rotate-180") })] }) }), _jsx(Collapsible.Content, { className: "ui-collapse", children: _jsx("ul", { "aria-label": label, className: "grid gap-px", children: _jsx(SubContext.Provider, { value: { placement, depth: depth + 1, close }, children: children }) }) })] }) }));
+    }
+    return (_jsx("li", { "data-slot": "sidebar-sub-item", children: _jsx(LinkRow, { href: href, external: external, disabled: disabled, "aria-current": current ? "page" : undefined, className: rowClass, onClick: () => close?.(), children: body }) }));
+}
+function renderItem(it, badges) {
+    return (_jsx(SidebarItem, { id: it.id, label: it.label, href: it.href, icon: it.icon, badge: badges?.[it.id] ?? it.badge, disabled: it.disabled, external: it.external, children: it.children?.map((c) => renderSub(c, badges)) }, it.id));
+}
+function renderSub(it, badges) {
+    return (_jsx(SidebarSubItem, { id: it.id, label: it.label, href: it.href, badge: badges?.[it.id] ?? it.badge, disabled: it.disabled, external: it.external, children: it.children?.map((c) => renderSub(c, badges)) }, it.id));
+}
+/**
+ * Renders a `NavNode[]` config with the same parts as the compound API (identical DOM). Items the
+ * user can't see (`permission` via `can`, `feature`) are filtered out before render — **UI only**;
+ * enforce permissions on the server.
+ */
+export function SidebarNav({ items, badges, features, trail: trailProp, className, ...props }) {
+    const can = useCan();
+    const { currentPath } = useNavigation();
+    const visible = React.useMemo(() => filterNav(items, { can, features }), [items, can, features]);
+    const trail = React.useMemo(() => trailProp ?? resolveActive(visible, currentPath).trail, [trailProp, visible, currentPath]);
+    const blocks = [];
+    let loose = [];
+    const flush = (key) => {
+        if (!loose.length)
+            return;
+        blocks.push(_jsx(SidebarGroup, { children: loose.map((it) => renderItem(it, badges)) }, `loose-${key}`));
+        loose = [];
+    };
+    visible.forEach((n, i) => {
+        if (isNavSeparator(n)) {
+            flush(String(i));
+            blocks.push(_jsx(SidebarSeparator, {}, n.id ?? `sep-${i}`));
+        }
+        else if (isNavGroup(n)) {
+            flush(String(i));
+            blocks.push(_jsx(SidebarGroup, { label: n.label, children: n.items.map((it) => renderItem(it, badges)) }, n.id));
+        }
+        else
+            loose.push(n);
+    });
+    flush("end");
+    const body = _jsx(TrailContext.Provider, { value: trail, children: blocks });
+    if (props["aria-label"]) {
+        return (_jsx("nav", { "aria-label": props["aria-label"], "data-slot": "sidebar-nav", className: cn("py-2", className), children: body }));
+    }
+    return (_jsx("div", { "data-slot": "sidebar-nav", className: className, children: body }));
+}
+/* ------------------------------------------------------------------ */
+/* Collapse button, skeleton                                            */
+/* ------------------------------------------------------------------ */
+/** Toggles the rail. `aria-pressed` is true while collapsed. */
+export const SidebarCollapseButton = React.forwardRef(function SidebarCollapseButton({ className, onClick, ...props }, ref) {
+    const { collapsed, setCollapsed, collapsible, mode, t } = useSidebarCtx();
+    const { dir } = useLocale();
+    if (!collapsible || mode === "mobile")
+        return null;
+    const Icon = collapsed ? PanelLeftOpen : PanelLeftClose;
+    // One stable element in both states (a remount would drop focus after the click).
+    return (_jsxs(TooltipRoot, { open: collapsed ? undefined : false, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", "aria-pressed": collapsed, "aria-label": t("collapse"), onClick: (e) => {
+                        onClick?.(e);
+                        if (!e.defaultPrevented)
+                            setCollapsed(!collapsed);
+                    }, className: cn("flex h-10 w-full items-center gap-3 text-[12.5px] text-nav-fg/70 transition-colors hover:text-nav-fg-strong focus-ring", collapsed ? "justify-center" : "px-4.5", className), ...props, children: [_jsx(Icon, { "aria-hidden": true, className: "size-4 rtl:-scale-x-100" }), !collapsed ? _jsx("span", { "aria-hidden": true, children: t("collapseShort") }) : null] }) }), _jsx(TooltipContent, { side: dir === "rtl" ? "left" : "right", children: t("expand") })] }));
+});
+/** Placeholder rows while permissions load. */
+export function SidebarSkeleton({ rows = 6, className }) {
+    const { collapsed, t } = useSidebarCtx();
+    return (_jsx("div", { role: "status", "aria-label": t("loading"), "data-slot": "sidebar-skeleton", className: cn("grid gap-1.5 px-2 py-3", className), children: Array.from({ length: rows }, (_, i) => (_jsxs("div", { className: cn("flex h-(--sidebar-item-h) items-center gap-3 rounded-ui-sm", collapsed ? "justify-center" : "px-2.5"), children: [_jsx("span", { className: "size-4 shrink-0 animate-pulse rounded-[5px] bg-nav-active motion-reduce:animate-none" }), !collapsed ? _jsx("span", { className: "h-2.5 animate-pulse rounded-full bg-nav-active motion-reduce:animate-none", style: { width: `${48 + ((i * 37) % 40)}%` } }) : null] }, i))) }));
+}
+function AppIcon({ icon, className }) {
+    if (!icon)
+        return null;
+    if (React.isValidElement(icon))
+        return icon;
+    if (typeof icon === "function" || (typeof icon === "object" && icon !== null && "$$typeof" in icon)) {
+        const I = icon;
+        return _jsx(I, { "aria-hidden": true, className: className, strokeWidth: 2 });
+    }
+    return _jsx(_Fragment, { children: icon });
+}
+/**
+ * The app (and workspace) switcher in `SidebarHeader`: a panel of every app the user can open.
+ * With a single app it is a static title.
+ */
+export function AppSwitcher({ apps, activeApp, onSelect, subtitle, workspaces, activeWorkspace, onWorkspaceChange, footer, className, labels }) {
+    const { collapsed, variant, onNavigate } = useSidebarCtx();
+    const t = useLabels("sidebar", sidebarLabels, labels);
+    const Link = useLink();
+    const { dir } = useLocale();
+    const container = usePortalContainer();
+    const [open, setOpen] = React.useState(false);
+    const app = apps.find((a) => a.id === activeApp) ?? apps[0];
+    if (!app)
+        return null;
+    const single = apps.length < 2 && !(workspaces && workspaces.length > 1);
+    const workspace = workspaces?.find((w) => w.id === activeWorkspace);
+    const tile = (_jsxs(_Fragment, { children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-[9px] bg-accent text-accent-fg [&_svg]:size-[17px]", children: _jsx(AppIcon, { icon: app.icon }) }), _jsxs("span", { className: cn("min-w-0 flex-1 leading-tight", collapsed && "sr-only"), children: [_jsx("span", { className: "block truncate text-[13.5px] font-semibold text-nav-fg-strong", children: app.name }), _jsx("span", { className: "block truncate text-[11.5px] text-nav-fg/75", children: subtitle ?? (workspace ? workspace.name : app.description) })] })] }));
+    const boxClass = cn("flex w-full items-center gap-2.5 rounded-ui-sm p-1.5 text-start", collapsed && "justify-center");
+    if (single)
+        return _jsx("div", { className: cn(boxClass, className), children: tile });
+    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn(boxClass, "transition-colors hover:bg-nav-hover focus-ring", className), children: [_jsx("span", { className: "sr-only", children: t("switchApp", { app: app.name }) }), _jsx("span", { "aria-hidden": true, className: "contents", children: tile }), !collapsed ? _jsx(ChevronsUpDown, { "aria-hidden": true, className: "size-4 shrink-0 text-nav-fg/50" }) : null] }) }), _jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(PopoverPrimitive.Content, { side: collapsed ? (dir === "rtl" ? "left" : "right") : "bottom", align: "start", sideOffset: 6, collisionPadding: 12, "aria-label": t("apps"), "data-variant": variant, className: "vui-sidebar-flyout ui-pop z-(--z-popover) w-64 max-w-[calc(100vw-1.5rem)] rounded-ui-lg p-1.5 outline-none", children: [workspaces && workspaces.length > 1 ? (_jsxs("div", { role: "group", "aria-label": t("workspaces"), className: "mb-1 border-b border-nav-line pb-1.5", children: [_jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: t("workspaces") }), workspaces.map((w) => (_jsxs("button", { type: "button", "aria-pressed": w.id === activeWorkspace, onClick: () => {
+                                            onWorkspaceChange?.(w.id);
+                                            setOpen(false);
+                                        }, className: "flex w-full items-center gap-2.5 rounded-ui-sm px-2 py-1.5 text-start text-[13px] text-nav-fg hover:bg-nav-hover hover:text-nav-fg-strong focus-ring", children: [_jsx("span", { "aria-hidden": true, className: "grid size-6 place-items-center rounded-[7px] bg-nav-active text-[11px] font-semibold text-nav-fg-strong", children: w.name.slice(0, 1) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: w.name }), w.id === activeWorkspace ? _jsx(Check, { "aria-hidden": true, className: "size-4 text-accent" }) : null] }, w.id)))] })) : null, _jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: t("apps") }), _jsx("ul", { className: "grid gap-px", children: apps.map((a) => {
+                                    const isActive = a.id === app.id;
+                                    const inner = (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("grid size-7 shrink-0 place-items-center rounded-[8px] [&_svg]:size-[15px]", isActive ? "bg-accent text-accent-fg" : "bg-nav-active text-nav-fg-strong"), children: _jsx(AppIcon, { icon: a.icon }) }), _jsxs("span", { className: "min-w-0 flex-1 leading-tight", children: [_jsx("span", { className: "block text-[13px] font-medium text-nav-fg-strong", children: a.name }), a.description ? _jsx("span", { className: "block truncate text-[11.5px] text-nav-fg/70", children: a.description }) : null] }), isActive ? _jsx(Check, { "aria-hidden": true, className: "size-4 shrink-0 text-accent" }) : null] }));
+                                    const cls = "flex w-full items-center gap-2.5 rounded-ui-sm px-2 py-1.5 text-start hover:bg-nav-hover focus-ring";
+                                    return (_jsx("li", { children: onSelect ? (_jsx("button", { type: "button", "aria-current": isActive ? "true" : undefined, className: cls, onClick: () => {
+                                                onSelect(a.id);
+                                                setOpen(false);
+                                                onNavigate?.();
+                                            }, children: inner })) : (_jsx(Link, { href: a.href, "aria-current": isActive ? "true" : undefined, className: cls, onClick: () => setOpen(false), children: inner })) }, a.id));
+                                }) }), footer ? _jsx("div", { className: "mt-1 border-t border-nav-line pt-1 text-[12.5px] [&_a]:block [&_a]:rounded-ui-sm [&_a]:px-2.5 [&_a]:py-1.5 [&_a:hover]:bg-nav-hover [&_a:hover]:text-nav-fg-strong", children: footer }) : null] }) }) })] }));
+}