@atmos.build/ui 0.1.2 → 0.1.4

package/README.md

@@ -13,30 +13,30 @@ 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'
+import { useAtmosMcpApp } from '@atmos.build/ui/mcp-app'
 ```
 
 The build configuration and stylesheet use their own subpaths:
 
 ```ts
-import { atmosMcpAppViteConfig } from '@atmos/ui/mcp-app/vite'
+import { atmosMcpAppViteConfig } from '@atmos.build/ui/mcp-app/vite'
 ```
 
 ```css
-@import '@atmos/ui/mcp-app/styles.css';
+@import '@atmos.build/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.
+The stylesheet scans the complete component catalog, so any component exported by `@atmos.build/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
+npm install --save-exact @atmos.build/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.
+The compiled `app-build/app.js` and `app-build/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:
 

package/dist/components/calendar.js

@@ -5,7 +5,7 @@ import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { LayoutGroup, motion, useReducedMotion } from 'motion/react';
 import { Button } from './button.js';
 import { cn } from '../lib/cn.js';
-import { parseLooseDate } from "../lib/parse-loose.js";
+import { parseLooseDate } from '../lib/parse-loose.js';
 import { resolveDateTimeFormat } from '../lib/date-time-format.js';
 const DEFAULT_LABELS = {
     aria: 'Date picker',
@@ -136,13 +136,14 @@ export function Calendar({ value, onSelect, selectionMode = 'day', locale, forma
                             (selectionMode === 'week' ? sameWeek(d, previewDate) : sameDay(d, previewDate));
                         const hostsSelection = isSelected && (selectionMode === 'week' ? isWeekStart : true);
                         const isDisabled = isBeforeMin(d);
-                        return (_jsxs("button", { type: "button", onClick: () => handlePick(d), disabled: isDisabled, "aria-disabled": isDisabled || undefined, "aria-pressed": isSelected || undefined, "aria-label": d.toDateString(), className: cn('relative h-7 rounded-md text-[12px] tabular-nums transition-colors', 'hover:bg-accent hover:text-accent-foreground cursor-pointer', 'focus-visible:ring-ring/40 focus-visible:ring-2 focus-visible:outline-none', isToday && 'rounded-lg ring-1 ring-foreground/40', inMonth ? 'text-foreground/90' : 'text-muted-foreground/45', isPreview && 'bg-primary/10', isSelected &&
+                        return (_jsxs("button", { type: "button", onClick: () => handlePick(d), disabled: isDisabled, "aria-disabled": isDisabled || undefined, "aria-pressed": isSelected || undefined, "aria-label": d.toDateString(), className: cn('relative h-7 rounded-md text-[12px] tabular-nums transition-colors', 'hover:bg-accent hover:text-accent-foreground cursor-pointer', 'focus-visible:ring-ring/40 focus-visible:ring-2 focus-visible:outline-none', isToday && 'ring-foreground/40 rounded-lg ring-1', inMonth ? 'text-foreground/90' : 'text-muted-foreground/45', isPreview && 'bg-primary/10', isSelected &&
                                 (selectionMode === 'week'
-                                    ? 'text-foreground hover:bg-transparent hover:text-foreground'
-                                    : 'text-primary-foreground hover:text-primary-foreground'), selectionMode === 'week' && (isSelected || isPreview) && 'rounded-none', (isSelected || isPreview) && isWeekStart && 'rounded-l-md', (isSelected || isPreview) && isWeekEnd && 'rounded-r-md', isDisabled && 'pointer-events-none cursor-default opacity-30 hover:bg-transparent'), children: [hostsSelection ? (_jsx(motion.div, { layoutId: "calendar-selection", "aria-hidden": true, "data-testid": "calendar-selection", transition: selectionTransition, className: cn('pointer-events-none absolute rounded-md', selectionMode === 'week'
+                                    ? 'text-foreground hover:text-foreground hover:bg-transparent'
+                                    : 'text-primary-foreground hover:text-primary-foreground'), selectionMode === 'week' && (isSelected || isPreview) && 'rounded-none', (isSelected || isPreview) && isWeekStart && 'rounded-l-md', (isSelected || isPreview) && isWeekEnd && 'rounded-r-md', isDisabled &&
+                                'pointer-events-none cursor-default opacity-30 hover:bg-transparent'), children: [hostsSelection ? (_jsx(motion.div, { layoutId: "calendar-selection", "aria-hidden": true, "data-testid": "calendar-selection", transition: selectionTransition, className: cn('pointer-events-none absolute rounded-md', selectionMode === 'week'
                                         ? 'bg-primary/15 inset-y-0 left-0 w-[700%]'
                                         : 'bg-primary inset-0') })) : null, _jsx("span", { className: "relative z-10", children: d.getDate() })] }, d.toISOString()));
-                    }) }) }), quickActions ? (_jsxs("div", { className: "mt-2 flex items-center gap-1 px-0.5", children: [_jsx(Button, { type: "button", size: "xs", variant: "ghost", onClick: () => onSelect(ymd(today)), children: t.today }), _jsx(Button, { type: "button", size: "xs", variant: "ghost", onClick: () => {
+                    }) }) }), quickActions ? (_jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-1 px-0.5", children: [_jsx(Button, { type: "button", size: "xs", variant: "ghost", onClick: () => onSelect(ymd(today)), children: t.today }), _jsx(Button, { type: "button", size: "xs", variant: "ghost", onClick: () => {
                             const tomorrow = new Date(today);
                             tomorrow.setDate(today.getDate() + 1);
                             onSelect(ymd(tomorrow));

package/dist/components/code-editor-theme.d.ts

@@ -4,7 +4,7 @@ import type { Extension } from '@codemirror/state';
  * How every CodeMirror surface in atmOS looks.
  *
  * The colours are the app's own tokens rather than a packaged editor theme, so an editor
- * follows the workspace into dark mode and stays the same instrument whether it is holding
+ * follows the org into dark mode and stays the same instrument whether it is holding
  * a SQL statement, a formula, or a file off a machine. A packaged theme would be a second
  * palette to keep in sync with the first, and it would be wrong the moment the app's is.
  */

package/dist/components/code-editor-theme.js

@@ -6,7 +6,7 @@ import { tags as t } from '@lezer/highlight';
  * How every CodeMirror surface in atmOS looks.
  *
  * The colours are the app's own tokens rather than a packaged editor theme, so an editor
- * follows the workspace into dark mode and stays the same instrument whether it is holding
+ * follows the org into dark mode and stays the same instrument whether it is holding
  * a SQL statement, a formula, or a file off a machine. A packaged theme would be a second
  * palette to keep in sync with the first, and it would be wrong the moment the app's is.
  */

package/dist/components/date-time-picker.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useMemo, useState, } from 'react';
+import { useId, useMemo, useState } from 'react';
 import { CalendarClock, Clock } from 'lucide-react';
 import { Calendar } from './calendar.js';
 import { PickerField } from './picker-field.js';
@@ -14,6 +14,11 @@ const DEFAULT_LABELS = {
     preview: (when) => `Preview: ${when}`,
     timeAria: 'Choose a time',
 };
+function nextSlotAfterNow(step, now) {
+    const stride = Math.max(1, Math.round(step));
+    const minutes = now.getHours() * 60 + now.getMinutes();
+    return Math.min(Math.ceil((minutes + 1) / stride) * stride, 24 * 60 - 1);
+}
 function ymd(d) {
     return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
 }
@@ -94,7 +99,11 @@ export function DateTimePicker({ value, onChange, mode = 'datetime', step = 15,
     const previewLabel = preview ? fmt(preview) : null;
     const gridValue = preview ? ymd(preview) : value ? ymd(value) : null;
     const columnMinutes = preview ? minutesOf(preview) : value ? minutesOf(value) : null;
-    const slots = useMemo(() => buildTimeSlots(step, 0, 24 * 60 - 1), [step]);
+    const now = civilDateForTimeZone(new Date(), parseTimeZone);
+    const todayYmd = ymd(now);
+    const earliestMinutesOn = (day) => minDate && minDate <= todayYmd && day === todayYmd ? nextSlotAfterNow(step, now) : 0;
+    const earliestMinutes = earliestMinutesOn(gridValue ?? todayYmd);
+    const slots = useMemo(() => buildTimeSlots(step, earliestMinutes, 24 * 60 - 1), [step, earliestMinutes]);
     const { active, setActive, move } = useTimeNavigation({
         slots,
         selectedMinutes: value ? minutesOf(value) : null,
@@ -113,7 +122,7 @@ export function DateTimePicker({ value, onChange, mode = 'datetime', step = 15,
         const d = fromYmd(day);
         if (!d)
             return;
-        commit(compose(d, columnMinutes ?? 9 * 60));
+        commit(compose(d, Math.max(columnMinutes ?? 9 * 60, earliestMinutesOn(day))));
     };
     const pickTime = (minutes) => {
         commit(compose(value ?? carrier(), minutes));
@@ -149,5 +158,5 @@ export function DateTimePicker({ value, onChange, mode = 'datetime', step = 15,
                 setTyped(null);
                 setActive(null);
             }
-        }, display: display, typed: typed, onTypedChange: setTyped, onInputKeyDown: handleKeyDown, placeholder: placeholder ?? labels.placeholder, parseState: typed ? (preview ? 'ok' : 'unparseable') : 'empty', icon: mode === 'time' ? (_jsx(Clock, { className: "size-3.5", strokeWidth: 1.8 })) : (_jsx(CalendarClock, { className: "size-3.5", strokeWidth: 1.8 })), disabled: disabled, size: size, align: align, "aria-label": ariaLabel, className: cn(mode === 'time' ? 'w-[116px]' : 'w-[212px]', className), listboxId: listboxId, activeDescendantId: active !== null ? optionId(active) : undefined, children: [previewLabel ? (_jsx("p", { className: "text-muted-foreground border-border/60 border-b px-3 py-1.5 text-[11px] tabular-nums", children: labels.preview(previewLabel) })) : null, _jsxs("div", { className: "flex items-stretch", children: [mode !== 'time' && (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-2.5", children: _jsx(Calendar, { value: gridValue, locale: resolvedLocale, format: format, typeable: false, minDate: minDate, onSelect: pickDay, className: "w-[244px]" }, gridValue ? gridValue.slice(0, 7) : 'none') }), _jsx("div", { className: "bg-border/60 w-px self-stretch" })] })), _jsx(TimeColumn, { id: listboxId, optionId: optionId, slots: slots, selectedMinutes: columnMinutes, activeMinutes: active, onPick: pickTime, locale: resolvedLocale, format: format, "aria-label": labels.timeAria })] })] }));
+        }, display: display, typed: typed, onTypedChange: setTyped, onInputKeyDown: handleKeyDown, placeholder: placeholder ?? labels.placeholder, parseState: typed ? (preview ? 'ok' : 'unparseable') : 'empty', icon: mode === 'time' ? (_jsx(Clock, { className: "size-3.5", strokeWidth: 1.8 })) : (_jsx(CalendarClock, { className: "size-3.5", strokeWidth: 1.8 })), disabled: disabled, size: size, align: align, "aria-label": ariaLabel, className: cn(mode === 'time' ? 'w-[116px]' : 'w-[212px]', className), listboxId: listboxId, activeDescendantId: active !== null ? optionId(active) : undefined, children: [previewLabel ? (_jsx("p", { className: "text-muted-foreground border-border/60 border-b px-3 py-1.5 text-[11px] tabular-nums", children: labels.preview(previewLabel) })) : null, _jsxs("div", { className: "flex items-stretch", children: [mode !== 'time' && (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-2.5", children: _jsx(Calendar, { value: gridValue, locale: resolvedLocale, format: format, typeable: false, minDate: minDate, onSelect: pickDay }, gridValue ? gridValue.slice(0, 7) : 'none') }), _jsx("div", { className: "bg-border/60 w-px self-stretch" })] })), _jsx(TimeColumn, { id: listboxId, optionId: optionId, slots: slots, selectedMinutes: columnMinutes, activeMinutes: active, onPick: pickTime, locale: resolvedLocale, format: format, "aria-label": labels.timeAria })] })] }));
 }

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

@@ -1,11 +1,16 @@
+import * as React from 'react';
 import type { ReactNode } from 'react';
 export type InlineAlertTone = 'error' | 'warning' | 'info';
-export interface InlineAlertProps {
+export type InlineAlertVariant = 'filled' | 'quiet';
+export interface InlineAlertProps extends Omit<React.ComponentProps<'div'>, 'children'> {
     tone?: InlineAlertTone;
+    variant?: InlineAlertVariant;
     children: ReactNode;
     onDismiss?: () => void;
     dismissLabel?: string;
-    className?: string;
+    detail?: string;
+    detailLabel?: string;
+    copyDetailLabel?: string;
 }
-export declare function InlineAlert({ tone, children, onDismiss, dismissLabel, className, }: InlineAlertProps): import("react").JSX.Element;
-export declare function InlineNotice({ tone, children, className, }: Pick<InlineAlertProps, 'tone' | 'children' | 'className'>): import("react").JSX.Element;
+export declare function InlineAlert({ tone, variant, children, onDismiss, dismissLabel, detail, detailLabel, copyDetailLabel, className, ...props }: InlineAlertProps): React.JSX.Element;
+export declare function InlineNotice({ tone, children, className, }: Pick<InlineAlertProps, 'tone' | 'children' | 'className'>): React.JSX.Element;

package/dist/components/inline-alert.js

@@ -1,16 +1,34 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertTriangle, Info, X } from 'lucide-react';
+import * as React from 'react';
+import { AlertTriangle, ChevronRight, Info, X } from 'lucide-react';
 import { cn } from '../lib/cn.js';
 import { Button } from './button.js';
+import { CopyButton } from './copy-button.js';
 const toneClass = {
     error: 'border-destructive/30 bg-destructive/10 text-destructive',
     warning: 'border-warning/30 bg-warning/15 text-warning',
     info: 'border-info/30 bg-info/15 text-info',
 };
-export function InlineAlert({ tone = 'error', children, onDismiss, dismissLabel, className, }) {
+const quietRailClass = {
+    error: 'border-l-destructive',
+    warning: 'border-l-warning',
+    info: 'border-l-info',
+};
+const iconToneClass = {
+    error: 'text-destructive',
+    warning: 'text-warning',
+    info: 'text-info',
+};
+const quietClass = 'border-border/70 bg-muted/20 text-foreground border-l-2';
+export function InlineAlert({ tone = 'error', variant = 'filled', children, onDismiss, dismissLabel, detail, detailLabel, copyDetailLabel, className, ...props }) {
     const Icon = tone === 'info' ? Info : AlertTriangle;
-    return (_jsxs("div", { role: "alert", "data-slot": "inline-alert", "data-tone": tone, className: cn('flex items-start gap-2 rounded-md border px-3 py-2 text-xs', toneClass[tone], className), children: [_jsx(Icon, { className: "mt-0.5 size-3.5 shrink-0", strokeWidth: 1.5, "aria-hidden": true }), _jsx("span", { className: "flex-1 leading-relaxed", children: children }), onDismiss ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: onDismiss, "aria-label": dismissLabel, className: "-mr-1 size-4 rounded text-current opacity-80 hover:bg-transparent hover:opacity-100", children: _jsx(X, { className: "size-3", strokeWidth: 1.5 }) })) : null] }));
+    const quiet = variant === 'quiet';
+    const [detailOpen, setDetailOpen] = React.useState(false);
+    const detailId = React.useId();
+    return (_jsxs("div", { role: "alert", "data-slot": "inline-alert", "data-tone": tone, "data-variant": variant, className: cn('flex items-start gap-2 rounded-md border px-3 py-2 text-xs', quiet ? cn(quietClass, quietRailClass[tone]) : toneClass[tone], className), ...props, children: [_jsx(Icon, { className: cn('mt-0.5 size-3.5 shrink-0', quiet && iconToneClass[tone]), strokeWidth: 1.5, "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1 leading-relaxed", children: [children, detail ? (_jsxs("div", { className: "mt-1", children: [_jsxs(Button, { type: "button", variant: "ghost", size: "xs", onClick: () => setDetailOpen((open) => !open), "aria-expanded": detailOpen, "aria-controls": detailOpen ? detailId : undefined, "data-slot": "inline-alert-detail-toggle", className: cn('-ml-2 h-5 opacity-80 hover:bg-transparent hover:opacity-100', quiet
+                                    ? 'text-muted-foreground hover:text-foreground'
+                                    : 'text-current hover:text-current'), children: [_jsx(ChevronRight, { className: cn('transition-transform duration-125 ease-[var(--ease-out-expo)] motion-reduce:transition-none', detailOpen && 'rotate-90'), strokeWidth: 1.5, "aria-hidden": true }), detailLabel] }), detailOpen ? (_jsxs("div", { className: "relative mt-1", children: [_jsx("pre", { id: detailId, "data-slot": "inline-alert-detail", className: "border-border/50 bg-background/70 text-foreground max-h-56 overflow-auto rounded-md border py-1.5 pr-9 pl-2 font-mono text-[11px] leading-4 whitespace-pre-wrap", children: detail }), copyDetailLabel ? (_jsx(CopyButton, { value: detail, label: copyDetailLabel, "data-slot": "inline-alert-detail-copy", className: "absolute top-1 right-1" })) : null] })) : null] })) : null] }), onDismiss ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: onDismiss, "aria-label": dismissLabel, className: "-mr-1 size-4 rounded text-current opacity-80 hover:bg-transparent hover:opacity-100", children: _jsx(X, { className: "size-3", strokeWidth: 1.5 }) })) : null] }));
 }
 export function InlineNotice({ tone = 'info', children, className, }) {
     return (_jsx(InlineAlert, { tone: tone, className: className, children: children }));

package/dist/components/metric-grid.d.ts

@@ -21,8 +21,10 @@ export interface MetricTileProps extends Omit<React.ComponentProps<'div'>, 'titl
     suffix?: React.ReactNode;
     hint?: React.ReactNode;
     tone?: MetricTone;
+    /** What the value is changing from, rendered as "before → after". See SpecStripItem.from. */
+    from?: React.ReactNode;
 }
-export declare function MetricTile({ label, value, suffix, hint, tone, className, ...props }: MetricTileProps): React.JSX.Element;
+export declare function MetricTile({ label, value, suffix, hint, from, tone, className, ...props }: MetricTileProps): React.JSX.Element;
 export interface MetricBreakdownItem {
     key: string;
     label: React.ReactNode;

package/dist/components/metric-grid.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
+import { ArrowRight } from 'lucide-react';
 import { cn } from '../lib/cn.js';
 const TONE_TEXT = {
     neutral: 'text-foreground',
@@ -18,8 +19,8 @@ const PANEL_PADDING = { none: '', sm: 'p-3', md: 'p-4' };
 export function MetricPanel({ title, action, padding = 'md', className, children, ...props }) {
     return (_jsxs("div", { "data-slot": "metric-panel", className: cn('bg-muted min-w-0', PANEL_PADDING[padding], className), ...props, children: [title || action ? (_jsxs("div", { className: cn('mb-3 flex items-center justify-between gap-2', padding === 'none' && 'px-3 pt-3'), children: [title ? _jsx("p", { className: "text-xs font-medium", children: title }) : _jsx("span", {}), action] })) : null, children] }));
 }
-export function MetricTile({ label, value, suffix, hint, tone = 'neutral', className, ...props }) {
-    return (_jsxs("div", { "data-slot": "metric-tile", "data-tone": tone, className: cn('bg-muted min-w-0 p-3', className), ...props, children: [label ? _jsx("p", { className: "text-muted-foreground truncate text-xs", children: label }) : null, _jsxs("p", { className: cn('text-2xl font-semibold tracking-tight tabular-nums', label ? 'mt-2' : '', TONE_TEXT[tone]), children: [value, suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-xs font-normal", children: suffix })) : null] }), hint ? _jsx("p", { className: "text-muted-foreground mt-1 text-[11px] leading-snug", children: hint }) : null] }));
+export function MetricTile({ label, value, suffix, hint, from, tone = 'neutral', className, ...props }) {
+    return (_jsxs("div", { "data-slot": "metric-tile", "data-tone": tone, className: cn('bg-muted min-w-0 p-3', className), ...props, children: [label ? _jsx("p", { className: "text-muted-foreground truncate text-xs", children: label }) : null, _jsxs("p", { className: cn('text-2xl font-semibold tracking-tight tabular-nums', label ? 'mt-2' : '', TONE_TEXT[tone]), children: [from !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground font-normal", children: from }), _jsx(ArrowRight, { className: "text-muted-foreground mx-1.5 inline size-4 align-[-0.05em]", strokeWidth: 1.5, "aria-hidden": true })] })) : null, value, suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-xs font-normal", children: suffix })) : null] }), hint ? _jsx("p", { className: "text-muted-foreground mt-1 text-[11px] leading-snug", children: hint }) : null] }));
 }
 const TONE_BAR = {
     neutral: 'bg-foreground/35',

package/dist/components/property-selector.js

@@ -3,10 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState, } from 'react';
 import { Check, Plus } from 'lucide-react';
 import { Slot } from 'radix-ui';
-import { StackedPopover, StackedPopoverContent, StackedPopoverTrigger, } from './popover-stack.js';
+import { StackedPopover, StackedPopoverContent, StackedPopoverTrigger } from './popover-stack.js';
 import { Kbd } from './kbd.js';
 import { EmptyState } from './empty-state.js';
 import { cn } from '../lib/cn.js';
+import { useScrollLockEscape } from '../lib/scroll-lock-escape.js';
 const DEFAULT_LABELS = {
     noMatches: 'No matches',
     create: 'Create',
@@ -18,23 +19,8 @@ export function PropertySelector({ open, onOpenChange, children, items, onSelect
     const [activeOverride, setActiveOverride] = useState(null);
     const inputRef = useRef(null);
     const triggerRef = useRef(null);
-    const wheelCleanupRef = useRef(null);
     const listId = useId();
-    // The list is portalled to <body>, outside the scroll-lock (react-remove-scroll) of any
-    // enclosing dialog. That lock's document-level, bubble-phase `wheel` handler cancels
-    // mouse-wheel scrolling on portalled content (trackpad deltas slip its overscroll heuristic,
-    // discrete wheel ticks don't). Stopping the wheel event at the list keeps it from reaching that
-    // handler, so the list scrolls natively while the dialog's background stays locked. A callback
-    // ref (re)attaches the listener every time the list mounts, since it only exists while open.
-    const listRefCallback = useCallback((node) => {
-        wheelCleanupRef.current?.();
-        wheelCleanupRef.current = null;
-        if (!node)
-            return;
-        const stop = (event) => event.stopPropagation();
-        node.addEventListener('wheel', stop, { passive: true });
-        wheelCleanupRef.current = () => node.removeEventListener('wheel', stop);
-    }, []);
+    const listRefCallback = useScrollLockEscape();
     const filtered = useMemo(() => {
         const q = query.trim().toLowerCase();
         if (!q)
@@ -57,9 +43,7 @@ export function PropertySelector({ open, onOpenChange, children, items, onSelect
             ids.push(CREATE_ROW);
         return ids;
     }, [filtered, showCreate]);
-    const activeId = activeOverride && rowIds.includes(activeOverride)
-        ? activeOverride
-        : (rowIds[0] ?? null);
+    const activeId = activeOverride && rowIds.includes(activeOverride) ? activeOverride : (rowIds[0] ?? null);
     const handleOpenChange = useCallback((next) => {
         if (next) {
             setQuery('');
@@ -106,11 +90,7 @@ export function PropertySelector({ open, onOpenChange, children, items, onSelect
             handleOpenChange(false);
             return;
         }
-        if (e.key.length === 1 &&
-            !e.metaKey &&
-            !e.ctrlKey &&
-            !e.altKey &&
-            query.length === 0) {
+        if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && query.length === 0) {
             const key = e.key.toLowerCase();
             const hit = items.find((i) => i.shortcut?.toLowerCase() === key);
             if (hit) {
@@ -120,7 +100,7 @@ export function PropertySelector({ open, onOpenChange, children, items, onSelect
         }
     }, [rowIds, activeId, filtered, items, query.length, handleSelect, handleCreate, handleOpenChange]);
     const activeDomId = activeId ? `${listId}-row-${activeId}` : undefined;
-    return (_jsxs(StackedPopover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(StackedPopoverTrigger, { asChild: true, children: triggerAsChild ? (_jsx(Slot.Root, { ref: triggerRef, "aria-haspopup": "listbox", "aria-expanded": open, children: children })) : (_jsx("div", { ref: triggerRef, className: "inline-flex w-full", "aria-haspopup": "listbox", "aria-expanded": open, children: children })) }), _jsxs(StackedPopoverContent, { className: cn('w-64 p-0 gap-0 overflow-hidden', contentClassName), align: "start", "aria-label": ariaLabel, onCloseAutoFocus: (e) => {
+    return (_jsxs(StackedPopover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(StackedPopoverTrigger, { asChild: true, children: triggerAsChild ? (_jsx(Slot.Root, { ref: triggerRef, "aria-haspopup": "listbox", "aria-expanded": open, children: children })) : (_jsx("div", { ref: triggerRef, className: "inline-flex w-full", "aria-haspopup": "listbox", "aria-expanded": open, children: children })) }), _jsxs(StackedPopoverContent, { className: cn('w-64 gap-0 overflow-hidden p-0', contentClassName), align: "start", "aria-label": ariaLabel, onCloseAutoFocus: (e) => {
                     e.preventDefault();
                     const el = triggerRef.current;
                     const focusable = el?.matches('button, [tabindex]:not([tabindex="-1"])')
@@ -130,12 +110,12 @@ export function PropertySelector({ open, onOpenChange, children, items, onSelect
                 }, onOpenAutoFocus: (e) => {
                     e.preventDefault();
                     inputRef.current?.focus();
-                }, children: [_jsxs("div", { className: "flex items-center gap-2 px-2.5 pt-2.5 pb-1.5 border-b border-border/60", children: [_jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": listId, "aria-expanded": true, "aria-activedescendant": activeDomId, value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, className: "flex-1 min-w-0 bg-transparent outline-none text-[13px] placeholder:text-muted-foreground/70" }), triggerKey ? (_jsx(Kbd, { className: "text-[10.5px] shrink-0", children: triggerKey })) : null] }), _jsxs("ul", { ref: listRefCallback, id: listId, role: "listbox", "aria-label": ariaLabel, className: "max-h-[280px] overflow-y-auto overscroll-contain py-1", children: [filtered.length === 0 && !showCreate ? (_jsx("li", { children: _jsx(EmptyState, { title: labels.noMatches, className: "py-6" }) })) : (filtered.map((item) => {
+                }, children: [_jsxs("div", { className: "border-border/60 flex items-center gap-2 border-b px-2.5 pt-2.5 pb-1.5", children: [_jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": listId, "aria-expanded": true, "aria-activedescendant": activeDomId, value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, className: "placeholder:text-muted-foreground/70 min-w-0 flex-1 bg-transparent text-[13px] outline-none" }), triggerKey ? _jsx(Kbd, { className: "shrink-0 text-[10.5px]", children: triggerKey }) : null] }), _jsxs("ul", { ref: listRefCallback, id: listId, role: "listbox", "aria-label": ariaLabel, className: "max-h-[280px] overflow-y-auto overscroll-contain py-1", children: [filtered.length === 0 && !showCreate ? (_jsx("li", { children: _jsx(EmptyState, { title: labels.noMatches, className: "py-6" }) })) : (filtered.map((item) => {
                                 const active = activeId === item.id;
                                 return (
                                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard handled by the parent input via aria-activedescendant
-                                _jsxs("li", { id: `${listId}-row-${item.id}`, role: "option", "aria-selected": item.selected ?? false, "data-active": active || undefined, onMouseEnter: () => setActiveOverride(item.id), onClick: () => handleSelect(item), className: cn('mx-1 px-2 py-1.5 rounded-md cursor-pointer text-[13px] text-foreground', 'flex gap-2', item.description ? 'items-start' : 'items-center', active && 'bg-muted'), children: [item.icon ? (_jsx("span", { className: cn('shrink-0 inline-flex items-center justify-center', item.description && 'pt-0.5'), children: item.icon })) : null, _jsxs("span", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "block truncate", children: item.label }), item.description ? (_jsx("span", { className: "block truncate text-[11px] leading-snug text-muted-foreground", children: item.description })) : null] }), _jsxs("span", { className: cn('shrink-0 inline-flex items-center gap-1 text-muted-foreground', item.description && 'pt-0.5'), children: [item.selected ? _jsx(Check, { className: "size-3.5", "aria-hidden": true }) : null, item.shortcut ? (_jsx(Kbd, { className: "text-[10.5px]", children: item.shortcut })) : null] })] }, item.id));
+                                _jsxs("li", { id: `${listId}-row-${item.id}`, role: "option", "aria-selected": item.selected ?? false, "data-active": active || undefined, onMouseEnter: () => setActiveOverride(item.id), onClick: () => handleSelect(item), className: cn('text-foreground mx-1 cursor-pointer rounded-md px-2 py-1.5 text-[13px]', 'flex gap-2', item.description ? 'items-start' : 'items-center', active && 'bg-muted'), children: [item.icon ? (_jsx("span", { className: cn('inline-flex shrink-0 items-center justify-center', item.description && 'pt-0.5'), children: item.icon })) : null, _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: item.label }), item.description ? (_jsx("span", { className: "text-muted-foreground block truncate text-[11px] leading-snug", children: item.description })) : null] }), _jsxs("span", { className: cn('text-muted-foreground inline-flex shrink-0 items-center gap-1', item.description && 'pt-0.5'), children: [item.selected ? _jsx(Check, { className: "size-3.5", "aria-hidden": true }) : null, item.shortcut ? _jsx(Kbd, { className: "text-[10.5px]", children: item.shortcut }) : null] })] }, item.id));
                             })), showCreate ? (
                             // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard handled by the parent input via aria-activedescendant
-                            _jsxs("li", { id: `${listId}-row-${CREATE_ROW}`, role: "option", "aria-selected": false, "data-active": activeId === CREATE_ROW || undefined, onMouseEnter: () => setActiveOverride(CREATE_ROW), onClick: handleCreate, className: cn('mx-1 mt-1 px-2 py-1.5 rounded-md cursor-pointer text-[13px]', 'flex items-center gap-2', filtered.length > 0 && 'border-t border-border/60 pt-2', activeId === CREATE_ROW && 'bg-muted'), children: [_jsx(Plus, { className: "size-3.5 text-muted-foreground shrink-0", strokeWidth: 1.8, "aria-hidden": true }), _jsxs("span", { className: "text-foreground truncate", children: [createLabel ?? labels.create, ":", ' ', _jsxs("span", { className: "text-foreground/90", children: ["\"", trimmedQuery, "\""] })] })] })) : null] })] })] }));
+                            _jsxs("li", { id: `${listId}-row-${CREATE_ROW}`, role: "option", "aria-selected": false, "data-active": activeId === CREATE_ROW || undefined, onMouseEnter: () => setActiveOverride(CREATE_ROW), onClick: handleCreate, className: cn('mx-1 mt-1 cursor-pointer rounded-md px-2 py-1.5 text-[13px]', 'flex items-center gap-2', filtered.length > 0 && 'border-border/60 border-t pt-2', activeId === CREATE_ROW && 'bg-muted'), children: [_jsx(Plus, { className: "text-muted-foreground size-3.5 shrink-0", strokeWidth: 1.8, "aria-hidden": true }), _jsxs("span", { className: "text-foreground truncate", children: [createLabel ?? labels.create, ":", ' ', _jsxs("span", { className: "text-foreground/90", children: ["\"", trimmedQuery, "\""] })] })] })) : null] })] })] }));
 }

package/dist/components/shimmer-text.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useMediaQuery } from '../hooks/use-media-query.js';
 import { cn } from '../lib/cn.js';
-const SHIMMER_FRAME_MS = 1000 / 8;
+const SHIMMER_FRAME_MS = 1000 / 30;
 const shimmerEntries = new Set();
 let shimmerTimer = 0;
 function paintShimmers() {

package/dist/components/spec-strip.d.ts

@@ -4,6 +4,11 @@ export interface SpecStripItem {
     label: string;
     value: React.ReactNode;
     suffix?: React.ReactNode;
+    /**
+     * What the value is changing from. Present, the item reads "before → after", which is what a
+     * shape being upgraded is: the new number alone says what you get without saying what moved.
+     */
+    from?: React.ReactNode;
 }
 export interface SpecStripProps extends Omit<React.ComponentProps<'div'>, 'children'> {
     items: SpecStripItem[];

package/dist/components/spec-strip.js

@@ -1,6 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { ArrowRight } from 'lucide-react';
 import { cn } from '../lib/cn.js';
 import { Separator } from './separator.js';
 /**
@@ -11,5 +12,5 @@ import { Separator } from './separator.js';
  * stops meaning anything.
  */
 export function SpecStrip({ items, className, ...props }) {
-    return (_jsx("div", { "data-slot": "spec-strip", className: cn('flex items-stretch gap-3', className), ...props, children: items.map((item, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(Separator, { orientation: "vertical", className: "bg-border/60" }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-1.5 py-1", children: [_jsx("span", { className: "text-muted-foreground [&_svg]:size-5", "aria-hidden": true, children: item.icon }), _jsxs("span", { className: "truncate text-[17px] font-medium tabular-nums", children: [item.value, item.suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-[12px] font-normal", children: item.suffix })) : null] }), _jsx("span", { className: "text-muted-foreground truncate text-[11.5px]", children: item.label })] })] }, item.label))) }));
+    return (_jsx("div", { "data-slot": "spec-strip", className: cn('flex items-stretch gap-3', className), ...props, children: items.map((item, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(Separator, { orientation: "vertical", className: "bg-border/60" }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-1.5 py-1", children: [_jsx("span", { className: "text-muted-foreground [&_svg]:size-5", "aria-hidden": true, children: item.icon }), _jsxs("span", { className: "truncate text-[17px] font-medium tabular-nums", children: [item.from !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground font-normal", children: item.from }), _jsx(ArrowRight, { className: "text-muted-foreground mx-1 inline size-3.5 align-[-0.1em]", strokeWidth: 1.5, "aria-hidden": true })] })) : null, item.value, item.suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-[12px] font-normal", children: item.suffix })) : null] }), _jsx("span", { className: "text-muted-foreground truncate text-[11.5px]", children: item.label })] })] }, item.label))) }));
 }

package/dist/components/time-column.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../lib/cn.js';
 import { resolveDateTimeFormat } from '../lib/date-time-format.js';
+import { useScrollLockEscape } from '../lib/scroll-lock-escape.js';
 export function buildTimeSlots(step, minMinutes, maxMinutes) {
     const stride = Math.max(1, Math.round(step));
     const out = [];
@@ -47,10 +48,11 @@ export function TimeColumn({ slots, selectedMinutes, activeMinutes = null, onPic
     }, [format, locale, hour12]);
     const scrollTarget = activeMinutes ?? selectedMinutes;
     const currentRef = useRef(null);
+    const listRefCallback = useScrollLockEscape();
     useEffect(() => {
         currentRef.current?.scrollIntoView({ block: 'center' });
     }, [scrollTarget]);
-    return (_jsx("div", { id: id, role: "listbox", "aria-label": ariaLabel, className: cn('max-h-[316px] w-[92px] space-y-0.5 overflow-y-auto px-1.5 py-2', className), children: slots.map((minutes) => {
+    return (_jsx("div", { id: id, ref: listRefCallback, role: "listbox", "aria-label": ariaLabel, className: cn('max-h-[316px] w-[92px] space-y-0.5 overflow-y-auto px-1.5 py-2', className), children: slots.map((minutes) => {
             const selected = selectedMinutes === minutes;
             const active = activeMinutes === minutes;
             return (_jsx("button", { ref: minutes === scrollTarget ? currentRef : undefined, id: optionId?.(minutes), type: "button", role: "option", "aria-selected": selected, tabIndex: -1, onClick: () => onPick(minutes), className: cn('w-full cursor-pointer rounded-md px-2 py-1 text-left text-[12px] tabular-nums transition-colors', selected

package/dist/flow/editor/adapter.d.ts

@@ -10,7 +10,7 @@ export interface FlowEditorIssue {
     readonly severity?: FlowEditorIssueSeverity;
 }
 export interface FlowAdapterContext {
-    readonly workspaceId: string | null | undefined;
+    readonly orgId: string | null | undefined;
 }
 export interface NodeConfigPanelProps<TData> {
     readonly node: RfNode<TData>;

package/dist/flow/editor/flow-editor.d.ts

@@ -23,7 +23,7 @@ export interface FlowEditorCanvasContext<TData, TEdge> {
 export type UseFlowEditorCanvasPresentation<TData, TEdge> = (context: FlowEditorCanvasContext<TData, TEdge>) => FlowEditorCanvasPresentation<TData, TEdge>;
 export interface FlowEditorProps<TData, TEdge, TDef, TSaveInput, TSaveResult, TPublishInput, TPublishResult> {
     readonly adapter: FlowDomainAdapter<TData, TEdge, TDef, TSaveInput, TSaveResult, TPublishInput, TPublishResult>;
-    readonly workspaceId: string | null | undefined;
+    readonly orgId: string | null | undefined;
     readonly initialNodes: RfNode<TData>[];
     readonly initialEdges: RfEdge<TEdge>[];
     readonly settingsTitle: string;
@@ -50,5 +50,5 @@ export interface FlowEditorProps<TData, TEdge, TDef, TSaveInput, TSaveResult, TP
         onOpenChange: (open: boolean) => void;
     }) => ReactNode;
 }
-export declare function FlowEditor<TData, TEdge = unknown, TDef = unknown, TSaveInput = unknown, TSaveResult = unknown, TPublishInput = unknown, TPublishResult = unknown>({ adapter, workspaceId, initialNodes, initialEdges, settingsTitle, isNew, externalDirty, initiallyUnpublished, onSaved, onPublished, onFirstSave, onError, renderInsertPicker, renderDropPicker, dropPickerWidth, buildEdge, isSingleHandle, handleOrderOf, clipboardKind, headingFont, testId, renderHeaderStart, useCanvasPresentation, renderSettings, }: FlowEditorProps<TData, TEdge, TDef, TSaveInput, TSaveResult, TPublishInput, TPublishResult>): import("react").JSX.Element;
+export declare function FlowEditor<TData, TEdge = unknown, TDef = unknown, TSaveInput = unknown, TSaveResult = unknown, TPublishInput = unknown, TPublishResult = unknown>({ adapter, orgId, initialNodes, initialEdges, settingsTitle, isNew, externalDirty, initiallyUnpublished, onSaved, onPublished, onFirstSave, onError, renderInsertPicker, renderDropPicker, dropPickerWidth, buildEdge, isSingleHandle, handleOrderOf, clipboardKind, headingFont, testId, renderHeaderStart, useCanvasPresentation, renderSettings, }: FlowEditorProps<TData, TEdge, TDef, TSaveInput, TSaveResult, TPublishInput, TPublishResult>): import("react").JSX.Element;
 export {};

package/dist/flow/editor/flow-editor.js

@@ -14,9 +14,9 @@ import { SettingsDialog } from './settings-dialog.js';
 function useDefaultCanvasPresentation(_context) {
     return {};
 }
-export function FlowEditor({ adapter, workspaceId, initialNodes, initialEdges, settingsTitle, isNew = false, externalDirty = false, initiallyUnpublished = false, onSaved, onPublished, onFirstSave, onError, renderInsertPicker, renderDropPicker, dropPickerWidth, buildEdge, isSingleHandle, handleOrderOf, clipboardKind, headingFont, testId = 'flow-editor', renderHeaderStart, useCanvasPresentation = useDefaultCanvasPresentation, renderSettings, }) {
+export function FlowEditor({ adapter, orgId, initialNodes, initialEdges, settingsTitle, isNew = false, externalDirty = false, initiallyUnpublished = false, onSaved, onPublished, onFirstSave, onError, renderInsertPicker, renderDropPicker, dropPickerWidth, buildEdge, isSingleHandle, handleOrderOf, clipboardKind, headingFont, testId = 'flow-editor', renderHeaderStart, useCanvasPresentation = useDefaultCanvasPresentation, renderSettings, }) {
     const t = useTranslations('flowEditor');
-    const adapterCtx = useMemo(() => ({ workspaceId }), [workspaceId]);
+    const adapterCtx = useMemo(() => ({ orgId }), [orgId]);
     const groups = useMemo(() => adapter.nodeGroups(adapterCtx), [adapter, adapterCtx]);
     const dag = useDagEditor({
         makeNodeData: adapter.makeNodeData,
@@ -173,7 +173,7 @@ export function FlowEditor({ adapter, workspaceId, initialNodes, initialEdges, s
             lastSavedSigRef.current = debouncedSaveSig;
             return;
         }
-        if (isNew || !workspaceId)
+        if (isNew || !orgId)
             return;
         if (debouncedSaveSig === lastSavedSigRef.current)
             return;
@@ -181,7 +181,7 @@ export function FlowEditor({ adapter, workspaceId, initialNodes, initialEdges, s
         void persistRef.current(true).catch(() => {
             lastSavedSigRef.current = null;
         });
-    }, [debouncedSaveSig, isNew, workspaceId]);
+    }, [debouncedSaveSig, isNew, orgId]);
     const [settingsOpen, setSettingsOpen] = useState(false);
     const toolbarExtras = adapter.toolbarExtras?.(adapterCtx);
     const canvasPresentation = useCanvasPresentation({ dag, groups, invalidNodeIds });

package/dist/index.d.ts

@@ -75,6 +75,7 @@ export { TimestampedTranscript, type TimestampedTranscriptLabels, type Timestamp
 export { MicrophonePriority, type MicrophonePriorityItem, type MicrophonePriorityLabels, type MicrophonePriorityProps, } from './components/microphone-priority.js';
 export { SpeechPlayback, type SpeechPlaybackLabels, type SpeechPlaybackProps, type SpeechPlaybackState, } from './components/speech-playback.js';
 export { cn } from './lib/cn.js';
+export { useScrollLockEscape } from './lib/scroll-lock-escape.js';
 export { clearLocalUiState, readLocalUiState, subscribeLocalUiState, useLocalUiState, writeLocalUiState, } from './lib/local-ui-state.js';
 export { disclosureStateKey, useDisclosureState, type DisclosureState, } from './lib/disclosure-state.js';
 export * from './lib/view-query/index.js';

package/dist/index.js

@@ -75,6 +75,7 @@ export { TimestampedTranscript, } from './components/timestamped-transcript.js';
 export { MicrophonePriority, } from './components/microphone-priority.js';
 export { SpeechPlayback, } from './components/speech-playback.js';
 export { cn } from './lib/cn.js';
+export { useScrollLockEscape } from './lib/scroll-lock-escape.js';
 export { clearLocalUiState, readLocalUiState, subscribeLocalUiState, useLocalUiState, writeLocalUiState, } from './lib/local-ui-state.js';
 export { disclosureStateKey, useDisclosureState, } from './lib/disclosure-state.js';
 export * from './lib/view-query/index.js';

package/dist/lib/scroll-lock-escape.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Portalled content lands outside the scroll-lock (react-remove-scroll) of any enclosing dialog.
+ * That lock's document-level, bubble-phase `wheel` handler cancels mouse-wheel scrolling on
+ * portalled content (trackpad deltas slip its overscroll heuristic, discrete wheel ticks don't).
+ * Stopping the wheel event at the scroller keeps it from reaching that handler, so the content
+ * scrolls natively while the dialog's background stays locked. A callback ref (re)attaches the
+ * listener every time the scroller mounts, since it only exists while the surface is open.
+ */
+export declare function useScrollLockEscape<T extends HTMLElement>(): (node: T | null) => void;

package/dist/lib/scroll-lock-escape.js

@@ -0,0 +1,22 @@
+'use client';
+import { useCallback, useRef } from 'react';
+/**
+ * Portalled content lands outside the scroll-lock (react-remove-scroll) of any enclosing dialog.
+ * That lock's document-level, bubble-phase `wheel` handler cancels mouse-wheel scrolling on
+ * portalled content (trackpad deltas slip its overscroll heuristic, discrete wheel ticks don't).
+ * Stopping the wheel event at the scroller keeps it from reaching that handler, so the content
+ * scrolls natively while the dialog's background stays locked. A callback ref (re)attaches the
+ * listener every time the scroller mounts, since it only exists while the surface is open.
+ */
+export function useScrollLockEscape() {
+    const cleanupRef = useRef(null);
+    return useCallback((node) => {
+        cleanupRef.current?.();
+        cleanupRef.current = null;
+        if (!node)
+            return;
+        const stop = (event) => event.stopPropagation();
+        node.addEventListener('wheel', stop, { passive: true });
+        cleanupRef.current = () => node.removeEventListener('wheel', stop);
+    }, []);
+}

package/dist/mcp-app/checkout-version.d.ts

@@ -0,0 +1,14 @@
+export interface McpAppCheckoutVersionState {
+    reachable: boolean;
+    repositoryRoot: boolean;
+    branch: string | null;
+    headCommit: string | null;
+    detached: boolean;
+}
+export interface McpAppCheckoutVersionCopy {
+    checkout(id: string): string;
+    detachedHead: string;
+    detachedHeadAt(commit: string): string;
+}
+export declare function mcpAppCheckoutVersionLabel(checkoutId: string, state: McpAppCheckoutVersionState | null, copy: McpAppCheckoutVersionCopy): string;
+export declare function shortCheckoutId(checkoutId: string): string;

package/dist/mcp-app/checkout-version.js

@@ -0,0 +1,19 @@
+export function mcpAppCheckoutVersionLabel(checkoutId, state, copy) {
+    if (state?.reachable && state.repositoryRoot) {
+        if (!state.detached && state.branch?.trim())
+            return state.branch.trim();
+        if (state.detached) {
+            const commit = shortCommit(state.headCommit);
+            return commit ? copy.detachedHeadAt(commit) : copy.detachedHead;
+        }
+    }
+    return copy.checkout(shortCheckoutId(checkoutId));
+}
+export function shortCheckoutId(checkoutId) {
+    const normalized = checkoutId.trim();
+    return normalized.length > 12 ? `${normalized.slice(0, 4)}…${normalized.slice(-4)}` : normalized;
+}
+function shortCommit(commit) {
+    const normalized = commit?.trim();
+    return normalized ? normalized.slice(0, 7) : null;
+}

package/dist/mcp-app/index.d.ts

@@ -1,4 +1,8 @@
 export { App } from '@modelcontextprotocol/ext-apps';
 export type { McpUiHostContext, McpUiToolResultNotification } from '@modelcontextprotocol/ext-apps';
 export { applyAtmosHostContext } from './theme.js';
+export { mcpAppCheckoutVersionLabel, shortCheckoutId, type McpAppCheckoutVersionCopy, type McpAppCheckoutVersionState, } from './checkout-version.js';
 export { useAtmosMcpApp, type AtmosMcpAppOptions } from './use-atmos-mcp-app.js';
+export { useMcpResource, type McpResourceState } from './use-mcp-resource.js';
+export { callMcpTool, useMcpTool, type McpToolState } from './use-mcp-tool.js';
+export type { McpToolInput, McpToolOutput, RuntimeSchema, TypedMcpResource, TypedMcpTool, } from './typed-schema.js';

package/dist/mcp-app/index.js

@@ -1,3 +1,6 @@
 export { App } from '@modelcontextprotocol/ext-apps';
 export { applyAtmosHostContext } from './theme.js';
+export { mcpAppCheckoutVersionLabel, shortCheckoutId, } from './checkout-version.js';
 export { useAtmosMcpApp } from './use-atmos-mcp-app.js';
+export { useMcpResource } from './use-mcp-resource.js';
+export { callMcpTool, useMcpTool } from './use-mcp-tool.js';

package/dist/mcp-app/resource-protocol.d.ts

@@ -0,0 +1,5 @@
+import type { App } from '@modelcontextprotocol/ext-apps';
+import { type ResourceUpdatedNotification } from '@modelcontextprotocol/sdk/types.js';
+export declare function onMcpResourceUpdated(app: App, handler: (notification: ResourceUpdatedNotification) => void): void;
+export declare function subscribeMcpResource(app: App, uri: string): Promise<void>;
+export declare function unsubscribeMcpResource(app: App, uri: string): Promise<void>;

package/dist/mcp-app/resource-protocol.js

@@ -0,0 +1,13 @@
+import { EmptyResultSchema, ResourceUpdatedNotificationSchema, SubscribeRequestSchema, UnsubscribeRequestSchema, } from '@modelcontextprotocol/sdk/types.js';
+export function onMcpResourceUpdated(app, handler) {
+    resourceProtocol(app).setNotificationHandler(ResourceUpdatedNotificationSchema, handler);
+}
+export async function subscribeMcpResource(app, uri) {
+    await resourceProtocol(app).request(SubscribeRequestSchema.parse({ method: 'resources/subscribe', params: { uri } }), EmptyResultSchema);
+}
+export async function unsubscribeMcpResource(app, uri) {
+    await resourceProtocol(app).request(UnsubscribeRequestSchema.parse({ method: 'resources/unsubscribe', params: { uri } }), EmptyResultSchema);
+}
+function resourceProtocol(app) {
+    return app;
+}

package/dist/mcp-app/typed-schema.d.ts

@@ -0,0 +1,28 @@
+export interface RuntimeSchema<T> {
+    parse(value: unknown): T;
+}
+export interface TypedMcpResource<T> {
+    readonly uri: string;
+    readonly schema: RuntimeSchema<T>;
+}
+export interface TypedMcpTool<ParsedInput = unknown, Output = unknown, Input = ParsedInput> {
+    readonly name: string;
+    readonly input: RuntimeSchema<ParsedInput>;
+    readonly output: RuntimeSchema<Output>;
+    readonly '~types'?: {
+        input: Input;
+        output: Output;
+        parsedInput: ParsedInput;
+    };
+}
+export type McpToolInput<Tool extends TypedMcpTool> = '~types' extends keyof Tool ? ToolTypeCarrier<Tool> extends {
+    input: infer Input;
+} ? Input : ParsedSchema<Tool['input']> : ParsedSchema<Tool['input']>;
+export type McpToolOutput<Tool extends TypedMcpTool> = '~types' extends keyof Tool ? ToolTypeCarrier<Tool> extends {
+    output: infer Output;
+} ? Output : ParsedSchema<Tool['output']> : ParsedSchema<Tool['output']>;
+type ToolTypeCarrier<Tool> = Tool extends {
+    readonly '~types'?: infer Types;
+} ? NonNullable<Types> : never;
+type ParsedSchema<Schema> = Schema extends RuntimeSchema<infer Value> ? Value : never;
+export {};

package/dist/mcp-app/typed-schema.js

@@ -0,0 +1 @@
+export {};

package/dist/mcp-app/use-mcp-resource.d.ts

@@ -0,0 +1,11 @@
+import type { App } from '@modelcontextprotocol/ext-apps';
+import type { ReadResourceResult } from '@modelcontextprotocol/sdk/types.js';
+import type { TypedMcpResource } from './typed-schema.js';
+export interface McpResourceState<T> {
+    data: T | undefined;
+    error: Error | undefined;
+    loading: boolean;
+    refresh: () => void;
+}
+export declare function useMcpResource<T>(app: App | null | undefined, uri: string | null | undefined, select: (resource: ReadResourceResult) => T): McpResourceState<T>;
+export declare function useMcpResource<T>(app: App | null | undefined, resource: TypedMcpResource<T> | null | undefined): McpResourceState<T>;

package/dist/mcp-app/use-mcp-resource.js

@@ -0,0 +1,206 @@
+/* eslint-disable react-hooks/refs -- the latest selector must not become a store subscription dependency */
+import { useMemo, useRef, useSyncExternalStore } from 'react';
+import { onMcpResourceUpdated, subscribeMcpResource, unsubscribeMcpResource, } from './resource-protocol.js';
+const EMPTY_SNAPSHOT = { loading: false };
+const SUBSCRIPTION_RETRY_BASE_MS = 500;
+const SUBSCRIPTION_RETRY_MAX_ATTEMPT = 6;
+const SUBSCRIPTION_RETRY_MAX_MS = 30_000;
+const registries = new WeakMap();
+export function useMcpResource(app, resourceOrUri, select) {
+    const uri = typeof resourceOrUri === 'string' ? resourceOrUri : resourceOrUri?.uri;
+    const selectRef = useRef(() => {
+        throw new Error('An MCP resource selector is required');
+    });
+    selectRef.current =
+        typeof resourceOrUri === 'string'
+            ? (select ?? selectRef.current)
+            : (result) => parseTypedResource(result, resourceOrUri);
+    const entry = useMemo(() => (app && uri ? resourceEntry(app, uri) : undefined), [app, uri]);
+    const snapshot = useSyncExternalStore(entry?.subscribe ?? emptySubscribe, entry?.getSnapshot ?? emptySnapshot, emptySnapshot);
+    let data;
+    let error = snapshot.error;
+    if (snapshot.result) {
+        try {
+            data = selectRef.current(snapshot.result);
+        }
+        catch (cause) {
+            error = resourceError(cause);
+        }
+    }
+    return {
+        data,
+        error,
+        loading: snapshot.loading,
+        refresh: entry?.refresh ?? emptyRefresh,
+    };
+}
+function parseTypedResource(result, resource) {
+    if (!resource)
+        throw new Error('An MCP resource descriptor is required');
+    const content = result.contents.find((item) => item.uri === resource.uri);
+    if (!content || !('text' in content) || typeof content.text !== 'string') {
+        throw new Error(`MCP resource ${resource.uri} did not contain text content`);
+    }
+    return resource.schema.parse(JSON.parse(content.text));
+}
+class McpResourceRegistry {
+    app;
+    entries = new Map();
+    listening = false;
+    constructor(app) {
+        this.app = app;
+    }
+    listen() {
+        if (this.listening)
+            return;
+        this.listening = true;
+        onMcpResourceUpdated(this.app, ({ params }) => this.entries.get(params.uri)?.updated());
+    }
+}
+class McpResourceEntry {
+    registry;
+    uri;
+    listeners = new Set();
+    snapshot = { loading: true };
+    desired = false;
+    subscribed = false;
+    readVersion = 0;
+    retryAttempt = 0;
+    retryTimer;
+    transition = Promise.resolve();
+    constructor(registry, uri) {
+        this.registry = registry;
+        this.uri = uri;
+    }
+    getSnapshot = () => this.snapshot;
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        if (this.listeners.size === 1) {
+            const wasDesired = this.desired;
+            this.desired = true;
+            if (!wasDesired) {
+                this.retryAttempt = 0;
+                this.cancelRetry();
+            }
+            this.registry.listen();
+            this.reconcile();
+        }
+        return () => {
+            this.listeners.delete(listener);
+            queueMicrotask(() => {
+                if (this.listeners.size !== 0)
+                    return;
+                this.desired = false;
+                this.cancelRetry();
+                this.reconcile();
+            });
+        };
+    };
+    refresh = () => {
+        if (this.subscribed) {
+            void this.read();
+            return;
+        }
+        this.retryAttempt = 0;
+        this.cancelRetry();
+        this.reconcile();
+    };
+    updated() {
+        if (this.desired && this.subscribed)
+            void this.read();
+    }
+    reconcile() {
+        this.transition = this.transition
+            .then(() => this.applyDesired())
+            .catch((cause) => {
+            if (this.desired) {
+                this.publish({ ...this.snapshot, error: resourceError(cause), loading: false });
+                if (retryableResourceError(cause))
+                    this.scheduleRetry();
+            }
+        });
+    }
+    async applyDesired() {
+        if (this.desired && !this.subscribed) {
+            this.publish({ ...this.snapshot, error: undefined, loading: true });
+            await subscribeMcpResource(this.registry.app, this.uri);
+            this.subscribed = true;
+            this.retryAttempt = 0;
+            this.cancelRetry();
+            if (this.desired)
+                void this.read();
+        }
+        if (!this.desired && this.subscribed) {
+            this.subscribed = false;
+            this.readVersion += 1;
+            await unsubscribeMcpResource(this.registry.app, this.uri);
+        }
+        if (this.desired !== this.subscribed)
+            this.reconcile();
+    }
+    scheduleRetry() {
+        if (!this.desired || this.subscribed || this.retryTimer)
+            return;
+        const delay = Math.min(SUBSCRIPTION_RETRY_BASE_MS * 2 ** this.retryAttempt, SUBSCRIPTION_RETRY_MAX_MS);
+        this.retryAttempt = Math.min(this.retryAttempt + 1, SUBSCRIPTION_RETRY_MAX_ATTEMPT);
+        this.retryTimer = setTimeout(() => {
+            this.retryTimer = undefined;
+            if (this.desired && !this.subscribed)
+                this.reconcile();
+        }, delay);
+    }
+    cancelRetry() {
+        if (this.retryTimer === undefined)
+            return;
+        clearTimeout(this.retryTimer);
+        this.retryTimer = undefined;
+    }
+    async read() {
+        const version = ++this.readVersion;
+        this.publish({ ...this.snapshot, error: undefined, loading: true });
+        try {
+            const result = await this.registry.app.readServerResource({ uri: this.uri });
+            if (!this.desired || !this.subscribed || version !== this.readVersion)
+                return;
+            this.publish({ result, loading: false });
+        }
+        catch (cause) {
+            if (!this.desired || !this.subscribed || version !== this.readVersion)
+                return;
+            this.publish({ ...this.snapshot, error: resourceError(cause), loading: false });
+        }
+    }
+    publish(snapshot) {
+        this.snapshot = snapshot;
+        this.listeners.forEach((listener) => listener());
+    }
+}
+function resourceEntry(app, uri) {
+    let registry = registries.get(app);
+    if (!registry) {
+        registry = new McpResourceRegistry(app);
+        registries.set(app, registry);
+    }
+    let entry = registry.entries.get(uri);
+    if (!entry) {
+        entry = new McpResourceEntry(registry, uri);
+        registry.entries.set(uri, entry);
+    }
+    return entry;
+}
+function resourceError(cause) {
+    return cause instanceof Error ? cause : new Error(String(cause));
+}
+function retryableResourceError(cause) {
+    if (!cause || typeof cause !== 'object' || !('code' in cause))
+        return true;
+    const code = cause.code;
+    return code !== -32700 && code !== -32600 && code !== -32601 && code !== -32602;
+}
+function emptySubscribe() {
+    return emptyRefresh;
+}
+function emptySnapshot() {
+    return EMPTY_SNAPSHOT;
+}
+function emptyRefresh() { }

package/dist/mcp-app/use-mcp-tool.d.ts

@@ -0,0 +1,9 @@
+import type { App } from '@modelcontextprotocol/ext-apps';
+import type { McpToolInput, McpToolOutput, TypedMcpTool } from './typed-schema.js';
+export interface McpToolState<Input, Output> {
+    call: (input: Input) => Promise<Output>;
+    error: Error | undefined;
+    loading: boolean;
+}
+export declare function callMcpTool<Tool extends TypedMcpTool>(app: App, tool: Tool, input: McpToolInput<Tool>): Promise<McpToolOutput<Tool>>;
+export declare function useMcpTool<Tool extends TypedMcpTool>(app: App | null | undefined, tool: Tool): McpToolState<McpToolInput<Tool>, McpToolOutput<Tool>>;

package/dist/mcp-app/use-mcp-tool.js

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+export async function callMcpTool(app, tool, input) {
+    const parsedInput = tool.input.parse(input);
+    const result = await app.callServerTool({
+        name: tool.name,
+        arguments: asToolArguments(parsedInput),
+    });
+    if (result.isError)
+        throw toolCallError(tool.name, result);
+    return tool.output.parse(result.structuredContent);
+}
+export function useMcpTool(app, tool) {
+    const [status, setStatus] = useState({
+        app,
+        error: undefined,
+        pending: 0,
+        tool,
+    });
+    const mounted = useRef(true);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    const call = useCallback(async (input) => {
+        if (!app)
+            throw new Error(`Cannot call MCP tool ${tool.name}: the app is not connected`);
+        setStatus((current) => ({
+            app,
+            error: undefined,
+            pending: current.app === app && current.tool === tool ? current.pending + 1 : 1,
+            tool,
+        }));
+        try {
+            return await callMcpTool(app, tool, input);
+        }
+        catch (cause) {
+            const nextError = mcpToolError(cause);
+            if (mounted.current) {
+                setStatus((current) => current.app === app && current.tool === tool
+                    ? { ...current, error: nextError }
+                    : current);
+            }
+            throw nextError;
+        }
+        finally {
+            if (mounted.current) {
+                setStatus((current) => current.app === app && current.tool === tool
+                    ? { ...current, pending: Math.max(0, current.pending - 1) }
+                    : current);
+            }
+        }
+    }, [app, tool]);
+    const currentStatus = status.app === app && status.tool === tool ? status : undefined;
+    return { call, error: currentStatus?.error, loading: Boolean(currentStatus?.pending) };
+}
+function asToolArguments(input) {
+    if (!input || typeof input !== 'object' || Array.isArray(input)) {
+        throw new Error('MCP tool input must be an object');
+    }
+    return input;
+}
+function toolCallError(name, result) {
+    const detail = result.content
+        .filter((item) => Boolean(item.type === 'text' && item.text.trim()))
+        .map((item) => item.text.trim())
+        .join('\n');
+    return new Error(detail ? `MCP tool ${name} failed: ${detail}` : `MCP tool ${name} failed`);
+}
+function mcpToolError(cause) {
+    return cause instanceof Error ? cause : new Error(String(cause));
+}

package/dist/mcp-app/vite.js

@@ -6,7 +6,7 @@ import { defineConfig } from 'vite';
 const MCP_APP_SOURCE_METADATA_PROPERTY = '__atmosMcpSource';
 const REACT_COMPONENT_FILE = /\.[jt]sx$/i;
 const NON_PRODUCTION_COMPONENT_FILE = /\.(?:stories|test|spec)\.[cm]?[jt]sx?$/i;
-export function atmosMcpAppViteConfig({ root, entry = 'src/main.tsx', outDir = '../dist', }) {
+export function atmosMcpAppViteConfig({ root, entry = 'src/main.tsx', outDir = '../app-build', }) {
     return defineConfig({
         root,
         publicDir: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atmos.build/ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "The complete atmOS React component system and MCP App authoring helpers.",
   "type": "module",
   "license": "UNLICENSED",
@@ -64,6 +64,7 @@
     "@emoji-mart/data": "^1.2.1",
     "@lezer/highlight": "^1.2.3",
     "@modelcontextprotocol/ext-apps": "1.7.5",
+    "@modelcontextprotocol/sdk": "1.29.0",
     "@radix-ui/react-roving-focus": "^1.1.15",
     "@radix-ui/react-slot": "^1.3.0",
     "@tailwindcss/postcss": "^4.3.2",