@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): React.JSX.Element;
+declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<HTMLAnchorElement | HTMLElement | HTMLButtonElement | HTMLFormElement | HTMLSpanElement | HTMLDivElement | HTMLParagraphElement | HTMLImageElement | HTMLInputElement | HTMLTextAreaElement | HTMLLabelElement | HTMLObjectElement | HTMLSlotElement | HTMLStyleElement | HTMLTitleElement | HTMLDialogElement | HTMLLinkElement | HTMLOptionElement | HTMLTableElement | HTMLTimeElement | HTMLMapElement | HTMLBaseElement | HTMLAreaElement | HTMLAudioElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLIElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOutputElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLMenuElement | HTMLTableCaptionElement | HTMLPictureElement>, "id" | "onResize"> & {
+    className?: string;
+    collapsedSize?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | undefined;
+    id?: string;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
+    onCollapse?: ResizablePrimitive.PanelOnCollapse;
+    onExpand?: ResizablePrimitive.PanelOnExpand;
+    onResize?: ResizablePrimitive.PanelOnResize;
+    order?: number;
+    style?: object;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & React.RefAttributes<ResizablePrimitive.ImperativePanelHandle>, "ref"> & React.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
+declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+    withHandle?: boolean;
+}): React.JSX.Element;
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/components/ui/resizable.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import { cn } from '../../lib/utils.js';
+function ResizablePanelGroup({ className, ...props }) {
+    return (_jsx(ResizablePrimitive.PanelGroup, { "data-slot": "resizable-panel-group", className: cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className), ...props }));
+}
+const ResizablePanel = React.forwardRef((props, ref) => {
+    return _jsx(ResizablePrimitive.Panel, { ref: ref, "data-slot": "resizable-panel", ...props });
+});
+ResizablePanel.displayName = 'ResizablePanel';
+function ResizableHandle({ withHandle, className, ...props }) {
+    return (_jsx(ResizablePrimitive.PanelResizeHandle, { "data-slot": "resizable-handle", className: cn('focus-visible:ring-ring relative flex cursor-col-resize items-center justify-center focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:cursor-row-resize [&[data-panel-group-direction=vertical]>div]:rotate-90', className), ...props, children: withHandle && (_jsx("div", { className: "group z-10 flex cursor-col-resize items-center justify-center", children: _jsx("span", { className: "bg-muted-foreground/40 group-hover:bg-muted-foreground/70 h-[15px] w-[3px] rounded-full transition-colors" }) })) }));
+}
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/components/ui/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): React.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): React.JSX.Element;
+export { ScrollArea, ScrollBar };

package/dist/components/ui/scroll-area.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '../../lib/utils.js';
+function ScrollArea({ className, children, ...props }) {
+    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn('relative', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!block", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollBar, { orientation: "horizontal" }), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+}
+function ScrollBar({ className, orientation = 'vertical', ...props }) {
+    return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn('flex touch-none p-px transition-colors select-none', orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent', orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent', className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "bg-border relative flex-1 cursor-grab rounded-full active:cursor-grabbing" }) }));
+}
+export { ScrollArea, ScrollBar };

package/dist/components/ui/section-card.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+/**
+ * Kortix <SectionCard>. Deprecated: new panels use <Card> and its slots
+ * (`@kortix/ui/card`). It stays for the screens that already render it.
+ *
+ * Composes the design-system <Card> (rounded-2xl surface) and adds the
+ * divided header every settings/list panel needs: a title, an optional
+ * muted count, a description, and a trailing action. Use `flush` to let a
+ * <List> sit edge-to-edge; otherwise the body gets standard padding.
+ * `tone="destructive"` is the standard danger-zone — no separate component.
+ *
+ *   <SectionCard title="Members" count={3} description="People with access"
+ *     action={<Button size="sm">Invite</Button>} flush>
+ *     <List>…</List>
+ *   </SectionCard>
+ *
+ *   <SectionCard tone="destructive" title="Danger zone"
+ *     description="Irreversible actions.">
+ *     …
+ *   </SectionCard>
+ */
+export interface SectionCardProps {
+    title?: React.ReactNode;
+    /** Muted "(n)" rendered next to the title. */
+    count?: number;
+    description?: React.ReactNode;
+    /** Trailing header slot — usually a button. */
+    action?: React.ReactNode;
+    tone?: 'default' | 'destructive';
+    /** Render children edge-to-edge (for <List>) instead of a padded body. */
+    flush?: boolean;
+    className?: string;
+    bodyClassName?: string;
+    children?: React.ReactNode;
+}
+/** @deprecated Use `Card` and its slots (`@kortix/ui/card`). */
+export declare function SectionCard({ title, count, description, action, tone, flush, className, bodyClassName, children, }: SectionCardProps): React.JSX.Element;

package/dist/components/ui/section-card.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Card } from './card.js';
+import { cn } from '../../lib/utils.js';
+/** @deprecated Use `Card` and its slots (`@kortix/ui/card`). */
+export function SectionCard({ title, count, description, action, tone = 'default', flush = false, className, bodyClassName, children, }) {
+    const destructive = tone === 'destructive';
+    const hasHeader = title != null || description != null || action != null;
+    // Danger zones stay calm: red is the brake, not the paint. The panel is a
+    // neutral surface with only a faint warm hairline to mark it — the title and
+    // description read normally, and the single red action lives on the final
+    // confirm (a ConfirmDialog/AlertDialog), never on the panel itself.
+    return (_jsxs(Card, { className: cn('gap-0 overflow-hidden py-0', destructive && 'border-destructive/25', className), children: [hasHeader && (_jsxs("div", { className: "border-border/60 flex items-start justify-between gap-3 border-b px-6 py-4", children: [_jsxs("div", { className: "min-w-0", children: [title != null && (_jsxs("h2", { className: "text-foreground text-base font-semibold", children: [title, count != null && (_jsxs("span", { className: "text-muted-foreground font-normal", children: [" (", count, ")"] }))] })), description != null && (_jsx("p", { className: "text-muted-foreground mt-0.5 text-xs", children: description }))] }), action != null && _jsx("div", { className: "shrink-0", children: action })] })), flush ? children : _jsx("div", { className: cn('px-6 py-5', bodyClassName), children: children })] }));
+}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface SectionProps {
+    label?: string;
+    action?: ReactNode;
+    /** Extra top spacing (defaults to mt-10 between sections) */
+    spacing?: 'tight' | 'default' | 'loose';
+    className?: string;
+    children: ReactNode;
+}
+export declare function Section({ label, action, spacing, className, children }: SectionProps): import("react").JSX.Element;

package/dist/components/ui/section.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Kortix <Section> — labelled section used inside PageShell.
+ *
+ * Uppercase micro-label, optional trailing action, generous top-margin
+ * between sections. No border box, no card chrome — the label and
+ * whitespace do all the visual work.
+ *
+ * <Section label="About" action={<Button size="sm">Edit</Button>}>
+ *   <p>Project description goes here.</p>
+ * </Section>
+ */
+import { cn } from '../../lib/utils.js';
+const SPACING = {
+    tight: 'mt-6',
+    default: 'mt-10',
+    loose: 'mt-14',
+};
+export function Section({ label, action, spacing = 'default', className, children }) {
+    return (_jsxs("section", { className: cn(SPACING[spacing], 'first:mt-0', className), children: [(label || action) && (_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [label && (_jsx("h3", { className: "text-muted-foreground/60 text-xs font-semibold tracking-[0.08em] uppercase", children: label })), action && _jsx("div", { className: "shrink-0", children: action })] })), children] }));
+}

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

@@ -0,0 +1,25 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as React from 'react';
+import { type MenuRowSize } from './menu-recipe.js';
+import { type TriggerVariantProps } from './trigger-variants.js';
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+export type SelectTriggerProps = Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'size'> & TriggerVariantProps & {
+    arrow?: boolean;
+};
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & TriggerVariantProps & {
+    arrow?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    /** Row height step — see `MENU_ROW_SIZE` in `./menu-recipe`. */
+    size?: MenuRowSize;
+    /** Renders below children in the dropdown only — not in the trigger. */
+    description?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/ui/select.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { floatingZ, useDialogDepth } from '../../lib/z-stack.js';
+import { CheckIcon as Check, CaretDownIcon as ChevronDown, CaretUpIcon as ChevronUp, } from '@phosphor-icons/react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as React from 'react';
+import { MENU_INDICATOR, MENU_INDICATOR_ICON, MENU_INSET_END, MENU_LABEL, MENU_PANEL_STATIC, MENU_SEPARATOR, menuRow, } from './menu-recipe.js';
+import { TRIGGER_CARET_CLASS, TRIGGER_ICON_SIZE, triggerVariants, } from './trigger-variants.js';
+/**
+ * A select is a menu: the same floating surface holding the same rows, and it
+ * shares both with the dropdown and context menu through `./menu-recipe`.
+ *
+ * Local to a select: `max-h-96` plus the scroll buttons, because the option
+ * list is data-length and a dropdown's is authored; and `min-w-56`, because a
+ * select is anchored to a trigger it should not visibly undercut.
+ *
+ * No enter/exit animation, the same as `DropdownMenuContent`: the list paints
+ * on the frame it mounts and unmounts on the frame it closes. See
+ * `dropdown-menu.tsx` for why.
+ */
+const SELECT_PANEL = cn(MENU_PANEL_STATIC, 'max-h-96 min-w-56 overflow-hidden');
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, variant, size, arrow = true, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn(triggerVariants({ variant, size }), className), ...props, children: [children, arrow && (_jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: cn(TRIGGER_CARET_CLASS, TRIGGER_ICON_SIZE[size ?? 'sm']) }) }))] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', // cursor-default: hover-scroll area, not a control.
+    className), ...props, children: _jsx(ChevronUp, { className: "size-4" }) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', // cursor-default: hover-scroll area, not a control.
+    className), ...props, children: _jsx(ChevronDown, { className: "size-4" }) })));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', style, ...props }, ref) => {
+    const depth = useDialogDepth();
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn(SELECT_PANEL, position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: { zIndex: floatingZ(depth), ...style }, position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn(position === 'popper' &&
+                        'h-(--radix-select-trigger-height) w-full min-w-[calc(var(--radix-select-trigger-width)-8px)]'), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+// Was `pl-8 text-sm font-semibold` — the `pl-8` reserved a left gutter for a
+// leading check that this select does not have (its indicator is at
+// `right-3`), so the label sat indented past every option under it.
+_jsx(SelectPrimitive.Label, { ref: ref, className: cn(MENU_LABEL, className), ...props })));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, size = 'sm', description, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, 
+    // `MENU_INSET_END` reserves the trailing slot on every row, checked or
+    // not, so a long label truncates before the check instead of running
+    // under it, and the check column is the same x on every row.
+    className: cn(menuRow(size, 'default'), MENU_INSET_END, description && 'items-start', className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", 
+            // Absolute inside a flex row: its static position follows the row's
+            // `items-*`, so it centres on a one-line row. On a described row it tops
+            // out, and `mt-0.5` centres the ~15px slot on the 20px first line.
+            className: cn(MENU_INDICATOR, 'absolute right-2', description && 'mt-0.5'), children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: MENU_INDICATOR_ICON }) }) }), description ? (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx(SelectPrimitive.ItemText, { children: children }), _jsx("span", { className: "text-muted-foreground max-w-64 text-xs whitespace-normal", children: description })] })) : (_jsx(SelectPrimitive.ItemText, { children: children }))] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn(MENU_SEPARATOR, className), ...props })));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

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

@@ -0,0 +1,4 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.JSX.Element;
+export { Separator };

package/dist/components/ui/separator.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '../../lib/utils.js';
+function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
+    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', className), ...props }));
+}
+export { Separator };

package/dist/components/ui/shader-safe.d.ts

@@ -0,0 +1,48 @@
+import { Component, type ReactNode } from 'react';
+/**
+ * One-shot WebGL2 capability probe. Paper Shaders throws at mount when
+ * `getContext('webgl2')` returns null, and its ShaderMount calls
+ * `getAttribLocation(null, …)` when shader compilation fails silently —
+ * both recurring prod errors on GPUs/browsers without (working) WebGL2.
+ *
+ * `getSupportedExtensions` is a THIRD such null-context crash path: Paper
+ * Shaders' shader-mount `useEffect`/rAF callback calls
+ * `gl.getSupportedExtensions()` on a context that became `null` after a
+ * context-loss / GPU-blacklist event (the probe canvas may return a non-null
+ * context at mount that then fails on real use). A throw inside that async
+ * callback ESCAPES the `<ShaderSafe>` error boundary (which only catches
+ * render-phase throws via `getDerivedStateFromError`) → global error → Sentry
+ * → Better Stack (Better Stack pattern `34127fa4…`, call site `new b2` in
+ * `app:///_next/static/chunks/c76173f0.…`, prod, 2 occurrences). So the probe
+ * must EXERCISE `getSupportedExtensions` itself: if it throws or returns null
+ * on the probe canvas, treat WebGL2 as unsupported and fall back BEFORE the
+ * throw can happen at render time. The call is cheap and one-shot (memoized).
+ */
+export declare function supportsWebGL2(): boolean;
+/**
+ * Test-only escape hatch: clears the one-shot `webgl2Support` memo so each
+ * unit test can exercise a fresh probe against a stubbed `document`/`window`.
+ * Not imported anywhere in app code.
+ */
+export declare function __resetWebGL2ProbeForTests(): void;
+interface ShaderSafeProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+interface ShaderSafeState {
+    failed: boolean;
+    mounted: boolean;
+}
+/**
+ * Renders shader children only after mount (no SSR/hydration mismatch) and
+ * only when WebGL2 works; any runtime shader crash (context loss, compile
+ * failure, texture fetch rejection) degrades to the fallback instead of a
+ * client-side error. Decorative canvases must never take the page down.
+ */
+export declare class ShaderSafe extends Component<ShaderSafeProps, ShaderSafeState> {
+    state: ShaderSafeState;
+    static getDerivedStateFromError(): Partial<ShaderSafeState>;
+    componentDidMount(): void;
+    render(): ReactNode;
+}
+export {};

package/dist/components/ui/shader-safe.js

@@ -0,0 +1,74 @@
+'use client';
+import { Component } from 'react';
+let webgl2Support = null;
+/**
+ * One-shot WebGL2 capability probe. Paper Shaders throws at mount when
+ * `getContext('webgl2')` returns null, and its ShaderMount calls
+ * `getAttribLocation(null, …)` when shader compilation fails silently —
+ * both recurring prod errors on GPUs/browsers without (working) WebGL2.
+ *
+ * `getSupportedExtensions` is a THIRD such null-context crash path: Paper
+ * Shaders' shader-mount `useEffect`/rAF callback calls
+ * `gl.getSupportedExtensions()` on a context that became `null` after a
+ * context-loss / GPU-blacklist event (the probe canvas may return a non-null
+ * context at mount that then fails on real use). A throw inside that async
+ * callback ESCAPES the `<ShaderSafe>` error boundary (which only catches
+ * render-phase throws via `getDerivedStateFromError`) → global error → Sentry
+ * → Better Stack (Better Stack pattern `34127fa4…`, call site `new b2` in
+ * `app:///_next/static/chunks/c76173f0.…`, prod, 2 occurrences). So the probe
+ * must EXERCISE `getSupportedExtensions` itself: if it throws or returns null
+ * on the probe canvas, treat WebGL2 as unsupported and fall back BEFORE the
+ * throw can happen at render time. The call is cheap and one-shot (memoized).
+ */
+export function supportsWebGL2() {
+    if (typeof window === 'undefined')
+        return false;
+    if (webgl2Support !== null)
+        return webgl2Support;
+    try {
+        const ctx = document.createElement('canvas').getContext('webgl2');
+        if (!ctx) {
+            webgl2Support = false;
+        }
+        else {
+            // Exercise the exact call Paper Shaders makes on the context. A GPU that
+            // returns a non-null context but fails on real use (context loss,
+            // blacklisted driver, stripped WebView) throws here or returns null —
+            // both mean WebGL2 is not usable for decorative shaders, so fall back.
+            webgl2Support = ctx.getSupportedExtensions() !== null;
+        }
+    }
+    catch {
+        webgl2Support = false;
+    }
+    return webgl2Support;
+}
+/**
+ * Test-only escape hatch: clears the one-shot `webgl2Support` memo so each
+ * unit test can exercise a fresh probe against a stubbed `document`/`window`.
+ * Not imported anywhere in app code.
+ */
+export function __resetWebGL2ProbeForTests() {
+    webgl2Support = null;
+}
+/**
+ * Renders shader children only after mount (no SSR/hydration mismatch) and
+ * only when WebGL2 works; any runtime shader crash (context loss, compile
+ * failure, texture fetch rejection) degrades to the fallback instead of a
+ * client-side error. Decorative canvases must never take the page down.
+ */
+export class ShaderSafe extends Component {
+    state = { failed: false, mounted: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidMount() {
+        this.setState({ mounted: true });
+    }
+    render() {
+        const { failed, mounted } = this.state;
+        if (!mounted || failed || !supportsWebGL2())
+            return this.props.fallback ?? null;
+        return this.props.children;
+    }
+}

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

@@ -0,0 +1,32 @@
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { type TriggerVariantProps } from './trigger-variants.js';
+declare const Sheet: ({ open, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) => React.JSX.Element;
+declare const SheetTrigger: ({ className, variant, size, asChild, ...props }: Omit<React.ComponentProps<typeof SheetPrimitive.Trigger>, "size"> & TriggerVariantProps) => React.JSX.Element;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "left" | "right" | "bottom" | "top" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+    showCloseButton?: boolean;
+    overlayClassName?: string;
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const SheetBody: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, };

package/dist/components/ui/sheet.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
+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 { DialogDepthProvider, dialogContentZ, dialogOverlayZ, useDialogDepth, useDialogRootLayer, } from '../../lib/z-stack.js';
+import { buttonVariants } from './button.js';
+import { triggerVariants } from './trigger-variants.js';
+const Sheet = ({ open, defaultOpen, onOpenChange, ...props }) => {
+    const layer = useDialogRootLayer({ open, defaultOpen, onOpenChange });
+    return (_jsx(DialogDepthProvider, { depth: layer.depth, children: _jsx(SheetPrimitive.Root, { ...props, open: layer.open, onOpenChange: layer.onOpenChange }) }));
+};
+const SheetTrigger = ({ className, variant, size, asChild, ...props }) => (_jsx(SheetPrimitive.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 SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = React.forwardRef(({ className, style, ...props }, ref) => {
+    const depth = useDialogDepth();
+    return (_jsx(SheetPrimitive.Overlay, { 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/80', className), style: { zIndex: dialogOverlayZ(depth), ...style }, ...props, ref: ref }));
+});
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const sheetVariants = cva('fixed flex min-h-0 flex-col gap-4 overflow-hidden bg-sidebar p-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out h-[calc(100vh-1.4rem)]', {
+    variants: {
+        side: {
+            top: 'inset-x-0 top-0 border-b-[1.5px] border-border/40 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+            bottom: 'inset-x-0 bottom-0 border-t-[1.5px] border-border/40 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+            left: 'inset-y-0 left-0 h-full w-full md:w-3/4 border-r-[1.5px] border-border/40 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+            right: 'inset-y-0 right-0 h-full md:h-[calc(100vh-1.4rem)] w-full md:w-3/4 border-[1.5px] md:rounded-lg border-border/40 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm md:m-[0.7rem]',
+        },
+    },
+    defaultVariants: {
+        side: 'right',
+    },
+});
+const SheetContent = React.forwardRef(({ side = 'right', className, children, showCloseButton = true, overlayClassName, style, ...props }, ref) => {
+    const depth = useDialogDepth();
+    const strings = useUiStrings();
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, { className: overlayClassName }), _jsxs(SheetPrimitive.Content, { ref: ref, className: cn(sheetVariants({ side }), className), style: { zIndex: dialogContentZ(depth), ...style }, ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { className: cn('absolute top-4 right-4', buttonVariants({ variant: 'ghost', size: 'icon' })), children: [_jsx(Close, { className: "size-[1.15rem] stroke-0" }), _jsx("span", { className: "sr-only", children: strings.close })] }))] })] }));
+});
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+const SheetHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex shrink-0 flex-col space-y-2 text-center sm:text-left', className), ...props }));
+SheetHeader.displayName = 'SheetHeader';
+const SheetFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex shrink-0 flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
+SheetFooter.displayName = 'SheetFooter';
+const SheetBody = ({ className, ...props }) => (_jsx("div", { className: cn('flex min-h-0 w-full flex-1 flex-col items-start justify-start gap-4 overflow-y-auto py-6', className), ...props }));
+SheetBody.displayName = 'SheetBody';
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Title, { ref: ref, className: cn('text-foreground text-lg font-semibold', className), ...props })));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Description, { ref: ref, className: cn('text-muted-foreground text-sm', className), ...props })));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, };

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

@@ -0,0 +1,72 @@
+import * as React from 'react';
+declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
+declare const SIDEBAR_COOKIE_MAX_AGE: number;
+declare const SIDEBAR_WIDTH = "20rem";
+declare const SIDEBAR_WIDTH_MOBILE = "18rem";
+declare const SIDEBAR_WIDTH_ICON = "1.6rem";
+declare const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+/**
+ * How long the panel keeps its DOCKED geometry after the sidebar collapses.
+ * Mirrors `duration-[240ms]` on the container below — the timer has to outlast
+ * the transform it covers, or the flyout geometry lands while the panel is
+ * still on screen and you see the pop this whole mechanism exists to remove.
+ * One number, two places, asserted against each other in `sidebar.test.tsx`.
+ */
+declare const SIDEBAR_UNDOCK_MS = 240;
+/** Keyboard resize step on the rail. Shift multiplies it. */
+declare const SIDEBAR_RESIZE_STEP_PX = 16;
+declare const SIDEBAR_RESIZE_STEP_COARSE_PX = 64;
+/**
+ * How a toggle was triggered. Either state it (`{ instant: true }`) or hand the
+ * click event straight through — a click synthesized by Enter/Space reports
+ * `detail === 0`, so `onClick={toggleSidebar}` makes every keyboard-activated
+ * toggle instant for free.
+ */
+export type SidebarToggleOptions = {
+    instant?: boolean;
+    detail?: number;
+};
+declare const resolveInstant: (options?: SidebarToggleOptions) => boolean;
+type SidebarContextProps = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: (options?: SidebarToggleOptions) => void;
+    /**
+     * True for the frames covering a toggle that must not animate. Set by every
+     * keyboard-initiated toggle; see the note on `toggleSidebar` above.
+     */
+    instantToggle: boolean;
+    /** Collapsed-only hover flyout: the sidebar floats over the content while
+     *  the pointer is near the left edge or on the panel itself. `open` stays
+     *  false the whole time, so a toggle click while peeking docks it open. */
+    peek: boolean;
+    peekEnter: () => void;
+    peekLeave: () => void;
+    /** Pin the flyout open while a menu/popover anchored in the panel is open —
+     *  its content portals outside the panel, so hovering it would otherwise
+     *  collapse the flyout. Balanced: `holdPeek(true)` on open, `false` on close. */
+    holdPeek: (held: boolean) => void;
+    /** Current docked width in px — the resolved value of `--sidebar-width`. */
+    width: number;
+    /** Clamp, apply, and persist a new width. One render, one cookie write. */
+    setWidth: (width: number) => void;
+    /**
+     * Paint a width straight onto the wrapper's CSS variable, with no React
+     * render. Used for the duration of a rail drag; `setWidth` then commits the
+     * final value once on pointer-up.
+     */
+    previewWidth: (width: number) => void;
+};
+export declare const SidebarContext: React.Context<SidebarContextProps | null>;
+declare function useSidebar(): SidebarContextProps;
+/** Same context as `useSidebar`, but returns `null` outside a
+ *  `SidebarProvider` instead of throwing. For callers that can genuinely
+ *  render on both sides of the boundary — e.g. the Easy panel, which also
+ *  mounts on /debug/tools with no provider at all. */
+declare function useOptionalSidebar(): SidebarContextProps | null;
+export { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_RESIZE_STEP_COARSE_PX, SIDEBAR_RESIZE_STEP_PX, SIDEBAR_UNDOCK_MS, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, resolveInstant, useOptionalSidebar, useSidebar, };
+export type { SidebarContextProps };

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

@@ -0,0 +1,36 @@
+'use client';
+import * as React from 'react';
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '20rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '1.6rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+/**
+ * How long the panel keeps its DOCKED geometry after the sidebar collapses.
+ * Mirrors `duration-[240ms]` on the container below — the timer has to outlast
+ * the transform it covers, or the flyout geometry lands while the panel is
+ * still on screen and you see the pop this whole mechanism exists to remove.
+ * One number, two places, asserted against each other in `sidebar.test.tsx`.
+ */
+const SIDEBAR_UNDOCK_MS = 240;
+/** Keyboard resize step on the rail. Shift multiplies it. */
+const SIDEBAR_RESIZE_STEP_PX = 16;
+const SIDEBAR_RESIZE_STEP_COARSE_PX = 64;
+const resolveInstant = (options) => options?.instant ?? options?.detail === 0;
+export const SidebarContext = React.createContext(null);
+function useSidebar() {
+    const context = React.useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebar must be used within a SidebarProvider.');
+    }
+    return context;
+}
+/** Same context as `useSidebar`, but returns `null` outside a
+ *  `SidebarProvider` instead of throwing. For callers that can genuinely
+ *  render on both sides of the boundary — e.g. the Easy panel, which also
+ *  mounts on /debug/tools with no provider at all. */
+function useOptionalSidebar() {
+    return React.useContext(SidebarContext);
+}
+export { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_RESIZE_STEP_COARSE_PX, SIDEBAR_RESIZE_STEP_PX, SIDEBAR_UNDOCK_MS, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, resolveInstant, useOptionalSidebar, useSidebar, };

package/dist/components/ui/sidebar-menu-primitives.d.ts

@@ -0,0 +1,38 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { TooltipContent } from './tooltip.js';
+declare function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<'div'> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<'button'> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>): React.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | "success" | "primary" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
+declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}): React.JSX.Element;
+declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<'div'> & {
+    showIcon?: boolean;
+}): React.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>): React.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
+declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.ComponentProps<'a'> & {
+    asChild?: boolean;
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+}): React.JSX.Element;
+export { SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, };