@atmos.build/ui 0.1.0

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { type NautColor, type NautExpression, type NautGesture, type NautShape } from './naut-avatar-engine.js';
+export type { NautColor, NautExpression, NautGesture, NautShape } from './naut-avatar-engine.js';
+export { NAUT_COLORS, NAUT_COLOR_KEYS, NAUT_EXPRESSIONS, NAUT_GESTURES, NAUT_SHAPES, isNautColor, isNautShape, nautAppearanceForSeed, } from './naut-avatar-engine.js';
+export interface NautAppearance {
+    shape: NautShape;
+    color: NautColor;
+}
+export interface NautAvatarProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
+    shape?: NautShape;
+    color?: NautColor;
+    expression?: NautExpression;
+    /** Blinks, glances and breathes on its own. Off renders a still face. */
+    idle?: boolean;
+    /** Where the eyes look, in [-1, 1]; omit to let idle wander. */
+    gaze?: {
+        x: number;
+        y: number;
+    } | null;
+    /** Any stable id — keeps a list of Nauts from blinking in unison. */
+    seed?: string | number;
+}
+export interface NautAvatarHandle {
+    play: (gesture: NautGesture) => void;
+}
+/**
+ * A Naut's face: one solid shape with two cut-out eyes that sit on its surface and
+ * look around. The eyes are holes, so set `--naut-avatar-eye` to the surface the
+ * avatar sits on (defaults to `--background`).
+ */
+export declare const NautAvatar: React.ForwardRefExoticComponent<NautAvatarProps & React.RefAttributes<NautAvatarHandle>>;

package/dist/components/naut-avatar.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useReducedMotion } from 'motion/react';
+import { cn } from '../lib/cn.js';
+import { NAUT_VIEWBOX, NautAvatarEngine, hashSeed, } from './naut-avatar-engine.js';
+export { NAUT_COLORS, NAUT_COLOR_KEYS, NAUT_EXPRESSIONS, NAUT_GESTURES, NAUT_SHAPES, isNautColor, isNautShape, nautAppearanceForSeed, } from './naut-avatar-engine.js';
+/** One animation frame loop drives every mounted avatar; offscreen ones sit out. */
+const ticker = {
+    entries: new Set(),
+    frame: 0,
+    last: 0,
+    tick(now) {
+        const dt = Math.min((now - ticker.last) / 1000, 0.05);
+        ticker.last = now;
+        for (const entry of ticker.entries)
+            if (entry.visible)
+                entry.engine.update(dt);
+        ticker.frame = ticker.entries.size ? requestAnimationFrame(ticker.tick) : 0;
+    },
+    add(entry) {
+        ticker.entries.add(entry);
+        if (!ticker.frame) {
+            ticker.last = performance.now();
+            ticker.frame = requestAnimationFrame(ticker.tick);
+        }
+    },
+    remove(entry) {
+        ticker.entries.delete(entry);
+        if (!ticker.entries.size && ticker.frame) {
+            cancelAnimationFrame(ticker.frame);
+            ticker.frame = 0;
+        }
+    },
+};
+const seedNumber = (seed) => typeof seed === 'number' ? seed : hashSeed(seed ?? 'naut');
+/**
+ * A Naut's face: one solid shape with two cut-out eyes that sit on its surface and
+ * look around. The eyes are holes, so set `--naut-avatar-eye` to the surface the
+ * avatar sits on (defaults to `--background`).
+ */
+export const NautAvatar = React.forwardRef(function NautAvatar({ shape = 'circle', color = 'ink', expression = 'neutral', idle = true, gaze = null, seed, className, style, ...props }, forwardedRef) {
+    const reducedMotion = useReducedMotion();
+    const animated = idle && !reducedMotion;
+    const svgRef = React.useRef(null);
+    const rootRef = React.useRef(null);
+    const bodyRef = React.useRef(null);
+    const eyesRef = React.useRef(null);
+    const eyeLRef = React.useRef(null);
+    const eyeRRef = React.useRef(null);
+    const [engine] = React.useState(() => new NautAvatarEngine({ shape, color, expression, seed: seedNumber(seed), idle: animated }));
+    React.useImperativeHandle(forwardedRef, () => ({ play: (gesture) => engine.play(gesture) }), [
+        engine,
+    ]);
+    React.useLayoutEffect(() => {
+        engine.setShape(shape);
+        engine.setColor(color);
+        engine.setExpression(expression);
+        engine.idle = animated;
+        engine.gazeTarget = gaze;
+    }, [engine, shape, color, expression, animated, gaze]);
+    React.useLayoutEffect(() => {
+        if (!rootRef.current ||
+            !bodyRef.current ||
+            !eyesRef.current ||
+            !eyeLRef.current ||
+            !eyeRRef.current)
+            return;
+        engine.attach({
+            root: rootRef.current,
+            body: bodyRef.current,
+            eyes: eyesRef.current,
+            eyeL: eyeLRef.current,
+            eyeR: eyeRRef.current,
+        });
+        engine.settle();
+        engine.update(0);
+    }, [engine]);
+    React.useEffect(() => {
+        if (reducedMotion) {
+            engine.settle();
+            engine.update(0);
+            return;
+        }
+        const entry = { engine, visible: true };
+        ticker.add(entry);
+        const svg = svgRef.current;
+        const observer = svg && typeof IntersectionObserver !== 'undefined'
+            ? new IntersectionObserver((records) => {
+                for (const record of records)
+                    entry.visible = record.isIntersecting;
+            })
+            : null;
+        if (svg && observer)
+            observer.observe(svg);
+        return () => {
+            observer?.disconnect();
+            ticker.remove(entry);
+        };
+    }, [engine, reducedMotion]);
+    React.useEffect(() => {
+        if (!reducedMotion)
+            return;
+        engine.settle();
+        engine.update(0);
+    }, [engine, reducedMotion, shape, color, expression]);
+    return (_jsx("svg", { ref: svgRef, viewBox: NAUT_VIEWBOX, "data-slot": "naut-avatar", "data-shape": shape, "data-color": color, "data-expression": expression, className: cn('block size-full overflow-visible select-none', className), style: style, "aria-hidden": props['aria-label'] ? undefined : true, ...props, children: _jsxs("g", { ref: rootRef, children: [_jsx("path", { ref: bodyRef }), _jsxs("g", { ref: eyesRef, children: [_jsx("path", { ref: eyeLRef, fill: "var(--naut-avatar-eye, var(--background))" }), _jsx("path", { ref: eyeRRef, fill: "var(--naut-avatar-eye, var(--background))" })] })] }) }));
+});

package/dist/components/navigable-list.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
+export declare const NavigableList: React.ForwardRefExoticComponent<Omit<RovingFocusGroup.RovingFocusGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigableListItem: React.ForwardRefExoticComponent<Omit<RovingFocusGroup.RovingFocusItemProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/navigable-list.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
+import { Slot } from '@radix-ui/react-slot';
+const NavigableListContext = React.createContext(false);
+export const NavigableList = React.forwardRef(({ orientation = 'vertical', loop = false, ...props }, ref) => (_jsx(NavigableListContext.Provider, { value: true, children: _jsx(RovingFocusGroup.Root, { ref: ref, orientation: orientation, loop: loop, ...props }) })));
+NavigableList.displayName = 'NavigableList';
+export const NavigableListItem = React.forwardRef(({ asChild = true, active, focusable, tabStopId, children, ...props }, ref) => {
+    const insideNavigableList = React.useContext(NavigableListContext);
+    if (insideNavigableList) {
+        return (_jsx(RovingFocusGroup.Item, { ref: ref, asChild: asChild, active: active, focusable: focusable, tabStopId: tabStopId, ...props, children: children }));
+    }
+    const Component = asChild ? Slot : 'span';
+    const fallbackChildren = typeof children === 'function'
+        ? children({ hasTabStop: true, isCurrentTabStop: true })
+        : children;
+    return (_jsx(Component, { ref: ref, ...props, children: fallbackChildren }));
+});
+NavigableListItem.displayName = 'NavigableListItem';

package/dist/components/note-icon-picker.d.ts

@@ -0,0 +1,20 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { type NoteIconFallback, type NoteIconValue } from './note-icon.js';
+export declare function NoteIconPicker({ value, onChange, trigger, align, side, className, translate, }: {
+    value: NoteIconValue | null;
+    onChange: (next: NoteIconValue | null) => void;
+    trigger: ReactNode;
+    align?: 'start' | 'center' | 'end';
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+    translate: (key: string, values?: Record<string, string>) => string;
+}): import("react").JSX.Element;
+export declare const NoteIconTrigger: import("react").ForwardRefExoticComponent<{
+    icon: NoteIconValue | null;
+    className?: string;
+    iconClassName?: string;
+    label: string;
+    fallback?: "file" | "folder";
+    fallbackIcon?: NoteIconFallback;
+    renderEmpty?: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/note-icon-picker.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState, } from 'react';
+import { Check, X } from 'lucide-react';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from './command.js';
+import { Button } from './button.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs.js';
+import { cn } from '../lib/cn.js';
+import { NOTE_EMOJI_DEFS, NOTE_ICON_COLOR_DEFS, NOTE_ICON_DEFS, NoteIconGlyph, } from './note-icon.js';
+export function NoteIconPicker({ value, onChange, trigger, align = 'center', side = 'bottom', className, translate, }) {
+    const t = translate;
+    const [open, setOpen] = useState(false);
+    const [mode, setMode] = useState(value?.kind ?? 'emoji');
+    const [query, setQuery] = useState('');
+    const inputRef = useRef(null);
+    const contentRef = useRef(null);
+    const q = query.trim().toLowerCase();
+    const iconColor = value?.kind === 'icon' ? (value.color ?? 'primary') : 'primary';
+    const icons = useMemo(() => NOTE_ICON_DEFS.filter((item) => `${item.label} ${item.keywords} ${item.id}`.toLowerCase().includes(q)), [q]);
+    const emojis = useMemo(() => NOTE_EMOJI_DEFS.filter((item) => `${item.label} ${item.keywords} ${item.emoji}`.toLowerCase().includes(q)), [q]);
+    const pick = (next) => {
+        onChange(next);
+        setOpen(false);
+        setQuery('');
+    };
+    const pickColor = (color) => {
+        if (value?.kind !== 'icon')
+            return;
+        onChange({ ...value, color });
+    };
+    useEffect(() => {
+        if (!open)
+            return;
+        const id = window.setTimeout(() => inputRef.current?.focus(), 0);
+        return () => window.clearTimeout(id);
+    }, [open]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const frame = window.requestAnimationFrame(() => {
+            contentRef.current
+                ?.querySelector('[data-note-icon-selected="true"]')
+                ?.scrollIntoView({ block: 'nearest' });
+        });
+        return () => window.cancelAnimationFrame(frame);
+    }, [open, mode, value]);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { ref: contentRef, side: side, align: align, sideOffset: 8, collisionPadding: 12, className: cn('w-[320px] max-w-[calc(100vw-24px)] overflow-hidden p-0', className), children: _jsxs(Tabs, { value: mode, onValueChange: (next) => setMode(next), className: "gap-0", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border/60 px-3 pt-2", children: [_jsxs(TabsList, { variant: "line", className: "h-8 gap-3 p-0", children: [_jsx(TabsTrigger, { value: "emoji", className: "h-8 px-0 text-[12.5px]", children: t('emoji') }), _jsx(TabsTrigger, { value: "icon", className: "h-8 px-0 text-[12.5px]", children: t('icon') })] }), value ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => pick(null), className: "text-muted-foreground hover:bg-muted/70 hover:text-foreground", "aria-label": t('clear'), children: _jsx(X, { className: "size-3.5", strokeWidth: 1.7 }) })) : null] }), _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { ref: inputRef, variant: "inline", value: query, onValueChange: setQuery, placeholder: mode === 'emoji' ? t('searchEmoji') : t('searchIcons') }), _jsx(TabsContent, { value: "emoji", className: "m-0", children: _jsxs(CommandList, { className: "max-h-64", children: [_jsx(CommandEmpty, { children: t('emptyEmoji') }), _jsx(CommandGroup, { className: "p-1.5", children: _jsx("div", { className: "grid grid-cols-8 gap-1", children: emojis.map((item) => {
+                                                        const selected = value?.kind === 'emoji' && value.value === item.emoji;
+                                                        return (_jsxs(CommandItem, { value: `${item.emoji} ${item.label} ${item.keywords}`, onSelect: () => pick({ kind: 'emoji', value: item.emoji }), "data-note-icon-selected": selected ? 'true' : undefined, className: cn('relative aspect-square justify-center rounded-md p-0 text-[18px] cursor-pointer', 'data-[selected=true]:bg-transparent data-[selected=true]:text-foreground [&>svg:last-child]:hidden', selected
+                                                                ? 'bg-muted text-foreground ring-1 ring-border/80'
+                                                                : 'text-foreground/90 hover:bg-muted/55'), "aria-label": item.label, children: [item.emoji, selected ? _jsx(SelectedMark, {}) : null] }, item.emoji));
+                                                    }) }) })] }) }), _jsxs(TabsContent, { value: "icon", className: "m-0", children: [_jsxs(CommandList, { className: "max-h-64", children: [_jsx(CommandEmpty, { children: t('emptyIcon') }), _jsx(CommandGroup, { className: "p-1.5", children: _jsx("div", { className: "grid grid-cols-8 gap-1", children: icons.map((item) => {
+                                                            const selected = value?.kind === 'icon' && value.value === item.id;
+                                                            return (_jsxs(CommandItem, { value: `${item.label} ${item.keywords} ${item.id}`, onSelect: () => pick({
+                                                                    kind: 'icon',
+                                                                    value: item.id,
+                                                                    color: iconColor,
+                                                                }), "data-note-icon-selected": selected ? 'true' : undefined, className: cn('relative aspect-square justify-center rounded-md p-0 cursor-pointer', 'data-[selected=true]:bg-transparent data-[selected=true]:text-foreground [&>svg:last-child]:hidden', selected
+                                                                    ? 'bg-muted text-foreground ring-1 ring-border/80'
+                                                                    : 'text-foreground/90 hover:bg-muted/55'), "aria-label": item.label, children: [_jsx(NoteIconGlyph, { icon: { kind: 'icon', value: item.id, color: iconColor }, className: "text-current", iconClassName: "size-[18px]" }), selected ? _jsx(SelectedMark, {}) : null] }, item.id));
+                                                        }) }) })] }), _jsxs("div", { className: "flex items-center gap-1.5 border-t border-border/60 px-3 py-2", children: [_jsx("span", { className: "mr-1 text-[11px] text-muted-foreground", children: t('color') }), NOTE_ICON_COLOR_DEFS.map((item) => {
+                                                    const selected = value?.kind === 'icon' && iconColor === item.id;
+                                                    return (_jsx("button", { type: "button", "aria-label": t('colorAria', { color: t(`colorName.${item.id}`) }), "aria-pressed": selected, disabled: value?.kind !== 'icon', onClick: () => pickColor(item.id), className: cn('inline-flex size-5 items-center justify-center rounded-full border border-border/60 cursor-pointer', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/45', 'disabled:cursor-not-allowed disabled:opacity-40', selected ? 'ring-1 ring-primary/60' : ''), children: _jsx("span", { className: "size-3.5 rounded-full", style: { backgroundColor: item.value } }) }, item.id));
+                                                })] })] })] })] }) })] }));
+}
+function SelectedMark() {
+    return (_jsx("span", { className: "absolute right-1.5 top-1.5 inline-flex size-3.5 items-center justify-center rounded-full bg-primary text-primary-foreground", children: _jsx(Check, { className: "size-2.5", strokeWidth: 2 }) }));
+}
+export const NoteIconTrigger = forwardRef(function NoteIconTrigger({ icon, className, iconClassName, label, fallback = 'file', fallbackIcon, renderEmpty, onClick, onMouseDown, onPointerDown, ...buttonProps }, ref) {
+    const handleClick = (event) => {
+        event.stopPropagation();
+        onClick?.(event);
+    };
+    const handleMouseDown = (event) => {
+        event.stopPropagation();
+        onMouseDown?.(event);
+    };
+    const handlePointerDown = (event) => {
+        event.stopPropagation();
+        onPointerDown?.(event);
+    };
+    return (_jsx("button", { ref: ref, type: "button", "aria-label": label, title: label, ...buttonProps, className: cn('inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground/80', 'cursor-pointer hover:bg-muted/70 hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/45', className), onClick: handleClick, onMouseDown: handleMouseDown, onPointerDown: handlePointerDown, children: icon == null && renderEmpty != null ? (_jsx("span", { "aria-hidden": true, className: "inline-flex size-full items-center justify-center", children: renderEmpty })) : (_jsx(NoteIconGlyph, { icon: icon, fallback: fallback, fallbackIcon: fallbackIcon, className: "size-full", iconClassName: cn('size-3.5', iconClassName) })) }));
+});