@atmos.build/ui 0.1.0

package/dist/components/note-icon.js

@@ -0,0 +1,353 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Archive, ArrowDownUp, AtSign, BadgeCheck, Banknote, Bell, Bookmark, BookOpen, Bot, Box, Brain, Bug, Building2, Calculator, CalendarClock, BriefcaseBusiness, CalendarDays, Camera, ChartBar, ChartColumn, ChartLine, CheckCircle2, CircleDot, ClipboardList, Cloud, Cog, Code2, Cpu, CreditCard, Database, DollarSign, Download, Eye, FileArchive, FileCheck2, FileCode2, FileImage, FileJson, FilePenLine, FileSpreadsheet, FileText, FileType2, Filter, Folder, FolderKanban, Flag, FlaskConical, Gauge, GitBranch, GitCommitHorizontal, GitPullRequest, Globe, Goal, Handshake, HardDrive, Heart, HelpCircle, History, Home, Inbox, Key, Landmark, Languages, LayoutDashboard, Layers, Library, Lightbulb, Link, ListChecks, Lock, Mail, Map as MapIcon, Megaphone, MessageCircle, MessagesSquare, Mic, Monitor, Network, Newspaper, NotebookPen, Package, Paintbrush, Palette, Paperclip, PenLine, Phone, PieChart, Pin, Play, Plug, Puzzle, Receipt, RefreshCw, Route, Rocket, Search, Send, Server, ShieldCheck, ShoppingCart, SlidersHorizontal, Sparkles, Star, StickyNote, Store, Table2, Tag, Target, Terminal, Timer, Trash2, TrendingUp, Trophy, Upload, UserCheck, UserRound, Users, Video, Wallet, WandSparkles, Workflow, Wrench, Zap, } from 'lucide-react';
+import emojiMartData from '@emoji-mart/data/sets/15/native.json' with { type: 'json' };
+import { cn } from '../lib/cn.js';
+export const NOTE_ICON_DEFS = [
+    { id: 'file-text', label: 'Document', keywords: 'note doc page paper', Icon: FileText },
+    {
+        id: 'file-pen-line',
+        label: 'Draft',
+        keywords: 'draft write edit compose page',
+        Icon: FilePenLine,
+    },
+    {
+        id: 'file-check-2',
+        label: 'Approved',
+        keywords: 'approved verified complete done file',
+        Icon: FileCheck2,
+    },
+    {
+        id: 'file-code-2',
+        label: 'Code file',
+        keywords: 'code developer engineering source file',
+        Icon: FileCode2,
+    },
+    {
+        id: 'file-spreadsheet',
+        label: 'Sheet',
+        keywords: 'spreadsheet table grid data csv',
+        Icon: FileSpreadsheet,
+    },
+    { id: 'file-json', label: 'Data file', keywords: 'json api data schema file', Icon: FileJson },
+    { id: 'file-image', label: 'Image', keywords: 'image photo media asset', Icon: FileImage },
+    {
+        id: 'file-archive',
+        label: 'Archive',
+        keywords: 'archive zip package storage',
+        Icon: FileArchive,
+    },
+    { id: 'file-type-2', label: 'Text', keywords: 'text typography copy words', Icon: FileType2 },
+    { id: 'book-open', label: 'Book', keywords: 'wiki knowledge handbook docs', Icon: BookOpen },
+    { id: 'library', label: 'Library', keywords: 'library knowledge collection docs', Icon: Library },
+    { id: 'newspaper', label: 'Article', keywords: 'article post news publication', Icon: Newspaper },
+    {
+        id: 'notebook-pen',
+        label: 'Notebook',
+        keywords: 'notebook journal notes writing',
+        Icon: NotebookPen,
+    },
+    { id: 'sticky-note', label: 'Sticky', keywords: 'sticky note reminder memo', Icon: StickyNote },
+    {
+        id: 'clipboard-list',
+        label: 'Clipboard',
+        keywords: 'clipboard list checklist operations',
+        Icon: ClipboardList,
+    },
+    { id: 'lightbulb', label: 'Idea', keywords: 'idea insight thought brainstorm', Icon: Lightbulb },
+    {
+        id: 'list-checks',
+        label: 'Checklist',
+        keywords: 'todo tasks checklist plan',
+        Icon: ListChecks,
+    },
+    {
+        id: 'check-circle-2',
+        label: 'Complete',
+        keywords: 'complete done check success',
+        Icon: CheckCircle2,
+    },
+    { id: 'target', label: 'Goal', keywords: 'goal target objective focus', Icon: Target },
+    { id: 'goal', label: 'Objective', keywords: 'objective goal target outcome', Icon: Goal },
+    { id: 'rocket', label: 'Launch', keywords: 'launch ship rocket release', Icon: Rocket },
+    { id: 'flag', label: 'Milestone', keywords: 'flag milestone priority', Icon: Flag },
+    { id: 'trophy', label: 'Win', keywords: 'win trophy achievement award', Icon: Trophy },
+    { id: 'route', label: 'Path', keywords: 'route path journey roadmap', Icon: Route },
+    { id: 'map', label: 'Map', keywords: 'map roadmap journey location', Icon: MapIcon },
+    { id: 'calendar-days', label: 'Calendar', keywords: 'date schedule meeting', Icon: CalendarDays },
+    {
+        id: 'calendar-clock',
+        label: 'Schedule',
+        keywords: 'schedule date time calendar',
+        Icon: CalendarClock,
+    },
+    { id: 'timer', label: 'Timer', keywords: 'timer duration time countdown', Icon: Timer },
+    { id: 'history', label: 'History', keywords: 'history past recent audit', Icon: History },
+    { id: 'users', label: 'People', keywords: 'team users members people', Icon: Users },
+    { id: 'user-round', label: 'Person', keywords: 'person user human', Icon: UserRound },
+    {
+        id: 'user-check',
+        label: 'Assignee',
+        keywords: 'assignee owner user responsible',
+        Icon: UserCheck,
+    },
+    { id: 'at-sign', label: 'Mention', keywords: 'mention email handle at', Icon: AtSign },
+    { id: 'phone', label: 'Phone', keywords: 'phone call person', Icon: Phone },
+    { id: 'mail', label: 'Mail', keywords: 'mail email inbox message', Icon: Mail },
+    {
+        id: 'message-circle',
+        label: 'Message',
+        keywords: 'message chat comment conversation',
+        Icon: MessageCircle,
+    },
+    {
+        id: 'messages-square',
+        label: 'Chat',
+        keywords: 'chat messages conversation thread',
+        Icon: MessagesSquare,
+    },
+    { id: 'mic', label: 'Voice', keywords: 'voice audio mic recording', Icon: Mic },
+    { id: 'video', label: 'Video', keywords: 'video camera meeting recording', Icon: Video },
+    {
+        id: 'briefcase-business',
+        label: 'Work',
+        keywords: 'work business client project',
+        Icon: BriefcaseBusiness,
+    },
+    {
+        id: 'building-2',
+        label: 'Organization',
+        keywords: 'organization account office',
+        Icon: Building2,
+    },
+    { id: 'store', label: 'Store', keywords: 'store retail shop customer', Icon: Store },
+    { id: 'landmark', label: 'Finance', keywords: 'finance bank institution money', Icon: Landmark },
+    { id: 'handshake', label: 'Deal', keywords: 'deal partnership contract sales', Icon: Handshake },
+    { id: 'receipt', label: 'Receipt', keywords: 'receipt invoice expense billing', Icon: Receipt },
+    { id: 'wallet', label: 'Wallet', keywords: 'wallet billing payment money', Icon: Wallet },
+    { id: 'credit-card', label: 'Card', keywords: 'card payment billing credit', Icon: CreditCard },
+    { id: 'banknote', label: 'Budget', keywords: 'budget cash money finance', Icon: Banknote },
+    { id: 'dollar-sign', label: 'Revenue', keywords: 'revenue money sales dollar', Icon: DollarSign },
+    {
+        id: 'shopping-cart',
+        label: 'Cart',
+        keywords: 'cart commerce purchase order',
+        Icon: ShoppingCart,
+    },
+    { id: 'bot', label: 'Agent', keywords: 'agent ai bot', Icon: Bot },
+    { id: 'brain', label: 'Thinking', keywords: 'thinking ai brain intelligence', Icon: Brain },
+    {
+        id: 'wand-sparkles',
+        label: 'Assist',
+        keywords: 'assist magic ai generate',
+        Icon: WandSparkles,
+    },
+    { id: 'workflow', label: 'Workflow', keywords: 'workflow process temporal', Icon: Workflow },
+    { id: 'git-branch', label: 'Branch', keywords: 'branch workflow git path', Icon: GitBranch },
+    {
+        id: 'git-commit-horizontal',
+        label: 'Commit',
+        keywords: 'commit change version git',
+        Icon: GitCommitHorizontal,
+    },
+    {
+        id: 'git-pull-request',
+        label: 'Review',
+        keywords: 'review pull request merge approval',
+        Icon: GitPullRequest,
+    },
+    { id: 'play', label: 'Run', keywords: 'run play start execute', Icon: Play },
+    { id: 'refresh-cw', label: 'Sync', keywords: 'sync refresh update repeat', Icon: RefreshCw },
+    { id: 'send', label: 'Send', keywords: 'send deliver outbound message', Icon: Send },
+    { id: 'code-2', label: 'Code', keywords: 'code engineering dev technical', Icon: Code2 },
+    { id: 'terminal', label: 'Terminal', keywords: 'terminal shell cli command', Icon: Terminal },
+    { id: 'bug', label: 'Bug', keywords: 'bug issue defect fix', Icon: Bug },
+    { id: 'wrench', label: 'Tools', keywords: 'tools repair maintenance settings', Icon: Wrench },
+    { id: 'cog', label: 'Settings', keywords: 'settings config preferences gear', Icon: Cog },
+    {
+        id: 'sliders-horizontal',
+        label: 'Controls',
+        keywords: 'controls sliders tuning filters',
+        Icon: SlidersHorizontal,
+    },
+    { id: 'plug', label: 'Integration', keywords: 'integration connector plug source', Icon: Plug },
+    { id: 'puzzle', label: 'Module', keywords: 'module puzzle component', Icon: Puzzle },
+    { id: 'package', label: 'Package', keywords: 'package bundle release artifact', Icon: Package },
+    { id: 'box', label: 'Box', keywords: 'box inventory storage object', Icon: Box },
+    { id: 'server', label: 'Server', keywords: 'server backend service api', Icon: Server },
+    { id: 'database', label: 'Database', keywords: 'database postgres data table', Icon: Database },
+    { id: 'hard-drive', label: 'Storage', keywords: 'storage disk drive files', Icon: HardDrive },
+    { id: 'cloud', label: 'Cloud', keywords: 'cloud remote hosted infra', Icon: Cloud },
+    { id: 'cpu', label: 'Compute', keywords: 'compute cpu processor runtime', Icon: Cpu },
+    { id: 'network', label: 'Network', keywords: 'network graph connected nodes', Icon: Network },
+    { id: 'monitor', label: 'Desktop', keywords: 'desktop monitor screen app', Icon: Monitor },
+    { id: 'globe', label: 'Web', keywords: 'web internet global public', Icon: Globe },
+    { id: 'link', label: 'Link', keywords: 'link url connection reference', Icon: Link },
+    {
+        id: 'flask-conical',
+        label: 'Experiment',
+        keywords: 'experiment lab research test',
+        Icon: FlaskConical,
+    },
+    { id: 'calculator', label: 'Formula', keywords: 'formula calculator math', Icon: Calculator },
+    { id: 'gauge', label: 'Metric', keywords: 'metric gauge performance status', Icon: Gauge },
+    { id: 'chart-line', label: 'Trend', keywords: 'trend chart line analytics', Icon: ChartLine },
+    { id: 'chart-bar', label: 'Chart', keywords: 'chart bar analytics report', Icon: ChartBar },
+    {
+        id: 'chart-column',
+        label: 'Report',
+        keywords: 'report chart columns dashboard',
+        Icon: ChartColumn,
+    },
+    { id: 'pie-chart', label: 'Segment', keywords: 'segment pie chart audience', Icon: PieChart },
+    { id: 'trending-up', label: 'Growth', keywords: 'growth trend up metrics', Icon: TrendingUp },
+    { id: 'table-2', label: 'Table', keywords: 'table grid records database', Icon: Table2 },
+    {
+        id: 'layout-dashboard',
+        label: 'Dashboard',
+        keywords: 'dashboard view analytics panels',
+        Icon: LayoutDashboard,
+    },
+    { id: 'layers', label: 'Layers', keywords: 'layers stack segments facets', Icon: Layers },
+    { id: 'filter', label: 'Filter', keywords: 'filter refine query conditions', Icon: Filter },
+    { id: 'search', label: 'Search', keywords: 'search find lookup discover', Icon: Search },
+    { id: 'eye', label: 'View', keywords: 'view visible preview watch', Icon: Eye },
+    { id: 'download', label: 'Download', keywords: 'download import receive file', Icon: Download },
+    { id: 'upload', label: 'Upload', keywords: 'upload export send file', Icon: Upload },
+    {
+        id: 'arrow-down-up',
+        label: 'Transfer',
+        keywords: 'transfer import export swap sync',
+        Icon: ArrowDownUp,
+    },
+    {
+        id: 'megaphone',
+        label: 'Announcement',
+        keywords: 'announcement marketing broadcast',
+        Icon: Megaphone,
+    },
+    { id: 'bell', label: 'Alert', keywords: 'alert notification bell reminder', Icon: Bell },
+    { id: 'inbox', label: 'Inbox', keywords: 'inbox incoming triage queue', Icon: Inbox },
+    { id: 'paperclip', label: 'Attachment', keywords: 'attachment file clip', Icon: Paperclip },
+    { id: 'pin', label: 'Pinned', keywords: 'pinned pin important', Icon: Pin },
+    { id: 'bookmark', label: 'Bookmark', keywords: 'bookmark saved favorite', Icon: Bookmark },
+    { id: 'tag', label: 'Tag', keywords: 'tag label category', Icon: Tag },
+    { id: 'archive', label: 'Archive', keywords: 'archive stored closed', Icon: Archive },
+    { id: 'trash-2', label: 'Trash', keywords: 'trash delete remove', Icon: Trash2 },
+    { id: 'home', label: 'Home', keywords: 'home start overview', Icon: Home },
+    { id: 'folder', label: 'Folder', keywords: 'folder collection group', Icon: Folder },
+    {
+        id: 'folder-kanban',
+        label: 'Board',
+        keywords: 'board kanban project folder',
+        Icon: FolderKanban,
+    },
+    { id: 'palette', label: 'Design', keywords: 'design creative brand color', Icon: Palette },
+    { id: 'paintbrush', label: 'Brand', keywords: 'brand paint style design', Icon: Paintbrush },
+    { id: 'camera', label: 'Photo', keywords: 'photo camera image capture', Icon: Camera },
+    { id: 'pen-line', label: 'Writing', keywords: 'writing pen compose edit', Icon: PenLine },
+    { id: 'languages', label: 'Language', keywords: 'language translate locale', Icon: Languages },
+    {
+        id: 'shield-check',
+        label: 'Policy',
+        keywords: 'security policy compliance trust',
+        Icon: ShieldCheck,
+    },
+    { id: 'lock', label: 'Private', keywords: 'private lock security restricted', Icon: Lock },
+    { id: 'key', label: 'Access', keywords: 'access key permission auth', Icon: Key },
+    {
+        id: 'badge-check',
+        label: 'Verified',
+        keywords: 'verified trusted badge check',
+        Icon: BadgeCheck,
+    },
+    { id: 'sparkles', label: 'Magic', keywords: 'magic sparkle polish', Icon: Sparkles },
+    { id: 'zap', label: 'Fast', keywords: 'fast lightning quick power', Icon: Zap },
+    { id: 'star', label: 'Star', keywords: 'favorite important star', Icon: Star },
+    { id: 'heart', label: 'Heart', keywords: 'heart culture values care', Icon: Heart },
+    { id: 'help-circle', label: 'Question', keywords: 'question help support', Icon: HelpCircle },
+    { id: 'circle-dot', label: 'Dot', keywords: 'dot status marker', Icon: CircleDot },
+];
+export const NOTE_ICON_COLOR_DEFS = [
+    { id: 'primary', label: 'Primary', value: 'var(--foreground)' },
+    { id: 'slate', label: 'Slate', value: 'var(--muted-foreground)' },
+    { id: 'red', label: 'Red', value: 'oklch(0.58 0.2 25)' },
+    { id: 'orange', label: 'Orange', value: 'oklch(0.64 0.17 50)' },
+    { id: 'yellow', label: 'Yellow', value: 'oklch(0.72 0.16 85)' },
+    { id: 'green', label: 'Green', value: 'oklch(0.58 0.14 145)' },
+    { id: 'teal', label: 'Teal', value: 'oklch(0.56 0.12 185)' },
+    { id: 'blue', label: 'Blue', value: 'oklch(0.57 0.16 245)' },
+    { id: 'purple', label: 'Purple', value: 'oklch(0.58 0.18 300)' },
+    { id: 'pink', label: 'Pink', value: 'oklch(0.62 0.19 345)' },
+];
+const EMOJI_MART_DATA = emojiMartData;
+function buildNoteEmojiDefs() {
+    const seen = new Set();
+    const defs = [];
+    for (const category of EMOJI_MART_DATA.categories) {
+        for (const id of category.emojis) {
+            const item = EMOJI_MART_DATA.emojis[id];
+            const native = item?.skins[0]?.native;
+            if (!item || !native || seen.has(native))
+                continue;
+            seen.add(native);
+            defs.push({
+                emoji: native,
+                label: item.name,
+                keywords: [item.id, item.name, ...item.keywords, ...(item.emoticons ?? [])]
+                    .join(' ')
+                    .toLowerCase(),
+            });
+        }
+    }
+    return defs;
+}
+export const NOTE_EMOJI_DEFS = buildNoteEmojiDefs();
+const NOTE_ICON_BY_ID = new Map(NOTE_ICON_DEFS.map((def) => [def.id, def]));
+const NOTE_ICON_COLOR_BY_ID = new Map(NOTE_ICON_COLOR_DEFS.map((def) => [def.id, def]));
+function isNoteIconName(value) {
+    return NOTE_ICON_BY_ID.has(value);
+}
+function isNoteIconColorName(value) {
+    return NOTE_ICON_COLOR_BY_ID.has(value);
+}
+export function parseNoteIcon(input) {
+    if (!input || typeof input !== 'object')
+        return null;
+    const directKind = input.kind;
+    const raw = directKind === 'emoji' || directKind === 'icon' ? input : input.icon;
+    if (!raw || typeof raw !== 'object')
+        return null;
+    const kind = raw.kind;
+    const value = raw.value;
+    if (kind === 'emoji' && typeof value === 'string' && value.trim()) {
+        return { kind: 'emoji', value };
+    }
+    if (kind === 'icon' && typeof value === 'string' && isNoteIconName(value)) {
+        const color = raw.color;
+        return {
+            kind: 'icon',
+            value,
+            ...(typeof color === 'string' && isNoteIconColorName(color) ? { color } : {}),
+        };
+    }
+    return null;
+}
+export function iconFacetsPatch(facets, icon) {
+    const next = { ...(facets ?? {}) };
+    if (icon)
+        next.icon = icon;
+    else
+        delete next.icon;
+    return next;
+}
+export function NoteIconGlyph({ icon, fallback = 'file', fallbackIcon, className, iconClassName, }) {
+    if (icon?.kind === 'emoji') {
+        return (_jsx("span", { "aria-hidden": true, className: cn('inline-flex items-center justify-center text-[1em] leading-none', className), children: icon.value }));
+    }
+    const Icon = icon?.kind === 'icon'
+        ? (NOTE_ICON_BY_ID.get(icon.value)?.Icon ?? FileText)
+        : (fallbackIcon ?? (fallback === 'folder' ? Folder : FileText));
+    const color = icon?.kind === 'icon' ? NOTE_ICON_COLOR_BY_ID.get(icon.color ?? 'primary')?.value : undefined;
+    return (_jsx("span", { className: cn('inline-flex items-center justify-center', className), children: _jsx(Icon, { className: cn(fallback === 'folder' && !icon ? 'text-muted-foreground/85' : 'text-muted-foreground/75', iconClassName), style: color ? { color } : undefined, strokeWidth: 1.65, "aria-hidden": true }) }));
+}

package/dist/components/note-row.d.ts

@@ -0,0 +1,33 @@
+import '../lib/react-19-jsx.js';
+import type { CSSProperties, MouseEvent, PointerEvent, ReactNode } from 'react';
+import type { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
+export interface NoteRowDragProps {
+    setNodeRef?: (el: HTMLElement | null) => void;
+    attributes?: DraggableAttributes;
+    listeners?: DraggableSyntheticListeners;
+    style?: CSSProperties;
+    isDragging?: boolean;
+}
+export declare function NoteRowInsertionLine({ edge, inset }: {
+    edge: 'before' | 'after';
+    inset: number;
+}): import("react").JSX.Element;
+export interface NoteRowProps {
+    depth: number;
+    title: string;
+    meta?: string;
+    active?: boolean;
+    dirty?: boolean;
+    chromeFont: string;
+    leadingIcon?: ReactNode;
+    iconControl?: ReactNode;
+    trailingControl?: ReactNode;
+    onClick?: (e: MouseEvent) => void;
+    onIntentSelect?: (e: PointerEvent) => void;
+    selected?: boolean;
+    onAddChild?: () => void;
+    addChildLabel?: string;
+    drag?: NoteRowDragProps;
+    noteId?: string;
+}
+export declare function NoteRow({ depth, title, meta, active, dirty, chromeFont, leadingIcon, iconControl, trailingControl, onClick, onIntentSelect, selected, onAddChild, addChildLabel, drag, noteId, }: NoteRowProps): import("react").JSX.Element;

package/dist/components/note-row.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../lib/react-19-jsx.js';
+import { FileText, Plus } from 'lucide-react';
+import { Button } from './button.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip.js';
+import { sidePanelItemClassName } from './side-panel.js';
+import { NavigableListItem } from './navigable-list.js';
+import { cn } from '../lib/cn.js';
+const NOTE_PADDING_BASE = 8;
+const DEPTH_STEP = 12;
+export function NoteRowInsertionLine({ edge, inset }) {
+    return (_jsx("span", { "aria-hidden": true, className: cn('bg-primary pointer-events-none absolute right-2 z-10 h-[2px] rounded-full', edge === 'before' ? '-top-px' : '-bottom-px'), style: { left: inset }, children: _jsx("span", { className: "bg-primary absolute top-1/2 -left-1 size-1.5 -translate-y-1/2 rounded-full" }) }));
+}
+export function NoteRow({ depth, title, meta, active, dirty, chromeFont, leadingIcon, iconControl, trailingControl, onClick, onIntentSelect, selected, onAddChild, addChildLabel, drag, noteId, }) {
+    const paddingLeft = NOTE_PADDING_BASE + depth * DEPTH_STEP;
+    return (_jsxs("div", { ref: drag?.setNodeRef, style: { paddingLeft, ...drag?.style }, ...drag?.attributes, ...drag?.listeners, role: selected !== undefined ? 'treeitem' : undefined, "aria-selected": selected, "data-note-id": noteId, "data-selected": selected ? '' : undefined, className: sidePanelItemClassName({
+            active,
+            className: cn('gap-2', selected ? 'bg-primary/10' : '', drag?.isDragging ? 'bg-muted' : ''),
+        }), children: [iconControl ?? (_jsx("span", { className: "inline-flex size-4 shrink-0 items-center justify-center", children: leadingIcon ?? (_jsx(FileText, { className: cn('text-muted-foreground/65 size-3.5 shrink-0', active && 'text-muted-foreground/80'), strokeWidth: 1.6 })) })), _jsx(NavigableListItem, { active: active, children: _jsx("button", { type: "button", onPointerDown: (e) => onIntentSelect?.(e), onClick: (e) => onClick?.(e), className: "flex min-w-0 flex-1 items-center text-left outline-none", children: _jsx("span", { className: "min-w-0 truncate text-[12.5px]", children: title }) }) }), meta ? (_jsx("span", { className: cn('ml-auto shrink-0 font-mono text-[10px] tabular-nums', onAddChild ? 'group-hover/side-panel-item:hidden' : '', active ? 'text-muted-foreground/80' : 'text-muted-foreground/60', chromeFont), children: meta })) : null, dirty ? (_jsx("span", { className: cn('size-1.5 shrink-0 rounded-full', active ? 'bg-foreground/60' : 'bg-foreground/55', meta ? '' : 'ml-auto') })) : null, trailingControl ? (_jsx("span", { className: cn('shrink-0', meta || dirty ? '' : 'ml-auto'), children: trailingControl })) : null, onAddChild ? (_jsx(NoteRowAddChildButton, { onAddChild: onAddChild, label: addChildLabel ?? '', className: meta || dirty || trailingControl ? '' : 'ml-auto' })) : null] }));
+}
+function NoteRowAddChildButton({ onAddChild, label, className, }) {
+    const handle = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onAddChild();
+    };
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": label, onClick: handle, onPointerDown: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), className: cn('text-muted-foreground/80 hover:bg-muted hover:text-foreground size-4 rounded opacity-0 group-hover/side-panel-item:opacity-100', 'focus-visible:opacity-100', className), children: _jsx(Plus, { className: "size-3", strokeWidth: 1.8 }) }) }), _jsx(TooltipContent, { variant: "compact", children: label })] }));
+}

package/dist/components/overlapping-dots.d.ts

@@ -0,0 +1,10 @@
+export interface OverlappingDotsProps {
+    items: ReadonlyArray<{
+        key: string;
+        dotClassName: string;
+    }>;
+    max?: number;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+export declare function OverlappingDots({ items, max, size, className }: OverlappingDotsProps): import("react").JSX.Element | null;

package/dist/components/overlapping-dots.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+import { rowSurfaceRingClassName } from './row-surface.js';
+const dotSize = {
+    sm: 'size-2',
+    md: 'size-2.5',
+};
+export function OverlappingDots({ items, max = 4, size = 'md', className }) {
+    if (items.length === 0)
+        return null;
+    return (_jsx("span", { "aria-hidden": true, className: cn('flex shrink-0 -space-x-1', className), children: items.slice(0, max).map((item) => (_jsx("span", { className: cn('inline-block rounded-full ring-1', rowSurfaceRingClassName, dotSize[size], item.dotClassName) }, item.key))) }));
+}

package/dist/components/overview-card.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export declare function OverviewCard({ title, count, action, chromeFont, children, className, }: {
+    title: string;
+    count?: number;
+    action?: ReactNode;
+    chromeFont: string;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function OverviewEmptyLine({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/overview-card.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+export function OverviewCard({ title, count, action, chromeFont, children, className, }) {
+    return (_jsxs("section", { className: cn('space-y-1', className), children: [_jsxs("header", { className: "flex h-6 items-center gap-2 px-2", children: [_jsx("h3", { className: cn('text-muted-foreground/85 text-[11px] font-medium', chromeFont), children: title }), count !== undefined ? (_jsx("span", { className: cn('text-muted-foreground/50 font-mono text-[10px] tabular-nums', chromeFont), children: count })) : null, action ? _jsx("div", { className: "ml-auto flex items-center", children: action }) : null] }), _jsx("div", { children: children })] }));
+}
+export function OverviewEmptyLine({ children }) {
+    return _jsx("p", { className: "text-muted-foreground/60 px-2 py-1 text-[11.5px]", children: children });
+}

package/dist/components/panel-header.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface PanelHeaderProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    title: ReactNode;
+    actions?: ReactNode;
+    titleClassName?: string;
+    className?: string;
+}
+export declare function PanelHeader({ title, actions, titleClassName, className, ...props }: PanelHeaderProps): import("react").JSX.Element;

package/dist/components/panel-header.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+export function PanelHeader({ title, actions, titleClassName, className, ...props }) {
+    return (_jsxs("div", { className: cn('flex h-10 shrink-0 items-center px-3 text-[12px] font-medium', className), ...props, children: [_jsx("span", { className: cn('truncate', titleClassName), children: title }), actions ? _jsx("div", { className: "-mr-1 ml-auto flex items-center gap-0.5", children: actions }) : null] }));
+}

package/dist/components/panel-section-states.d.ts

@@ -0,0 +1,9 @@
+export declare function PanelEmptyState({ label, chromeFont }: {
+    label: string;
+    chromeFont: string;
+}): import("react").JSX.Element;
+export declare function PanelSectionSkeleton({ chromeFont, label, rows, }: {
+    chromeFont: string;
+    label: string;
+    rows?: number;
+}): import("react").JSX.Element;

package/dist/components/panel-section-states.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from './skeleton.js';
+import { SidePanelSectionPlaceholder } from './side-panel.js';
+import { cn } from '../lib/cn.js';
+export function PanelEmptyState({ label, chromeFont }) {
+    return _jsx(SidePanelSectionPlaceholder, { chromeFont: chromeFont, children: label });
+}
+export function PanelSectionSkeleton({ chromeFont, label, rows = 3, }) {
+    return (_jsx("div", { className: cn('space-y-1 px-2 py-1.5', chromeFont), role: "status", "aria-label": label, children: Array.from({ length: rows }).map((_, index) => (_jsx(Skeleton, { className: "h-7 w-full rounded-md" }, index))) }));
+}

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

@@ -0,0 +1,10 @@
+type PersonAvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface PersonAvatarProps {
+    displayName?: string | null;
+    email?: string | null;
+    src?: string | null;
+    size?: PersonAvatarSize;
+    className?: string;
+}
+export declare function PersonAvatar({ displayName, email, src, size, className }: PersonAvatarProps): import("react").JSX.Element;
+export {};

package/dist/components/person-avatar.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+const sizeClasses = {
+    xs: 'size-5 text-[8px]',
+    sm: 'size-6 text-xs',
+    md: 'size-8 text-sm',
+    lg: 'size-10 text-sm',
+};
+function initialsFor(displayName, email) {
+    const source = displayName?.trim() || email?.split('@')[0] || '?';
+    const tokens = source.split(/[\s._-]+/u).filter(Boolean);
+    if (tokens.length === 0)
+        return '?';
+    if (tokens.length === 1)
+        return (tokens[0]?.[0] ?? '?').toUpperCase();
+    return `${tokens[0]?.[0] ?? ''}${tokens[1]?.[0] ?? ''}`.toUpperCase();
+}
+export function PersonAvatar({ displayName, email, src, size = 'md', className }) {
+    const label = displayName ?? email ?? '?';
+    const initials = initialsFor(displayName, email);
+    return (_jsx("span", { "aria-label": label, className: cn('relative flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground after:absolute after:inset-0 after:rounded-full after:border after:border-border', sizeClasses[size], className), children: src ? _jsx("img", { src: src, alt: label, className: "aspect-square size-full rounded-full object-cover" }) : _jsx("span", { className: "text-center font-medium leading-none", children: initials }) }));
+}

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+    size?: "default" | "xs" | "sm" | "lg";
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/components/photo-avatar.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+function Avatar({ className, size = "default", ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 data-[size=xs]:size-4 dark:after:mix-blend-lighten", className), ...props }));
+}
+function AvatarImage({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full rounded-full object-cover", className), ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs group-data-[size=xs]/avatar:text-[8px]", className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
+}
+function AvatarGroupCount({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
+}
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/components/picker-field.d.ts

@@ -0,0 +1,23 @@
+import { type KeyboardEvent, type ReactNode } from 'react';
+export type PickerParseState = 'ok' | 'unparseable' | 'empty';
+export interface PickerFieldProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    display: string;
+    typed: string | null;
+    onTypedChange: (next: string) => void;
+    onInputKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    parseState?: PickerParseState;
+    icon?: ReactNode;
+    disabled?: boolean;
+    size?: 'sm' | 'default';
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+    contentClassName?: string;
+    'aria-label'?: string;
+    listboxId?: string;
+    activeDescendantId?: string;
+    children: ReactNode;
+}
+export declare function PickerField({ open, onOpenChange, display, typed, onTypedChange, onInputKeyDown, placeholder, parseState, icon, disabled, size, align, className, contentClassName, 'aria-label': ariaLabel, listboxId, activeDescendantId, children, }: PickerFieldProps): import("react").JSX.Element;

package/dist/components/picker-field.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Popover, PopoverAnchor, PopoverContent } from './popover.js';
+import { cn } from '../lib/cn.js';
+export function PickerField({ open, onOpenChange, display, typed, onTypedChange, onInputKeyDown, placeholder, parseState = 'empty', icon, disabled, size = 'default', align = 'start', className, contentClassName, 'aria-label': ariaLabel, listboxId, activeDescendantId, children, }) {
+    const inputRef = useRef(null);
+    const editing = typed !== null;
+    const value = typed ?? display;
+    const invalid = editing && parseState === 'unparseable';
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs("div", { "data-slot": "picker-field", "data-parse-state": editing ? parseState : undefined, "aria-disabled": disabled || undefined, className: cn('border-input dark:bg-input/30 inline-flex items-center gap-2 rounded-lg border bg-transparent transition-colors', 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-3', invalid &&
+                        'border-destructive/60 focus-within:border-destructive/60 focus-within:ring-destructive/30', disabled && 'pointer-events-none opacity-50', size === 'sm' ? 'h-8 px-2.5 text-[12px]' : 'h-9 px-3 text-sm', className), children: [icon ? (_jsx("span", { className: "text-muted-foreground/70 flex shrink-0 items-center", children: icon })) : null, _jsx("input", { ref: inputRef, type: "text", value: value, placeholder: placeholder, "aria-label": ariaLabel, disabled: disabled, spellCheck: false, autoComplete: "off", role: listboxId ? 'combobox' : undefined, "aria-expanded": listboxId ? open : undefined, "aria-controls": listboxId && open ? listboxId : undefined, "aria-activedescendant": open ? activeDescendantId : undefined, "aria-autocomplete": listboxId ? 'list' : undefined, "data-slot": "picker-field-input", onClick: () => onOpenChange(true), onFocus: (e) => {
+                                onOpenChange(true);
+                                e.currentTarget.select();
+                            }, onChange: (e) => {
+                                onOpenChange(true);
+                                onTypedChange(e.target.value);
+                            }, onKeyDown: onInputKeyDown, className: cn('placeholder:text-muted-foreground/60 min-w-0 flex-1 bg-transparent tabular-nums outline-none', !editing && !display && 'text-muted-foreground') })] }) }), _jsx(PopoverContent, { align: align, sideOffset: 6, onOpenAutoFocus: (e) => e.preventDefault(), onCloseAutoFocus: (e) => e.preventDefault(), onInteractOutside: (e) => {
+                    const target = e.target;
+                    if (target instanceof Node && inputRef.current?.parentElement?.contains(target)) {
+                        e.preventDefault();
+                    }
+                }, className: cn('w-auto overflow-hidden p-0', contentClassName), "data-slot": "picker-field-content", children: children })] }));
+}