@atmos.build/ui 0.1.3 → 0.1.5

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/charts/bar-chart.js

@@ -11,7 +11,7 @@ export function BarChart(props) {
     const barW = stacked
         ? Math.max(7, Math.min(36, groupW * 0.54))
         : Math.max(5, Math.min(28, groupW / Math.max(1, yKeys.length) - 5));
-    const cornerRadius = Math.min(8, barW / 2);
+    const cornerRadius = Math.min(4, barW / 2);
     const { state: hoverState, move, clear } = useCartesianHover(metrics, data.length, true);
     const hoveredRow = hoverState ? data[hoverState.index] : undefined;
     return (_jsxs("div", { className: "relative h-full w-full", children: [_jsxs("svg", { viewBox: `0 0 ${metrics.w} ${metrics.h}`, className: cn('h-full w-full overflow-visible', className), role: "img", "aria-label": props.ariaLabel, onPointerMove: move, onPointerLeave: clear, children: [_jsx(CartesianGrid, { ...metrics, data: data, xKey: xKey, banded: true }), hoverState ? (_jsx("rect", { x: metrics.pad.l + hoverState.index * groupW, y: metrics.pad.t, width: groupW, height: metrics.innerH, fill: "currentColor", opacity: 0.05, "aria-hidden": true })) : null, data.map((row, rowIndex) => {
@@ -33,7 +33,9 @@ export function BarChart(props) {
                             if (stacked && keyIndex === topStackIndex && height > 0) {
                                 return (_jsx("path", { d: topRoundedRectPath(barX, barY, barW, height, cornerRadius), fill: color, opacity: opacity, className: "animate-in fade-in slide-in-from-bottom-1 duration-300 hover:opacity-90" }, `${rowIndex}:${key}`));
                             }
-                            return (_jsx("rect", { x: barX, y: barY, width: barW, height: height, rx: stacked ? 0 : cornerRadius, fill: color, opacity: opacity, className: "animate-in fade-in slide-in-from-bottom-1 duration-300 hover:opacity-90" }, `${rowIndex}:${key}`));
+                            return (_jsx("path", { d: stacked
+                                    ? `M ${barX} ${barY} h ${barW} v ${height} h ${-barW} Z`
+                                    : topRoundedRectPath(barX, barY, barW, height, cornerRadius), fill: color, opacity: opacity, className: "animate-in fade-in slide-in-from-bottom-1 duration-300 hover:opacity-90" }, `${rowIndex}:${key}`));
                         });
                     })] }), hoverState && hoveredRow ? (_jsx(ChartTooltip, { state: hoverState, row: hoveredRow, xKey: xKey, yKeys: yKeys, colors: colors, format: format })) : null] }));
 }

package/dist/components/charts/colors.js

@@ -18,7 +18,7 @@ export function chartColor(colors, index) {
 const SAFE_CSS_COLOR_FUNCTION = /^(?:rgb|rgba|hsl|hsla|oklab|oklch)\([\d\s.,%/+-]+\)$/i;
 const SAFE_HEX_COLOR = /^#[\da-f]{3,8}$/i;
 const SAFE_COLOR_KEYWORD = /^(?:black|white|transparent|currentColor)$/i;
-const SAFE_INTERNAL_COLOR_TOKEN = /^var\(--(?:primary|foreground|muted-foreground|border|ring|destructive|background|category-[1-6]|(?:success|warning|danger|info)-(?:3|9|11))\)$/i;
+const SAFE_INTERNAL_COLOR_TOKEN = /^var\(--(?:primary|foreground|muted-foreground|border|ring|destructive|background|category-[1-6]|usage|usage-strong|(?:success|warning|danger|info)-(?:3|9|11))\)$/i;
 function safeChartColor(color) {
     const value = color?.trim();
     if (!value || value.length > 96 || hasControlCharacter(value))

package/dist/components/charts/index.d.ts

@@ -2,9 +2,9 @@ export { AreaChart } from './area-chart.js';
 export { BarChart } from './bar-chart.js';
 export { ChartLegend } from './legend.js';
 export { LineChart } from './line-chart.js';
-export { PieChart } from './pie-chart.js';
+export { PieChart, type PieChartProps } from './pie-chart.js';
 export { RadarChart } from './radar-chart.js';
 export { RadialChart } from './radial-chart.js';
 export { ScatterChart } from './scatter-chart.js';
-export { chartColor } from './colors.js';
+export { CHART_COLORS, chartColor } from './colors.js';
 export type { BarChartProps, CartesianChartProps, CategoricalChartProps, ChartAxisOptions, ChartDatum, ChartLegendItem, ScatterChartProps, } from './types.js';

package/dist/components/charts/index.js

@@ -6,4 +6,4 @@ export { PieChart } from './pie-chart.js';
 export { RadarChart } from './radar-chart.js';
 export { RadialChart } from './radial-chart.js';
 export { ScatterChart } from './scatter-chart.js';
-export { chartColor } from './colors.js';
+export { CHART_COLORS, chartColor } from './colors.js';

package/dist/components/charts/layout.d.ts

@@ -24,12 +24,13 @@ export declare function CartesianGrid({ data, xKey, w, h, pad, innerW, innerH, m
     xKey: string;
     banded?: boolean;
 }): import("react").JSX.Element;
-export declare function categoricalMetrics(height: number): {
+export declare function categoricalMetrics(height: number, layout?: 'wide' | 'square'): {
     w: number;
     h: number;
     cx: number;
     cy: number;
     r: number;
 };
+export declare function donutPath(cx: number, cy: number, rOuter: number, rInner: number, start: number, end: number): string;
 export declare function piePath(cx: number, cy: number, r: number, start: number, end: number): string;
 export declare function ringArcPath(cx: number, cy: number, r: number, start: number, end: number): string;

package/dist/components/charts/layout.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function cartesianMetrics(props, stacked) {
     const w = 720;
-    const h = 220;
+    const h = Math.max(64, Math.min(props.height ?? 220, 720));
     const axis = props.axis;
     const showXAxis = axis?.showXAxis ?? true;
     const showYAxis = axis?.showYAxis ?? true;
+    const bare = !showXAxis && !showYAxis;
     const pad = {
-        l: showYAxis ? (axis?.yLabel ? 62 : 44) : 20,
-        r: 16,
-        t: 14,
-        b: showXAxis ? (axis?.xLabel ? 46 : 32) : 16,
+        l: showYAxis ? (axis?.yLabel ? 62 : 44) : bare ? 2 : 20,
+        r: bare ? 2 : 16,
+        t: bare ? 4 : 14,
+        b: showXAxis ? (axis?.xLabel ? 46 : 32) : bare ? 2 : 16,
     };
     const innerW = w - pad.l - pad.r;
     const innerH = h - pad.t - pad.b;
@@ -72,17 +73,23 @@ export function CartesianGrid({ data, xKey, w, h, pad, innerW, innerH, max, axis
                     return (_jsx("text", { x: xPosition(index), y: h - (axis?.xLabel ? 24 : 10), textAnchor: "middle", fill: "currentColor", opacity: 0.58, fontSize: "9", children: String(row[xKey] ?? index + 1) }, `x-${index}`));
                 }) })) : null, showXAxis && axis?.xLabel ? (_jsx("text", { x: pad.l + innerW / 2, y: h - 6, textAnchor: "middle", fill: "currentColor", opacity: 0.58, fontSize: "10", children: axis.xLabel })) : null, showYAxis && axis?.yLabel ? (_jsx("text", { x: 16, y: pad.t + innerH / 2, textAnchor: "middle", transform: `rotate(-90 16 ${pad.t + innerH / 2})`, fill: "currentColor", opacity: 0.58, fontSize: "10", children: axis.yLabel })) : null] }));
 }
-export function categoricalMetrics(height) {
-    const w = 720;
+export function categoricalMetrics(height, layout = 'wide') {
     const h = Math.max(170, Math.min(height, 420));
+    const w = layout === 'square' ? h : 720;
     return {
         w,
         h,
         cx: w / 2,
         cy: h / 2,
-        r: Math.min(82, h / 2 - 22),
+        r: layout === 'square' ? h / 2 - 4 : Math.min(82, h / 2 - 22),
     };
 }
+export function donutPath(cx, cy, rOuter, rInner, start, end) {
+    const large = end - start > Math.PI ? 1 : 0;
+    const point = (r, angle) => `${(cx + Math.cos(angle) * r).toFixed(2)} ${(cy + Math.sin(angle) * r).toFixed(2)}`;
+    return (`M ${point(rOuter, start)} A ${rOuter} ${rOuter} 0 ${large} 1 ${point(rOuter, end)} ` +
+        `L ${point(rInner, end)} A ${rInner} ${rInner} 0 ${large} 0 ${point(rInner, start)} Z`);
+}
 export function piePath(cx, cy, r, start, end) {
     const large = end - start > Math.PI ? 1 : 0;
     const x1 = cx + Math.cos(start) * r;

package/dist/components/charts/pie-chart.d.ts

@@ -1,2 +1,11 @@
+import * as React from 'react';
 import type { CategoricalChartProps } from './types.js';
-export declare function PieChart({ data, categoryKey, valueKey, colors, height, ariaLabel, valueFormatter, className, }: CategoricalChartProps): import("react").JSX.Element;
+export interface PieChartProps extends CategoricalChartProps {
+    innerRadius?: number;
+    center?: React.ReactNode;
+    activeKey?: string | null;
+    onActiveChange?: (key: string | null) => void;
+    layout?: 'wide' | 'square';
+    categoryFormatter?: (category: string) => string;
+}
+export declare function PieChart({ data, categoryKey, valueKey, colors, height, ariaLabel, valueFormatter, className, innerRadius, center, activeKey, onActiveChange, layout, categoryFormatter, }: PieChartProps): React.JSX.Element;

package/dist/components/charts/pie-chart.js

@@ -1,9 +1,12 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { cn } from '../../lib/cn.js';
 import { chartColor } from './colors.js';
-import { categoricalMetrics, piePath } from './layout.js';
-export function PieChart({ data, categoryKey = 'label', valueKey = 'value', colors, height = 220, ariaLabel, valueFormatter, className, }) {
-    const { w, h, cx, cy, r } = categoricalMetrics(height);
+import { categoricalMetrics, donutPath, piePath } from './layout.js';
+export function PieChart({ data, categoryKey = 'label', valueKey = 'value', colors, height = 220, ariaLabel, valueFormatter, className, innerRadius = 0.42, center, activeKey = null, onActiveChange, layout = 'wide', categoryFormatter, }) {
+    const { w, h, cx, cy, r } = categoricalMetrics(height, layout);
+    const hole = Math.max(0, Math.min(0.9, innerRadius)) * r;
     const total = data.reduce((sum, row) => sum + Math.max(0, Number(row[valueKey] ?? 0)), 0) || 1;
     const format = valueFormatter ?? ((value) => String(value));
     const slices = data.reduce((acc, row, index) => {
@@ -13,10 +16,32 @@ export function PieChart({ data, categoryKey = 'label', valueKey = 'value', colo
         acc.push({ row, value, start, end, index });
         return acc;
     }, []);
-    return (_jsxs("svg", { viewBox: `0 0 ${w} ${h}`, className: cn('h-full w-full overflow-visible', className), role: "img", "aria-label": ariaLabel, children: [slices.map(({ row, value, start, end, index }) => {
-                const label = String(row[categoryKey] ?? index + 1);
-                const angle = (value / total) * Math.PI * 2;
-                const d = angle >= Math.PI * 2 - 0.0001 ? undefined : piePath(cx, cy, r, start, end);
-                return d ? (_jsx("path", { d: d, fill: chartColor(colors, index), stroke: "var(--background)", strokeWidth: 1.5, className: "animate-in fade-in zoom-in-95 duration-300 hover:opacity-90", children: _jsx("title", { children: `${label}: ${format(value)}` }) }, label)) : (_jsx("circle", { cx: cx, cy: cy, r: r, fill: chartColor(colors, index), stroke: "var(--background)", strokeWidth: 1.5, transform: `rotate(${start} ${cx} ${cy})`, className: "animate-in fade-in zoom-in-95 duration-300 hover:opacity-90", children: _jsx("title", { children: `${label}: ${format(value)}` }) }, label));
-            }), _jsx("circle", { cx: cx, cy: cy, r: r * 0.42, fill: "var(--background)", opacity: 0.94 })] }));
+    const dimmed = activeKey !== null;
+    const chart = (_jsx("svg", { viewBox: `0 0 ${w} ${h}`, className: cn('h-full w-full overflow-visible', center ? undefined : className), role: "img", "aria-label": ariaLabel, children: slices.map(({ row, value, start, end, index }) => {
+            const category = String(row[categoryKey] ?? index + 1);
+            const label = categoryFormatter ? categoryFormatter(category) : category;
+            const angle = (value / total) * Math.PI * 2;
+            const full = angle >= Math.PI * 2 - 0.0001;
+            const active = activeKey === category;
+            const d = full
+                ? hole > 0
+                    ? `${donutPath(cx, cy, r, hole, -Math.PI / 2, Math.PI / 2)} ${donutPath(cx, cy, r, hole, Math.PI / 2, Math.PI * 1.5)}`
+                    : undefined
+                : hole > 0
+                    ? donutPath(cx, cy, r, hole, start, end)
+                    : piePath(cx, cy, r, start, end);
+            const shared = {
+                fill: chartColor(colors, index),
+                stroke: 'var(--background)',
+                strokeWidth: 1.5,
+                className: cn('animate-in fade-in zoom-in-95 duration-300 transition-opacity', dimmed && !active && 'opacity-30'),
+                onMouseEnter: () => onActiveChange?.(category),
+                onMouseLeave: () => onActiveChange?.(null),
+                children: _jsx("title", { children: `${label}: ${format(value)}` }),
+            };
+            return d ? (_jsx("path", { d: d, ...shared }, category)) : (_jsx("circle", { cx: cx, cy: cy, r: r, ...shared }, category));
+        }) }));
+    if (!center || hole <= 0)
+        return chart;
+    return (_jsxs("div", { className: cn('relative', className), children: [chart, _jsx("div", { className: "pointer-events-none absolute inset-0 grid place-content-center text-center", children: center })] }));
 }

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 type InlineAlertVariant = 'filled' | 'quiet';
 export interface InlineAlertProps extends Omit<React.ComponentProps<'div'>, 'children'> {
     tone?: InlineAlertTone;
+    variant?: InlineAlertVariant;
     children: ReactNode;
     onDismiss?: () => void;
     dismissLabel?: string;
+    detail?: string;
+    detailLabel?: string;
+    copyDetailLabel?: string;
 }
-export declare function InlineAlert({ tone, children, onDismiss, dismissLabel, className, ...props }: InlineAlertProps): 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,17 +1,34 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { AlertTriangle, Info, X } from 'lucide-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, ...props }) {
+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), ...props, 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

@@ -33,11 +33,15 @@ export interface MetricBreakdownItem {
     tone?: MetricTone;
     title?: string;
     onSelect?: () => void;
+    color?: string;
 }
 export interface MetricBreakdownProps extends Omit<React.ComponentProps<'div'>, 'title'> {
     title?: React.ReactNode;
     items: MetricBreakdownItem[];
     emptyLabel?: React.ReactNode;
     showBars?: boolean;
+    barPlacement?: 'below' | 'inline';
+    activeKey?: string | null;
+    onActiveChange?: (key: string | null) => void;
 }
-export declare function MetricBreakdown({ title, items, emptyLabel, showBars, className, ...props }: MetricBreakdownProps): React.JSX.Element;
+export declare function MetricBreakdown({ title, items, emptyLabel, showBars, barPlacement, activeKey, onActiveChange, className, ...props }: MetricBreakdownProps): React.JSX.Element;

package/dist/components/metric-grid.js

@@ -10,7 +10,7 @@ const TONE_TEXT = {
     danger: 'text-danger-9',
 };
 export function MetricSectionHeading({ title, hint, action, className, ...props }) {
-    return (_jsxs("div", { "data-slot": "metric-section-heading", className: cn('mb-2.5 flex flex-wrap items-start justify-between gap-2', className), ...props, children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-[13px] font-medium", children: title }), hint ? (_jsx("p", { className: "text-muted-foreground mt-0.5 text-[11.5px] leading-snug", children: hint })) : null] }), action] }));
+    return (_jsxs("div", { "data-slot": "metric-section-heading", className: cn('mb-2.5 flex flex-wrap items-start justify-between gap-2', className), ...props, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { className: "text-[13px] font-medium", children: title }), hint ? (_jsx("p", { className: "text-muted-foreground mt-0.5 text-[11.5px] leading-snug", children: hint })) : null] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }));
 }
 export function MetricGrid({ className, ...props }) {
     return (_jsx("div", { "data-slot": "metric-grid", className: cn('bg-background grid gap-px overflow-hidden rounded-xl', className), ...props }));
@@ -28,13 +28,24 @@ const TONE_BAR = {
     warning: 'bg-warning-9/60',
     danger: 'bg-danger-9/55',
 };
-export function MetricBreakdown({ title, items, emptyLabel, showBars = false, className, ...props }) {
-    return (_jsxs("div", { "data-slot": "metric-breakdown", className: cn('min-w-0', className), ...props, children: [title ? _jsx("h3", { className: "mb-1 text-xs font-medium", children: title }) : null, items.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: emptyLabel })) : (_jsx("ul", { className: cn(showBars && 'grid gap-2'), children: items.map((item) => (_jsx("li", { children: _jsx(MetricBreakdownRow, { item: item, showBar: showBars }) }, item.key))) }))] }));
+export function MetricBreakdown({ title, items, emptyLabel, showBars = false, barPlacement = 'below', activeKey = null, onActiveChange, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "metric-breakdown", className: cn('min-w-0', className), ...props, children: [title ? _jsx("h3", { className: "mb-1 text-xs font-medium", children: title }) : null, items.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: emptyLabel })) : (_jsx("ul", { className: cn(showBars && barPlacement === 'below' && 'grid gap-2'), children: items.map((item) => (_jsx("li", { onMouseEnter: onActiveChange ? () => onActiveChange(item.key) : undefined, onMouseLeave: onActiveChange ? () => onActiveChange(null) : undefined, onFocus: onActiveChange ? () => onActiveChange(item.key) : undefined, onBlur: onActiveChange ? () => onActiveChange(null) : undefined, children: _jsx(MetricBreakdownRow, { item: item, showBar: showBars, placement: barPlacement, active: activeKey === item.key, dimmed: activeKey !== null && activeKey !== item.key }) }, item.key))) }))] }));
 }
-function MetricBreakdownRow({ item, showBar }) {
+function MetricBreakdownRow({ item, showBar, placement, active, dimmed, }) {
     const tone = item.tone ?? 'neutral';
-    const row = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex items-center justify-between gap-3 text-xs", children: [_jsx("span", { className: cn('min-w-0 truncate', tone === 'neutral' ? 'text-muted-foreground' : TONE_TEXT[tone]), title: item.title, children: item.label }), _jsx("span", { className: "shrink-0 font-mono tabular-nums", children: item.value })] }), showBar ? (_jsx("span", { className: "bg-background mt-1.5 block h-1 overflow-hidden rounded-full", children: _jsx("span", { className: cn('block h-full rounded-full', TONE_BAR[tone]), style: { width: `${Math.round(Math.max(0, Math.min(1, item.fraction ?? 0)) * 100)}%` } }) })) : null] }));
-    if (!item.onSelect)
-        return _jsx("div", { className: "py-0.5", children: row });
-    return (_jsx("button", { type: "button", onClick: item.onSelect, className: "hover:bg-background/60 focus-visible:ring-ring -mx-1.5 block w-[calc(100%+0.75rem)] rounded-sm px-1.5 py-0.5 text-left focus-visible:ring-2 focus-visible:outline-none", children: row }));
+    const inline = showBar && placement === 'inline';
+    const width = `${Math.round(Math.max(0, Math.min(1, item.fraction ?? 0)) * 100)}%`;
+    const fill = (_jsx("span", { className: cn('block h-full rounded-full', !item.color && TONE_BAR[tone]), style: { width, backgroundColor: item.color } }));
+    const row = (_jsxs(_Fragment, { children: [_jsxs("span", { className: cn('text-xs', inline
+                    ? 'grid grid-cols-[auto_7rem_minmax(0,1fr)] items-center gap-2.5 sm:grid-cols-[auto_12rem_minmax(0,1fr)]'
+                    : 'flex items-center gap-2.5'), children: [item.color ? (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: { backgroundColor: item.color } })) : inline ? (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0" })) : null, _jsx("span", { className: cn('min-w-0 truncate', !inline && 'flex-1', tone === 'neutral' ? 'text-muted-foreground' : TONE_TEXT[tone]), title: item.title, children: item.label }), inline ? (_jsxs("span", { className: "relative flex h-4 items-center", children: [_jsx("span", { className: "bg-background block h-1 w-full overflow-hidden rounded-full", children: fill }), _jsx("span", { "data-slot": "metric-row-value", className: cn('bg-muted absolute inset-y-0 right-0 flex items-center rounded-sm pl-1.5 font-mono tabular-nums transition-opacity', active ? 'opacity-100' : 'opacity-100 [@media(hover:hover)]:opacity-0'), children: item.value })] })) : (_jsx("span", { className: "shrink-0 font-mono tabular-nums", children: item.value }))] }), showBar && placement === 'below' ? (_jsx("span", { className: cn('bg-background mt-1.5 block h-1 overflow-hidden rounded-full', item.color && 'ml-4'), children: fill })) : null] }));
+    const dim = cn('transition-opacity', dimmed && 'opacity-40');
+    if (!item.onSelect) {
+        return (_jsx("div", { className: cn('py-0.5', showBar &&
+                placement === 'inline' &&
+                'focus-visible:ring-ring -mx-1.5 rounded-sm px-1.5 focus-visible:ring-2 focus-visible:outline-none', showBar &&
+                placement === 'inline' &&
+                '[&:focus-visible_[data-slot=metric-row-value]]:opacity-100', dim), tabIndex: showBar && placement === 'inline' ? 0 : undefined, children: row }));
+    }
+    return (_jsx("button", { type: "button", onClick: item.onSelect, className: cn('hover:bg-background/60 focus-visible:ring-ring -mx-1.5 block w-[calc(100%+0.75rem)] rounded-sm px-1.5 py-0.5 text-left focus-visible:ring-2 focus-visible:outline-none', '[&:focus-visible_[data-slot=metric-row-value]]:opacity-100', dim), children: row }));
 }

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/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