@silverpoint/react 0.6.0 → 0.8.0

package/dist/{chunk-UOOHQAJU.js → chunk-NNHM6OWA.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/stream-chart.tsx
 import { streamChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var StreamChart = createClientChart(streamChart);
 export {
   StreamChart
 };
-//# sourceMappingURL=chunk-UOOHQAJU.js.map
+//# sourceMappingURL=chunk-NNHM6OWA.js.map

package/dist/{chunk-3U3Z5U6H.js → chunk-NUGUZMON.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/meter-chart.tsx
 import { meterChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var MeterChart = createClientChart(meterChart);
 export {
   MeterChart
 };
-//# sourceMappingURL=chunk-3U3Z5U6H.js.map
+//# sourceMappingURL=chunk-NUGUZMON.js.map

package/dist/{chunk-6P5Z6IRH.js → chunk-O2FNTA5U.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/diverging-bar-chart.tsx
 import { divergingBarChart } from "@silverpoint/core/catalog";
@@ -10,4 +10,4 @@ var DivergingBarChart = createClientChart(divergingBarChart);
 export {
   DivergingBarChart
 };
-//# sourceMappingURL=chunk-6P5Z6IRH.js.map
+//# sourceMappingURL=chunk-O2FNTA5U.js.map

package/dist/{chunk-7EH4NGBM.js → chunk-O4WI7LKM.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/network-chart.tsx
 import { networkChart } from "@silverpoint/core/catalog";
@@ -10,4 +10,4 @@ var NetworkChart = createClientChart(networkChart);
 export {
   NetworkChart
 };
-//# sourceMappingURL=chunk-7EH4NGBM.js.map
+//# sourceMappingURL=chunk-O4WI7LKM.js.map

package/dist/{chunk-XQTZOVFF.js → chunk-OB65KGYJ.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/marimekko-chart.tsx
 import { marimekkoChart } from "@silverpoint/core/catalog";
@@ -10,4 +10,4 @@ var MarimekkoChart = createClientChart(marimekkoChart);
 export {
   MarimekkoChart
 };
-//# sourceMappingURL=chunk-XQTZOVFF.js.map
+//# sourceMappingURL=chunk-OB65KGYJ.js.map

package/dist/{chunk-TSQWTDBK.js → chunk-PXHT6PD5.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/orbit-chart.tsx
 import { orbitChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var OrbitChart = createClientChart(orbitChart);
 export {
   OrbitChart
 };
-//# sourceMappingURL=chunk-TSQWTDBK.js.map
+//# sourceMappingURL=chunk-PXHT6PD5.js.map

package/dist/chunk-Q6VFHFX3.js

@@ -0,0 +1,16 @@
+'use client';
+import {
+  renderUi,
+  useUi
+} from "./chunk-DX6FUHGB.js";
+
+// src/ui/result.tsx
+import { uiResultView } from "@silverpoint/core/ui";
+function SpResult({ extra, dashboardCell, ...props }) {
+  return renderUi(uiResultView(props, useUi(props, dashboardCell), { extra: extra != null }), { slots: { extra } });
+}
+
+export {
+  SpResult
+};
+//# sourceMappingURL=chunk-Q6VFHFX3.js.map

package/dist/chunk-Q6VFHFX3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/result.tsx"],"sourcesContent":["import { uiResultView, type SpResultProps as CoreProps } from '@silverpoint/core/ui';\nimport type { ReactElement, ReactNode } from 'react';\nimport { useUi, type UiCellProps } from './base';\nimport { renderUi } from './render';\n\nexport interface SpResultProps extends CoreProps, UiCellProps {\n  /** Actions under the description. */\n  readonly extra?: ReactNode;\n}\n\n/** `SpResult`: the status glyph in a round frame; status or alert by its kind (REQ-483). `@silverpoint/react/server/ui/result` renders it in a Server Component. */\nexport function SpResult({ extra, dashboardCell, ...props }: SpResultProps) {\n  return renderUi(uiResultView(props, useUi(props, dashboardCell), { extra: extra != null }), { slots: { extra } }) as ReactElement;\n}\n"],"mappings":";;;;;;;AAAA,SAAS,oBAAqD;AAWvD,SAAS,SAAS,EAAE,OAAO,eAAe,GAAG,MAAM,GAAkB;AAC1E,SAAO,SAAS,aAAa,OAAO,MAAM,OAAO,aAAa,GAAG,EAAE,OAAO,SAAS,KAAK,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;AAClH;","names":[]}

package/dist/{chunk-ZBSCLF56.js → chunk-QEHVGOJA.js}

@@ -1,14 +1,18 @@
+import {
+  styleObject
+} from "./chunk-XPLCIRDZ.js";
+
 // src/ui/render.tsx
 import { createElement } from "react";
-var PROPS = { class: "className", for: "htmlFor", readonly: "readOnly", tabindex: "tabIndex" };
-function styleObject(value) {
-  const out = {};
-  for (const declaration of value.split(";")) {
-    const at = declaration.indexOf(":");
-    if (at > 0) out[declaration.slice(0, at).trim()] = declaration.slice(at + 1).trim();
-  }
-  return out;
-}
+var PROPS = {
+  class: "className",
+  for: "htmlFor",
+  readonly: "readOnly",
+  tabindex: "tabIndex",
+  colspan: "colSpan",
+  maxlength: "maxLength",
+  inputmode: "inputMode"
+};
 function renderUi(node, bindings, root = true) {
   if ("text" in node) return node.text;
   if ("slot" in node) return bindings.slots?.[node.slot] ?? null;
@@ -19,6 +23,8 @@ function renderUi(node, bindings, root = true) {
   if (root) Object.assign(props, bindings.root);
   if (node.bind === "native") Object.assign(props, typeof bindings.native === "function" ? bindings.native(node) : bindings.native);
   if (node.bind === "close") Object.assign(props, bindings.close);
+  else if (node.bind && node.bind !== "native") Object.assign(props, bindings.bound?.[node.bind]?.(node));
+  if (node.tag === "textarea") return createElement(node.tag, props);
   return createElement(node.tag, props, ...node.children.map((child) => renderUi(child, bindings, false)));
 }
 function textOf(children) {
@@ -30,4 +36,4 @@ export {
   renderUi,
   textOf
 };
-//# sourceMappingURL=chunk-ZBSCLF56.js.map
+//# sourceMappingURL=chunk-QEHVGOJA.js.map

package/dist/chunk-QEHVGOJA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/render.tsx"],"sourcesContent":["import type { UiBind, UiElement, UiNode, UiSlot } from '@silverpoint/core/ui';\nimport { createElement, type ReactNode } from 'react';\nimport { styleObject } from '../style';\n\n/** HTML attribute names React spells differently. */\nconst PROPS: Readonly<Record<string, string>> = {\n  class: 'className',\n  for: 'htmlFor',\n  readonly: 'readOnly',\n  tabindex: 'tabIndex',\n  colspan: 'colSpan',\n  maxlength: 'maxLength',\n  inputmode: 'inputMode',\n};\n\nexport interface UiBindings {\n  /** Props added to the root element: a ref, a click handler. */\n  readonly root?: Readonly<Record<string, unknown>>;\n  /**\n   * Props added to each element the core marks `native`: value, handlers, a ref. A function when a\n   * composite has several (one radio per item), each told apart by its own attributes.\n   */\n  readonly native?: Readonly<Record<string, unknown>> | ((node: UiElement) => Readonly<Record<string, unknown>>);\n  /** Props added to the close button of a Tag or an Alert. */\n  readonly close?: Readonly<Record<string, unknown>>;\n  /** Props added to the elements the core marks with another `bind` (a Table's `sort` headers…), each told apart by its attributes. */\n  readonly bound?: Partial<Record<UiBind, (node: UiElement) => Readonly<Record<string, unknown>>>>;\n  readonly slots?: Partial<Record<UiSlot, ReactNode>>;\n}\n\n/**\n * Writes the core's view tree as React elements (API delta §4): the markup is the core's, attribute\n * for attribute; this adds only the bindings. No hooks, so a server entry uses it as well (REQ-104).\n */\nexport function renderUi(node: UiNode, bindings: UiBindings, root = true): ReactNode {\n  if ('text' in node) return node.text;\n  if ('slot' in node) return bindings.slots?.[node.slot] ?? null;\n  const props: Record<string, unknown> = {};\n  for (const [name, value] of Object.entries(node.attrs)) {\n    props[PROPS[name] ?? name] = name === 'style' && typeof value === 'string' ? styleObject(value) : value;\n  }\n  if (root) Object.assign(props, bindings.root);\n  if (node.bind === 'native') Object.assign(props, typeof bindings.native === 'function' ? bindings.native(node) : bindings.native);\n  if (node.bind === 'close') Object.assign(props, bindings.close);\n  else if (node.bind && node.bind !== 'native') Object.assign(props, bindings.bound?.[node.bind]?.(node));\n  // React writes a `<textarea>`'s content from its `value`, which the native binding gives.\n  if (node.tag === 'textarea') return createElement(node.tag, props);\n  return createElement(node.tag, props, ...node.children.map((child) => renderUi(child, bindings, false)));\n}\n\n/** Text content, when the children are text: what the accessible-name check reads (REQ-319). */\nexport function textOf(children: unknown): string | undefined {\n  if (typeof children === 'string' || typeof children === 'number') return String(children);\n  return children === undefined || children === null || children === false ? undefined : '·';\n}\n"],"mappings":";;;;;AACA,SAAS,qBAAqC;AAI9C,IAAM,QAA0C;AAAA,EAC9C,OAAO;AAAA,EACP,KAAK;AAAA,EACL,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AACb;AAqBO,SAAS,SAAS,MAAc,UAAsB,OAAO,MAAiB;AACnF,MAAI,UAAU,KAAM,QAAO,KAAK;AAChC,MAAI,UAAU,KAAM,QAAO,SAAS,QAAQ,KAAK,IAAI,KAAK;AAC1D,QAAM,QAAiC,CAAC;AACxC,aAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,KAAK,KAAK,GAAG;AACtD,UAAM,MAAM,IAAI,KAAK,IAAI,IAAI,SAAS,WAAW,OAAO,UAAU,WAAW,YAAY,KAAK,IAAI;AAAA,EACpG;AACA,MAAI,KAAM,QAAO,OAAO,OAAO,SAAS,IAAI;AAC5C,MAAI,KAAK,SAAS,SAAU,QAAO,OAAO,OAAO,OAAO,SAAS,WAAW,aAAa,SAAS,OAAO,IAAI,IAAI,SAAS,MAAM;AAChI,MAAI,KAAK,SAAS,QAAS,QAAO,OAAO,OAAO,SAAS,KAAK;AAAA,WACrD,KAAK,QAAQ,KAAK,SAAS,SAAU,QAAO,OAAO,OAAO,SAAS,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC;AAEtG,MAAI,KAAK,QAAQ,WAAY,QAAO,cAAc,KAAK,KAAK,KAAK;AACjE,SAAO,cAAc,KAAK,KAAK,OAAO,GAAG,KAAK,SAAS,IAAI,CAAC,UAAU,SAAS,OAAO,UAAU,KAAK,CAAC,CAAC;AACzG;AAGO,SAAS,OAAO,UAAuC;AAC5D,MAAI,OAAO,aAAa,YAAY,OAAO,aAAa,SAAU,QAAO,OAAO,QAAQ;AACxF,SAAO,aAAa,UAAa,aAAa,QAAQ,aAAa,QAAQ,SAAY;AACzF;","names":[]}

package/dist/{chunk-QRYI7BEO.js → chunk-QEODW4IP.js}

@@ -3,7 +3,7 @@ import {
   renderUi,
   useUi,
   useValue
-} from "./chunk-DO4VUIUU.js";
+} from "./chunk-DX6FUHGB.js";
 
 // src/ui/input.tsx
 import { uiInputView } from "@silverpoint/core/ui";
@@ -18,4 +18,4 @@ var SpInput = forwardRef(function SpInput2({ value, defaultValue, onChange, pref
 export {
   SpInput
 };
-//# sourceMappingURL=chunk-QRYI7BEO.js.map
+//# sourceMappingURL=chunk-QEODW4IP.js.map

package/dist/{chunk-3BREGZ7C.js → chunk-QJLESIWB.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/bubble-chart.tsx
 import { bubbleChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var BubbleChart = createClientChart(bubbleChart);
 export {
   BubbleChart
 };
-//# sourceMappingURL=chunk-3BREGZ7C.js.map
+//# sourceMappingURL=chunk-QJLESIWB.js.map

package/dist/{chunk-WMU6O6KZ.js → chunk-QKBT4P5O.js}

@@ -3,7 +3,7 @@ import {
   renderUi,
   useUi,
   useValue
-} from "./chunk-DO4VUIUU.js";
+} from "./chunk-DX6FUHGB.js";
 
 // src/ui/slider.tsx
 import { uiSliderView } from "@silverpoint/core/ui";
@@ -18,4 +18,4 @@ var SpSlider = forwardRef(function SpSlider2({ value, defaultValue, onChange, da
 export {
   SpSlider
 };
-//# sourceMappingURL=chunk-WMU6O6KZ.js.map
+//# sourceMappingURL=chunk-QKBT4P5O.js.map

package/dist/{chunk-LPKOFXAA.js → chunk-QOQTPSPV.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/vector-field-chart.tsx
 import { vectorFieldChart } from "@silverpoint/core/catalog";
@@ -10,4 +10,4 @@ var VectorFieldChart = createClientChart(vectorFieldChart);
 export {
   VectorFieldChart
 };
-//# sourceMappingURL=chunk-LPKOFXAA.js.map
+//# sourceMappingURL=chunk-QOQTPSPV.js.map

package/dist/{chunk-FBJLA3P7.js → chunk-QRQ4RFCB.js}

@@ -4,10 +4,11 @@ import {
 } from "./chunk-4GQ5X2WK.js";
 import {
   SilverpointContext,
+  styleObject,
   useForcedPrecision,
   useMeasuredWidth,
   useTypefaceCheck
-} from "./chunk-SQ6GWXDK.js";
+} from "./chunk-M2NKE3GQ.js";
 
 // src/create-chart.tsx
 import {
@@ -100,6 +101,7 @@ function ChartFrame({ rendered, className, rootProps, rootRef, overlay }) {
       "data-substrate": rendered.substrate,
       "data-chrome": rendered.chrome,
       "data-status": rendered.status,
+      style: rendered.style ? styleObject(rendered.style) : void 0,
       ref: rootRef,
       ...rootProps,
       children: [
@@ -230,4 +232,4 @@ function createClientChart(recipe) {
 export {
   createClientChart
 };
-//# sourceMappingURL=chunk-FBJLA3P7.js.map
+//# sourceMappingURL=chunk-QRQ4RFCB.js.map

package/dist/chunk-QRQ4RFCB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/create-chart.tsx","../src/chart-svg.tsx","../src/chart-frame.tsx","../src/overlay.tsx"],"sourcesContent":["import {\n  inCell,\n  instanceId,\n  linkFrom,\n  reduceInteraction,\n  type ActiveItem,\n  type ChartHandle,\n  type ChartRecipe,\n  type CommonChartProps,\n  type InteractionEvent,\n  type PointerKind,\n} from '@silverpoint/core';\nimport { renderChart, toSVGString } from '@silverpoint/grounds';\nimport {\n  forwardRef,\n  useContext,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type ForwardRefExoticComponent,\n  type KeyboardEvent,\n  type PointerEvent,\n  type RefAttributes,\n} from 'react';\nimport { ChartFrame } from './chart-frame';\nimport type { CellChartProps } from './dashboard-markup';\nimport { DashboardLinkContext } from './link-context';\nimport { SilverpointContext } from './context';\nimport { useForcedPrecision, useMeasuredWidth, useTypefaceCheck } from './environment';\nimport { Overlay, type TooltipRenderer } from './overlay';\n\nexport type { ChartHandle };\n\n/** Interaction props of the client components (API Spec §9). */\nexport interface InteractionProps {\n  /** The active item changed, or `null` when it cleared (REQ-141, REQ-143). */\n  onActiveChange?: (item: ActiveItem | null) => void;\n  /** An item was chosen by click, Enter or Space. */\n  onSelect?: (item: ActiveItem) => void;\n  /** Replaces the built-in readout (REQ-142). */\n  tooltip?: TooltipRenderer;\n}\n\nexport type ClientChart<P> = ForwardRefExoticComponent<P & InteractionProps & RefAttributes<ChartHandle>>;\n\n/**\n * The client component of a recipe: it measures, renders through the core pipeline and forwards\n * interaction events to the core's reducer. Every client chart is this function applied to its\n * recipe, so the charts differ only in the recipe (Art. 2).\n */\nexport function createClientChart<P extends CommonChartProps>(recipe: ChartRecipe<P>): ClientChart<P> {\n  const Chart = forwardRef<ChartHandle, P & InteractionProps & CellChartProps>(function Chart(allProps, ref) {\n    const { onActiveChange, onSelect, tooltip } = allProps;\n    const provider = useContext(SilverpointContext);\n    const link = useContext(DashboardLinkContext);\n    const generated = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const forcedPrecision = useForcedPrecision();\n    useTypefaceCheck(recipe.name);\n    const measured = useMeasuredWidth(rootRef, allProps.width === undefined);\n\n    const rendered = useMemo(() => {\n      // Inside a dashboard cell: its id, height and config, and its nominal width until measured\n      // (REQ-206, REQ-207, REQ-209, REQ-212); the chart's own props win.\n      const { dashboardCell, ...own } = allProps;\n      const fitted = inCell(own as unknown as P, dashboardCell, recipe);\n      return renderChart(recipe, fitted.props, {\n        id: instanceId(recipe.name, generated),\n        width: measured ?? fitted.width,\n        provider,\n        forcedPrecision,\n      });\n      // Keyed on the props object React hands in, which is stable across this component's own\n      // state changes, so moving the pointer never re-inks the chart.\n    }, [allProps, generated, measured, provider, forcedPrecision]);\n\n    const [active, setActive] = useState<ActiveItem | null>(null);\n    const dispatch = (event: InteractionEvent): boolean => {\n      const result = reduceInteraction(rendered.geometry, active, event);\n      if (result.changed) {\n        setActive(result.active);\n        onActiveChange?.(result.active);\n        // In a linked dashboard this chart becomes the source, or clears the link (REQ-216, REQ-218).\n        link?.set(linkFrom(link.key, rendered.id, result.active));\n      }\n      if (result.selected) onSelect?.(result.selected);\n      return result.handled;\n    };\n    // WCAG 1.4.13: a readout shown by the pointer is dismissible with Escape wherever focus is.\n    const latest = useRef(dispatch);\n    latest.current = dispatch;\n    const showing = active !== null;\n    useEffect(() => {\n      if (!showing) return undefined;\n      const onKey = (event: globalThis.KeyboardEvent) => {\n        if (event.key === 'Escape' && !rootRef.current?.contains(event.target as Node)) latest.current({ type: 'key', key: 'Escape' });\n      };\n      document.addEventListener('keydown', onKey);\n      return () => document.removeEventListener('keydown', onKey);\n    }, [showing]);\n    const pointer = (type: 'pointer' | 'click') => (event: PointerEvent<HTMLDivElement>) => {\n      const svg = rootRef.current?.querySelector('svg.sp-chart');\n      if (!svg) return;\n      const box = svg.getBoundingClientRect();\n      dispatch({\n        type,\n        client: { x: event.clientX, y: event.clientY },\n        box: { left: box.left, top: box.top, width: box.width, height: box.height },\n        kind: (event.pointerType || 'mouse') as PointerKind,\n      });\n    };\n    const rootProps = {\n      tabIndex: 0,\n      role: 'group',\n      'aria-label': rendered.name,\n      onPointerMove: pointer('pointer'),\n      onPointerDown: pointer('pointer'),\n      onClick: pointer('click'),\n      onPointerLeave: () => dispatch({ type: 'leave' }),\n      onFocus: () => dispatch({ type: 'focus' }),\n      onBlur: () => dispatch({ type: 'blur' }),\n      onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => {\n        if (dispatch({ type: 'key', key: event.key })) event.preventDefault();\n      },\n    };\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        getGeometry: () => rendered.geometry,\n        toSVGString: () => toSVGString(rendered),\n      }),\n      [rendered],\n    );\n\n    return (\n      <ChartFrame\n        rendered={rendered}\n        className={allProps.className}\n        rootRef={rootRef}\n        rootProps={rootProps}\n        overlay={<Overlay rendered={rendered} active={active} tooltip={tooltip} />}\n      />\n    );\n  });\n  Chart.displayName = recipe.name;\n  return Chart as ClientChart<P>;\n}\n","import type { PathView, SvgView } from '@silverpoint/core';\n\nfunction Path({ path }: { readonly path: PathView }) {\n  return (\n    <path\n      d={path.d}\n      part={path.part}\n      data-role={path.role}\n      data-paint={path.paint}\n      data-dash={path.dash ?? undefined}\n      data-weight={path.weight ?? undefined}\n      fill={path.fill ?? undefined}\n    />\n  );\n}\n\n/** Writes the core's SVG view one field to one attribute; computes nothing (Art. 2). */\nexport function ChartSvg({ view }: { readonly view: SvgView }) {\n  const { svg } = view;\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={svg.viewBox}\n      width={svg.width}\n      height={svg.height}\n      className={svg.class}\n      data-substrate={svg.substrate}\n      data-mode={svg.mode}\n      role={svg.role}\n      aria-labelledby={svg.labelledby}\n    >\n      <title id={view.title.id}>{view.title.text}</title>\n      <desc id={view.desc.id}>{view.desc.text}</desc>\n      {view.patterns.length > 0 && (\n        <defs>\n          {view.patterns.map((pattern) => (\n            <pattern\n              key={pattern.id}\n              id={pattern.id}\n              width={pattern.width}\n              height={pattern.height}\n              patternUnits=\"userSpaceOnUse\"\n              patternTransform={pattern.transform}\n            >\n              {pattern.paths.map((path, index) => (\n                <Path key={index} path={path} />\n              ))}\n            </pattern>\n          ))}\n        </defs>\n      )}\n      {view.paths.map((path, index) => (\n        <Path key={index} path={path} />\n      ))}\n      {view.texts.map((text, index) => (\n        <text key={index} x={text.x} y={text.y} part={text.part} data-kind={text.kind} textAnchor={text.anchor}>\n          {text.text}\n        </text>\n      ))}\n    </svg>\n  );\n}\n","import type { DataTable } from '@silverpoint/core';\nimport type { RenderedChart } from '@silverpoint/grounds';\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { ChartSvg } from './chart-svg';\nimport { styleObject } from './style';\n\nfunction Table({ table, id, visibility }: { readonly table: DataTable; readonly id: string; readonly visibility: string }) {\n  return (\n    <div className=\"sp-table-box\" data-visibility={visibility}>\n      <table className=\"sp-table\" id={id} data-visibility={visibility}>\n        <caption>{table.caption}</caption>\n        <thead>\n          <tr>\n            {table.columns.map((column, index) => (\n              <th key={index} scope=\"col\">\n                {column}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {table.rows.map((row, index) => (\n            <tr key={index}>\n              {row.map((cell, column) =>\n                column === 0 ? (\n                  <th key={column} scope=\"row\">\n                    {cell}\n                  </th>\n                ) : (\n                  <td key={column}>{cell}</td>\n                ),\n              )}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nexport interface ChartFrameProps {\n  readonly rendered: RenderedChart;\n  readonly className?: string;\n  /** Interaction handlers and focus attributes, supplied by the client component only. */\n  readonly rootProps?: HTMLAttributes<HTMLDivElement>;\n  readonly rootRef?: Ref<HTMLDivElement>;\n  /** Readout and marker, drawn over the chart by the client component. */\n  readonly overlay?: ReactNode;\n}\n\n/** The chart's DOM: root, SVG, overlay and tabular alternative (API Spec §10). */\nexport function ChartFrame({ rendered, className, rootProps, rootRef, overlay }: ChartFrameProps) {\n  const classes = ['sp-root', `sp-ground-${rendered.ground}`, className].filter(Boolean).join(' ');\n  return (\n    <div\n      className={classes}\n      data-substrate={rendered.substrate}\n      data-chrome={rendered.chrome}\n      data-status={rendered.status}\n      style={rendered.style ? styleObject(rendered.style) : undefined}\n      ref={rootRef}\n      {...rootProps}\n    >\n      <ChartSvg view={rendered.view} />\n      {overlay}\n      {rendered.dataTable !== 'none' && (\n        <Table table={rendered.table} id={rendered.ids.table} visibility={rendered.dataTable} />\n      )}\n    </div>\n  );\n}\n","import { linkedMarks, readout, type ActiveItem, type Readout } from '@silverpoint/core';\nimport type { RenderedChart } from '@silverpoint/grounds';\nimport { useContext, type ReactNode } from 'react';\nimport { DashboardLinkContext } from './link-context';\n\n/** A consumer-supplied readout renderer (REQ-142). */\nexport type TooltipRenderer = (active: ActiveItem, readout: Readout) => ReactNode;\n\n/**\n * Marker, readout and live region of the active item (REQ-141, REQ-122). Every number comes from\n * the core's `readout`; this component only places it.\n */\nexport function Overlay({\n  rendered,\n  active,\n  tooltip,\n}: {\n  readonly rendered: RenderedChart;\n  readonly active: ActiveItem | null;\n  readonly tooltip?: TooltipRenderer;\n}) {\n  const current = active ? readout(rendered, active) : null;\n  // Another chart's linked item, marked here and hidden from assistive technology (REQ-216, REQ-218).\n  const linked = linkedMarks(rendered, useContext(DashboardLinkContext)?.state);\n  return (\n    <>\n      {linked.length > 0 && (\n        <svg className=\"sp-marker\" part=\"linked\" viewBox={rendered.view.svg.viewBox} aria-hidden=\"true\" focusable=\"false\">\n          {linked.map((d, index) => (\n            <path key={index} d={d} />\n          ))}\n        </svg>\n      )}\n      {current && active && (\n        <>\n          <svg className=\"sp-marker\" viewBox={rendered.view.svg.viewBox} aria-hidden=\"true\" focusable=\"false\">\n            <path d={current.marker.d} />\n          </svg>\n          <div className=\"sp-readout\" style={{ left: current.left, top: current.top }} aria-hidden=\"true\">\n            {tooltip ? (\n              tooltip(active, current)\n            ) : (\n              <>\n                <span className=\"sp-readout-heading\">{current.heading}</span>\n                {current.text}\n              </>\n            )}\n          </div>\n        </>\n      )}\n      <div className=\"sp-live\" aria-live=\"polite\">\n        {current ? current.announcement : ''}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":["useContext","jsx","jsxs","jsx","jsxs","jsx","Chart","useContext"]}

package/dist/{chunk-4DG5NJWM.js → chunk-QVCRJZMJ.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/delaunay-chart.tsx
 import { delaunayChart } from "@silverpoint/core/catalog";
@@ -10,4 +10,4 @@ var DelaunayChart = createClientChart(delaunayChart);
 export {
   DelaunayChart
 };
-//# sourceMappingURL=chunk-4DG5NJWM.js.map
+//# sourceMappingURL=chunk-QVCRJZMJ.js.map

package/dist/{chunk-OD6N2ATZ.js → chunk-R66XACVV.js}

@@ -1,5 +1,6 @@
 // src/dashboard-markup.tsx
 import { dashboardView } from "@silverpoint/core";
+import { paletteStyle, resolvePalette } from "@silverpoint/core/palettes";
 import { Children, cloneElement, isValidElement } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function DashboardCell({ children }) {
@@ -13,7 +14,7 @@ function DashboardMarkup({ children, wrapGrid, ...props }) {
     const chart = isValidElement(content) ? content : void 0;
     return { cell: marked ? child.props.cell : void 0, id: chart?.props.id, content, chart };
   });
-  const view = dashboardView(props, given.map(({ cell, id }) => ({ cell, id })));
+  const view = dashboardView(props, given.map(({ cell, id }) => ({ cell, id })), paletteStyle(resolvePalette(props.palette)));
   const Heading = view.heading ? `h${view.heading.level}` : void 0;
   const grid = /* @__PURE__ */ jsx("div", { className: "sp-dashboard-grid", part: "dashboard-grid", children: view.cells.map((cell) => {
     const { chart, content } = given[cell.child];
@@ -42,4 +43,4 @@ export {
   DashboardCell,
   DashboardMarkup
 };
-//# sourceMappingURL=chunk-OD6N2ATZ.js.map
+//# sourceMappingURL=chunk-R66XACVV.js.map

package/dist/chunk-R66XACVV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dashboard-markup.tsx"],"sourcesContent":["import { dashboardView, type DashboardCellContext, type DashboardProps } from '@silverpoint/core';\nimport { paletteStyle, resolvePalette } from '@silverpoint/core/palettes';\nimport { Children, cloneElement, isValidElement, type CSSProperties, type ReactElement, type ReactNode } from 'react';\n\nexport interface DashboardCellProps {\n  /** The layout cell this child fills. Omitted: next in source order, span 1 (API Spec §7.1). */\n  readonly cell?: string;\n  /** The chart. A single element receives the cell's id, size and configuration. */\n  readonly children?: ReactNode;\n}\n\n/**\n * Marks a child of `Dashboard` with its layout cell. Rendered on its own it is its children; inside\n * a dashboard, the dashboard reads its `cell` and emits it as an `article` (REQ-200).\n */\nexport function DashboardCell({ children }: DashboardCellProps) {\n  return <>{children}</>;\n}\n\n/** The internal prop through which a cell hands its chart id, box and config (TD §3.3). */\nexport interface CellChartProps {\n  readonly dashboardCell?: DashboardCellContext;\n}\n\nconst asStyle = (vars: Readonly<Record<string, string>>) => vars as CSSProperties;\n\n/**\n * The dashboard's DOM (API Spec §10), shared by the client and server entries. It computes\n * nothing: the core's `dashboardView` gives every attribute, and each cell's chart gets its\n * context as a prop, which crosses a Server Components boundary as plain data (Art. 2).\n */\nexport function DashboardMarkup({ children, wrapGrid, ...props }: DashboardProps & { readonly children?: ReactNode; readonly wrapGrid?: (grid: ReactNode) => ReactNode }) {\n  const given = Children.toArray(children).map((child) => {\n    const marked = isValidElement<DashboardCellProps>(child) && child.type === DashboardCell;\n    const content = marked ? child.props.children : child;\n    const chart = isValidElement<{ id?: string }>(content) ? content : undefined;\n    return { cell: marked ? child.props.cell : undefined, id: chart?.props.id, content, chart };\n  });\n  // Its own palette only: this renders in Server Components, which read no provider (DD-037).\n  const view = dashboardView(props, given.map(({ cell, id }) => ({ cell, id })), paletteStyle(resolvePalette(props.palette)));\n  const Heading = view.heading ? (`h${view.heading.level}` as const) : undefined;\n  const grid = (\n    <div className=\"sp-dashboard-grid\" part=\"dashboard-grid\">\n      {view.cells.map((cell) => {\n        const { chart, content } = given[cell.child]!;\n        return (\n          <article key={cell.context.chartId} className=\"sp-dashboard-cell\" part=\"dashboard-cell\" aria-labelledby={cell.labelledby} style={asStyle(cell.style)}>\n            {chart ? cloneElement(chart as ReactElement<CellChartProps>, { dashboardCell: cell.context }) : content}\n          </article>\n        );\n      })}\n    </div>\n  );\n  return (\n    <section\n      className={view.section.className}\n      part=\"dashboard\"\n      data-substrate={view.section.substrate}\n      aria-labelledby={view.section.labelledby}\n      aria-describedby={view.section.describedby}\n      aria-label={view.section.label}\n      style={asStyle(view.section.style)}\n    >\n      {Heading && view.heading && (\n        <Heading className=\"sp-dashboard-title\" part=\"dashboard-title\" id={view.heading.id}>\n          {view.heading.text}\n        </Heading>\n      )}\n      {view.description && (\n        <p className=\"sp-dashboard-description\" part=\"dashboard-description\" id={view.description.id}>\n          {view.description.text}\n        </p>\n      )}\n      {wrapGrid ? wrapGrid(grid) : grid}\n    </section>\n  );\n}\n"],"mappings":";AAAA,SAAS,qBAAqE;AAC9E,SAAS,cAAc,sBAAsB;AAC7C,SAAS,UAAU,cAAc,sBAA6E;AAcrG,wBAsCL,YAtCK;AADF,SAAS,cAAc,EAAE,SAAS,GAAuB;AAC9D,SAAO,gCAAG,UAAS;AACrB;AAOA,IAAM,UAAU,CAAC,SAA2C;AAOrD,SAAS,gBAAgB,EAAE,UAAU,UAAU,GAAG,MAAM,GAA2G;AACxK,QAAM,QAAQ,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,UAAU;AACtD,UAAM,SAAS,eAAmC,KAAK,KAAK,MAAM,SAAS;AAC3E,UAAM,UAAU,SAAS,MAAM,MAAM,WAAW;AAChD,UAAM,QAAQ,eAAgC,OAAO,IAAI,UAAU;AACnE,WAAO,EAAE,MAAM,SAAS,MAAM,MAAM,OAAO,QAAW,IAAI,OAAO,MAAM,IAAI,SAAS,MAAM;AAAA,EAC5F,CAAC;AAED,QAAM,OAAO,cAAc,OAAO,MAAM,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,EAAE,GAAG,aAAa,eAAe,MAAM,OAAO,CAAC,CAAC;AAC1H,QAAM,UAAU,KAAK,UAAW,IAAI,KAAK,QAAQ,KAAK,KAAe;AACrE,QAAM,OACJ,oBAAC,SAAI,WAAU,qBAAoB,MAAK,kBACrC,eAAK,MAAM,IAAI,CAAC,SAAS;AACxB,UAAM,EAAE,OAAO,QAAQ,IAAI,MAAM,KAAK,KAAK;AAC3C,WACE,oBAAC,aAAmC,WAAU,qBAAoB,MAAK,kBAAiB,mBAAiB,KAAK,YAAY,OAAO,QAAQ,KAAK,KAAK,GAChJ,kBAAQ,aAAa,OAAuC,EAAE,eAAe,KAAK,QAAQ,CAAC,IAAI,WADpF,KAAK,QAAQ,OAE3B;AAAA,EAEJ,CAAC,GACH;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,QAAQ;AAAA,MACxB,MAAK;AAAA,MACL,kBAAgB,KAAK,QAAQ;AAAA,MAC7B,mBAAiB,KAAK,QAAQ;AAAA,MAC9B,oBAAkB,KAAK,QAAQ;AAAA,MAC/B,cAAY,KAAK,QAAQ;AAAA,MACzB,OAAO,QAAQ,KAAK,QAAQ,KAAK;AAAA,MAEhC;AAAA,mBAAW,KAAK,WACf,oBAAC,WAAQ,WAAU,sBAAqB,MAAK,mBAAkB,IAAI,KAAK,QAAQ,IAC7E,eAAK,QAAQ,MAChB;AAAA,QAED,KAAK,eACJ,oBAAC,OAAE,WAAU,4BAA2B,MAAK,yBAAwB,IAAI,KAAK,YAAY,IACvF,eAAK,YAAY,MACpB;AAAA,QAED,WAAW,SAAS,IAAI,IAAI;AAAA;AAAA;AAAA,EAC/B;AAEJ;","names":[]}

package/dist/{chunk-46S63XYT.js → chunk-RE4ZOKKK.js}

@@ -1,3 +1,7 @@
+import {
+  styleObject
+} from "./chunk-XPLCIRDZ.js";
+
 // src/server/create-server-chart.tsx
 import { diagnose, inCell, instanceId } from "@silverpoint/core";
 import { renderChart } from "@silverpoint/grounds";
@@ -74,6 +78,7 @@ function ChartFrame({ rendered, className, rootProps, rootRef, overlay }) {
       "data-substrate": rendered.substrate,
       "data-chrome": rendered.chrome,
       "data-status": rendered.status,
+      style: rendered.style ? styleObject(rendered.style) : void 0,
       ref: rootRef,
       ...rootProps,
       children: [
@@ -104,4 +109,4 @@ function createServerChart(recipe) {
 export {
   createServerChart
 };
-//# sourceMappingURL=chunk-46S63XYT.js.map
+//# sourceMappingURL=chunk-RE4ZOKKK.js.map

package/dist/chunk-RE4ZOKKK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/server/create-server-chart.tsx","../src/chart-svg.tsx","../src/chart-frame.tsx"],"sourcesContent":["import { diagnose, inCell, instanceId, type ChartRecipe, type CommonChartProps } from '@silverpoint/core';\nimport { renderChart } from '@silverpoint/grounds';\nimport { ChartFrame } from '../chart-frame';\nimport type { CellChartProps } from '../dashboard-markup';\n\n/**\n * Props of a server chart: pure SVG, no client JavaScript (REQ-104); interaction props do not\n * exist here. Nothing can be measured on the server and a server component has no mount position\n * to derive a unique id from (TD §6), so a chart standing alone passes `id`, `width` and `height`;\n * inside a `Dashboard` the cell supplies them (REQ-206, REQ-209).\n */\nexport type ServerChartProps<P extends CommonChartProps> = Omit<P, 'id' | 'width' | 'height'> & {\n  readonly id?: string;\n  readonly width?: number;\n  readonly height?: number;\n  readonly onActiveChange?: never;\n  readonly onSelect?: never;\n};\n\n/** The server component of a recipe, for React Server Components and static rendering. */\nexport function createServerChart<P extends CommonChartProps>(recipe: ChartRecipe<P>) {\n  function Chart({ dashboardCell, ...own }: ServerChartProps<P> & CellChartProps) {\n    const { props, width } = inCell(own as unknown as P, dashboardCell, recipe);\n    if (process.env.NODE_ENV !== 'production') {\n      if (props.id === undefined) diagnose('SP002', recipe.name, { property: 'id', message: 'A server chart outside a Dashboard needs an `id`; a fixed one is used, which two such charts on a page would share.' });\n      if (width === undefined) diagnose('SP003', recipe.name, { property: 'width', message: 'A server chart cannot be measured: pass `width`, or place it in a Dashboard.' });\n    }\n    const rendered = renderChart(recipe, props, { id: props.id ?? instanceId(recipe.name, 'server'), width });\n    return <ChartFrame rendered={rendered} className={props.className} />;\n  }\n  Chart.displayName = recipe.name;\n  return Chart;\n}\n","import type { PathView, SvgView } from '@silverpoint/core';\n\nfunction Path({ path }: { readonly path: PathView }) {\n  return (\n    <path\n      d={path.d}\n      part={path.part}\n      data-role={path.role}\n      data-paint={path.paint}\n      data-dash={path.dash ?? undefined}\n      data-weight={path.weight ?? undefined}\n      fill={path.fill ?? undefined}\n    />\n  );\n}\n\n/** Writes the core's SVG view one field to one attribute; computes nothing (Art. 2). */\nexport function ChartSvg({ view }: { readonly view: SvgView }) {\n  const { svg } = view;\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={svg.viewBox}\n      width={svg.width}\n      height={svg.height}\n      className={svg.class}\n      data-substrate={svg.substrate}\n      data-mode={svg.mode}\n      role={svg.role}\n      aria-labelledby={svg.labelledby}\n    >\n      <title id={view.title.id}>{view.title.text}</title>\n      <desc id={view.desc.id}>{view.desc.text}</desc>\n      {view.patterns.length > 0 && (\n        <defs>\n          {view.patterns.map((pattern) => (\n            <pattern\n              key={pattern.id}\n              id={pattern.id}\n              width={pattern.width}\n              height={pattern.height}\n              patternUnits=\"userSpaceOnUse\"\n              patternTransform={pattern.transform}\n            >\n              {pattern.paths.map((path, index) => (\n                <Path key={index} path={path} />\n              ))}\n            </pattern>\n          ))}\n        </defs>\n      )}\n      {view.paths.map((path, index) => (\n        <Path key={index} path={path} />\n      ))}\n      {view.texts.map((text, index) => (\n        <text key={index} x={text.x} y={text.y} part={text.part} data-kind={text.kind} textAnchor={text.anchor}>\n          {text.text}\n        </text>\n      ))}\n    </svg>\n  );\n}\n","import type { DataTable } from '@silverpoint/core';\nimport type { RenderedChart } from '@silverpoint/grounds';\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { ChartSvg } from './chart-svg';\nimport { styleObject } from './style';\n\nfunction Table({ table, id, visibility }: { readonly table: DataTable; readonly id: string; readonly visibility: string }) {\n  return (\n    <div className=\"sp-table-box\" data-visibility={visibility}>\n      <table className=\"sp-table\" id={id} data-visibility={visibility}>\n        <caption>{table.caption}</caption>\n        <thead>\n          <tr>\n            {table.columns.map((column, index) => (\n              <th key={index} scope=\"col\">\n                {column}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {table.rows.map((row, index) => (\n            <tr key={index}>\n              {row.map((cell, column) =>\n                column === 0 ? (\n                  <th key={column} scope=\"row\">\n                    {cell}\n                  </th>\n                ) : (\n                  <td key={column}>{cell}</td>\n                ),\n              )}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nexport interface ChartFrameProps {\n  readonly rendered: RenderedChart;\n  readonly className?: string;\n  /** Interaction handlers and focus attributes, supplied by the client component only. */\n  readonly rootProps?: HTMLAttributes<HTMLDivElement>;\n  readonly rootRef?: Ref<HTMLDivElement>;\n  /** Readout and marker, drawn over the chart by the client component. */\n  readonly overlay?: ReactNode;\n}\n\n/** The chart's DOM: root, SVG, overlay and tabular alternative (API Spec §10). */\nexport function ChartFrame({ rendered, className, rootProps, rootRef, overlay }: ChartFrameProps) {\n  const classes = ['sp-root', `sp-ground-${rendered.ground}`, className].filter(Boolean).join(' ');\n  return (\n    <div\n      className={classes}\n      data-substrate={rendered.substrate}\n      data-chrome={rendered.chrome}\n      data-status={rendered.status}\n      style={rendered.style ? styleObject(rendered.style) : undefined}\n      ref={rootRef}\n      {...rootProps}\n    >\n      <ChartSvg view={rendered.view} />\n      {overlay}\n      {rendered.dataTable !== 'none' && (\n        <Table table={rendered.table} id={rendered.ids.table} visibility={rendered.dataTable} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx"]}

package/dist/chunk-RFWELGCX.js

@@ -0,0 +1,20 @@
+'use client';
+import {
+  renderUi,
+  useUi
+} from "./chunk-DX6FUHGB.js";
+
+// src/ui/avatar.tsx
+import { uiAvatarGroupView, uiAvatarView } from "@silverpoint/core/ui";
+function SpAvatar({ dashboardCell, ...props }) {
+  return renderUi(uiAvatarView(props, useUi(props, dashboardCell)), {});
+}
+function SpAvatarGroup({ children, dashboardCell, ...props }) {
+  return renderUi(uiAvatarGroupView(props, useUi(props, dashboardCell)), { slots: { content: children } });
+}
+
+export {
+  SpAvatar,
+  SpAvatarGroup
+};
+//# sourceMappingURL=chunk-RFWELGCX.js.map

package/dist/chunk-RFWELGCX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/avatar.tsx"],"sourcesContent":["import { uiAvatarGroupView, uiAvatarView, type SpAvatarGroupProps as CoreGroupProps, type SpAvatarProps as CoreProps } from '@silverpoint/core/ui';\nimport type { ReactElement, ReactNode } from 'react';\nimport { useUi, type UiCellProps } from './base';\nimport { renderUi } from './render';\n\nexport interface SpAvatarProps extends CoreProps, UiCellProps {}\n\nexport interface SpAvatarGroupProps extends CoreGroupProps, UiCellProps {\n  /** The avatars. */\n  readonly children?: ReactNode;\n}\n\n/** `SpAvatar`: an image, or initials named as an image (REQ-478). `@silverpoint/react/server/ui/avatar` renders it in a Server Component. */\nexport function SpAvatar({ dashboardCell, ...props }: SpAvatarProps) {\n  return renderUi(uiAvatarView(props, useUi(props, dashboardCell)), {}) as ReactElement;\n}\n\n/** `SpAvatarGroup`: a labelled group of avatars (REQ-478). */\nexport function SpAvatarGroup({ children, dashboardCell, ...props }: SpAvatarGroupProps) {\n  return renderUi(uiAvatarGroupView(props, useUi(props, dashboardCell)), { slots: { content: children } }) as ReactElement;\n}\n"],"mappings":";;;;;;;AAAA,SAAS,mBAAmB,oBAAgG;AAarH,SAAS,SAAS,EAAE,eAAe,GAAG,MAAM,GAAkB;AACnE,SAAO,SAAS,aAAa,OAAO,MAAM,OAAO,aAAa,CAAC,GAAG,CAAC,CAAC;AACtE;AAGO,SAAS,cAAc,EAAE,UAAU,eAAe,GAAG,MAAM,GAAuB;AACvF,SAAO,SAAS,kBAAkB,OAAO,MAAM,OAAO,aAAa,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;AACzG;","names":[]}

package/dist/{chunk-6NXL245Z.js → chunk-S2A6EJSX.js}

@@ -2,7 +2,7 @@
 import {
   renderUi,
   useUi
-} from "./chunk-DO4VUIUU.js";
+} from "./chunk-DX6FUHGB.js";
 
 // src/ui/steps.tsx
 import { uiStepsView } from "@silverpoint/core/ui";
@@ -13,4 +13,4 @@ function SpSteps({ dashboardCell, ...props }) {
 export {
   SpSteps
 };
-//# sourceMappingURL=chunk-6NXL245Z.js.map
+//# sourceMappingURL=chunk-S2A6EJSX.js.map

package/dist/{chunk-6S6VKQ3E.js → chunk-SZHYT257.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/bullet-chart.tsx
 import { bulletChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var BulletChart = createClientChart(bulletChart);
 export {
   BulletChart
 };
-//# sourceMappingURL=chunk-6S6VKQ3E.js.map
+//# sourceMappingURL=chunk-SZHYT257.js.map

package/dist/{chunk-JWCVL7VE.js → chunk-T52NYUKC.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-FBJLA3P7.js";
+} from "./chunk-QRQ4RFCB.js";
 
 // src/donut-chart.tsx
 import { donutChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var DonutChart = createClientChart(donutChart);
 export {
   DonutChart
 };
-//# sourceMappingURL=chunk-JWCVL7VE.js.map
+//# sourceMappingURL=chunk-T52NYUKC.js.map

package/dist/{chunk-M56MDRNT.js → chunk-TTIRFQ2W.js}

@@ -2,7 +2,7 @@
 import {
   renderUi,
   useUi
-} from "./chunk-DO4VUIUU.js";
+} from "./chunk-DX6FUHGB.js";
 
 // src/ui/alert.tsx
 import { uiAlertView } from "@silverpoint/core/ui";
@@ -14,4 +14,4 @@ function SpAlert({ children, onClose, dashboardCell, ...props }) {
 export {
   SpAlert
 };
-//# sourceMappingURL=chunk-M56MDRNT.js.map
+//# sourceMappingURL=chunk-TTIRFQ2W.js.map

package/dist/{chunk-3WUPWJP2.js → chunk-TZGI7DMH.js}

@@ -2,7 +2,7 @@
 import {
   renderUi,
   useUi
-} from "./chunk-DO4VUIUU.js";
+} from "./chunk-DX6FUHGB.js";
 
 // src/ui/card.tsx
 import { uiCardView } from "@silverpoint/core/ui";
@@ -14,4 +14,4 @@ function SpCard({ children, extra, footer, dashboardCell, ...props }) {
 export {
   SpCard
 };
-//# sourceMappingURL=chunk-3WUPWJP2.js.map
+//# sourceMappingURL=chunk-TZGI7DMH.js.map

package/dist/{chunk-67FND3TB.js → chunk-UA3V7LBC.js}

@@ -3,7 +3,7 @@ import {
   renderUi,
   useUi,
   useValue
-} from "./chunk-DO4VUIUU.js";
+} from "./chunk-DX6FUHGB.js";
 
 // src/ui/rate.tsx
 import { uiRateView, uiRovingFocus } from "@silverpoint/core/ui";
@@ -23,4 +23,4 @@ function SpRate({ value, defaultValue, onChange, dashboardCell, ...props }) {
 export {
   SpRate
 };
-//# sourceMappingURL=chunk-67FND3TB.js.map
+//# sourceMappingURL=chunk-UA3V7LBC.js.map

package/dist/chunk-UAWJIVQK.js

@@ -0,0 +1,68 @@
+'use client';
+import {
+  useListKeys
+} from "./chunk-3ZO7VEHS.js";
+import {
+  useOpen,
+  useOverlay
+} from "./chunk-G3PPUBI5.js";
+import {
+  renderUi,
+  useUi
+} from "./chunk-DX6FUHGB.js";
+
+// src/ui/dropdown-menu.tsx
+import { uiDropdownMenuView, uiMenuItems, uiTriggerAria } from "@silverpoint/core/ui";
+import { cloneElement, isValidElement, useEffect, useRef } from "react";
+var triggerOf = (menu) => {
+  const before = menu?.previousElementSibling;
+  return before?.classList.contains("sp-ui-trigger") ? before.firstElementChild : before;
+};
+function SpDropdownMenu({ onSelect, trigger, open, defaultOpen, onOpenChange, dashboardCell, ...props }) {
+  const [isOpen, setOpen, latest] = useOpen({ open, defaultOpen, onOpenChange });
+  const menu = useRef(null);
+  useOverlay(menu, "popover", isOpen, setOpen, { place: { side: props.side ?? "bottom", align: props.align ?? "start" } });
+  const items = uiMenuItems(props.items);
+  const list = useListKeys(items, "menu", isOpen, -1);
+  const view = uiDropdownMenuView(props, useUi(props, dashboardCell), { open: isOpen, active: list.activeKey }, { trigger: trigger !== void 0 });
+  useEffect(() => {
+    if (!isOpen || list.activeKey === null) return;
+    for (const item of menu.current?.querySelectorAll('[role="menuitem"]') ?? []) if (item.dataset.key === list.activeKey) item.focus();
+  }, [isOpen, list.activeKey]);
+  const close = (refocus) => {
+    setOpen(false);
+    if (refocus) triggerOf(menu.current)?.focus();
+  };
+  const activate = (key) => {
+    close(true);
+    if (key !== void 0) onSelect?.(key);
+  };
+  const keyed = (event) => {
+    const result = list.key(event);
+    if (result?.intent === "open") setOpen(true);
+    else if (result?.intent === "close") close(event.key !== "Tab");
+    else if (result?.intent === "select") activate(result.key);
+  };
+  const pressedOpen = useRef(false);
+  const bound = {
+    trigger: () => ({
+      onPointerDown: () => pressedOpen.current = latest.current,
+      onClick: () => {
+        const wasOpen = pressedOpen.current || latest.current;
+        pressedOpen.current = false;
+        setOpen(!wasOpen);
+      },
+      onKeyDown: (event) => !latest.current && keyed(event),
+      onKeyUp: list.keyUp
+    }),
+    popover: () => ({ ref: menu, onKeyDown: keyed, onKeyUp: list.keyUp }),
+    menuitem: (node) => ({ onClick: () => node.attrs["aria-disabled"] !== "true" && activate(node.attrs["data-key"]) })
+  };
+  const slot = isValidElement(trigger) ? cloneElement(trigger, uiTriggerAria("menu", props.id, isOpen)) : void 0;
+  return renderUi(view, { bound, slots: { trigger: slot } });
+}
+
+export {
+  SpDropdownMenu
+};
+//# sourceMappingURL=chunk-UAWJIVQK.js.map

package/dist/chunk-UAWJIVQK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/dropdown-menu.tsx"],"sourcesContent":["import { uiDropdownMenuView, uiMenuItems, uiTriggerAria, type SpDropdownMenuProps as CoreProps, type UiElement } from '@silverpoint/core/ui';\nimport { cloneElement, isValidElement, useEffect, useRef, type KeyboardEvent, type ReactElement } from 'react';\nimport { useUi, type UiCellProps } from './base';\nimport { useListKeys } from './list';\nimport { useOpen, useOverlay, type OverlayOpenProps } from './overlay';\nimport { renderUi } from './render';\n\nexport interface SpDropdownMenuProps extends CoreProps, OverlayOpenProps, UiCellProps {\n  /** An item was activated: its key. The menu closes. */\n  readonly onSelect?: (key: string) => void;\n  /** The element that opens it, in place of the built-in button; cloned with the menu button's ARIA. */\n  readonly trigger?: ReactElement;\n}\n\n/** The element focus returns to: the built-in button, or the consumer's trigger inside its slot. */\nconst triggerOf = (menu: HTMLElement | null) => {\n  const before = menu?.previousElementSibling;\n  return (before?.classList.contains('sp-ui-trigger') ? before.firstElementChild : before) as HTMLElement | null | undefined;\n};\n\n/**\n * `SpDropdownMenu`: the APG menu button (REQ-495, DD-039). DOM focus moves to the active item;\n * every key goes through `uiListKey` and `uiTypeahead`; Enter, Space or a click activates an item,\n * closes the menu and returns focus to the trigger.\n */\nexport function SpDropdownMenu({ onSelect, trigger, open, defaultOpen, onOpenChange, dashboardCell, ...props }: SpDropdownMenuProps) {\n  const [isOpen, setOpen, latest] = useOpen({ open, defaultOpen, onOpenChange });\n  const menu = useRef<HTMLDivElement>(null);\n  useOverlay(menu, 'popover', isOpen, setOpen, { place: { side: props.side ?? 'bottom', align: props.align ?? 'start' } });\n  const items = uiMenuItems(props.items);\n  const list = useListKeys(items, 'menu', isOpen, -1);\n  const view = uiDropdownMenuView(props, useUi(props, dashboardCell), { open: isOpen, active: list.activeKey }, { trigger: trigger !== undefined });\n\n  useEffect(() => {\n    if (!isOpen || list.activeKey === null) return;\n    for (const item of menu.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]') ?? []) if (item.dataset.key === list.activeKey) item.focus();\n  }, [isOpen, list.activeKey]);\n\n  const close = (refocus: boolean) => {\n    setOpen(false);\n    if (refocus) triggerOf(menu.current)?.focus();\n  };\n  const activate = (key: string | undefined) => {\n    close(true);\n    if (key !== undefined) onSelect?.(key);\n  };\n  const keyed = (event: KeyboardEvent) => {\n    const result = list.key(event);\n    if (result?.intent === 'open') setOpen(true);\n    else if (result?.intent === 'close') close(event.key !== 'Tab');\n    else if (result?.intent === 'select') activate(result.key);\n  };\n  const pressedOpen = useRef(false);\n  const bound = {\n    trigger: () => ({\n      onPointerDown: () => (pressedOpen.current = latest.current),\n      onClick: () => {\n        const wasOpen = pressedOpen.current || latest.current;\n        pressedOpen.current = false;\n        setOpen(!wasOpen);\n      },\n      onKeyDown: (event: KeyboardEvent) => !latest.current && keyed(event),\n      onKeyUp: list.keyUp,\n    }),\n    popover: () => ({ ref: menu, onKeyDown: keyed, onKeyUp: list.keyUp }),\n    menuitem: (node: UiElement) => ({ onClick: () => node.attrs['aria-disabled'] !== 'true' && activate(node.attrs['data-key'] as string) }),\n  };\n  const slot = isValidElement(trigger) ? cloneElement(trigger as ReactElement<Record<string, unknown>>, uiTriggerAria('menu', props.id, isOpen)) : undefined;\n  return renderUi(view, { bound, slots: { trigger: slot } }) as ReactElement;\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,oBAAoB,aAAa,qBAA4E;AACtH,SAAS,cAAc,gBAAgB,WAAW,cAAqD;AAcvG,IAAM,YAAY,CAAC,SAA6B;AAC9C,QAAM,SAAS,MAAM;AACrB,SAAQ,QAAQ,UAAU,SAAS,eAAe,IAAI,OAAO,oBAAoB;AACnF;AAOO,SAAS,eAAe,EAAE,UAAU,SAAS,MAAM,aAAa,cAAc,eAAe,GAAG,MAAM,GAAwB;AACnI,QAAM,CAAC,QAAQ,SAAS,MAAM,IAAI,QAAQ,EAAE,MAAM,aAAa,aAAa,CAAC;AAC7E,QAAM,OAAO,OAAuB,IAAI;AACxC,aAAW,MAAM,WAAW,QAAQ,SAAS,EAAE,OAAO,EAAE,MAAM,MAAM,QAAQ,UAAU,OAAO,MAAM,SAAS,QAAQ,EAAE,CAAC;AACvH,QAAM,QAAQ,YAAY,MAAM,KAAK;AACrC,QAAM,OAAO,YAAY,OAAO,QAAQ,QAAQ,EAAE;AAClD,QAAM,OAAO,mBAAmB,OAAO,MAAM,OAAO,aAAa,GAAG,EAAE,MAAM,QAAQ,QAAQ,KAAK,UAAU,GAAG,EAAE,SAAS,YAAY,OAAU,CAAC;AAEhJ,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,KAAK,cAAc,KAAM;AACxC,eAAW,QAAQ,KAAK,SAAS,iBAA8B,mBAAmB,KAAK,CAAC,EAAG,KAAI,KAAK,QAAQ,QAAQ,KAAK,UAAW,MAAK,MAAM;AAAA,EACjJ,GAAG,CAAC,QAAQ,KAAK,SAAS,CAAC;AAE3B,QAAM,QAAQ,CAAC,YAAqB;AAClC,YAAQ,KAAK;AACb,QAAI,QAAS,WAAU,KAAK,OAAO,GAAG,MAAM;AAAA,EAC9C;AACA,QAAM,WAAW,CAAC,QAA4B;AAC5C,UAAM,IAAI;AACV,QAAI,QAAQ,OAAW,YAAW,GAAG;AAAA,EACvC;AACA,QAAM,QAAQ,CAAC,UAAyB;AACtC,UAAM,SAAS,KAAK,IAAI,KAAK;AAC7B,QAAI,QAAQ,WAAW,OAAQ,SAAQ,IAAI;AAAA,aAClC,QAAQ,WAAW,QAAS,OAAM,MAAM,QAAQ,KAAK;AAAA,aACrD,QAAQ,WAAW,SAAU,UAAS,OAAO,GAAG;AAAA,EAC3D;AACA,QAAM,cAAc,OAAO,KAAK;AAChC,QAAM,QAAQ;AAAA,IACZ,SAAS,OAAO;AAAA,MACd,eAAe,MAAO,YAAY,UAAU,OAAO;AAAA,MACnD,SAAS,MAAM;AACb,cAAM,UAAU,YAAY,WAAW,OAAO;AAC9C,oBAAY,UAAU;AACtB,gBAAQ,CAAC,OAAO;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAyB,CAAC,OAAO,WAAW,MAAM,KAAK;AAAA,MACnE,SAAS,KAAK;AAAA,IAChB;AAAA,IACA,SAAS,OAAO,EAAE,KAAK,MAAM,WAAW,OAAO,SAAS,KAAK,MAAM;AAAA,IACnE,UAAU,CAAC,UAAqB,EAAE,SAAS,MAAM,KAAK,MAAM,eAAe,MAAM,UAAU,SAAS,KAAK,MAAM,UAAU,CAAW,EAAE;AAAA,EACxI;AACA,QAAM,OAAO,eAAe,OAAO,IAAI,aAAa,SAAkD,cAAc,QAAQ,MAAM,IAAI,MAAM,CAAC,IAAI;AACjJ,SAAO,SAAS,MAAM,EAAE,OAAO,OAAO,EAAE,SAAS,KAAK,EAAE,CAAC;AAC3D;","names":[]}