@silverpoint/react 0.1.1 → 0.3.0

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

@@ -1,20 +1,31 @@
 'use client';
+import {
+  DashboardLinkContext
+} from "./chunk-4GQ5X2WK.js";
+import {
+  SilverpointContext,
+  useForcedPrecision,
+  useMeasuredWidth,
+  useTypefaceCheck
+} from "./chunk-SQ6GWXDK.js";
 
 // src/create-chart.tsx
 import {
+  inCell,
   instanceId,
+  linkFrom,
   reduceInteraction
 } from "@silverpoint/core";
 import { renderChart, toSVGString } from "@silverpoint/grounds";
 import {
   forwardRef,
-  useContext,
-  useEffect as useEffect2,
+  useContext as useContext2,
+  useEffect,
   useId,
   useImperativeHandle,
   useMemo,
   useRef,
-  useState as useState2
+  useState
 } from "react";
 
 // src/chart-svg.tsx
@@ -28,6 +39,7 @@ function Path({ path }) {
       "data-role": path.role,
       "data-paint": path.paint,
       "data-dash": path.dash ?? void 0,
+      "data-weight": path.weight ?? void 0,
       fill: path.fill ?? void 0
     }
   );
@@ -99,47 +111,9 @@ function ChartFrame({ rendered, className, rootProps, rootRef, overlay }) {
   );
 }
 
-// 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]);
-}
-
 // src/overlay.tsx
-import { readout } from "@silverpoint/core";
+import { linkedMarks, readout } from "@silverpoint/core";
+import { useContext } from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function Overlay({
   rendered,
@@ -147,7 +121,9 @@ function Overlay({
   tooltip
 }) {
   const current = active ? readout(rendered, active) : null;
+  const linked = linkedMarks(rendered, useContext(DashboardLinkContext)?.state);
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    linked.length > 0 && /* @__PURE__ */ jsx3("svg", { className: "sp-marker", part: "linked", viewBox: rendered.view.svg.viewBox, "aria-hidden": "true", focusable: "false", children: linked.map((d, index) => /* @__PURE__ */ jsx3("path", { d }, index)) }),
     current && active && /* @__PURE__ */ jsxs3(Fragment, { children: [
       /* @__PURE__ */ jsx3("svg", { className: "sp-marker", viewBox: rendered.view.svg.viewBox, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx3("path", { d: current.marker.d }) }),
       /* @__PURE__ */ jsx3("div", { className: "sp-readout", style: { left: current.left, top: current.top }, "aria-hidden": "true", children: tooltip ? tooltip(active, current) : /* @__PURE__ */ jsxs3(Fragment, { children: [
@@ -164,29 +140,30 @@ import { jsx as jsx4 } from "react/jsx-runtime";
 function createClientChart(recipe) {
   const Chart = forwardRef(function Chart2(allProps, ref) {
     const { onActiveChange, onSelect, tooltip } = allProps;
-    const provider = useContext(SilverpointContext);
+    const provider = useContext2(SilverpointContext);
+    const link = useContext2(DashboardLinkContext);
     const generated = useId();
     const rootRef = useRef(null);
     const forcedPrecision = useForcedPrecision();
     useTypefaceCheck(recipe.name);
     const measured = useMeasuredWidth(rootRef, allProps.width === void 0);
-    const rendered = useMemo(
-      () => renderChart(recipe, allProps, {
+    const rendered = useMemo(() => {
+      const { dashboardCell, ...own } = allProps;
+      const fitted = inCell(own, dashboardCell, recipe);
+      return renderChart(recipe, fitted.props, {
         id: instanceId(recipe.name, generated),
-        width: measured,
+        width: measured ?? fitted.width,
         provider,
         forcedPrecision
-      }),
-      // Keyed on the props object React hands in, which is stable across this component's own
-      // state changes, so moving the pointer never re-inks the chart.
-      [allProps, generated, measured, provider, forcedPrecision]
-    );
-    const [active, setActive] = useState2(null);
+      });
+    }, [allProps, generated, measured, provider, forcedPrecision]);
+    const [active, setActive] = useState(null);
     const dispatch = (event) => {
       const result = reduceInteraction(rendered.geometry, active, event);
       if (result.changed) {
         setActive(result.active);
         onActiveChange?.(result.active);
+        link?.set(linkFrom(link.key, rendered.id, result.active));
       }
       if (result.selected) onSelect?.(result.selected);
       return result.handled;
@@ -194,7 +171,7 @@ function createClientChart(recipe) {
     const latest = useRef(dispatch);
     latest.current = dispatch;
     const showing = active !== null;
-    useEffect2(() => {
+    useEffect(() => {
       if (!showing) return void 0;
       const onKey = (event) => {
         if (event.key === "Escape" && !rootRef.current?.contains(event.target)) latest.current({ type: "key", key: "Escape" });
@@ -251,7 +228,6 @@ function createClientChart(recipe) {
 }
 
 export {
-  SilverpointContext,
   createClientChart
 };
-//# sourceMappingURL=chunk-BHZNDYU3.js.map
+//# sourceMappingURL=chunk-FBJLA3P7.js.map

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-NOVLEZPR.js → chunk-FHX2HWN3.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-NOVLEZPR.js.map
+//# sourceMappingURL=chunk-FHX2HWN3.js.map

package/dist/{chunk-2Q2ZZTUW.js → chunk-FZ46YSJA.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-2Q2ZZTUW.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-KTBGRGB7.js → chunk-GSJYA76X.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-KTBGRGB7.js.map
+//# sourceMappingURL=chunk-GSJYA76X.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-DYK3SUIZ.js.map
+//# sourceMappingURL=chunk-GUKXFITX.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-HYQLSAEO.js.map
+//# sourceMappingURL=chunk-I72JGA6Q.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-AQMWZQ2P.js.map
+//# sourceMappingURL=chunk-J3E6IUUQ.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-4DUH2UHE.js.map
+//# sourceMappingURL=chunk-JPTK2AAT.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-YS5YVHK5.js.map
+//# sourceMappingURL=chunk-JWCVL7VE.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-KPWHWNZH.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-HH2RZCH6.js → chunk-MC7N4KQA.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-HH2RZCH6.js.map
+//# sourceMappingURL=chunk-MC7N4KQA.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-RUC577P7.js.map
+//# sourceMappingURL=chunk-MYKZWY2E.js.map

package/dist/{chunk-5LQGSI6N.js → chunk-NA6K372D.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-5LQGSI6N.js.map
+//# sourceMappingURL=chunk-NA6K372D.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-JCIEWEQC.js.map
+//# sourceMappingURL=chunk-NWK6VBCJ.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-CI4PGKUI.js.map
+//# sourceMappingURL=chunk-NWRCFNYB.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-WLHXHAEV.js.map
+//# sourceMappingURL=chunk-OAH7AEGE.js.map

package/dist/chunk-OD6N2ATZ.js

@@ -0,0 +1,45 @@
+// src/dashboard-markup.tsx
+import { dashboardView } from "@silverpoint/core";
+import { Children, cloneElement, isValidElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DashboardCell({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+var asStyle = (vars) => vars;
+function DashboardMarkup({ children, wrapGrid, ...props }) {
+  const given = Children.toArray(children).map((child) => {
+    const marked = isValidElement(child) && child.type === DashboardCell;
+    const content = marked ? child.props.children : child;
+    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 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];
+    return /* @__PURE__ */ jsx("article", { className: "sp-dashboard-cell", part: "dashboard-cell", "aria-labelledby": cell.labelledby, style: asStyle(cell.style), children: chart ? cloneElement(chart, { dashboardCell: cell.context }) : content }, cell.context.chartId);
+  }) });
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: view.section.className,
+      part: "dashboard",
+      "data-substrate": view.section.substrate,
+      "aria-labelledby": view.section.labelledby,
+      "aria-describedby": view.section.describedby,
+      "aria-label": view.section.label,
+      style: asStyle(view.section.style),
+      children: [
+        Heading && view.heading && /* @__PURE__ */ jsx(Heading, { className: "sp-dashboard-title", part: "dashboard-title", id: view.heading.id, children: view.heading.text }),
+        view.description && /* @__PURE__ */ jsx("p", { className: "sp-dashboard-description", part: "dashboard-description", id: view.description.id, children: view.description.text }),
+        wrapGrid ? wrapGrid(grid) : grid
+      ]
+    }
+  );
+}
+
+export {
+  DashboardCell,
+  DashboardMarkup
+};
+//# sourceMappingURL=chunk-OD6N2ATZ.js.map

package/dist/chunk-OD6N2ATZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dashboard-markup.tsx"],"sourcesContent":["import { dashboardView, type DashboardCellContext, type DashboardProps } from '@silverpoint/core';\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  const view = dashboardView(props, given.map(({ cell, id }) => ({ cell, id })));\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,UAAU,cAAc,sBAA6E;AAcrG,wBAqCL,YArCK;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;AACD,QAAM,OAAO,cAAc,OAAO,MAAM,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,EAAE,CAAC;AAC7E,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-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-DZPDZGM7.js → chunk-PRVJKYEQ.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.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-DZPDZGM7.js.map
+//# sourceMappingURL=chunk-PRVJKYEQ.js.map