@kortix/ui 0.0.0-stage → 0.14.4

package/dist/primitives/preview-image.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
+import * as React from 'react';
+import { Close } from '../icons/close.js';
+import { withPortalContainer } from '../lib/portal-container.js';
+import { cn } from '../lib/utils.js';
+import { Button } from './button.js';
+const PreviewImage = DialogPrimitive.Root;
+const PreviewImageTrigger = DialogPrimitive.Trigger;
+const PreviewImagePortal = withPortalContainer(DialogPrimitive.Portal);
+const PreviewImageClose = DialogPrimitive.Close;
+const PreviewImageOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('fixed inset-0 z-50 bg-black/40', className), ...props })));
+PreviewImageOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const MIN_ZOOM = 0.7;
+const DEFAULT_ZOOM = 1;
+const MAX_ZOOM = 2;
+const ZOOM_STEP = 0.1;
+const DEFAULT_ORIGIN = '50% 50%';
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const PreviewImageContent = React.forwardRef(({ className, fileContent, fileName, ...props }, ref) => {
+    const [zoomLevel, setZoomLevel] = React.useState(DEFAULT_ZOOM);
+    const [transformOrigin, setTransformOrigin] = React.useState(DEFAULT_ORIGIN);
+    React.useEffect(() => {
+        setZoomLevel(DEFAULT_ZOOM);
+        setTransformOrigin(DEFAULT_ORIGIN);
+    }, [fileContent]);
+    const getTransformOrigin = (event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        if (!rect.width || !rect.height) {
+            return DEFAULT_ORIGIN;
+        }
+        const x = ((event.clientX - rect.left) / rect.width) * 100;
+        const y = ((event.clientY - rect.top) / rect.height) * 100;
+        const xPercent = clamp(x, 0, 100);
+        const yPercent = clamp(y, 0, 100);
+        return `${xPercent}% ${yPercent}%`;
+    };
+    const handleWheelZoom = (event) => {
+        event.preventDefault();
+        setTransformOrigin(getTransformOrigin(event));
+        setZoomLevel((currentZoom) => {
+            const nextZoom = event.deltaY < 0 ? currentZoom + ZOOM_STEP : currentZoom - ZOOM_STEP;
+            return clamp(Number(nextZoom.toFixed(1)), MIN_ZOOM, MAX_ZOOM);
+        });
+    };
+    const handleImageClick = (event) => {
+        setTransformOrigin(getTransformOrigin(event));
+        setZoomLevel((currentZoom) => (currentZoom > DEFAULT_ZOOM ? DEFAULT_ZOOM : MAX_ZOOM));
+    };
+    return (_jsxs(PreviewImagePortal, { children: [_jsx(PreviewImageOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('fixed top-[50%] left-[50%] z-[99999] grid h-full w-full -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-4 shadow-lg duration-moderate sm:rounded-lg', className), ...props, children: [_jsx(VisuallyHidden.Root, { children: _jsx(DialogPrimitive.Title, { children: "Image preview" }) }), _jsx("div", { className: "absolute top-3 right-3 z-[60] flex gap-1", onClick: (event) => event.stopPropagation(), children: _jsx(PreviewImageClose, { asChild: true, children: _jsx(Button, { size: "icon", type: "button", "aria-label": "Close image preview", className: "text-background", children: _jsx(Close, { className: "size-4" }) }) }) }), _jsx("div", { className: "flex h-full max-h-[100vh] w-[100vw] items-center justify-center overflow-auto", onWheel: handleWheelZoom, onClick: handleImageClick, children: _jsx("div", { className: cn(zoomLevel > DEFAULT_ZOOM ? 'cursor-zoom-out' : 'cursor-zoom-in'), style: {
+                                transform: `scale(${zoomLevel})`,
+                                transformOrigin,
+                                transition: 'transform 200ms',
+                            }, children: fileContent ? (_jsx("img", { src: fileContent, alt: fileName || 'Image preview', width: 1920, height: 1080, className: "max-h-[100vh] w-auto object-contain" })) : null }) })] })] }));
+});
+PreviewImageContent.displayName = DialogPrimitive.Content.displayName;
+export { PreviewImage, PreviewImageClose, PreviewImageContent, PreviewImageOverlay, PreviewImagePortal, PreviewImageTrigger, };

package/dist/primitives/progress-ring.d.ts

@@ -0,0 +1,6 @@
+export declare function ProgressRing({ value, className, trackClassName, progressClassName, }: {
+    value: number;
+    className?: string;
+    trackClassName?: string;
+    progressClassName?: string;
+}): import("react").JSX.Element;

package/dist/primitives/progress-ring.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+const R = 7;
+const CIRCUMFERENCE = 2 * Math.PI * R;
+export function ProgressRing({ value, className, trackClassName = 'text-foreground/10', progressClassName = 'text-muted-foreground', }) {
+    const clamped = Math.max(0, Math.min(100, value));
+    const offset = CIRCUMFERENCE * (1 - clamped / 100);
+    return (_jsxs("svg", { viewBox: "0 0 18 18", className: cn('size-4 -rotate-90', className), fill: "none", children: [_jsx("circle", { cx: "9", cy: "9", r: R, stroke: "currentColor", strokeWidth: "2", className: trackClassName }), _jsx("circle", { cx: "9", cy: "9", r: R, stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", className: cn('transition-[stroke-dashoffset] duration-slower', progressClassName), strokeDasharray: CIRCUMFERENCE, strokeDashoffset: offset })] }));
+}

package/dist/primitives/progress.d.ts

@@ -0,0 +1,6 @@
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from 'react';
+declare function Progress({ className, indicatorClassName, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root> & {
+    indicatorClassName?: string;
+}): React.JSX.Element;
+export { Progress };

package/dist/primitives/progress.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { cn } from '../lib/utils.js';
+function Progress({ className, indicatorClassName, value, ...props }) {
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn('bg-primary/20 relative h-3 w-full overflow-hidden rounded-full', className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: cn('bg-primary h-full w-full flex-1 transition-transform duration-slow ease-out', indicatorClassName), style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
+}
+export { Progress };

package/dist/primitives/project-icon-picker.d.ts

@@ -0,0 +1,11 @@
+import type { EmojiSelection } from './emoji-picker.js';
+import type { GlyphSelection } from './glyph-picker.js';
+/** Start fetching both panels; safe to call repeatedly. */
+export declare function preloadProjectIconPicker(): void;
+export declare function ProjectIconPicker({ onEmojiSelect, onGlyphSelect, defaultTab, defaultColor, className, }: {
+    onEmojiSelect: (emoji: EmojiSelection) => void;
+    onGlyphSelect: (glyph: GlyphSelection) => void;
+    defaultTab?: 'emoji' | 'icon';
+    defaultColor?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/primitives/project-icon-picker.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazyClient } from '../lib/lazy-client.js';
+import { useState } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs.js';
+import { cn } from '../lib/utils.js';
+/**
+ * Emoji and Icon side by side, one popover.
+ *
+ * `EmojiPicker` is rendered exactly as `emoji-picker.tsx` exports it — no
+ * extra props, no wrapper markup around it. frimousse owns its search field
+ * as a compound child of `Frimousse.Root`; pulling that state out to share one
+ * search box across both tabs would mean either forking frimousse's internals
+ * or reimplementing emoji search from scratch. Two independent search fields,
+ * one per tab, is the tradeoff this component makes instead.
+ *
+ * The Icon tab owns `color` — the colour a NEW glyph pick will carry, not a
+ * property of any already-chosen icon — so it lives here, in the wrapper that
+ * outlives a single tab switch, rather than inside `GlyphPicker` itself,
+ * which would reset it every time the tab remounts.
+ *
+ * Radix only mounts the ACTIVE `TabsContent` (`Presence` gates on
+ * `forceMount || isSelected`), so switching to Icon is also the first moment
+ * `GlyphPicker` renders — cheap, since unlike `EmojiPicker` it fetches
+ * nothing.
+ */
+/**
+ * The two panels load on demand. The settings panel is mounted on every
+ * project page (project-shell.tsx) and renders this picker through
+ * ProjectIconField, so static imports put frimousse and the 202-glyph
+ * registry in the project home's largest chunk (338 KB decoded on dev,
+ * 2026-09-27) for a popover almost nobody opens. The placeholder has both
+ * panels' exact geometry (`h-[368px] w-full`), so the popover never resizes
+ * when a panel arrives; `preloadProjectIconPicker` fetches them before the
+ * popover opens.
+ */
+const loadEmojiPicker = () => import('./emoji-picker.js');
+const loadGlyphPicker = () => import('./glyph-picker.js');
+function PanelPlaceholder() {
+    return _jsx("div", { "aria-busy": "true", className: "h-[368px] w-full" });
+}
+const EmojiPicker = lazyClient(() => loadEmojiPicker().then((m) => m.EmojiPicker), {
+    fallback: _jsx(PanelPlaceholder, {}),
+});
+const GlyphPicker = lazyClient(() => loadGlyphPicker().then((m) => m.GlyphPicker), {
+    fallback: _jsx(PanelPlaceholder, {}),
+});
+/** Start fetching both panels; safe to call repeatedly. */
+export function preloadProjectIconPicker() {
+    void loadEmojiPicker();
+    void loadGlyphPicker();
+}
+export function ProjectIconPicker({ onEmojiSelect, onGlyphSelect, defaultTab = 'emoji', defaultColor = 'grey', className, }) {
+    const [color, setColor] = useState(defaultColor);
+    return (_jsxs(Tabs, { defaultValue: defaultTab, className: cn('w-full gap-0', className), children: [_jsx("div", { className: "border-border/60 border-b p-1", children: _jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "emoji", children: "Emoji" }), _jsx(TabsTrigger, { value: "icon", children: "Icon" })] }) }), _jsx(TabsContent, { value: "emoji", children: _jsx(EmojiPicker, { onEmojiSelect: onEmojiSelect }) }), _jsx(TabsContent, { value: "icon", children: _jsx(GlyphPicker, { color: color, onColorChange: setColor, onGlyphSelect: onGlyphSelect }) })] }));
+}

package/dist/primitives/radio-group.d.ts

@@ -0,0 +1,12 @@
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): React.JSX.Element;
+type RadioGroupItemProps = React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'outline';
+};
+declare function RadioGroupItem({ className, label, description, id, disabled, size, variant, ...props }: RadioGroupItemProps): React.JSX.Element;
+export { RadioGroup, RadioGroupItem };
+export type { RadioGroupItemProps };

package/dist/primitives/radio-group.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { cn } from '../lib/utils.js';
+function RadioGroup({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn('grid gap-1', className), ...props }));
+}
+const radioControlClassName = cn('peer aspect-square size-4 shrink-0 rounded-full border border-muted-foreground/60 bg-transparent', 'transition-[color,box-shadow,border-color,background-color]', 'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=checked]:border-foreground data-[state=checked]:bg-background data-[state=checked]:border-kortix-blue data-[state=checked]:border-4 ', 'aria-invalid:border-destructive');
+function RadioGroupItem({ className, label, description, id, disabled, size = 'md', variant = 'default', ...props }) {
+    const generatedId = React.useId();
+    const itemId = id ?? generatedId;
+    const hasCaption = label != null || description != null;
+    const control = (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", id: itemId, disabled: disabled, className: cn(radioControlClassName, !hasCaption && className, description != null && 'mt-[3px]'), ...props }));
+    if (!hasCaption) {
+        return control;
+    }
+    return (_jsxs("label", { htmlFor: itemId, className: cn('flex w-full cursor-pointer gap-3 rounded-md px-3 py-1.5 transition-colors', description != null ? 'items-start justify-start' : 'items-center justify-center', 'hover:bg-foreground/3', 'has-data-[state=checked]:bg-foreground/6 has-data-[state=checked]:hover:bg-foreground/6', 'has-focus-visible:ring-ring has-focus-visible:ring-offset-background has-focus-visible:ring-2 has-focus-visible:ring-offset-2', disabled && 'cursor-not-allowed opacity-50', className, size === 'sm' && 'px-2 py-1.5', size === 'md' && 'px-3 py-1.5', size === 'lg' && 'px-4 py-2.5', variant === 'outline' && 'border-border border'), children: [control, _jsxs("div", { className: cn('flex min-w-0 flex-1 flex-col', description != null ? 'justify-start' : 'justify-center'), children: [label != null && (_jsx("span", { className: cn('text-sm transition-[color,font-weight]', 'text-foreground', 'peer-data-[state=checked]:text-foreground peer-data-[state=checked]:font-medium', disabled && 'text-muted-foreground'), children: label })), description != null && (_jsx("span", { "data-slot": "radio-group-item-description", className: "text-muted-foreground block text-[length:var(--text-xs,0.8125rem)]", children: description }))] })] }));
+}
+export { RadioGroup, RadioGroupItem };

package/dist/primitives/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<HTMLSpanElement | HTMLElement | HTMLAnchorElement | HTMLImageElement | HTMLButtonElement | HTMLFormElement | HTMLDivElement | HTMLParagraphElement | HTMLInputElement | HTMLTextAreaElement | HTMLLabelElement | HTMLObjectElement | HTMLLinkElement | HTMLMapElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLIElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | 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/primitives/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/primitives/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/primitives/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/primitives/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/primitives/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/primitives/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/primitives/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/primitives/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/primitives/select.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { withPortalContainer } from '../lib/portal-container.js';
+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';
+const SelectPortal = withPortalContainer(SelectPrimitive.Portal);
+/**
+ * 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(SelectPortal, { 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/primitives/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/primitives/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/primitives/settings-row.d.ts

@@ -0,0 +1,54 @@
+/**
+ * The settings row — a label on the left, its control on the right, stacked
+ * with siblings inside one bordered group.
+ *
+ * **Why this exists.** Kortix settings panes stacked vertically: a section
+ * header, then its control underneath, then a gap, then the next header. That
+ * reads as a series of small announcements and makes even a three-field form
+ * feel long. Linear's settings — the reference Jay asked for — put the label
+ * and its control on ONE line, and group consecutive rows inside a single
+ * bordered box separated by hairlines. The eye scans one left-hand column of
+ * labels and one right-hand column of controls, so a form is read in two
+ * glances instead of six.
+ *
+ * **Why it is a group, not a bordered row.** The codebase already had the row
+ * itself — `Field orientation="horizontal"` — and it was being used with
+ * `variant="outline"`, giving every row its own border. Ten settings then read
+ * as ten separate cards. The missing piece was never the row; it was the
+ * container that lets rows share one border and one rhythm. So `SettingsRow`
+ * is a thin arrangement over `Field`'s existing horizontal orientation and its
+ * border-less `default` variant, not a reimplementation of it.
+ *
+ * ```tsx
+ * <SettingsRowGroup>
+ *   <SettingsRow label="Full name">
+ *     <Input className="h-8 w-56" value={name} onChange={…} />
+ *   </SettingsRow>
+ *   <SettingsRow label="Username" description="One word, like a nickname.">
+ *     <Input className="h-8 w-56" value={handle} onChange={…} />
+ *   </SettingsRow>
+ * </SettingsRowGroup>
+ * ```
+ */
+import * as React from 'react';
+/**
+ * The bordered container. Consecutive rows share one border and are separated
+ * by hairlines rather than gaps — `divide-y` rather than `space-y`, which is
+ * the whole visual difference between "a grouped form" and "a stack of cards".
+ *
+ * Flat with a border and no shadow, per the design system: elevation belongs
+ * to overlays, and this sits in the page flow.
+ */
+export declare function SettingsRowGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export interface SettingsRowProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    /** The left-hand label. Sentence case, no trailing colon. */
+    label: React.ReactNode;
+    /** Optional second line under the label, for the rule that is not obvious. */
+    description?: React.ReactNode;
+    /**
+     * The control. Kept `shrink-0` so a long label wraps rather than squeezing
+     * an input — the control's width is deliberate, the label's is not.
+     */
+    children?: React.ReactNode;
+}
+export declare function SettingsRow({ label, description, children, className, ...props }: SettingsRowProps): React.JSX.Element;

package/dist/primitives/settings-row.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field, FieldContent, FieldDescription, FieldTitle } from './field.js';
+import { cn } from '../lib/utils.js';
+/**
+ * The bordered container. Consecutive rows share one border and are separated
+ * by hairlines rather than gaps — `divide-y` rather than `space-y`, which is
+ * the whole visual difference between "a grouped form" and "a stack of cards".
+ *
+ * Flat with a border and no shadow, per the design system: elevation belongs
+ * to overlays, and this sits in the page flow.
+ */
+export function SettingsRowGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "settings-row-group", className: cn('bg-popover divide-border divide-y overflow-hidden rounded-md border', className), ...props }));
+}
+export function SettingsRow({ label, description, children, className, ...props }) {
+    return (_jsxs(Field, { orientation: "horizontal", 
+        // The control is ALWAYS vertically centred against the label block —
+        // with a description or without one. (Jay, 2026-08-12: "I want it to be
+        // coming always in the centre.")
+        //
+        // This row used to top-align whenever a description was present, on the
+        // theory that a control should meet the first line of a two-line label.
+        // In practice it reads as a control that slipped upward: the right-hand
+        // column stops being a column, because a `h-8` input sits at a different
+        // height in every row depending on whether that row's description
+        // happened to wrap. Centring restores the single scannable right-hand
+        // edge that is the whole point of the grouped-row shape.
+        //
+        // `!items-center` is required, not stylistic. `Field`'s horizontal
+        // variant carries `has-[>[data-slot=field-content]]:items-start`
+        // (`field.tsx:64`), and this row ALWAYS renders a `FieldContent` — so
+        // that rule always matches, and at specificity (0,2,0) it beats a plain
+        // `items-center` (0,1,0). Without the important flag the variant wins and
+        // every control top-aligns regardless of what is passed here.
+        // Below `sm` the row cannot hold a readable label column AND its
+        // control. The controls are fixed-width (`h-8 w-56` inputs) and the
+        // email value is `truncate`, which needs `min-w-0` on a parent that is
+        // `shrink-0` — so on a 390px phone the control took everything and the
+        // help text rendered 1-2 characters per line in a 15px column
+        // (KRTX-1313). Stack instead: label above, control below, which is the
+        // design system's own narrow-width rule. `sm` and up is untouched.
+        className: cn('!items-center gap-4 px-4 py-3', 'max-sm:!flex-col max-sm:gap-2 max-sm:!items-stretch', className), ...props, children: [_jsxs(FieldContent, { className: "min-w-0 flex-1 gap-0", children: [_jsx(FieldTitle, { className: "text-foreground text-sm font-medium", children: label }), description ? (_jsx(FieldDescription, { className: "text-muted-foreground text-xs leading-normal text-balance", children: description })) : null] }), children ? (_jsx("div", { className: "flex shrink-0 items-center justify-end gap-2 max-sm:w-full max-sm:justify-start", children: children })) : null] }));
+}

package/dist/primitives/settings-section-header.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+/**
+ * The one section header used across the Settings panel: title on the left,
+ * optional description under it, one action on the right. Destructive rows use
+ * this same component with a destructive-variant button in `action` — there is
+ * no separate danger-zone header.
+ */
+export declare function SettingsSectionHeader({ title, description, action, className, }: {
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/primitives/settings-section-header.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+/**
+ * The one section header used across the Settings panel: title on the left,
+ * optional description under it, one action on the right. Destructive rows use
+ * this same component with a destructive-variant button in `action` — there is
+ * no separate danger-zone header.
+ */
+export function SettingsSectionHeader({ title, description, action, className, }) {
+    return (_jsxs("div", { className: cn('flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4', className), children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1 text-base", children: [_jsx("h2", { className: "font-regular text-foreground-strong text-base text-balance lg:text-xl", children: title }), description ? (_jsx("p", { className: "font-regular text-foreground-weak max-w-[410px] text-sm text-pretty", children: description })) : null] }), action ? (_jsx("div", { className: "flex w-full min-w-0 items-center gap-4 sm:w-auto sm:justify-end", children: action })) : null] }));
+}