@kortix/ui 0.0.0-stage → 0.14.3

package/dist/components/ui/sidebar.js

@@ -0,0 +1,194 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Input } from './input.js';
+import { Separator } from './separator.js';
+import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SidebarContext, resolveInstant, useOptionalSidebar, useSidebar, } from './sidebar-context.js';
+import { createPeekController } from './sidebar-peek.js';
+import { SIDEBAR_WIDTH_COOKIE_NAME, SIDEBAR_WIDTH_PX, clampSidebarWidth, maxSidebarWidth, parseSidebarWidthCookie, } from './sidebar-width.js';
+import { TooltipProvider } from './tooltip.js';
+import { useIsMobile } from '../../hooks/use-mobile.js';
+import { cn } from '../../lib/utils.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';
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback((value) => {
+        const openState = typeof value === 'function' ? value(open) : value;
+        if (setOpenProp) {
+            // Controlled: whoever owns the state owns its persistence. The
+            // settings shell (`features/accounts/hub/account-settings-shell.tsx`)
+            // controls its sidebar precisely so a collapse there does not land in
+            // this cookie and hide the project sidebar on the next app load.
+            setOpenProp(openState);
+            return;
+        }
+        _setOpen(openState);
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    }, [setOpenProp, open]);
+    // Helper to toggle the sidebar.
+    //
+    // ⌘B — and any Enter/Space activation of a toggle button — is a
+    // keyboard-initiated action on a surface the user hits many times a day, and
+    // those get NO motion. The frequency rule is not about the number of
+    // milliseconds; it is about the hand expecting the panel to already be there
+    // when the fingers come off the keys.
+    const [instantToggle, setInstantToggle] = React.useState(false);
+    const toggleSidebar = React.useCallback((options) => {
+        setInstantToggle(resolveInstant(options));
+        return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+    // Release the instant flag once the browser has painted the snapped frame, so
+    // the NEXT pointer-driven toggle animates again. Double rAF, not a timeout: a
+    // `setTimeout(0)` can land before the paint, which would re-declare the
+    // transition while the transform is still mid-change and animate the very
+    // toggle that asked not to be animated.
+    React.useEffect(() => {
+        if (!instantToggle)
+            return;
+        let second = 0;
+        const first = requestAnimationFrame(() => {
+            second = requestAnimationFrame(() => setInstantToggle(false));
+        });
+        return () => {
+            cancelAnimationFrame(first);
+            cancelAnimationFrame(second);
+        };
+    }, [instantToggle]);
+    // Edge-peek flyout state — hover intent lives in a plain controller so the
+    // open/close delays are testable without React or wall-clock timers.
+    const [peek, setPeek] = React.useState(false);
+    const peekController = React.useMemo(() => createPeekController(setPeek), []);
+    React.useEffect(() => () => peekController.cancel(), [peekController]);
+    React.useEffect(() => {
+        if (open || isMobile)
+            peekController.cancel();
+    }, [open, isMobile, peekController]);
+    // Tracks whether the pointer is currently over the panel/edge zone so a
+    // menu closing can decide whether to re-arm the flyout's close timer.
+    const pointerOverRef = React.useRef(false);
+    const peekEnter = React.useCallback(() => {
+        pointerOverRef.current = true;
+        peekController.enter();
+    }, [peekController]);
+    const peekLeave = React.useCallback(() => {
+        pointerOverRef.current = false;
+        peekController.leave();
+    }, [peekController]);
+    const holdPeek = React.useCallback((held) => peekController.hold(held, () => pointerOverRef.current), [peekController]);
+    // ── Resizable width ────────────────────────────────────────────────────
+    // `null` means "use the default"; a number is the user's persisted choice.
+    // Read straight out of the cookie in the initializer so a resized sidebar
+    // never paints at 256px first and then jumps — the wrapper below carries
+    // `suppressHydrationWarning` because that read makes the client's first
+    // style attribute legitimately differ from the server's.
+    const wrapperRef = React.useRef(null);
+    const [width, setWidthState] = React.useState(() => typeof document === 'undefined' ? null : parseSidebarWidthCookie(document.cookie));
+    const setWidth = React.useCallback((next) => {
+        const clamped = clampSidebarWidth(next, window.innerWidth);
+        // Write the committed value to the node BEFORE the state update, and never
+        // clear the override. A drag leaves an inline `--sidebar-width` on the
+        // wrapper; removing it here would paint one frame at the default 20rem if
+        // React defers the re-render past the next paint. Writing the same value
+        // React is about to render makes the hand-off unobservable.
+        wrapperRef.current?.style.setProperty('--sidebar-width', `${clamped}px`);
+        setWidthState(clamped);
+        document.cookie = `${SIDEBAR_WIDTH_COOKIE_NAME}=${clamped}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    }, []);
+    // Live drag feedback without a React render per pointermove. The gap and the
+    // panel both size off this one variable, so writing it on the wrapper node
+    // IS the update. (Custom properties inherit, so this does cost a style
+    // recalc down the tree — acceptable for a drag the user is watching, and the
+    // reason it is not used for anything else.)
+    const previewWidth = React.useCallback((next) => {
+        wrapperRef.current?.style.setProperty('--sidebar-width', `${next}px`);
+    }, []);
+    // The ratio cap is a live rule, not a write-time one: a stored 416px must
+    // not survive the window being dragged down to 900px. Runs once on mount too,
+    // which is what re-clamps a value persisted at a wider viewport.
+    React.useEffect(() => {
+        const capToViewport = () => setWidthState((current) => {
+            if (current === null)
+                return current;
+            const capped = Math.min(current, maxSidebarWidth(window.innerWidth));
+            return capped === current ? current : capped;
+        });
+        capToViewport();
+        window.addEventListener('resize', capToViewport);
+        return () => window.removeEventListener('resize', capToViewport);
+    }, []);
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                toggleSidebar({ instant: true });
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [toggleSidebar]);
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? 'expanded' : 'collapsed';
+    const contextValue = React.useMemo(() => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+        instantToggle,
+        peek,
+        peekEnter,
+        peekLeave,
+        holdPeek,
+        width: width ?? SIDEBAR_WIDTH_PX,
+        setWidth,
+        previewWidth,
+    }), [
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+        instantToggle,
+        peek,
+        peekEnter,
+        peekLeave,
+        holdPeek,
+        width,
+        setWidth,
+        previewWidth,
+    ]);
+    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsx("div", { "data-slot": "sidebar-wrapper", suppressHydrationWarning: true, style: {
+                    '--sidebar-width': width === null ? SIDEBAR_WIDTH : `${width}px`,
+                    '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                    ...style,
+                }, className: cn('group/sidebar-wrapper has-data-[variant=inset]:bg-background flex min-h-svh w-full', className), ...props, ref: wrapperRef, children: children }) }) }));
+}
+function SidebarInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn('bg-background h-8 w-full shadow-none', className), ...props }));
+}
+function SidebarHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className), ...props }));
+}
+function SidebarFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className), ...props }));
+}
+function SidebarSeparator({ className, ...props }) {
+    return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn('bg-background-border mx-2 w-auto', className), ...props }));
+}
+function SidebarContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className), ...props }));
+}
+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, };

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export { Skeleton };

package/dist/components/ui/skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+function Skeleton({ className, ...props }) {
+    return (_jsx("div", { ...props, className: cn('bg-primary/10 relative animate-pulse overflow-hidden rounded-md py-4', className) }));
+}
+export { Skeleton };

package/dist/components/ui/slider-native.d.ts

@@ -0,0 +1,7 @@
+import { Slider as SliderPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function NativeSlider({ className, defaultValue, value, min, max, tooltip, ...props }: React.ComponentProps<typeof SliderPrimitive.Root> & {
+    /** Shown in a Hint above the thumb while hovering it. */
+    tooltip?: React.ReactNode;
+}): React.JSX.Element;
+export { NativeSlider };

package/dist/components/ui/slider-native.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as SliderPrimitive } from 'radix-ui';
+import * as React from 'react';
+import Hint from './hint.js';
+import { cn } from '../../lib/utils.js';
+const thumb = (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "border-ring ring-ring/50 hit-area-4 relative block size-3.5 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50" }));
+function NativeSlider({ className, defaultValue, value, min = 0, max = 100, tooltip, ...props }) {
+    const _values = React.useMemo(() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]), [value, defaultValue, min, max]);
+    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, className: cn('relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col', className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "bg-kortix-base/60 relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1", children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "bg-kortix-blue absolute select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" }) }), Array.from({ length: _values.length }, (_, index) => {
+                if (tooltip == null)
+                    return _jsx(React.Fragment, { children: thumb }, index);
+                return (_jsx(Hint, { side: "top", label: tooltip, children: thumb }, index));
+            })] }));
+}
+export { NativeSlider };

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

@@ -0,0 +1,14 @@
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as React from 'react';
+type SliderProps = React.ComponentProps<typeof SliderPrimitive.Root> & {
+    /**
+     * Accessible name for the thumb(s). Radix renders each thumb as the
+     * `role="slider"` node, so a name on the root is never announced — it has to
+     * land here. Pass an array to name each thumb of a range slider.
+     */
+    thumbLabel?: string | string[];
+    /** Announced in place of the raw number (`aria-valuetext`), e.g. `40%`, `0.85`. */
+    formatValue?: (value: number, index: number) => string;
+};
+declare function Slider({ className, defaultValue, value, min, max, onValueChange, thumbLabel, formatValue, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: SliderProps): React.JSX.Element;
+export { Slider };

package/dist/components/ui/slider.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+function Slider({ className, defaultValue, value, min = 0, max = 100, onValueChange, thumbLabel, formatValue, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }) {
+    const [uncontrolledValues, setUncontrolledValues] = React.useState(() => Array.isArray(defaultValue) ? defaultValue : [min, max]);
+    const values = Array.isArray(value) ? value : uncontrolledValues;
+    const handleValueChange = React.useCallback((next) => {
+        setUncontrolledValues(next);
+        onValueChange?.(next);
+    }, [onValueChange]);
+    const labelFor = (index) => {
+        if (Array.isArray(thumbLabel))
+            return thumbLabel[index];
+        const base = thumbLabel ?? ariaLabel;
+        if (!base || values.length < 2)
+            return base;
+        if (index === 0)
+            return `${base} minimum`;
+        if (index === values.length - 1)
+            return `${base} maximum`;
+        return `${base} ${index + 1}`;
+    };
+    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, onValueChange: handleValueChange, className: cn('group/slider relative flex w-full cursor-pointer touch-none items-center select-none', 'data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50', // cursor-default: disabled control.
+        'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col', className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn(
+                // Hairline rail: the whole control is one thin ink stroke.
+                'bg-primary/10 relative grow overflow-hidden rounded-full', 'data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full', 'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1'), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn('bg-primary absolute rounded-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full') }) }), values.map((_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", "aria-label": labelFor(index), "aria-labelledby": ariaLabelledBy, "aria-valuetext": formatValue ? formatValue(values[index] ?? min, index) : undefined, className: cn(
+                // Caret thumb: a short vertical bar in the same ink as the fill, so
+                // the range reads as one continuous stroke that rises into a handle.
+                'bg-primary block h-4 w-2 shrink-0 rounded-full', 'group-data-[orientation=vertical]/slider:h-1 group-data-[orientation=vertical]/slider:w-4', 
+                // 44x51px touch target without shifting layout.
+                'hit-area-x-4 hit-area-y-5 cursor-pointer', 
+                // `scale` composes with Radix's inline `translate(-50%)` (Tailwind v4
+                // uses the standalone `scale` property), so the bar grows around its
+                // own center without breaking thumb positioning.
+                'duration-fast ease-default transition-[scale,box-shadow] outline-none', 'active:scale-x-150 active:scale-y-125', 
+                // Focus: accent ring with a surface-coloured gap that punches through
+                // the track, so the indicator reads as "on the thumb".
+                // `:focus`, not `:focus-visible` — Chrome resolves focus-visible once, at
+                // focus time, so a thumb grabbed by pointer would stay unringed for the
+                // rest of the interaction even after the user switches to arrow keys.
+                'focus:ring-ring focus:ring-offset-background focus:ring-2 focus:ring-offset-2', 
+                // Forced-colors mode strips box-shadow rings; a transparent outline is
+                // repainted there as a real system-coloured focus ring.
+                'focus:outline-2 focus:outline-offset-2 focus:outline-transparent focus:outline-solid', 'data-disabled:pointer-events-none data-disabled:cursor-default') }, index)))] }));
+}
+export { Slider };

package/dist/components/ui/sliding-tab-indicator.d.ts

@@ -0,0 +1,61 @@
+import { type Transition } from 'motion/react';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+type IndicatorRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type Box = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/**
+ * The tab's rect in the container's own untransformed coordinate space, or
+ * `null` while the container has no layout box.
+ *
+ * `getBoundingClientRect` reports TRANSFORMED geometry; the indicator is
+ * positioned in layout space. Divide the transform back out, or a scaled
+ * ancestor bakes its scale into the saved rect.
+ *
+ * This is not hypothetical. `Modal`/`Dialog` open with
+ * `data-[state=open]:zoom-in-95`, and the measuring layout effect runs while
+ * that animation is on its first frames — so the pill was saved at 95% and
+ * stayed there. `ResizeObserver` cannot rescue it: it reports border-box
+ * LAYOUT size, which a transform never changes, so it never fires when the
+ * animation lands on `scale(1)`. Measured in a dialog at 1280px: the pill sat
+ * 4.5px left and 3.7px narrow of its tab, indefinitely — until an unrelated
+ * re-measure (clicking another tab) happened to run unscaled.
+ *
+ * `layout` is the container's border box from `getComputedStyle`, which is
+ * fractional. It must not be `offsetWidth`/`offsetHeight`: those round to whole
+ * pixels, and every track here is a fraction wide (`--spacing` is 0.23rem). A
+ * 258.61px track divided by its rounded 259 is a scale of 0.9985, which pushed
+ * the pill right and widened it in proportion to its distance from the left
+ * edge — nothing on the first tab, 0.37px on the last of three, enough to put
+ * the chip's ring on the track's right edge.
+ *
+ * An unscaled rect is also snapped to device pixels, edge by edge, the way the
+ * browser snaps the tab's own box. The tab sits at a fractional offset and the
+ * pill is moved there by a transform, which the browser does not snap: the
+ * pill's ring blurred across two pixels and ate the track beside it, while the
+ * track and the first tab stayed sharp. Whole device pixels for the offset and
+ * the size make the pill land on exactly the pixels the tab covers.
+ */
+export declare function toLayoutRect(container: Box, tab: Box, layout: {
+    width: number;
+    height: number;
+}, scroll: {
+    left: number;
+    top: number;
+}, dpr?: number): IndicatorRect | null;
+export declare function SlidingTabIndicator({ activeId, indicatorClassName, className, transition, children, ...props }: {
+    activeId: string;
+    indicatorClassName?: string;
+    className?: string;
+    transition?: Transition;
+    children: ReactNode;
+} & ComponentPropsWithoutRef<'div'>): import("react").JSX.Element;
+export {};

package/dist/components/ui/sliding-tab-indicator.js

@@ -0,0 +1,128 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { m, useReducedMotion } from 'motion/react';
+import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
+const EMPTY_RECT = { x: 0, y: 0, width: 0, height: 0 };
+/**
+ * The tab's rect in the container's own untransformed coordinate space, or
+ * `null` while the container has no layout box.
+ *
+ * `getBoundingClientRect` reports TRANSFORMED geometry; the indicator is
+ * positioned in layout space. Divide the transform back out, or a scaled
+ * ancestor bakes its scale into the saved rect.
+ *
+ * This is not hypothetical. `Modal`/`Dialog` open with
+ * `data-[state=open]:zoom-in-95`, and the measuring layout effect runs while
+ * that animation is on its first frames — so the pill was saved at 95% and
+ * stayed there. `ResizeObserver` cannot rescue it: it reports border-box
+ * LAYOUT size, which a transform never changes, so it never fires when the
+ * animation lands on `scale(1)`. Measured in a dialog at 1280px: the pill sat
+ * 4.5px left and 3.7px narrow of its tab, indefinitely — until an unrelated
+ * re-measure (clicking another tab) happened to run unscaled.
+ *
+ * `layout` is the container's border box from `getComputedStyle`, which is
+ * fractional. It must not be `offsetWidth`/`offsetHeight`: those round to whole
+ * pixels, and every track here is a fraction wide (`--spacing` is 0.23rem). A
+ * 258.61px track divided by its rounded 259 is a scale of 0.9985, which pushed
+ * the pill right and widened it in proportion to its distance from the left
+ * edge — nothing on the first tab, 0.37px on the last of three, enough to put
+ * the chip's ring on the track's right edge.
+ *
+ * An unscaled rect is also snapped to device pixels, edge by edge, the way the
+ * browser snaps the tab's own box. The tab sits at a fractional offset and the
+ * pill is moved there by a transform, which the browser does not snap: the
+ * pill's ring blurred across two pixels and ate the track beside it, while the
+ * track and the first tab stayed sharp. Whole device pixels for the offset and
+ * the size make the pill land on exactly the pixels the tab covers.
+ */
+export function toLayoutRect(container, tab, layout, scroll, dpr = 1) {
+    const scaleX = layout.width > 0 ? container.width / layout.width : 0;
+    const scaleY = layout.height > 0 ? container.height / layout.height : 0;
+    if (!scaleX || !scaleY)
+        return null;
+    // A computed size is serialized to a few decimals, so an unscaled ratio is
+    // 1 within ~1e-5. A real transform (`zoom-in-95`) is far outside this.
+    if (Math.abs(scaleX - 1) < 1e-4 && Math.abs(scaleY - 1) < 1e-4) {
+        const snap = (v) => Math.round(v * dpr) / dpr;
+        const left = snap(tab.left);
+        const top = snap(tab.top);
+        // The offset is from the container's UNSNAPPED origin. The pill is an
+        // absolute child moved by a transform, so it paints at the container's
+        // fractional position plus `x`; only the track's own background is
+        // snapped. Subtracting the snapped origin left the container's fraction in
+        // the pill — a whole-pill shift of up to half a device pixel. On a track at
+        // x = 29.25 (2x) the first tab's chip sat 1.75px from the track's left edge
+        // and the last tab's 2.25px from its right: the 1px ring swallowed the
+        // track on one side only.
+        return {
+            x: left - container.left + scroll.left,
+            y: top - container.top + scroll.top,
+            width: snap(tab.left + tab.width) - left,
+            height: snap(tab.top + tab.height) - top,
+        };
+    }
+    return {
+        x: (tab.left - container.left) / scaleX + scroll.left,
+        y: (tab.top - container.top) / scaleY + scroll.top,
+        width: tab.width / scaleX,
+        height: tab.height / scaleY,
+    };
+}
+export function SlidingTabIndicator({ activeId, indicatorClassName, className, transition, children, ...props }) {
+    const reduceMotion = useReducedMotion();
+    const containerRef = useRef(null);
+    const [rect, setRect] = useState(EMPTY_RECT);
+    const [visible, setVisible] = useState(false);
+    const measure = useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const tab = container.querySelector(`[data-sliding-tab="${activeId}"]`);
+        if (!tab) {
+            setVisible(false);
+            return;
+        }
+        // Preflight makes every box `border-box`, so the computed width and height
+        // are the border box — the same box `getBoundingClientRect` measures.
+        const style = getComputedStyle(container);
+        const next = toLayoutRect(container.getBoundingClientRect(), tab.getBoundingClientRect(), { width: parseFloat(style.width), height: parseFloat(style.height) }, { left: container.scrollLeft, top: container.scrollTop }, window.devicePixelRatio);
+        // No layout box yet (an unmounted or `display:none` ancestor). Showing a
+        // pill from a zero rect draws it at 0×0 in the corner; wait for the
+        // ResizeObserver below, which DOES fire for a real size change.
+        if (!next) {
+            setVisible(false);
+            return;
+        }
+        setRect(next);
+        setVisible(true);
+    }, [activeId]);
+    useLayoutEffect(() => {
+        measure();
+    }, [measure]);
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const ro = new ResizeObserver(() => measure());
+        ro.observe(container);
+        const tabs = container.querySelectorAll('[data-sliding-tab]');
+        tabs.forEach((tab) => ro.observe(tab));
+        window.addEventListener('resize', measure);
+        container.addEventListener('scroll', measure, { passive: true });
+        return () => {
+            ro.disconnect();
+            window.removeEventListener('resize', measure);
+            container.removeEventListener('scroll', measure);
+        };
+    }, [measure, activeId]);
+    const resolvedTransition = reduceMotion
+        ? { duration: 0 }
+        : (transition ?? { type: 'spring', stiffness: 380, damping: 32 });
+    return (_jsxs("div", { ref: containerRef, className: cn('relative', className), ...props, children: [visible ? (_jsx(m.div, { "aria-hidden": true, className: cn('pointer-events-none absolute top-0 left-0 z-0', indicatorClassName), initial: false, animate: {
+                    x: rect.x,
+                    y: rect.y,
+                    width: rect.width,
+                    height: rect.height,
+                }, transition: resolvedTransition })) : null, children] }));
+}

package/dist/components/ui/split-sheet.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { type TriggerVariantProps } from './trigger-variants.js';
+export type SplitSheetSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * The one decision every open/close request goes through. A controlled sheet
+ * writes no state of its own: the parent's `open` prop is the only source of
+ * truth. Same contract `Disclosure` adopted after its mirrored-state bug.
+ */
+export declare function resolveSplitSheetChange(state: {
+    open: boolean;
+    nextOpen: boolean;
+    isControlled: boolean;
+}): {
+    changed: boolean;
+    writesInternalState: boolean;
+};
+/** Read or set the nearest sheet's open state from anywhere inside it. */
+declare function useSplitSheet(): {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+};
+type SplitSheetProps = React.ComponentProps<'div'> & {
+    /** Controlled. Omit entirely (not `false`) for an uncontrolled sheet. */
+    open?: boolean;
+    /** Uncontrolled starting value. Ignored when `open` is provided. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Sheet column width when the root is wide enough to split. */
+    size?: SplitSheetSize;
+    /** The open sheet COVERS the page cell instead of taking a second column —
+     *  the same takeover the narrow-container fallback already does, made
+     *  deliberate. For a root that is itself one pane of a wider split: a
+     *  second column inside it would put three surfaces on one row. The page
+     *  stays mounted and keeps its scroll; closing uncovers it. */
+    cover?: boolean;
+};
+declare function SplitSheet({ open: openProp, defaultOpen, onOpenChange, size, cover, className, children, ...props }: SplitSheetProps): React.JSX.Element;
+/** The page. Always the first column; it scrolls on its own. */
+declare function SplitSheetMain({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+type SplitSheetTriggerProps = Omit<React.ComponentProps<'button'>, 'ref'> & TriggerVariantProps & {
+    asChild?: boolean;
+};
+/** Toggles the sheet. Call `event.preventDefault()` in `onClick` to handle the click yourself. */
+declare function SplitSheetTrigger({ asChild, variant, size, className, type, onClick, ...props }: SplitSheetTriggerProps): React.JSX.Element;
+type SplitSheetCloseProps = Omit<React.ComponentProps<'button'>, 'ref'> & {
+    asChild?: boolean;
+};
+declare function SplitSheetClose({ asChild, type, onClick, ...props }: SplitSheetCloseProps): React.JSX.Element;
+/** The sheet column. Renders nothing while closed. Always include a `SplitSheetTitle`. */
+declare function SplitSheetContent(props: Omit<React.ComponentProps<'aside'>, 'ref'>): React.JSX.Element | null;
+type SplitSheetHeaderProps = React.ComponentProps<'div'> & {
+    showCloseButton?: boolean;
+    closeLabel?: string;
+};
+declare function SplitSheetHeader({ className, children, showCloseButton, closeLabel, ...props }: SplitSheetHeaderProps): React.JSX.Element;
+declare function SplitSheetTitle({ className, ...props }: React.ComponentProps<'h2'>): React.JSX.Element;
+declare function SplitSheetDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+declare function SplitSheetBody({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SplitSheetFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { SplitSheet, SplitSheetBody, SplitSheetClose, SplitSheetContent, SplitSheetDescription, SplitSheetFooter, SplitSheetHeader, SplitSheetMain, SplitSheetTitle, SplitSheetTrigger, useSplitSheet, };
+export type { SplitSheetProps };