@silverpoint/react 0.3.0 → 0.7.0

package/README.md

@@ -5,7 +5,7 @@ drawing, with a fine silver line on a prepared ground, tone built from hatching,
 heightening on the live value. The hand-drawn irregularity is only in the ornament. The data
 geometry is exact, and every chart has a `precision` mode that turns the inking off.
 
-- 33 charts, each importable on its own subpath so you only ship the charts you use.
+- 60 charts, each importable on its own subpath so you only ship the charts you use.
 - React 18.2+ and 19. Client components (`"use client"`) and server entry points for React
   Server Components.
 - Accessible: an accessible name, a hidden data table, keyboard navigation, and a
@@ -201,7 +201,7 @@ export default function Page() {
 | `locale`, `numberFormat` | environment | Number formatting. |
 | `hatchFill` | `'tile'` | `'per-shape'` gives richer hatching at a much greater weight. |
 
-## The 33 charts
+## The 60 charts
 
 Every chart is available as `@silverpoint/react/<kebab-case-name>` (and from the barrel
 `@silverpoint/react`):
@@ -213,10 +213,154 @@ Every chart is available as `@silverpoint/react/<kebab-case-name>` (and from the
 `BubbleChart`, `HeatmapChart`, `TreemapChart`, `SankeyChart`, `ActivityGrid`, `CoxcombChart`,
 `WindRose`, `VolvelleChart`, `ChordRing`, `OrbitChart`.
 
+The second catalog, for distributions, comparisons, ranks and uncertainty (since `0.6.0`):
+
+`HistogramChart`, `EcdfChart`, `BoxPlotChart`, `ViolinChart`, `RidgelineChart`, `BeeswarmChart`,
+`LollipopChart`, `DumbbellChart`, `SlopeChart`, `BumpChart`, `ErrorBarChart`, `IntervalChart`,
+`DivergingBarChart`, `ConnectedScatterChart`.
+
+Hierarchies, parts of a whole, many dimensions and polar charts (since `0.6.0`):
+
+`WaffleChart`, `MarimekkoChart`, `SquarifiedTreemap`, `SunburstChart`, `TreeChart`,
+`ParallelCoordinatesChart`, `PolarLineChart`, `PolarScatterChart`.
+
+
+Fields and networks (since `0.6.0`):
+
+`DensityBinChart`, `ContourChart`, `DelaunayChart`, `VectorFieldChart`, `NetworkChart`.
+
+`RidgelineChart` needs `groupKey`, `DivergingBarChart` needs `levels` and `ParallelCoordinatesChart` needs `dimensions`, even with the demo dataset, which ignores them.
+
+`SquarifiedTreemap` and `SunburstChart` drill down under your control: pass `rootId` and update it from
+`onRootChange`, which a click, Enter or Space on a node emits with its id (its centre or frame emits
+the parent's, `null` for the top). The chart keeps no root of its own, so it renders the same on the server.
+
+`NetworkChart` lays out its nodes by force, the same on the server and in every browser for a given
+`seed`; give every node in `nodes` an `x` and a `y` and it draws them there instead.
+
 Each chart's own props (`xKey`, `valueKey`, `nameKey`…) are typed and documented in its
 `*Props` type. The [repository](https://github.com/ecrespo/silverpoint) holds the API
 specification and the documentation site with the gallery.
 
+## The 38 UI components
+
+Forms, navigation, data display and overlays, drawn in the same engraving language as the charts:
+an exact frame, tone by hatching, and the keyboard and screen-reader semantics of the native element.
+Import the UI stylesheet once, next to the ground's, and each component from
+`@silverpoint/react/ui/<kebab-case-name>` (or the barrel `@silverpoint/react/ui`):
+
+```tsx
+import '@silverpoint/grounds/styles.css';
+import '@silverpoint/grounds/ui.css';
+import { SpButton } from '@silverpoint/react/ui/button';
+import { SpInput } from '@silverpoint/react/ui/input';
+import { SpModal } from '@silverpoint/react/ui/modal';
+import { SpTable } from '@silverpoint/react/ui/table';
+
+const orders = [
+  { id: '1042', customer: 'Ada Lovelace', status: 'Shipped' },
+  { id: '1043', customer: 'Grace Hopper', status: 'Packed' },
+];
+
+export function Orders() {
+  return (
+    <>
+      <SpInput label="Customer" defaultValue="Ada" />
+      <SpTable
+        caption="Orders"
+        rowKey="id"
+        columns={[{ key: 'id', title: 'Order' }, { key: 'customer', title: 'Customer' }, { key: 'status', title: 'Status' }]}
+        data={orders}
+      />
+      <SpModal title="Edit order" trigger={<button type="button">Edit order</button>}>
+        Changes reach the workshop before the order is packed.
+        <SpButton>Save</SpButton>
+      </SpModal>
+    </>
+  );
+}
+```
+
+A value binds as React does it: `value` with `onChange`, or `defaultValue` (`defaultChecked`) for an
+uncontrolled one. Overlays take `open` with `onOpenChange`, or `defaultOpen`.
+
+The form and display components (since `0.3.0`):
+
+`SpButton`, `SpInput`, `SpCheckbox`, `SpRadioGroup`, `SpSwitch`, `SpSlider`, `SpRate`,
+`SpSegmented`, `SpTabs`, `SpSteps`, `SpCard`, `SpTag`, `SpBadge`, `SpDivider`, `SpProgress`, `SpAlert`,
+`SpSkeleton`.
+
+Composed components (since `0.7.0`):
+
+`SpSurface`, `SpGlyph`, `SpTable`, `SpPagination`, `SpBreadcrumb`, `SpAvatar`, `SpStatistic`,
+`SpDescriptions`, `SpTimelineList`, `SpCollapse`, `SpEmpty`, `SpResult`, `SpTextarea`, `SpInputNumber`.
+
+Overlays (since `0.7.0`), each opened by a trigger you write; toasts sit in an `SpToaster`:
+
+`SpModal`, `SpDrawer`, `SpPopover`, `SpTooltip`, `SpSelect`, `SpDropdownMenu`, `SpToast`.
+
+`SpTabs` holds `SpTabPanel`s, `SpCollapse` holds `SpCollapseItem`s and `SpAvatarGroup` holds `SpAvatar`s.
+Every component takes `ground`, `substrate`, `mode`, `size`, `palette`, `id` and `className`.
+
+## Palettes
+
+A palette recolours the ground: substrate, inks, rules, text and focus ring. Six presets ship on
+`@silverpoint/core/palettes` (`silverpoint`, `sanguine`, `sepia`, `ironGall`, `verdigris`, `indigo`),
+each computed for WCAG contrast; `checkPalette` checks one of yours the same way.
+
+Your adapter already depends on `@silverpoint/core`; name it in your own dependencies to import
+the presets (a strict package manager such as pnpm requires it):
+
+```sh
+npm install @silverpoint/core
+```
+
+```tsx
+import { sanguine } from '@silverpoint/core/palettes';
+import { SilverpointProvider } from '@silverpoint/react';
+import { LineChart } from '@silverpoint/react/line-chart';
+import { SpCard } from '@silverpoint/react/ui/card';
+
+export function Report() {
+  return (
+    <SilverpointProvider palette={sanguine}>
+      <LineChart title="Hits per hour" />
+      <SpCard title="Delivered this week">Every chart and component below draws in sanguine.</SpCard>
+      <LineChart title="One field changed" palette={{ ink: '#232C52' }} />
+    </SilverpointProvider>
+  );
+}
+```
+
+A nested provider or a `palette` prop overrides the outer palette field by field.
+
+## Timeline
+
+`SpTimeline` draws a [TimelineJS](https://timeline.knightlab.com/) story in the ground's hand. TimelineJS is an
+optional peer dependency: install it only if you use the timeline, and import its stylesheet before
+the ground's.
+
+```sh
+npm install @knight-lab/timelinejs
+```
+
+```tsx
+import '@knight-lab/timelinejs/dist/css/timeline.css';
+import '@silverpoint/grounds/timeline.css';
+import { SpTimeline } from '@silverpoint/react/timeline';
+
+const story = {
+  title: { text: { headline: 'Silverpoint', text: '<p>A line that cannot be erased.</p>' } },
+  events: [{ start_date: { year: 1400 }, text: { headline: "Cennini's handbook" } }],
+};
+
+export function History() {
+  return <SpTimeline data={story} height="560px" fallback={<p>The timeline could not be loaded.</p>} />;
+}
+```
+
+The server renders the surface and an empty mount; TimelineJS builds in the browser.
+
 ## Related packages
 
 [`@silverpoint/vue`](https://www.npmjs.com/package/@silverpoint/vue) ·

package/dist/activity-grid.js

@@ -1,10 +1,10 @@
 'use client';
 import {
   ActivityGrid
-} from "./chunk-6EFRIK7Q.js";
-import "./chunk-FBJLA3P7.js";
+} from "./chunk-K2JDM6SF.js";
+import "./chunk-QRQ4RFCB.js";
 import "./chunk-4GQ5X2WK.js";
-import "./chunk-SQ6GWXDK.js";
+import "./chunk-M2NKE3GQ.js";
 export {
   ActivityGrid
 };

package/dist/area-chart.js

@@ -1,10 +1,10 @@
 'use client';
 import {
   AreaChart
-} from "./chunk-U3LT444G.js";
-import "./chunk-FBJLA3P7.js";
+} from "./chunk-DL3FIRSO.js";
+import "./chunk-QRQ4RFCB.js";
 import "./chunk-4GQ5X2WK.js";
-import "./chunk-SQ6GWXDK.js";
+import "./chunk-M2NKE3GQ.js";
 export {
   AreaChart
 };

package/dist/bar-chart.js

@@ -1,10 +1,10 @@
 'use client';
 import {
   BarChart
-} from "./chunk-JPTK2AAT.js";
-import "./chunk-FBJLA3P7.js";
+} from "./chunk-7SZATSRO.js";
+import "./chunk-QRQ4RFCB.js";
 import "./chunk-4GQ5X2WK.js";
-import "./chunk-SQ6GWXDK.js";
+import "./chunk-M2NKE3GQ.js";
 export {
   BarChart
 };

package/dist/beeswarm-chart.d.ts

@@ -0,0 +1,10 @@
+import { C as ClientChart, I as InteractionProps } from './create-chart-BIG9Wtek.js';
+import { BeeswarmChartProps } from '@silverpoint/core';
+export { BeeswarmChartProps, ChartHandle } from '@silverpoint/core';
+import 'react';
+
+type ClientBeeswarmChartProps = BeeswarmChartProps & InteractionProps;
+/** `BeeswarmChart` (REQ-405): one point per observation, packed without overlap (API Spec §7.3). */
+declare const BeeswarmChart: ClientChart<BeeswarmChartProps>;
+
+export { BeeswarmChart, type ClientBeeswarmChartProps, InteractionProps };

package/dist/beeswarm-chart.js

@@ -0,0 +1,11 @@
+'use client';
+import {
+  BeeswarmChart
+} from "./chunk-5M4FS37X.js";
+import "./chunk-QRQ4RFCB.js";
+import "./chunk-4GQ5X2WK.js";
+import "./chunk-M2NKE3GQ.js";
+export {
+  BeeswarmChart
+};
+//# sourceMappingURL=beeswarm-chart.js.map

package/dist/beeswarm-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/box-plot-chart.d.ts

@@ -0,0 +1,10 @@
+import { C as ClientChart, I as InteractionProps } from './create-chart-BIG9Wtek.js';
+import { BoxPlotChartProps } from '@silverpoint/core';
+export { BoxPlotChartProps, ChartHandle } from '@silverpoint/core';
+import 'react';
+
+type ClientBoxPlotChartProps = BoxPlotChartProps & InteractionProps;
+/** `BoxPlotChart` (REQ-402): quartiles, median, Tukey whiskers and outliers per group (API Spec §7.3). */
+declare const BoxPlotChart: ClientChart<BoxPlotChartProps>;
+
+export { BoxPlotChart, type ClientBoxPlotChartProps, InteractionProps };

package/dist/box-plot-chart.js

@@ -0,0 +1,11 @@
+'use client';
+import {
+  BoxPlotChart
+} from "./chunk-6BZ2752M.js";
+import "./chunk-QRQ4RFCB.js";
+import "./chunk-4GQ5X2WK.js";
+import "./chunk-M2NKE3GQ.js";
+export {
+  BoxPlotChart
+};
+//# sourceMappingURL=box-plot-chart.js.map

package/dist/box-plot-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/bubble-chart.js

@@ -1,10 +1,10 @@
 'use client';
 import {
   BubbleChart
-} from "./chunk-3BREGZ7C.js";
-import "./chunk-FBJLA3P7.js";
+} from "./chunk-QJLESIWB.js";
+import "./chunk-QRQ4RFCB.js";
 import "./chunk-4GQ5X2WK.js";
-import "./chunk-SQ6GWXDK.js";
+import "./chunk-M2NKE3GQ.js";
 export {
   BubbleChart
 };

package/dist/bullet-chart.js

@@ -1,10 +1,10 @@
 'use client';
 import {
   BulletChart
-} from "./chunk-6S6VKQ3E.js";
-import "./chunk-FBJLA3P7.js";
+} from "./chunk-SZHYT257.js";
+import "./chunk-QRQ4RFCB.js";
 import "./chunk-4GQ5X2WK.js";
-import "./chunk-SQ6GWXDK.js";
+import "./chunk-M2NKE3GQ.js";
 export {
   BulletChart
 };

package/dist/bump-chart.d.ts

@@ -0,0 +1,10 @@
+import { C as ClientChart, I as InteractionProps } from './create-chart-BIG9Wtek.js';
+import { BumpChartProps } from '@silverpoint/core';
+export { BumpChartProps, ChartHandle } from '@silverpoint/core';
+import 'react';
+
+type ClientBumpChartProps = BumpChartProps & InteractionProps;
+/** `BumpChart` (REQ-409): the rank of each series at each x (API Spec §7.3). */
+declare const BumpChart: ClientChart<BumpChartProps>;
+
+export { BumpChart, type ClientBumpChartProps, InteractionProps };

package/dist/bump-chart.js

@@ -0,0 +1,11 @@
+'use client';
+import {
+  BumpChart
+} from "./chunk-2HDGFK6O.js";
+import "./chunk-QRQ4RFCB.js";
+import "./chunk-4GQ5X2WK.js";
+import "./chunk-M2NKE3GQ.js";
+export {
+  BumpChart
+};
+//# sourceMappingURL=bump-chart.js.map

package/dist/bump-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/candlestick-chart.js

@@ -1,10 +1,10 @@
 'use client';
 import {
   CandlestickChart
-} from "./chunk-KVOBNPDN.js";
-import "./chunk-FBJLA3P7.js";
+} from "./chunk-ELNPDHOC.js";
+import "./chunk-QRQ4RFCB.js";
 import "./chunk-4GQ5X2WK.js";
-import "./chunk-SQ6GWXDK.js";
+import "./chunk-M2NKE3GQ.js";
 export {
   CandlestickChart
 };

package/dist/chord-ring.js

@@ -1,10 +1,10 @@
 'use client';
 import {
   ChordRing
-} from "./chunk-X2F56RYM.js";
-import "./chunk-FBJLA3P7.js";
+} from "./chunk-CAFLXUSL.js";
+import "./chunk-QRQ4RFCB.js";
 import "./chunk-4GQ5X2WK.js";
-import "./chunk-SQ6GWXDK.js";
+import "./chunk-M2NKE3GQ.js";
 export {
   ChordRing
 };

package/dist/{chunk-WZZA2IGN.js → chunk-25BXOLN7.js}

@@ -3,7 +3,7 @@ import {
   renderUi,
   useUi,
   useValue
-} from "./chunk-DO4VUIUU.js";
+} from "./chunk-DX6FUHGB.js";
 
 // src/ui/checkbox.tsx
 import { uiCheckboxView } from "@silverpoint/core/ui";
@@ -41,4 +41,4 @@ var SpCheckbox = forwardRef(function SpCheckbox2({ checked, defaultChecked, onCh
 export {
   SpCheckbox
 };
-//# sourceMappingURL=chunk-WZZA2IGN.js.map
+//# sourceMappingURL=chunk-25BXOLN7.js.map

package/dist/chunk-26PNMZ4N.js

@@ -0,0 +1,13 @@
+'use client';
+import {
+  createClientChart
+} from "./chunk-QRQ4RFCB.js";
+
+// src/density-bin-chart.tsx
+import { densityBinChart } from "@silverpoint/core/catalog";
+var DensityBinChart = createClientChart(densityBinChart);
+
+export {
+  DensityBinChart
+};
+//# sourceMappingURL=chunk-26PNMZ4N.js.map

package/dist/chunk-26PNMZ4N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/density-bin-chart.tsx"],"sourcesContent":["import { densityBinChart } from '@silverpoint/core/catalog';\nimport type { DensityBinChartProps } from '@silverpoint/core';\nimport { createClientChart, type InteractionProps } from './create-chart';\n\nexport type { ChartHandle, InteractionProps } from './create-chart';\nexport type { DensityBinChartProps } from '@silverpoint/core';\n\nexport type ClientDensityBinChartProps = DensityBinChartProps & InteractionProps;\n\n/** `DensityBinChart` (REQ-422): x-y points counted in two-dimensional bins (API Spec §7.3). */\nexport const DensityBinChart = createClientChart<DensityBinChartProps>(densityBinChart);\n"],"mappings":";;;;;;AAAA,SAAS,uBAAuB;AAUzB,IAAM,kBAAkB,kBAAwC,eAAe;","names":[]}

package/dist/chunk-27ILYIHO.js

@@ -0,0 +1,56 @@
+'use client';
+import {
+  useListKeys
+} from "./chunk-3ZO7VEHS.js";
+import {
+  useOpen,
+  useOverlay
+} from "./chunk-G3PPUBI5.js";
+import {
+  renderUi,
+  useUi,
+  useValue
+} from "./chunk-DX6FUHGB.js";
+
+// src/ui/select.tsx
+import { uiSelectedKey, uiSelectItems, uiSelectView } from "@silverpoint/core/ui";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+var SpSelect = forwardRef(function SpSelect2({ value, defaultValue, onChange, open, defaultOpen, onOpenChange, dashboardCell, ...props }, forwarded) {
+  const [chosen, choose] = useValue(value, defaultValue ?? null, onChange);
+  const [isOpen, setOpen] = useOpen({ open, defaultOpen, onOpenChange });
+  const popover = useRef(null);
+  const trigger = useRef(null);
+  useImperativeHandle(forwarded, () => trigger.current, []);
+  useOverlay(popover, "popover", isOpen, setOpen, { place: { side: "bottom", align: "start" } });
+  const items = uiSelectItems(props.items);
+  const selected = uiSelectedKey(items, chosen, "none");
+  const list = useListKeys(items, "listbox", isOpen, items.findIndex((item) => item.key === selected));
+  const view = uiSelectView(props, useUi(props, dashboardCell), { value: chosen, open: isOpen, active: list.activeKey });
+  const close = () => setOpen(false);
+  const select = (key) => {
+    if (key !== void 0 && key !== chosen) choose(key);
+    close();
+  };
+  const onKeyDown = (event) => {
+    const result = list.key(event);
+    if (!result) return;
+    if (result.intent === "open") setOpen(true);
+    else if (result.intent === "close") close();
+    else if (result.intent === "select") select(result.key);
+  };
+  const bound = {
+    trigger: () => ({ ref: trigger, onKeyDown, onKeyUp: list.keyUp, onClick: () => isOpen ? close() : setOpen(true) }),
+    popover: () => ({ ref: popover }),
+    option: (node) => ({
+      // The trigger keeps focus: the option is pointed at, never focused.
+      onPointerDown: (event) => event.preventDefault(),
+      onClick: () => node.attrs["aria-disabled"] !== "true" && select(node.attrs["data-key"])
+    })
+  };
+  return renderUi(view, { bound });
+});
+
+export {
+  SpSelect
+};
+//# sourceMappingURL=chunk-27ILYIHO.js.map

package/dist/chunk-27ILYIHO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/select.tsx"],"sourcesContent":["import { uiSelectedKey, uiSelectItems, uiSelectView, type SpSelectProps as CoreProps, type UiElement } from '@silverpoint/core/ui';\nimport { forwardRef, useImperativeHandle, useRef, type KeyboardEvent, type ReactElement } from 'react';\nimport { useUi, useValue, type UiCellProps } from './base';\nimport { useOpen, useOverlay, type OverlayOpenProps } from './overlay';\nimport { useListKeys } from './list';\nimport { renderUi } from './render';\n\nexport interface SpSelectProps extends CoreProps, OverlayOpenProps, UiCellProps {\n  /** Controlled key; `null` is none chosen. */\n  readonly value?: string | null;\n  readonly defaultValue?: string | null;\n  /** The key chosen, not the DOM event (REQ-322). */\n  readonly onChange?: (value: string) => void;\n}\n\n/**\n * `SpSelect`: the APG select-only combobox (REQ-494, DD-039). Focus stays on the trigger, which\n * points at the active option; every key goes through `uiListKey` and `uiTypeahead`. Its ref is the\n * trigger.\n */\nexport const SpSelect = forwardRef<HTMLButtonElement, SpSelectProps>(function SpSelect({ value, defaultValue, onChange, open, defaultOpen, onOpenChange, dashboardCell, ...props }, forwarded) {\n  const [chosen, choose] = useValue<string | null>(value, defaultValue ?? null, onChange as (next: string | null) => void);\n  const [isOpen, setOpen] = useOpen({ open, defaultOpen, onOpenChange });\n  const popover = useRef<HTMLDivElement>(null);\n  const trigger = useRef<HTMLButtonElement>(null);\n  useImperativeHandle(forwarded, () => trigger.current!, []);\n  useOverlay(popover, 'popover', isOpen, setOpen, { place: { side: 'bottom', align: 'start' } });\n\n  const items = uiSelectItems(props.items);\n  const selected = uiSelectedKey(items, chosen, 'none');\n  const list = useListKeys(items, 'listbox', isOpen, items.findIndex((item) => item.key === selected));\n  const view = uiSelectView(props, useUi(props, dashboardCell), { value: chosen, open: isOpen, active: list.activeKey });\n\n  const close = () => setOpen(false);\n  const select = (key: string | undefined) => {\n    if (key !== undefined && key !== chosen) choose(key);\n    close();\n  };\n  const onKeyDown = (event: KeyboardEvent) => {\n    const result = list.key(event);\n    if (!result) return;\n    if (result.intent === 'open') setOpen(true);\n    else if (result.intent === 'close') close();\n    else if (result.intent === 'select') select(result.key);\n  };\n  const bound = {\n    trigger: () => ({ ref: trigger, onKeyDown, onKeyUp: list.keyUp, onClick: () => (isOpen ? close() : setOpen(true)) }),\n    popover: () => ({ ref: popover }),\n    option: (node: UiElement) => ({\n      // The trigger keeps focus: the option is pointed at, never focused.\n      onPointerDown: (event: { preventDefault(): void }) => event.preventDefault(),\n      onClick: () => node.attrs['aria-disabled'] !== 'true' && select(node.attrs['data-key'] as string),\n    }),\n  };\n  return renderUi(view, { bound }) as ReactElement;\n});\n\n"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAS,eAAe,eAAe,oBAAqE;AAC5G,SAAS,YAAY,qBAAqB,cAAqD;AAmBxF,IAAM,WAAW,WAA6C,SAASA,UAAS,EAAE,OAAO,cAAc,UAAU,MAAM,aAAa,cAAc,eAAe,GAAG,MAAM,GAAG,WAAW;AAC7L,QAAM,CAAC,QAAQ,MAAM,IAAI,SAAwB,OAAO,gBAAgB,MAAM,QAAyC;AACvH,QAAM,CAAC,QAAQ,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,aAAa,CAAC;AACrE,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,UAAU,OAA0B,IAAI;AAC9C,sBAAoB,WAAW,MAAM,QAAQ,SAAU,CAAC,CAAC;AACzD,aAAW,SAAS,WAAW,QAAQ,SAAS,EAAE,OAAO,EAAE,MAAM,UAAU,OAAO,QAAQ,EAAE,CAAC;AAE7F,QAAM,QAAQ,cAAc,MAAM,KAAK;AACvC,QAAM,WAAW,cAAc,OAAO,QAAQ,MAAM;AACpD,QAAM,OAAO,YAAY,OAAO,WAAW,QAAQ,MAAM,UAAU,CAAC,SAAS,KAAK,QAAQ,QAAQ,CAAC;AACnG,QAAM,OAAO,aAAa,OAAO,MAAM,OAAO,aAAa,GAAG,EAAE,OAAO,QAAQ,MAAM,QAAQ,QAAQ,KAAK,UAAU,CAAC;AAErH,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,CAAC,QAA4B;AAC1C,QAAI,QAAQ,UAAa,QAAQ,OAAQ,QAAO,GAAG;AACnD,UAAM;AAAA,EACR;AACA,QAAM,YAAY,CAAC,UAAyB;AAC1C,UAAM,SAAS,KAAK,IAAI,KAAK;AAC7B,QAAI,CAAC,OAAQ;AACb,QAAI,OAAO,WAAW,OAAQ,SAAQ,IAAI;AAAA,aACjC,OAAO,WAAW,QAAS,OAAM;AAAA,aACjC,OAAO,WAAW,SAAU,QAAO,OAAO,GAAG;AAAA,EACxD;AACA,QAAM,QAAQ;AAAA,IACZ,SAAS,OAAO,EAAE,KAAK,SAAS,WAAW,SAAS,KAAK,OAAO,SAAS,MAAO,SAAS,MAAM,IAAI,QAAQ,IAAI,EAAG;AAAA,IAClH,SAAS,OAAO,EAAE,KAAK,QAAQ;AAAA,IAC/B,QAAQ,CAAC,UAAqB;AAAA;AAAA,MAE5B,eAAe,CAAC,UAAsC,MAAM,eAAe;AAAA,MAC3E,SAAS,MAAM,KAAK,MAAM,eAAe,MAAM,UAAU,OAAO,KAAK,MAAM,UAAU,CAAW;AAAA,IAClG;AAAA,EACF;AACA,SAAO,SAAS,MAAM,EAAE,MAAM,CAAC;AACjC,CAAC;","names":["SpSelect"]}

package/dist/chunk-2HDGFK6O.js

@@ -0,0 +1,13 @@
+'use client';
+import {
+  createClientChart
+} from "./chunk-QRQ4RFCB.js";
+
+// src/bump-chart.tsx
+import { bumpChart } from "@silverpoint/core/catalog";
+var BumpChart = createClientChart(bumpChart);
+
+export {
+  BumpChart
+};
+//# sourceMappingURL=chunk-2HDGFK6O.js.map

package/dist/chunk-2HDGFK6O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/bump-chart.tsx"],"sourcesContent":["import { bumpChart } from '@silverpoint/core/catalog';\nimport type { BumpChartProps } from '@silverpoint/core';\nimport { createClientChart, type InteractionProps } from './create-chart';\n\nexport type { ChartHandle, InteractionProps } from './create-chart';\nexport type { BumpChartProps } from '@silverpoint/core';\n\nexport type ClientBumpChartProps = BumpChartProps & InteractionProps;\n\n/** `BumpChart` (REQ-409): the rank of each series at each x (API Spec §7.3). */\nexport const BumpChart = createClientChart<BumpChartProps>(bumpChart);\n"],"mappings":";;;;;;AAAA,SAAS,iBAAiB;AAUnB,IAAM,YAAY,kBAAkC,SAAS;","names":[]}

package/dist/chunk-2JLWAB4R.js

@@ -0,0 +1,32 @@
+'use client';
+import {
+  useOpen,
+  useOverlay,
+  useTrigger
+} from "./chunk-G3PPUBI5.js";
+import {
+  renderUi,
+  useUi
+} from "./chunk-DX6FUHGB.js";
+
+// src/ui/drawer.tsx
+import { uiDrawerView } from "@silverpoint/core/ui";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { Fragment, jsxs } from "react/jsx-runtime";
+var SpDrawer = forwardRef(function SpDrawer2({ trigger, children, footer, open, defaultOpen, onOpenChange, dashboardCell, ...props }, forwarded) {
+  const [isOpen, set, latest] = useOpen({ open, defaultOpen, onOpenChange });
+  const ref = useRef(null);
+  useImperativeHandle(forwarded, () => ref.current, []);
+  useOverlay(ref, props.modal === false ? "dialog" : "modal", isOpen, set, { dismissible: props.dismissible });
+  const view = uiDrawerView(props, useUi(props, dashboardCell), { open: isOpen }, { footer: footer != null });
+  const dialog = renderUi(view, { root: { ref }, close: { onClick: () => set(false) }, slots: { content: children, footer } });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    useTrigger(trigger, "dialog", props.id, latest, set),
+    dialog
+  ] });
+});
+
+export {
+  SpDrawer
+};
+//# sourceMappingURL=chunk-2JLWAB4R.js.map

package/dist/chunk-2JLWAB4R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/drawer.tsx"],"sourcesContent":["import { uiDrawerView, type SpDrawerProps as CoreProps } from '@silverpoint/core/ui';\nimport { forwardRef, useImperativeHandle, useRef, type ReactElement, type ReactNode } from 'react';\nimport { useUi, type UiCellProps } from './base';\nimport { useOpen, useOverlay, useTrigger, type OverlayOpenProps } from './overlay';\nimport { renderUi } from './render';\n\nexport interface SpDrawerProps extends CoreProps, OverlayOpenProps, UiCellProps {\n  /** The element that opens it, cloned with `aria-haspopup`, `aria-expanded` and `aria-controls`. */\n  readonly trigger?: ReactElement;\n  readonly children?: ReactNode;\n  readonly footer?: ReactNode;\n}\n\n/** `SpDrawer`: the Modal's dialog on a logical side; `modal: false` opens it with `show()` (REQ-491). */\nexport const SpDrawer = forwardRef<HTMLDialogElement, SpDrawerProps>(function SpDrawer({ trigger, children, footer, open, defaultOpen, onOpenChange, dashboardCell, ...props }, forwarded) {\n  const [isOpen, set, latest] = useOpen({ open, defaultOpen, onOpenChange });\n  const ref = useRef<HTMLDialogElement>(null);\n  useImperativeHandle(forwarded, () => ref.current!, []);\n  useOverlay(ref, props.modal === false ? 'dialog' : 'modal', isOpen, set, { dismissible: props.dismissible });\n  const view = uiDrawerView(props, useUi(props, dashboardCell), { open: isOpen }, { footer: footer != null });\n  const dialog = renderUi(view, { root: { ref }, close: { onClick: () => set(false) }, slots: { content: children, footer } });\n  return (\n    <>\n      {useTrigger(trigger, 'dialog', props.id, latest, set)}\n      {dialog}\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,oBAAqD;AAC9D,SAAS,YAAY,qBAAqB,cAAiD;AAqBvF;AARG,IAAM,WAAW,WAA6C,SAASA,UAAS,EAAE,SAAS,UAAU,QAAQ,MAAM,aAAa,cAAc,eAAe,GAAG,MAAM,GAAG,WAAW;AACzL,QAAM,CAAC,QAAQ,KAAK,MAAM,IAAI,QAAQ,EAAE,MAAM,aAAa,aAAa,CAAC;AACzE,QAAM,MAAM,OAA0B,IAAI;AAC1C,sBAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AACrD,aAAW,KAAK,MAAM,UAAU,QAAQ,WAAW,SAAS,QAAQ,KAAK,EAAE,aAAa,MAAM,YAAY,CAAC;AAC3G,QAAM,OAAO,aAAa,OAAO,MAAM,OAAO,aAAa,GAAG,EAAE,MAAM,OAAO,GAAG,EAAE,QAAQ,UAAU,KAAK,CAAC;AAC1G,QAAM,SAAS,SAAS,MAAM,EAAE,MAAM,EAAE,IAAI,GAAG,OAAO,EAAE,SAAS,MAAM,IAAI,KAAK,EAAE,GAAG,OAAO,EAAE,SAAS,UAAU,OAAO,EAAE,CAAC;AAC3H,SACE,iCACG;AAAA,eAAW,SAAS,UAAU,MAAM,IAAI,QAAQ,GAAG;AAAA,IACnD;AAAA,KACH;AAEJ,CAAC;","names":["SpDrawer"]}

package/dist/{chunk-I72JGA6Q.js → chunk-2NBHAILL.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/volvelle-chart.tsx
 import { volvelleChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var VolvelleChart = createClientChart(volvelleChart);
 export {
   VolvelleChart
 };
-//# sourceMappingURL=chunk-I72JGA6Q.js.map
+//# sourceMappingURL=chunk-2NBHAILL.js.map

package/dist/chunk-2TDJIHGW.js

@@ -0,0 +1,39 @@
+'use client';
+import {
+  renderUi,
+  useUi,
+  useValue
+} from "./chunk-DX6FUHGB.js";
+
+// src/ui/input-number.tsx
+import { uiInputNumberView, uiNumberStep, uiNumberValue } from "@silverpoint/core/ui";
+import { forwardRef, useState } from "react";
+var SpInputNumber = forwardRef(function SpInputNumber2({ value, defaultValue, onChange, dashboardCell, ...props }, ref) {
+  const [current, set] = useValue(value, defaultValue ?? null, onChange);
+  const [draft, setDraft] = useState(null);
+  const view = uiInputNumberView(props, useUi(props, dashboardCell), { value: current });
+  const commit = () => {
+    if (draft === null) return;
+    setDraft(null);
+    set(draft.trim() === "" ? null : uiNumberValue(Number(draft), props).value);
+  };
+  const native = (node) => ({
+    ref,
+    value: draft ?? node.attrs.value,
+    onChange: (event) => setDraft(event.target.value),
+    onBlur: commit,
+    onKeyDown: (event) => event.key === "Enter" && commit()
+  });
+  const stepper = (node) => ({
+    onClick: () => {
+      setDraft(null);
+      set(uiNumberStep(current, node.attrs["data-step"] === "1" ? 1 : -1, props));
+    }
+  });
+  return renderUi(view, { native, bound: { stepper } });
+});
+
+export {
+  SpInputNumber
+};
+//# sourceMappingURL=chunk-2TDJIHGW.js.map

package/dist/chunk-2TDJIHGW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/input-number.tsx"],"sourcesContent":["import { uiInputNumberView, uiNumberStep, uiNumberValue, type SpInputNumberProps as CoreProps, type UiElement } from '@silverpoint/core/ui';\nimport { forwardRef, useState, type ChangeEvent, type KeyboardEvent, type ReactElement } from 'react';\nimport { useUi, useValue, type UiCellProps } from './base';\nimport { renderUi } from './render';\n\nexport interface SpInputNumberProps extends CoreProps, UiCellProps {\n  /** Controlled value; `null` is an empty field. */\n  readonly value?: number | null;\n  readonly defaultValue?: number | null;\n  /** The committed value, clamped and rounded by the core; `null` when emptied (REQ-485). */\n  readonly onChange?: (value: number | null) => void;\n}\n\n/**\n * `SpInputNumber`: a native number input between exact steppers (REQ-485, REQ-488). What is typed\n * is held as text until committed (blur or Enter), so a bound never interrupts typing; the\n * committed value is the core's `uiNumberValue`, a stepper's the core's `uiNumberStep`.\n */\nexport const SpInputNumber = forwardRef<HTMLInputElement, SpInputNumberProps>(function SpInputNumber({ value, defaultValue, onChange, dashboardCell, ...props }, ref) {\n  const [current, set] = useValue(value, defaultValue ?? null, onChange);\n  const [draft, setDraft] = useState<string | null>(null);\n  const view = uiInputNumberView(props, useUi(props, dashboardCell), { value: current });\n  const commit = () => {\n    if (draft === null) return;\n    setDraft(null);\n    set(draft.trim() === '' ? null : uiNumberValue(Number(draft), props).value);\n  };\n  const native = (node: UiElement) => ({\n    ref,\n    value: draft ?? node.attrs.value,\n    onChange: (event: ChangeEvent<HTMLInputElement>) => setDraft(event.target.value),\n    onBlur: commit,\n    onKeyDown: (event: KeyboardEvent) => event.key === 'Enter' && commit(),\n  });\n  const stepper = (node: UiElement) => ({\n    onClick: () => {\n      setDraft(null);\n      set(uiNumberStep(current, node.attrs['data-step'] === '1' ? 1 : -1, props));\n    },\n  });\n  return renderUi(view, { native, bound: { stepper } }) as ReactElement;\n});\n"],"mappings":";;;;;;;;AAAA,SAAS,mBAAmB,cAAc,qBAA2E;AACrH,SAAS,YAAY,gBAAyE;AAiBvF,IAAM,gBAAgB,WAAiD,SAASA,eAAc,EAAE,OAAO,cAAc,UAAU,eAAe,GAAG,MAAM,GAAG,KAAK;AACpK,QAAM,CAAC,SAAS,GAAG,IAAI,SAAS,OAAO,gBAAgB,MAAM,QAAQ;AACrE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,OAAO,kBAAkB,OAAO,MAAM,OAAO,aAAa,GAAG,EAAE,OAAO,QAAQ,CAAC;AACrF,QAAM,SAAS,MAAM;AACnB,QAAI,UAAU,KAAM;AACpB,aAAS,IAAI;AACb,QAAI,MAAM,KAAK,MAAM,KAAK,OAAO,cAAc,OAAO,KAAK,GAAG,KAAK,EAAE,KAAK;AAAA,EAC5E;AACA,QAAM,SAAS,CAAC,UAAqB;AAAA,IACnC;AAAA,IACA,OAAO,SAAS,KAAK,MAAM;AAAA,IAC3B,UAAU,CAAC,UAAyC,SAAS,MAAM,OAAO,KAAK;AAAA,IAC/E,QAAQ;AAAA,IACR,WAAW,CAAC,UAAyB,MAAM,QAAQ,WAAW,OAAO;AAAA,EACvE;AACA,QAAM,UAAU,CAAC,UAAqB;AAAA,IACpC,SAAS,MAAM;AACb,eAAS,IAAI;AACb,UAAI,aAAa,SAAS,KAAK,MAAM,WAAW,MAAM,MAAM,IAAI,IAAI,KAAK,CAAC;AAAA,IAC5E;AAAA,EACF;AACA,SAAO,SAAS,MAAM,EAAE,QAAQ,OAAO,EAAE,QAAQ,EAAE,CAAC;AACtD,CAAC;","names":["SpInputNumber"]}

package/dist/{chunk-GUKXFITX.js → chunk-3MQJA564.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/scatter-chart.tsx
 import { scatterChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var ScatterChart = createClientChart(scatterChart);
 export {
   ScatterChart
 };
-//# sourceMappingURL=chunk-GUKXFITX.js.map
+//# sourceMappingURL=chunk-3MQJA564.js.map

package/dist/{chunk-LSA5XU52.js → chunk-3UD7DUEM.js}

@@ -3,7 +3,7 @@ import {
   renderUi,
   textOf,
   useUi
-} from "./chunk-DO4VUIUU.js";
+} from "./chunk-DX6FUHGB.js";
 
 // src/ui/tag.tsx
 import { uiTagView } from "@silverpoint/core/ui";
@@ -15,4 +15,4 @@ function SpTag({ children, onClose, dashboardCell, ...props }) {
 export {
   SpTag
 };
-//# sourceMappingURL=chunk-LSA5XU52.js.map
+//# sourceMappingURL=chunk-3UD7DUEM.js.map