@altertable/data-app 0.65.0 → 0.67.0

package/dist/react/ui/index.js

@@ -0,0 +1,2272 @@
+import {
+  injectStyles,
+  injectDataAppStyles2,
+  AppIcon2,
+  classNames,
+  Button2,
+  PressButton,
+  TooltipSurface,
+  TooltipProvider2,
+  Tooltip2,
+  GradientScroll2,
+  Sheet2,
+  TabList2,
+  TabPanels2,
+  Tab2,
+  TabPanel2,
+  Tabs2,
+  useViewTab2,
+  AboutData2,
+  DataAppProvider2,
+  useDeclaredResult,
+  validateChoiceOptions,
+  useAppVariables2,
+  Select2,
+  FilterActions2,
+  NumberField2,
+  NumberRangeField2,
+  NumberFilterPicker2,
+  SearchField2,
+  Skeleton2,
+  SearchMatch2,
+  searchItems2,
+  ChoicePicker2,
+  CheckboxGroupContext,
+  Checkbox2,
+  DateRangePicker2,
+  FilterBar2,
+  DimensionPicker2,
+  createDataHooks2,
+  isPlainKeyEvent2,
+  MenuTrigger2,
+  MenuSection2,
+  MenuPopover2,
+  Menu2,
+  MenuItem2,
+  MenuSeparator2,
+  LiveControl2,
+  PresentStory2,
+  VariableBar2,
+  DataAppFrame,
+  Grid2,
+  DataWidget2,
+  VisualizationWidget2,
+  MetricWidget2,
+  HelpPopover2,
+  DataTable2,
+  DataTableShare2,
+  DataTableEmptyRow2,
+  DataTableTimestamp2,
+  TableWidget2,
+  TextWidget2,
+  DataValue2,
+  createDataContext2
+} from "../../chunks/index-8qfxv0h5.js";
+import"../../chunks/index-mev09s5v.js";
+import"../../chunks/index-ag0cgnvq.js";
+import"../../chunks/index-mt93ff2b.js";
+import"../../chunks/index-m6n8ctfc.js";
+import {
+  createDataClient2
+} from "../../chunks/index-23dktynd.js";
+import"../../chunks/index-x69p7cv7.js";
+import"../../chunks/index-ev2b5aaf.js";
+import {
+  invariant
+} from "../../chunks/index-qd5xgx6y.js";
+
+// src/react/shellStyles.ts
+function injectDataAppShellStyles(options = {}) {
+  return injectStyles({
+    name: "injectDataAppShellStyles",
+    attribute: "data-altertable-shell-styles",
+    css: `/* src/react/tokens.css */
+@layer atbl.tokens {
+  :root {
+    --atbl-control-text-size: var(--atbl-type-body-size);
+    --atbl-background: var(--atbl-palette-background);
+    --atbl-surface: var(--atbl-palette-surface);
+    --atbl-subtle: var(--atbl-palette-subtle);
+    --atbl-backdrop: #0f171e38;
+    --atbl-text: var(--atbl-palette-text);
+    --atbl-muted: var(--atbl-palette-muted);
+    --atbl-border: var(--atbl-palette-border);
+    --atbl-accent: var(--atbl-input-accent, #405d47);
+    --atbl-on-accent: var(--atbl-input-on-accent, #fff);
+    --atbl-danger: #b42318;
+    --atbl-danger-subtle: color-mix(in srgb, var(--atbl-danger) 9%, var(--atbl-surface));
+    --atbl-code-surface: #f4f6f9;
+    --atbl-code-text: #273242;
+    --atbl-mono-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --atbl-focus-ring-offset: 2px;
+    --atbl-focus-ring-inset: -1px;
+    --atbl-font: var(--atbl-input-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ui-sans-serif, sans-serif);
+    --atbl-space-xs: 5px;
+    --atbl-space-sm: 10px;
+    --atbl-space-md: 16px;
+    --atbl-space-lg: 24px;
+    --atbl-space-xl: 32px;
+    --atbl-content-width: 960px;
+    --atbl-control-height: 2.375rem;
+    --atbl-control-compact-height: 1.875rem;
+    --atbl-control-icon-size: 1rem;
+    --atbl-control-padding-inline: .75rem;
+    --atbl-control-padding-block: .375rem;
+    --atbl-control-gap: .5rem;
+    --atbl-control-disabled-opacity: .5;
+    --atbl-radius-control: 7px;
+    --atbl-radius-surface: 12px;
+    --atbl-radius-overlay: 16px;
+    --atbl-shadow-surface: 0 3px 16px #141c280d;
+    --atbl-shadow-overlay: 0 18px 50px #00000029;
+    --atbl-shadow-control: 0 1px 3px #0000001a;
+    --atbl-cursor-action: pointer;
+    --atbl-cursor-disabled: default;
+    --atbl-cursor-help: help;
+    --atbl-cursor-busy: progress;
+    --atbl-duration-fast: .12s;
+    --atbl-duration-normal: .18s;
+    --atbl-duration-slow: .24s;
+    --atbl-ease-standard: ease;
+    --atbl-ease-enter: cubic-bezier(.2, .7, .2, 1);
+    --atbl-chart-1: color-mix(in srgb, var(--atbl-input-chart-1, #285fc0) var(--atbl-chart-strength), white);
+    --atbl-chart-2: color-mix(in srgb, var(--atbl-input-chart-2, #a95319) var(--atbl-chart-strength), white);
+    --atbl-chart-3: color-mix(in srgb, var(--atbl-input-chart-3, #147862) var(--atbl-chart-strength), white);
+    --atbl-chart-4: color-mix(in srgb, var(--atbl-input-chart-4, #7243aa) var(--atbl-chart-strength), white);
+    --atbl-chart-5: color-mix(in srgb, var(--atbl-input-chart-5, #aa3958) var(--atbl-chart-strength), white);
+    --atbl-chart-6: color-mix(in srgb, var(--atbl-input-chart-6, #475569) var(--atbl-chart-strength), white);
+    --atbl-chart-7: color-mix(in srgb, var(--atbl-input-chart-7, #285fc0) var(--atbl-chart-strength), white);
+    --atbl-chart-8: color-mix(in srgb, var(--atbl-input-chart-8, #a95319) var(--atbl-chart-strength), white);
+    --atbl-type-emphasis-weight: 680;
+    --atbl-type-meta-weight: 500;
+    --atbl-type-page-size: clamp(1.375rem, 2.4vw, 1.75rem);
+    --atbl-type-section-size: 1.25rem;
+    --atbl-type-widget-size: 1.0625rem;
+    --atbl-type-body-size: .875rem;
+    --atbl-type-label-size: .8125rem;
+    --atbl-type-meta-size: .75rem;
+    --atbl-type-metric-size: clamp(1.625rem, 3vw, 2.125rem);
+    --atbl-type-heading-weight: 650;
+    --atbl-type-label-weight: 600;
+    --atbl-type-body-leading: 1.65;
+    --atbl-type-label-leading: 1.4;
+    --atbl-type-heading-leading: 1.3;
+    --atbl-type-metric-leading: 1.08;
+    --atbl-text-measure: 70ch;
+  }
+}
+
+/* src/react/appearance.css */
+@layer atbl.tokens {
+  :root {
+    --atbl-palette-background: #fff;
+    --atbl-palette-surface: #fff;
+    --atbl-palette-subtle: #f6f7f7;
+    --atbl-palette-text: #202124;
+    --atbl-palette-muted: #687078;
+    --atbl-palette-border: #e3e6e8;
+    --atbl-chart-strength: 100%;
+    --atbl-accent-subtle-strength: 12%;
+  }
+
+  :root[data-atbl-theme="dark"] {
+    --atbl-palette-background: #151719;
+    --atbl-palette-surface: #202326;
+    --atbl-palette-subtle: #292d31;
+    --atbl-palette-text: #f2f3f4;
+    --atbl-palette-muted: #aeb5bc;
+    --atbl-palette-border: #3b4248;
+  }
+
+  :root[data-atbl-base-color="slate"] {
+    --atbl-palette-background: #f8fafc;
+    --atbl-palette-surface: #fff;
+    --atbl-palette-subtle: #f1f5f9;
+    --atbl-palette-text: #17212f;
+    --atbl-palette-muted: #607083;
+    --atbl-palette-border: #dce3ea;
+  }
+
+  :root[data-atbl-base-color="slate"][data-atbl-theme="dark"] {
+    --atbl-palette-background: #111820;
+    --atbl-palette-surface: #1b2530;
+    --atbl-palette-subtle: #263340;
+    --atbl-palette-text: #f0f4f8;
+    --atbl-palette-muted: #a8b5c3;
+    --atbl-palette-border: #3a4857;
+  }
+
+  :root[data-atbl-base-color="warm"] {
+    --atbl-palette-background: #fbfaf8;
+    --atbl-palette-surface: #fff;
+    --atbl-palette-subtle: #f5f2ed;
+    --atbl-palette-text: #292723;
+    --atbl-palette-muted: #736e66;
+    --atbl-palette-border: #e8e2da;
+  }
+
+  :root[data-atbl-base-color="warm"][data-atbl-theme="dark"] {
+    --atbl-palette-background: #1b1916;
+    --atbl-palette-surface: #25221e;
+    --atbl-palette-subtle: #302c27;
+    --atbl-palette-text: #f5f1eb;
+    --atbl-palette-muted: #bcb3a8;
+    --atbl-palette-border: #494239;
+  }
+
+  :root[data-atbl-theme="dark"] {
+    --atbl-accent: var(--atbl-input-dark-accent, color-mix(in srgb, var(--atbl-input-accent, #405d47) 50%, white));
+    --atbl-accent-subtle-strength: 22%;
+    --atbl-on-accent: var(--atbl-input-on-accent, var(--atbl-background));
+    --atbl-danger: #f97066;
+    --atbl-backdrop: #0000008c;
+    --atbl-code-surface: #242a31;
+    --atbl-code-text: #e5e9ef;
+    --atbl-chart-strength: 60%;
+  }
+
+  :root[data-atbl-density="compact"] {
+    --atbl-control-height: 2.125rem;
+    --atbl-control-padding-inline: .625rem;
+    --atbl-control-padding-block: .25rem;
+    --atbl-space-xs: 4px;
+    --atbl-space-sm: 8px;
+    --atbl-space-md: 12px;
+    --atbl-space-lg: 18px;
+    --atbl-space-xl: 24px;
+  }
+
+  :root[data-atbl-density="spacious"] {
+    --atbl-control-height: 2.625rem;
+    --atbl-control-padding-inline: 1rem;
+    --atbl-control-padding-block: .5rem;
+    --atbl-space-xs: 6px;
+    --atbl-space-sm: 12px;
+    --atbl-space-md: 20px;
+    --atbl-space-lg: 30px;
+    --atbl-space-xl: 40px;
+  }
+
+  :root[data-atbl-radius="none"] {
+    --atbl-radius-control: 0px;
+    --atbl-radius-surface: 0px;
+    --atbl-radius-overlay: 0px;
+  }
+
+  :root[data-atbl-radius="small"] {
+    --atbl-radius-control: 4px;
+    --atbl-radius-surface: 7px;
+    --atbl-radius-overlay: 9px;
+  }
+
+  :root[data-atbl-radius="large"] {
+    --atbl-radius-control: 10px;
+    --atbl-radius-surface: 18px;
+    --atbl-radius-overlay: 24px;
+  }
+
+  :root[data-atbl-elevation="flat"] {
+    --atbl-shadow-surface: none;
+    --atbl-shadow-overlay: none;
+    --atbl-shadow-control: none;
+  }
+
+  :root[data-atbl-elevation="raised"] {
+    --atbl-shadow-surface: 0 8px 28px #141c281a;
+    --atbl-shadow-overlay: 0 24px 72px #0000003d;
+  }
+
+  @media (forced-colors: active) {
+    :root {
+      --atbl-focus-color: Highlight !important;
+      --atbl-on-accent: HighlightText !important;
+    }
+  }
+}
+
+/* src/react/base.css */
+@layer atbl.base {
+  :where([class^="altertable-"], [class*=" altertable-"]) {
+    box-sizing: border-box;
+  }
+
+  :where([class^="altertable-"], [class*=" altertable-"]) * {
+    box-sizing: border-box;
+  }
+
+  :where([class^="starter-"], [class*=" starter-"]) * {
+    box-sizing: border-box;
+  }
+
+  :where([class^="altertable-"], [class*=" altertable-"]) button {
+    font: inherit;
+  }
+
+  :root[data-atbl-appearance] {
+    scrollbar-gutter: stable;
+    font-family: var(--atbl-font);
+    color: var(--atbl-text);
+    background: var(--atbl-background);
+    font-synthesis: none;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  :root[data-atbl-theme="light"] {
+    --buncss-light: initial;
+    --buncss-dark: ;
+    color-scheme: light;
+  }
+
+  :root[data-atbl-theme="dark"] {
+    --buncss-light: ;
+    --buncss-dark: initial;
+    color-scheme: dark;
+  }
+
+  :root[data-atbl-appearance] body, :root[data-atbl-appearance] #root {
+    margin: 0;
+  }
+
+  .altertable-sr-only {
+    position: fixed;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+  }
+}
+
+/* src/react/ui/Skeleton.css */
+@layer atbl.components {
+  .altertable-skeleton {
+    display: block;
+    border-radius: var(--atbl-radius-control);
+    background: var(--atbl-subtle);
+    opacity: 0;
+    animation: altertable-skeleton-in .2s var(--atbl-ease-standard) .2s forwards, altertable-skeleton-pulse 1.4s ease-in-out .4s infinite alternate;
+  }
+
+  .altertable-skeleton[data-inline] {
+    display: inline-block;
+    vertical-align: middle;
+    width: 8ch;
+    height: 1em;
+  }
+
+  @keyframes altertable-skeleton-in {
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes altertable-skeleton-pulse {
+    to {
+      opacity: .5;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .altertable-skeleton {
+      animation: 1ms .2s forwards altertable-skeleton-in;
+    }
+  }
+}
+
+/* src/react/ui/Grid.css */
+@layer atbl.components {
+  .altertable-grid {
+    display: grid;
+    container: altertable-grid / inline-size;
+    --atbl-grid-gap: var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg)));
+    --atbl-grid-min-item-width: 240px;
+    --atbl-grid-column-width: 100%;
+    --atbl-grid-max-columns: 1;
+    align-content:  start;
+    align-items:  start;
+    gap: var(--atbl-grid-gap);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--atbl-grid-min-item-width), var(--atbl-grid-column-width))), 1fr));
+    min-width: 0;
+  }
+
+  .altertable-grid > * {
+    min-width: 0;
+    min-height: 0;
+    margin: 0;
+  }
+
+  .altertable-grid[data-align="stretch"] {
+    align-items: stretch;
+  }
+
+  .altertable-grid[data-gap="sm"] {
+    --atbl-grid-gap: var(--atbl-space-sm);
+  }
+
+  .altertable-grid[data-gap="md"] {
+    --atbl-grid-gap: var(--atbl-space-md);
+  }
+
+  .altertable-grid[data-gap="lg"] {
+    --atbl-grid-gap: var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg)));
+  }
+
+  .altertable-grid[data-min-item-width="compact"] {
+    --atbl-grid-min-item-width: 192px;
+  }
+
+  .altertable-grid[data-min-item-width="wide"] {
+    --atbl-grid-min-item-width: 320px;
+  }
+
+  .altertable-grid[data-columns="2"] {
+    --atbl-grid-max-columns: 2;
+    --atbl-grid-column-width: calc((100% - var(--atbl-grid-gap)) / 2);
+  }
+
+  .altertable-grid[data-columns="3"] {
+    --atbl-grid-max-columns: 3;
+    --atbl-grid-column-width: calc((100% - var(--atbl-grid-gap)  - var(--atbl-grid-gap)) / 3);
+  }
+
+  .altertable-grid[data-columns="4"] {
+    --atbl-grid-max-columns: 4;
+    --atbl-grid-column-width: calc((100% - var(--atbl-grid-gap)  - var(--atbl-grid-gap)  - var(--atbl-grid-gap)) / 4);
+  }
+
+  .altertable-grid-item {
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .altertable-grid > * {
+    --atbl-grid-fitting-columns: clamp(1, round(down, tan(atan2(100cqw + var(--atbl-grid-gap)  + .001px, var(--atbl-grid-min-item-width)  + var(--atbl-grid-gap))), 1), var(--atbl-grid-max-columns));
+  }
+
+  .altertable-grid > .altertable-grid-item[data-span="2"] {
+    grid-column: span min(2, var(--atbl-grid-fitting-columns));
+  }
+
+  .altertable-grid[data-columns="3"]:has( > .altertable-grid-item[data-span="2"]) > :not(.altertable-grid-item[data-span="2"]) {
+    grid-column: span clamp(1, (3 - var(--atbl-grid-fitting-columns)) * 2, var(--atbl-grid-fitting-columns));
+  }
+
+  .altertable-grid[data-columns="3"]:not(:has( > .altertable-grid-item[data-span="2"])) > :last-child:nth-child(odd) {
+    grid-column: span clamp(1, (3 - var(--atbl-grid-fitting-columns)) * 2, var(--atbl-grid-fitting-columns));
+  }
+}
+
+/* src/react/ui/DataWidget.css */
+@layer atbl.components {
+  .altertable-data-widget {
+    border: 1px solid var(--atbl-border);
+    border-radius: calc(var(--atbl-radius-surface) * 1.5);
+    corner-shape: squircle;
+    background: var(--atbl-surface);
+    box-shadow: var(--atbl-shadow-surface);
+    min-width: 0;
+  }
+
+  .altertable-data-widget-header {
+    display: flex;
+    justify-content: space-between;
+    align-items:  flex-start;
+    gap: var(--atbl-space-md);
+    padding: var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg))) var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg))) 0;
+    min-height: 30px;
+  }
+
+  .altertable-data-widget-header > div:first-child {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .altertable-data-widget-help {
+    display: flex;
+    flex: none;
+    align-items:  flex-start;
+  }
+
+  .altertable-data-widget-header h2 {
+    color: var(--atbl-text);
+    font-family: var(--atbl-font-heading, var(--atbl-input-font-heading, var(--atbl-font)));
+    font-size: var(--atbl-type-widget-size);
+    font-weight: var(--atbl-type-heading-weight);
+    line-height: var(--atbl-type-heading-leading);
+    letter-spacing: -.02em;
+    margin: 0;
+  }
+
+  .altertable-data-widget-count {
+    color: var(--atbl-muted);
+    font-size: var(--atbl-type-meta-size);
+    font-weight: var(--atbl-type-meta-weight);
+    letter-spacing: 0;
+    white-space: nowrap;
+    margin-left: 8px;
+  }
+
+  .altertable-data-widget-header p {
+    color: var(--atbl-muted);
+    font-size: var(--atbl-type-meta-size);
+    margin: 4px 0 0;
+    line-height: 1.45;
+  }
+
+  .altertable-data-widget-body {
+    padding: var(--atbl-space-md) var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg))) var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg)));
+    min-width: 0;
+  }
+
+  .altertable-data-widget-body[data-padding="flush"] {
+    padding: 0;
+  }
+
+  .altertable-data-widget-footer {
+    padding: var(--atbl-space-md) var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg)));
+  }
+
+  .altertable-data-widget-body > .altertable-status-panel {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+/* src/react/ui/MetricWidget.css */
+@layer atbl.components {
+  .altertable-metric-widget {
+    display: flex;
+    padding: var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg)));
+    border: 1px solid var(--atbl-border);
+    border-radius: calc(var(--atbl-radius-surface) * 1.5);
+    corner-shape: squircle;
+    background: var(--atbl-surface);
+    box-shadow: var(--atbl-shadow-surface);
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .altertable-metric-widget.altertable-data-widget {
+    padding: 0;
+  }
+
+  .altertable-metric-widget > .altertable-data-widget-header {
+    min-height: 0;
+  }
+
+  .altertable-metric-widget > .altertable-data-widget-header h2 {
+    color: var(--atbl-muted);
+    font-family: inherit;
+    font-size: var(--atbl-type-label-size);
+    font-weight: var(--atbl-type-label-weight);
+    letter-spacing: normal;
+  }
+
+  .altertable-metric-widget > .altertable-data-widget-body {
+    padding-top: 0;
+  }
+
+  .altertable-metric-widget > .altertable-data-widget-body:has( + footer) {
+    padding-bottom: 0;
+  }
+
+  .altertable-metric-widget > .altertable-data-widget-footer {
+    padding-top: 0;
+    padding-bottom: var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg)));
+  }
+
+  .altertable-metric-value {
+    margin: var(--atbl-space-sm) 0 2px;
+    color: var(--atbl-text);
+    font-family: var(--atbl-font-heading, var(--atbl-input-font-heading, var(--atbl-font)));
+    font-size: var(--atbl-type-metric-size);
+    font-weight: var(--atbl-type-emphasis-weight);
+    line-height: var(--atbl-type-metric-leading);
+    letter-spacing: -.04em;
+    overflow-wrap: anywhere;
+    font-variant-numeric: tabular-nums;
+    max-inline-size: 100%;
+  }
+
+  .altertable-metric-reading {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items:  flex-start;
+    gap: 4px;
+  }
+
+  .altertable-metric-trend {
+    font-size: var(--atbl-type-meta-size);
+  }
+
+  .altertable-metric-change {
+    display: inline-flex;
+    color: var(--atbl-muted);
+    font-variant-numeric: tabular-nums;
+    align-items:  center;
+    gap: 3px;
+  }
+
+  .altertable-metric-change[data-tone="good"] {
+    color: var(--atbl-positive, var(--atbl-accent));
+  }
+
+  .altertable-metric-change[data-tone="bad"] {
+    color: var(--atbl-negative, var(--atbl-danger));
+  }
+
+  .altertable-metric-description {
+    color: var(--atbl-muted);
+    font-size: var(--atbl-type-meta-size);
+    line-height: 1.45;
+  }
+
+  .altertable-metric-visual {
+    margin-top: var(--atbl-space-sm);
+    min-width: 0;
+  }
+
+  .altertable-metric-value[data-unavailable] {
+    opacity: .6;
+  }
+
+  .altertable-metric-value > .altertable-skeleton {
+    width: 6ch;
+    height: 1em;
+  }
+}
+
+/* src/react/ui/VisualizationWidget.css */
+@layer atbl.components {
+  .altertable-visualization-widget-content {
+    padding: var(--atbl-space-md) var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg))) var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg)));
+    min-width: 0;
+  }
+
+  :where(.altertable-data-widget-body) > .altertable-visualization-widget-content {
+    padding: 0;
+  }
+}
+
+/* src/react/ui/ContentSkeleton.css */
+@layer atbl.components {
+  .altertable-content-skeleton {
+    display: grid;
+    padding: var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg)));
+    align-content:  start;
+    gap: 14px;
+    min-width: 0;
+  }
+
+  .altertable-content-skeleton-label {
+    width: 38%;
+    height: 15px;
+  }
+
+  .altertable-content-skeleton-value {
+    width: 56%;
+    height: 38px;
+  }
+
+  .altertable-content-skeleton-chart {
+    width: 100%;
+    height: 180px;
+  }
+
+  .altertable-content-skeleton-foot {
+    width: 70%;
+    height: 12px;
+  }
+
+  .altertable-content-skeleton-subtitle {
+    width: 52%;
+    height: 12px;
+  }
+
+  .altertable-content-skeleton-rows {
+    display: grid;
+    gap: 18px;
+    margin-top: 12px;
+  }
+
+  .altertable-content-skeleton-row {
+    display: grid;
+    gap: 8px;
+  }
+
+  .altertable-content-skeleton-row-label {
+    width: 56%;
+    height: 14px;
+  }
+
+  .altertable-content-skeleton-row-track {
+    width: 100%;
+    height: 8px;
+  }
+
+  .altertable-content-skeleton-row:nth-child(2) .altertable-content-skeleton-row-track {
+    width: 72%;
+  }
+
+  .altertable-content-skeleton-row:nth-child(3) .altertable-content-skeleton-row-track {
+    width: 48%;
+  }
+
+  .altertable-content-skeleton-row:nth-child(4) .altertable-content-skeleton-row-track {
+    width: 30%;
+  }
+
+  .altertable-content-skeleton-body {
+    display: grid;
+    gap: 14px;
+    min-width: 0;
+  }
+}
+
+/* src/react/shared.css */
+
+
+/* src/react/ui/DataAppSkeleton.css */
+@layer atbl.components {
+  .altertable-data-app-skeleton {
+    display: flex;
+    overflow: hidden;
+    padding: var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg)));
+    background: var(--atbl-background);
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .altertable-data-app-skeleton-content {
+    display: flex;
+    gap: var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg)));
+    max-width: var(--atbl-content-width);
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+  }
+
+  .altertable-data-app-skeleton-body {
+    display: flex;
+    gap: var(--atbl-layout-gap, clamp(var(--atbl-space-md), 2.5vw, var(--atbl-space-lg)));
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .altertable-data-app-skeleton-header, .altertable-data-app-skeleton-footer {
+    min-width: 0;
+  }
+
+  .altertable-data-app-skeleton-widget-title {
+    width: 144px;
+    max-width: 100%;
+    height: 16px;
+  }
+
+  .altertable-data-app-skeleton-chart {
+    display: flex;
+    align-items:  flex-end;
+    gap: var(--atbl-space-sm);
+    height: 180px;
+  }
+
+  .altertable-data-app-skeleton-chart > * {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .altertable-data-app-skeleton-rows {
+    display: grid;
+    gap: 20px;
+  }
+
+  .altertable-data-app-skeleton-row {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    gap: var(--atbl-space-md);
+  }
+
+  .altertable-data-app-skeleton-row > * {
+    height: 16px;
+  }
+}
+
+/* src/react/shellStyles.css */
+@layer atbl.tokens, atbl.base, atbl.components, atbl.interaction;
+`,
+    options
+  });
+}
+// src/react/ui/StaticDataApp.tsx
+import { jsx } from "react/jsx-runtime";
+function DataApp(props) {
+  return /* @__PURE__ */ jsx(DataAppFrame, {
+    ...props
+  });
+}
+
+// src/react/ui/GettingStarted.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var connectionContext = createDataContext2({})({
+  description: "Connection setup",
+  glossary: {}
+});
+var client = /* @__PURE__ */ createDataClient2();
+var { defineDataView } = /* @__PURE__ */ createDataHooks2(client);
+var connectionView = defineDataView({
+  dataContext: connectionContext,
+  operation: "connection",
+  describeInput: () => "the connection",
+  isEmpty: () => false,
+  emptyFallback: { title: "No connection" }
+});
+function GettingStarted({ dataContext }) {
+  const connection = useDeclaredResult(connectionView);
+  const state = connection.view.kind === "error" || connection.view.kind === "stale-error" ? "error" : connection.refreshing || !connection.snapshot ? "checking" : "connected";
+  return /* @__PURE__ */ jsxs(DataApp, {
+    dataContext,
+    description: "Check your lakehouse connection, then build a view around a real question.",
+    queries: connection.queries,
+    toolbarActions: /* @__PURE__ */ jsx2(Button2, {
+      disabled: connection.refreshing,
+      onClick: () => connection.refetch(),
+      children: "Check connection"
+    }),
+    children: [
+      /* @__PURE__ */ jsxs("section", {
+        className: "starter-connection",
+        "data-state": state,
+        role: state === "error" ? "alert" : "status",
+        children: [
+          /* @__PURE__ */ jsx2("div", {
+            className: "starter-connection-icon",
+            children: /* @__PURE__ */ jsx2(AppIcon2, {
+              name: state === "connected" ? "check" : state === "error" ? "error" : "loading",
+              size: 24
+            })
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "starter-connection-copy",
+            children: [
+              /* @__PURE__ */ jsx2("span", {
+                className: "starter-eyebrow",
+                children: "Lakehouse connection"
+              }),
+              /* @__PURE__ */ jsx2("h2", {
+                children: state === "connected" ? "Connected" : state === "error" ? "Connection not verified" : "Checking connection…"
+              }),
+              /* @__PURE__ */ jsx2("p", {
+                children: state === "connected" ? "A query completed successfully using this app’s current profile. You’re ready to build your first view." : state === "error" ? connection.snapshot ? "An earlier query succeeded, but the latest check failed. Check the profile and try again." : "The query could not complete. Check the profile and lakehouse access, then try again." : "Running a lightweight query with this app’s current profile."
+              }),
+              state === "connected" && /* @__PURE__ */ jsx2("small", {
+                children: "This check does not verify access to every dataset."
+              })
+            ]
+          }),
+          state === "error" && /* @__PURE__ */ jsx2(Button2, {
+            onClick: () => connection.refetch(),
+            children: "Try again"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("section", {
+        className: "starter-next",
+        "aria-labelledby": "starter-next-title",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: "starter-next-heading",
+            children: [
+              /* @__PURE__ */ jsx2("span", {
+                className: "starter-eyebrow",
+                children: "Next steps"
+              }),
+              /* @__PURE__ */ jsx2("h2", {
+                id: "starter-next-title",
+                children: "Turn this starter into a useful app"
+              }),
+              /* @__PURE__ */ jsx2("p", {
+                children: "Start with one question your readers need answered."
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("ol", {
+            className: "starter-steps",
+            children: [
+              /* @__PURE__ */ jsxs("li", {
+                children: [
+                  /* @__PURE__ */ jsx2("strong", {
+                    children: "Choose a question"
+                  }),
+                  /* @__PURE__ */ jsx2("p", {
+                    children: "Decide what someone should learn or do after opening this app."
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("li", {
+                children: [
+                  /* @__PURE__ */ jsx2("strong", {
+                    children: "Find the right data"
+                  }),
+                  /* @__PURE__ */ jsx2("p", {
+                    children: "Inspect the relevant catalogs, tables, and columns before writing the query."
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("li", {
+                children: [
+                  /* @__PURE__ */ jsx2("strong", {
+                    children: "Build the first view"
+                  }),
+                  /* @__PURE__ */ jsxs("p", {
+                    children: [
+                      "Replace the connection check in ",
+                      /* @__PURE__ */ jsx2("code", {
+                        children: "src/operations.ts"
+                      }),
+                      ", then render its result in ",
+                      /* @__PURE__ */ jsx2("code", {
+                        children: "src/App.tsx"
+                      }),
+                      "."
+                    ]
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+// src/react/ui/DataAppSkeleton.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var chartHeights = [40, 60, 50, 80, 60, 100, 80, 60];
+function DataAppSkeleton({
+  header,
+  footer,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3("output", {
+    "aria-label": "Loading data app",
+    ...props,
+    "aria-busy": "true",
+    className: classNames("altertable-data-app-skeleton", className),
+    children: /* @__PURE__ */ jsxs2("div", {
+      className: "altertable-data-app-skeleton-content",
+      children: [
+        header != null && header !== false && /* @__PURE__ */ jsx3("div", {
+          className: "altertable-data-app-skeleton-header",
+          children: header
+        }),
+        /* @__PURE__ */ jsxs2("div", {
+          className: "altertable-data-app-skeleton-body",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx3(Grid2, {
+              columns: 3,
+              gap: "md",
+              children: [0, 1, 2].map((item) => /* @__PURE__ */ jsx3(MetricWidget2, {
+                label: "",
+                loading: true
+              }, item))
+            }),
+            /* @__PURE__ */ jsx3(VisualizationWidget2, {
+              title: /* @__PURE__ */ jsx3(Skeleton2, {
+                className: "altertable-data-app-skeleton-widget-title"
+              }),
+              visual: /* @__PURE__ */ jsx3("div", {
+                className: "altertable-data-app-skeleton-chart",
+                children: chartHeights.map((height, index) => /* @__PURE__ */ jsx3(Skeleton2, {
+                  style: { height: `${height}%` }
+                }, index))
+              })
+            }),
+            /* @__PURE__ */ jsx3(DataWidget2, {
+              title: /* @__PURE__ */ jsx3(Skeleton2, {
+                className: "altertable-data-app-skeleton-widget-title"
+              }),
+              children: /* @__PURE__ */ jsx3("div", {
+                className: "altertable-data-app-skeleton-rows",
+                children: [0, 1, 2].map((row) => /* @__PURE__ */ jsxs2("div", {
+                  className: "altertable-data-app-skeleton-row",
+                  children: [
+                    /* @__PURE__ */ jsx3(Skeleton2, {}),
+                    /* @__PURE__ */ jsx3(Skeleton2, {}),
+                    /* @__PURE__ */ jsx3(Skeleton2, {})
+                  ]
+                }, row))
+              })
+            })
+          ]
+        }),
+        footer != null && footer !== false && /* @__PURE__ */ jsx3("div", {
+          className: "altertable-data-app-skeleton-footer",
+          children: footer
+        })
+      ]
+    })
+  });
+}
+// src/react/ui/GlossaryExplanation.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function GlossaryExplanation({
+  entry,
+  empty,
+  title,
+  description,
+  visual,
+  queries,
+  dataContext,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(AboutData2, {
+    ...props,
+    shortcut: false,
+    iconOnly: true,
+    variant: "ghost",
+    title: title ?? entry.term,
+    description,
+    visual,
+    references: { kind: "entries", entries: [entry] },
+    empty,
+    dataContext,
+    queries,
+    className: className ?? "altertable-inspect-trigger",
+    tooltip: "Explore this term",
+    "aria-label": props["aria-label"] ?? `Explore ${entry.term}`,
+    children: /* @__PURE__ */ jsx4(AppIcon2, {
+      name: "openDetails"
+    })
+  });
+}
+// src/react/ui/GlossaryDefinition.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function GlossaryDefinition({
+  entry,
+  children
+}) {
+  return /* @__PURE__ */ jsxs3(HelpPopover2, {
+    trigger: children ?? entry.term,
+    triggerLabel: `Explain ${entry.term}`,
+    label: entry.term,
+    triggerProps: {
+      className: "altertable-glossary-definition-trigger",
+      "data-atbl-control": "help"
+    },
+    panelProps: { className: "altertable-glossary-definition-popover" },
+    children: [
+      /* @__PURE__ */ jsx5("strong", {
+        children: entry.term
+      }),
+      /* @__PURE__ */ jsx5("div", {
+        children: entry.definition
+      })
+    ]
+  });
+}
+// src/react/ui/TrendChart.tsx
+import { useLayoutEffect, useRef, useState } from "react";
+import {
+  AreaChart as RechartsAreaChart,
+  LineChart as RechartsLineChart,
+  ReferenceLine
+} from "recharts";
+
+// src/react/ui/chart-primitives.tsx
+import {
+  Area,
+  Dot,
+  Bar,
+  Line,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  DefaultTooltipContent
+} from "recharts";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var chartBarFill = "var(--atbl-chart-fill, color-mix(in srgb, var(--atbl-accent) 75%, var(--atbl-surface)))";
+var accent = "var(--atbl-accent)";
+function ChartDot({
+  active = false,
+  stroke = accent,
+  fill = active ? stroke : "var(--atbl-surface)",
+  r = active ? 4.5 : 3,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(Dot, {
+    stroke,
+    fill,
+    r,
+    strokeWidth: 2,
+    ...props
+  });
+}
+function ChartBar(props) {
+  return /* @__PURE__ */ jsx6(Bar, {
+    fill: chartBarFill,
+    radius: [5, 5, 0, 0],
+    maxBarSize: 30,
+    activeBar: { fill: accent },
+    isAnimationActive: false,
+    ...props
+  });
+}
+function ChartLine({
+  stroke = accent,
+  dot,
+  activeDot,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(Line, {
+    type: "linear",
+    stroke,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    dot: dot === undefined || dot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx6(ChartDot, {
+      cx,
+      cy,
+      stroke
+    }) : dot,
+    activeDot: activeDot === undefined || activeDot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx6(ChartDot, {
+      cx,
+      cy,
+      stroke,
+      active: true
+    }) : activeDot,
+    isAnimationActive: false,
+    ...props
+  });
+}
+function ChartArea({
+  stroke = accent,
+  dot,
+  activeDot,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(Area, {
+    legendType: "square",
+    type: "linear",
+    stroke,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: stroke,
+    fillOpacity: 0.14,
+    dot: dot === undefined || dot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx6(ChartDot, {
+      cx,
+      cy,
+      stroke
+    }) : dot,
+    activeDot: activeDot === undefined || activeDot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx6(ChartDot, {
+      cx,
+      cy,
+      stroke,
+      active: true
+    }) : activeDot,
+    isAnimationActive: false,
+    ...props
+  });
+}
+function ChartScatter(props) {
+  return /* @__PURE__ */ jsx6(Scatter, {
+    fill: accent,
+    isAnimationActive: false,
+    ...props
+  });
+}
+function ChartXAxis(props) {
+  return /* @__PURE__ */ jsx6(XAxis, {
+    stroke: "var(--atbl-muted)",
+    tickLine: false,
+    axisLine: { stroke: "var(--atbl-border)" },
+    tick: { fontSize: "var(--atbl-type-meta-size)" },
+    ...props
+  });
+}
+function ChartYAxis(props) {
+  return /* @__PURE__ */ jsx6(YAxis, {
+    stroke: "var(--atbl-muted)",
+    tickLine: false,
+    axisLine: false,
+    tick: { fontSize: "var(--atbl-type-meta-size)" },
+    ...props
+  });
+}
+function ChartGrid(props) {
+  return /* @__PURE__ */ jsx6(CartesianGrid, {
+    stroke: "var(--atbl-border)",
+    vertical: false,
+    ...props
+  });
+}
+function ChartTooltipContent(props) {
+  if (!props.active)
+    return null;
+  return /* @__PURE__ */ jsx6(TooltipSurface, {
+    "data-variant": "chart",
+    role: "tooltip",
+    children: /* @__PURE__ */ jsx6(DefaultTooltipContent, {
+      ...props,
+      contentStyle: {
+        margin: 0,
+        padding: 0,
+        background: "transparent",
+        border: 0,
+        whiteSpace: "normal",
+        ...props.contentStyle
+      },
+      labelStyle: {
+        color: "var(--atbl-text)",
+        fontSize: "var(--atbl-type-body-size)",
+        fontWeight: 650,
+        lineHeight: 1.2,
+        ...props.labelStyle
+      },
+      itemStyle: { paddingTop: 2, paddingBottom: 0, ...props.itemStyle }
+    })
+  });
+}
+function ChartTooltip(props) {
+  return /* @__PURE__ */ jsx6(Tooltip, {
+    content: /* @__PURE__ */ jsx6(ChartTooltipContent, {}),
+    cursor: false,
+    isAnimationActive: false,
+    ...props
+  });
+}
+
+// src/react/ui/chart-data.ts
+function validateChartItems(kind, items) {
+  const ids = new Set;
+  for (const item of items) {
+    invariant(item.id.trim().length > 0, `${kind} chart IDs must be nonempty and unique: blank ID.`);
+    invariant(!ids.has(item.id), `${kind} chart IDs must be nonempty and unique: duplicate "${item.id}".`);
+    ids.add(item.id);
+    if (kind === "scatter") {
+      const point = item;
+      invariant(Number.isFinite(point.x) && Number.isFinite(point.y), `scatter chart "${item.id}" requires finite values for x and y.`);
+    } else {
+      const point = item;
+      invariant(Number.isFinite(point.value), `${kind} chart "${item.id}" requires finite values.`);
+      invariant(kind !== "bar" && kind !== "pie" || point.value >= 0, `${kind} chart "${item.id}" requires nonnegative values.`);
+    }
+  }
+}
+
+// src/react/ui/TrendChart.tsx
+import { jsx as jsx7, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
+function TrendChart({
+  items,
+  unit,
+  ariaLabel,
+  formatValue = (value) => new Intl.NumberFormat().format(value),
+  area = false
+}) {
+  validateChartItems(area ? "area" : "line", items);
+  const Plot = area ? RechartsAreaChart : RechartsLineChart;
+  const [activeIndex, setActiveIndex] = useState();
+  const scrollport = useRef(null);
+  useLayoutEffect(() => {
+    const element = scrollport.current;
+    if (element)
+      element.scrollLeft = element.scrollWidth - element.clientWidth;
+  }, [items]);
+  const magnitude = items.reduce((max, item) => Math.max(max, Math.abs(item.value)), 1);
+  const low = items.reduce((min, item) => Math.min(min, item.value / magnitude), 0);
+  const high = items.reduce((max, item) => Math.max(max, item.value / magnitude), 0);
+  return /* @__PURE__ */ jsxs4("section", {
+    className: "altertable-trend-chart",
+    "aria-label": ariaLabel,
+    children: [
+      items.length === 0 && /* @__PURE__ */ jsx7("span", {
+        children: "No data"
+      }),
+      items.length > 0 && /* @__PURE__ */ jsx7(Fragment, {
+        children: /* @__PURE__ */ jsx7("div", {
+          className: "altertable-trend-scroll",
+          ref: scrollport,
+          children: /* @__PURE__ */ jsxs4("div", {
+            className: "altertable-trend-plot",
+            style: { minWidth: items.length * 40 },
+            children: [
+              /* @__PURE__ */ jsx7("div", {
+                className: "altertable-chart-canvas",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsxs4(Plot, {
+                  data: items.map((item) => ({
+                    ...item,
+                    plotValue: item.value / magnitude
+                  })),
+                  title: ariaLabel,
+                  responsive: true,
+                  width: "100%",
+                  height: 220,
+                  margin: { top: 12, right: 0, bottom: 12, left: 0 },
+                  accessibilityLayer: false,
+                  tabIndex: -1,
+                  children: [
+                    /* @__PURE__ */ jsx7(ChartXAxis, {
+                      hide: true,
+                      dataKey: "id",
+                      scale: "band"
+                    }),
+                    /* @__PURE__ */ jsx7(ChartYAxis, {
+                      hide: true,
+                      domain: [low, high === low ? low + 1 : high]
+                    }),
+                    /* @__PURE__ */ jsx7(ReferenceLine, {
+                      y: 0,
+                      stroke: "var(--atbl-border)"
+                    }),
+                    area && /* @__PURE__ */ jsx7(ChartArea, {
+                      dataKey: "plotValue",
+                      stroke: "none",
+                      fill: "var(--atbl-accent)",
+                      dot: false,
+                      activeDot: false
+                    }),
+                    /* @__PURE__ */ jsx7(ChartLine, {
+                      dataKey: "plotValue",
+                      dot: ({ cx, cy, index }) => /* @__PURE__ */ jsx7(ChartDot, {
+                        cx,
+                        cy,
+                        active: index === activeIndex
+                      }),
+                      activeDot: false
+                    })
+                  ]
+                })
+              }),
+              /* @__PURE__ */ jsx7("div", {
+                className: "altertable-trend-points",
+                children: items.map((item, index) => /* @__PURE__ */ jsx7(Tooltip2, {
+                  variant: "chart",
+                  onOpenChange: (open) => setActiveIndex((current) => open ? index : current === index ? undefined : current),
+                  content: /* @__PURE__ */ jsxs4(Fragment, {
+                    children: [
+                      /* @__PURE__ */ jsx7("strong", {
+                        children: item.label
+                      }),
+                      /* @__PURE__ */ jsxs4("span", {
+                        children: [
+                          formatValue(item.value),
+                          " ",
+                          unit
+                        ]
+                      })
+                    ]
+                  }),
+                  className: "altertable-chart-column",
+                  children: /* @__PURE__ */ jsxs4("button", {
+                    "data-atbl-focus": "ring",
+                    "data-atbl-control": "default",
+                    type: "button",
+                    tabIndex: -1,
+                    className: "altertable-trend-point",
+                    "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}`,
+                    children: [
+                      /* @__PURE__ */ jsx7("span", {
+                        className: "altertable-trend-hit"
+                      }),
+                      /* @__PURE__ */ jsx7("span", {
+                        className: "altertable-trend-label",
+                        children: item.label
+                      })
+                    ]
+                  })
+                }, item.id))
+              })
+            ]
+          })
+        })
+      })
+    ]
+  });
+}
+
+// src/react/ui/LineChart.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function LineChart(props) {
+  return /* @__PURE__ */ jsx8(TrendChart, {
+    ...props
+  });
+}
+// src/react/ui/AreaChart.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function AreaChart(props) {
+  return /* @__PURE__ */ jsx9(TrendChart, {
+    ...props,
+    area: true
+  });
+}
+// src/react/ui/ChartLegend.tsx
+import {
+  Children,
+  useId,
+  useState as useState2
+} from "react";
+import { jsx as jsx10, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
+function ChartLegendRoot({
+  children,
+  layout = "horizontal",
+  align = "start",
+  maxVisibleItems = 6,
+  className,
+  "aria-label": ariaLabel = "Chart legend",
+  ...props
+}) {
+  const [expanded, setExpanded] = useState2(false);
+  const listId = useId();
+  const items = Children.toArray(children);
+  const limit = Number.isFinite(maxVisibleItems) ? Math.max(1, Math.floor(maxVisibleItems)) : 6;
+  const visibleCount = items.length > limit ? limit - 1 : limit;
+  const hiddenCount = Math.max(0, items.length - visibleCount);
+  return /* @__PURE__ */ jsx10("div", {
+    className: "altertable-chart-legend-container",
+    children: /* @__PURE__ */ jsxs5("ul", {
+      id: listId,
+      ...props,
+      "aria-label": ariaLabel,
+      "data-layout": layout,
+      "data-align": align,
+      className: classNames("altertable-chart-legend", className),
+      children: [
+        expanded ? items : items.slice(0, visibleCount),
+        hiddenCount > 0 && /* @__PURE__ */ jsx10("li", {
+          className: "altertable-chart-legend-overflow",
+          children: /* @__PURE__ */ jsx10("button", {
+            type: "button",
+            "data-atbl-control": "action",
+            "data-atbl-focus": "ring",
+            className: "altertable-chart-legend-action",
+            "aria-expanded": expanded,
+            "aria-controls": props.id ?? listId,
+            onClick: () => setExpanded((value) => !value),
+            children: expanded ? "Show fewer" : `+${hiddenCount} more`
+          })
+        })
+      ]
+    })
+  });
+}
+function ChartLegendItem({
+  inactive,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10("li", {
+    ...props,
+    "data-inactive": inactive || undefined,
+    className: classNames("altertable-chart-legend-item", className)
+  });
+}
+function ChartLegendMarker({
+  kind,
+  color = kind === "bar" ? chartBarFill : "var(--atbl-accent)",
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5("svg", {
+    ...props,
+    "aria-hidden": "true",
+    focusable: "false",
+    viewBox: "0 0 20 12",
+    "data-kind": kind,
+    className: classNames("altertable-chart-legend-marker", className),
+    style: { color, ...style },
+    children: [
+      kind === "bar" && /* @__PURE__ */ jsx10("path", {
+        d: "M6 11V3Q6 1 8 1H12Q14 1 14 3V11Z",
+        fill: "currentColor"
+      }),
+      kind === "slice" && /* @__PURE__ */ jsx10("rect", {
+        x: "5",
+        y: "1",
+        width: "10",
+        height: "10",
+        rx: "2",
+        fill: "currentColor"
+      }),
+      kind === "point" && /* @__PURE__ */ jsx10("circle", {
+        cx: "10",
+        cy: "6",
+        r: "3",
+        fill: "currentColor"
+      }),
+      kind === "line" && /* @__PURE__ */ jsxs5(Fragment2, {
+        children: [
+          /* @__PURE__ */ jsx10("path", {
+            d: "M1 6H19",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }),
+          /* @__PURE__ */ jsx10("circle", {
+            cx: "10",
+            cy: "6",
+            r: "2.5",
+            fill: "var(--atbl-surface)",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          })
+        ]
+      }),
+      kind === "area" && /* @__PURE__ */ jsxs5(Fragment2, {
+        children: [
+          /* @__PURE__ */ jsx10("path", {
+            d: "M1 10L7 5L13 7L19 2V11H1Z",
+            fill: "currentColor",
+            fillOpacity: "0.14"
+          }),
+          /* @__PURE__ */ jsx10("path", {
+            d: "M1 10L7 5L13 7L19 2",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          })
+        ]
+      })
+    ]
+  });
+}
+function ChartLegendLabel({
+  className,
+  children,
+  title,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10("span", {
+    ...props,
+    title: title ?? (typeof children === "string" ? children : undefined),
+    className: classNames("altertable-chart-legend-label", className),
+    children
+  });
+}
+var ChartLegend = Object.assign(ChartLegendRoot, {
+  Item: ChartLegendItem,
+  Marker: ChartLegendMarker,
+  Label: ChartLegendLabel
+});
+
+// src/react/ui/PieChart.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx11, jsxs as jsxs6, Fragment as Fragment3 } from "react/jsx-runtime";
+function PieChart({
+  items,
+  unit,
+  ariaLabel,
+  showLegend = true,
+  formatValue = (value) => new Intl.NumberFormat().format(value)
+}) {
+  validateChartItems("pie", items);
+  const [previewId, setPreviewId] = useState3(null);
+  const [plotOpen, setPlotOpen] = useState3(false);
+  const [legendId, setLegendId] = useState3(null);
+  const maximum = items.reduce((max, item) => Math.max(max, item.value), 0);
+  const total = maximum ? items.reduce((sum, item) => sum + item.value / maximum, 0) : 0;
+  let cursor = -Math.PI / 2;
+  const slices = [];
+  for (const [index, item] of items.entries()) {
+    let point = function(angle) {
+      return `${110 + Math.cos(angle) * 100},${110 + Math.sin(angle) * 100}`;
+    };
+    const share = total ? item.value / maximum / total : 0;
+    const start = cursor;
+    cursor += share * Math.PI * 2;
+    const middle = (start + cursor) / 2;
+    slices.push({
+      ...item,
+      share,
+      color: `var(--atbl-chart-${index % 8 + 1})`,
+      path: `${share === 1 ? "M" : "M110,110 L"}${point(start)} A100,100 0 0 1 ${point(middle)} A100,100 0 0 1 ${point(cursor)} Z`
+    });
+  }
+  function percent(share) {
+    return new Intl.NumberFormat("en-US", {
+      style: "percent",
+      maximumFractionDigits: 1
+    }).format(share);
+  }
+  function detail(item) {
+    return /* @__PURE__ */ jsxs6(Fragment3, {
+      children: [
+        /* @__PURE__ */ jsx11("strong", {
+          children: item.label
+        }),
+        /* @__PURE__ */ jsxs6("span", {
+          children: [
+            formatValue(item.value),
+            " ",
+            unit,
+            " · ",
+            percent(item.share)
+          ]
+        })
+      ]
+    });
+  }
+  const preview = slices.find((item) => item.id === previewId);
+  return /* @__PURE__ */ jsxs6("section", {
+    className: "altertable-pie-chart",
+    "aria-label": ariaLabel,
+    children: [
+      items.length === 0 && /* @__PURE__ */ jsx11("span", {
+        children: "No data"
+      }),
+      items.length > 0 && /* @__PURE__ */ jsxs6(Fragment3, {
+        children: [
+          /* @__PURE__ */ jsxs6("div", {
+            className: "altertable-pie-plot",
+            children: [
+              /* @__PURE__ */ jsx11(Tooltip2, {
+                variant: "chart",
+                className: "altertable-pie-tooltip",
+                onOpenChange: setPlotOpen,
+                content: preview ? detail(preview) : null,
+                children: /* @__PURE__ */ jsx11("svg", {
+                  viewBox: "0 0 220 220",
+                  "aria-hidden": "true",
+                  focusable: "false",
+                  children: total === 0 ? /* @__PURE__ */ jsx11("circle", {
+                    cx: "110",
+                    cy: "110",
+                    r: "100",
+                    className: "altertable-pie-empty"
+                  }) : slices.filter((item) => item.share > 0).map((item) => /* @__PURE__ */ jsx11("path", {
+                    d: item.path,
+                    fill: item.color,
+                    className: "altertable-pie-slice",
+                    "data-active": item.id === (plotOpen && previewId ? previewId : showLegend ? legendId : null) || undefined,
+                    onPointerDown: (event) => {
+                      if (plotOpen && previewId !== item.id)
+                        event.preventDefault();
+                      setPreviewId(item.id);
+                    },
+                    onPointerEnter: (event) => {
+                      if (event.pointerType === "mouse")
+                        setPreviewId(item.id);
+                    },
+                    onPointerLeave: (event) => {
+                      if (event.pointerType === "mouse")
+                        setPreviewId(null);
+                    }
+                  }, item.id))
+                })
+              }),
+              total === 0 && /* @__PURE__ */ jsx11("span", {
+                className: "altertable-pie-empty-label",
+                children: "No nonzero values"
+              })
+            ]
+          }),
+          showLegend && /* @__PURE__ */ jsx11(ChartLegend, {
+            layout: "vertical",
+            "aria-label": `${ariaLabel} legend`,
+            className: "altertable-pie-legend",
+            children: slices.map((item) => /* @__PURE__ */ jsx11(ChartLegend.Item, {
+              children: /* @__PURE__ */ jsx11(Tooltip2, {
+                variant: "chart",
+                content: detail(item),
+                onOpenChange: (open) => setLegendId((current) => open ? item.id : current === item.id ? null : current),
+                children: /* @__PURE__ */ jsxs6("button", {
+                  "data-atbl-focus": "ring",
+                  "data-atbl-control": "default",
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}, ${percent(item.share)}`,
+                  children: [
+                    /* @__PURE__ */ jsx11(ChartLegend.Marker, {
+                      kind: "slice",
+                      color: item.color
+                    }),
+                    /* @__PURE__ */ jsx11(ChartLegend.Label, {
+                      className: "altertable-pie-label",
+                      children: item.label
+                    }),
+                    /* @__PURE__ */ jsx11("strong", {
+                      children: formatValue(item.value)
+                    }),
+                    /* @__PURE__ */ jsx11("span", {
+                      children: percent(item.share)
+                    })
+                  ]
+                })
+              })
+            }, item.id))
+          })
+        ]
+      })
+    ]
+  });
+}
+// src/react/ui/ScatterChart.tsx
+import { jsx as jsx12, jsxs as jsxs7, Fragment as Fragment4 } from "react/jsx-runtime";
+function formatNumber(value) {
+  return new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(value);
+}
+function scale(values) {
+  const magnitude = values.reduce((max, value) => Math.max(max, Math.abs(value)), 1);
+  const low = values.reduce((min, value) => Math.min(min, value / magnitude), 0);
+  const high = values.reduce((max, value) => Math.max(max, value / magnitude), 0) || (low === 0 ? 1 : 0);
+  const span = high - low;
+  return {
+    position(value) {
+      return (value / magnitude - low) / span * 100;
+    },
+    ticks: [low, low + span / 2, high].map((value) => value * magnitude)
+  };
+}
+function ScatterChart({
+  items,
+  xLabel,
+  yLabel,
+  xUnit,
+  yUnit,
+  ariaLabel,
+  formatX = formatNumber,
+  formatY = formatNumber
+}) {
+  validateChartItems("scatter", items);
+  const xScale = scale(items.map((item) => item.x));
+  const yScale = scale(items.map((item) => item.y));
+  return /* @__PURE__ */ jsxs7("section", {
+    className: "altertable-scatter-chart",
+    "aria-label": ariaLabel,
+    children: [
+      items.length === 0 && /* @__PURE__ */ jsx12("span", {
+        children: "No data"
+      }),
+      items.length > 0 && /* @__PURE__ */ jsxs7(Fragment4, {
+        children: [
+          /* @__PURE__ */ jsxs7("p", {
+            className: "altertable-scatter-axis-title",
+            children: [
+              yLabel,
+              yUnit && ` (${yUnit})`
+            ]
+          }),
+          /* @__PURE__ */ jsx12("div", {
+            className: "altertable-scatter-axes",
+            children: /* @__PURE__ */ jsxs7("div", {
+              className: "altertable-scatter-plot",
+              children: [
+                yScale.ticks.map((value, index) => /* @__PURE__ */ jsx12("div", {
+                  className: "altertable-scatter-gridline",
+                  style: { bottom: `${index * 50}%` },
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx12("span", {
+                    title: formatY(value),
+                    children: formatY(value)
+                  })
+                }, index)),
+                xScale.ticks.map((value, index) => /* @__PURE__ */ jsx12("span", {
+                  className: "altertable-scatter-x-tick",
+                  "data-edge": index,
+                  style: { left: `${index * 50}%` },
+                  "aria-hidden": "true",
+                  title: formatX(value),
+                  children: formatX(value)
+                }, index)),
+                items.map((item) => /* @__PURE__ */ jsx12(Tooltip2, {
+                  variant: "chart",
+                  content: /* @__PURE__ */ jsxs7(Fragment4, {
+                    children: [
+                      /* @__PURE__ */ jsx12("strong", {
+                        children: item.label
+                      }),
+                      /* @__PURE__ */ jsxs7("span", {
+                        children: [
+                          xLabel,
+                          ": ",
+                          formatX(item.x),
+                          " ",
+                          xUnit
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxs7("span", {
+                        children: [
+                          yLabel,
+                          ": ",
+                          formatY(item.y),
+                          " ",
+                          yUnit
+                        ]
+                      })
+                    ]
+                  }),
+                  className: "altertable-scatter-tooltip",
+                  style: {
+                    left: `${xScale.position(item.x)}%`,
+                    bottom: `${yScale.position(item.y)}%`
+                  },
+                  children: /* @__PURE__ */ jsx12("button", {
+                    "data-atbl-focus": "ring",
+                    "data-atbl-control": "default",
+                    type: "button",
+                    tabIndex: -1,
+                    className: "altertable-scatter-point",
+                    "aria-label": `${item.label}: ${xLabel} ${formatX(item.x)} ${xUnit}, ${yLabel} ${formatY(item.y)} ${yUnit}`,
+                    children: /* @__PURE__ */ jsx12("span", {})
+                  })
+                }, item.id))
+              ]
+            })
+          }),
+          /* @__PURE__ */ jsxs7("p", {
+            className: "altertable-scatter-axis-title altertable-scatter-x-title",
+            children: [
+              xLabel,
+              xUnit && ` (${xUnit})`
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+// src/react/ui/BarChart.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { BarChart as RechartsBarChart, Cell } from "recharts";
+import { jsx as jsx13, jsxs as jsxs8, Fragment as Fragment5 } from "react/jsx-runtime";
+function BarChart({
+  items,
+  unit,
+  ariaLabel,
+  formatValue = (value) => new Intl.NumberFormat().format(value)
+}) {
+  validateChartItems("bar", items);
+  const [activeId, setActiveId] = useState4();
+  const scrollport = useRef2(null);
+  useLayoutEffect2(() => {
+    const element = scrollport.current;
+    if (element)
+      element.scrollLeft = element.scrollWidth - element.clientWidth;
+  }, [items]);
+  const maximum = items.reduce((max, item) => Math.max(max, item.value), 1);
+  return /* @__PURE__ */ jsxs8("section", {
+    className: "altertable-selectable-bars",
+    "aria-label": ariaLabel,
+    children: [
+      items.length === 0 && /* @__PURE__ */ jsx13("span", {
+        children: "No data"
+      }),
+      /* @__PURE__ */ jsx13("div", {
+        className: "altertable-selectable-bars-scroll",
+        ref: scrollport,
+        children: /* @__PURE__ */ jsxs8("div", {
+          className: "altertable-selectable-bars-plot",
+          style: { minWidth: items.length * 45 },
+          children: [
+            /* @__PURE__ */ jsx13("div", {
+              className: "altertable-chart-canvas",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxs8(RechartsBarChart, {
+                data: items.map((item) => ({
+                  ...item,
+                  plotValue: item.value / maximum
+                })),
+                title: ariaLabel,
+                responsive: true,
+                width: "100%",
+                height: 220,
+                margin: { top: 0, right: 0, bottom: 0, left: 0 },
+                accessibilityLayer: false,
+                tabIndex: -1,
+                barCategoryGap: "24%",
+                children: [
+                  /* @__PURE__ */ jsx13(ChartXAxis, {
+                    hide: true,
+                    dataKey: "id",
+                    scale: "band"
+                  }),
+                  /* @__PURE__ */ jsx13(ChartYAxis, {
+                    hide: true,
+                    domain: [0, 1],
+                    allowDataOverflow: true
+                  }),
+                  /* @__PURE__ */ jsx13(ChartBar, {
+                    dataKey: "plotValue",
+                    minPointSize: (value) => (value ?? 0) > 0 ? 7 : 0,
+                    children: items.map((item) => /* @__PURE__ */ jsx13(Cell, {
+                      fill: activeId === item.id ? "var(--atbl-accent)" : chartBarFill
+                    }, item.id))
+                  })
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx13("div", {
+              className: "altertable-selectable-bars-items",
+              children: items.map((item) => /* @__PURE__ */ jsx13(Tooltip2, {
+                variant: "chart",
+                onOpenChange: (open) => setActiveId((current) => open ? item.id : current === item.id ? undefined : current),
+                content: /* @__PURE__ */ jsxs8(Fragment5, {
+                  children: [
+                    /* @__PURE__ */ jsx13("strong", {
+                      children: item.label
+                    }),
+                    /* @__PURE__ */ jsxs8("span", {
+                      children: [
+                        formatValue(item.value),
+                        " ",
+                        unit
+                      ]
+                    })
+                  ]
+                }),
+                className: "altertable-chart-column",
+                children: /* @__PURE__ */ jsxs8("button", {
+                  "data-atbl-focus": "ring",
+                  "data-atbl-control": "default",
+                  type: "button",
+                  tabIndex: -1,
+                  className: "altertable-selectable-bars-item",
+                  "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}`,
+                  children: [
+                    /* @__PURE__ */ jsx13("span", {
+                      className: "altertable-selectable-bars-area"
+                    }),
+                    /* @__PURE__ */ jsx13("span", {
+                      className: "altertable-selectable-bars-label",
+                      children: item.label
+                    })
+                  ]
+                })
+              }, item.id))
+            })
+          ]
+        })
+      })
+    ]
+  });
+}
+// src/react/ui/RadioGroup.tsx
+import {
+  RadioGroup as AriaRadioGroup,
+  Radio as AriaRadio,
+  Label
+} from "react-aria-components";
+import { jsx as jsx14, jsxs as jsxs9, Fragment as Fragment6 } from "react/jsx-runtime";
+function RadioGroup({
+  label,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs9(AriaRadioGroup, {
+    ...props,
+    className: classNames("altertable-radio-group", className),
+    children: [
+      /* @__PURE__ */ jsx14(Label, {
+        className: "altertable-control-label",
+        children: label
+      }),
+      children
+    ]
+  });
+}
+function Radio({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx14(AriaRadio, {
+    ...props,
+    "data-atbl-control": "action",
+    "data-atbl-focus": "ring",
+    className: classNames("altertable-radio", className),
+    children: (state) => /* @__PURE__ */ jsxs9(Fragment6, {
+      children: [
+        /* @__PURE__ */ jsx14("span", {
+          className: "altertable-radio-mark",
+          "aria-hidden": "true"
+        }),
+        typeof children === "function" ? children(state) : children
+      ]
+    })
+  });
+}
+function SegmentedControl({
+  options,
+  className,
+  ...props
+}) {
+  validateChoiceOptions(options);
+  return /* @__PURE__ */ jsx14(RadioGroup, {
+    ...props,
+    orientation: "horizontal",
+    className: classNames("altertable-segmented-control", className),
+    children: /* @__PURE__ */ jsx14("div", {
+      className: "altertable-segmented-options",
+      children: options.map((option) => /* @__PURE__ */ jsx14(Radio, {
+        value: option.id,
+        "data-atbl-internal-surface": "option",
+        children: option.label
+      }, option.id))
+    })
+  });
+}
+// src/react/ui/CheckboxGroup.tsx
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function CheckboxGroup({
+  label,
+  values,
+  onChange,
+  className,
+  children,
+  disabled,
+  ...props
+}) {
+  invariant(new Set(values).size === values.length, "Checkbox group values must be unique.");
+  return /* @__PURE__ */ jsxs10("fieldset", {
+    ...props,
+    disabled,
+    className: classNames("altertable-checkbox-group", className),
+    children: [
+      /* @__PURE__ */ jsx15("legend", {
+        children: label
+      }),
+      /* @__PURE__ */ jsx15(CheckboxGroupContext, {
+        value: {
+          values,
+          disabled,
+          onChange(value, checked) {
+            onChange(checked ? [...values.filter((item) => item !== value), value] : values.filter((item) => item !== value));
+          }
+        },
+        children
+      })
+    ]
+  });
+}
+// src/react/ui/ComposedChartLegend.tsx
+import { Legend } from "recharts";
+import { jsx as jsx16, jsxs as jsxs11, Fragment as Fragment7 } from "react/jsx-runtime";
+var legendMarkerKinds = {
+  square: "area",
+  rect: "bar",
+  line: "line",
+  plainline: "line"
+};
+function LegendContent({
+  payload = [],
+  maxVisibleItems,
+  formatter,
+  layout,
+  align,
+  labelStyle,
+  iconType,
+  iconSize = 20,
+  inactiveColor = "var(--atbl-muted)",
+  position,
+  verticalAlign,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  "aria-label": ariaLabel
+}) {
+  if (!payload.some((entry) => entry.type !== "none"))
+    return null;
+  const vertical = layout === "vertical" || layout === "auto" && (position === "left" || position === "right");
+  return /* @__PURE__ */ jsx16(ChartLegend, {
+    "aria-label": ariaLabel,
+    className: position === "top" || position == null && verticalAlign === "top" ? "altertable-composed-chart-legend-above" : position === "bottom" || position == null && verticalAlign !== "middle" && !vertical ? "altertable-composed-chart-legend-below" : undefined,
+    maxVisibleItems,
+    layout: vertical ? "vertical" : "horizontal",
+    align: align === "right" ? "end" : align === "left" ? "start" : "center",
+    children: payload.map((entry, index) => {
+      if (entry.type === "none")
+        return null;
+      const type = iconType ?? entry.type;
+      const kind = legendMarkerKinds[type ?? "none"] ?? "point";
+      const formatLabel = entry.formatter ?? formatter;
+      const label = formatLabel ? formatLabel(entry.value, entry, index) : entry.value;
+      const content = /* @__PURE__ */ jsxs11(Fragment7, {
+        children: [
+          type !== "none" && (entry.legendIcon ?? /* @__PURE__ */ jsx16(ChartLegend.Marker, {
+            kind,
+            color: entry.inactive ? inactiveColor : entry.color,
+            style: { width: iconSize, height: iconSize * 0.6 }
+          })),
+          /* @__PURE__ */ jsx16(ChartLegend.Label, {
+            style: labelStyle,
+            children: label
+          })
+        ]
+      });
+      return /* @__PURE__ */ jsx16(ChartLegend.Item, {
+        inactive: entry.inactive,
+        onMouseEnter: onMouseEnter ? (event) => onMouseEnter(entry, index, event) : undefined,
+        onMouseLeave: onMouseLeave ? (event) => onMouseLeave(entry, index, event) : undefined,
+        children: onClick ? /* @__PURE__ */ jsx16("button", {
+          type: "button",
+          "data-atbl-control": "action",
+          "data-atbl-focus": "ring",
+          className: "altertable-chart-legend-action",
+          onClick: (event) => onClick(entry, index, event),
+          children: content
+        }) : content
+      }, index);
+    })
+  });
+}
+function ComposedChartLegend({
+  maxVisibleItems,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(Legend, {
+    iconSize: 20,
+    inactiveColor: "var(--atbl-muted)",
+    content: /* @__PURE__ */ jsx16(LegendContent, {
+      maxVisibleItems
+    }),
+    ...props
+  });
+}
+
+// src/react/ui/ComposedChart.tsx
+import {
+  ComposedChart as RechartsComposedChart,
+  ZAxis,
+  ReferenceLine as ReferenceLine2,
+  ReferenceArea,
+  ReferenceDot,
+  Brush,
+  Cell as Cell2,
+  Label as Label2,
+  LabelList,
+  ErrorBar
+} from "recharts";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function ComposedChartRoot({
+  data,
+  ariaLabel,
+  width = "100%",
+  height = 300,
+  responsive = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17("section", {
+    className: ["altertable-composed-chart", className].filter(Boolean).join(" "),
+    "aria-label": ariaLabel,
+    children: /* @__PURE__ */ jsx17(RechartsComposedChart, {
+      "data-atbl-focus": "inset",
+      ...props,
+      data,
+      width,
+      height,
+      responsive,
+      title: ariaLabel
+    })
+  });
+}
+var ComposedChart = Object.assign(ComposedChartRoot, {
+  Dot: ChartDot,
+  Area: ChartArea,
+  Bar: ChartBar,
+  Line: ChartLine,
+  Scatter: ChartScatter,
+  XAxis: ChartXAxis,
+  YAxis: ChartYAxis,
+  ZAxis,
+  CartesianGrid: ChartGrid,
+  Tooltip: ChartTooltip,
+  Legend: ComposedChartLegend,
+  ReferenceLine: ReferenceLine2,
+  ReferenceArea,
+  ReferenceDot,
+  Brush,
+  Cell: Cell2,
+  Label: Label2,
+  LabelList,
+  ErrorBar
+});
+export {
+  AboutData2 as AboutData,
+  AppIcon2 as AppIcon,
+  AreaChart,
+  BarChart,
+  ChartLegend,
+  Checkbox2 as Checkbox,
+  CheckboxGroup,
+  ChoicePicker2 as ChoicePicker,
+  ComposedChart,
+  DataApp,
+  DataAppProvider2 as DataAppProvider,
+  DataAppSkeleton,
+  DataTable2 as DataTable,
+  DataTableEmptyRow2 as DataTableEmptyRow,
+  DataTableShare2 as DataTableShare,
+  DataTableTimestamp2 as DataTableTimestamp,
+  DataValue2 as DataValue,
+  DataWidget2 as DataWidget,
+  DateRangePicker2 as DateRangePicker,
+  DimensionPicker2 as DimensionPicker,
+  FilterActions2 as FilterActions,
+  FilterBar2 as FilterBar,
+  GettingStarted,
+  GlossaryDefinition,
+  GlossaryExplanation,
+  GradientScroll2 as GradientScroll,
+  HelpPopover2 as HelpPopover,
+  LineChart,
+  LiveControl2 as LiveControl,
+  Menu2 as Menu,
+  PressButton as MenuButton,
+  MenuItem2 as MenuItem,
+  MenuPopover2 as MenuPopover,
+  MenuSection2 as MenuSection,
+  MenuSeparator2 as MenuSeparator,
+  MenuTrigger2 as MenuTrigger,
+  MetricWidget2 as MetricWidget,
+  NumberField2 as NumberField,
+  NumberFilterPicker2 as NumberFilterPicker,
+  NumberRangeField2 as NumberRangeField,
+  PieChart,
+  PresentStory2 as PresentStory,
+  Radio,
+  RadioGroup,
+  ScatterChart,
+  SearchField2 as SearchField,
+  SearchMatch2 as SearchMatch,
+  SegmentedControl,
+  Select2 as Select,
+  Sheet2 as Sheet,
+  Tab2 as Tab,
+  TabList2 as TabList,
+  TabPanel2 as TabPanel,
+  TabPanels2 as TabPanels,
+  TableWidget2 as TableWidget,
+  Tabs2 as Tabs,
+  TextWidget2 as TextWidget,
+  Tooltip2 as Tooltip,
+  TooltipProvider2 as TooltipProvider,
+  VariableBar2 as VariableBar,
+  VisualizationWidget2 as VisualizationWidget,
+  injectDataAppShellStyles,
+  injectDataAppStyles2 as injectDataAppStyles,
+  isPlainKeyEvent2 as isPlainKeyEvent,
+  searchItems2 as searchItems,
+  useAppVariables2 as useAppVariables,
+  useViewTab2 as useViewTab
+};
+
+//# debugId=FCD41F839B3A5B8964756E2164756E21