@altertable/data-app 0.65.0 → 0.67.0

package/dist/types/react/index.d.ts

@@ -1,34 +1,13 @@
-/**
- * React bindings and UI; inject styles explicitly in the browser entry.
- * @module @altertable/data-app/react
- * @see https://github.com/altertable-ai/data-app/blob/main/docs/react.md
- */
+/** Declared views, bound widgets, and layouts for data-app authoring. */
+export type { DatasetColumn, DatasetDeclaration as DatasetDefinition, } from './bindings.js';
 export { injectDataAppStyles } from './styles.js';
-export { injectDataAppShellStyles } from './shellStyles.js';
 export type { DataAppStylesOptions } from './styles.js';
-export { mountDataApp, DataAppProvider } from './mount.js';
+export type { DataAppStyle, DataAppStyleToken, DataAppStyleHooks, } from './style-contract.js';
+export { mountDataApp } from './mount.js';
 export { createDataHooks } from './hooks.js';
-export { defineDataContent } from './content.js';
-export type { DataContentState } from './content.js';
-export type { DataViewDefinition, ResolvedVariables, ViewBindings, } from './view.js';
-export type { CsvCell, CsvTable, CsvExport } from './ui/csv-export.js';
+export type { CsvCell } from './ui/csv-export.js';
 export { DataApp } from './ui/DataApp.js';
-export type { DataAppProps, DataAppRequest } from './ui/DataApp.js';
-export { GettingStarted } from './ui/GettingStarted.js';
-export { AppLayout } from './ui/AppLayout.js';
-export type { AppLayoutProps } from './ui/AppLayout.js';
-export { AppHeader } from './ui/AppHeader.js';
-export type { AppHeaderProps } from './ui/AppHeader.js';
-export { AppScope } from './ui/AppScope.js';
-export type { AppScopeProps } from './ui/AppScope.js';
-export { AppToolbar } from './ui/AppToolbar.js';
-export type { AppToolbarProps } from './ui/AppToolbar.js';
-export { VariableBar } from './ui/VariableBar.js';
-export type { VariableBarProps } from './ui/VariableBar.js';
-export { AppFooter } from './ui/AppFooter.js';
-export type { AppFooterProps } from './ui/AppFooter.js';
-export { ThemeSelector, ThemeToggle } from './ui/ThemeSelector.js';
-export type { ThemeSelectorProps } from './ui/ThemeSelector.js';
+export type { DataAppProps } from './ui/DataApp.js';
 export { Stack } from './ui/Stack.js';
 export type { StackProps } from './ui/Stack.js';
 export { Grid } from './ui/Grid.js';
@@ -36,110 +15,56 @@ export type { GridProps } from './ui/Grid.js';
 export { GridItem } from './ui/GridItem.js';
 export type { GridItemProps } from './ui/GridItem.js';
 export type { WidgetEvidence } from './ui/WidgetEvidence.js';
-export { DataWidget } from './ui/DataWidget.js';
-export type { WidgetStatus } from './ui/RequestHint.js';
-export type { DataWidgetProps } from './ui/DataWidget.js';
 export { TextContent } from './ui/TextContent.js';
 export type { TextContentProps } from './ui/TextContent.js';
-export { TextWidget } from './ui/TextWidget.js';
-export type { TextWidgetProps } from './ui/TextWidget.js';
-export { VisualizationWidget } from './ui/VisualizationWidget.js';
-export type { VisualizationWidgetProps, VisualizationWidgetView, } from './ui/VisualizationWidget.js';
-export { TableWidget } from './ui/TableWidget.js';
-export type { TableWidgetColumn, TableWidgetProps, TableWidgetSearch, } from './ui/TableWidget.js';
+export { DataValue } from './widgets.js';
+export type { DataValueProps } from './widgets.js';
+export { TextWidget } from './widgets.js';
+export type { TextWidgetProps } from './widgets.js';
+export { VisualizationWidget } from './widgets.js';
+export type { VisualizationWidgetProps } from './widgets.js';
+export type { VisualizationWidgetView } from './widgets.js';
+export { TableWidget } from './widgets.js';
+export type { TableWidgetProps } from './widgets.js';
+export type { TableWidgetSearch } from './ui/TableWidget.js';
 export { chartColor } from './ui/chartColor.js';
 export { Breakdown } from './ui/Breakdown.js';
 export type { BreakdownItem, BreakdownProps } from './ui/Breakdown.js';
 export { Ranking } from './ui/Ranking.js';
 export type { RankingItem, RankingProps } from './ui/Ranking.js';
-export { WidgetDisclosure } from './ui/WidgetDisclosure.js';
-export type { WidgetDisclosureProps } from './ui/WidgetDisclosure.js';
-export { WidgetViewTabs } from './ui/WidgetViewTabs.js';
-export type { WidgetView, WidgetViewTabsProps, } from './ui/WidgetViewTabs.js';
-export { ComparisonVisual } from './ui/ComparisonVisual.js';
-export type { ComparisonVisualProps } from './ui/ComparisonVisual.js';
-export { calendarMetricComparison } from './ui/comparison.js';
-export type { MetricComparison } from './ui/comparison.js';
-export { DataTable, DataTableEmptyRow, DataTableTimestamp, DataTableShare, } from './ui/DataTable.js';
-export type { DataTableProps, DataTableSearch, DataTableEmptyRowProps, DataTableTimestampProps, } from './ui/DataTable.js';
-export { MetricWidget } from './ui/MetricWidget.js';
-export type { MetricWidgetProps } from './ui/MetricWidget.js';
-export { SelectableBarChart } from './ui/SelectableBarChart.js';
-export type { SelectableBarChartProps, SelectableBarItem, } from './ui/SelectableBarChart.js';
-export { DimensionPicker } from './ui/DimensionPicker.js';
+export { Comparison } from './ui/Comparison.js';
+export type { ComparisonProps } from './ui/Comparison.js';
+export { MetricWidget } from './widgets.js';
+export type { MetricWidgetProps } from './widgets.js';
 export { EmptyState } from './ui/EmptyState.js';
 export type { EmptyStateProps } from './ui/EmptyState.js';
 export { Skeleton } from './ui/Skeleton.js';
 export type { SkeletonProps } from './ui/Skeleton.js';
-export { DataAppSkeleton } from './ui/DataAppSkeleton.js';
-export type { DataAppSkeletonProps } from './ui/DataAppSkeleton.js';
-export { DataBoundary } from './ui/DataBoundary.js';
-export { resolveDataView } from '../core/data-view.js';
-export { displayedSnapshot } from '../core/data-view.js';
-export type { DataView, DataSnapshot, DisplayedSnapshot, } from '../core/data-view.js';
-export type { DataBoundaryProps } from './ui/DataBoundary.js';
-export { RefreshRegion } from './ui/RefreshRegion.js';
-export type { RefreshRegionProps } from './ui/RefreshRegion.js';
 export { DataSection } from './ui/DataSection.js';
-export type { DataSectionProps, SectionResult, } from './ui/DataSection.js';
-export { StatusPanel } from './ui/StatusPanel.js';
-export type { StatusPanelProps } from './ui/StatusPanel.js';
-export { ContentSkeleton } from './ui/ContentSkeleton.js';
-export type { ContentSkeletonProps } from './ui/ContentSkeleton.js';
-export { DataViewToast } from './ui/DataViewToast.js';
-export type { DataViewToastProps } from './ui/DataViewToast.js';
+export type { DataSectionProps } from './ui/DataSection.js';
 export { UpdatedAt } from './ui/UpdatedAt.js';
 export type { UpdatedAtProps } from './ui/UpdatedAt.js';
 export { DateTimeTooltip } from './ui/DateTimeTooltip.js';
 export type { DateTimeTooltipProps } from './ui/DateTimeTooltip.js';
-export { LiveControl } from './ui/LiveControl.js';
-export type { LiveControlProps, LiveIntervalSeconds, } from './ui/LiveControl.js';
-export { DateRangePicker } from './ui/DateRangePicker.js';
-export type { DatePresetId, DateRange, DateRangePickerProps, } from './ui/DateRangePicker.js';
-export { defineAppVariables, textVariable, selectVariable, dateRangeVariable, dateRangeControl, useAppVariables, } from './ui/variables.js';
-export type { AppVariable, AppVariableValues, DateRangeSelection, DateRangeVariable, DateRangeVariableOptions, } from './ui/variables.js';
+export { searchVariable, choiceVariable, multiChoiceVariable, dateRangeVariable, } from './ui/variables.js';
+export type { AppVariable, AppVariableValues, ChoiceOption, ChoiceVariable, MultiChoiceVariable, SearchVariable, DateRangeSelection, DateRangeVariable, DateRangeVariableOptions, } from './ui/variables.js';
 export { PeriodSummary } from './ui/PeriodSummary.js';
 export type { ReportingPeriod, PeriodComparison, PeriodSummaryProps, } from './ui/PeriodSummary.js';
-export { SearchField } from './ui/SearchField.js';
-export type { SearchFieldProps } from './ui/SearchField.js';
-export { searchItems } from './ui/searchItems.js';
-export type { SearchAttribute, SearchHit, SearchItemsOptions, SearchMatchValue, SearchRange, } from './ui/searchItems.js';
-export { SearchMatch } from './ui/SearchMatch.js';
-export type { SearchMatchProps } from './ui/SearchMatch.js';
-export { Combobox } from './ui/Combobox.js';
-export type { ComboboxOption, ComboboxProps } from './ui/Combobox.js';
-export { GradientScroll } from './ui/GradientScroll.js';
-export type { GradientScrollProps } from './ui/GradientScroll.js';
-export { searchParams, subscribeSearch, writeSearch, } from './ui/search.js';
-export { Tabs, TabList, Tab, TabPanels, TabPanel, useViewTab, } from './ui/Tabs.js';
-export { createDataContext, defineDataContext, evidenceFor, } from './ui/data-context.js';
+export { createDataContext } from './ui/data-context.js';
 export type { DataContext, GlossaryEntry } from './ui/data-context.js';
 export { defineDataIdentifiers } from './ui/data-identifiers.js';
 export type { DataIdentifierDefinition, TableIdentifier, ColumnIdentifier, } from './ui/data-identifiers.js';
-export { GlossaryExplanation } from './ui/GlossaryExplanation.js';
-export type { GlossaryExplanationProps } from './ui/GlossaryExplanation.js';
-export { GlossaryDefinition } from './ui/GlossaryDefinition.js';
-export type { GlossaryDefinitionProps } from './ui/GlossaryDefinition.js';
-export { AboutData } from './ui/AboutData.js';
-export type { AboutDataProps, AboutEmpty, AboutSubject, AboutTab, } from './ui/AboutData.js';
-export { PresentStory } from './ui/PresentStory.js';
-export type { PresentStoryProps } from './ui/PresentStory.js';
-export type { StoryFinding, BoundStory } from './ui/story.js';
-export { Checkbox } from './ui/Checkbox.js';
-export type { CheckboxProps } from './ui/Checkbox.js';
-export { AppIcon } from './ui/icons.js';
-export type { AppIconName, AppIconProps } from './ui/icons.js';
 export { IconButton } from './ui/IconButton.js';
 export type { IconButtonProps } from './ui/IconButton.js';
-export { Kbd } from './ui/Kbd.js';
-export type { KbdProps } from './ui/Kbd.js';
-export { Sheet } from './ui/Sheet.js';
-export type { SheetDialogProps, SheetProps } from './ui/Sheet.js';
 export { Tooltip, TooltipProvider } from './ui/Tooltip.js';
 export type { TooltipProps, TooltipProviderProps, } from './ui/Tooltip.js';
 export { Button } from './ui/Button.js';
 export type { ButtonProps } from './ui/Button.js';
-export { HelpPopover } from './ui/HelpPopover.js';
-export type { HelpPopoverPanelProps, HelpPopoverProps, HelpPopoverTriggerProps, } from './ui/HelpPopover.js';
 export type { MetricDefinition } from './ui/metric.js';
-export type { DataReading, MetricReading, MetricValues, } from '../core/reading.js';
+export type { MetricValues } from '../core/reading.js';
+export { AnnotationTarget } from './annotations/AnnotationTarget.js';
+export type { AnnotationTargetProps } from './annotations/AnnotationTarget.js';
+export { useDataAppAnnotations } from './annotations/useDataAppAnnotations.js';
+export { AnnotationBar } from './annotations/AnnotationBar.js';
+export type { AnnotationBarHandle, AnnotationBarProps, } from './annotations/AnnotationBar.js';
+export { injectDataAppAnnotationStyles } from './annotations/styles.js';

package/dist/types/react/mount.d.ts

@@ -1,11 +1,13 @@
 import { type ComponentType, type ReactNode } from 'react';
-import { type DataAppConfig } from '../core/config.js';
+import { type DataAppDefinition, type QueryDefinitions } from '../core/config.js';
 /** Mount once per document; installs document identity and the shared request provider. */
-export declare function mountDataApp({ config, component: Component, root, }: {
-    config: DataAppConfig;
+export declare function mountDataApp<const Queries extends QueryDefinitions>({ app, component: Component, root, }: {
+    app: DataAppDefinition<Queries>;
     component: ComponentType;
     root?: HTMLElement | null;
 }): void;
-export declare function DataAppProvider({ children }: {
+/** Provide one app identity and shared requests to a custom React root. */
+export declare function DataAppProvider<const Queries extends QueryDefinitions>({ app, children, }: {
+    app: DataAppDefinition<Queries>;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/types/react/source-owner.d.ts

@@ -0,0 +1,2 @@
+export declare function ownedSource<Source extends object>(owner: object, source: Source): Source;
+export declare function assertSourceOwner(owner: object, source: object): void;

package/dist/types/react/style-contract.d.ts

@@ -0,0 +1,80 @@
+import type { CSSProperties } from 'react';
+/** Public custom-property names for authoring types and validation. CSS owns their defaults. */
+export declare const dataAppStyleTokens: readonly ['--atbl-control-text-size', '--atbl-annotation-accent', '--atbl-annotation-accent-hover', '--atbl-annotation-on-accent', '--atbl-annotation-highlight', '--atbl-background', '--atbl-surface', '--atbl-subtle', '--atbl-text', '--atbl-muted', '--atbl-border', '--atbl-accent', '--atbl-accent-subtle', '--atbl-on-accent', '--atbl-positive', '--atbl-negative', '--atbl-danger', '--atbl-danger-subtle', '--atbl-backdrop', '--atbl-code-surface', '--atbl-code-text', '--atbl-code-keyword', '--atbl-chart-fill', '--atbl-control-hover-border', '--atbl-focus-color', '--atbl-focus-outline', '--atbl-focus-ring-offset', '--atbl-focus-ring-inset', '--atbl-font', '--atbl-font-heading', '--atbl-mono-font', '--atbl-space-xs', '--atbl-space-sm', '--atbl-space-md', '--atbl-space-lg', '--atbl-space-xl', '--atbl-layout-gap', '--atbl-content-width', '--atbl-control-height', '--atbl-radius-control', '--atbl-radius-surface', '--atbl-radius-overlay', '--atbl-shadow-surface', '--atbl-shadow-overlay', '--atbl-shadow-control', '--atbl-cursor-action', '--atbl-cursor-disabled', '--atbl-cursor-help', '--atbl-duration-fast', '--atbl-duration-normal', '--atbl-duration-slow', '--atbl-ease-standard', '--atbl-ease-enter', '--atbl-chart-1', '--atbl-chart-2', '--atbl-chart-3', '--atbl-chart-4', '--atbl-chart-5', '--atbl-chart-6', '--atbl-chart-7', '--atbl-chart-8', '--atbl-type-emphasis-weight', '--atbl-type-meta-weight', '--atbl-type-page-size', '--atbl-type-section-size', '--atbl-type-widget-size', '--atbl-type-body-size', '--atbl-type-label-size', '--atbl-type-meta-size', '--atbl-type-metric-size', '--atbl-type-heading-weight', '--atbl-type-label-weight', '--atbl-type-body-leading', '--atbl-type-label-leading', '--atbl-type-heading-leading', '--atbl-type-metric-leading', '--atbl-text-measure', '--atbl-control-compact-height', '--atbl-control-icon-size', '--atbl-control-padding-inline', '--atbl-control-padding-block', '--atbl-control-gap', '--atbl-control-disabled-opacity', '--atbl-cursor-busy', '--atbl-control-hover-surface', '--atbl-control-pressed-surface', '--atbl-control-selected-surface', '--atbl-control-selected-text'];
+/** Stable component roots for CSS customization; only utilities may be placed on native markup. */
+export declare const dataAppStyleClasses: {
+    readonly 'altertable-app-layout': {
+        readonly component: 'AppLayout';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-stack': {
+        readonly component: 'Stack';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-grid': {
+        readonly component: 'Grid';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-grid-item': {
+        readonly component: 'GridItem';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-text-content': {
+        readonly component: 'TextContent';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-button': {
+        readonly component: 'Button';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-tabs': {
+        readonly component: 'Tabs';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-data-widget': {
+        readonly component: 'DataWidget';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-metric-widget': {
+        readonly component: 'MetricWidget';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-data-app-skeleton': {
+        readonly component: 'DataAppSkeleton';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-chart-legend': {
+        readonly component: 'ChartLegend';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-chart-legend-item': {
+        readonly component: 'ChartLegend.Item';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-chart-legend-marker': {
+        readonly component: 'ChartLegend.Marker';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-chart-legend-label': {
+        readonly component: 'ChartLegend.Label';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-composed-chart': {
+        readonly component: 'ComposedChart';
+        readonly kind: 'root';
+    };
+    readonly 'altertable-sr-only': {
+        readonly component: null;
+        readonly kind: 'utility';
+    };
+};
+export declare const dataAppStyleHooks: {
+    readonly 'data-atbl-focus': readonly ['ring', 'inset', 'group'];
+    readonly 'data-atbl-control': readonly ['default', 'action', 'help', 'text'];
+};
+export type DataAppStyleToken = (typeof dataAppStyleTokens)[number];
+/** React style properties with checked public Altertable custom properties. */
+export type DataAppStyle = CSSProperties & Partial<Record<DataAppStyleToken, string | number>>;
+export type DataAppStyleHooks = {
+    [Name in keyof typeof dataAppStyleHooks]?: (typeof dataAppStyleHooks)[Name][number];
+};

package/dist/types/react/style-validation.d.ts

@@ -0,0 +1,2 @@
+/** Static authoring checks; app-owned names are allowed, package implementation names are not. */
+export declare function validateAuthoredStyles(source: string, kind: 'css' | 'markup'): string[];

package/dist/types/react/ui/AboutData.d.ts

@@ -4,6 +4,7 @@ import type { DataContext, GlossaryEntry } from './data-context.js';
 import { type ButtonProps } from './Button.js';
 import { type SheetDialogProps } from './Sheet.js';
 export type AboutTab = 'glossary' | 'queries';
+export declare function resolveAboutTab(tab: string | null | undefined): AboutTab;
 export type AboutEmpty = {
     glossary: {
         title: string;
@@ -57,4 +58,11 @@ export type AboutDataProps = AboutSubject & {
  * Open state uses `?about=`; tab selection uses `?tab=`. Enable the global shortcut only on the
  * page-level trigger.
  */
-export declare function AboutData({ id, title, description, visual, visualKind, variant, dataContext, references, queries, empty, iconOnly, shortcut, tooltip, children, footer, portalRoot, sheetProps, headerActions, open: openProp, onOpenChange, tab, trigger, className, onClick, ref, ...props }: AboutDataProps): import("react").JSX.Element;
+export declare function InspectionSheet({ id, title, description, visual, visualKind, dataContext, references, queries, empty, footer, sheetProps, headerActions, open, onOpenChange, tab, onTabChange, returnFocus, }: AboutDataProps & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    tab: AboutTab;
+    onTabChange: (tab: AboutTab) => void;
+    returnFocus: RefObject<HTMLButtonElement | null>;
+}): import("react").JSX.Element;
+export declare function AboutData(props: AboutDataProps): import("react").JSX.Element;

package/dist/types/react/ui/AppHeader.d.ts

@@ -5,7 +5,6 @@ export type AppHeaderProps = {
     description?: ReactNode;
     toolbar?: ReactNode;
     children?: ReactNode;
-    headingProps?: Omit<ComponentPropsWithRef<'div'>, 'children'>;
 } & Omit<ComponentPropsWithRef<'header'>, 'children' | 'title'>;
 /** Page identity and actions; on narrow screens the scope shares a row with actions. */
-export declare function AppHeader({ scope, title, description, toolbar, children, headingProps, className, ...props }: AppHeaderProps): import("react").JSX.Element;
+export declare function AppHeader({ scope, title, description, toolbar, children, className, ...props }: AppHeaderProps): import("react").JSX.Element;

package/dist/types/react/ui/AppLayout.d.ts

@@ -1,16 +1,10 @@
-import type { ComponentProps, ComponentPropsWithRef, ReactNode } from 'react';
-import { AppFooter } from './AppFooter.js';
-import { type TooltipProviderProps } from './Tooltip.js';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 export type AppLayoutProps = {
     children: ReactNode;
     footerActions?: ReactNode;
     footer?: ReactNode;
-    footerProps?: Omit<ComponentProps<typeof AppFooter>, 'children'>;
-    layoutProps?: Omit<ComponentPropsWithRef<'div'>, 'children'>;
-    tooltipProviderProps?: Omit<TooltipProviderProps, 'children'>;
 } & Omit<ComponentPropsWithRef<'main'>, 'children'>;
 /**
- * Native props target `<main>`. `layoutProps` targets the outer wrapper; `footer` replaces the
- * default footer, while `footerActions` fills it.
+ * Native props target `<main>`. The shell owns its wrapper and tooltip defaults.
  */
-export declare function AppLayout({ children, footerActions, footer, footerProps, layoutProps, tooltipProviderProps, className, ...props }: AppLayoutProps): import("react").JSX.Element;
+export declare function AppLayout({ children, footerActions, footer, className, ...props }: AppLayoutProps): import("react").JSX.Element;

package/dist/types/react/ui/AppToolbar.d.ts

@@ -3,13 +3,10 @@ import type { DataView } from '../../core/data-view.js';
 import type { CsvExport } from './csv-export.js';
 import { type LiveControlProps } from './LiveControl.js';
 import { PresentStory } from './PresentStory.js';
-import { RefreshControl } from './RefreshControl.js';
 export type AppToolbarProps = {
     children?: ReactNode;
     end?: ReactNode;
-    controlsProps?: Omit<ComponentPropsWithRef<'div'>, 'children'>;
     updatedAt?: ReactNode;
-    initialLoading?: boolean;
     requestState?: DataView<unknown, unknown>['kind'];
     refresh?: {
         refreshing: boolean;
@@ -17,17 +14,17 @@ export type AppToolbarProps = {
         onCancel?: () => void;
         label?: string;
         tooltip?: ReactNode;
-        buttonProps?: Omit<ComponentPropsWithRef<'button'>, 'children' | 'onClick'>;
-        statusProps?: ComponentProps<typeof RefreshControl>['statusProps'];
     };
     live?: LiveControlProps;
     aboutData?: ReactNode;
-    story?: ComponentProps<typeof PresentStory>;
-    csvExport?: CsvExport;
+    /** Null reserves a disabled story action while its findings are unavailable. */
+    story?: ComponentProps<typeof PresentStory> | null;
+    /** Null reserves a disabled export action while its data is unavailable. */
+    csvExport?: CsvExport | null;
 } & Omit<ComponentPropsWithRef<'div'>, 'children'>;
 /** Header actions only. Put reader-controlled inputs in DataApp.variables below the header.
  * Observation time, or an initial loading status, sits before Refresh. Children prepend app controls in the right
  * cluster; end follows the built-in actions. Live sits beside Refresh when supplied. Refresh also
  * answers Alt/Option+R and uses the button to cancel a running request when onCancel is provided;
  * refresh.tooltip overrides its static label. All built-in controls are optional. */
-export declare function AppToolbar({ children, updatedAt, initialLoading, requestState, refresh, live, aboutData, story, csvExport, end, controlsProps, className, role, 'aria-label': ariaLabel, ...props }: AppToolbarProps): import("react").JSX.Element;
+export declare function AppToolbar({ children, updatedAt, requestState, refresh, live, aboutData, story, csvExport, end, className, role, 'aria-label': ariaLabel, ...props }: AppToolbarProps): import("react").JSX.Element;

package/dist/types/react/ui/AreaChart.d.ts

@@ -0,0 +1,7 @@
+import type { ChartItem, ValueChartProps } from './chart-data.js';
+export type AreaChartItem = ChartItem;
+export type AreaChartProps = ValueChartProps;
+/** Ordered finite samples filled to a zero baseline, including negative values.
+ * Samples are equally spaced; supply missing periods explicitly.
+ * Compose inside VisualizationWidget; hover/touch tooltips need no caller state. */
+export declare function AreaChart(props: AreaChartProps): import("react").JSX.Element;

package/dist/types/react/ui/BarChart.d.ts

@@ -0,0 +1,6 @@
+import { type ChartItem, type ValueChartProps } from './chart-data.js';
+export type BarChartItem = ChartItem;
+export type BarChartProps = ValueChartProps;
+/** Nonnegative category values. Compose inside VisualizationWidget for a titled panel.
+ * Owns hover/touch tooltips; no selection state or keyboard navigation. */
+export declare function BarChart({ items, unit, ariaLabel, formatValue, }: BarChartProps): import("react").JSX.Element;

package/dist/types/react/ui/Button.d.ts

@@ -1,11 +1,11 @@
 import type { ComponentPropsWithRef } from 'react';
-import { type ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { Button as AriaButton } from 'react-aria-components';
 export type ButtonProps = ComponentPropsWithRef<'button'> & {
-    variant?: 'elevated' | 'outline' | 'ghost';
+    variant?: 'primary' | 'elevated' | 'outline' | 'ghost';
     size?: 'default' | 'compact' | 'icon' | 'icon-compact';
 };
 export declare function Button({ className, type, variant, size, disabled, ...props }: ButtonProps): import("react").JSX.Element;
 /** React Aria trigger behavior with the same presentation as the native Button. */
-export declare function PressButton({ variant, size, className, ...props }: Omit<AriaButtonProps, 'className'> & Pick<ButtonProps, 'variant' | 'size'> & {
+export declare function PressButton({ variant, size, className, ...props }: Omit<ComponentPropsWithRef<typeof AriaButton>, 'className'> & Pick<ButtonProps, 'variant' | 'size'> & {
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/react/ui/ChartLegend.d.ts

@@ -0,0 +1,31 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+export type ChartLegendProps = {
+    children: ReactNode;
+    layout?: 'horizontal' | 'vertical';
+    align?: 'start' | 'center' | 'end';
+    /** Maximum visible cells, including the expansion control; defaults to six. */
+    maxVisibleItems?: number;
+} & Omit<ComponentPropsWithRef<'ul'>, 'children'>;
+/** Optional chart key, placed beside any chart with the app's layout components.
+ * Items describe displayed series or categories; the caller owns series visibility and interactions. */
+declare function ChartLegendRoot({ children, layout, align, maxVisibleItems, className, 'aria-label': ariaLabel, ...props }: ChartLegendProps): import("react").JSX.Element;
+export type ChartLegendItemProps = ComponentPropsWithRef<'li'> & {
+    inactive?: boolean;
+};
+/** Descriptive by default; compose a button inside the item for an authored series toggle. */
+declare function ChartLegendItem({ inactive, className, ...props }: ChartLegendItemProps): import("react").JSX.Element;
+export type ChartLegendMarkerKind = 'bar' | 'line' | 'area' | 'point' | 'slice';
+export type ChartLegendMarkerProps = Omit<ComponentPropsWithRef<'svg'>, 'children'> & {
+    kind: ChartLegendMarkerKind;
+};
+/** Decorative mark; color accepts public palette tokens or any CSS color.
+ * Defaults match the shared bar or accent-colored series primitives. */
+declare function ChartLegendMarker({ kind, color, className, style, ...props }: ChartLegendMarkerProps): import("react").JSX.Element;
+export type ChartLegendLabelProps = ComponentPropsWithRef<'span'>;
+declare function ChartLegendLabel({ className, children, title, ...props }: ChartLegendLabelProps): import("react").JSX.Element;
+export declare const ChartLegend: typeof ChartLegendRoot & {
+    Item: typeof ChartLegendItem;
+    Marker: typeof ChartLegendMarker;
+    Label: typeof ChartLegendLabel;
+};
+export {};

package/dist/types/react/ui/Checkbox.d.ts

@@ -1,10 +1,21 @@
 import { type ReactNode } from 'react';
+export declare const CheckboxGroupContext: import("react").Context<{
+    values: readonly string[];
+    disabled?: boolean;
+    onChange: (value: string, checked: boolean) => void;
+} | null>;
 export type CheckboxProps = {
     label: string;
     description?: ReactNode;
-    checked: boolean;
-    onChange: (checked: boolean) => void;
     disabled?: boolean;
     className?: string;
-};
-export declare function Checkbox({ label, description, checked, onChange, disabled, className, }: CheckboxProps): import("react").JSX.Element;
+} & ({
+    value: string;
+    checked?: never;
+    onChange?: never;
+} | {
+    value?: never;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+});
+export declare function Checkbox({ label, description, checked, value, onChange, disabled, className, }: CheckboxProps): import("react").JSX.Element;

package/dist/types/react/ui/CheckboxGroup.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef } from 'react';
+export type CheckboxGroupProps = Omit<ComponentPropsWithRef<'fieldset'>, 'onChange'> & {
+    label: string;
+    values: readonly string[];
+    onChange: (values: string[]) => void;
+};
+export declare function CheckboxGroup({ label, values, onChange, className, children, disabled, ...props }: CheckboxGroupProps): import("react").JSX.Element;

package/dist/types/react/ui/{Combobox.d.ts → ChoicePicker.d.ts}

@@ -1,14 +1,10 @@
-/** IDs are nonempty and unique across ordinary and missing options. */
-export type ComboboxOption = {
-    id: string;
-    label: string;
-    description?: string;
-};
+import type { ChoiceOption } from '../../core/variables.js';
+export type { ChoiceOption } from '../../core/variables.js';
 type SharedProps = {
     label: string;
-    options: ComboboxOption[];
+    options: readonly ChoiceOption[];
     /** Separate source state, rendered last with a divider and the shared option component. */
-    missingOption?: ComboboxOption;
+    missingOption?: ChoiceOption;
     disabled?: boolean;
     placeholder?: string;
     emptyMessage?: string;
@@ -18,15 +14,16 @@ type SharedProps = {
     error?: boolean;
     onRetry?: () => void;
 };
-export type SingleComboboxProps = SharedProps & {
+export type SingleChoicePickerProps = SharedProps & {
+    selectionMode: 'single';
     value: string;
     onChange: (value: string) => void;
-    resetValue?: string;
     values?: never;
     maxSelected?: never;
     emptySelectionLabel?: never;
 };
-export type MultiComboboxProps = SharedProps & {
+export type MultiChoicePickerProps = SharedProps & {
+    selectionMode: 'multiple';
     values: readonly string[];
     onChange: (values: string[]) => void;
     /** Positive integer; at capacity, only unselected options are disabled. */
@@ -34,9 +31,7 @@ export type MultiComboboxProps = SharedProps & {
     /** Meaning of an empty selection belongs to the caller, e.g. All or Select a value. */
     emptySelectionLabel: string;
     value?: never;
-    resetValue?: never;
 };
-export type ComboboxProps = SingleComboboxProps | MultiComboboxProps;
+export type ChoicePickerProps = SingleChoicePickerProps | MultiChoicePickerProps;
 /** Searchable selection picker with one focus and popup model for single and multiple values. */
-export declare function Combobox(props: ComboboxProps): import("react").JSX.Element;
-export {};
+export declare function ChoicePicker(props: ChoicePickerProps): import("react").JSX.Element;

package/dist/types/react/ui/{ComparisonVisual.d.ts → Comparison.d.ts}

@@ -1,14 +1,14 @@
-import { type MetricComparison } from './comparison.js';
+import { type MetricComparison } from './metric-comparison.js';
 import type { MetricDefinition } from './metric.js';
 import type { MetricReading } from '../../core/reading.js';
 type UnboundComparisonProps = MetricComparison & {
     label: string;
     emphasis?: 'standard' | 'story';
 };
-export type ComparisonVisualProps = UnboundComparisonProps | {
+export type ComparisonProps = UnboundComparisonProps | {
     metric: MetricDefinition;
     reading: MetricReading;
     emphasis?: 'standard' | 'story';
 };
-export declare function ComparisonVisual(props: ComparisonVisualProps): import("react").JSX.Element | null;
+export declare function Comparison(props: ComparisonProps): import("react").JSX.Element | null;
 export {};

package/dist/types/react/ui/ComposedChart.d.ts

@@ -0,0 +1,41 @@
+import type { ComponentProps } from 'react';
+import { ComposedChartLegend as Legend } from './ComposedChartLegend.js';
+import { ComposedChart as RechartsComposedChart, ZAxis, ReferenceLine, ReferenceArea, ReferenceDot, Brush, Label, LabelList, ErrorBar } from 'recharts';
+import { ChartBar as Bar, ChartDot as Dot, ChartLine as Line, ChartArea as Area, ChartScatter as Scatter, ChartXAxis as XAxis, ChartYAxis as YAxis, ChartGrid as CartesianGrid, ChartTooltip as Tooltip } from './chart-primitives.js';
+export type ComposedChartProps<Row = unknown> = Omit<ComponentProps<typeof RechartsComposedChart<Row>>, 'data' | 'title'> & {
+    /** Displayed rows; series and axes select fields with Recharts dataKey props. */
+    data: readonly Row[];
+    /** Describes the measures and scope for assistive technology. */
+    ariaLabel: string;
+};
+/** Compose Cartesian series inside VisualizationWidget. Defaults to responsive
+ * full width and 300px height. Children retain native Recharts props and behavior,
+ * including stacking, numeric/time axes, missing values, tooltips, and keyboard
+ * navigation. Match yAxisId on axes and series for different units; use stackId
+ * for stacks. Preserve missing measures as null and choose connectNulls deliberately.
+ * Use public chart tokens for series colors. Dataset bindings own
+ * loading, empty results, evidence, and CSV; this primitive owns only the plot. */
+declare function ComposedChartRoot<Row>({ data, ariaLabel, width, height, responsive, className, ...props }: ComposedChartProps<Row>): import("react").JSX.Element;
+/** Shared themed series and controls; other children retain native Recharts defaults. */
+export declare const ComposedChart: typeof ComposedChartRoot & {
+    Dot: typeof Dot;
+    Area: typeof Area;
+    Bar: typeof Bar;
+    Line: typeof Line;
+    Scatter: typeof Scatter;
+    XAxis: typeof XAxis;
+    YAxis: typeof YAxis;
+    ZAxis: typeof ZAxis;
+    CartesianGrid: typeof CartesianGrid;
+    Tooltip: typeof Tooltip;
+    Legend: typeof Legend;
+    ReferenceLine: typeof ReferenceLine;
+    ReferenceArea: typeof ReferenceArea;
+    ReferenceDot: typeof ReferenceDot;
+    Brush: typeof Brush;
+    Cell: import("react").FunctionComponent<import("recharts").CellProps>;
+    Label: typeof Label;
+    LabelList: typeof LabelList;
+    ErrorBar: typeof ErrorBar;
+};
+export {};

package/dist/types/react/ui/ComposedChartLegend.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'react';
+import { Legend } from 'recharts';
+export type ComposedChartLegendProps = ComponentProps<typeof Legend> & {
+    maxVisibleItems?: number;
+};
+/** Opt in inside ComposedChart to derive the shared legend from its displayed series.
+ * Native positioning, sorting, formatters, callbacks, and custom content remain available. */
+export declare function ComposedChartLegend({ maxVisibleItems, ...props }: ComposedChartLegendProps): import("react").JSX.Element;

package/dist/types/react/ui/ContentSkeleton.d.ts

@@ -3,3 +3,5 @@ import type { SkeletonContent } from './presentation.js';
 export type ContentSkeletonProps = SkeletonContent & Omit<ComponentPropsWithRef<'div'>, 'children'>;
 /** A metric, panel, or ranking placeholder to compose in the same layout as live content. */
 export declare function ContentSkeleton({ variant, rows, className, ...props }: ContentSkeletonProps): import("react").JSX.Element;
+/** Placeholder for a widget body; static headings stay outside it. */
+export declare function ContentSkeletonBody({ variant, rows }: SkeletonContent): import("react").JSX.Element;