@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

package/dist/components/ui/date-range-picker.js

@@ -0,0 +1,190 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from './button.js';
+import { Calendar } from './calendar.js';
+import { IconCalendar, IconChevronDown } from './kortix-icons.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { cn } from '../../lib/utils.js';
+const PRESET_ORDER = ['24h', '7d', '30d', '90d'];
+const PRESET_DAYS = {
+    '24h': 1,
+    '7d': 7,
+    '30d': 30,
+    '90d': 90,
+};
+const PRESET_LABELS = {
+    '24h': 'Last 24 hours',
+    '7d': 'Last 7 days',
+    '30d': 'Last 30 days',
+    '90d': 'Last 90 days',
+};
+/**
+ * Resolve a preset to concrete UTC ISO bounds, anchored to `now`. Presets are
+ * a UI affordance only — every cost endpoint takes just `from`/`to`, so this
+ * is where a preset turns into the wire values.
+ */
+export function resolvePreset(preset, now) {
+    const to = now.toISOString();
+    const from = new Date(now.getTime() - PRESET_DAYS[preset] * 86_400_000).toISOString();
+    return { preset, from, to };
+}
+/**
+ * Turn a calendar day selection into a half-open UTC window: `from` is the
+ * start of `startDay`, `to` is the start of the day *after* `endDay`, so the
+ * end day the user clicked is fully covered under `[from, to)`.
+ *
+ * `startDay`/`endDay` are the `Date` objects `react-day-picker` hands back —
+ * local midnight on the clicked calendar day. Reading their *local* calendar
+ * parts (`getFullYear`/`getMonth`/`getDate`) and rebuilding the instant with
+ * `Date.UTC` is what makes the result independent of the host's timezone;
+ * calling `.toISOString()` on the picked `Date` directly would instead bake
+ * in the host's UTC offset (see the test file for a worked example).
+ */
+export function toUtcDayRange(startDay, endDay) {
+    const from = new Date(Date.UTC(startDay.getFullYear(), startDay.getMonth(), startDay.getDate())).toISOString();
+    const to = new Date(Date.UTC(endDay.getFullYear(), endDay.getMonth(), endDay.getDate() + 1)).toISOString();
+    return { preset: 'custom', from, to };
+}
+/**
+ * The inverse of `toUtcDayRange`, for feeding a stored `CostRange` back into
+ * `<Calendar mode="range">` on reopen. The stored bounds are UTC-midnight
+ * instants; `react-day-picker` highlights by *local* calendar day. Shifting
+ * the instant by milliseconds (an earlier version of this function did
+ * `getTime() - 86_400_000`) only relocates the instant — it does nothing to
+ * account for how a *different* host timezone reads that instant's local
+ * calendar day, so it "corrects" the display for positive-UTC-offset viewers
+ * by coincidence and is wrong in the opposite direction for negative-offset
+ * viewers (e.g. the Americas): both bounds land a day early there.
+ *
+ * The fix mirrors `toUtcDayRange` with its two steps reversed: read the
+ * *UTC* calendar parts off the stored instant (`getUTCFullYear`/
+ * `getUTCMonth`/`getUTCDate` — always host-independent), then rebuild via
+ * the *local* `Date` constructor, so the viewer's own host offset decides
+ * how the resulting `Date` reads back — the same offset `react-day-picker`
+ * itself will later use to highlight it. `new Date(y, m, d)` normalizes an
+ * out-of-range day (`d - 1` below zero, `d + 1` past the month's end), so
+ * month/year rollover needs no special-casing.
+ */
+export function toCalendarSelection(value) {
+    const utcPartsToLocalDay = (iso, dayDelta = 0) => {
+        const instant = new Date(iso);
+        return new Date(instant.getUTCFullYear(), instant.getUTCMonth(), instant.getUTCDate() + dayDelta);
+    };
+    // A preset's from/to are real instants (e.g. `now` minus N days), not day
+    // boundaries — pass them through unadjusted. Only a custom range's bounds
+    // are calendar days that need this local/UTC reconciliation; its `to` is
+    // also the exclusive day-after boundary, so the last inclusive calendar
+    // day the user clicked is one day earlier.
+    if (value.preset !== 'custom') {
+        return { from: new Date(value.from), to: new Date(value.to) };
+    }
+    return { from: utcPartsToLocalDay(value.from), to: utcPartsToLocalDay(value.to, -1) };
+}
+/**
+ * The widest label `formatRangeLabel` can ever emit, used to reserve the
+ * trigger's width so the control does not resize when the range changes.
+ *
+ * The shape is fixed: `MMM D – MMM D, YYYY`. Every `en-US` short month name is
+ * three characters, the year is always four digits, and the widest day number
+ * is two digits — so a two-digit/two-digit pair is the maximum at 21
+ * characters. Digits are rendered `tabular-nums` on the trigger, so any
+ * two-digit day is exactly as wide as `28` and this string is not merely the
+ * longest, it is the widest for its digit positions.
+ *
+ * NOT `Dec 28, 2026 – Jan 3, 2027`: `formatRangeLabel` prints the year once,
+ * after the second day, so a range spanning a year boundary is *shorter* than
+ * this (`Dec 28 – Jan 3, 2027`), not longer. Sizing to the two-year shape
+ * would reserve ~5 characters of permanent dead space.
+ *
+ * The four preset labels are all shorter (`Last 24 hours`, 13 characters), so
+ * this one string governs the trigger width in every state.
+ */
+export const WIDEST_RANGE_LABEL = 'Dec 28 – Dec 30, 2026';
+/** Human label for the trigger button: the preset name, or both dates for a custom range. */
+export function formatRangeLabel(range) {
+    if (range.preset !== 'custom')
+        return PRESET_LABELS[range.preset];
+    const from = new Date(range.from);
+    // `to` is the exclusive day-after boundary (half-open [from, to)) — the
+    // last inclusive calendar day the user clicked is one day earlier.
+    const to = new Date(new Date(range.to).getTime() - 86_400_000);
+    const day = (value) => value.toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone: 'UTC' });
+    return `${day(from)} – ${day(to)}, ${to.getUTCFullYear()}`;
+}
+/**
+ * What a click on `day` does, given the half-made range currently on screen.
+ *
+ * This deliberately ignores the range `react-day-picker` hands to `onSelect`,
+ * because that value is the bug. Its `addToRange` folds the clicked day into
+ * whatever is currently `selected`, and `selected` is always a *complete*
+ * range here — a preset resolves to real bounds, so `from` and `to` are both
+ * set before the user ever opens the calendar. Feeding a complete range in
+ * takes the `from && to` branch, which returns another complete range from a
+ * single click:
+ *
+ *   addToRange(Jul 10, { from: Jul 1, to: Jul 31 })  ->  { from: Jul 1, to: Jul 10 }
+ *
+ * So the first click looked finished, the picker committed and closed, and a
+ * second date could never be chosen. Worse, the committed range was one the
+ * user never asked for: their click became the *end* of the previous range
+ * instead of the start of a new one.
+ *
+ * Deriving from the clicked day instead makes the two clicks explicit — the
+ * first opens a range, the second closes it, in whichever order they are
+ * clicked. Clicking the same day twice is a legitimate single-day range and
+ * completes normally.
+ */
+export function nextRangeDraft(draft, day) {
+    // Nothing pending — this click opens a new range rather than editing the
+    // committed one.
+    if (!draft?.from || draft.to) {
+        return { kind: 'pending', draft: { from: day, to: undefined } };
+    }
+    const start = draft.from;
+    return day.getTime() < start.getTime()
+        ? { kind: 'complete', from: day, to: start }
+        : { kind: 'complete', from: start, to: day };
+}
+/**
+ * The main control for all three levels of the cost explorer (project,
+ * sessions, session). A Popover holding a vertical preset rail beside a range
+ * Calendar; both paths resolve to concrete UTC ISO bounds before calling
+ * `onChange`.
+ */
+export function DateRangePicker({ value, onChange }) {
+    const [open, setOpen] = useState(false);
+    // The range being picked, if the user is mid-selection. While this is set it
+    // is what the calendar shows, so the first click reads as "start here"
+    // instead of silently editing the committed range.
+    const [draft, setDraft] = useState(undefined);
+    const selected = draft ?? toCalendarSelection(value);
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        // Closing with only a start day chosen abandons it. Keeping it would mean
+        // the next open silently treats an old click as the range's start.
+        if (!next)
+            setDraft(undefined);
+    };
+    const handlePresetSelect = (preset) => {
+        setDraft(undefined);
+        onChange(resolvePreset(preset, new Date()));
+        setOpen(false);
+    };
+    // `range` is ignored on purpose — see `nextRangeDraft`. The clicked day is
+    // the only trustworthy input react-day-picker gives us here.
+    const handleCalendarSelect = (_range, day) => {
+        const step = nextRangeDraft(draft, day);
+        if (step.kind === 'pending') {
+            setDraft(step.draft);
+            return;
+        }
+        setDraft(undefined);
+        onChange(toUtcDayRange(step.from, step.to));
+        setOpen(false);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "gap-1.5 font-normal", children: [_jsx(IconCalendar, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "grid text-left tabular-nums", children: [_jsx("span", { "aria-hidden": "true", className: "invisible col-start-1 row-start-1", children: WIDEST_RANGE_LABEL }), _jsx("span", { className: "col-start-1 row-start-1", children: formatRangeLabel(value) })] }), _jsx(IconChevronDown, { className: cn('size-3 shrink-0 opacity-50 transition-transform duration-200 ease-out', open && 'rotate-180') })] }) }), _jsx(PopoverContent, { align: "start", sideOffset: 8, className: "w-auto p-0 shadow-md", children: _jsxs("div", { className: "flex flex-col sm:flex-row", children: [_jsx("div", { className: "grid grid-cols-2 gap-1 border-b p-2 sm:w-[136px] sm:grid-cols-1 sm:content-start sm:border-r sm:border-b-0", children: PRESET_ORDER.map((preset) => {
+                                const active = value.preset === preset;
+                                return (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-pressed": active, className: cn('h-7 w-full justify-start px-2.5 text-xs font-normal', active ? 'bg-primary/[0.06] text-foreground' : 'text-muted-foreground'), onClick: () => handlePresetSelect(preset), children: PRESET_LABELS[preset] }, preset));
+                            }) }), _jsx(Calendar, { mode: "range", selected: selected, onSelect: handleCalendarSelect, defaultMonth: selected.from })] }) })] }));
+}

package/dist/components/ui/definition-list.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export interface DefinitionListProps {
+    dividers?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+export declare function DefinitionList({ dividers, className, children }: DefinitionListProps): import("react").JSX.Element;
+export interface DefinitionRowProps {
+    label: string;
+    /** Width reserved for the label column (default 110px) */
+    labelWidth?: number;
+    children: ReactNode;
+    title?: string;
+}
+export declare function DefinitionRow({ label, labelWidth, children, title }: DefinitionRowProps): import("react").JSX.Element;

package/dist/components/ui/definition-list.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Kortix <DefinitionList> — key:value pair list.
+ *
+ * Used for:
+ *   • Project About → Details panel
+ *   • Issue detail sidebar → Properties
+ *   • Trigger / Channel / Tunnel details
+ *   • Anywhere you'd otherwise reach for a <table> with two columns
+ *
+ * Flat, dividerless by default. Set `dividers` to get a 1px rule between
+ * rows. Labels are fixed-width so values align.
+ *
+ * <DefinitionList>
+ *   <DefinitionRow label="Path"><code>/workspace/foo</code></DefinitionRow>
+ *   <DefinitionRow label="Created">2 days ago</DefinitionRow>
+ * </DefinitionList>
+ */
+import { cn } from '../../lib/utils.js';
+export function DefinitionList({ dividers, className, children }) {
+    return (_jsx("dl", { className: cn(dividers && 'divide-border border-border/60 divide-y border-y', className), children: children }));
+}
+export function DefinitionRow({ label, labelWidth = 110, children, title }) {
+    return (_jsxs("div", { className: "flex items-baseline gap-6 py-2.5", children: [_jsx("dt", { className: "text-muted-foreground/70 shrink-0 text-xs font-medium", style: { width: labelWidth }, children: label }), _jsx("dd", { className: "text-foreground/90 min-w-0 flex-1 truncate text-sm", title: title, children: children })] }));
+}

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

@@ -0,0 +1,29 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { type TriggerVariantProps } from './trigger-variants.js';
+/** @deprecated In feature code use `Modal` (`@kortix/ui/modal`). `Dialog` is the primitive other components build on. */
+declare const Dialog: ({ open, defaultOpen, onOpenChange, ...props }: DialogPrimitive.DialogProps) => React.JSX.Element;
+declare const DialogTrigger: ({ className, variant, size, asChild, ...props }: Omit<React.ComponentProps<typeof DialogPrimitive.Trigger>, "size"> & TriggerVariantProps) => React.JSX.Element;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** @deprecated In feature code use `ModalContent` (`@kortix/ui/modal`). */
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "transparent" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    hideCloseButton?: boolean;
+    showOverlay?: boolean;
+    overlayClassName?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/ui/dialog.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as React from 'react';
+import { Close } from '../../icons/close.js';
+import { cn } from '../../lib/utils.js';
+import { useUiStrings } from '../../providers/ui-provider.js';
+import { dialogContentZ, DialogDepthProvider, dialogOverlayZ, useDialogDepth, useDialogRootLayer, } from '../../lib/z-stack.js';
+import { cva } from 'class-variance-authority';
+import { buttonVariants } from './button.js';
+import { triggerVariants } from './trigger-variants.js';
+/** @deprecated In feature code use `Modal` (`@kortix/ui/modal`). `Dialog` is the primitive other components build on. */
+const Dialog = ({ open, defaultOpen, onOpenChange, ...props }) => {
+    const layer = useDialogRootLayer({ open, defaultOpen, onOpenChange });
+    return (_jsx(DialogDepthProvider, { depth: layer.depth, children: _jsx(DialogPrimitive.Root, { ...props, open: layer.open, onOpenChange: layer.onOpenChange }) }));
+};
+const DialogTrigger = ({ className, variant, size, asChild, ...props }) => (_jsx(DialogPrimitive.Trigger, { asChild: asChild, 
+    // With `asChild` the child owns its styling — merging ours would double it.
+    className: asChild ? className : cn(triggerVariants({ variant, size }), className), ...props }));
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className, style, ...props }, ref) => {
+    const depth = useDialogDepth();
+    return (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 bg-black/65 backdrop-blur-xs duration-200', className), style: { zIndex: dialogOverlayZ(depth), ...style }, ...props }));
+});
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogVariants = cva(cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border p-5 shadow-lg duration-200 sm:max-w-lg sm:rounded-lg'), {
+    variants: {
+        variant: {
+            default: 'bg-sidebar border-muted/60',
+            transparent: 'bg-transparent border-none p-0',
+        },
+    },
+    defaultVariants: {
+        variant: 'transparent',
+    },
+});
+/** @deprecated In feature code use `ModalContent` (`@kortix/ui/modal`). */
+const DialogContent = React.forwardRef(({ className, children, hideCloseButton = false, showOverlay = true, overlayClassName, style, ...props }, ref) => {
+    const depth = useDialogDepth();
+    const strings = useUiStrings();
+    return (_jsxs(DialogPortal, { children: [showOverlay && _jsx(DialogOverlay, { className: overlayClassName }), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn(DialogVariants({ variant: 'default' }), className), style: { zIndex: dialogContentZ(depth), ...style }, ...props, children: [children, !hideCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'absolute top-3 right-3'), children: [_jsx(Close, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: strings.close })] }))] })] }));
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-1.5 text-center sm:text-left', className), ...props }));
+DialogHeader.displayName = 'DialogHeader';
+const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
+DialogFooter.displayName = 'DialogFooter';
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn('text-lg leading-none font-semibold tracking-tight', className), ...props })));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn('text-muted-foreground text-sm', className), ...props })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

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

@@ -0,0 +1,121 @@
+import { Transition, Variant } from 'motion/react';
+import * as React from 'react';
+export type DisclosureContextType = {
+    open: boolean;
+    toggle: () => void;
+    /**
+     * Minted once per disclosure so the trigger can point `aria-controls` at the
+     * region it expands. `DisclosureContent` stamps the same id on its element —
+     * a locally-minted id there could not be reached by the trigger, which is why
+     * the attribute was missing entirely.
+     */
+    contentId: string;
+    variants?: {
+        expanded: Variant;
+        collapsed: Variant;
+    };
+};
+/**
+ * What activating the trigger should do. Extracted as a pure function so the
+ * contract has something to test: `apps/web` has no browser test harness (only
+ * `renderToStaticMarkup`), so a click cannot be simulated, and this is the exact
+ * decision that was wrong before.
+ *
+ * `nextOpen` negates the value the disclosure is CURRENTLY RENDERING. The old
+ * implementation negated a private copy of it instead, which is how a click
+ * could resolve to the state the disclosure was already in and appear to do
+ * nothing at all.
+ */
+export declare function resolveDisclosureToggle(state: {
+    open: boolean;
+    isControlled: boolean;
+}): {
+    nextOpen: boolean;
+    /** Only an uncontrolled disclosure owns state. A controlled one holds none —
+     *  keeping a copy is what produced the two-sources-of-truth bug. */
+    writesInternalState: boolean;
+};
+export type DisclosureProviderProps = {
+    children: React.ReactNode;
+    /** Controlled. Omit entirely (not `false`) for an uncontrolled disclosure. */
+    open?: boolean;
+    /** Uncontrolled starting value. Ignored when `open` is provided. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    variants?: {
+        expanded: Variant;
+        collapsed: Variant;
+    };
+};
+/**
+ * Controlled OR uncontrolled, with exactly one source of truth for `open` —
+ * the same contract every Radix primitive in this codebase uses.
+ *
+ * This replaces a mirrored-state design that copied `open` into internal state
+ * and reconciled the two in a `useEffect`. That shape produced the reported
+ * "click does nothing, then it opens by itself" flakiness through four separate
+ * defects, all of which are structural rather than incidental:
+ *
+ *  1. `toggle` computed `!internalCopy`, not `!open`. Any moment the copy and
+ *     the prop disagreed, a click moved the disclosure the wrong way — or
+ *     landed on the value it already had, so nothing visibly happened.
+ *  2. The prop → copy sync ran in a PASSIVE effect, i.e. after paint. A
+ *     prop-driven open animated a frame late and looked spontaneous, and in an
+ *     exclusive accordion (session-scope-control.tsx) both sections were open
+ *     together for that frame.
+ *  3. `onOpenChange` was called from inside the `setState` updater. React
+ *     requires updaters to be pure and is free to invoke them more than once;
+ *     a parent whose handler toggles (`onOpenChange={() => toggleThing()}` —
+ *     what both session lists pass) then nets to zero and never moves.
+ *  4. `open` defaulted to `false`, so "controlled and closed" and "uncontrolled"
+ *     were indistinguishable and no caller could opt out of being controlled.
+ *
+ * Here `open` is read straight from whichever source owns it, so a controlled
+ * parent's change lands in the same commit as its own render, and `toggle`
+ * always derives from the value actually on screen.
+ */
+declare function DisclosureProvider({ children, open: openProp, defaultOpen, onOpenChange, variants, }: DisclosureProviderProps): React.JSX.Element;
+export type DisclosureProps = {
+    /**
+     * Controlled value. Pass it WITH `onOpenChange`, or the disclosure is frozen
+     * — there is no internal copy to fall back on any more, by design.
+     * For "starts open, then the user decides", use `defaultOpen`.
+     */
+    open?: boolean;
+    /** Uncontrolled starting value. Ignored when `open` is provided. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+    className?: string;
+    variants?: {
+        expanded: Variant;
+        collapsed: Variant;
+    };
+    transition?: Transition;
+    variant?: 'default' | 'outline';
+};
+export declare function Disclosure({ open: openProp, defaultOpen, onOpenChange, children, className, transition, variants, variant, }: DisclosureProps): React.JSX.Element;
+export declare function DisclosureTrigger({ children, className, variant, }: {
+    children: React.ReactNode;
+    className?: string;
+    variant?: 'default' | 'outline';
+}): React.JSX.Element;
+export declare function DisclosureContent({ children, className, contentClassName, variant, }: {
+    children: React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+    variant?: 'default' | 'outline';
+}): React.JSX.Element;
+export type DisclosureBodyProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+export declare function DisclosureBody({ children, className }: DisclosureBodyProps): React.JSX.Element;
+declare const _default: {
+    Disclosure: typeof Disclosure;
+    DisclosureBody: typeof DisclosureBody;
+    DisclosureProvider: typeof DisclosureProvider;
+    DisclosureTrigger: typeof DisclosureTrigger;
+    DisclosureContent: typeof DisclosureContent;
+};
+export default _default;

package/dist/components/ui/disclosure.js

@@ -0,0 +1,138 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { AnimatePresence, m, MotionConfig } from 'motion/react';
+import * as React from 'react';
+import { createContext, useCallback, useContext, useId, useMemo, useState } from 'react';
+const DisclosureContext = createContext(undefined);
+/**
+ * What activating the trigger should do. Extracted as a pure function so the
+ * contract has something to test: `apps/web` has no browser test harness (only
+ * `renderToStaticMarkup`), so a click cannot be simulated, and this is the exact
+ * decision that was wrong before.
+ *
+ * `nextOpen` negates the value the disclosure is CURRENTLY RENDERING. The old
+ * implementation negated a private copy of it instead, which is how a click
+ * could resolve to the state the disclosure was already in and appear to do
+ * nothing at all.
+ */
+export function resolveDisclosureToggle(state) {
+    return { nextOpen: !state.open, writesInternalState: !state.isControlled };
+}
+/**
+ * Controlled OR uncontrolled, with exactly one source of truth for `open` —
+ * the same contract every Radix primitive in this codebase uses.
+ *
+ * This replaces a mirrored-state design that copied `open` into internal state
+ * and reconciled the two in a `useEffect`. That shape produced the reported
+ * "click does nothing, then it opens by itself" flakiness through four separate
+ * defects, all of which are structural rather than incidental:
+ *
+ *  1. `toggle` computed `!internalCopy`, not `!open`. Any moment the copy and
+ *     the prop disagreed, a click moved the disclosure the wrong way — or
+ *     landed on the value it already had, so nothing visibly happened.
+ *  2. The prop → copy sync ran in a PASSIVE effect, i.e. after paint. A
+ *     prop-driven open animated a frame late and looked spontaneous, and in an
+ *     exclusive accordion (session-scope-control.tsx) both sections were open
+ *     together for that frame.
+ *  3. `onOpenChange` was called from inside the `setState` updater. React
+ *     requires updaters to be pure and is free to invoke them more than once;
+ *     a parent whose handler toggles (`onOpenChange={() => toggleThing()}` —
+ *     what both session lists pass) then nets to zero and never moves.
+ *  4. `open` defaulted to `false`, so "controlled and closed" and "uncontrolled"
+ *     were indistinguishable and no caller could opt out of being controlled.
+ *
+ * Here `open` is read straight from whichever source owns it, so a controlled
+ * parent's change lands in the same commit as its own render, and `toggle`
+ * always derives from the value actually on screen.
+ */
+function DisclosureProvider({ children, open: openProp, defaultOpen = false, onOpenChange, variants, }) {
+    const isControlled = openProp !== undefined;
+    const contentId = useId();
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const open = isControlled ? openProp : uncontrolledOpen;
+    const toggle = useCallback(() => {
+        const { nextOpen, writesInternalState } = resolveDisclosureToggle({ open, isControlled });
+        if (writesInternalState)
+            setUncontrolledOpen(nextOpen);
+        // In the event handler, once — never inside a state updater.
+        onOpenChange?.(nextOpen);
+    }, [open, isControlled, onOpenChange]);
+    /**
+     * A fresh object here re-rendered every `useDisclosure()` consumer on every
+     * render of this provider, whether or not `open` had changed — and a session
+     * transcript nests two to three disclosures per tool row (the chain step, the
+     * tool's own collapsible, sometimes a group), so the churn multiplied by every
+     * row on screen.
+     */
+    const value = useMemo(() => ({ open, toggle, contentId, variants }), [open, toggle, contentId, variants]);
+    return _jsx(DisclosureContext.Provider, { value: value, children: children });
+}
+function useDisclosure() {
+    const context = useContext(DisclosureContext);
+    if (!context) {
+        throw new Error('useDisclosure must be used within a DisclosureProvider');
+    }
+    return context;
+}
+function DisclosureRoot({ className, children, }) {
+    const { open } = useDisclosure();
+    return (_jsx("div", { className: className, "data-state": open ? 'open' : 'closed', children: children }));
+}
+export function Disclosure({ open: openProp, defaultOpen, onOpenChange, children, className, transition, variants, variant = 'default', }) {
+    return (_jsx(MotionConfig, { transition: transition, children: _jsx(DisclosureProvider, { open: openProp, defaultOpen: defaultOpen, onOpenChange: onOpenChange, variants: variants, children: _jsxs(DisclosureRoot, { className: cn(variant === 'outline' && 'group border-border w-full rounded-md border shadow-none', className), children: [React.Children.toArray(children)[0], React.Children.toArray(children)[1]] }) }) }));
+}
+export function DisclosureTrigger({ children, className, variant = 'default', }) {
+    const { toggle, open, contentId } = useDisclosure();
+    return (_jsx(_Fragment, { children: React.Children.map(children, (child) => {
+            if (!React.isValidElement(child))
+                return child;
+            const typedChild = child;
+            const childClassName = typedChild.props.className;
+            return React.cloneElement(typedChild, {
+                onClick: toggle,
+                role: 'button',
+                'aria-expanded': open,
+                // The region is unmounted while collapsed, so only promise an id that
+                // is actually in the document.
+                'aria-controls': open ? contentId : undefined,
+                tabIndex: 0,
+                onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        toggle();
+                    }
+                },
+                className: cn(className, 'select-none', childClassName, variant === 'outline' &&
+                    'group-data-[state=open]:rounded-b-none group-data-[state=open]:border-b-0'),
+            });
+        }) }));
+}
+export function DisclosureContent({ children, className, contentClassName, variant = 'default', }) {
+    const { open, variants, contentId } = useDisclosure();
+    const BASE_VARIANTS = {
+        expanded: {
+            height: 'auto',
+            opacity: 1,
+        },
+        collapsed: {
+            height: 0,
+            opacity: 0,
+        },
+    };
+    const combinedVariants = {
+        expanded: { ...BASE_VARIANTS.expanded, ...variants?.expanded },
+        collapsed: { ...BASE_VARIANTS.collapsed, ...variants?.collapsed },
+    };
+    return (_jsx("div", { className: cn('overflow-hidden', variant === 'outline' && 'group-data-[state=open]:rounded-b-md', className), children: _jsx(AnimatePresence, { initial: false, children: open && (_jsx(m.div, { id: contentId, initial: "collapsed", animate: "expanded", exit: "collapsed", variants: combinedVariants, className: contentClassName, children: children })) }) }));
+}
+export function DisclosureBody({ children, className }) {
+    return _jsx("div", { className: cn('p-3 pt-0', className), children: children });
+}
+export default {
+    Disclosure,
+    DisclosureBody,
+    DisclosureProvider,
+    DisclosureTrigger,
+    DisclosureContent,
+};

package/dist/components/ui/dot-matrix/dotm-3x3-10.d.ts

@@ -0,0 +1,4 @@
+export declare const Dotm3x3_10: {
+    ({ pattern, dotShape, animated, hoverAnimated, speed, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-3x3-10.js

@@ -0,0 +1,29 @@
+'use client';
+import { createDotm3x3Component, isCenterCell3, outerRingClockwise3NormFromIndex, outerRingClockwise3OrderValue, wave3PathOpacityFromNorm, } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, index, row, col, reducedMotion, phase, }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    if (isCenterCell3(row, col)) {
+        if (reducedMotion || phase === 'idle') {
+            return { style: { opacity: 0.2 } };
+        }
+        return { className: 'dmx-core-pulse-3' };
+    }
+    const order = outerRingClockwise3OrderValue(index);
+    const path = outerRingClockwise3NormFromIndex(index);
+    const style = {
+        '--dmx-frame-order': order,
+        '--dmx-path': path,
+    };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: wave3PathOpacityFromNorm(path),
+            },
+        };
+    }
+    return { className: 'dmx-frame-chase-3', style };
+};
+export const Dotm3x3_10 = createDotm3x3Component('Dotm3x3_10', animationResolver, 1.75);

package/dist/components/ui/dot-matrix/dotm-3x3-12.d.ts

@@ -0,0 +1,4 @@
+export declare const Dotm3x3_12: {
+    ({ pattern, dotShape, animated, hoverAnimated, speed, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-3x3-12.js

@@ -0,0 +1,19 @@
+'use client';
+import { createDotm3x3Component } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, distanceFromCenter, reducedMotion, phase, }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const ring = Math.max(0, Math.min(2, Math.round(distanceFromCenter)));
+    const style = { '--dmx-distance': distanceFromCenter };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: 0.06 + (1 - ring / 2) * 0.82,
+            },
+        };
+    }
+    return { className: 'dmx-distance-ripple-3', style };
+};
+export const Dotm3x3_12 = createDotm3x3Component('Dotm3x3_12', animationResolver, 1.75);

package/dist/components/ui/dot-matrix/dotm-3x3-13.d.ts

@@ -0,0 +1,4 @@
+export declare const Dotm3x3_13: {
+    ({ pattern, dotShape, animated, hoverAnimated, speed, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};