@atmos.build/ui 0.1.0

package/dist/components/popover-stack.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+import { PopoverContent } from './popover.js';
+export type StackKind = 'dialog' | 'control';
+export declare function PopoverStackProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+type StackedPopoverProps = ComponentProps<typeof PopoverPrimitive.Root>;
+export declare function StackedPopover({ open, onOpenChange, defaultOpen, kind, children, ...rest }: StackedPopoverProps & {
+    kind?: StackKind;
+}): import("react").JSX.Element;
+export declare const StackedPopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const StackedPopoverAnchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+type StackedPopoverContentProps = ComponentProps<typeof PopoverContent>;
+export declare function StackedPopoverContent({ className, ...rest }: StackedPopoverContentProps): import("react").JSX.Element;
+export declare function useStackDepthBelow(): number;
+export declare function useStackedPopoverNavigation<TPage extends string>(rootPage: TPage): {
+    page: TPage;
+    canGoBack: boolean;
+    pushPage: (next: TPage) => void;
+    replacePage: (next: TPage) => void;
+    reset: () => void;
+    goBack: () => void;
+    onEscapeKeyDown: (event: Event) => void;
+};
+export {};

package/dist/components/popover-stack.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState, } from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+import { PopoverContent } from './popover.js';
+import { cn } from '../lib/cn.js';
+const StackContext = createContext(null);
+const DepthBelowContext = createContext(0);
+export function PopoverStackProvider({ children }) {
+    const [stack, setStack] = useState([]);
+    const callbacks = useMemo(() => ({
+        push: (id, kind) => {
+            setStack((s) => (s.some((e) => e.id === id) ? s : [...s, { id, kind }]));
+        },
+        pop: (id) => {
+            setStack((s) => (s.some((e) => e.id === id) ? s.filter((e) => e.id !== id) : s));
+        },
+    }), []);
+    const value = useMemo(() => ({ stack, push: callbacks.push, pop: callbacks.pop }), [stack, callbacks]);
+    return _jsx(StackContext.Provider, { value: value, children: children });
+}
+export function StackedPopover({ open, onOpenChange, defaultOpen, kind = 'control', children, ...rest }) {
+    const id = useId();
+    const ctx = useContext(StackContext);
+    const push = ctx?.push;
+    const pop = ctx?.pop;
+    const stack = ctx?.stack;
+    const isControlled = open !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    useEffect(() => {
+        if (!push || !pop)
+            return;
+        if (isOpen)
+            push(id, kind);
+        else
+            pop(id);
+        return () => {
+            pop(id);
+        };
+    }, [isOpen, id, kind, push, pop]);
+    const depthBelow = useMemo(() => {
+        if (!stack)
+            return 0;
+        const idx = stack.findIndex((e) => e.id === id);
+        if (idx === -1)
+            return 0;
+        return stack.slice(idx + 1).filter((e) => e.kind === 'dialog').length;
+    }, [stack, id]);
+    const handleOpenChange = (next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    };
+    return (_jsx(DepthBelowContext.Provider, { value: depthBelow, children: _jsx(PopoverPrimitive.Root, { open: isOpen, onOpenChange: handleOpenChange, defaultOpen: defaultOpen, ...rest, children: children }) }));
+}
+export const StackedPopoverTrigger = PopoverPrimitive.Trigger;
+export const StackedPopoverAnchor = PopoverPrimitive.Anchor;
+export function StackedPopoverContent({ className, ...rest }) {
+    const depthBelow = useContext(DepthBelowContext);
+    return (_jsx(PopoverContent, { "data-stack-depth-below": depthBelow, className: cn('transition-[transform,opacity,filter] duration-200 ease-out', 'data-[stack-depth-below="1"]:-translate-y-1.5 data-[stack-depth-below="1"]:scale-[0.96] data-[stack-depth-below="1"]:opacity-80', 'data-[stack-depth-below="2"]:-translate-y-3 data-[stack-depth-below="2"]:scale-[0.92] data-[stack-depth-below="2"]:opacity-65', className), ...rest }));
+}
+export function useStackDepthBelow() {
+    return useContext(DepthBelowContext);
+}
+export function useStackedPopoverNavigation(rootPage) {
+    const [pages, setPages] = useState([rootPage]);
+    const page = pages[pages.length - 1] ?? rootPage;
+    const canGoBack = pages.length > 1;
+    const pushPage = useCallback((next) => {
+        setPages((current) => [...current, next]);
+    }, []);
+    const replacePage = useCallback((next) => {
+        setPages((current) => [...current.slice(0, -1), next]);
+    }, []);
+    const reset = useCallback(() => {
+        setPages([rootPage]);
+    }, [rootPage]);
+    const goBack = useCallback(() => {
+        setPages((current) => (current.length > 1 ? current.slice(0, -1) : current));
+    }, []);
+    const onEscapeKeyDown = useCallback((event) => {
+        if (!canGoBack)
+            return;
+        event.preventDefault();
+        goBack();
+    }, [canGoBack, goBack]);
+    return { page, canGoBack, pushPage, replacePage, reset, goBack, onEscapeKeyDown };
+}

package/dist/components/popover.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, portalled, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
+    portalled?: boolean;
+}): React.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };

package/dist/components/popover.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+import { cn } from '../lib/cn.js';
+function Popover({ ...props }) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({ className, align = 'center', sideOffset = 4, portalled = true, ...props }) {
+    const content = (_jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100', className), ...props }));
+    if (!portalled) {
+        return content;
+    }
+    return _jsx(PopoverPrimitive.Portal, { children: content });
+}
+function PopoverAnchor({ ...props }) {
+    return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "popover-header", className: cn('flex flex-col gap-0.5 text-sm', className), ...props }));
+}
+function PopoverTitle({ className, ...props }) {
+    return _jsx("div", { "data-slot": "popover-title", className: cn('font-medium', className), ...props });
+}
+function PopoverDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "popover-description", className: cn('text-muted-foreground', className), ...props }));
+}
+export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };

package/dist/components/portal-login-barrier.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export declare const PORTAL_NEXT_PARAM = "next";
+export declare function buildPortalLoginHref(loginPath: string, destination: string): string;
+export declare function resolvePortalNext(next: string | null | undefined, fallback: string): string;
+export interface PortalLoginBarrierProps {
+    isAuthenticated: boolean;
+    loginPath: string;
+    children: ReactNode;
+    fallback?: ReactNode;
+    replace?: (href: string) => void;
+}
+export declare function PortalLoginBarrier({ isAuthenticated, loginPath, children, fallback, replace, }: PortalLoginBarrierProps): import("react").JSX.Element;

package/dist/components/portal-login-barrier.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from 'react';
+export const PORTAL_NEXT_PARAM = 'next';
+export function buildPortalLoginHref(loginPath, destination) {
+    const params = new URLSearchParams({ [PORTAL_NEXT_PARAM]: destination });
+    return `${loginPath}?${params.toString()}`;
+}
+export function resolvePortalNext(next, fallback) {
+    if (!next)
+        return fallback;
+    const value = next.trim();
+    if (!value.startsWith('/') || value.startsWith('//') || value.startsWith('/\\'))
+        return fallback;
+    if (/^\/[^/]*:/.test(value))
+        return fallback;
+    return value;
+}
+export function PortalLoginBarrier({ isAuthenticated, loginPath, children, fallback, replace, }) {
+    useEffect(() => {
+        if (isAuthenticated)
+            return;
+        const pathname = window.location.pathname;
+        if (pathname.split('?')[0] === loginPath.split('?')[0])
+            return;
+        const query = window.location.search.slice(1);
+        const destination = query ? `${pathname}?${query}` : pathname;
+        const href = buildPortalLoginHref(loginPath, destination);
+        if (replace)
+            replace(href);
+        else
+            window.location.replace(href);
+    }, [isAuthenticated, loginPath, replace]);
+    if (!isAuthenticated) {
+        return fallback === undefined ? _jsx(BarrierFallback, {}) : _jsx(_Fragment, { children: fallback });
+    }
+    return _jsx(_Fragment, { children: children });
+}
+function BarrierFallback() {
+    return (_jsx("div", { className: "flex min-h-[40vh] items-center justify-center", role: "status", "aria-live": "polite", children: _jsx("span", { className: "border-primary/30 border-t-primary size-6 animate-spin rounded-full border-2", "aria-hidden": true }) }));
+}

package/dist/components/presence-dot.d.ts

@@ -0,0 +1,8 @@
+export type PresenceStatus = 'online' | 'idle' | 'busy' | 'dnd' | 'invisible' | 'offline' | 'error';
+export interface PresenceDotProps {
+    status: PresenceStatus;
+    label: string;
+    className?: string;
+    overlay?: boolean;
+}
+export declare function PresenceDot({ status, label, className, overlay }: PresenceDotProps): import("react").JSX.Element;

package/dist/components/presence-dot.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Circle, CircleAlert, CircleSlash, EyeOff, Moon, Phone } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+export function PresenceDot({ status, label, className, overlay = false }) {
+    return (_jsx("span", { role: "img", "aria-label": label, title: label, "data-presence": status, "data-shape": status === 'idle'
+            ? 'moon'
+            : status === 'busy'
+                ? 'call'
+                : status === 'dnd'
+                    ? 'blocked'
+                    : status === 'error'
+                        ? 'alert'
+                        : status, className: cn('relative inline-flex shrink-0 items-center justify-center', overlay ? 'absolute right-0 bottom-0 z-10 size-[37.5%] rounded-full' : 'size-2.5', className), children: status === 'online' ? (_jsx(Circle, { "aria-hidden": true, className: "fill-success-9 text-success-9 size-full", strokeWidth: 2 })) : status === 'idle' ? (_jsx(Moon, { "aria-hidden": true, "data-testid": "presence-idle-icon", className: "fill-warning-9 text-warning-9 size-full", strokeWidth: 2 })) : status === 'busy' ? (_jsx(Phone, { "aria-hidden": true, "data-testid": "presence-busy-icon", className: "fill-background text-info-9 size-full", strokeWidth: 2 })) : status === 'dnd' ? (_jsx(CircleSlash, { "aria-hidden": true, "data-testid": "presence-dnd-icon", className: "fill-background text-destructive size-full", strokeWidth: 2 })) : status === 'error' ? (_jsx(CircleAlert, { "aria-hidden": true, "data-testid": "presence-error-icon", className: "fill-background text-destructive size-full", strokeWidth: 2 })) : status === 'invisible' ? (_jsx(EyeOff, { "aria-hidden": true, className: "fill-background text-muted-foreground size-full", strokeWidth: 2 })) : (_jsx(Circle, { "aria-hidden": true, className: "fill-background text-muted-foreground size-full", strokeWidth: 2 })) }));
+}

package/dist/components/presence-overlay.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export type PresencePrincipalKind = 'user' | 'external' | 'naut';
+export interface ProjectedPresencePeer {
+    principalId: string;
+    name: string;
+    kind: PresencePrincipalKind;
+    color: string;
+    screenX: number;
+    screenY: number;
+    ghost?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        label?: string;
+    } | null;
+}
+export interface PresenceCursorsOverlayProps extends React.ComponentProps<'div'> {
+    peers: ProjectedPresencePeer[];
+    maxCursors?: number;
+    overflowCount?: number;
+    overflowLabel?: (count: number) => string;
+    nautLabel?: string;
+    externalLabel?: string;
+    personLabel?: string;
+}
+export declare function PresenceCursorsOverlay({ className, peers, maxCursors, overflowCount, overflowLabel, nautLabel, externalLabel, personLabel, ...props }: PresenceCursorsOverlayProps): React.JSX.Element;

package/dist/components/presence-overlay.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Bot, UserRound, MousePointer2 } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+const DEFAULT_MAX_CURSORS = 20;
+function kindLabel(kind, labels) {
+    if (kind === 'naut')
+        return labels.naut;
+    if (kind === 'external')
+        return labels.external;
+    return labels.person;
+}
+function KindIcon({ kind }) {
+    if (kind === 'naut')
+        return _jsx(Bot, { className: "size-3 shrink-0", strokeWidth: 1.75, "aria-hidden": true });
+    if (kind === 'external')
+        return _jsx(UserRound, { className: "size-3 shrink-0", strokeWidth: 1.75, "aria-hidden": true });
+    return null;
+}
+export function PresenceCursorsOverlay({ className, peers, maxCursors = DEFAULT_MAX_CURSORS, overflowCount = 0, overflowLabel = (count) => `+${count} more`, nautLabel = 'Naut', externalLabel = 'External', personLabel = 'Person', ...props }) {
+    const visible = peers.slice(0, Math.max(0, maxCursors));
+    const hiddenPeers = Math.max(0, peers.length - visible.length);
+    const overflow = overflowCount + hiddenPeers;
+    const labels = { naut: nautLabel, external: externalLabel, person: personLabel };
+    return (_jsxs("div", { "data-slot": "presence-cursors-overlay", "aria-hidden": true, role: "presentation", className: cn('pointer-events-none absolute inset-0 overflow-hidden', className), ...props, children: [visible.map((peer) => {
+                const showKind = peer.kind === 'naut' || peer.kind === 'external';
+                return (_jsxs(React.Fragment, { children: [peer.ghost ? (_jsxs("div", { "data-slot": "presence-ghost", className: "absolute rounded-md border border-dashed transition-[transform,width,height] duration-75 ease-[var(--ease-out-expo)] motion-reduce:transition-none", style: {
+                                transform: `translate3d(${peer.ghost.x}px, ${peer.ghost.y}px, 0)`,
+                                width: peer.ghost.width,
+                                height: peer.ghost.height,
+                                borderColor: peer.color,
+                            }, children: [_jsx("div", { className: "absolute inset-0 rounded-md opacity-10", style: { backgroundColor: peer.color } }), peer.ghost.label ? (_jsx("span", { className: "absolute -top-5 left-0 max-w-40 truncate rounded-md px-1.5 py-0.5 text-[11px] leading-none font-medium text-white shadow-sm", style: { backgroundColor: peer.color }, children: peer.ghost.label })) : null] })) : null, _jsxs("div", { "data-slot": "presence-cursor", "data-kind": peer.kind, className: "absolute top-0 left-0 flex items-start gap-1 transition-transform duration-75 ease-[var(--ease-out-expo)] will-change-transform motion-reduce:transition-none", style: { transform: `translate3d(${peer.screenX}px, ${peer.screenY}px, 0)` }, children: [_jsx(MousePointer2, { className: "size-4 shrink-0 drop-shadow-sm", strokeWidth: 1.5, style: { color: peer.color, fill: peer.color }, "aria-hidden": true }), _jsxs("span", { className: "flex max-w-40 items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] leading-none font-medium text-white shadow-sm", style: { backgroundColor: peer.color }, children: [_jsx(KindIcon, { kind: peer.kind }), showKind ? (_jsx("span", { className: "shrink-0 opacity-75", children: kindLabel(peer.kind, labels) })) : null, _jsx("span", { className: "truncate", children: peer.name })] })] })] }, peer.principalId));
+            }), overflow > 0 ? (_jsx("span", { "data-slot": "presence-overflow", className: "border-border bg-background/80 text-muted-foreground absolute top-1.5 right-1.5 rounded-md border px-1.5 py-0.5 text-[11px] leading-none font-medium shadow-sm backdrop-blur-sm", children: overflowLabel(overflow) })) : null] }));
+}

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+export interface PropertyListLabels {
+    /** Shown for null / undefined / empty-string values. */
+    empty: string;
+    /** Shown in place of the whole value when `redacted` is set. */
+    redacted: string;
+    /** Boolean `true`. */
+    yes: string;
+    /** Boolean `false`. */
+    no: string;
+    /** Disclosure summary for a nested object with `n` keys. */
+    fields: (n: number) => string;
+    /** Disclosure summary for a nested array with `n` items. */
+    items: (n: number) => string;
+    /** Accessible label for the button that appends an item to a scalar array (editable). */
+    addItem?: string;
+    /** Accessible label for the button that removes an item from a scalar array (editable). */
+    removeItem?: string;
+}
+export interface PropertyListProps extends Omit<React.ComponentProps<'div'>, 'children' | 'onChange'> {
+    /** Any JSON-ish value — object, array, or primitive. */
+    value: unknown;
+    /** Replace the entire rendering with the `redacted` label (e.g. a redacted run result). */
+    redacted?: boolean;
+    /** Localized copy. App-agnostic: the consumer injects translated strings. */
+    labels?: Partial<PropertyListLabels>;
+    /** BCP-47 locale for date formatting; defaults to the runtime locale. */
+    locale?: string;
+    /** Nesting depth (0-based) at and beyond which objects/arrays collapse by default. */
+    collapseDepth?: number;
+    /** Turn scalar values into inline editors. Requires `onValueChange`. */
+    editable?: boolean;
+    /** Called with the next root value on every edit (editable mode). */
+    onValueChange?: (next: unknown) => void;
+    /**
+     * Optional per-scalar renderer. Called for every leaf value with its field key;
+     * return a node to replace the default formatting, or `undefined` to fall back.
+     * App-agnostic: the consumer injects domain rendering (e.g. resolving an id to a
+     * human "Kind · Title" chip) without this component knowing the domain.
+     */
+    renderScalar?: (value: unknown, key: string) => React.ReactNode | undefined;
+    /**
+     * Optional key-label formatter, replacing the default {@link humanizeKey}. Lets a
+     * consumer relabel raw JSON keys for display (e.g. strip an `_id` suffix so
+     * `status_id` reads as "Status"). Return the humanized label to show.
+     */
+    formatKey?: (key: string) => string;
+}
+export declare function humanizeKey(key: string): string;
+export declare function formatScalar(value: unknown, locale?: string): {
+    kind: 'empty' | 'text' | 'url' | 'date' | 'number' | 'bool';
+    text: string;
+    bool?: boolean;
+};
+/**
+ * Renders an arbitrary JSON-ish value as friendly, labeled fields — humanized
+ * keys, formatted primitives (dates, links, yes/no), collapsible nested groups.
+ * Scalar rows are hybrid: the value sits inline (right-aligned) when it fits the
+ * width and drops to its own full-width line when it doesn't, so values never
+ * shred vertically in a narrow panel. With `editable`, scalars become inline
+ * editors. The non-technical alternative to a raw JSON dump. App-agnostic:
+ * inject localized `labels`.
+ */
+export declare function PropertyList({ value, redacted, labels, locale, collapseDepth, editable, onValueChange, renderScalar, formatKey, className, ...props }: PropertyListProps): React.JSX.Element;