@altertable/data-app 0.65.0 → 0.66.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 { textVariable, selectVariable, dateRangeVariable, } from './ui/variables.js';
 export type { AppVariable, AppVariableValues, 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 { AnnotationBarProps } from './annotations/AnnotationBar.js';
+export { injectDataAppAnnotationStyles } from './annotations/styles.js';

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,60 @@
+import type { CSSProperties } from 'react';
+/** Public custom-property names for authoring types and validation. CSS owns their defaults. */
+export declare const dataAppStyleTokens: readonly ['--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-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 ['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/{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/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;

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

@@ -1,61 +1,20 @@
-import { type ComponentProps, type ReactNode } from 'react';
-import type { DisclosedQuery } from '../../core/contract.js';
-import type { DataAppConfig } from '../../core/config.js';
-import type { CsvExport } from './csv-export.js';
-import { type DisplayedSnapshot } from '../../core/data-view.js';
-import { type AboutEmpty } from './AboutData.js';
-import { AppLayout } from './AppLayout.js';
-import { type AppToolbarProps } from './AppToolbar.js';
-import type { DataContext } from './data-context.js';
-import type { BoundStory } from './story.js';
-import { type SectionResult } from './DataSection.js';
-import type { EmptyContent } from './presentation.js';
-type DataAppBaseProps = {
-    config: DataAppConfig;
-    dataContext: DataContext;
-    aboutEmpty?: AboutEmpty;
-    description?: ReactNode;
-    /** Display names only; config.scope remains the connection identity. */
-    scopeLabels?: {
-        organization?: string;
-        environment?: string;
+import { type RegisteredBinding } from '../bindings.js';
+import type { DisplayedSnapshot } from '../../core/data-view.js';
+import { type ExportDataset } from '../bindings.js';
+import type { StoryFinding } from './story.js';
+import { type DataAppBaseProps } from './DataAppFrame.js';
+import { type DeclaredView } from '../view-runtime.js';
+export type DataAppProps<Data, Input = unknown> = Omit<DataAppBaseProps, 'dataContext'> & {
+    view: DeclaredView<Data, Input> & {
+        scope(snapshot: DisplayedSnapshot<Data, Input>): string;
     };
-    toolbarActions?: ReactNode;
-    footerActions?: ReactNode;
-    layoutProps?: Omit<ComponentProps<typeof AppLayout>, 'children' | 'footerActions'>;
+    story: (snapshot: DisplayedSnapshot<Data, Input>) => readonly (Omit<StoryFinding, 'evidence'> & {
+        evidence: RegisteredBinding;
+    })[];
+    datasets: readonly [
+        ExportDataset<Data, Input>,
+        ...ExportDataset<Data, Input>[]
+    ];
 };
-export type DataAppRequest<Data, Input> = SectionResult<Data, Input> & {
-    queries?: DisclosedQuery[];
-    refresh?: AppToolbarProps['refresh'];
-    empty: EmptyContent;
-    controls?: ReactNode;
-};
-export type DataAppProps<Data = unknown, Input = unknown> = DataAppBaseProps & ({
-    request: DataAppRequest<Data, Input>;
-    /** Findings are always derived from the result currently visible to the reader. */
-    story: BoundStory<Data, Input>;
-    /** Every analytical view exports every distinct dataset in its displayed result. */
-    csvExport: (snapshot: DisplayedSnapshot<Data, Input>) => CsvExport;
-    children: (data: Data, displayedInput: Input) => ReactNode;
-    loading?: ReactNode;
-    label?: string;
-    queries?: never;
-    refresh?: never;
-    variables?: never;
-} | {
-    request?: never;
-    story?: never;
-    csvExport?: CsvExport;
-    children: ReactNode;
-    queries?: DisclosedQuery[];
-    refresh?: AppToolbarProps['refresh'];
-    variables?: ReactNode;
-    loading?: never;
-    empty?: never;
-    label?: never;
-});
-/** Owns the page title, header, gutter, and width; body content uses section headings.
- * The primary request owns controls, empty state, displayed input, refresh, and inspection.
- * Without a request, the shell accepts authored children for setup or static views. */
+/** Executes the primary view and owns its controls, inspection, exports, and stories. */
 export declare function DataApp<Data, Input>(props: DataAppProps<Data, Input>): import("react").JSX.Element;
-export {};

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

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+import type { DisclosedQuery } from '../../core/contract.js';
+import type { DataAppConfig } from '../../core/config.js';
+import type { CsvExport } from './csv-export.js';
+import { type DisplayedSnapshot } from '../../core/data-view.js';
+import type { DataContext } from './data-context.js';
+import type { BoundStory } from './story.js';
+import type { SectionResult } from './DataSectionBoundary.js';
+export type DataAppBaseProps = {
+    children: ReactNode;
+    config: DataAppConfig;
+    dataContext: DataContext;
+    description?: ReactNode;
+    toolbarActions?: ReactNode;
+    footerActions?: ReactNode;
+};
+export type DataAppRequest<Data, Input> = SectionResult<Data, Input> & {
+    queries?: DisclosedQuery[];
+    /** Actual request activity, including retries with retained data. */
+    refreshing?: boolean;
+    cancel?: () => unknown;
+    controls?: ReactNode;
+};
+export type StaticDataAppProps = DataAppBaseProps & {
+    csvExport?: CsvExport;
+    queries?: DisclosedQuery[];
+};
+export type DataAppProps<Data = unknown, Input = unknown> = (DataAppBaseProps & {
+    request: DataAppRequest<Data, Input>;
+    /** Findings are always derived from the result currently visible to the reader. */
+    story: BoundStory<Data, Input>;
+    /** Export every distinct dataset in the displayed result. */
+    csvExport: (snapshot: DisplayedSnapshot<Data, Input>) => CsvExport;
+    queries?: never;
+}) | (StaticDataAppProps & {
+    request?: never;
+    story?: never;
+});
+/** Owns the page title, header, gutter, and width; body content uses section headings.
+ * The primary request binds the toolbar, controls, refresh, and inspection.
+ * Children always render; compose DataSection boundaries around independently loading content. */
+export declare function DataAppFrame<Data, Input>(props: DataAppProps<Data, Input>): import("react").JSX.Element;

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

@@ -2,14 +2,13 @@ import type { ComponentPropsWithRef, ReactNode } from 'react';
 import type { DataView } from '../../core/data-view.js';
 export type DataBoundaryProps<T, Input = unknown> = {
     view: DataView<T, Input>;
-    loading: ReactNode;
-    empty: ReactNode;
+    loadingFallback: ReactNode;
+    emptyFallback: ReactNode;
     error: (error: Error) => ReactNode;
     staleError?: (error: Error) => ReactNode;
     notice?: 'inline' | 'none';
-    dimOnUpdate?: boolean;
     children: (data: T, displayedInput: Input) => ReactNode;
 } & Omit<ComponentPropsWithRef<'div'>, 'children'>;
 /** Render one request state at a time. Prior content remains readable during an update.
- * Local boundaries can opt into an inline notice and delayed dimming. */
-export declare function DataBoundary<T, Input>({ view, loading, empty, error, staleError, notice, dimOnUpdate, children, className, ...props }: DataBoundaryProps<T, Input>): import("react").JSX.Element;
+ * Feedback ownership is supplied by the containing section. */
+export declare function DataBoundary<T, Input>({ view, loadingFallback, emptyFallback, error, staleError, notice, children, className, ...props }: DataBoundaryProps<T, Input>): import("react").JSX.Element;

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

@@ -1,26 +1,14 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-import type { DataView } from '../../core/data-view.js';
+import { type ViewContent } from '../content.js';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type { EmptyContent } from './presentation.js';
-export type SectionResult<Data, Input> = {
-    view: DataView<Data, Input>;
-    refetch: () => unknown;
-};
 export type DataSectionProps<Data, Input = unknown> = {
-    result: SectionResult<Data, Input>;
-    empty: EmptyContent;
-    children: (data: Data, displayedInput: Input) => ReactNode;
-    /** Placeholder layout for an initial request; use the ready view's grid without copied values. */
-    loading?: ReactNode;
+    content: ViewContent<Data, Input>;
+    emptyFallback?: EmptyContent;
     error?: {
         title: ReactNode;
         description?: ReactNode;
         onRetry?: () => void;
     };
     label?: string;
-    /** DataApp suppresses this local notice in favor of its page-level toast. */
-    notice?: 'inline' | 'none';
-    dimOnUpdate?: boolean;
-} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
-/** One request boundary for any number of cards. `DataBoundary` exposes the lower-level
- * view-state slots for custom composition. */
-export declare function DataSection<Data, Input>({ result, children, empty, loading, error, label, notice, dimOnUpdate, ...props }: DataSectionProps<Data, Input>): import("react").JSX.Element;
+} & Omit<ComponentPropsWithRef<'div'>, 'children' | 'content'>;
+export declare function DataSection<Data, Input>({ content, ...presentation }: DataSectionProps<Data, Input>): import("react").JSX.Element;

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

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { DataView } from '../../core/data-view.js';
+import type { EmptyContent } from './presentation.js';
+export type SectionResult<Data, Input> = {
+    view: DataView<Data, Input>;
+    refetch: () => unknown;
+};
+export type DataSectionProps<Data, Input = unknown> = {
+    children: (data: Data, displayedInput: Input) => ReactNode;
+    /** Placeholder layout for an initial request; use the ready view's grid without copied values. */
+    loadingFallback: ReactNode;
+    error?: {
+        title: ReactNode;
+        description?: ReactNode;
+        onRetry?: () => void;
+    };
+    label?: string;
+    notice?: 'none' | 'inline';
+} & ({
+    result: SectionResult<Data, Input> & {
+        emptyFallback: EmptyContent;
+    };
+    emptyFallback?: EmptyContent;
+} | {
+    result: SectionResult<Data, Input>;
+    emptyFallback: EmptyContent;
+}) & Omit<ComponentPropsWithRef<'div'>, 'children'>;
+/** One request boundary for any number of cards. `DataBoundary` exposes the lower-level
+ * view-state slots internally. The primary DataApp request uses page-level feedback. */
+export declare function DataSectionBoundary<Data, Input>({ result, children, emptyFallback, loadingFallback, error, label, notice: feedback, ...props }: DataSectionProps<Data, Input>): import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { DataReading } from '../../core/reading.js';
+export type DataValueProps<Value> = {
+    reading: DataReading<Value>;
+    loadingFallback: ReactNode;
+    children: (value: Value) => ReactNode;
+} & Omit<ComponentPropsWithRef<'span'>, 'children'>;
+/** Bind inline content to displayed data. Keep static wording outside this span. */
+export declare function DataValue<Value>({ reading, loadingFallback, children, ...props }: DataValueProps<Value>): import("react").JSX.Element;

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

@@ -4,6 +4,7 @@ import type { EmptyContent, BoundWidgetReading } from './presentation.js';
 import type { WidgetEvidence } from './WidgetEvidence.js';
 type DataWidgetBaseProps = {
     title: ReactNode;
+    annotationId?: string;
     count?: number;
     description?: ReactNode;
     evidence?: WidgetEvidence;
@@ -22,7 +23,7 @@ export type DataWidgetProps<Data = unknown> = DataWidgetBaseProps & ((BoundWidge
     reading?: never;
     isEmpty?: never;
     skeleton?: never;
-    empty?: EmptyContent;
+    emptyFallback?: EmptyContent;
     children: ReactNode;
 });
 export declare function DataWidget<Data>(props: DataWidgetProps<Data>): import("react").JSX.Element;