@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

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

@@ -0,0 +1,131 @@
+/**
+ * The tint a project's emoji wears.
+ *
+ * In the picker (emoji-picker.tsx) a cell takes a pale fill and a stronger 1px
+ * inset ring while it is hovered or keyboard-active. That treatment is what a
+ * project's icon now wears AT REST everywhere it appears: the card tile in
+ * /projects, the switcher row in the sidebar, and the picker's own trigger
+ * button in the create/edit modals.
+ *
+ * WHERE THE HUE COMES FROM. The picker rotates its six hues by GRID POSITION —
+ * a cell's tint is a function of (column mod 6, row parity). A card tile and a
+ * trigger button have no position, so that source does not exist here. The hue
+ * is derived from the EMOJI instead, which also buys the property the feature
+ * needs: the same project shows the same colour on every surface, with no state
+ * to thread and nothing to store. 🌿 is green wherever it renders.
+ *
+ * TWO TIERS, deliberately lopsided:
+ *
+ *  1. An anchor table of ~106 emoji, below. It is not an attempt at coverage —
+ *     it is the set where a MISMATCH would read as a mistake, i.e. glyphs
+ *     dominated by one hue in every major vendor font (Apple, Noto, Segoe,
+ *     Twemoji). A blue ring on 🔥 looks broken; a blue ring on 📝 is just a
+ *     colour. Most emoji are the second kind, which is why the table stays this
+ *     small and why growing it is rarely the right fix.
+ *
+ *  2. A hash for everything else. Deterministic, so a project's colour survives
+ *     a reload and matches across surfaces, and spread across all six hues so
+ *     the grid does not settle on one.
+ *
+ * teal is thin on purpose. Almost no emoji is unambiguously teal across
+ * vendors, so rather than force marginal glyphs into it the table leaves teal
+ * almost entirely to the hash, which keeps it in rotation.
+ */
+export const EMOJI_HUES = ['red', 'amber', 'green', 'teal', 'blue', 'violet'];
+/**
+ * Variation selectors (U+FE0E text, U+FE0F emoji) and the five Fitzpatrick skin
+ * tone modifiers.
+ *
+ * Both have to go before anything is looked up or hashed. The same icon reaches
+ * this module in more than one encoding — frimousse's `onEmojiSelect`, a row
+ * loaded from the API, a value written by an older client — and '❤️' and '❤'
+ * must not be two different colours. Skin tone is the same argument five times
+ * over: without the strip, one gesture picks five unrelated hashes.
+ */
+const MODIFIERS = /[\u{FE0E}\u{FE0F}\u{1F3FB}-\u{1F3FF}]/gu;
+function baseOf(emoji) {
+    return emoji.replace(MODIFIERS, '');
+}
+/**
+ * Emoji whose glyph is one hue in every major vendor font.
+ *
+ * Read with `[...string]`, which iterates CODE POINTS — so every entry here has
+ * to be a single code point plus an optional variation selector. No ZWJ
+ * sequences, no flags, no keycaps: those would register their halves as
+ * separate anchors. emoji-tint.test.ts enforces that, and that no glyph appears
+ * under two hues.
+ *
+ * Brown has no token of its own, so 🟤 🟫 🤎 📦 🪵 sit under amber — the
+ * nearest of the six, and much nearer than a hash would land them.
+ */
+const DOMINANT = {
+    red: '🔴🟥❤️🩷💔🍎🍓🍒🍅🌹🌶️🩸💋🔻🚨🚒🧨🎈🐞🦞',
+    amber: '🟠🟧🟡🟨🧡💛🟤🟫🤎🔥⚡⭐🌟✨☀️💡🍊🍋🍌🌽🧀🍯🏆🥇🌻🎃🦁🐯🐝🔶📦🪵',
+    green: '🟢🟩💚🌿🍀🌱🌳🌲🍃🥬🥦🥑🥒🍐🍏🫑🐸🐢🐍🦖♻️✅',
+    teal: '🩵🧊🫧🦚',
+    blue: '🔵🟦💙🔷🔹💧🌊🌐🌍🌎🌏🐳🐋🫐🥶🌀❄️💎🦋🩻',
+    violet: '🟣🟪💜🔮🍇🍆👾🪻',
+};
+const HUE_BY_EMOJI = new Map(EMOJI_HUES.flatMap((hue) => [...baseOf(DOMINANT[hue])].map((glyph) => [glyph, hue])));
+/**
+ * FNV-1a-ish, over CODE POINTS rather than UTF-16 units — the same shape
+ * `chalkColors` in @kortix/shared uses for entity tiles, kept local because
+ * that package exports the colours and not the hash.
+ */
+function hash(seed) {
+    let value = 0;
+    for (const char of seed)
+        value = (value * 31 + (char.codePointAt(0) ?? 0)) | 0;
+    return Math.abs(value);
+}
+/** The hue an emoji wears — anchored if it is loud, hashed if it is not. */
+export function emojiHue(emoji) {
+    const base = baseOf(emoji);
+    return HUE_BY_EMOJI.get(base) ?? EMOJI_HUES[hash(base) % EMOJI_HUES.length];
+}
+/**
+ * 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. The
+ * picker cell has no border at all, and matching it is the point.
+ */
+const TINT = {
+    red: 'border-0 bg-emoji-fill-red inset-ring-1 inset-ring-emoji-ring-red',
+    amber: 'border-0 bg-emoji-fill-amber inset-ring-1 inset-ring-emoji-ring-amber',
+    green: 'border-0 bg-emoji-fill-green inset-ring-1 inset-ring-emoji-ring-green',
+    teal: 'border-0 bg-emoji-fill-teal inset-ring-1 inset-ring-emoji-ring-teal',
+    blue: 'border-0 bg-emoji-fill-blue inset-ring-1 inset-ring-emoji-ring-blue',
+    violet: 'border-0 bg-emoji-fill-violet inset-ring-1 inset-ring-emoji-ring-violet',
+};
+/**
+ * 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-emoji-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 = {
+    red: 'hover:bg-emoji-fill-red',
+    amber: 'hover:bg-emoji-fill-amber',
+    green: 'hover:bg-emoji-fill-green',
+    teal: 'hover:bg-emoji-fill-teal',
+    blue: 'hover:bg-emoji-fill-blue',
+    violet: 'hover:bg-emoji-fill-violet',
+};
+/** The picker's active-cell treatment, at rest: fill + 1px inset ring. */
+export function emojiTint(emoji) {
+    return TINT[emojiHue(emoji)];
+}
+/** Holds `emojiTint`'s fill through a host variant's own hover background. */
+export function emojiTintHover(emoji) {
+    return TINT_HOVER[emojiHue(emoji)];
+}

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

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+declare function Empty({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>): import("react").JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>): import("react").JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/components/ui/empty.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+function Empty({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty", className: cn('flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12', className), ...props }));
+}
+function EmptyHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-header", className: cn('flex max-w-sm flex-col items-center gap-2 text-center', className), ...props }));
+}
+const emptyMediaVariants = cva('mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function EmptyMedia({ className, variant = 'default', ...props }) {
+    return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn(emptyMediaVariants({ variant, className })), ...props }));
+}
+function EmptyTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-title", className: cn('text-lg font-medium tracking-tight', className), ...props }));
+}
+function EmptyDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-description", className: cn('text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
+}
+function EmptyContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-content", className: cn('flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance', className), ...props }));
+}
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/components/ui/entity-avatar.d.ts

@@ -0,0 +1,84 @@
+import type { Icon } from './kortix-icons.js';
+import { type Icon as IconType } from '@phosphor-icons/react';
+/**
+ * `emoji` is its own step, not the initial's `text-*`: an emoji is the tile's
+ * content, not a letter set in the tile's type scale. Inheriting `box`'s size
+ * puts a 14px emoji in the 36.8px `lg` card tile — legible, but visibly a
+ * letter-sized thing in an icon-sized hole.
+ *
+ * The values are measured, not derived. A colour-emoji face is a bitmap strike,
+ * so `measureText` over-reports it and the glyph paints WIDER than its
+ * font-size. Rasterised through Chromium on this font stack, painted extent vs.
+ * the tile it sits in:
+ *
+ *   xs  13px → 16×14 in 18.40  (0.87)      md  16px → 20×17 in 29.44  (0.68)
+ *   sm  14px → 18×16 in 22.08  (0.82)      lg  20px → 22×17 in 36.80  (0.60)
+ *                                          xl  30px → 30×25 in 51.52  (0.58)
+ *
+ * Nothing overflows its tile. The two small tiles run proportionally fuller
+ * because `text-xs` (13px) is the floor of this app's type scale — and below
+ * that an emoji stops being readable in an 18px square anyway.
+ */
+declare const SIZE_MAP: {
+    readonly xs: {
+        readonly box: "size-5 rounded-sm text-xs";
+        readonly icon: "size-3";
+        readonly emoji: "text-xs";
+    };
+    readonly sm: {
+        readonly box: "size-6 rounded-sm text-xs";
+        readonly icon: "size-3.5";
+        readonly emoji: "text-sm";
+    };
+    readonly md: {
+        readonly box: "size-8 rounded-md text-xs";
+        readonly icon: "size-4";
+        readonly emoji: "text-base";
+    };
+    readonly lg: {
+        readonly box: "size-10 rounded-md text-sm";
+        readonly icon: "size-5";
+        readonly emoji: "text-xl";
+    };
+    readonly xl: {
+        readonly box: "size-14 rounded-md text-base";
+        readonly icon: "size-7";
+        readonly emoji: "text-3xl";
+    };
+};
+export type EntityAvatarSize = keyof typeof SIZE_MAP;
+export interface EntityAvatarProps {
+    label?: string;
+    /**
+     * A named glyph + colour — a project's alternative to `emoji`. Takes
+     * precedence over `emoji`, `icon`, and the label's initial: the field that
+     * produces this value is a union (a project has an emoji XOR a glyph,
+     * never both), so whichever was chosen last is what should paint.
+     *
+     * An unknown `name` resolves through `glyphFace()` to `null` and
+     * falls through to the rest of the precedence chain rather than painting
+     * an empty tile — the server rejects unknown names, but a client
+     * rendering STALE cached data (an old snapshot in the query cache, a
+     * catalogue that shrank) must not break.
+     */
+    glyph?: {
+        name: string;
+        color: string;
+    } | null;
+    /**
+     * A single emoji grapheme standing in for the entity — today, a project's
+     * own icon. Beaten by `glyph`; takes precedence over `icon` and over the
+     * label's initial.
+     *
+     * Typed `| null` so it takes `KortixProject.icon` (server-validated to one
+     * emoji, or null) with no coercion at the call site. Anything falsy — null,
+     * undefined, '' — is "no emoji" and falls through to the existing behaviour,
+     * which is what keeps all ~30 emoji-less call sites byte-identical.
+     */
+    emoji?: string | null;
+    icon?: Icon | IconType;
+    size?: EntityAvatarSize;
+    className?: string;
+}
+export declare function EntityAvatar({ label, glyph, emoji, icon: IconComponent, size, className, }: EntityAvatarProps): import("react").JSX.Element;
+export {};

package/dist/components/ui/entity-avatar.js

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { emojiTint } from './emoji-tint.js';
+import { glyphFace } from './glyph-face.js';
+import { glyphForeground, glyphTint } from './glyph-tint.js';
+import { cn } from '../../lib/utils.js';
+import { chalkColors } from '../../_vendor/kortix-shared.js';
+/**
+ * `emoji` is its own step, not the initial's `text-*`: an emoji is the tile's
+ * content, not a letter set in the tile's type scale. Inheriting `box`'s size
+ * puts a 14px emoji in the 36.8px `lg` card tile — legible, but visibly a
+ * letter-sized thing in an icon-sized hole.
+ *
+ * The values are measured, not derived. A colour-emoji face is a bitmap strike,
+ * so `measureText` over-reports it and the glyph paints WIDER than its
+ * font-size. Rasterised through Chromium on this font stack, painted extent vs.
+ * the tile it sits in:
+ *
+ *   xs  13px → 16×14 in 18.40  (0.87)      md  16px → 20×17 in 29.44  (0.68)
+ *   sm  14px → 18×16 in 22.08  (0.82)      lg  20px → 22×17 in 36.80  (0.60)
+ *                                          xl  30px → 30×25 in 51.52  (0.58)
+ *
+ * Nothing overflows its tile. The two small tiles run proportionally fuller
+ * because `text-xs` (13px) is the floor of this app's type scale — and below
+ * that an emoji stops being readable in an 18px square anyway.
+ */
+const SIZE_MAP = {
+    xs: { box: 'size-5 rounded-sm text-xs', icon: 'size-3', emoji: 'text-xs' },
+    sm: { box: 'size-6 rounded-sm text-xs', icon: 'size-3.5', emoji: 'text-sm' },
+    md: { box: 'size-8 rounded-md text-xs', icon: 'size-4', emoji: 'text-base' },
+    lg: { box: 'size-10 rounded-md text-sm', icon: 'size-5', emoji: 'text-xl' },
+    xl: { box: 'size-14 rounded-md text-base', icon: 'size-7', emoji: 'text-3xl' },
+};
+/**
+ * Resolves a `glyph` prop to the component that actually draws it, or `null`
+ * if the name isn't in the registry.
+ *
+ * Its own function rather than an inline `glyph ? glyphFace(…) : null`
+ * at each use site, because EVERY use site (the inline style, the tile's
+ * class list, the rendered face) has to agree on whether there IS a
+ * renderable glyph, and a name that fails to resolve has to fall through to
+ * the rest of the precedence chain identically everywhere. Two independent
+ * `glyphFace()` calls computing the same answer is how they drift.
+ */
+function resolveGlyph(glyph) {
+    if (!glyph)
+        return null;
+    const GlyphComponent = glyphFace(glyph.name);
+    return GlyphComponent ? { GlyphComponent, color: glyph.color } : null;
+}
+export function EntityAvatar({ label, glyph, emoji, icon: IconComponent, size = 'md', className, }) {
+    const sizes = SIZE_MAP[size];
+    const initial = (label?.trim()?.charAt(0) || '?').toUpperCase();
+    const chalk = chalkColors(`${label?.trim()}` || initial);
+    const resolvedGlyph = resolveGlyph(glyph);
+    return (_jsx("span", { "data-slot": "entity-avatar", 
+        // chalkColors() is an inline style, so it beats any class a caller
+        // passes. A glyph or an emoji is already the colour — sitting either on
+        // a saturated hash-derived pastel reads as noise, and in dark mode that
+        // pastel is a bright square in an otherwise dark grid. So a glyph or
+        // emoji tile drops the style entirely and rebuilds itself from its own
+        // tint tokens. See the class list.
+        style: resolvedGlyph || emoji
+            ? undefined
+            : {
+                backgroundColor: chalk.background,
+                color: chalk.foreground,
+                borderColor: chalk.border,
+            }, className: cn('inline-flex shrink-0 items-center justify-center border font-semibold', sizes.box, 
+        // After `sizes.box`, so tailwind-merge resolves `sizes.emoji` over the
+        // initial's text size — and so `border-0` resolves over the base
+        // `border`, which is what stops a neutral hairline being drawn OUTSIDE
+        // the coloured inset ring.
+        //
+        // `emojiTint()` is the picker's hovered-cell treatment (a pale
+        // `--color-emoji-fill-*` under a 1px `--color-emoji-ring-*` inset ring)
+        // made this tile's RESTING look, with the hue derived from the emoji
+        // rather than from a grid position the tile does not have. See
+        // emoji-tint.ts for the mapping. Both the ring and the fill are
+        // light-dark() pairs, so there is no `dark:` variant here.
+        //
+        // It replaces `bg-muted border-foreground/25 shadow-2xs`, which existed
+        // to fix a different tile: a NEUTRAL fill measured 1.07:1 against the
+        // card in dark, so it had to borrow an edge from `--foreground` and a
+        // lift from a shadow to read as a tile at all. The tinted fill and its
+        // ring carry that on their own — measured against all three surfaces in
+        // both themes, the ring runs 2.30–3.55:1 and the fill 1.19–1.55:1
+        // (.superpowers/sdd/2026-07-31-project-emoji-icons/tint-report.md).
+        //
+        // STILL LAST-WINS: a caller className that sets a background silently
+        // beats `bg-emoji-fill-*` / `bg-glyph-fill-*` and leaves the tile
+        // ringed but untinted. That is why the project card no longer passes
+        // `bg-background`.
+        resolvedGlyph ? glyphTint(resolvedGlyph.color) : emoji && [emojiTint(emoji), sizes.emoji], className), children: resolvedGlyph ? (
+        // Same reasoning as the emoji span below: the tile always sits
+        // beside the name it belongs to, so the glyph itself is decorative.
+        // `sizes.icon`, not `sizes.emoji` — a glyph is a drawn Phosphor icon,
+        // sized like the plain `icon` prop below, not like a text-rendered
+        // emoji grapheme.
+        _jsx(resolvedGlyph.GlyphComponent, { className: cn(sizes.icon, glyphForeground(resolvedGlyph.color)) })) : emoji ? (
+        // The tile always sits beside the name it belongs to, so the glyph is
+        // decorative: announced, it reads the emoji's CLDR name immediately
+        // before the label that says the same thing. Same treatment as the
+        // picker trigger in features/projects/modal/project-icon-field.tsx.
+        _jsx("span", { "aria-hidden": true, className: "leading-none", children: emoji })) : IconComponent ? (_jsx(IconComponent, { className: sizes.icon })) : (initial) }));
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export declare const FadedScrollArea: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    fadeColor?: string;
+    orientation?: "vertical" | "horizontal";
+    rootClassName?: string;
+    /** Tailwind spacing unit (`10` → `h-10`) or a CSS length (`1.5rem`). */
+    fadeSize?: string;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import * as React from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+export const FadedScrollArea = React.forwardRef(function FadedScrollArea({ children, className, fadeColor = 'from-sidebar', orientation = 'vertical', rootClassName, fadeSize = '10', style, ...props }, ref) {
+    const scrollRef = useRef(null);
+    const [showStartFade, setShowStartFade] = useState(false);
+    const [showEndFade, setShowEndFade] = useState(false);
+    const isHorizontal = orientation === 'horizontal';
+    const fadeSizeValue = /^\d+(\.\d+)?$/.test(fadeSize.trim())
+        ? `calc(var(--spacing) * ${fadeSize.trim()})`
+        : fadeSize.trim();
+    const setScrollRef = useCallback((node) => {
+        scrollRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const updateScrollFades = useCallback(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        if (isHorizontal) {
+            const { scrollLeft, scrollWidth, clientWidth } = el;
+            const maxScroll = scrollWidth - clientWidth;
+            const canScroll = maxScroll > 1;
+            if (!canScroll) {
+                setShowStartFade(false);
+                setShowEndFade(false);
+                return;
+            }
+            setShowStartFade(scrollLeft > 1);
+            setShowEndFade(scrollLeft < maxScroll - 1);
+            return;
+        }
+        const { scrollTop, scrollHeight, clientHeight } = el;
+        const maxScroll = scrollHeight - clientHeight;
+        const canScroll = maxScroll > 1;
+        if (!canScroll) {
+            setShowStartFade(false);
+            setShowEndFade(false);
+            return;
+        }
+        setShowStartFade(scrollTop > 1);
+        setShowEndFade(scrollTop < maxScroll - 1);
+    }, [isHorizontal]);
+    useLayoutEffect(() => {
+        updateScrollFades();
+    }, [updateScrollFades]);
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(updateScrollFades);
+        ro.observe(el);
+        el.addEventListener('scroll', updateScrollFades, { passive: true });
+        window.addEventListener('resize', updateScrollFades);
+        // Keep wheel/touch scroll working inside Radix scroll-lock layers (Dialog/Modal).
+        const stopScrollLockCapture = (e) => e.stopPropagation();
+        el.addEventListener('wheel', stopScrollLockCapture, { passive: false });
+        el.addEventListener('touchmove', stopScrollLockCapture, { passive: false });
+        return () => {
+            ro.disconnect();
+            el.removeEventListener('scroll', updateScrollFades);
+            window.removeEventListener('resize', updateScrollFades);
+            el.removeEventListener('wheel', stopScrollLockCapture);
+            el.removeEventListener('touchmove', stopScrollLockCapture);
+        };
+    }, [updateScrollFades]);
+    return (_jsxs("div", { className: cn('relative flex min-h-0 min-w-0', isHorizontal ? 'w-full min-w-0 flex-1 self-center' : 'h-full flex-col', rootClassName), style: { '--fade-size': fadeSizeValue, ...style }, children: [_jsx("div", { className: cn('pointer-events-none absolute z-10 transition-opacity', fadeColor, isHorizontal
+                    ? 'inset-y-0 left-0 w-(--fade-size) bg-gradient-to-r to-transparent'
+                    : 'inset-x-0 top-0 h-(--fade-size) bg-gradient-to-b to-transparent', showStartFade ? 'opacity-100' : 'opacity-0'), "aria-hidden": true }), _jsx("div", { className: cn('pointer-events-none absolute z-10 transition-opacity', fadeColor, isHorizontal
+                    ? 'inset-y-0 right-0 w-(--fade-size) bg-gradient-to-l to-transparent'
+                    : 'inset-x-0 bottom-0 h-(--fade-size) bg-gradient-to-t to-transparent', showEndFade ? 'opacity-100' : 'opacity-0'), "aria-hidden": true }), _jsx("div", { ref: setScrollRef, className: cn('scrollbar-hide min-h-0 min-w-0 flex-1 pb-0', isHorizontal ? 'touch-pan-x overflow-x-auto overflow-y-hidden' : 'overflow-y-auto', className), ...props, children: children })] }));
+});
+FadedScrollArea.displayName = 'FadedScrollArea';

package/dist/components/ui/favicon-avatar.d.ts

@@ -0,0 +1,32 @@
+declare const SIZE_MAP: {
+    readonly '2xs': {
+        readonly avatar: "size-4";
+        readonly icon: "size-2.5";
+    };
+    readonly xs: {
+        readonly avatar: "size-5";
+        readonly icon: "size-3";
+    };
+    readonly sm: {
+        readonly avatar: "size-6";
+        readonly icon: "size-3.5";
+    };
+    readonly md: {
+        readonly avatar: "size-8";
+        readonly icon: "size-4";
+    };
+    readonly lg: {
+        readonly avatar: "size-10";
+        readonly icon: "size-5";
+    };
+};
+export type FaviconAvatarSize = keyof typeof SIZE_MAP;
+export interface FaviconAvatarProps {
+    /** Full http(s) URL or bare domain (e.g. google.com). */
+    value: string;
+    size?: FaviconAvatarSize;
+    className?: string;
+    alt?: string;
+}
+export declare function FaviconAvatar({ value, size, className, alt }: FaviconAvatarProps): import("react").JSX.Element;
+export {};

package/dist/components/ui/favicon-avatar.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, AvatarImage } from './avatar.js';
+import { faviconUrlForValue } from '../../lib/favicon.js';
+import { cn } from '../../lib/utils.js';
+import { GlobeIcon as Globe } from '@phosphor-icons/react';
+const SIZE_MAP = {
+    '2xs': { avatar: 'size-4', icon: 'size-2.5' },
+    xs: { avatar: 'size-5', icon: 'size-3' },
+    sm: { avatar: 'size-6', icon: 'size-3.5' },
+    md: { avatar: 'size-8', icon: 'size-4' },
+    lg: { avatar: 'size-10', icon: 'size-5' },
+};
+export function FaviconAvatar({ value, size = 'xs', className, alt = '' }) {
+    const sizes = SIZE_MAP[size];
+    const src = faviconUrlForValue(value);
+    return (_jsxs(Avatar, { "data-slot": "favicon-avatar", className: cn('bg-muted/60 rounded', sizes.avatar, className), children: [src ? (_jsx(AvatarImage, { src: src, alt: alt, className: "outline outline-black/10 dark:outline-white/10" })) : null, _jsx(AvatarFallback, { delayMs: 0, className: "bg-muted/60", children: _jsx(Globe, { className: cn('text-muted-foreground/50', sizes.icon) }) })] }));
+}

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

@@ -0,0 +1,15 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Label } from './label.js';
+declare function FieldGroup({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Field({ className, orientation, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants> & {
+    variant?: 'default' | 'outline';
+}): import("react").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<'p'>): import("react").JSX.Element;
+export { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldTitle, };

package/dist/components/ui/field.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Label } from './label.js';
+import { cn } from '../../lib/utils.js';
+function FieldGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-group", className: cn('group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4', className), ...props }));
+}
+const fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {
+    variants: {
+        orientation: {
+            vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+            horizontal: [
+                'flex-row items-center',
+                '[&>[data-slot=field-label]]:flex-auto',
+                'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+            ],
+            responsive: [
+                'flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto',
+                '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+                '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+            ],
+        },
+        variant: {
+            default: 'bg-transparent',
+            outline: ' border-border rounded-md border px-3 py-2.5',
+        },
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+    },
+});
+function Field({ className, orientation = 'vertical', variant = 'default', ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "field", "data-orientation": orientation, className: cn(fieldVariants({ orientation, variant }), className), ...props }));
+}
+function FieldContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-content", className: cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className), ...props }));
+}
+function FieldLabel({ className, ...props }) {
+    return (_jsx(Label, { "data-slot": "field-label", className: cn('group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50', 'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4', 'has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10', className), ...props }));
+}
+function FieldTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-label", className: cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50', className), ...props }));
+}
+function FieldDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "field-description", className: cn('text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance', 'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5', '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
+}
+export { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldTitle, };

package/dist/components/ui/file-tree.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+export interface FileTreeProps {
+    title: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * Collapsible file-tree shell: ghost trigger with caret, rows inside the
+ * disclosure content. Uncontrolled and open by default — clicking the title
+ * collapses it (a bare `open` would freeze it; see `DisclosureProps.open`).
+ * Callers own the tree rows (or any children) — this only owns the disclosure chrome.
+ */
+export declare function FileTree({ title, children, className }: FileTreeProps): import("react").JSX.Element;
+export interface FileTreeNode {
+    name: string;
+    path: string;
+    /** Nesting below the tree's root directory. 0 = sits directly in it. */
+    depth: number;
+}
+export interface FileTreeNavProps {
+    nodes: readonly FileTreeNode[];
+    selectedPath: string | undefined;
+    onSelect: (path: string) => void;
+    /** Accessible name for the list, e.g. "account-research files". */
+    label: string;
+}
+/**
+ * The file rows inside a `FileTree`: one indented button per file, the
+ * selected one on a quiet fill. Shared by the capability entity modal and the
+ * marketplace item rail so both trees are the same component.
+ */
+export declare function FileTreeNav({ nodes, selectedPath, onSelect, label }: FileTreeNavProps): import("react").JSX.Element | null;

package/dist/components/ui/file-tree.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from './button.js';
+import { Disclosure, DisclosureContent, DisclosureTrigger } from './disclosure.js';
+import { cn } from '../../lib/utils.js';
+import { CaretRightIcon } from '@phosphor-icons/react';
+/**
+ * Collapsible file-tree shell: ghost trigger with caret, rows inside the
+ * disclosure content. Uncontrolled and open by default — clicking the title
+ * collapses it (a bare `open` would freeze it; see `DisclosureProps.open`).
+ * Callers own the tree rows (or any children) — this only owns the disclosure chrome.
+ */
+export function FileTree({ title, children, className }) {
+    return (_jsxs(Disclosure, { defaultOpen: true, className: cn('group', className), children: [_jsx(DisclosureTrigger, { children: _jsxs(Button, { variant: "ghost", size: "sm", className: "flex w-full items-center justify-between gap-1.5", children: [title, _jsx(CaretRightIcon, { className: "text-muted-foreground size-3.5 transition-transform duration-(--duration-moderate) group-data-[state=open]:rotate-90" })] }) }), _jsx(DisclosureContent, { children: _jsx("div", { className: "mt-1", children: children }) })] }));
+}
+/**
+ * The file rows inside a `FileTree`: one indented button per file, the
+ * selected one on a quiet fill. Shared by the capability entity modal and the
+ * marketplace item rail so both trees are the same component.
+ */
+export function FileTreeNav({ nodes, selectedPath, onSelect, label }) {
+    if (nodes.length === 0)
+        return null;
+    return (_jsx("nav", { "aria-label": label, className: "space-y-0.5", children: nodes.map((node) => (_jsx("button", { type: "button", onClick: () => onSelect(node.path), "aria-current": node.path === selectedPath, 
+            // Root rows start on the trigger's text lane (`px-2.5`, the ghost
+            // `sm` button's inset with an icon), so file names sit under the title.
+            style: { paddingLeft: `calc(var(--spacing) * 2.5 + ${node.depth * 12}px)` }, className: cn('block w-full truncate rounded-md py-1.5 pr-2 text-left text-xs transition-colors', 'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none', node.path === selectedPath
+                ? 'bg-primary/[0.06] text-foreground'
+                : 'text-muted-foreground hover:text-foreground'), children: node.name }, node.path))) }));
+}