@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

package/dist/components/ui/glyph-tint.js

@@ -0,0 +1,93 @@
+/**
+ * The tint a project's GLYPH wears.
+ *
+ * Same treatment as an emoji tile — a pale `--color-glyph-fill-*` under a 1px
+ * `--color-glyph-ring-*` inset ring — so a glyph project and an emoji project
+ * read as one family in the grid. The difference is where the hue comes from:
+ * an emoji's is DERIVED from the glyph (emoji-tint.ts), a glyph's is CHOSEN by
+ * the user and stored alongside the name.
+ *
+ * The ring token also paints the glyph itself. A monochrome icon has no colour
+ * of its own, so the colour the user picked has to be visible somewhere the eye
+ * lands, and a 1px ring alone is too quiet to carry it.
+ */
+import { PROJECT_GLYPH_COLORS } from '../../_vendor/kortix-shared.js';
+/**
+ * Every class below is a LITERAL string. Do not build one with a template
+ * literal or a .map(): Tailwind v4 extracts class names by scanning source
+ * TEXT, so an interpolated name emits no CSS at all and the tints silently
+ * never paint. That has already happened once on this feature.
+ *
+ * There is no `dark:` set — each token is a light-dark() pair and :root / .dark
+ * set color-scheme, so one class covers both themes.
+ *
+ * `border-0` is part of the tint, not the host's business: both hosts bring a
+ * 1px border of their own (EntityAvatar's base class list, Button's `outline`
+ * variant) and it would sit outside the inset ring as a grey second edge.
+ */
+const TINT = {
+    grey: 'border-0 bg-glyph-fill-grey inset-ring-1 inset-ring-glyph-ring-grey',
+    red: 'border-0 bg-glyph-fill-red inset-ring-1 inset-ring-glyph-ring-red',
+    orange: 'border-0 bg-glyph-fill-orange inset-ring-1 inset-ring-glyph-ring-orange',
+    yellow: 'border-0 bg-glyph-fill-yellow inset-ring-1 inset-ring-glyph-ring-yellow',
+    lime: 'border-0 bg-glyph-fill-lime inset-ring-1 inset-ring-glyph-ring-lime',
+    blue: 'border-0 bg-glyph-fill-blue inset-ring-1 inset-ring-glyph-ring-blue',
+    purple: 'border-0 bg-glyph-fill-purple inset-ring-1 inset-ring-glyph-ring-purple',
+    magenta: 'border-0 bg-glyph-fill-magenta inset-ring-1 inset-ring-glyph-ring-magenta',
+};
+/**
+ * The resting fill again, under `hover:`.
+ *
+ * Only an INTERACTIVE host needs it. Button's `outline` variant carries
+ * `hover:bg-foreground/5`, and a `:hover` rule outranks the resting
+ * `bg-glyph-fill-*` on specificity, so hovering the trigger would wipe the tint
+ * to a neutral wash. Restating the fill at the same modifier is what holds it.
+ */
+const TINT_HOVER = {
+    grey: 'hover:bg-glyph-fill-grey',
+    red: 'hover:bg-glyph-fill-red',
+    orange: 'hover:bg-glyph-fill-orange',
+    yellow: 'hover:bg-glyph-fill-yellow',
+    lime: 'hover:bg-glyph-fill-lime',
+    blue: 'hover:bg-glyph-fill-blue',
+    purple: 'hover:bg-glyph-fill-purple',
+    magenta: 'hover:bg-glyph-fill-magenta',
+};
+/** The glyph's own colour — the ring token, not the fill. */
+const FOREGROUND = {
+    grey: 'text-glyph-ring-grey',
+    red: 'text-glyph-ring-red',
+    orange: 'text-glyph-ring-orange',
+    yellow: 'text-glyph-ring-yellow',
+    lime: 'text-glyph-ring-lime',
+    blue: 'text-glyph-ring-blue',
+    purple: 'text-glyph-ring-purple',
+    magenta: 'text-glyph-ring-magenta',
+};
+/**
+ * Unknown colours resolve to grey rather than to an empty string.
+ *
+ * An empty string leaves an untinted, unringed tile, which reads as a rendering
+ * bug. Grey is a real member of the palette, so the fallback is
+ * indistinguishable from a deliberate choice. The server rejects colours
+ * outside the palette, so this only fires on stale cached data or a hand-edited
+ * row — exactly the cases where failing quietly and legibly is right.
+ */
+const FALLBACK = 'grey';
+function resolve(color) {
+    return PROJECT_GLYPH_COLORS.includes(color)
+        ? color
+        : FALLBACK;
+}
+/** The tile: fill + 1px inset ring, in the chosen colour. */
+export function glyphTint(color) {
+    return TINT[resolve(color)];
+}
+/** Holds `glyphTint`'s fill through a host variant's own hover background. */
+export function glyphTintHover(color) {
+    return TINT_HOVER[resolve(color)];
+}
+/** The glyph itself, in the ring colour. */
+export function glyphForeground(color) {
+    return FOREGROUND[resolve(color)];
+}

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

@@ -0,0 +1,14 @@
+import { Tooltip } from './tooltip.js';
+export type HintProps = {
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    alignOffset?: number;
+    className?: string;
+    content?: React.ReactNode;
+} & React.ComponentProps<typeof Tooltip>;
+declare const Hint: ({ label, children, className, side, align, sideOffset, alignOffset, content, ...props }: HintProps) => import("react").JSX.Element;
+export { Hint };
+export default Hint;

package/dist/components/ui/hint.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip.js';
+const Hint = ({ label, children, className, side = 'right', align = 'center', sideOffset = 10, alignOffset = 10, content, ...props }) => {
+    return (
+    // Own provider, same 300ms delay as the app root's: Radix Tooltip.Root
+    // throws without one, and Hint rides along into trees rendered outside
+    // the app shell (SSR tests, portals). Nesting under the root provider is
+    // supported and harmless.
+    _jsx(TooltipProvider, { delayDuration: 300, children: _jsxs(Tooltip, { ...props, children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, className: className, children: label ? label : content })] }) }));
+};
+export { Hint };
+export default Hint;

package/dist/components/ui/histogram-bars.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from 'react';
+/**
+ * The card's left offset in px: centred on bar `index` of `count` equal bars,
+ * clamped to `[0, stripWidth - cardWidth]` so it never clips at an edge.
+ */
+export declare function histogramCardOffset(index: number, count: number, stripWidth: number, cardWidth: number): number;
+/** Where the hover card is and whether it is out. */
+export interface CardState {
+    visible: boolean;
+    /** The bucket it shows; kept while it fades out. */
+    index: number | null;
+    /** Animate `translateX` to the next bucket (false: jump, as on first show). */
+    sliding: boolean;
+}
+export declare const HIDDEN_CARD: CardState;
+/**
+ * The card's next state when the (debounced) hovered bucket changes:
+ * - pointer gone (`null`): hide, keep the last bucket for the fade-out;
+ * - card out: slide to the new bucket, an empty one too (it then reads "no runs");
+ * - card hidden: open on a bucket with data, in place, with no slide;
+ *   a first hover on an empty bucket opens nothing.
+ */
+export declare function nextCardState(prev: CardState, shown: number | null, isEmpty: (index: number) => boolean): CardState;
+export interface HistogramBar {
+    key: string | number;
+    ariaLabel: string;
+    /** No data in this bucket: a first hover opens no card; an open card reads it in one line. */
+    empty: boolean;
+    /** The drawn bar, inside a `group/bar` button that fills its slot. */
+    bar: ReactNode;
+}
+export declare function HistogramBars({ bars, onSelect, renderCard, className, }: {
+    bars: HistogramBar[];
+    onSelect?: (index: number) => void;
+    renderCard: (index: number) => ReactNode;
+    /** The strip's own classes: height, alignment, gap. */
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/ui/histogram-bars.js

@@ -0,0 +1,93 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The bar strip and hover card of a time histogram, shared by the Models page
+ * Logs histogram (`LogHistogram`) and the trigger Runs histogram
+ * (`RunHistogram`). The caller draws each bar and the card's content; this
+ * owns the hover behaviour:
+ *
+ * - The bar highlight follows the pointer at once (CSS `group-hover/bar`).
+ * - The hovered bucket is debounced (70 ms), so a sweep across the bars does
+ *   not rebuild the card on every bar it crosses.
+ * - The card is ONE element. It moves between buckets by `translateX`,
+ *   clamped so it never leaves the strip, and fades in with a 4 px y nudge.
+ *   Opening from hidden does not slide from the last bucket. Reduced motion:
+ *   opacity only.
+ * - The card hides only when the pointer leaves the chart (or focus leaves
+ *   it). Moving between bars never hides it: it slides by `translateX` (+X
+ *   right, −X left), and a CSS transition retargets mid-slide. Re-entering
+ *   fades it in at the bar, with no slide from the old spot.
+ * - A first hover on an empty bucket opens nothing; an open card passing over
+ *   one stays and shows the caller's one-line empty content.
+ * - Keyboard focus on a bar opens the same card.
+ *
+ * Motion: 150 ms (`--duration-normal`) on `--ease-default`, transform and
+ * opacity only (animations-dev: tooltips 125–200 ms, ease-out family).
+ */
+import { useDebounce } from '../../hooks/use-debounce.js';
+import { cn } from '../../lib/utils.js';
+import { useEffect, useRef, useState } from 'react';
+/** How long the pointer has to rest on a bucket before the card follows it. */
+const HOVER_DEBOUNCE_MS = 70;
+/**
+ * The card's left offset in px: centred on bar `index` of `count` equal bars,
+ * clamped to `[0, stripWidth - cardWidth]` so it never clips at an edge.
+ */
+export function histogramCardOffset(index, count, stripWidth, cardWidth) {
+    if (count < 1 || stripWidth <= 0)
+        return 0;
+    const centre = ((index + 0.5) / count) * stripWidth;
+    const max = Math.max(0, stripWidth - cardWidth);
+    return Math.min(max, Math.max(0, centre - cardWidth / 2));
+}
+export const HIDDEN_CARD = { visible: false, index: null, sliding: false };
+/**
+ * The card's next state when the (debounced) hovered bucket changes:
+ * - pointer gone (`null`): hide, keep the last bucket for the fade-out;
+ * - card out: slide to the new bucket, an empty one too (it then reads "no runs");
+ * - card hidden: open on a bucket with data, in place, with no slide;
+ *   a first hover on an empty bucket opens nothing.
+ */
+export function nextCardState(prev, shown, isEmpty) {
+    if (shown === null)
+        return { ...prev, visible: false, sliding: false };
+    if (prev.visible)
+        return { visible: true, index: shown, sliding: true };
+    if (isEmpty(shown))
+        return prev;
+    return { visible: true, index: shown, sliding: false };
+}
+export function HistogramBars({ bars, onSelect, renderCard, className, }) {
+    const [active, setActive] = useState(null);
+    const { debouncedValue: shown } = useDebounce(active, HOVER_DEBOUNCE_MS);
+    // Derived from the previous render (React's "adjust state while rendering"):
+    // the card follows the debounced bucket through `nextCardState`.
+    const [card, setCard] = useState(HIDDEN_CARD);
+    const [prevShown, setPrevShown] = useState(null);
+    if (shown !== prevShown) {
+        setPrevShown(shown);
+        setCard(nextCardState(card, shown, (i) => bars[i]?.empty ?? true));
+    }
+    const cardIndex = card.index;
+    const sliding = card.sliding;
+    // Widths come from a ResizeObserver, so the clamp follows a resized column.
+    const [widths, setWidths] = useState({ strip: 0, card: 0 });
+    const stripRef = useRef(null);
+    const cardRef = useRef(null);
+    useEffect(() => {
+        const strip = stripRef.current;
+        const card = cardRef.current;
+        if (!strip || !card || typeof ResizeObserver === 'undefined')
+            return;
+        const measure = () => setWidths({ strip: strip.offsetWidth, card: card.offsetWidth });
+        const observer = new ResizeObserver(measure);
+        observer.observe(strip);
+        observer.observe(card);
+        return () => observer.disconnect();
+    }, []);
+    const x = cardIndex === null ? 0 : histogramCardOffset(cardIndex, bars.length, widths.strip, widths.card);
+    const visible = card.visible;
+    return (_jsxs("div", { className: "relative", onPointerLeave: () => setActive(null), children: [_jsx("div", { ref: stripRef, className: className, children: bars.map((b, i) => (_jsx("button", { type: "button", "aria-label": b.ariaLabel, onClick: () => onSelect?.(i), onPointerEnter: () => setActive(i), onFocus: () => setActive(i), onBlur: () => setActive(null), className: "group/bar flex h-full min-w-0 flex-1 cursor-pointer items-end outline-none", children: b.bar }, b.key))) }), _jsx("div", { ref: cardRef, "aria-hidden": true, style: { transform: `translateX(${x}px)` }, className: cn('pointer-events-none absolute top-full left-0 z-20 mt-1.5 w-60', 'bg-popover text-popover-foreground border-border rounded-lg border p-3 shadow-md', 'ease-default duration-(--duration-normal)', sliding ? 'transition-[transform,opacity,translate]' : 'transition-[opacity,translate]', 'motion-reduce:transition-opacity', visible
+                    ? 'translate-y-0 opacity-100'
+                    : '-translate-y-1 opacity-0 motion-reduce:translate-y-0'), children: cardIndex !== null && cardIndex < bars.length ? renderCard(cardIndex) : null })] }));
+}

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

@@ -0,0 +1,28 @@
+import { HoverCard as HoverCardPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
+declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): React.JSX.Element;
+/**
+ * The fifth panel to join `FLOATING_PANEL`.
+ *
+ * `menu-recipe.ts` reconciled the dropdown, context menu, select and popover
+ * surfaces onto one description of "a hairline-bordered card lifted off the
+ * canvas". This one was missed and kept its own `rounded-md` + `shadow-sm`,
+ * so a hover card sat a step flatter and 2px tighter than every other floating
+ * panel — which is why `token-progress.tsx` had to patch `shadow-md` back on at
+ * its call site. The recipe owns the surface and the enter/exit now.
+ *
+ * Two things stay local because they are this primitive's own: the transform
+ * origin (the Radix variable is named per primitive) and the `motion-reduce`
+ * guard, which no other panel ships and which must survive the move.
+ *
+ * `animated={false}` takes `FLOATING_PANEL_SURFACE` instead, the same split
+ * `MENU_PANEL_STATIC` makes for submenus, and for the same reason: a panel that
+ * opens INTO the path the pointer is already travelling spends its enter
+ * animation moving content away from the cursor, which reads as the card
+ * lagging behind the hand rather than as polish.
+ */
+declare function HoverCardContent({ className, align, sideOffset, animated, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content> & {
+    animated?: boolean;
+}): React.JSX.Element;
+export { HoverCard, HoverCardContent, HoverCardTrigger };

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

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HoverCard as HoverCardPrimitive } from 'radix-ui';
+import { cn } from '../../lib/utils.js';
+import { FLOATING_PANEL, FLOATING_PANEL_SURFACE } from './menu-recipe.js';
+function HoverCard({ ...props }) {
+    return _jsx(HoverCardPrimitive.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({ ...props }) {
+    return _jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
+}
+/**
+ * The fifth panel to join `FLOATING_PANEL`.
+ *
+ * `menu-recipe.ts` reconciled the dropdown, context menu, select and popover
+ * surfaces onto one description of "a hairline-bordered card lifted off the
+ * canvas". This one was missed and kept its own `rounded-md` + `shadow-sm`,
+ * so a hover card sat a step flatter and 2px tighter than every other floating
+ * panel — which is why `token-progress.tsx` had to patch `shadow-md` back on at
+ * its call site. The recipe owns the surface and the enter/exit now.
+ *
+ * Two things stay local because they are this primitive's own: the transform
+ * origin (the Radix variable is named per primitive) and the `motion-reduce`
+ * guard, which no other panel ships and which must survive the move.
+ *
+ * `animated={false}` takes `FLOATING_PANEL_SURFACE` instead, the same split
+ * `MENU_PANEL_STATIC` makes for submenus, and for the same reason: a panel that
+ * opens INTO the path the pointer is already travelling spends its enter
+ * animation moving content away from the cursor, which reads as the card
+ * lagging behind the hand rather than as polish.
+ */
+function HoverCardContent({ className, align = 'center', sideOffset = 4, animated = true, ...props }) {
+    return (_jsx(HoverCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(HoverCardPrimitive.Content, { "data-slot": "hover-card-content", align: align, sideOffset: sideOffset, className: cn(animated ? FLOATING_PANEL : FLOATING_PANEL_SURFACE, 'z-50 w-64 origin-(--radix-hover-card-content-transform-origin) p-4 outline-hidden motion-reduce:animate-none motion-reduce:transition-none', className), ...props }) }));
+}
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/dist/components/ui/icon-provider.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The size a class-less icon renders at. Tailwind size classes and an explicit
+ * `size` prop both still win, so this only reaches icons that ask for nothing.
+ *
+ * Exported because the provider's tests have to rebuild the exact markup this
+ * context produces. They previously hard-coded the number, so changing it here
+ * failed them from a file that never mentions icons — the failure named the
+ * weight, which was not what had moved.
+ */
+export declare const DEFAULT_ICON_SIZE = 32;
+/**
+ * Applies the app-wide icon weight (packages/ui/src/lib/icon-config.ts; the
+ * apps/web path src/lib/icons/icon-config.ts is a shim) to every
+ * Phosphor icon in the client tree — identically in development and
+ * production. Icons never need a weight prop; the only intentional override
+ * is weight="fill" on solid/status icons.
+ *
+ * Server components can't read context — they import pre-bound icons from
+ * '@/lib/icons/ssr' instead.
+ */
+export declare function IconProvider({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/components/ui/icon-provider.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconContext } from '@phosphor-icons/react';
+import { DEFAULT_ICON_WEIGHT } from '../../lib/icon-config.js';
+/**
+ * The size a class-less icon renders at. Tailwind size classes and an explicit
+ * `size` prop both still win, so this only reaches icons that ask for nothing.
+ *
+ * Exported because the provider's tests have to rebuild the exact markup this
+ * context produces. They previously hard-coded the number, so changing it here
+ * failed them from a file that never mentions icons — the failure named the
+ * weight, which was not what had moved.
+ */
+export const DEFAULT_ICON_SIZE = 32;
+/* Frozen at module scope: the value never changes at runtime, so the provider
+   never re-renders its subtree and the identity stays stable across renders. */
+const ICON_DEFAULTS = { weight: DEFAULT_ICON_WEIGHT, size: DEFAULT_ICON_SIZE };
+/**
+ * Applies the app-wide icon weight (packages/ui/src/lib/icon-config.ts; the
+ * apps/web path src/lib/icons/icon-config.ts is a shim) to every
+ * Phosphor icon in the client tree — identically in development and
+ * production. Icons never need a weight prop; the only intentional override
+ * is weight="fill" on solid/status icons.
+ *
+ * Server components can't read context — they import pre-bound icons from
+ * '@/lib/icons/ssr' instead.
+ */
+export function IconProvider({ children }) {
+    return _jsx(IconContext.Provider, { value: ICON_DEFAULTS, children: children });
+}

package/dist/components/ui/info-banner.d.ts

@@ -0,0 +1,14 @@
+import { type StatusTone } from './status.js';
+import * as React from 'react';
+export type InfoBannerIcon = React.ComponentType<{
+    className?: string;
+}> | React.ReactElement<{
+    className?: string;
+}>;
+export interface InfoBannerProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    tone?: StatusTone;
+    icon?: InfoBannerIcon;
+    title?: React.ReactNode;
+    action?: React.ReactNode;
+}
+export declare function InfoBanner({ tone, icon, title, action, className, children, ...props }: InfoBannerProps): React.JSX.Element;

package/dist/components/ui/info-banner.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, AlertActions, AlertDescription, AlertMedia, AlertTitle, } from './alert.js';
+import { cn } from '../../lib/utils.js';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+/**
+ * Tone is carried by a /15 fill and the icon, never by the text. The 25% fill
+ * with a solid-tone title it replaced (Marko, 2026-09-03: "never readable on
+ * the core component") put orange type on a beige ground at ~2:1. Text is
+ * foreground on every tone. A filled banner has no border color: one boundary,
+ * a fill or a hairline, never both (color.md). Hues follow D5: info = blue,
+ * success = green, warning = orange, destructive = red.
+ */
+const infoBannerVariants = cva('group/item flex flex-wrap items-center gap-2 rounded-md border px-2.5 py-2 text-sm [&_[data-slot=alert-content]]:gap-1', {
+    variants: {
+        tone: {
+            neutral: 'border-border bg-popover',
+            info: 'bg-kortix-blue/15 border-transparent',
+            success: 'bg-kortix-green/15 border-transparent',
+            warning: 'bg-kortix-orange/15 border-transparent',
+            destructive: 'bg-kortix-red/15 border-transparent',
+        },
+    },
+    defaultVariants: {
+        tone: 'neutral',
+    },
+});
+/** The title is always foreground — the tone is the fill and the icon. */
+const infoBannerTitleVariants = cva('text-foreground w-full max-w-full font-medium', {
+    variants: {
+        tone: {
+            neutral: '',
+            info: '',
+            success: '',
+            warning: '',
+            destructive: '',
+        },
+    },
+    defaultVariants: {
+        tone: 'neutral',
+    },
+});
+/** Status icon tile — mirrors the sandbox template state indicator. */
+const infoBannerMediaVariants = cva('mt-0 group-has-[[data-slot=item-description]]/item:translate-y-0.5 inline-flex size-7 shrink-0 items-center justify-center self-start [&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0', {
+    variants: {
+        tone: {
+            neutral: 'text-muted-foreground border-border',
+            info: 'text-kortix-blue',
+            success: 'text-kortix-green',
+            warning: 'text-kortix-orange',
+            destructive: 'text-kortix-red',
+        },
+    },
+    defaultVariants: {
+        tone: 'neutral',
+    },
+});
+const infoBannerIconVariants = cva('size-6 shrink-0');
+function renderBannerIcon(icon, className) {
+    if (React.isValidElement(icon)) {
+        return React.cloneElement(icon, {
+            className: cn(className, icon.props.className),
+        });
+    }
+    const IconComponent = icon;
+    return _jsx(IconComponent, { className: className });
+}
+export function InfoBanner({ tone = 'neutral', icon, title, action, className, children, ...props }) {
+    const safeTone = tone ?? 'neutral';
+    return (_jsxs(Alert, { variant: "default", className: cn(infoBannerVariants({ tone: safeTone }), className), ...props, children: [icon != null && (_jsx(AlertMedia, { className: infoBannerMediaVariants({ tone: safeTone }), children: renderBannerIcon(icon, infoBannerIconVariants()) })), title != null && (_jsx(AlertTitle, { className: cn(infoBannerTitleVariants({ tone: safeTone }), 'line-clamp-1 min-h-4 leading-snug font-medium tracking-tight'), children: title })), children != null && (_jsx(AlertDescription, { className: "text-muted-foreground leading-normal font-medium [&_p]:leading-relaxed", children: children })), action != null && _jsx(AlertActions, { children: action })] }));
+}

package/dist/components/ui/inline-meta.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+export interface InlineMetaProps {
+    className?: string;
+    children: ReactNode;
+}
+export declare function InlineMeta({ className, children }: InlineMetaProps): import("react").JSX.Element;

package/dist/components/ui/inline-meta.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { Children, Fragment, isValidElement } from 'react';
+export function InlineMeta({ className, children }) {
+    const items = Children.toArray(children).filter((c) => c !== null && c !== undefined && c !== '');
+    return (_jsx("div", { className: cn('text-muted-foreground/70 flex items-center gap-2 text-xs', 'min-w-0', className), children: items.map((child, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx("span", { className: "text-muted-foreground/30", children: "\u00B7" }), _jsx("span", { className: "truncate", children: child })] }, isValidElement(child) ? (child.key ?? i) : i))) }));
+}

package/dist/components/ui/input-group.d.ts

@@ -0,0 +1,19 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Button } from './button.js';
+import { InputProps } from './input.js';
+declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element;
+declare function InputGroupInput({ className, ...props }: InputProps): React.JSX.Element;
+declare function InputGroupSearch({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function InputGroupSearchIcon({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function InputGroupSearchInput({ className, variant, size, ...props }: InputProps): React.JSX.Element;
+declare function InputGroupSearchClear({ className, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'children'>): React.JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, };

package/dist/components/ui/input-group.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Button } from './button.js';
+import { Input, inputSurfaceClasses, inputTransitionClasses, } from './input.js';
+import { Close } from '../../icons/close.js';
+import { cn } from '../../lib/utils.js';
+function InputGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('group/input-group relative flex w-full items-center outline-none', inputSurfaceClasses, inputTransitionClasses, 'h-9 min-w-0 has-[>textarea]:h-auto', 
+        // Variants based on alignment.
+        'has-[>[data-align=inline-start]]:[&>input]:pl-2', 'has-[>[data-align=inline-end]]:[&>input]:pr-2', 'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3', 'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3', 
+        // Focus state.
+        // Focus state — the same border + halo as `Input`, drawn on the group
+        // so addons sit inside the ring rather than beside it.
+        'has-[[data-slot=input-group-control]:focus]:border-ring has-[[data-slot=input-group-control]:focus]:ring-ring/15 has-[[data-slot=input-group-control]:focus]:ring-3', 
+        // Error state.
+        'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/15 has-[[data-slot][aria-invalid=true]]:ring-3', className), ...props }));
+}
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+    variants: {
+        align: {
+            'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+            'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+            'block-start': 'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',
+            'block-end': 'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',
+        },
+    },
+    defaultVariants: {
+        align: 'inline-start',
+    },
+});
+function InputGroupAddon({ className, align = 'inline-start', ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+            if (e.target.closest('button')) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector('input')?.focus();
+        }, ...props }));
+}
+const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
+            'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+            'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+        },
+    },
+    defaultVariants: {
+        size: 'xs',
+    },
+});
+function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }) {
+    return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
+}
+function InputGroupInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-control", className: cn(
+        // The group paints the surface, border and ring; the control is bare.
+        'flex-1 rounded-none border-0 bg-transparent shadow-none', 'focus:ring-0 focus:outline-none aria-invalid:ring-0', className), ...props }));
+}
+function InputGroupSearch({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group-search", className: cn('relative w-full', className), ...props }));
+}
+function InputGroupSearchIcon({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group-search-icon", "aria-hidden": "true", className: cn('text-muted-foreground pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 [&_svg:not([class*="size-"])]:size-4', className), ...props }));
+}
+function InputGroupSearchInput({ className, variant = 'transparent', size = 'md', ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-search-control", variant: variant, size: size, className: cn('peer placeholder:text-muted-foreground/60 pl-9', className), ...props }));
+}
+function InputGroupSearchClear({ className, variant = 'ghost', size = 'icon', ...props }) {
+    return (_jsx(Button, { type: "button", variant: variant, size: size, "aria-label": "Clear", "data-slot": "input-group-search-clear", className: cn('absolute top-1/2 right-2 size-6 -translate-y-1/2 rounded-sm opacity-0 peer-focus:opacity-100', className), ...props, children: _jsx(Close, { className: "text-muted-foreground size-4" }) }));
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, };

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+/**
+ * The one field surface every text input on the web shares — `Input`,
+ * `InputGroup`, `Textarea`, and the search field all read these, so a field
+ * looks the same on a white page, a gray card, or inside a modal.
+ *
+ * `bg-popover` is the top surface in both themes (white / #141414), so the well
+ * lifts off any substrate instead of sinking into a `bg-card` panel the way the
+ * old `bg-input` fill did. Focus is the `ring` token twice: a solid 1px border
+ * plus a 3px 15% halo.
+ */
+declare const inputSurfaceClasses = "bg-popover border-border rounded-md border";
+declare const inputFocusClasses = "focus:border-ring focus:ring-ring/15 focus:ring-3 focus:outline-none";
+declare const inputInvalidClasses = "aria-invalid:border-destructive aria-invalid:ring-destructive/15 aria-invalid:ring-3 aria-invalid:motion-safe:animate-shake";
+/** Border and halo change on every focus move, so they swap fast and never move layout. */
+declare const inputTransitionClasses = "transition-[border-color,box-shadow] duration-(--duration-fast) ease-out motion-reduce:transition-none";
+export type InputProps = Omit<React.ComponentProps<'input'>, 'size'> & {
+    /**
+     * @deprecated Every input renders the same surface. Kept so existing
+     * callers compile; the value is ignored.
+     */
+    variant?: 'default' | 'secondary' | 'transparent' | 'popover';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+declare function Input({ className, type, variant: _variant, size, ...props }: InputProps): React.JSX.Element;
+export { Input, inputFocusClasses, inputInvalidClasses, inputSurfaceClasses, inputTransitionClasses, };

package/dist/components/ui/input.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/**
+ * The one field surface every text input on the web shares — `Input`,
+ * `InputGroup`, `Textarea`, and the search field all read these, so a field
+ * looks the same on a white page, a gray card, or inside a modal.
+ *
+ * `bg-popover` is the top surface in both themes (white / #141414), so the well
+ * lifts off any substrate instead of sinking into a `bg-card` panel the way the
+ * old `bg-input` fill did. Focus is the `ring` token twice: a solid 1px border
+ * plus a 3px 15% halo.
+ */
+const inputSurfaceClasses = 'bg-popover border-border rounded-md border';
+const inputFocusClasses = 'focus:border-ring focus:ring-ring/15 focus:ring-3 focus:outline-none';
+const inputInvalidClasses = 'aria-invalid:border-destructive aria-invalid:ring-destructive/15 aria-invalid:ring-3 aria-invalid:motion-safe:animate-shake';
+/** Border and halo change on every focus move, so they swap fast and never move layout. */
+const inputTransitionClasses = 'transition-[border-color,box-shadow] duration-(--duration-fast) ease-out motion-reduce:transition-none';
+function Input({ className, type, variant: _variant, size = 'sm', ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn(inputSurfaceClasses, inputFocusClasses, inputInvalidClasses, inputTransitionClasses, 'text-foreground file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-10 w-full min-w-0 px-3 py-1 text-sm font-medium file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', type === 'search' &&
+            '[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none', type === 'file' &&
+            'text-muted-foreground file:border-border file:text-foreground p-0 pr-3 italic file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic', size === 'xs' && 'h-8 text-xs', size === 'sm' && 'h-9 text-sm', size === 'md' && 'h-10 text-sm', size === 'lg' && 'h-11 text-sm', size === 'xl' && 'h-12 text-base', className), ...props }));
+}
+export { Input, inputFocusClasses, inputInvalidClasses, inputSurfaceClasses, inputTransitionClasses, };