@kortix/ui 0.0.0-stage → 0.14.4

package/dist/primitives/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 packages/ui/src/workspace/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/primitives/error-boundary.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export type ErrorBoundaryFallback = (props: {
+    error: Error;
+    reset: () => void;
+}) => React.ReactNode;
+interface State {
+    error: Error | null;
+}
+/**
+ * Contains a render crash to its subtree and renders `fallback` instead.
+ * Reports the error through `captureException` (`@kortix/ui/lib/telemetry`)
+ * with the component stack as `extra.componentStack`.
+ */
+export declare class ErrorBoundary extends React.Component<{
+    children: React.ReactNode;
+    fallback: ErrorBoundaryFallback;
+}, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    reset: () => void;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/primitives/error-boundary.js

@@ -0,0 +1,25 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { captureException } from '../lib/telemetry.js';
+/**
+ * Contains a render crash to its subtree and renders `fallback` instead.
+ * Reports the error through `captureException` (`@kortix/ui/lib/telemetry`)
+ * with the component stack as `extra.componentStack`.
+ */
+export class ErrorBoundary extends React.Component {
+    state = { error: null };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, info) {
+        captureException(error, { extra: { componentStack: info.componentStack } });
+    }
+    reset = () => this.setState({ error: null });
+    render() {
+        const { error } = this.state;
+        if (error)
+            return _jsx(_Fragment, { children: this.props.fallback({ error, reset: this.reset }) });
+        return _jsx(_Fragment, { children: this.props.children });
+    }
+}

package/dist/primitives/error-state.d.ts

@@ -0,0 +1,12 @@
+import { type Icon as IconMynauiType, type Icon as IconType, type Icon as LucideIcon } from '@phosphor-icons/react';
+import type { ReactNode } from 'react';
+export interface ErrorStateProps {
+    icon?: LucideIcon | IconMynauiType | IconType;
+    title: string;
+    description?: ReactNode;
+    action?: ReactNode;
+    secondaryAction?: ReactNode;
+    className?: string;
+    size?: 'sm' | 'default';
+}
+export declare function ErrorState({ icon: IconComponent, title, description, action, secondaryAction, size, className, }: ErrorStateProps): import("react").JSX.Element;

package/dist/primitives/error-state.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Kortix <ErrorState> — centered error view.
+ *
+ * Minimal. An icon, a one-line headline, an optional body, and up to two
+ * actions (primary + secondary). A calm failure moment — not an alarm bell.
+ *
+ *   <ErrorState
+ *     title="Failed to load"
+ *     description={error.message}
+ *     action={<Button variant="outline" size="sm" onClick={refetch}>Retry</Button>}
+ *   />
+ */
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from './empty.js';
+import { cn } from '../lib/utils.js';
+import { WarningIcon as DangerTriangleSolid, } from '@phosphor-icons/react';
+export function ErrorState({ icon: IconComponent = DangerTriangleSolid, title, description, action, secondaryAction, size = 'default', className, }) {
+    const maxW = size === 'sm' ? 'max-w-[240px]' : 'max-w-[320px]';
+    return (_jsxs(Empty, { className: cn('border-none', className), children: [_jsxs(EmptyHeader, { className: maxW, children: [_jsx(EmptyMedia, { className: "mb-4", children: _jsx("div", { className: cn('inline-flex size-10 shrink-0 items-center justify-center rounded-sm border', 'bg-kortix-red/10 text-kortix-red'), children: _jsx(IconComponent, { className: "size-6 shrink-0", weight: "fill" }) }) }), _jsx(EmptyTitle, { className: "text-base font-semibold", children: title }), description && _jsx(EmptyDescription, { className: "mt-1.5", children: description })] }), (action || secondaryAction) && (_jsxs(EmptyContent, { className: "flex-row justify-center gap-2", children: [action, secondaryAction] }))] }));
+}

package/dist/primitives/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/primitives/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/primitives/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/primitives/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/primitives/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?: "outline" | "default" | 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/primitives/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/primitives/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/primitives/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))) }));
+}

package/dist/primitives/glyph-face.d.ts

@@ -0,0 +1,18 @@
+/**
+ * name -> a component that draws a catalogue glyph in the app's icon weight,
+ * without the Phosphor component behind it.
+ *
+ * EntityAvatar is on every app page. Drawing its glyph through
+ * `glyph-registry` shipped all 202 Phosphor components with every shipped
+ * weight — the largest client chunk (345 KB decoded on the project home,
+ * measured 2026-09-27) — to draw one path in one weight. This renders the same
+ * path through Phosphor's own `IconBase`, so the markup, the IconContext
+ * defaults (size, colour, mirroring) and the ref are exactly what the
+ * component rendered. glyph-face.test.tsx asserts the markup matches for every
+ * glyph.
+ *
+ * The glyph picker keeps the full registry: it shows glyphs to choose from and
+ * loads only in the settings and new-workspace forms.
+ */
+import { type Icon } from '@phosphor-icons/react';
+export declare function glyphFace(name: string): Icon | null;

package/dist/primitives/glyph-face.js

@@ -0,0 +1,37 @@
+'use client';
+/**
+ * name -> a component that draws a catalogue glyph in the app's icon weight,
+ * without the Phosphor component behind it.
+ *
+ * EntityAvatar is on every app page. Drawing its glyph through
+ * `glyph-registry` shipped all 202 Phosphor components with every shipped
+ * weight — the largest client chunk (345 KB decoded on the project home,
+ * measured 2026-09-27) — to draw one path in one weight. This renders the same
+ * path through Phosphor's own `IconBase`, so the markup, the IconContext
+ * defaults (size, colour, mirroring) and the ref are exactly what the
+ * component rendered. glyph-face.test.tsx asserts the markup matches for every
+ * glyph.
+ *
+ * The glyph picker keeps the full registry: it shows glyphs to choose from and
+ * loads only in the settings and new-workspace forms.
+ */
+import { IconBase } from '@phosphor-icons/react';
+import { createElement, forwardRef } from 'react';
+import { GLYPH_PATHS } from './glyph-paths.generated.js';
+import { ICON_WEIGHTS } from '../lib/icon-config.js';
+const faces = new Map();
+export function glyphFace(name) {
+    const cached = faces.get(name);
+    if (cached)
+        return cached;
+    if (!Object.hasOwn(GLYPH_PATHS, name))
+        return null;
+    const path = createElement('path', { d: GLYPH_PATHS[name] });
+    // Every weight draws the generated one: an avatar always wears the app's
+    // icon weight, which is the weight the path was generated in.
+    const weights = new Map(ICON_WEIGHTS.map((weight) => [weight, path]));
+    const Face = forwardRef((props, ref) => createElement(IconBase, { ref, ...props, weights }));
+    Face.displayName = `${name}Glyph`;
+    faces.set(name, Face);
+    return Face;
+}

package/dist/primitives/glyph-paths-source.d.ts

@@ -0,0 +1,2 @@
+export declare function glyphPathsInDefaultWeight(): Record<string, string>;
+export declare function renderGlyphPathsModule(): string;

package/dist/primitives/glyph-paths-source.js

@@ -0,0 +1,40 @@
+/**
+ * Build-time only: derives each catalogue glyph's path in the app's icon
+ * weight from its Phosphor component. Imported by
+ * `scripts/generate-glyph-paths.tsx` and by glyph-face.test.tsx (the drift
+ * guard), never by application code — it pulls in the full registry and
+ * react-dom/server.
+ */
+import { IconContext } from '@phosphor-icons/react';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { GLYPH_COMPONENTS } from './glyph-registry.js';
+import { DEFAULT_ICON_WEIGHT } from '../lib/icon-config.js';
+export function glyphPathsInDefaultWeight() {
+    const paths = {};
+    for (const name of Object.keys(GLYPH_COMPONENTS).sort()) {
+        const html = renderToStaticMarkup(createElement(IconContext.Provider, { value: { weight: DEFAULT_ICON_WEIGHT } }, createElement(GLYPH_COMPONENTS[name])));
+        const inner = html.replace(/^<svg[^>]*>/, '').replace(/<\/svg>$/, '');
+        const match = inner.match(/^<path d="([^"]+)"><\/path>$/);
+        if (!match) {
+            throw new Error(`glyph ${name} is not one <path> in weight ${DEFAULT_ICON_WEIGHT}: ${inner.slice(0, 80)}`);
+        }
+        paths[name] = match[1];
+    }
+    return paths;
+}
+export function renderGlyphPathsModule() {
+    const paths = glyphPathsInDefaultWeight();
+    const lines = Object.entries(paths).map(([name, d]) => `  ${JSON.stringify(name)}: ${JSON.stringify(d)},`);
+    return [
+        '// GENERATED by apps/web/scripts/generate-glyph-paths.tsx. Do not edit.',
+        '// The path of every catalogue glyph in DEFAULT_ICON_WEIGHT; see glyph-face.tsx.',
+        '',
+        `export const GLYPH_PATHS_WEIGHT = ${JSON.stringify(DEFAULT_ICON_WEIGHT)};`,
+        '',
+        'export const GLYPH_PATHS: Readonly<Record<string, string>> = {',
+        ...lines,
+        '};',
+        '',
+    ].join('\n');
+}

package/dist/primitives/glyph-paths.generated.d.ts

@@ -0,0 +1,2 @@
+export declare const GLYPH_PATHS_WEIGHT = "bold";
+export declare const GLYPH_PATHS: Readonly<Record<string, string>>;