@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

package/dist/components/ui/sidebar-menu-primitives.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import * as React from 'react';
+import { useSidebar } from './sidebar-context.js';
+import { Skeleton } from './skeleton.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip.js';
+import { cn } from '../../lib/utils.js';
+function SidebarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className), ...props }));
+}
+function SidebarGroupLabel({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : 'div';
+    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), ...props }));
+}
+function SidebarGroupAction({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : 'button';
+    return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-hover hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+}
+function SidebarGroupContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn('w-full text-sm', className), ...props }));
+}
+function SidebarMenu({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-px', className), ...props }));
+}
+function SidebarMenuItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props }));
+}
+const sidebarMenuButtonVariants = cva(
+// No hover transition. Sidebar rows are hit tens–hundreds of times a day;
+// animating bg/color makes the highlight lag the pointer (Raycast rule).
+"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none cursor-pointer shadow-none group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-hover hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-kortix-base focus-visible:ring-[0.6px] active:bg-active active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:bg-active data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-hover data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 px-3 font-medium [&_svg]:size-4!", {
+    variants: {
+        variant: {
+            default: 'text-muted-foreground hover:bg-sidebar-row hover:text-sidebar-foreground',
+            outline: 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-hover hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
+            success: 'bg-kortix-green/10 text-kortix-green hover:bg-kortix-green/20 hover:text-kortix-green active:bg-kortix-green/25 active:text-kortix-green data-[active=true]:bg-kortix-green/15 data-[active=true]:text-kortix-green data-[state=open]:hover:bg-kortix-green/20 data-[state=open]:hover:text-kortix-green dark:bg-kortix-green/15 dark:text-kortix-green dark:hover:bg-kortix-green/25 dark:hover:text-kortix-green dark:active:bg-kortix-green/30 dark:active:text-kortix-green dark:data-[active=true]:bg-kortix-green/20 dark:data-[active=true]:text-kortix-green dark:data-[state=open]:hover:bg-kortix-green/25 dark:data-[state=open]:hover:text-kortix-green',
+            primary: 'bg-foreground text-background font-medium justify-center border-none hover:bg-foreground/90 hover:text-background',
+        },
+        size: {
+            default: 'h-8 text-sm',
+            sm: 'h-7 text-xs',
+            lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function SidebarMenuButton({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props }) {
+    const Comp = asChild ? Slot.Root : 'button';
+    const { isMobile, state } = useSidebar();
+    const button = (_jsx(Comp, { "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
+    if (!tooltip) {
+        return button;
+    }
+    if (typeof tooltip === 'string') {
+        tooltip = {
+            children: tooltip,
+        };
+    }
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== 'collapsed' || isMobile, ...tooltip })] }));
+}
+function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
+    const Comp = asChild ? Slot.Root : 'button';
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-hover hover:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover &&
+            'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0', className), ...props }));
+}
+function SidebarMenuBadge({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+}
+function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
+    // Random width between 50 to 90%.
+    const width = React.useMemo(() => {
+        return `${Math.floor(Math.random() * 40) + 50}%`;
+    }, []);
+    return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn('flex h-8 items-center gap-2 rounded-md px-2', className), ...props, children: [showIcon && _jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
+                    '--skeleton-width': width,
+                } })] }));
+}
+function SidebarMenuSub({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn('border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+}
+function SidebarMenuSubItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn('group/menu-sub-item relative', className), ...props }));
+}
+function SidebarMenuSubButton({ asChild = false, size = 'md', isActive = false, className, ...props }) {
+    const Comp = asChild ? Slot.Root : 'a';
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-hover hover:text-sidebar-accent-foreground active:bg-active active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-active data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+}
+export { SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, };

package/dist/components/ui/sidebar-panel.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Button } from './button.js';
+declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React.ComponentProps<'div'> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+}): React.JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+/**
+ * Invisible strip along the viewport's left edge that summons the collapsed
+ * sidebar as a hover flyout. Renders nothing while the sidebar is docked
+ * open or on mobile — the mobile sidebar is a sheet.
+ */
+declare function SidebarEdgePeek({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element | null;
+/**
+ * Drag handle on the panel's trailing edge — the sidebar's only resize
+ * affordance.
+ *
+ * Resize ONLY. It used to toggle the sidebar on click, which put a second
+ * collapse control on an edge that already reads as a resizer (it has shipped
+ * a `col-resize` cursor the whole time) while the real one sits in the panel
+ * header next to ⌘B. One edge, one job.
+ *
+ * Renders nothing while collapsed. There is nothing to resize, the strip is
+ * translated off-screen with the panel anyway, and that edge belongs to
+ * {@link SidebarEdgePeek} in the collapsed state.
+ *
+ * The drag writes `--sidebar-width` straight to the wrapper node and only
+ * commits to React state on pointer-up: one render per drag instead of one per
+ * pointermove. Width IS a layout property, so the content pane genuinely
+ * reflows per frame here — that is the point of a resize, and it is the one
+ * place in this file where per-frame layout is correct.
+ */
+declare function SidebarRail({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element | null;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<'main'>): React.JSX.Element;
+export { Sidebar, SidebarTrigger, SidebarEdgePeek, SidebarRail, SidebarInset };

package/dist/components/ui/sidebar-panel.js

@@ -0,0 +1,265 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button } from './button.js';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from './sheet.js';
+import { SIDEBAR_RESIZE_STEP_COARSE_PX, SIDEBAR_RESIZE_STEP_PX, SIDEBAR_UNDOCK_MS, SIDEBAR_WIDTH_MOBILE, useSidebar, } from './sidebar-context.js';
+import { SIDEBAR_MAX_WIDTH_PX, SIDEBAR_MIN_WIDTH_PX, SIDEBAR_WIDTH_PX, clampSidebarWidth, } from './sidebar-width.js';
+import { cn } from '../../lib/utils.js';
+import { SidebarToggle as PanelLeftIcon } from '../../icons/sidebar-toggle.js';
+function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }) {
+    const { isMobile, state, openMobile, setOpenMobile, peek, peekEnter, peekLeave, instantToggle } = useSidebar();
+    const slides = collapsible === 'offcanvas' && side === 'left';
+    const peekable = slides && state === 'collapsed';
+    const peeking = peekable && peek;
+    // `undocking` is the transient frame-window right after a collapse, during
+    // which the panel is still on screen and sliding out. It is derived DURING
+    // RENDER, not in an effect: an effect would commit one frame in the flyout
+    // geometry first, and that single frame is exactly the pop the user reads as
+    // "it just disappeared". React re-renders from this before it paints.
+    const [renderedState, setRenderedState] = React.useState(state);
+    const [collapseStarted, setCollapseStarted] = React.useState(false);
+    if (renderedState !== state) {
+        setRenderedState(state);
+        // An instant toggle skips the undocking window entirely — there is no
+        // slide for the docked geometry to survive.
+        setCollapseStarted(slides && state === 'collapsed' && !instantToggle);
+    }
+    React.useEffect(() => {
+        if (!collapseStarted)
+            return;
+        const id = setTimeout(() => setCollapseStarted(false), SIDEBAR_UNDOCK_MS);
+        return () => clearTimeout(id);
+    }, [collapseStarted]);
+    // A hover on the edge strip mid-collapse wins: the user asked for the panel
+    // back before it finished leaving, so hand it to the flyout.
+    const undocking = collapseStarted && !peek;
+    // The two boxes the panel can occupy. Docked and undocking share the flush
+    // full-height one; parked and peeking share the inset flyout card.
+    const flyout = peekable && !undocking;
+    // Everything that is not "on screen at rest" parks at the same transform, so
+    // the parked → undocking hand-off changes no value and starts no animation.
+    const offscreen = state === 'collapsed' && !peeking;
+    if (collapsible === 'none') {
+        return (_jsx("div", { "data-slot": "sidebar", className: cn('bg-background text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className), ...props, children: children }));
+    }
+    if (isMobile) {
+        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "bg-background text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
+                    '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+                }, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
+    }
+    return (_jsxs("div", { className: "group peer text-sidebar-foreground hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, "data-peek": peeking ? '' : undefined, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('relative w-(--sidebar-width) bg-transparent', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
+                    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), _jsx("div", { "data-slot": "sidebar-container", "data-motion": slides
+                    ? state === 'expanded'
+                        ? 'docked'
+                        : undocking
+                            ? 'undocking'
+                            : peeking
+                                ? 'peeking'
+                                : 'parked'
+                    : undefined, onPointerEnter: peekable ? peekEnter : undefined, onPointerLeave: peekable ? peekLeave : undefined, className: cn('fixed z-10 hidden w-(--sidebar-width) md:flex', 
+                // ─────────────────────────────────────────────────────────────────
+                // THE RULE, and it governs every branch below:
+                //   layout resolves in one frame; only `transform` is ever animated.
+                //
+                // The content pane reclaims (or gives up) its 20rem in a single
+                // reflow at t=0. That reflow is free to be visible only because it
+                // happens UNDER this panel: at t=0 the panel still covers the exact
+                // strip the pane just grew into, so the collapse reads as the panel
+                // sliding off and uncovering content that was already there. On the
+                // way back the strip it uncovers is `bg-background` on a `bg-background`
+                // wrapper, so the band ahead of the incoming panel is seamless and
+                // only the panel's CONTENT appears to slide in.
+                //
+                // Corollary — geometry only ever changes while the panel is
+                // off-screen. Docked and undocking share the flush, full-height,
+                // square box; parked and peeking share the inset flyout card. The
+                // swap between the two therefore always lands on a frame where the
+                // panel is fully translated out of view. This is what the previous
+                // revision could not do: it swapped geometry at t=0, in full view,
+                // and the resulting pop is why collapsing read as instant even
+                // though a 220ms slide was running underneath it.
+                //
+                // OPENING IS NOT ANIMATED, from any trigger. A transition is read off
+                // the destination style, so the docked branch simply declares none
+                // and the panel, its contents, and the reflowed content pane all
+                // land on the same frame. Sliding the panel in looked considered and
+                // was not: the wrapper behind it is already `bg-background`, so the
+                // background arrived instantly while the panel's CONTENT trailed
+                // 300ms behind it, and the whole open read as laggy.
+                //
+                // Timing on the branches that DO animate is asymmetric: undocking
+                // 240ms, peek-in 260ms, peek-out 200ms, all on the iOS sheet curve.
+                // ─────────────────────────────────────────────────────────────────
+                slides
+                    ? cn(
+                    // Above the content headers for the whole collapsed
+                    // lifecycle, so the exit slide is never clipped by one.
+                    state === 'collapsed' && 'z-40', 
+                    // The radius is declared on BOTH boxes on purpose. The card
+                    // itself is `sidebar-inner`; this outer box only positions and
+                    // transforms it — but `className` from the consumer lands
+                    // HERE, and a consumer that paints a background on it (the
+                    // project sidebar passed `bg-background`) fills a square behind a
+                    // round card, which shows as four corner tabs sticking out
+                    // past the arc. Matching the radius clips that paint to the
+                    // same shape. No `overflow-hidden` — that would eat the card's
+                    // `shadow-xl`.
+                    flyout ? 'top-13 bottom-2 left-2 h-auto rounded-lg' : 'inset-y-0 left-0 h-svh', state === 'expanded'
+                        ? 'translate-x-0'
+                        : cn('transition-transform ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform motion-reduce:transition-none', offscreen
+                            ? cn(
+                            // The extra 2rem parks the card's shadow off-screen too.
+                            '-translate-x-[calc(100%+2rem)]', undocking ? 'duration-[240ms]' : 'duration-[200ms]')
+                            : 'translate-x-0 duration-[260ms]', 
+                        // ⌘B and Enter/Space collapse with no motion at all.
+                        // Last in the `cn` on purpose: twMerge keeps the final
+                        // `duration-*` in a class list, so this overrides
+                        // whichever duration the branch above chose.
+                        instantToggle && 'duration-0'))
+                    : side === 'left'
+                        ? 'inset-y-0 left-0 h-svh group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+                        : 'inset-y-0 right-0 h-svh group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 
+                // Adjust the padding for floating and inset variants.
+                variant === 'floating' || variant === 'inset'
+                    ? 'p-00 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: cn('bg-background group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm', 
+                    // Gated on `flyout`, not on `peekable`: parked ↔ peeking swaps no
+                    // styles at all (the card slides in and out rigid), and the
+                    // undocking panel keeps the flush docked chrome so its exit is a
+                    // pure horizontal slide with no radius/shadow appearing mid-flight.
+                    // border-border, not border-sidebar-border: the sidebar token is
+                    // pure white in dark mode and reads as a glowing edge.
+                    //
+                    // No transition on the radius/shadow — same corollary as above,
+                    // they only ever change while the panel is off-screen.
+                    flyout && 'border-border overflow-hidden rounded-lg border shadow-xl'), children: children }) })] }));
+}
+function SidebarTrigger({ className, onClick, ...props }) {
+    const { toggleSidebar } = useSidebar();
+    return (_jsxs(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon", className: cn(className), onClick: (event) => {
+            onClick?.(event);
+            // Pass the event through: Enter/Space activation reports `detail === 0`
+            // and collapses with no motion, a real click animates.
+            toggleSidebar(event);
+        }, ...props, children: [_jsx(PanelLeftIcon, { className: "cn-rtl-flip" }), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
+}
+/**
+ * Invisible strip along the viewport's left edge that summons the collapsed
+ * sidebar as a hover flyout. Renders nothing while the sidebar is docked
+ * open or on mobile — the mobile sidebar is a sheet.
+ */
+function SidebarEdgePeek({ className, ...props }) {
+    const { state, isMobile, peekEnter, peekLeave } = useSidebar();
+    if (state !== 'collapsed' || isMobile)
+        return null;
+    return (_jsx("div", { "aria-hidden": true, "data-slot": "sidebar-edge-peek", onPointerEnter: peekEnter, onPointerLeave: peekLeave, className: cn('fixed inset-y-0 left-0 z-60 hidden w-2 md:block', className), ...props }));
+}
+/**
+ * Drag handle on the panel's trailing edge — the sidebar's only resize
+ * affordance.
+ *
+ * Resize ONLY. It used to toggle the sidebar on click, which put a second
+ * collapse control on an edge that already reads as a resizer (it has shipped
+ * a `col-resize` cursor the whole time) while the real one sits in the panel
+ * header next to ⌘B. One edge, one job.
+ *
+ * Renders nothing while collapsed. There is nothing to resize, the strip is
+ * translated off-screen with the panel anyway, and that edge belongs to
+ * {@link SidebarEdgePeek} in the collapsed state.
+ *
+ * The drag writes `--sidebar-width` straight to the wrapper node and only
+ * commits to React state on pointer-up: one render per drag instead of one per
+ * pointermove. Width IS a layout property, so the content pane genuinely
+ * reflows per frame here — that is the point of a resize, and it is the one
+ * place in this file where per-frame layout is correct.
+ */
+function SidebarRail({ className, ...props }) {
+    const { state, width, setWidth, previewWidth } = useSidebar();
+    const [resizing, setResizing] = React.useState(false);
+    const drag = React.useRef(null);
+    const frame = React.useRef(null);
+    const stopDrag = React.useCallback((commit) => {
+        const active = drag.current;
+        drag.current = null;
+        if (frame.current !== null) {
+            cancelAnimationFrame(frame.current);
+            frame.current = null;
+        }
+        document.documentElement.removeAttribute('data-sidebar-resizing');
+        setResizing(false);
+        if (active)
+            setWidth(commit ? active.next : active.startWidth);
+    }, [setWidth]);
+    // Escape cancels a drag in flight and puts the width back. Bound to the
+    // window, not the handle: the pointer is captured, so the handle is not
+    // necessarily what has keyboard focus.
+    React.useEffect(() => {
+        if (!resizing)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape')
+                stopDrag(false);
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, [resizing, stopDrag]);
+    // Unmounting mid-drag (collapse via ⌘B while dragging) must not leave the
+    // global resize cursor latched on <html>.
+    React.useEffect(() => () => {
+        if (frame.current !== null)
+            cancelAnimationFrame(frame.current);
+        document.documentElement.removeAttribute('data-sidebar-resizing');
+    }, []);
+    const nudge = (delta) => setWidth(width + delta);
+    if (state === 'collapsed')
+        return null;
+    return (_jsx("div", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "data-resizing": resizing ? '' : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": "Resize sidebar", "aria-valuenow": width, "aria-valuemin": SIDEBAR_MIN_WIDTH_PX, "aria-valuemax": SIDEBAR_MAX_WIDTH_PX, tabIndex: 0, title: "Drag to resize \u2014 double-click to reset", onPointerDown: (event) => {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            drag.current = { startX: event.clientX, startWidth: width, next: width };
+            document.documentElement.setAttribute('data-sidebar-resizing', '');
+            setResizing(true);
+        }, onPointerMove: (event) => {
+            const active = drag.current;
+            if (!active)
+                return;
+            active.next = clampSidebarWidth(active.startWidth + (event.clientX - active.startX), window.innerWidth);
+            // One paint per frame, whatever rate the pointer reports at.
+            if (frame.current === null) {
+                frame.current = requestAnimationFrame(() => {
+                    frame.current = null;
+                    if (drag.current)
+                        previewWidth(drag.current.next);
+                });
+            }
+        }, onPointerUp: () => stopDrag(true), onPointerCancel: () => stopDrag(false), onDoubleClick: () => setWidth(SIDEBAR_WIDTH_PX), onKeyDown: (event) => {
+            const step = event.shiftKey ? SIDEBAR_RESIZE_STEP_COARSE_PX : SIDEBAR_RESIZE_STEP_PX;
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                nudge(-step);
+            }
+            else if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                nudge(step);
+            }
+            else if (event.key === 'Home') {
+                event.preventDefault();
+                setWidth(SIDEBAR_WIDTH_PX);
+            }
+        }, className: cn('absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-col-resize touch-none outline-none select-none group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', 
+        // The hairline is a pseudo-element so the 16px hit area stays 16px
+        // (well over the 8px a pointer needs) while the visible line stays 2px.
+        // Opacity only — a width/position transition here would animate layout
+        // on hover, on an element that sits over the content pane.
+        'after:pointer-events-none after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] after:-translate-x-1/2 after:opacity-0', 'after:bg-kortix-base after:transition-opacity after:duration-100 after:ease-out', 'hover:after:opacity-100 focus-visible:after:opacity-100 data-[resizing]:after:opacity-100', 
+        // Tapered top and bottom so the line reads as a seam, not a border.
+        'after:[clip-path:polygon(calc(50%-0.0625rem)_0%,calc(50%+0.0625rem)_0%,calc(50%+0.125rem)_50%,calc(50%+0.0625rem)_100%,calc(50%-0.0625rem)_100%,calc(50%-0.125rem)_50%)]', 'after:[mask-image:linear-gradient(to_bottom,transparent,black_15%,black_85%,transparent)]', 'motion-reduce:after:transition-none', className), ...props }));
+}
+function SidebarInset({ className, ...props }) {
+    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('bg-background relative flex w-full flex-1 flex-col overflow-hidden', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', className), ...props }));
+}
+export { Sidebar, SidebarTrigger, SidebarEdgePeek, SidebarRail, SidebarInset };

package/dist/components/ui/sidebar-peek.d.ts

@@ -0,0 +1,27 @@
+export declare const SIDEBAR_PEEK_OPEN_DELAY_MS = 100;
+export declare const SIDEBAR_PEEK_CLOSE_DELAY_MS = 250;
+type TimerId = ReturnType<typeof setTimeout>;
+export interface PeekController {
+    enter: () => void;
+    leave: () => void;
+    cancel: () => void;
+    /**
+     * Hold the flyout open across pointer-leaves — used while a menu/popover
+     * anchored in the panel is open. Its content portals outside the panel, so
+     * moving the pointer onto it fires the panel's `leave` and would otherwise
+     * arm the close timer. Calls must be balanced: `hold(true)` on open,
+     * `hold(false)` on close. On the final release the close timer is armed
+     * unless `isPointerOver()` reports the pointer is back on the panel.
+     */
+    hold: (held: boolean, isPointerOver?: () => boolean) => void;
+}
+/**
+ * Hover intent for the collapsed sidebar's edge-peek flyout. `enter` arms the
+ * open delay (grazing the edge must not flash the panel), `leave` arms the
+ * close delay (the pointer needs time to travel from the edge zone onto the
+ * panel), and re-entering during a pending close keeps the panel up. `cancel`
+ * drops the peek immediately — used when the sidebar docks open, the viewport
+ * goes mobile, or the provider unmounts.
+ */
+export declare function createPeekController(setPeek: (peek: boolean) => void, schedule?: (fn: () => void, ms: number) => TimerId, unschedule?: (id: TimerId) => void): PeekController;
+export {};

package/dist/components/ui/sidebar-peek.js

@@ -0,0 +1,70 @@
+export const SIDEBAR_PEEK_OPEN_DELAY_MS = 100;
+export const SIDEBAR_PEEK_CLOSE_DELAY_MS = 250;
+/**
+ * Hover intent for the collapsed sidebar's edge-peek flyout. `enter` arms the
+ * open delay (grazing the edge must not flash the panel), `leave` arms the
+ * close delay (the pointer needs time to travel from the edge zone onto the
+ * panel), and re-entering during a pending close keeps the panel up. `cancel`
+ * drops the peek immediately — used when the sidebar docks open, the viewport
+ * goes mobile, or the provider unmounts.
+ */
+export function createPeekController(setPeek, schedule = setTimeout, unschedule = clearTimeout) {
+    let timer = null;
+    let peeked = false;
+    // Number of menus/popovers currently pinning the flyout open. While > 0 a
+    // `leave` cannot close the panel; the last release re-arms the close timer.
+    let holds = 0;
+    const clear = () => {
+        if (timer !== null) {
+            unschedule(timer);
+            timer = null;
+        }
+    };
+    const armClose = () => {
+        clear();
+        if (!peeked)
+            return;
+        timer = schedule(() => {
+            timer = null;
+            peeked = false;
+            setPeek(false);
+        }, SIDEBAR_PEEK_CLOSE_DELAY_MS);
+    };
+    return {
+        enter: () => {
+            clear();
+            if (peeked)
+                return;
+            timer = schedule(() => {
+                timer = null;
+                peeked = true;
+                setPeek(true);
+            }, SIDEBAR_PEEK_OPEN_DELAY_MS);
+        },
+        leave: () => {
+            if (holds > 0)
+                return;
+            armClose();
+        },
+        cancel: () => {
+            clear();
+            holds = 0;
+            if (!peeked)
+                return;
+            peeked = false;
+            setPeek(false);
+        },
+        hold: (held, isPointerOver) => {
+            if (held) {
+                holds += 1;
+                // Cancel any close armed by the leave that fired as the pointer
+                // travelled from the panel onto the portaled menu content.
+                clear();
+                return;
+            }
+            holds = Math.max(0, holds - 1);
+            if (holds === 0 && !isPointerOver?.())
+                armClose();
+        },
+    };
+}

package/dist/components/ui/sidebar-width.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Sidebar width: the numbers, the clamp, and the cookie.
+ *
+ * Kept framework-free (same shape as `sidebar-peek.ts`) so the ratio rules are
+ * testable without React, a DOM, or a viewport.
+ *
+ * The ratio, stated once so it stops being folklore:
+ *
+ * | Bound   | Value          | Why                                              |
+ * |---------|----------------|--------------------------------------------------|
+ * | default | 20rem / 320px  | 25% of a 1280px viewport — one session title fits on one line |
+ * | min     | 13rem / 208px  | below this the session rows truncate to nothing   |
+ * | max     | 26rem / 416px  | above this the panel stops reading as a rail      |
+ * | cap     | 32% of the viewport | the panel may never own a third of the screen |
+ *
+ * `max` and `cap` are both ceilings and the SMALLER wins, so a 1024px laptop
+ * tops out at 328px while a 1600px display tops out at 416px. `min` always
+ * wins last: a narrow viewport clamps to 208px rather than producing an
+ * inverted range.
+ */
+/** Default docked width. Keep in sync with `SIDEBAR_WIDTH` (`20rem`). */
+export declare const SIDEBAR_WIDTH_PX = 320;
+export declare const SIDEBAR_MIN_WIDTH_PX = 208;
+export declare const SIDEBAR_MAX_WIDTH_PX = 416;
+/** The panel may never own more than this fraction of the viewport. */
+export declare const SIDEBAR_MAX_WIDTH_RATIO = 0.32;
+/** Drag lands on the default width when it comes within this many px of it. */
+export declare const SIDEBAR_WIDTH_SNAP_PX = 12;
+export declare const SIDEBAR_WIDTH_COOKIE_NAME = "sidebar_width";
+/**
+ * Largest width allowed at this viewport. `Math.max(MIN, …)` keeps the range
+ * non-inverted on viewports narrow enough that the ratio cap falls under the
+ * minimum — the desktop sidebar is hidden below `md` anyway, but a clamp that
+ * can return a max below its own min is a bug waiting for a resize event.
+ */
+export declare function maxSidebarWidth(viewportWidth: number): number;
+/**
+ * Clamp a proposed width into the allowed range, with a magnetic snap onto the
+ * default so "put it back how it was" costs no precision. The snap is applied
+ * before the clamp so it can never pull a value outside the range.
+ */
+export declare function clampSidebarWidth(width: number, viewportWidth: number): number;
+/**
+ * Read the persisted width out of a cookie string. Returns `null` when absent
+ * or unparseable so callers fall back to the default rather than to `NaN` —
+ * a `NaN` here would render `--sidebar-width: NaNpx` and collapse the panel.
+ */
+export declare function parseSidebarWidthCookie(cookie: string | null | undefined): number | null;

package/dist/components/ui/sidebar-width.js

@@ -0,0 +1,62 @@
+/**
+ * Sidebar width: the numbers, the clamp, and the cookie.
+ *
+ * Kept framework-free (same shape as `sidebar-peek.ts`) so the ratio rules are
+ * testable without React, a DOM, or a viewport.
+ *
+ * The ratio, stated once so it stops being folklore:
+ *
+ * | Bound   | Value          | Why                                              |
+ * |---------|----------------|--------------------------------------------------|
+ * | default | 20rem / 320px  | 25% of a 1280px viewport — one session title fits on one line |
+ * | min     | 13rem / 208px  | below this the session rows truncate to nothing   |
+ * | max     | 26rem / 416px  | above this the panel stops reading as a rail      |
+ * | cap     | 32% of the viewport | the panel may never own a third of the screen |
+ *
+ * `max` and `cap` are both ceilings and the SMALLER wins, so a 1024px laptop
+ * tops out at 328px while a 1600px display tops out at 416px. `min` always
+ * wins last: a narrow viewport clamps to 208px rather than producing an
+ * inverted range.
+ */
+/** Default docked width. Keep in sync with `SIDEBAR_WIDTH` (`20rem`). */
+export const SIDEBAR_WIDTH_PX = 320;
+export const SIDEBAR_MIN_WIDTH_PX = 208;
+export const SIDEBAR_MAX_WIDTH_PX = 416;
+/** The panel may never own more than this fraction of the viewport. */
+export const SIDEBAR_MAX_WIDTH_RATIO = 0.32;
+/** Drag lands on the default width when it comes within this many px of it. */
+export const SIDEBAR_WIDTH_SNAP_PX = 12;
+export const SIDEBAR_WIDTH_COOKIE_NAME = 'sidebar_width';
+/**
+ * Largest width allowed at this viewport. `Math.max(MIN, …)` keeps the range
+ * non-inverted on viewports narrow enough that the ratio cap falls under the
+ * minimum — the desktop sidebar is hidden below `md` anyway, but a clamp that
+ * can return a max below its own min is a bug waiting for a resize event.
+ */
+export function maxSidebarWidth(viewportWidth) {
+    const ratioCap = Math.floor(viewportWidth * SIDEBAR_MAX_WIDTH_RATIO);
+    return Math.max(SIDEBAR_MIN_WIDTH_PX, Math.min(SIDEBAR_MAX_WIDTH_PX, ratioCap));
+}
+/**
+ * Clamp a proposed width into the allowed range, with a magnetic snap onto the
+ * default so "put it back how it was" costs no precision. The snap is applied
+ * before the clamp so it can never pull a value outside the range.
+ */
+export function clampSidebarWidth(width, viewportWidth) {
+    const snapped = Math.abs(width - SIDEBAR_WIDTH_PX) <= SIDEBAR_WIDTH_SNAP_PX ? SIDEBAR_WIDTH_PX : width;
+    return Math.round(Math.min(Math.max(snapped, SIDEBAR_MIN_WIDTH_PX), maxSidebarWidth(viewportWidth)));
+}
+/**
+ * Read the persisted width out of a cookie string. Returns `null` when absent
+ * or unparseable so callers fall back to the default rather than to `NaN` —
+ * a `NaN` here would render `--sidebar-width: NaNpx` and collapse the panel.
+ */
+export function parseSidebarWidthCookie(cookie) {
+    if (!cookie)
+        return null;
+    const match = cookie.match(/(?:^|;\s*)sidebar_width=(\d{2,4})\b/);
+    if (!match)
+        return null;
+    const value = Number(match[1]);
+    return Number.isFinite(value) && value > 0 ? value : null;
+}

package/dist/components/ui/sidebar.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Input } from './input.js';
+import { Separator } from './separator.js';
+import { SidebarContext, type SidebarToggleOptions, useOptionalSidebar, useSidebar } from './sidebar-context.js';
+import { Sidebar, SidebarTrigger, SidebarEdgePeek, SidebarRail, SidebarInset } from './sidebar-panel.js';
+import { SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from './sidebar-menu-primitives.js';
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<'div'> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): React.JSX.Element;
+declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+declare function SidebarContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { Sidebar, SidebarContent, SidebarContext, SidebarEdgePeek, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useOptionalSidebar, useSidebar, };
+export type { SidebarToggleOptions };