@atmos.build/ui 0.1.0

package/README.md

@@ -0,0 +1,45 @@
+# atmOS UI
+
+`@atmos/ui` is the component package for atmOS product surfaces and MCP Apps. Its root export contains the complete base component catalog.
+
+## MCP Apps
+
+An extension imports components from the normal package entry:
+
+```tsx
+import { Button, Command, Dialog, DialogContent, Table } from '@atmos/ui'
+```
+
+MCP-specific host integration is available from a subpath of the same package:
+
+```tsx
+import { useAtmosMcpApp } from '@atmos/ui/mcp-app'
+```
+
+The build configuration and stylesheet use their own subpaths:
+
+```ts
+import { atmosMcpAppViteConfig } from '@atmos/ui/mcp-app/vite'
+```
+
+```css
+@import '@atmos/ui/mcp-app/styles.css';
+
+@source './**/*.{ts,tsx}';
+```
+
+The stylesheet scans the complete component catalog, so any component exported by `@atmos/ui` receives its normal Tailwind styles without maintaining a second MCP-specific allowlist.
+
+Inside this repository, extension UI packages resolve `@atmos/ui` through the pnpm workspace. External extensions install an exact public npm version during authoring:
+
+```sh
+npm install --save-exact @atmos/ui react@19 react-dom@19
+```
+
+The compiled `dist/app.js` and `dist/app.css` are committed with the extension and inlined into its MCP App resource. Attaching or opening an extension therefore never installs packages or executes a package manager.
+
+Flow surfaces import their stylesheet explicitly so the JavaScript entry remains server-rendering compatible:
+
+```css
+@import '@atmos/ui/flow/styles.css';
+```

package/dist/components/alert-dialog.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): React.JSX.Element;
+declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): React.JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): React.JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/alert-dialog.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+import { buttonVariants } from "./button.js";
+function AlertDialog({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
+}
+function AlertDialogContent({ className, ...props }) {
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props })] }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
+}
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn("font-heading text-base leading-none font-medium", className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function AlertDialogAction({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Action, { className: cn(buttonVariants({ size: "sm" }), className), ...props }));
+}
+function AlertDialogCancel({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Cancel, { className: cn(buttonVariants({ variant: "outline", size: "sm" }), className), ...props }));
+}
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/at-search.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+import type { UseItemsResult } from './combobox/types.js';
+export interface AtSearchLabels {
+    placeholder: string;
+    resultsLabel: string;
+    loadFailed: string;
+    typeToSearch: string;
+    noMatches: string;
+    teamMembers: (count: number) => string;
+    memberBadge: string;
+}
+export type AtSearchKind = 'member' | 'external' | 'team';
+export type AtSearchItem = {
+    id: string;
+    label: string;
+    sublabel?: string;
+    kind: AtSearchKind;
+    memberCount?: number | null;
+};
+export type AtSearchProps<V> = {
+    useItems: (query: string) => UseItemsResult<AtSearchItem>;
+    toValues: (item: AtSearchItem) => V[];
+    onAdd: (value: V) => void;
+    onCreateFromQuery?: (query: string) => V | null;
+    canCreateFromQuery?: (query: string) => boolean;
+    createLabel?: string;
+    children: ReactNode;
+    placeholder?: string;
+    contentClassName?: string;
+    triggerClassName?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<AtSearchLabels>;
+};
+export declare function AtSearch<V>(props: AtSearchProps<V>): ReactNode;

package/dist/components/at-search.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Building2, Users } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { Avatar } from './avatar.js';
+import { ComboboxContent, ComboboxCreate, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxRoot, ComboboxTrigger, } from './combobox/compound.js';
+import { useCombobox } from './combobox/context.js';
+const DEFAULT_LABELS = {
+    placeholder: 'Search people and teams',
+    resultsLabel: 'Search results',
+    loadFailed: 'Could not load results',
+    typeToSearch: 'Type to search',
+    noMatches: 'No matches',
+    teamMembers: (count) => `${count} members`,
+    memberBadge: 'Member',
+};
+function avatarHue(key) {
+    let hash = 0;
+    for (let i = 0; i < key.length; i += 1) {
+        hash = (hash * 31 + key.charCodeAt(i)) >>> 0;
+    }
+    return `oklch(65% 0.12 ${hash % 360})`;
+}
+export function AtSearch(props) {
+    const { children, triggerClassName, contentClassName, open, onOpenChange, ...body } = props;
+    return (_jsxs(ComboboxRoot, { open: open, onOpenChange: onOpenChange, children: [_jsx(ComboboxTrigger, { className: triggerClassName, children: children }), _jsx(ComboboxContent, { className: contentClassName, children: _jsx(Body, { ...body }) })] }));
+}
+function Body({ useItems, toValues, onAdd, onCreateFromQuery, canCreateFromQuery, createLabel, placeholder, labels: labelsProp, }) {
+    const labels = { ...DEFAULT_LABELS, ...labelsProp };
+    const { query, debouncedQuery, setOpen } = useCombobox();
+    const result = useItems(debouncedQuery);
+    const items = useMemo(() => result.data ?? [], [result.data]);
+    const trimmedQuery = query.trim();
+    const isPending = result.isLoading || trimmedQuery !== debouncedQuery.trim();
+    const showCreate = !!onCreateFromQuery &&
+        trimmedQuery.length > 0 &&
+        (canCreateFromQuery ? canCreateFromQuery(trimmedQuery) : true) &&
+        !items.some((i) => i.label.toLowerCase() === trimmedQuery.toLowerCase());
+    const addItem = (item) => {
+        for (const value of toValues(item))
+            onAdd(value);
+        setOpen(false);
+    };
+    const create = () => {
+        const value = onCreateFromQuery?.(trimmedQuery);
+        if (value != null)
+            onAdd(value);
+        setOpen(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ComboboxInput, { placeholder: placeholder ?? labels.placeholder, triggerKey: "@", loading: isPending }), _jsxs(ComboboxList, { label: labels.resultsLabel, children: [result.isError && items.length === 0 ? (_jsx(ComboboxEmpty, { children: labels.loadFailed })) : items.length === 0 && !showCreate ? (_jsx(ComboboxEmpty, { pending: isPending, children: trimmedQuery.length === 0 ? labels.typeToSearch : labels.noMatches })) : (items.map((item) => (_jsx(ComboboxItem, { value: item.id, onSelect: () => addItem(item), children: ({ active }) => _jsx(Row, { item: item, active: active, labels: labels }) }, item.id)))), showCreate && createLabel ? (_jsx(ComboboxCreate, { query: trimmedQuery, onCreate: create, label: createLabel })) : null] })] }));
+}
+function Row({ item, active, labels, }) {
+    const isTeam = item.kind === 'team';
+    const hue = avatarHue(item.sublabel ?? item.label);
+    return (_jsxs("span", { className: cn('flex w-full min-w-0 items-center gap-2', active && 'text-accent-foreground'), children: [_jsx(Avatar, { size: "sm", name: item.label, color: hue, "aria-label": item.label, className: "shrink-0", children: isTeam ? _jsx(Users, { className: "size-3", strokeWidth: 2, "aria-hidden": true }) : undefined }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "text-foreground truncate text-[12.5px]", children: item.label }), item.sublabel ? (_jsx("span", { className: "text-muted-foreground truncate font-mono text-[10.5px]", children: item.sublabel })) : null] }), isTeam ? (_jsxs("span", { className: "bg-muted text-muted-foreground ml-auto inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-[10.5px]", children: [_jsx(Building2, { className: "size-2.5", strokeWidth: 1.5, "aria-hidden": true }), labels.teamMembers(item.memberCount ?? 0)] })) : item.kind === 'member' ? (_jsx("span", { className: "bg-primary/10 text-primary ml-auto rounded-sm px-1.5 py-0.5 text-[10.5px]", children: labels.memberBadge })) : null] }));
+}

package/dist/components/attachment-thumbnail-stack.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const TILE_SIZE: {
+    readonly sm: "size-7";
+    readonly md: "size-9";
+};
+export interface AttachmentThumbnailStackProps extends React.ComponentProps<'span'> {
+    size?: keyof typeof TILE_SIZE;
+    /** Rendered as a trailing `+n` tile when the caller shows fewer thumbnails than it has items. */
+    overflowCount?: number;
+    label?: string;
+}
+export declare const AttachmentThumbnailStack: React.ForwardRefExoticComponent<Omit<AttachmentThumbnailStackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/attachment-thumbnail-stack.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+const TILE_SIZE = { sm: 'size-7', md: 'size-9' };
+const TILE_OVERLAP = { sm: '-ml-3', md: '-ml-4' };
+// Cycled so a stack of any length keeps the hand-dropped look without a random seed.
+const TILT_DEGREES = [-7, 5, -3, 8, -5, 4];
+const SHIFT_PIXELS = [0, -1.5, 1.5, -1, 1, -2];
+export const AttachmentThumbnailStack = React.forwardRef(function AttachmentThumbnailStack({ size = 'sm', overflowCount = 0, label, className, children, ...props }, ref) {
+    const tiles = React.Children.toArray(children).filter(React.isValidElement);
+    if (tiles.length === 0 && overflowCount <= 0)
+        return null;
+    const total = tiles.length + (overflowCount > 0 ? 1 : 0);
+    return (_jsxs("span", { ref: ref, "data-slot": "attachment-thumbnail-stack", role: "img", "aria-label": label, className: cn('group/thumbnail-stack flex shrink-0 items-center', className), ...props, children: [tiles.map((tile, index) => (_jsx(ThumbnailTile, { size: size, index: index, total: total, children: tile }, tile.key ?? index))), overflowCount > 0 ? (_jsx(ThumbnailTile, { size: size, index: tiles.length, total: total, children: _jsxs("span", { className: "text-muted-foreground flex size-full items-center justify-center text-[10px] tabular-nums", children: ["+", overflowCount] }) })) : null] }));
+});
+function ThumbnailTile({ size, index, total, children, }) {
+    return (_jsx("span", { "data-slot": "attachment-thumbnail", style: {
+            '--thumbnail-tilt': `${TILT_DEGREES[index % TILT_DEGREES.length]}deg`,
+            '--thumbnail-shift': `${SHIFT_PIXELS[index % SHIFT_PIXELS.length]}px`,
+            zIndex: total - index,
+        }, className: cn('border-border/60 bg-card relative block shrink-0 overflow-hidden rounded-md border shadow-sm', 'transition-transform duration-200 ease-out motion-reduce:transition-none', '[transform:rotate(var(--thumbnail-tilt))_translateY(var(--thumbnail-shift))]', 'group-hover/thumbnail-stack:[transform:rotate(0deg)]', TILE_SIZE[size], index > 0 && TILE_OVERLAP[size]), children: children }));
+}

package/dist/components/audio-preview.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const root: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AudioPreviewSourceResolver = () => Promise<string | null>;
+export interface AudioPreviewLabels {
+    play: string;
+    pause: string;
+    download: string;
+    loading: string;
+    error: string;
+    empty: string;
+}
+export interface AudioPreviewProps extends Omit<React.ComponentProps<'div'>, 'title' | 'onDurationChange' | 'onTimeUpdate'>, VariantProps<typeof root> {
+    src?: string | null;
+    loadSrc?: AudioPreviewSourceResolver;
+    label?: React.ReactNode;
+    meta?: React.ReactNode;
+    labels: AudioPreviewLabels;
+    state?: 'auto' | 'loading' | 'error' | 'empty';
+    peaks?: number[] | null;
+    showDownload?: boolean;
+    downloadName?: string;
+    monoClassName?: string;
+    preload?: 'none' | 'metadata' | 'auto';
+    mediaRef?: React.RefCallback<HTMLAudioElement | null>;
+    onTimeUpdate?: (currentTime: number) => void;
+    onDurationChange?: (duration: number) => void;
+    onPlayingChange?: (playing: boolean) => void;
+}
+declare function AudioPreview({ src, loadSrc, label, meta, labels, state, peaks, showDownload, downloadName, monoClassName, preload, mediaRef, onTimeUpdate, onDurationChange, onPlayingChange, size, className, ...props }: AudioPreviewProps): React.JSX.Element;
+export { AudioPreview };

package/dist/components/audio-preview.js

@@ -0,0 +1,176 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { AlertCircle, Download, Loader2, Pause, Play } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+const root = cva('group/audio-preview flex items-center gap-2 rounded-md border border-border/60 bg-muted/[0.18] text-foreground', {
+    variants: {
+        size: {
+            sm: 'px-2.5 py-2',
+            md: 'px-3 py-3',
+        },
+    },
+    defaultVariants: { size: 'md' },
+});
+function formatSeconds(seconds) {
+    const total = Math.max(0, Math.floor(seconds));
+    const min = Math.floor(total / 60);
+    const sec = total % 60;
+    return `${min}:${sec.toString().padStart(2, '0')}`;
+}
+function AudioPreview({ src, loadSrc, label, meta, labels, state = 'auto', peaks, showDownload, downloadName, monoClassName, preload = 'none', mediaRef, onTimeUpdate, onDurationChange, onPlayingChange, size, className, ...props }) {
+    const audioRef = React.useRef(null);
+    const setAudioRef = React.useCallback((node) => {
+        audioRef.current = node;
+        mediaRef?.(node);
+    }, [mediaRef]);
+    const [resolvedSrc, setResolvedSrc] = React.useState(src ?? null);
+    const [status, setStatus] = React.useState(src ? 'ready' : 'idle');
+    const [isPlaying, setIsPlaying] = React.useState(false);
+    const [currentTime, setCurrentTime] = React.useState(0);
+    const [duration, setDuration] = React.useState(0);
+    const [prevSrc, setPrevSrc] = React.useState(src);
+    if (src !== prevSrc) {
+        setPrevSrc(src);
+        setResolvedSrc(src ?? null);
+        setStatus(src ? 'ready' : 'idle');
+        setIsPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+    }
+    const forced = state !== 'auto';
+    const empty = state === 'empty' || (!forced && !src && !loadSrc);
+    const loading = state === 'loading' || (!forced && status === 'loading');
+    const errored = state === 'error' || (!forced && status === 'error');
+    const placeholder = empty
+        ? labels.empty
+        : loading
+            ? labels.loading
+            : errored
+                ? labels.error
+                : null;
+    const playable = !forced && (Boolean(resolvedSrc) || Boolean(loadSrc));
+    const totalDuration = Number.isFinite(duration) ? duration : 0;
+    const progress = totalDuration > 0 ? Math.min(1, Math.max(0, currentTime / totalDuration)) : 0;
+    const ensureSrc = React.useCallback(async () => {
+        if (resolvedSrc)
+            return resolvedSrc;
+        if (!loadSrc)
+            return null;
+        setStatus('loading');
+        try {
+            const next = await loadSrc();
+            if (!next) {
+                setStatus('error');
+                return null;
+            }
+            setResolvedSrc(next);
+            setStatus('ready');
+            return next;
+        }
+        catch {
+            setStatus('error');
+            return null;
+        }
+    }, [resolvedSrc, loadSrc]);
+    const togglePlay = React.useCallback(async () => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        if (!audio.paused) {
+            audio.pause();
+            return;
+        }
+        if (!resolvedSrc) {
+            const next = await ensureSrc();
+            if (!next || !audioRef.current)
+                return;
+            if (audioRef.current.src !== next) {
+                audioRef.current.src = next;
+                audioRef.current.load();
+            }
+        }
+        void audioRef.current?.play().catch(() => setStatus('error'));
+    }, [resolvedSrc, ensureSrc]);
+    const seekToFraction = React.useCallback((fraction) => {
+        const audio = audioRef.current;
+        if (!audio || !totalDuration)
+            return;
+        const clamped = Math.min(1, Math.max(0, fraction));
+        audio.currentTime = clamped * totalDuration;
+        setCurrentTime(audio.currentTime);
+    }, [totalDuration]);
+    if (placeholder) {
+        return (_jsxs("div", { className: cn(root({ size }), 'border-dashed text-muted-foreground gap-1.5 text-xs', errored && 'text-destructive border-destructive/40', className), "data-slot": "audio-preview", "data-state": empty ? 'empty' : loading ? 'loading' : 'error', ...props, children: [loading ? (_jsx(Loader2, { className: "size-3.5 animate-spin", strokeWidth: 1.6, "aria-hidden": true })) : errored ? (_jsx(AlertCircle, { className: "size-3.5", strokeWidth: 1.6, "aria-hidden": true })) : null, _jsx("span", { className: "truncate", children: placeholder })] }));
+    }
+    const wantsDownload = showDownload ?? Boolean(resolvedSrc);
+    return (_jsxs("div", { className: cn(root({ size }), className), "data-slot": "audio-preview", "data-state": isPlaying ? 'playing' : 'paused', ...props, children: [_jsx("button", { type: "button", onClick: () => void togglePlay(), disabled: !playable, "aria-label": isPlaying ? labels.pause : labels.play, className: cn('flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors', 'hover:bg-muted focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 outline-none', 'disabled:pointer-events-none disabled:opacity-50'), children: isPlaying ? (_jsx(Pause, { className: "size-3.5", strokeWidth: 1.6, "aria-hidden": true })) : (_jsx(Play, { className: "size-3.5", strokeWidth: 1.6, "aria-hidden": true })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [(label || meta) && (_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [label ? _jsx("span", { className: "truncate text-xs text-foreground/90", children: label }) : _jsx("span", {}), meta ? (_jsx("span", { className: cn('shrink-0 text-[10px] text-muted-foreground tabular-nums', monoClassName ?? 'font-mono'), children: meta })) : null] })), _jsx(ProgressTrack, { peaks: peaks, progress: progress, disabled: !totalDuration, onSeek: seekToFraction, className: cn((label || meta) && 'mt-1') }), _jsxs("div", { className: cn('mt-1 text-[10px] text-muted-foreground tabular-nums', monoClassName ?? 'font-mono'), children: [formatSeconds(Math.max(0, currentTime)), totalDuration > 0 ? ` / ${formatSeconds(totalDuration)}` : ''] })] }), wantsDownload && resolvedSrc ? (_jsx("a", { href: resolvedSrc, download: downloadName ?? true, "aria-label": labels.download, title: labels.download, className: cn('flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors', 'hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 outline-none'), children: _jsx(Download, { className: "size-3.5", strokeWidth: 1.6, "aria-hidden": true }) })) : null, _jsx("audio", { ref: setAudioRef, preload: preload, src: resolvedSrc ?? undefined, className: "hidden", onPlay: () => {
+                    setIsPlaying(true);
+                    onPlayingChange?.(true);
+                }, onPause: () => {
+                    setIsPlaying(false);
+                    onPlayingChange?.(false);
+                }, onEnded: () => {
+                    setIsPlaying(false);
+                    onPlayingChange?.(false);
+                }, onError: () => {
+                    if (resolvedSrc)
+                        setStatus('error');
+                }, onTimeUpdate: (event) => {
+                    setCurrentTime(event.currentTarget.currentTime);
+                    onTimeUpdate?.(event.currentTarget.currentTime);
+                }, onLoadedMetadata: (event) => {
+                    setDuration(event.currentTarget.duration);
+                    onDurationChange?.(event.currentTarget.duration);
+                }, children: _jsx("track", { kind: "captions" }) })] }));
+}
+function ProgressTrack({ peaks, progress, disabled, onSeek, className, }) {
+    const handle = (event) => {
+        if (disabled)
+            return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        if (rect.width <= 0)
+            return;
+        onSeek((event.clientX - rect.left) / rect.width);
+    };
+    const onKeyDown = (event) => {
+        if (disabled)
+            return;
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            onSeek(Math.min(1, progress + 0.05));
+        }
+        else if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            onSeek(Math.max(0, progress - 0.05));
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            onSeek(0);
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            onSeek(1);
+        }
+    };
+    const sharedProps = {
+        role: 'slider',
+        tabIndex: disabled ? -1 : 0,
+        'aria-valuemin': 0,
+        'aria-valuemax': 100,
+        'aria-valuenow': Math.round(progress * 100),
+        'aria-disabled': disabled || undefined,
+        onClick: handle,
+        onKeyDown,
+        className: cn('w-full cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50', disabled && 'cursor-default', className),
+    };
+    if (peaks && peaks.length > 0) {
+        return (_jsx("div", { ...sharedProps, children: _jsx("span", { className: "flex h-5 w-full items-center gap-[2px]", children: peaks.map((p, i) => {
+                    const played = i / peaks.length <= progress;
+                    return (_jsx("span", { className: cn('w-full rounded-full transition-colors', played ? 'bg-primary' : 'bg-muted-foreground/30'), style: { height: `${Math.max(8, Math.round(p * 100))}%` } }, i));
+                }) }) }));
+    }
+    return (_jsx("div", { ...sharedProps, children: _jsx("span", { className: "bg-muted flex h-1.5 w-full overflow-hidden rounded-full", children: _jsx("span", { className: "bg-primary h-full rounded-full", style: { width: `${Math.round(progress * 100)}%` } }) }) }));
+}
+export { AudioPreview };

package/dist/components/avatar-uploader.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+export interface AvatarUploaderLabels {
+    editAvatar: string;
+    uploadImage: string;
+    replaceImage: string;
+    removeImage: string;
+    removeHint: string;
+    mustBeImage: string;
+    tooLarge: (megabytes: number) => string;
+}
+export interface AvatarUploaderProps {
+    currentFileId: string | null | undefined;
+    currentUrl?: string | null;
+    fallbackInitials: string;
+    kind: 'avatar' | 'logo';
+    onChange: (fileId: string | null) => void | Promise<void>;
+    onUpload: (file: File, kind: 'avatar' | 'logo') => Promise<{
+        id: string;
+    }>;
+    labels: AvatarUploaderLabels;
+    size?: number;
+    disabled?: boolean;
+    className?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    menuExtra?: ReactNode;
+    frameClassName?: string;
+}
+export declare function AvatarUploader({ currentFileId, currentUrl, fallbackInitials, kind, onChange, onUpload, labels, size, disabled, className, open: openProp, onOpenChange, menuExtra, frameClassName, }: AvatarUploaderProps): import("react").JSX.Element;

package/dist/components/avatar-uploader.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Camera, Pencil, Trash2 } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { Button } from './button.js';
+import { Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger } from './popover.js';
+import { TerminalSpinner } from './terminal-spinner.js';
+const MAX_BYTES = 5 * 1024 * 1024;
+export function AvatarUploader({ currentFileId, currentUrl, fallbackInitials, kind, onChange, onUpload, labels, size = 56, disabled, className, open: openProp, onOpenChange, menuExtra, frameClassName, }) {
+    const inputRef = useRef(null);
+    const [error, setError] = useState(null);
+    const [uploading, setUploading] = useState(false);
+    const [openState, setOpenState] = useState(false);
+    const open = openProp ?? openState;
+    const setOpen = (next) => {
+        setOpenState(next);
+        onOpenChange?.(next);
+    };
+    const blocked = disabled || uploading;
+    const handlePick = async (file) => {
+        if (!file)
+            return;
+        setError(null);
+        if (!file.type.startsWith('image/')) {
+            setError(labels.mustBeImage);
+            return;
+        }
+        if (file.size > MAX_BYTES) {
+            setError(labels.tooLarge(MAX_BYTES / 1024 / 1024));
+            return;
+        }
+        setUploading(true);
+        try {
+            const uploaded = await onUpload(file, kind);
+            await onChange(uploaded.id);
+        }
+        catch (uploadError) {
+            setError(uploadError instanceof Error ? uploadError.message : String(uploadError));
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    const handleClear = async () => {
+        setError(null);
+        setOpen(false);
+        try {
+            await onChange(null);
+        }
+        catch (clearError) {
+            setError(clearError instanceof Error ? clearError.message : String(clearError));
+        }
+    };
+    const openPicker = () => {
+        if (blocked)
+            return;
+        setError(null);
+        inputRef.current?.click();
+        setOpen(false);
+    };
+    return (_jsxs("div", { "data-slot": "avatar-uploader", className: cn('inline-flex flex-col items-start gap-1.5', className), children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: blocked, "aria-label": labels.editAvatar, className: cn('group bg-primary text-primary-foreground ring-border focus-visible:ring-ring relative flex shrink-0 items-center justify-center overflow-hidden rounded-full font-medium shadow-sm ring-1 transition outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-70', frameClassName), style: { width: size, height: size, fontSize: Math.round(size * 0.32) }, children: [currentUrl ? (_jsx("img", { src: currentUrl, alt: "", className: "size-full object-cover" })) : (fallbackInitials), _jsx("span", { className: cn('bg-foreground/45 absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100', open && 'opacity-100'), "aria-hidden": true, children: _jsx("span", { className: "bg-background text-foreground ring-border grid size-7 place-items-center rounded-full shadow-sm ring-1", children: _jsx(Pencil, { className: "size-3.5", strokeWidth: 1.5 }) }) }), uploading ? (_jsx("span", { className: "bg-foreground/45 absolute inset-0 flex items-center justify-center", children: _jsx(TerminalSpinner, { className: "text-background text-sm" }) })) : null] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 8, className: "w-64 gap-1.5 p-2", children: [_jsx(PopoverHeader, { className: "px-2 py-1.5", children: _jsx(PopoverTitle, { className: "text-sm", children: labels.editAvatar }) }), _jsxs(Button, { type: "button", variant: "ghost", disabled: blocked, onClick: openPicker, className: "h-auto justify-start gap-3 px-2 py-2 text-left", children: [_jsx("span", { className: "bg-muted text-foreground grid size-8 shrink-0 place-items-center rounded-md", children: _jsx(Camera, { className: "size-4", strokeWidth: 1.5 }) }), _jsx("span", { className: "min-w-0 text-xs font-medium", children: currentFileId ? labels.replaceImage : labels.uploadImage })] }), currentFileId ? (_jsxs(Button, { type: "button", variant: "ghost", disabled: blocked, onClick: () => void handleClear(), className: "text-destructive hover:text-destructive h-auto justify-start gap-3 px-2 py-2 text-left", children: [_jsx("span", { className: "bg-destructive/10 text-destructive grid size-8 shrink-0 place-items-center rounded-md", children: _jsx(Trash2, { className: "size-4", strokeWidth: 1.5 }) }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block text-xs font-medium", children: labels.removeImage }), _jsx("span", { className: "text-destructive/75 mt-0.5 block text-xs font-normal", children: labels.removeHint })] })] })) : null, menuExtra ? (_jsx("div", { className: "border-border/60 mt-1 border-t px-1 pt-2.5 pb-1.5", children: menuExtra })) : null] })] }), _jsx("input", { ref: inputRef, type: "file", accept: "image/png,image/jpeg,image/webp,image/svg+xml,image/gif", className: "hidden", disabled: blocked, "aria-label": labels.uploadImage, onChange: (event) => {
+                    const file = event.currentTarget.files?.[0];
+                    event.currentTarget.value = '';
+                    void handlePick(file);
+                } }), error ? _jsx("div", { className: "text-destructive text-xs", children: error }) : null] }));
+}

package/dist/components/avatar.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "default" | "xs" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AvatarProps extends Omit<React.ComponentProps<'span'>, 'color'>, VariantProps<typeof avatarVariants> {
+    name?: string;
+    color?: string;
+}
+export declare function initialsFromName(name: string): string;
+export declare function Avatar({ className, size, name, color, children, style, ...props }: AvatarProps): React.JSX.Element;
+export { avatarVariants };

package/dist/components/avatar.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../lib/cn.js';
+// A compact initials avatar — the small round marker that stands in for a person
+// wherever a photo isn't shown (comment authors, presence cursors, member
+// lists). Generalised as an atom so every "who did this" marker reads as one
+// system. Purely presentational: pass a `name` (initials are derived) and an
+// optional brand/presence `color`; with no colour it falls back to the muted
+// token so it stays theme-correct.
+const avatarVariants = cva('atmos-avatar inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full font-medium leading-none', {
+    variants: {
+        size: {
+            xs: 'size-4 text-[8px]',
+            sm: 'size-5 text-[9px]',
+            default: 'size-6 text-[10px]',
+            lg: 'size-8 text-xs',
+        },
+    },
+    defaultVariants: { size: 'default' },
+});
+// Two-letter initials from a display name: first letter of the first and last
+// word, else the first two letters of a single word.
+export function initialsFromName(name) {
+    const parts = name.trim().split(/\s+/u).filter(Boolean);
+    const first = parts[0] ?? '';
+    if (!first)
+        return '?';
+    if (parts.length === 1)
+        return first.slice(0, 2).toUpperCase();
+    const last = parts[parts.length - 1] ?? '';
+    return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
+}
+export function Avatar({ className, size, name, color, children, style, ...props }) {
+    const content = children ?? (name ? initialsFromName(name) : '?');
+    return (_jsx("span", { "data-slot": "avatar", "aria-hidden": props['aria-label'] ? undefined : true, className: cn(avatarVariants({ size }), color ? 'text-white' : 'bg-muted text-foreground/80', className), style: color ? { background: color, ...style } : style, ...props, children: content }));
+}
+export { avatarVariants };

package/dist/components/badge.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/badge.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { cn } from '../lib/cn.js';
+const badgeVariants = cva('group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+            secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+            destructive: 'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+            outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+            ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function Badge({ className, variant = 'default', asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : 'span';
+    return (_jsx(Comp, { "data-slot": 'badge', "data-variant": variant, className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };