@silverpoint/react 0.2.0 → 0.3.0

package/dist/chunk-FBJLA3P7.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';\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      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-NW2SQ6QW.js → chunk-FHX2HWN3.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/waterfall-chart.tsx
 import { waterfallChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var WaterfallChart = createClientChart(waterfallChart);
 export {
   WaterfallChart
 };
-//# sourceMappingURL=chunk-NW2SQ6QW.js.map
+//# sourceMappingURL=chunk-FHX2HWN3.js.map

package/dist/{chunk-KDQHOND7.js → chunk-FZ46YSJA.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/pyramid-chart.tsx
 import { pyramidChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var PyramidChart = createClientChart(pyramidChart);
 export {
   PyramidChart
 };
-//# sourceMappingURL=chunk-KDQHOND7.js.map
+//# sourceMappingURL=chunk-FZ46YSJA.js.map

package/dist/chunk-G7C4CH54.js

@@ -0,0 +1,17 @@
+'use client';
+import {
+  renderUi,
+  textOf,
+  useUi
+} from "./chunk-DO4VUIUU.js";
+
+// src/ui/badge.tsx
+import { uiBadgeView } from "@silverpoint/core/ui";
+function SpBadge({ children, dashboardCell, ...props }) {
+  return renderUi(uiBadgeView(props, useUi(props, dashboardCell), { text: textOf(children) }), { slots: { content: children } });
+}
+
+export {
+  SpBadge
+};
+//# sourceMappingURL=chunk-G7C4CH54.js.map

package/dist/chunk-G7C4CH54.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/badge.tsx"],"sourcesContent":["import { uiBadgeView, type SpBadgeProps as CoreProps } from '@silverpoint/core/ui';\nimport type { ReactElement, ReactNode } from 'react';\nimport { textOf, useUi, type UiCellProps } from './base';\nimport { renderUi } from './render';\n\nexport interface SpBadgeProps extends CoreProps, UiCellProps {\n  readonly children?: ReactNode;\n}\n\n/** `SpBadge`: its count is text, in the accessible name (REQ-318). */\nexport function SpBadge({ children, dashboardCell, ...props }: SpBadgeProps) {\n  return renderUi(uiBadgeView(props, useUi(props, dashboardCell), { text: textOf(children) }), { slots: { content: children } }) as ReactElement;\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,mBAAmD;AAUrD,SAAS,QAAQ,EAAE,UAAU,eAAe,GAAG,MAAM,GAAiB;AAC3E,SAAO,SAAS,YAAY,OAAO,MAAM,OAAO,aAAa,GAAG,EAAE,MAAM,OAAO,QAAQ,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;AAC/H;","names":[]}

package/dist/{chunk-GYUTG5R2.js → chunk-GSJYA76X.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/heatmap-chart.tsx
 import { heatmapChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var HeatmapChart = createClientChart(heatmapChart);
 export {
   HeatmapChart
 };
-//# sourceMappingURL=chunk-GYUTG5R2.js.map
+//# sourceMappingURL=chunk-GSJYA76X.js.map

package/dist/{chunk-TKQ2PQDW.js → chunk-GUKXFITX.js}

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

package/dist/{chunk-TAQOBBF7.js → chunk-I72JGA6Q.js}

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

package/dist/{chunk-H4NCK6RE.js → chunk-J3E6IUUQ.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/gauge-arc.tsx
 import { gaugeArc } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var GaugeArc = createClientChart(gaugeArc);
 export {
   GaugeArc
 };
-//# sourceMappingURL=chunk-H4NCK6RE.js.map
+//# sourceMappingURL=chunk-J3E6IUUQ.js.map

package/dist/{chunk-4LS7B7CK.js → chunk-JPTK2AAT.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/bar-chart.tsx
 import { barChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var BarChart = createClientChart(barChart);
 export {
   BarChart
 };
-//# sourceMappingURL=chunk-4LS7B7CK.js.map
+//# sourceMappingURL=chunk-JPTK2AAT.js.map

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

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

package/dist/{chunk-XWSCKTPG.js → chunk-KVOBNPDN.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/candlestick-chart.tsx
 import { candlestickChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var CandlestickChart = createClientChart(candlestickChart);
 export {
   CandlestickChart
 };
-//# sourceMappingURL=chunk-XWSCKTPG.js.map
+//# sourceMappingURL=chunk-KVOBNPDN.js.map

package/dist/chunk-LSA5XU52.js

@@ -0,0 +1,18 @@
+'use client';
+import {
+  renderUi,
+  textOf,
+  useUi
+} from "./chunk-DO4VUIUU.js";
+
+// src/ui/tag.tsx
+import { uiTagView } from "@silverpoint/core/ui";
+function SpTag({ children, onClose, dashboardCell, ...props }) {
+  const view = uiTagView(props, useUi(props, dashboardCell), { text: textOf(children) });
+  return renderUi(view, { close: { onClick: onClose }, slots: { content: children } });
+}
+
+export {
+  SpTag
+};
+//# sourceMappingURL=chunk-LSA5XU52.js.map

package/dist/chunk-LSA5XU52.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/tag.tsx"],"sourcesContent":["import { uiTagView, type SpTagProps as CoreProps } from '@silverpoint/core/ui';\nimport type { MouseEvent, ReactElement, ReactNode } from 'react';\nimport { textOf, useUi, type UiCellProps } from './base';\nimport { renderUi } from './render';\n\nexport interface SpTagProps extends CoreProps, UiCellProps {\n  readonly children?: ReactNode;\n  /** From the close button of a closable tag. */\n  readonly onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\n/** `SpTag`: framed and toned; closable, a native close button (REQ-308). */\nexport function SpTag({ children, onClose, dashboardCell, ...props }: SpTagProps) {\n  const view = uiTagView(props, useUi(props, dashboardCell), { text: textOf(children) });\n  return renderUi(view, { close: { onClick: onClose }, slots: { content: children } }) as ReactElement;\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,iBAA+C;AAYjD,SAAS,MAAM,EAAE,UAAU,SAAS,eAAe,GAAG,MAAM,GAAe;AAChF,QAAM,OAAO,UAAU,OAAO,MAAM,OAAO,aAAa,GAAG,EAAE,MAAM,OAAO,QAAQ,EAAE,CAAC;AACrF,SAAO,SAAS,MAAM,EAAE,OAAO,EAAE,SAAS,QAAQ,GAAG,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;AACrF;","names":[]}

package/dist/chunk-M56MDRNT.js

@@ -0,0 +1,17 @@
+'use client';
+import {
+  renderUi,
+  useUi
+} from "./chunk-DO4VUIUU.js";
+
+// src/ui/alert.tsx
+import { uiAlertView } from "@silverpoint/core/ui";
+function SpAlert({ children, onClose, dashboardCell, ...props }) {
+  const view = uiAlertView(props, useUi(props, dashboardCell), { closable: props.closable === true });
+  return renderUi(view, { close: { onClick: onClose }, slots: { content: children } });
+}
+
+export {
+  SpAlert
+};
+//# sourceMappingURL=chunk-M56MDRNT.js.map

package/dist/chunk-M56MDRNT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/alert.tsx"],"sourcesContent":["import { uiAlertView, type SpAlertProps as CoreProps } from '@silverpoint/core/ui';\nimport type { MouseEvent, ReactElement, ReactNode } from 'react';\nimport { useUi, type UiCellProps } from './base';\nimport { renderUi } from './render';\n\nexport interface SpAlertProps extends CoreProps, UiCellProps {\n  readonly children?: ReactNode;\n  /** From the close button of a closable alert. */\n  readonly onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\n/** `SpAlert`: `alert` or `status` by kind (REQ-318); closable, a native close button. */\nexport function SpAlert({ children, onClose, dashboardCell, ...props }: SpAlertProps) {\n  const view = uiAlertView(props, useUi(props, dashboardCell), { closable: props.closable === true });\n  return renderUi(view, { close: { onClick: onClose }, slots: { content: children } }) as ReactElement;\n}\n"],"mappings":";;;;;;;AAAA,SAAS,mBAAmD;AAYrD,SAAS,QAAQ,EAAE,UAAU,SAAS,eAAe,GAAG,MAAM,GAAiB;AACpF,QAAM,OAAO,YAAY,OAAO,MAAM,OAAO,aAAa,GAAG,EAAE,UAAU,MAAM,aAAa,KAAK,CAAC;AAClG,SAAO,SAAS,MAAM,EAAE,OAAO,EAAE,SAAS,QAAQ,GAAG,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;AACrF;","names":[]}

package/dist/{chunk-FZMY6NWJ.js → chunk-MC7N4KQA.js}

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

package/dist/{chunk-UXVYCPFL.js → chunk-MYKZWY2E.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/wind-rose.tsx
 import { windRose } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var WindRose = createClientChart(windRose);
 export {
   WindRose
 };
-//# sourceMappingURL=chunk-UXVYCPFL.js.map
+//# sourceMappingURL=chunk-MYKZWY2E.js.map

package/dist/{chunk-GBTH55AM.js → chunk-NA6K372D.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/polar-bar-chart.tsx
 import { polarBarChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var PolarBarChart = createClientChart(polarBarChart);
 export {
   PolarBarChart
 };
-//# sourceMappingURL=chunk-GBTH55AM.js.map
+//# sourceMappingURL=chunk-NA6K372D.js.map

package/dist/{chunk-E5LIZKJT.js → chunk-NWK6VBCJ.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/sparkline-rows.tsx
 import { sparklineRows } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var SparklineRows = createClientChart(sparklineRows);
 export {
   SparklineRows
 };
-//# sourceMappingURL=chunk-E5LIZKJT.js.map
+//# sourceMappingURL=chunk-NWK6VBCJ.js.map

package/dist/{chunk-WICFKWEZ.js → chunk-NWRCFNYB.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/range-band-chart.tsx
 import { rangeBandChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var RangeBandChart = createClientChart(rangeBandChart);
 export {
   RangeBandChart
 };
-//# sourceMappingURL=chunk-WICFKWEZ.js.map
+//# sourceMappingURL=chunk-NWRCFNYB.js.map

package/dist/{chunk-CERHTEML.js → chunk-OAH7AEGE.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/radial-arc-group.tsx
 import { radialArcGroup } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var RadialArcGroup = createClientChart(radialArcGroup);
 export {
   RadialArcGroup
 };
-//# sourceMappingURL=chunk-CERHTEML.js.map
+//# sourceMappingURL=chunk-OAH7AEGE.js.map

package/dist/chunk-OP2WE7MA.js

@@ -0,0 +1,31 @@
+'use client';
+import {
+  renderUi,
+  useUi,
+  useValue
+} from "./chunk-DO4VUIUU.js";
+
+// src/ui/tabs.tsx
+import { uiItems, uiRovingFocus, uiSelectedKey, uiTabPanelView, uiTabsView } from "@silverpoint/core/ui";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var TabsContext = createContext({ value: null });
+function SpTabs({ value, defaultValue, onChange, children, dashboardCell, ...props }) {
+  const [current, set] = useValue(value, defaultValue, onChange);
+  const view = uiTabsView(props, useUi(props, dashboardCell), { value: current ?? null });
+  const selected = uiSelectedKey(uiItems(props.items, "SpTabs"), current, "first");
+  const native = { onClick: (event) => set(String(event.currentTarget.dataset.key)) };
+  const orientation = props.orientation ?? "horizontal";
+  const onKeyDown = (event) => uiRovingFocus(event, event.currentTarget, '[role="tab"]', orientation, props.activation !== "manual");
+  const content = /* @__PURE__ */ jsx(TabsContext.Provider, { value: { id: props.id, value: selected }, children });
+  return renderUi(view, { root: { onKeyDown }, native, slots: { content } });
+}
+function SpTabPanel({ value, children }) {
+  return renderUi(uiTabPanelView({ value }, useContext(TabsContext)), { slots: { content: children } });
+}
+
+export {
+  SpTabs,
+  SpTabPanel
+};
+//# sourceMappingURL=chunk-OP2WE7MA.js.map

package/dist/chunk-OP2WE7MA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/tabs.tsx"],"sourcesContent":["import { uiItems, uiRovingFocus, uiSelectedKey, uiTabPanelView, uiTabsView, type SpTabsProps as CoreProps } from '@silverpoint/core/ui';\nimport { createContext, useContext, type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react';\nimport { useUi, useValue, type UiCellProps } from './base';\nimport { renderUi } from './render';\n\nexport interface SpTabsProps extends CoreProps, UiCellProps {\n  /** Controlled key; an unknown one shows the first enabled tab. */\n  readonly value?: string;\n  readonly defaultValue?: string;\n  /** The key selected, not the DOM event (REQ-322). */\n  readonly onChange?: (value: string) => void;\n  /** `SpTabPanel` elements. */\n  readonly children?: ReactNode;\n}\n\n/** What a panel reads from its tabs: their id, for the ids that relate them, and the selected key. */\nconst TabsContext = createContext<{ readonly id?: string; readonly value: string | null }>({ value: null });\n\n/** `SpTabs`: a tablist of native buttons, one tab stop; arrows through the core, `activation` as APG (REQ-315). */\nexport function SpTabs({ value, defaultValue, onChange, children, dashboardCell, ...props }: SpTabsProps) {\n  const [current, set] = useValue<string | undefined>(value, defaultValue, onChange as (next: string | undefined) => void);\n  const view = uiTabsView(props, useUi(props, dashboardCell), { value: current ?? null });\n  const selected = uiSelectedKey(uiItems(props.items, 'SpTabs'), current, 'first');\n  const native = { onClick: (event: MouseEvent<HTMLButtonElement>) => set(String(event.currentTarget.dataset.key)) };\n  const orientation = props.orientation ?? 'horizontal';\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>) =>\n    uiRovingFocus(event, event.currentTarget, '[role=\"tab\"]', orientation, props.activation !== 'manual');\n  const content = <TabsContext.Provider value={{ id: props.id, value: selected }}>{children}</TabsContext.Provider>;\n  return renderUi(view, { root: { onKeyDown }, native, slots: { content } }) as ReactElement;\n}\n\nexport interface SpTabPanelProps {\n  /** The key of the tab that shows this panel. */\n  readonly value: string;\n  readonly children?: ReactNode;\n}\n\n/** `SpTabPanel`: a `tabpanel` labelled by its tab, hidden unless its tab is selected. */\nexport function SpTabPanel({ value, children }: SpTabPanelProps) {\n  return renderUi(uiTabPanelView({ value }, useContext(TabsContext)), { slots: { content: children } }) as ReactElement;\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,SAAS,eAAe,eAAe,gBAAgB,kBAAiD;AACjH,SAAS,eAAe,kBAA0F;AA0BhG;AAXlB,IAAM,cAAc,cAAuE,EAAE,OAAO,KAAK,CAAC;AAGnG,SAAS,OAAO,EAAE,OAAO,cAAc,UAAU,UAAU,eAAe,GAAG,MAAM,GAAgB;AACxG,QAAM,CAAC,SAAS,GAAG,IAAI,SAA6B,OAAO,cAAc,QAA8C;AACvH,QAAM,OAAO,WAAW,OAAO,MAAM,OAAO,aAAa,GAAG,EAAE,OAAO,WAAW,KAAK,CAAC;AACtF,QAAM,WAAW,cAAc,QAAQ,MAAM,OAAO,QAAQ,GAAG,SAAS,OAAO;AAC/E,QAAM,SAAS,EAAE,SAAS,CAAC,UAAyC,IAAI,OAAO,MAAM,cAAc,QAAQ,GAAG,CAAC,EAAE;AACjH,QAAM,cAAc,MAAM,eAAe;AACzC,QAAM,YAAY,CAAC,UACjB,cAAc,OAAO,MAAM,eAAe,gBAAgB,aAAa,MAAM,eAAe,QAAQ;AACtG,QAAM,UAAU,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,IAAI,MAAM,IAAI,OAAO,SAAS,GAAI,UAAS;AAC1F,SAAO,SAAS,MAAM,EAAE,MAAM,EAAE,UAAU,GAAG,QAAQ,OAAO,EAAE,QAAQ,EAAE,CAAC;AAC3E;AASO,SAAS,WAAW,EAAE,OAAO,SAAS,GAAoB;AAC/D,SAAO,SAAS,eAAe,EAAE,MAAM,GAAG,WAAW,WAAW,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;AACtG;","names":[]}

package/dist/{chunk-OFDVE64G.js → chunk-PRVJKYEQ.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/radar-chart.tsx
 import { radarChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var RadarChart = createClientChart(radarChart);
 export {
   RadarChart
 };
-//# sourceMappingURL=chunk-OFDVE64G.js.map
+//# sourceMappingURL=chunk-PRVJKYEQ.js.map

package/dist/chunk-QRYI7BEO.js

@@ -0,0 +1,21 @@
+'use client';
+import {
+  renderUi,
+  useUi,
+  useValue
+} from "./chunk-DO4VUIUU.js";
+
+// src/ui/input.tsx
+import { uiInputView } from "@silverpoint/core/ui";
+import { forwardRef } from "react";
+var SpInput = forwardRef(function SpInput2({ value, defaultValue, onChange, prefix, suffix, dashboardCell, ...props }, ref) {
+  const [current, set] = useValue(value, defaultValue ?? "", onChange);
+  const view = uiInputView(props, useUi(props, dashboardCell), { value: current, prefix: prefix != null, suffix: suffix != null });
+  const native = { ref, value: current, onChange: (event) => set(event.target.value) };
+  return renderUi(view, { native, slots: { prefix, suffix } });
+});
+
+export {
+  SpInput
+};
+//# sourceMappingURL=chunk-QRYI7BEO.js.map

package/dist/chunk-QRYI7BEO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/input.tsx"],"sourcesContent":["import { uiInputView, type SpInputProps as CoreProps } from '@silverpoint/core/ui';\nimport { forwardRef, type ChangeEvent, type ReactNode, type ReactElement } from 'react';\nimport { useUi, useValue, type UiCellProps } from './base';\nimport { renderUi } from './render';\n\nexport interface SpInputProps extends CoreProps, UiCellProps {\n  /** Controlled value. */\n  readonly value?: string;\n  readonly defaultValue?: string;\n  /** The new value, not the DOM event (REQ-322). */\n  readonly onChange?: (value: string) => void;\n  readonly prefix?: ReactNode;\n  readonly suffix?: ReactNode;\n}\n\n/** `SpInput`: a native `<input>` in a framed box; its ref is the input (REQ-314, REQ-334). */\nexport const SpInput = forwardRef<HTMLInputElement, SpInputProps>(function SpInput(\n  { value, defaultValue, onChange, prefix, suffix, dashboardCell, ...props },\n  ref,\n) {\n  const [current, set] = useValue(value, defaultValue ?? '', onChange);\n  const view = uiInputView(props, useUi(props, dashboardCell), { value: current, prefix: prefix != null, suffix: suffix != null });\n  const native = { ref, value: current, onChange: (event: ChangeEvent<HTMLInputElement>) => set(event.target.value) };\n  return renderUi(view, { native, slots: { prefix, suffix } }) as ReactElement;\n});\n"],"mappings":";;;;;;;;AAAA,SAAS,mBAAmD;AAC5D,SAAS,kBAAuE;AAezE,IAAM,UAAU,WAA2C,SAASA,SACzE,EAAE,OAAO,cAAc,UAAU,QAAQ,QAAQ,eAAe,GAAG,MAAM,GACzE,KACA;AACA,QAAM,CAAC,SAAS,GAAG,IAAI,SAAS,OAAO,gBAAgB,IAAI,QAAQ;AACnE,QAAM,OAAO,YAAY,OAAO,MAAM,OAAO,aAAa,GAAG,EAAE,OAAO,SAAS,QAAQ,UAAU,MAAM,QAAQ,UAAU,KAAK,CAAC;AAC/H,QAAM,SAAS,EAAE,KAAK,OAAO,SAAS,UAAU,CAAC,UAAyC,IAAI,MAAM,OAAO,KAAK,EAAE;AAClH,SAAO,SAAS,MAAM,EAAE,QAAQ,OAAO,EAAE,QAAQ,OAAO,EAAE,CAAC;AAC7D,CAAC;","names":["SpInput"]}

package/dist/{chunk-P53KSCPE.js → chunk-RAATAHXZ.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/sankey-chart.tsx
 import { sankeyChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var SankeyChart = createClientChart(sankeyChart);
 export {
   SankeyChart
 };
-//# sourceMappingURL=chunk-P53KSCPE.js.map
+//# sourceMappingURL=chunk-RAATAHXZ.js.map

package/dist/{chunk-FQHAHZBR.js → chunk-RIGQTEKW.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/funnel-chart.tsx
 import { funnelChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var FunnelChart = createClientChart(funnelChart);
 export {
   FunnelChart
 };
-//# sourceMappingURL=chunk-FQHAHZBR.js.map
+//# sourceMappingURL=chunk-RIGQTEKW.js.map

package/dist/{chunk-NHUVAE4Z.js → chunk-RMIIFPXA.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/coxcomb-chart.tsx
 import { coxcombChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var CoxcombChart = createClientChart(coxcombChart);
 export {
   CoxcombChart
 };
-//# sourceMappingURL=chunk-NHUVAE4Z.js.map
+//# sourceMappingURL=chunk-RMIIFPXA.js.map

package/dist/chunk-SQ6GWXDK.js

@@ -0,0 +1,48 @@
+'use client';
+
+// src/context.ts
+import { createContext } from "react";
+var SilverpointContext = createContext({});
+
+// src/environment.ts
+import { checkTypeface, FORCED_PRECISION_QUERY } from "@silverpoint/core";
+import { useEffect, useState } from "react";
+function useForcedPrecision() {
+  const [forced, setForced] = useState(false);
+  useEffect(() => {
+    if (typeof matchMedia !== "function") return;
+    const query = matchMedia(FORCED_PRECISION_QUERY);
+    const update = () => setForced(query.matches);
+    update();
+    query.addEventListener?.("change", update);
+    return () => query.removeEventListener?.("change", update);
+  }, []);
+  return forced;
+}
+function useMeasuredWidth(ref, enabled) {
+  const [width, setWidth] = useState(void 0);
+  useEffect(() => {
+    const element = ref.current;
+    if (!enabled || !element || typeof ResizeObserver !== "function") return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setWidth(entry.contentRect.width);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref, enabled]);
+  return width;
+}
+function useTypefaceCheck(chart) {
+  useEffect(() => {
+    if (typeof document !== "undefined" && document.fonts) void checkTypeface(document.fonts, chart);
+  }, [chart]);
+}
+
+export {
+  SilverpointContext,
+  useForcedPrecision,
+  useMeasuredWidth,
+  useTypefaceCheck
+};
+//# sourceMappingURL=chunk-SQ6GWXDK.js.map

package/dist/chunk-SQ6GWXDK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.ts","../src/environment.ts"],"sourcesContent":["import type { ProviderConfig } from '@silverpoint/core';\nimport { createContext } from 'react';\n\n/** Application-wide configuration (API Spec §8.1); a chart prop always wins over it. */\nexport const SilverpointContext = createContext<ProviderConfig>({});\n","import { checkTypeface, FORCED_PRECISION_QUERY } from '@silverpoint/core';\nimport { useEffect, useState, type RefObject } from 'react';\n\n/**\n * Whether the environment forces `precision` (REQ-123). Read after hydration, so the server\n * render and the first client render agree (REQ-103).\n */\nexport function useForcedPrecision(): boolean {\n  const [forced, setForced] = useState(false);\n  useEffect(() => {\n    if (typeof matchMedia !== 'function') return;\n    const query = matchMedia(FORCED_PRECISION_QUERY);\n    const update = () => setForced(query.matches);\n    update();\n    query.addEventListener?.('change', update);\n    return () => query.removeEventListener?.('change', update);\n  }, []);\n  return forced;\n}\n\n/** Width of the container, measured with ResizeObserver; `undefined` until measured (REQ-009). */\nexport function useMeasuredWidth(ref: RefObject<HTMLElement | null>, enabled: boolean): number | undefined {\n  const [width, setWidth] = useState<number | undefined>(undefined);\n  useEffect(() => {\n    const element = ref.current;\n    if (!enabled || !element || typeof ResizeObserver !== 'function') return;\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (entry) setWidth(entry.contentRect.width);\n    });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref, enabled]);\n  return width;\n}\n\n/** Reports SP013 when the display typeface fails to load; never blocks the render (REQ-032). */\nexport function useTypefaceCheck(chart: string): void {\n  useEffect(() => {\n    if (typeof document !== 'undefined' && document.fonts) void checkTypeface(document.fonts, chart);\n  }, [chart]);\n}\n"],"mappings":";;;AACA,SAAS,qBAAqB;AAGvB,IAAM,qBAAqB,cAA8B,CAAC,CAAC;;;ACJlE,SAAS,eAAe,8BAA8B;AACtD,SAAS,WAAW,gBAAgC;AAM7C,SAAS,qBAA8B;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,YAAU,MAAM;AACd,QAAI,OAAO,eAAe,WAAY;AACtC,UAAM,QAAQ,WAAW,sBAAsB;AAC/C,UAAM,SAAS,MAAM,UAAU,MAAM,OAAO;AAC5C,WAAO;AACP,UAAM,mBAAmB,UAAU,MAAM;AACzC,WAAO,MAAM,MAAM,sBAAsB,UAAU,MAAM;AAAA,EAC3D,GAAG,CAAC,CAAC;AACL,SAAO;AACT;AAGO,SAAS,iBAAiB,KAAoC,SAAsC;AACzG,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B,MAAS;AAChE,YAAU,MAAM;AACd,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,WAAW,CAAC,WAAW,OAAO,mBAAmB,WAAY;AAClE,UAAM,WAAW,IAAI,eAAe,CAAC,YAAY;AAC/C,YAAM,QAAQ,QAAQ,CAAC;AACvB,UAAI,MAAO,UAAS,MAAM,YAAY,KAAK;AAAA,IAC7C,CAAC;AACD,aAAS,QAAQ,OAAO;AACxB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,KAAK,OAAO,CAAC;AACjB,SAAO;AACT;AAGO,SAAS,iBAAiB,OAAqB;AACpD,YAAU,MAAM;AACd,QAAI,OAAO,aAAa,eAAe,SAAS,MAAO,MAAK,cAAc,SAAS,OAAO,KAAK;AAAA,EACjG,GAAG,CAAC,KAAK,CAAC;AACZ;","names":[]}

package/dist/chunk-TH6Q4E7C.js

@@ -0,0 +1,21 @@
+'use client';
+import {
+  renderUi,
+  useUi,
+  useValue
+} from "./chunk-DO4VUIUU.js";
+
+// src/ui/segmented.tsx
+import { uiRovingFocus, uiSegmentedView } from "@silverpoint/core/ui";
+function SpSegmented({ value, defaultValue, onChange, dashboardCell, ...props }) {
+  const [current, set] = useValue(value, defaultValue, onChange);
+  const view = uiSegmentedView(props, useUi(props, dashboardCell), { value: current ?? null });
+  const native = (node) => ({ checked: node.attrs.checked === true, onChange: (event) => set(event.target.value) });
+  const onKeyDown = (event) => uiRovingFocus(event, event.currentTarget, "input.sp-ui-native", "both", true);
+  return renderUi(view, { root: { onKeyDown }, native });
+}
+
+export {
+  SpSegmented
+};
+//# sourceMappingURL=chunk-TH6Q4E7C.js.map

package/dist/chunk-TH6Q4E7C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/segmented.tsx"],"sourcesContent":["import { uiRovingFocus, uiSegmentedView, type SpSegmentedProps as CoreProps, type UiElement } from '@silverpoint/core/ui';\nimport type { ChangeEvent, KeyboardEvent, ReactElement } from 'react';\nimport { useUi, useValue, type UiCellProps } from './base';\nimport { renderUi } from './render';\n\nexport interface SpSegmentedProps extends CoreProps, UiCellProps {\n  /** Controlled key; an unknown one shows the first enabled segment. */\n  readonly value?: string;\n  readonly defaultValue?: string;\n  /** The key selected, not the DOM event (REQ-322). */\n  readonly onChange?: (value: string) => void;\n}\n\n/** `SpSegmented`: native radios in one frame; arrows move and select through the core (REQ-315). */\nexport function SpSegmented({ value, defaultValue, onChange, dashboardCell, ...props }: SpSegmentedProps) {\n  const [current, set] = useValue<string | undefined>(value, defaultValue, onChange as (next: string | undefined) => void);\n  const view = uiSegmentedView(props, useUi(props, dashboardCell), { value: current ?? null });\n  const native = (node: UiElement) => ({ checked: node.attrs.checked === true, onChange: (event: ChangeEvent<HTMLInputElement>) => set(event.target.value) });\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>) => uiRovingFocus(event, event.currentTarget, 'input.sp-ui-native', 'both', true);\n  return renderUi(view, { root: { onKeyDown }, native }) as ReactElement;\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,eAAe,uBAA2E;AAc5F,SAAS,YAAY,EAAE,OAAO,cAAc,UAAU,eAAe,GAAG,MAAM,GAAqB;AACxG,QAAM,CAAC,SAAS,GAAG,IAAI,SAA6B,OAAO,cAAc,QAA8C;AACvH,QAAM,OAAO,gBAAgB,OAAO,MAAM,OAAO,aAAa,GAAG,EAAE,OAAO,WAAW,KAAK,CAAC;AAC3F,QAAM,SAAS,CAAC,UAAqB,EAAE,SAAS,KAAK,MAAM,YAAY,MAAM,UAAU,CAAC,UAAyC,IAAI,MAAM,OAAO,KAAK,EAAE;AACzJ,QAAM,YAAY,CAAC,UAAsC,cAAc,OAAO,MAAM,eAAe,sBAAsB,QAAQ,IAAI;AACrI,SAAO,SAAS,MAAM,EAAE,MAAM,EAAE,UAAU,GAAG,OAAO,CAAC;AACvD;","names":[]}

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

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

package/dist/{chunk-7KED5KUU.js → chunk-U3LT444G.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/area-chart.tsx
 import { areaChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var AreaChart = createClientChart(areaChart);
 export {
   AreaChart
 };
-//# sourceMappingURL=chunk-7KED5KUU.js.map
+//# sourceMappingURL=chunk-U3LT444G.js.map

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

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

package/dist/{chunk-VISNFHPM.js → chunk-VKNGQ4NW.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-WNX4XCL6.js";
+} from "./chunk-FBJLA3P7.js";
 
 // src/kpi-card.tsx
 import { kpiCard } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var KpiCard = createClientChart(kpiCard);
 export {
   KpiCard
 };
-//# sourceMappingURL=chunk-VISNFHPM.js.map
+//# sourceMappingURL=chunk-VKNGQ4NW.js.map