@altertable/data-app 0.64.0 → 0.66.0

package/dist/react/ui/index.js

@@ -0,0 +1,1614 @@
+import {
+  injectStyles,
+  injectDataAppStyles2,
+  AppIcon2,
+  classNames,
+  Button2,
+  TooltipProvider2,
+  Tooltip2,
+  GradientScroll2,
+  Sheet2,
+  TabList2,
+  TabPanels2,
+  Tab2,
+  TabPanel2,
+  Tabs2,
+  useViewTab2,
+  AboutData2,
+  DataAppProvider2,
+  useDeclaredResult,
+  useAppVariables2,
+  SearchField2,
+  Skeleton2,
+  SearchMatch2,
+  searchItems2,
+  Combobox2,
+  Checkbox2,
+  DateRangePicker2,
+  DimensionPicker2,
+  createDataHooks2,
+  LiveControl2,
+  PresentStory2,
+  DataAppFrame,
+  Grid2,
+  DataWidget2,
+  VisualizationWidget2,
+  MetricWidget2,
+  HelpPopover2,
+  DataTable2,
+  DataTableShare2,
+  DataTableEmptyRow2,
+  DataTableTimestamp2,
+  TableWidget2,
+  TextWidget2,
+  DataValue2,
+  createDataContext2
+} from "../../chunks/contract-havnjmdr.js";
+import"../../chunks/contract-wz59z8pq.js";
+import"../../chunks/contract-mev09s5v.js";
+import {
+  invariant
+} from "../../chunks/contract-rfbakka4.js";
+import"../../chunks/contract-m6n8ctfc.js";
+import {
+  createDataClient2
+} from "../../chunks/contract-19ckn3n7.js";
+import"../../chunks/contract-pk603qj7.js";
+import"../../chunks/contract-e11m4y7f.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-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({
+  config,
+  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, {
+    config,
+    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 } from "react";
+
+// 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 jsx6, 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 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);
+  const span = high - low || 1;
+  function y(value) {
+    return 208 - (value / magnitude - low) / span * 196;
+  }
+  const points = items.map((item, index) => ({
+    x: (index + 0.5) / items.length * 1000,
+    y: y(item.value)
+  }));
+  const path = points.map((point, index) => `${index ? "L" : "M"}${point.x},${point.y}`).join(" ");
+  const first = points[0];
+  const last = points.at(-1);
+  return /* @__PURE__ */ jsxs4("section", {
+    className: "altertable-trend-chart",
+    "aria-label": ariaLabel,
+    children: [
+      items.length === 0 && /* @__PURE__ */ jsx6("span", {
+        children: "No data"
+      }),
+      items.length > 0 && /* @__PURE__ */ jsx6(Fragment, {
+        children: /* @__PURE__ */ jsx6("div", {
+          className: "altertable-trend-scroll",
+          ref: scrollport,
+          children: /* @__PURE__ */ jsxs4("div", {
+            className: "altertable-trend-plot",
+            style: { minWidth: items.length * 40 },
+            children: [
+              /* @__PURE__ */ jsxs4("svg", {
+                viewBox: "0 0 1000 220",
+                preserveAspectRatio: "none",
+                "aria-hidden": "true",
+                focusable: "false",
+                children: [
+                  /* @__PURE__ */ jsx6("line", {
+                    className: "altertable-trend-baseline",
+                    x1: "0",
+                    x2: "1000",
+                    y1: y(0),
+                    y2: y(0),
+                    vectorEffect: "non-scaling-stroke"
+                  }),
+                  area && first && last && /* @__PURE__ */ jsx6("path", {
+                    className: "altertable-trend-fill",
+                    d: `${path} L${last.x},${y(0)} L${first.x},${y(0)} Z`
+                  }),
+                  /* @__PURE__ */ jsx6("path", {
+                    className: "altertable-trend-line",
+                    d: path,
+                    vectorEffect: "non-scaling-stroke"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx6("div", {
+                className: "altertable-trend-points",
+                children: items.map((item, index) => /* @__PURE__ */ jsx6(Tooltip2, {
+                  variant: "chart",
+                  content: /* @__PURE__ */ jsxs4(Fragment, {
+                    children: [
+                      /* @__PURE__ */ jsx6("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": "action",
+                    type: "button",
+                    tabIndex: -1,
+                    className: "altertable-trend-point",
+                    "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}`,
+                    children: [
+                      /* @__PURE__ */ jsx6("span", {
+                        className: "altertable-trend-hit",
+                        children: /* @__PURE__ */ jsx6("span", {
+                          className: "altertable-trend-dot",
+                          style: { top: `${points[index].y / 220 * 100}%` }
+                        })
+                      }),
+                      /* @__PURE__ */ jsx6("span", {
+                        className: "altertable-trend-label",
+                        children: item.label
+                      })
+                    ]
+                  })
+                }, item.id))
+              })
+            ]
+          })
+        })
+      })
+    ]
+  });
+}
+
+// src/react/ui/LineChart.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function LineChart(props) {
+  return /* @__PURE__ */ jsx7(TrendChart, {
+    ...props
+  });
+}
+// src/react/ui/AreaChart.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function AreaChart(props) {
+  return /* @__PURE__ */ jsx8(TrendChart, {
+    ...props,
+    area: true
+  });
+}
+// src/react/ui/PieChart.tsx
+import { useState } from "react";
+import { jsx as jsx9, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
+function PieChart({
+  items,
+  unit,
+  ariaLabel,
+  formatValue = (value) => new Intl.NumberFormat().format(value)
+}) {
+  validateChartItems("pie", items);
+  const [previewId, setPreviewId] = useState(null);
+  const [plotOpen, setPlotOpen] = useState(false);
+  const [legendId, setLegendId] = useState(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__ */ jsxs5(Fragment2, {
+      children: [
+        /* @__PURE__ */ jsx9("strong", {
+          children: item.label
+        }),
+        /* @__PURE__ */ jsxs5("span", {
+          children: [
+            formatValue(item.value),
+            " ",
+            unit,
+            " · ",
+            percent(item.share)
+          ]
+        })
+      ]
+    });
+  }
+  const preview = slices.find((item) => item.id === previewId);
+  return /* @__PURE__ */ jsxs5("section", {
+    className: "altertable-pie-chart",
+    "aria-label": ariaLabel,
+    children: [
+      items.length === 0 && /* @__PURE__ */ jsx9("span", {
+        children: "No data"
+      }),
+      items.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, {
+        children: [
+          /* @__PURE__ */ jsxs5("div", {
+            className: "altertable-pie-plot",
+            children: [
+              /* @__PURE__ */ jsx9(Tooltip2, {
+                variant: "chart",
+                className: "altertable-pie-tooltip",
+                onOpenChange: setPlotOpen,
+                content: preview ? detail(preview) : null,
+                children: /* @__PURE__ */ jsx9("svg", {
+                  viewBox: "0 0 220 220",
+                  "aria-hidden": "true",
+                  focusable: "false",
+                  children: total === 0 ? /* @__PURE__ */ jsx9("circle", {
+                    cx: "110",
+                    cy: "110",
+                    r: "100",
+                    className: "altertable-pie-empty"
+                  }) : slices.filter((item) => item.share > 0).map((item) => /* @__PURE__ */ jsx9("path", {
+                    d: item.path,
+                    fill: item.color,
+                    className: "altertable-pie-slice",
+                    "data-active": item.id === (plotOpen && previewId ? previewId : legendId) || 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__ */ jsx9("span", {
+                className: "altertable-pie-empty-label",
+                children: "No nonzero values"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx9("div", {
+            className: "altertable-pie-legend",
+            children: slices.map((item) => /* @__PURE__ */ jsx9(Tooltip2, {
+              variant: "chart",
+              content: detail(item),
+              onOpenChange: (open) => setLegendId((current) => open ? item.id : current === item.id ? null : current),
+              children: /* @__PURE__ */ jsxs5("button", {
+                "data-atbl-focus": "ring",
+                "data-atbl-control": "action",
+                type: "button",
+                tabIndex: -1,
+                "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}, ${percent(item.share)}`,
+                children: [
+                  /* @__PURE__ */ jsx9("span", {
+                    className: "altertable-pie-key",
+                    style: { background: item.color }
+                  }),
+                  /* @__PURE__ */ jsx9("span", {
+                    className: "altertable-pie-label",
+                    children: item.label
+                  }),
+                  /* @__PURE__ */ jsx9("strong", {
+                    children: formatValue(item.value)
+                  }),
+                  /* @__PURE__ */ jsx9("span", {
+                    children: percent(item.share)
+                  })
+                ]
+              })
+            }, item.id))
+          })
+        ]
+      })
+    ]
+  });
+}
+// src/react/ui/ScatterChart.tsx
+import { jsx as jsx10, jsxs as jsxs6, Fragment as Fragment3 } 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__ */ jsxs6("section", {
+    className: "altertable-scatter-chart",
+    "aria-label": ariaLabel,
+    children: [
+      items.length === 0 && /* @__PURE__ */ jsx10("span", {
+        children: "No data"
+      }),
+      items.length > 0 && /* @__PURE__ */ jsxs6(Fragment3, {
+        children: [
+          /* @__PURE__ */ jsxs6("p", {
+            className: "altertable-scatter-axis-title",
+            children: [
+              yLabel,
+              yUnit && ` (${yUnit})`
+            ]
+          }),
+          /* @__PURE__ */ jsx10("div", {
+            className: "altertable-scatter-axes",
+            children: /* @__PURE__ */ jsxs6("div", {
+              className: "altertable-scatter-plot",
+              children: [
+                yScale.ticks.map((value, index) => /* @__PURE__ */ jsx10("div", {
+                  className: "altertable-scatter-gridline",
+                  style: { bottom: `${index * 50}%` },
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx10("span", {
+                    title: formatY(value),
+                    children: formatY(value)
+                  })
+                }, index)),
+                xScale.ticks.map((value, index) => /* @__PURE__ */ jsx10("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__ */ jsx10(Tooltip2, {
+                  variant: "chart",
+                  content: /* @__PURE__ */ jsxs6(Fragment3, {
+                    children: [
+                      /* @__PURE__ */ jsx10("strong", {
+                        children: item.label
+                      }),
+                      /* @__PURE__ */ jsxs6("span", {
+                        children: [
+                          xLabel,
+                          ": ",
+                          formatX(item.x),
+                          " ",
+                          xUnit
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxs6("span", {
+                        children: [
+                          yLabel,
+                          ": ",
+                          formatY(item.y),
+                          " ",
+                          yUnit
+                        ]
+                      })
+                    ]
+                  }),
+                  className: "altertable-scatter-tooltip",
+                  style: {
+                    left: `${xScale.position(item.x)}%`,
+                    bottom: `${yScale.position(item.y)}%`
+                  },
+                  children: /* @__PURE__ */ jsx10("button", {
+                    "data-atbl-focus": "ring",
+                    "data-atbl-control": "action",
+                    type: "button",
+                    tabIndex: -1,
+                    className: "altertable-scatter-point",
+                    "aria-label": `${item.label}: ${xLabel} ${formatX(item.x)} ${xUnit}, ${yLabel} ${formatY(item.y)} ${yUnit}`,
+                    children: /* @__PURE__ */ jsx10("span", {})
+                  })
+                }, item.id))
+              ]
+            })
+          }),
+          /* @__PURE__ */ jsxs6("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 } from "react";
+import { jsx as jsx11, jsxs as jsxs7, Fragment as Fragment4 } from "react/jsx-runtime";
+function BarChart({
+  items,
+  unit,
+  ariaLabel,
+  formatValue = (value) => new Intl.NumberFormat().format(value)
+}) {
+  validateChartItems("bar", items);
+  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__ */ jsxs7("section", {
+    className: "altertable-selectable-bars",
+    "aria-label": ariaLabel,
+    children: [
+      items.length === 0 && /* @__PURE__ */ jsx11("span", {
+        children: "No data"
+      }),
+      /* @__PURE__ */ jsx11("div", {
+        className: "altertable-selectable-bars-scroll",
+        ref: scrollport,
+        children: items.map((item) => /* @__PURE__ */ jsx11(Tooltip2, {
+          variant: "chart",
+          content: /* @__PURE__ */ jsxs7(Fragment4, {
+            children: [
+              /* @__PURE__ */ jsx11("strong", {
+                children: item.label
+              }),
+              /* @__PURE__ */ jsxs7("span", {
+                children: [
+                  formatValue(item.value),
+                  " ",
+                  unit
+                ]
+              })
+            ]
+          }),
+          className: "altertable-chart-column",
+          children: /* @__PURE__ */ jsxs7("button", {
+            "data-atbl-focus": "ring",
+            "data-atbl-control": "action",
+            type: "button",
+            tabIndex: -1,
+            className: "altertable-selectable-bars-item",
+            "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}`,
+            children: [
+              /* @__PURE__ */ jsx11("span", {
+                className: "altertable-selectable-bars-area",
+                children: /* @__PURE__ */ jsx11("span", {
+                  className: "altertable-selectable-bars-bar",
+                  style: {
+                    height: `${Math.max(item.value > 0 ? 3 : 0, item.value / maximum * 100)}%`
+                  }
+                })
+              }),
+              /* @__PURE__ */ jsx11("span", {
+                className: "altertable-selectable-bars-label",
+                children: item.label
+              })
+            ]
+          })
+        }, item.id))
+      })
+    ]
+  });
+}
+export {
+  AboutData2 as AboutData,
+  AppIcon2 as AppIcon,
+  AreaChart,
+  BarChart,
+  Checkbox2 as Checkbox,
+  Combobox2 as Combobox,
+  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,
+  GettingStarted,
+  GlossaryDefinition,
+  GlossaryExplanation,
+  GradientScroll2 as GradientScroll,
+  HelpPopover2 as HelpPopover,
+  LineChart,
+  LiveControl2 as LiveControl,
+  MetricWidget2 as MetricWidget,
+  PieChart,
+  PresentStory2 as PresentStory,
+  ScatterChart,
+  SearchField2 as SearchField,
+  SearchMatch2 as SearchMatch,
+  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,
+  VisualizationWidget2 as VisualizationWidget,
+  injectDataAppShellStyles,
+  injectDataAppStyles2 as injectDataAppStyles,
+  searchItems2 as searchItems,
+  useAppVariables2 as useAppVariables,
+  useViewTab2 as useViewTab
+};
+
+//# debugId=44AF1347DDC5E0E164756E2164756E21