@silverpoint/react 0.6.0 → 0.8.0

package/README.md

@@ -242,6 +242,125 @@ Each chart's own props (`xKey`, `valueKey`, `nameKey`…) are typed and document
 `*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.js

@@ -1,10 +1,10 @@
 'use client';
 import {
   BeeswarmChart
-} from "./chunk-Y4V5AZ32.js";
-import "./chunk-FBJLA3P7.js";
+} from "./chunk-5M4FS37X.js";
+import "./chunk-QRQ4RFCB.js";
 import "./chunk-4GQ5X2WK.js";
-import "./chunk-SQ6GWXDK.js";
+import "./chunk-M2NKE3GQ.js";
 export {
   BeeswarmChart
 };

package/dist/box-plot-chart.js

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

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.js

@@ -1,10 +1,10 @@
 'use client';
 import {
   BumpChart
-} from "./chunk-5FYPFU6B.js";
-import "./chunk-FBJLA3P7.js";
+} from "./chunk-2HDGFK6O.js";
+import "./chunk-QRQ4RFCB.js";
 import "./chunk-4GQ5X2WK.js";
-import "./chunk-SQ6GWXDK.js";
+import "./chunk-M2NKE3GQ.js";
 export {
   BumpChart
 };

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-IHWEQR42.js → chunk-26PNMZ4N.js}

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

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-5FYPFU6B.js → chunk-2HDGFK6O.js}

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

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

package/dist/chunk-3ZO7VEHS.js

@@ -0,0 +1,59 @@
+'use client';
+
+// src/ui/list.ts
+import { uiListKey, uiTypeahead } from "@silverpoint/core/ui";
+import { useEffect, useRef, useState } from "react";
+var HANDLED = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp", "Enter", " ", "Escape"]);
+var TYPEAHEAD_RESET = 500;
+function useListKeys(items, kind, open, from) {
+  const [active, setActive] = useState(null);
+  const [wasOpen, setWasOpen] = useState(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (!open) setActive(null);
+  }
+  const buffer = useRef("");
+  const timer = useRef(void 0);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const disabled = items.map((item) => item.disabled === true);
+  const count = items.length;
+  const opening = uiListKey({ active: from, count, disabled, open: false }, "Enter", kind).active;
+  const shown = open ? active ?? opening : -1;
+  const step = (index, intent) => {
+    setActive(index);
+    return { intent, key: items[index]?.key };
+  };
+  return {
+    activeKey: items[shown]?.key ?? null,
+    key(event) {
+      const current = open ? shown : from;
+      const typed = event.key;
+      if (typed.length === 1 && (typed !== " " || buffer.current !== "")) {
+        event.preventDefault();
+        buffer.current += typed;
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => buffer.current = "", TYPEAHEAD_RESET);
+        const found = uiTypeahead(
+          items.map((item) => item.label),
+          disabled,
+          buffer.current,
+          current
+        );
+        return found < 0 ? {} : step(found, open ? void 0 : "open");
+      }
+      if (HANDLED.has(typed)) event.preventDefault();
+      const result = uiListKey({ active: current, count, disabled, open }, typed, kind);
+      if (result.intent === void 0 && result.active === current) return HANDLED.has(typed) ? {} : void 0;
+      return step(result.active, result.intent);
+    },
+    keyUp(event) {
+      if (event.key === " ") event.preventDefault();
+    },
+    activate: setActive
+  };
+}
+
+export {
+  useListKeys
+};
+//# sourceMappingURL=chunk-3ZO7VEHS.js.map

package/dist/chunk-3ZO7VEHS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/list.ts"],"sourcesContent":["import { uiListKey, uiTypeahead, type UiItem } from '@silverpoint/core/ui';\nimport { useEffect, useRef, useState, type KeyboardEvent } from 'react';\n\n/** Keys a list overlay answers; their default (scrolling, a button's click) is cancelled. */\nconst HANDLED: ReadonlySet<string> = new Set(['ArrowDown', 'ArrowUp', 'Home', 'End', 'PageDown', 'PageUp', 'Enter', ' ', 'Escape']);\n/** The typeahead buffer clears this long after the last key, ms (DD-039). */\nconst TYPEAHEAD_RESET = 500;\n\nexport interface ListStep {\n  readonly intent?: 'open' | 'close' | 'select';\n  /** The active item's key after the step. */\n  readonly key?: string;\n}\n\nexport interface ListKeys {\n  /** The active item of the open list; `null` when it is closed. */\n  readonly activeKey: string | null;\n  /** One key through `uiListKey`, or a character through `uiTypeahead`; `undefined` when the list does not answer it. */\n  key(event: KeyboardEvent): ListStep | undefined;\n  /** Cancels a Space's keyup, so no click follows the key that already acted. */\n  keyUp(event: KeyboardEvent): void;\n  /** Makes an item active: a list opened by a click starts on its first. */\n  activate(index: number): void;\n}\n\n/**\n * The keyboard of a Select or a Menu (REQ-494, REQ-495, DD-039): the active item and the typeahead\n * buffer; every transition is the core's. The list opens on `from` (the chosen option) or its first\n * enabled item, as `uiListKey` says, and forgets its active item when it closes.\n */\nexport function useListKeys(items: readonly UiItem[], kind: 'listbox' | 'menu', open: boolean, from: number): ListKeys {\n  const [active, setActive] = useState<number | null>(null);\n  const [wasOpen, setWasOpen] = useState(open);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    // A key that opens the list has just set its active item; a close forgets it.\n    if (!open) setActive(null);\n  }\n  const buffer = useRef('');\n  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);\n  useEffect(() => () => clearTimeout(timer.current), []);\n  const disabled = items.map((item) => item.disabled === true);\n  const count = items.length;\n  const opening = uiListKey({ active: from, count, disabled, open: false }, 'Enter', kind).active;\n  const shown = open ? (active ?? opening) : -1;\n\n  const step = (index: number, intent?: ListStep['intent']): ListStep => {\n    setActive(index);\n    return { intent, key: items[index]?.key };\n  };\n  return {\n    activeKey: items[shown]?.key ?? null,\n    key(event) {\n      const current = open ? shown : from;\n      const typed = event.key;\n      if (typed.length === 1 && (typed !== ' ' || buffer.current !== '')) {\n        event.preventDefault();\n        buffer.current += typed;\n        clearTimeout(timer.current);\n        timer.current = setTimeout(() => (buffer.current = ''), TYPEAHEAD_RESET);\n        const found = uiTypeahead(\n          items.map((item) => item.label),\n          disabled,\n          buffer.current,\n          current,\n        );\n        return found < 0 ? {} : step(found, open ? undefined : 'open');\n      }\n      if (HANDLED.has(typed)) event.preventDefault();\n      const result = uiListKey({ active: current, count, disabled, open }, typed, kind);\n      if (result.intent === undefined && result.active === current) return HANDLED.has(typed) ? {} : undefined;\n      return step(result.active, result.intent);\n    },\n    keyUp(event) {\n      if (event.key === ' ') event.preventDefault();\n    },\n    activate: setActive,\n  };\n}\n"],"mappings":";;;AAAA,SAAS,WAAW,mBAAgC;AACpD,SAAS,WAAW,QAAQ,gBAAoC;AAGhE,IAAM,UAA+B,oBAAI,IAAI,CAAC,aAAa,WAAW,QAAQ,OAAO,YAAY,UAAU,SAAS,KAAK,QAAQ,CAAC;AAElI,IAAM,kBAAkB;AAwBjB,SAAS,YAAY,OAA0B,MAA0B,MAAe,MAAwB;AACrH,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AACxD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,MAAI,SAAS,SAAS;AACpB,eAAW,IAAI;AAEf,QAAI,CAAC,KAAM,WAAU,IAAI;AAAA,EAC3B;AACA,QAAM,SAAS,OAAO,EAAE;AACxB,QAAM,QAAQ,OAAsC,MAAS;AAC7D,YAAU,MAAM,MAAM,aAAa,MAAM,OAAO,GAAG,CAAC,CAAC;AACrD,QAAM,WAAW,MAAM,IAAI,CAAC,SAAS,KAAK,aAAa,IAAI;AAC3D,QAAM,QAAQ,MAAM;AACpB,QAAM,UAAU,UAAU,EAAE,QAAQ,MAAM,OAAO,UAAU,MAAM,MAAM,GAAG,SAAS,IAAI,EAAE;AACzF,QAAM,QAAQ,OAAQ,UAAU,UAAW;AAE3C,QAAM,OAAO,CAAC,OAAe,WAA0C;AACrE,cAAU,KAAK;AACf,WAAO,EAAE,QAAQ,KAAK,MAAM,KAAK,GAAG,IAAI;AAAA,EAC1C;AACA,SAAO;AAAA,IACL,WAAW,MAAM,KAAK,GAAG,OAAO;AAAA,IAChC,IAAI,OAAO;AACT,YAAM,UAAU,OAAO,QAAQ;AAC/B,YAAM,QAAQ,MAAM;AACpB,UAAI,MAAM,WAAW,MAAM,UAAU,OAAO,OAAO,YAAY,KAAK;AAClE,cAAM,eAAe;AACrB,eAAO,WAAW;AAClB,qBAAa,MAAM,OAAO;AAC1B,cAAM,UAAU,WAAW,MAAO,OAAO,UAAU,IAAK,eAAe;AACvE,cAAM,QAAQ;AAAA,UACZ,MAAM,IAAI,CAAC,SAAS,KAAK,KAAK;AAAA,UAC9B;AAAA,UACA,OAAO;AAAA,UACP;AAAA,QACF;AACA,eAAO,QAAQ,IAAI,CAAC,IAAI,KAAK,OAAO,OAAO,SAAY,MAAM;AAAA,MAC/D;AACA,UAAI,QAAQ,IAAI,KAAK,EAAG,OAAM,eAAe;AAC7C,YAAM,SAAS,UAAU,EAAE,QAAQ,SAAS,OAAO,UAAU,KAAK,GAAG,OAAO,IAAI;AAChF,UAAI,OAAO,WAAW,UAAa,OAAO,WAAW,QAAS,QAAO,QAAQ,IAAI,KAAK,IAAI,CAAC,IAAI;AAC/F,aAAO,KAAK,OAAO,QAAQ,OAAO,MAAM;AAAA,IAC1C;AAAA,IACA,MAAM,OAAO;AACX,UAAI,MAAM,QAAQ,IAAK,OAAM,eAAe;AAAA,IAC9C;AAAA,IACA,UAAU;AAAA,EACZ;AACF;","names":[]}

package/dist/{chunk-MC7N4KQA.js → chunk-45FUDQOF.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/treemap-chart.tsx
 import { treemapChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var TreemapChart = createClientChart(treemapChart);
 export {
   TreemapChart
 };
-//# sourceMappingURL=chunk-MC7N4KQA.js.map
+//# sourceMappingURL=chunk-45FUDQOF.js.map

package/dist/chunk-4CZQHTP5.js

@@ -0,0 +1,16 @@
+'use client';
+import {
+  renderUi,
+  useUi
+} from "./chunk-DX6FUHGB.js";
+
+// src/ui/breadcrumb.tsx
+import { uiBreadcrumbView } from "@silverpoint/core/ui";
+function SpBreadcrumb({ dashboardCell, ...props }) {
+  return renderUi(uiBreadcrumbView(props, useUi(props, dashboardCell)), {});
+}
+
+export {
+  SpBreadcrumb
+};
+//# sourceMappingURL=chunk-4CZQHTP5.js.map

package/dist/chunk-4CZQHTP5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/breadcrumb.tsx"],"sourcesContent":["import { uiBreadcrumbView, type SpBreadcrumbProps as CoreProps } from '@silverpoint/core/ui';\nimport type { ReactElement } from 'react';\nimport { useUi, type UiCellProps } from './base';\nimport { renderUi } from './render';\n\nexport interface SpBreadcrumbProps extends CoreProps, UiCellProps {}\n\n/** `SpBreadcrumb`: a labelled nav; the last item is the current page (REQ-477). `@silverpoint/react/server/ui/breadcrumb` renders it in a Server Component. */\nexport function SpBreadcrumb({ dashboardCell, ...props }: SpBreadcrumbProps) {\n  return renderUi(uiBreadcrumbView(props, useUi(props, dashboardCell)), {}) as ReactElement;\n}\n"],"mappings":";;;;;;;AAAA,SAAS,wBAA6D;AAQ/D,SAAS,aAAa,EAAE,eAAe,GAAG,MAAM,GAAsB;AAC3E,SAAO,SAAS,iBAAiB,OAAO,MAAM,OAAO,aAAa,CAAC,GAAG,CAAC,CAAC;AAC1E;","names":[]}