basalt-ui 1.41.0 → 2.0.0

package/dist/charts/primitives/ChartCard.js

@@ -1,143 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useReducer, useState } from "react";
-import { cx } from "../../common/props.js";
-import { VX } from "../../tokens/index.js";
-import { WidgetHeader } from "../../dashboard/widget-header.js";
-import { useChartSize } from "../hooks/useChartSize.js";
-import { useHysteresis } from "../hooks/use-hysteresis.js";
-import { ChartCardContext, legendSlotReducer } from "./chart-card-context.js";
-import { ChartEmpty, ChartError, ChartPending, resolveChartState } from "./ChartPending.js";
-const CARD_SHORT_HEIGHT = 280;
-const SHORT_EXIT_SLACK = 24;
-const cardStyle = {
-  display: "flex",
-  flexDirection: "column",
-  minHeight: 0,
-  containerType: "inline-size",
-  containerName: "basalt-card",
-  borderRadius: VX.radiusCard,
-  boxShadow: VX.shadowCard,
-  backgroundColor: VX.surface.panel
-};
-const bodyClipStyle = {
-  // Clip the chart body to the card's bottom corners — a chart with its own square edges would
-  // otherwise poke past the card's border-radius. Only the bottom corners: the body's top edge is
-  // interior, sitting under the (unclipped) header. Trade-off: a chart tooltip that overflows the
-  // card bounds is clipped too; the kinds keep tooltips inside the plot area, so this is fine in
-  // practice — a consumer rendering an oversized/edge tooltip should portal it out of the card.
-  borderBottomLeftRadius: VX.radiusCard,
-  borderBottomRightRadius: VX.radiusCard,
-  overflow: "hidden",
-  flex: "1 1 auto",
-  minHeight: 0,
-  // A column, so a `ChartFrame` inside can grow into the body a stretched grid row hands the card.
-  display: "flex",
-  flexDirection: "column",
-  padding: "2px var(--vx-space-card-inset-x, 0.8125rem) var(--vx-space-card-inset-y, 0.6875rem)"
-};
-const headerWrapStyle = {
-  padding: "var(--vx-space-card-inset-y, 0.6875rem) var(--vx-space-card-inset-x, 0.8125rem) 4px"
-};
-const headerWrapShortStyle = {
-  padding: "4px var(--vx-space-card-inset-x, 0.8125rem) 4px"
-};
-function ChartCard({
-  title,
-  icon,
-  subtitle,
-  info,
-  value,
-  delta,
-  deltaPeriod,
-  deltaPolarity,
-  count,
-  actions,
-  state,
-  placeholderHeight = 240,
-  stateAction,
-  className,
-  classNames,
-  style,
-  children
-}) {
-  const [legendSlot, setLegendSlot] = useState(null);
-  const { ref: sizeRef, height: measuredHeight } = useChartSize();
-  const resolvedState = resolveChartState({ ...state !== void 0 && { state } });
-  const hasHeader = title !== void 0 || info !== void 0 || value !== void 0 || actions !== void 0 || icon !== void 0 || count !== void 0;
-  const short = useHysteresis(
-    (wasShort) => measuredHeight > 0 && measuredHeight < (wasShort ? CARD_SHORT_HEIGHT + SHORT_EXIT_SLACK : CARD_SHORT_HEIGHT),
-    false
-  );
-  const [legendClaimants, dispatchLegendSlot] = useReducer(legendSlotReducer, []);
-  const context = useMemo(
-    () => ({ legendSlot, inCard: true, short, legendClaimants, dispatchLegendSlot }),
-    [legendSlot, short, legendClaimants]
-  );
-  return /* @__PURE__ */ jsx(ChartCardContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: sizeRef,
-      className: cx(classNames?.root, className),
-      style: { ...cardStyle, ...style },
-      ...resolvedState === "pending" && { "aria-busy": "true" },
-      ...short && { "data-basalt-card-short": "" },
-      children: [
-        hasHeader && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ...classNames?.header !== void 0 && { className: classNames.header },
-            style: short ? headerWrapShortStyle : headerWrapStyle,
-            children: [
-              /* @__PURE__ */ jsx(
-                WidgetHeader,
-                {
-                  tier: "widget",
-                  title: title ?? "",
-                  ...icon !== void 0 && { icon },
-                  ...subtitle !== void 0 && { subtitle },
-                  ...info !== void 0 && { info },
-                  ...value !== void 0 && { value },
-                  ...delta !== void 0 && { delta },
-                  ...deltaPeriod !== void 0 && { deltaPeriod },
-                  ...deltaPolarity !== void 0 && { deltaPolarity },
-                  ...count !== void 0 && { count },
-                  ...actions !== void 0 && {
-                    actions: /* @__PURE__ */ jsx("span", { "data-basalt-tier": "widget", children: actions })
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { ref: setLegendSlot, "data-basalt-legend-slot": "" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...classNames?.body !== void 0 && { className: classNames.body },
-            style: bodyClipStyle,
-            children: resolvedState === "pending" ? /* @__PURE__ */ jsx(ChartPending, { width: "100%", height: placeholderHeight }) : resolvedState === "error" ? /* @__PURE__ */ jsx(
-              ChartError,
-              {
-                width: "100%",
-                height: placeholderHeight,
-                error: state?.error,
-                action: stateAction
-              }
-            ) : resolvedState === "empty" ? /* @__PURE__ */ jsx(
-              ChartEmpty,
-              {
-                width: "100%",
-                height: placeholderHeight,
-                ...typeof state?.empty === "string" && { label: state.empty },
-                action: stateAction
-              }
-            ) : children
-          }
-        )
-      ]
-    }
-  ) });
-}
-export {
-  ChartCard
-};

package/dist/charts/primitives/ChartFrame.d.ts

@@ -1,156 +0,0 @@
-import type { ReactNode } from 'react';
-import type { BasaltProps } from '../../common/props.js';
-import type { ChartLegendConfig, LegendPlacement, SeriesStyle } from '../series.js';
-import type { ResponsiveChartHeight } from './chart-frame-layout.js';
-import type { ChartState } from './ChartPending.js';
-/** Re-exported for `ChartFrame.test.tsx` and any other consumer that previously reached these
- * through `ChartFrame` — the layout math itself lives in `./chart-frame-layout` (pure, DOM-free). */
-export { legendEntryCap, resolveLegendRollup, resolvePlotRect } from './chart-frame-layout.js';
-export type { ResponsiveChartHeight } from './chart-frame-layout.js';
-/** Legend configuration for {@link ChartFrame}. Omit entirely (or pass `{}`) for the default
- * bottom-placed legend; pass `false` only for the sparkline exemption. */
-export type ChartFrameLegend = {
-    /** Default 'bottom'. */
-    placement?: LegendPlacement;
-    /**
-     * @deprecated Removed in 1.32.0 — the legend now fits by measured width every time and folds
-     * overflow into an `All N` disclosure (`docs/CHARTS-SPEC.md` §8); drop the prop.
-     *
-     * Until then an explicit value still WINS OUTRIGHT over the measured fit, and it counts ENTRIES,
-     * not rows: `maxRows: 3` on a 7-entry legend renders three entries. Under `fill` the PLOT yields
-     * the height ({@link resolvePlotRect}'s `legendWins`).
-     */
-    maxRows?: number;
-    /** Visually separate role: series | overlay | reference. */
-    groups?: boolean;
-    /** Hover-dim wiring lifted from the kind — optional. */
-    highlighted?: string | null;
-    onHighlight?: (key: string | null) => void;
-    /**
-     * Clicking a legend entry hides that series. Defaults to true whenever there is more than one
-     * entry to toggle between — hiding the only series a chart draws is never useful. The hidden
-     * key set reaches the marks through the `children` render prop, so a hidden series leaves the
-     * plot, the tooltip, and the auto domain together (`docs/CHARTS-SPEC.md` §5).
-     */
-    toggle?: boolean;
-    /**
-     * Internal escape hatch for a kind that never wants its legend portalled into a `ChartCard`
-     * header, whatever the placement — `Donut` sets this (`docs/waves/PLAN.md` wave 3, P1-4): its
-     * side/bottom legend is the ring's only key, so it must stay under or beside the ring rather than
-     * follow every other frame's default of claiming an available header slot. `false` keeps the
-     * legend in its own band regardless of `placement`; omitted (default) behaves as today. Not
-     * something a consumer composing a kind's own `legend` prop can reach — kinds compose `ChartFrame`
-     * directly to set it.
-     */
-    headerSlot?: boolean;
-};
-export type ChartFrameProps = BasaltProps & {
-    /** Series identity — drives the derived legend. Pass the SAME array the kind draws + tooltips from. */
-    series: readonly SeriesStyle[];
-    /**
-     * Height in pixels, or one per container step. Used when neither `aspectRatio` nor `fill` is set.
-     * Default: derived from the measured width and container class (`resolveChartLayout`). Inside a
-     * `ChartCard` the resulting height is a MINIMUM — the frame grows into a taller card body. Passing it WITH `fill` is a wiring mistake, not a fallback — `fill` wins and
-     * this is never read, which now warns once in dev (`common/errors.ts`' `ignoredProp`).
-     *
-     * `{ base: 180, wide: 260 }` is the declarative escape from a page of fixed-height charts: the
-     * `regular`/`wide` steps are compared against the frame's own MEASURED width, not the viewport,
-     * so a chart squeezed by a `PageAside` gets the short height on a desktop too. A plain number is
-     * an override and stays supported ({@link resolveFrameHeight}); one that leaves the plot under
-     * `VX.minPlotHeight` warns once in dev.
-     */
-    height?: number | ResponsiveChartHeight;
-    /** height = Math.round(containerWidth / aspectRatio). Ignored when `fill` is set — which warns
-     * once in dev, for the same reason `height` does. */
-    aspectRatio?: number;
-    /** Fill the parent flex/grid cell's measured height instead of a fixed/derived one. */
-    fill?: boolean;
-    /** First-frame width floor before the container is measured. Default 200. */
-    minWidth?: number;
-    /** Namespaces `ChartLegend`'s `split` swatch clipPath ids across multiple charts on one page. */
-    chartId?: string;
-    /** `false` only for the sparkline exemption — every other chart gets a legend by default. */
-    legend?: ChartFrameLegend | false;
-    /**
-     * The query behind this chart hasn't resolved yet. Renders `ChartPending` (see its JSDoc for the
-     * three-state "nothing to draw" rationale) over the full plot rect in place of `children`,
-     * suppresses the legend entirely (a legend naming a series with nothing yet to point at is its
-     * own small lie), and marks the outer container `aria-busy="true"`.
-     *
-     * An alias for `state={{ pending: true }}` and staying that way — it predates {@link ChartState}
-     * and every kind forwards it.
-     */
-    isPending?: boolean;
-    /**
-     * The three "nothing to draw" states in one prop — the shape a query result already has. Wins
-     * over `isPending`, which stays a supported alias for `state={{ pending: true }}`. Precedence is
-     * pending → error → empty ({@link resolveChartState}); each renders its own placeholder over the
-     * full plot rect in place of `children` and suppresses the legend, and only `pending` marks the
-     * container `aria-busy`.
-     */
-    state?: ChartState;
-    /**
-     * Accessible text alternative for the chart, applied as `aria-label` (+ `role="group"`) on the
-     * outer container so screen readers announce something other than an unlabeled graphic. Every
-     * kind composing `ChartFrame` should accept and forward this from its own props.
-     *
-     * MUST stay `role="group"`, never `role="img"`. Per the ARIA spec, every descendant of an
-     * `role="img"` element is presentational, which erases the `HoverOverlay`'s `role="slider"` from
-     * the accessibility tree entirely — a screen reader announces the label and then the
-     * keyboard-scrubbable slider underneath it is simply unreachable, silently, with no error
-     * anywhere. `role="group"` announces the same label while keeping descendants exposed. Do not
-     * "simplify" this back to `img` — it looks like a no-op refactor and it is not.
-     */
-    ariaLabel?: string;
-    /** Draw the SVG marks given the plot rect that already excludes the legend band, plus the set
-     * of series keys the legend has toggled off. */
-    children: (plot: PlotRect) => ReactNode;
-};
-/** What `ChartFrame` hands its child: the resolved plot rect plus legend-toggle state. */
-export type PlotRect = {
-    width: number;
-    height: number;
-    hidden: ReadonlySet<string>;
-    /** Whether THIS frame's legend is currently portalled into a `ChartCard` header slot — a chart
-     * composing `ChartFrame` (e.g. `CartesianChart`'s end labels, R2C-10) reads this to skip a
-     * band-legend-only affordance once the header already names every series for free. */
-    legendInHeader: boolean;
-};
-/** A kind's own hover-dim wiring, merged into the resolved `ChartFrameLegend`. Kinds without
- * per-series highlight state (single-series `ZonedLine`, `DualPanel`) omit this. */
-export type ChartFrameLegendHover = {
-    highlighted: string | null;
-    onHighlight: (key: string | null) => void;
-};
-/**
- * Merges a kind's consumer-facing {@link ChartLegendConfig} (the `legend` prop every kind exposes)
- * with the kind's own hover-dim wiring into the `ChartFrame`-facing {@link ChartFrameLegend}. This
- * is the one merge every kind performs: consumer `placement`/`groups`/`maxRows` (or the defaults)
- * plus the kind's `highlighted`/`onHighlight`, which a consumer may not set directly.
- * `config === false` disables the legend regardless of `hover` (the sparkline escape).
- *
- * A single-entry legend is pure noise — it only ever restates the chart's own title ("— BTC
- * price" under a chart already titled "BTC price"), costs a legend row of vertical space, and its
- * one toggle can blank the whole plot. So when `seriesCount` is passed, is `<= 1`, AND the caller
- * passed no explicit config (`undefined` — NOT `{}`, which is a deliberate opt-in), the legend is
- * suppressed automatically. `config === undefined` is the load-bearing check: a kind that composes
- * `ChartFrame` directly without threading `seriesCount` through (e.g. `DualPanel`) simply omits
- * the third argument and keeps today's behaviour.
- */
-export declare function resolveLegend(config: ChartLegendConfig | false | undefined, hover?: ChartFrameLegendHover, seriesCount?: number): ChartFrameLegend | false;
-/**
- * The measuring, legend-owning shell every non-sparkline chart composes. Supersedes
- * `ResponsiveChart`'s job and adds the two things it lacked: it observes height (via
- * `useChartSize`, which already measures it) and it reserves the legend band out of the plot
- * rect via a second, independent `useChartSize` on the legend's own wrapper div. The legend
- * `<div>` wraps (`ChartLegend`'s `flexWrap`), so its measured band grows as entries wrap and the
- * plot shrinks accordingly — the plot can never overlap the legend because the legend's measured
- * band is always subtracted first. It also can never shrink to nothing: {@link resolvePlotRect}
- * floors it at `VX.minPlotHeight` and the frame grows, or under `fill` the legend rolls up
- * ({@link legendEntryCap}).
- *
- * Layout-only: it does not know lines from bars (that stays in the kind), so it is not a
- * Recharts god-component. Render the child only when the resolved plot rect is non-empty.
- */
-export declare function ChartFrame({ series, height, aspectRatio, fill, minWidth, chartId, legend, ariaLabel, isPending, state, className, style, children, }: ChartFrameProps): ReactNode;
-//# sourceMappingURL=ChartFrame.d.ts.map

package/dist/charts/primitives/ChartFrame.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChartFrame.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/ChartFrame.tsx"],"names":[],"mappings":"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"}

package/dist/charts/primitives/ChartFrame.js

@@ -1,241 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useContext, useId, useLayoutEffect, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
-import {
-  deprecatedProp,
-  ignoredProp,
-  legendSlotContention,
-  plotBelowFloor
-} from "../../common/errors.js";
-import { useCoarsePointer } from "../../common/use-media-query.js";
-import { reportOnce, useValidateProps } from "../../common/validate.js";
-import { SizeClassHintContext, useSizeClass } from "../../shell/use-size-class.js";
-import { VX } from "../../tokens/index.js";
-import { useChartSize } from "../hooks/useChartSize.js";
-import { deriveLegend } from "../series.js";
-import { ChartCardContext } from "./chart-card-context.js";
-import { resolveChartLayout, resolveFrameClass } from "./chart-layout.js";
-import { resolveFrameHeight, resolveLegendRollup, resolvePlotRect } from "./chart-frame-layout.js";
-import { ChartTierProvider, useViewportHeight } from "./chart-tier.js";
-import { ChartLegend } from "./ChartLegend.js";
-import { ChartEmpty, ChartError, ChartPending, resolveChartState } from "./ChartPending.js";
-import { legendEntryCap, resolveLegendRollup as resolveLegendRollup2, resolvePlotRect as resolvePlotRect2 } from "./chart-frame-layout.js";
-const DEFAULT_MIN_WIDTH = 200;
-const outerStyle = (fill, vertical) => ({
-  width: "100%",
-  height: fill ? "100%" : void 0,
-  display: "flex",
-  flexDirection: vertical ? "row" : "column"
-});
-const legendWrapperStyle = (vertical) => ({
-  flexShrink: 0,
-  width: vertical ? void 0 : "100%"
-});
-function resolveLegend(config, hover, seriesCount) {
-  if (config === false) return false;
-  if (config === void 0 && seriesCount !== void 0 && seriesCount <= 1) return false;
-  return {
-    placement: config?.placement ?? "bottom",
-    ...config?.groups !== void 0 && { groups: config.groups },
-    ...config?.maxRows !== void 0 && { maxRows: config.maxRows },
-    ...config?.toggle !== void 0 && { toggle: config.toggle },
-    ...hover !== void 0 && { highlighted: hover.highlighted, onHighlight: hover.onHighlight }
-  };
-}
-function ChartFrame({
-  series,
-  height,
-  aspectRatio,
-  fill = false,
-  minWidth = DEFAULT_MIN_WIDTH,
-  chartId,
-  legend = {},
-  ariaLabel,
-  isPending = false,
-  state,
-  className,
-  style,
-  children
-}) {
-  const { ref: containerRef, width: containerW, height: containerH } = useChartSize();
-  const { ref: legendRef, width: legendW, height: legendH } = useChartSize();
-  const { ref: slotRef, width: slotMeasuredW } = useChartSize();
-  const {
-    inCard,
-    legendSlot,
-    short: cardShort,
-    legendClaimants,
-    dispatchLegendSlot
-  } = useContext(ChartCardContext);
-  const frameId = useId();
-  const [slotSeedW, setSlotSeedW] = useState(0);
-  const placement = legend === false ? "bottom" : legend.placement ?? "bottom";
-  const vertical = placement === "left" || placement === "right";
-  const wantsHeaderSlot = legendSlot !== null && legend !== false && legend.headerSlot !== false && !vertical;
-  const resolvedState = resolveChartState({ ...state !== void 0 && { state }, isPending });
-  const legendVisible = legend !== false && resolvedState === null;
-  const ownsSlot = wantsHeaderSlot && legendClaimants[0] === frameId;
-  const slotDenied = wantsHeaderSlot && !ownsSlot && legendClaimants.includes(frameId);
-  useLayoutEffect(() => {
-    if (!wantsHeaderSlot) return void 0;
-    dispatchLegendSlot({ type: "claim", id: frameId });
-    return () => dispatchLegendSlot({ type: "release", id: frameId });
-  }, [wantsHeaderSlot, frameId, dispatchLegendSlot]);
-  useLayoutEffect(() => {
-    if (slotDenied && legendVisible) reportOnce("ChartFrame", legendSlotContention("ChartFrame"));
-  }, [slotDenied, legendVisible]);
-  useLayoutEffect(() => {
-    if (!ownsSlot || legendSlot === null) return void 0;
-    setSlotSeedW(legendSlot.getBoundingClientRect().width);
-    slotRef(legendSlot);
-    return () => {
-      slotRef(null);
-      setSlotSeedW(0);
-    };
-  }, [ownsSlot, legendSlot, slotRef]);
-  const viewportClass = useSizeClass();
-  const sizeClass = useContext(SizeClassHintContext) === void 0 ? "medium" : viewportClass;
-  const coarse = useCoarsePointer();
-  const viewportH = useViewportHeight();
-  const [hidden, setHidden] = useState(() => /* @__PURE__ */ new Set());
-  const toggleKey = useCallback((key) => {
-    setHidden((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
-  }, []);
-  useValidateProps(
-    "ChartFrame",
-    () => [
-      fill && height !== void 0 ? ignoredProp(
-        "ChartFrame",
-        "height",
-        "`fill` is set \u2014 a fill frame takes its parent cell's measured height. Pass one or the other."
-      ) : null,
-      fill && aspectRatio !== void 0 ? ignoredProp(
-        "ChartFrame",
-        "aspectRatio",
-        "`fill` is set \u2014 a fill frame takes its parent cell's measured height. Pass one or the other."
-      ) : null
-    ],
-    [fill, height, aspectRatio]
-  );
-  const legendItems = legend === false ? [] : deriveLegend(series);
-  useValidateProps(
-    "ChartFrame",
-    () => (
-      // A cap covering every entry rolls nothing up — it is how `Donut` states "never roll up".
-      legend !== false && legend.maxRows !== void 0 && legend.maxRows < legendItems.length ? deprecatedProp(
-        "ChartFrame",
-        "legend.maxRows",
-        "nothing (the legend fits by measured width)",
-        "1.32.0",
-        `Its UNIT changed from rows to entries: \`maxRows: ${legend.maxRows}\` is now read as a cap of ${legend.maxRows} legend ENTRIES (not rows), with the rest folded into an \`All N\` disclosure. An explicit value still wins this release.`
-      ) : null
-    ),
-    [legend, legendItems.length]
-  );
-  const statedHeight = height === void 0 ? void 0 : resolveFrameHeight(height, resolveFrameClass({ frameW: containerW, sizeClass }));
-  const slotW = ownsSlot ? Math.max(slotMeasuredW, slotSeedW) : 0;
-  const groups = legend !== false && legend.groups === true;
-  const legendKey = legendItems.map((item) => `${item.key}\0${item.label}\0${item.role ?? ""}\0${item.note ?? ""}`).join("
");
-  const layout = useMemo(
-    () => resolveChartLayout({
-      frameW: containerW,
-      slotW,
-      viewportH,
-      legendItems,
-      sizeClass,
-      coarse,
-      cardShort,
-      groups,
-      ...statedHeight !== void 0 && { override: { height: statedHeight } }
-    }),
-    // `legendItems` is a fresh array per render; `legendKey` is its identity.
-    // oxlint-disable-next-line react-hooks/exhaustive-deps
-    [containerW, slotW, viewportH, legendKey, sizeClass, coarse, cardShort, groups, statedHeight]
-  );
-  const fit = layout.legend.mode === "dots" || layout.legend.mode === "chips" ? layout.legend : null;
-  const legendMode = fit?.mode;
-  const showLegend = legendVisible && fit !== null;
-  const inHeader = showLegend && ownsSlot && fit?.where === "header";
-  const sideLegendWidth = showLegend && vertical ? legendW : 0;
-  const topBottomLegendHeight = showLegend && !vertical && !inHeader ? legendH : 0;
-  const computedHeight = aspectRatio !== void 0 ? Math.round(containerW / aspectRatio) : layout.height;
-  const grows = inCard && !fill;
-  const resolvedHeight = fill ? containerH : grows ? Math.max(computedHeight, containerH) : computedHeight;
-  const cardMinHeight = Math.max(computedHeight, VX.minPlotHeight + topBottomLegendHeight);
-  useValidateProps(
-    "ChartFrame",
-    () => typeof height === "number" && !fill && aspectRatio === void 0 && height - topBottomLegendHeight < VX.minPlotHeight ? plotBelowFloor("ChartFrame", height, VX.minPlotHeight) : null,
-    [height, fill, aspectRatio, topBottomLegendHeight]
-  );
-  const togglable = legend !== false && (legend.toggle ?? legendItems.length > 1);
-  const { maxRows, legendWins } = resolveLegendRollup({
-    ...legend !== false && legend.maxRows !== void 0 && { statedMaxRows: legend.maxRows },
-    ...!vertical && fit !== null && fit.overflow > 0 && { fittedMaxRows: fit.visible },
-    fillBand: showLegend && fill && !inHeader && !vertical,
-    items: legendItems,
-    containerW,
-    available: resolvedHeight - VX.minPlotHeight
-  });
-  const plot = resolvePlotRect({
-    containerW,
-    resolvedHeight,
-    minWidth,
-    sideLegendWidth,
-    topBottomLegendHeight,
-    ...legendWins && { legendWins }
-  });
-  const legendNode = legend === false || resolvedState !== null || !showLegend ? null : /* @__PURE__ */ jsx("div", { ref: legendRef, style: legendWrapperStyle(vertical), children: /* @__PURE__ */ jsx(
-    ChartLegend,
-    {
-      items: legendItems,
-      placement,
-      hidden,
-      ...togglable && { onToggle: toggleKey },
-      ...chartId !== void 0 && { chartId },
-      ...legend.groups !== void 0 && { groups: legend.groups },
-      ...maxRows !== void 0 && { maxRows },
-      ...legendMode !== void 0 && { mode: legendMode },
-      ...legend.highlighted !== void 0 && { highlighted: legend.highlighted },
-      ...legend.onHighlight !== void 0 && { onHighlight: legend.onHighlight }
-    }
-  ) });
-  return /* @__PURE__ */ jsx(ChartTierProvider, { containerClass: layout.containerClass, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      ...className !== void 0 && { className },
-      style: {
-        ...outerStyle(fill, vertical),
-        ...grows && { flex: "1 1 0", minHeight: cardMinHeight },
-        ...style
-      },
-      ...ariaLabel !== void 0 && { role: "group", "aria-label": ariaLabel },
-      ...resolvedState === "pending" && { "aria-busy": "true" },
-      children: [
-        inHeader && legendNode !== null && legendSlot !== null && createPortal(legendNode, legendSlot),
-        !inHeader && legendNode !== null && (placement === "top" || placement === "left") && legendNode,
-        plot.width > 0 && plot.height > 0 && (resolvedState === "pending" ? /* @__PURE__ */ jsx(ChartPending, { width: plot.width, height: plot.height }) : resolvedState === "error" ? /* @__PURE__ */ jsx(ChartError, { width: plot.width, height: plot.height, error: state?.error }) : resolvedState === "empty" ? /* @__PURE__ */ jsx(
-          ChartEmpty,
-          {
-            width: plot.width,
-            height: plot.height,
-            ...typeof state?.empty === "string" && { label: state.empty }
-          }
-        ) : children({ ...plot, hidden, legendInHeader: inHeader })),
-        !inHeader && legendNode !== null && (placement === "bottom" || placement === "right") && legendNode
-      ]
-    }
-  ) });
-}
-export {
-  ChartFrame,
-  legendEntryCap,
-  resolveLegend,
-  resolveLegendRollup2 as resolveLegendRollup,
-  resolvePlotRect2 as resolvePlotRect
-};

package/dist/charts/primitives/ChartLegend.d.ts

@@ -1,67 +0,0 @@
-import type { BasaltProps } from '../../common/props.js';
-import type { SeriesRole, LegendPlacement } from '../series.js';
-export type LegendEntry = {
-    key: string;
-    label: string;
-    color: string;
-    secondColor?: string;
-    strokeWidth?: number;
-    shape?: 'line' | 'bar' | 'split' | 'splitLine';
-    /** Render line-style swatches as dashed (only applies to 'line' / 'splitLine'). */
-    dashed?: boolean;
-    /** bar swatch opacity — honored instead of a hardcoded value, so it cannot lie about the fill. */
-    fillOpacity?: number;
-    /** line/splitLine swatch stroke opacity — parity with `fillOpacity` above, so a dimmed
-     * companion line's swatch cannot lie about its own opacity either. */
-    strokeOpacity?: number;
-    /** Drives `groups` rendering (series → hairline divider → overlay → reference). */
-    role?: SeriesRole;
-    /** Companions folded under this entry via `parent` (`deriveLegend`) — rendered as compact,
-     * subordinate sub-entries beside the parent's label instead of vanishing. */
-    children?: LegendEntry[];
-    /** Short qualifier rendered after the label in muted text — e.g. a flat-at-zero series that is
-     * invisible in the plot. */
-    note?: string;
-};
-/**
- * Shared legend for all non-sparkline charts. `highlighted`/`onHighlight` are optional — omit for
- * static legends without hover interactivity. `chartId` namespaces `split` clipPath ids so two
- * legends on the same page never collide. `groups` renders series → hairline divider → overlay →
- * reference bands instead of one flat smear. `maxRows` caps the number of rendered ENTRIES and
- * rolls the remainder into an `All N` disclosure chip — it is an entry count, not a row count, in
- * spite of the name (`entries.slice(0, cap)` below is the whole of it). `ChartFrame` derives the
- * cap from the measured fit (`resolveChartLayout().legend`); a caller-stated value wins.
- *
- * `onToggle` makes an entry a real toggle: clicking it hides the series in the plot, the tooltip,
- * and the auto y-domain together (`ChartFrame` owns the `hidden` set — see `docs/CHARTS-SPEC.md`
- * §5). A hidden entry is announced via `aria-pressed`.
- *
- * **The rollup is a disclosure, not a label.** `All N` is a `<button>` carrying `aria-expanded`
- * that opens EVERY entry, toggles included, in a popover under the chip on a fine pointer and a
- * bottom sheet on a coarse one. Both are fixed-position and portalled, so opening one never grows
- * the legend band or moves the plot. Escape, an outside press, a scroll or a resize closes it, and
- * focus returns to the chip on every close.
- */
-export declare function ChartLegend({ items, highlighted, onHighlight, hidden, onToggle, chartId, placement, groups, maxRows, mode, className, style, }: BasaltProps & {
-    items: LegendEntry[];
-    highlighted?: string | null;
-    onHighlight?: (key: string | null) => void;
-    /** Keys currently toggled off. */
-    hidden?: ReadonlySet<string>;
-    /** Present = entries are clickable toggles. */
-    onToggle?: (key: string) => void;
-    chartId?: string;
-    placement?: LegendPlacement;
-    groups?: boolean;
-    maxRows?: number;
-    /**
-     * `'dots'` collapses every VISIBLE entry to a plain color dot with no label (the name still
-     * reaches assistive tech via `aria-label`) — `resolveChartLayout`'s header-slot legend forces
-     * this for a short `ChartCard` (wave 11, `docs/CHARTS-SPEC.md` §5) so the legend band's height and
-     * width both shrink before it eats plot space. The `All N` disclosure panel is unaffected: it
-     * always shows the full swatch + label, `mode` only governs the inline row. Default `'chips'`
-     * (today's swatch + label rendering) for every other caller.
-     */
-    mode?: 'dots' | 'chips';
-}): import("react").JSX.Element;
-//# sourceMappingURL=ChartLegend.d.ts.map

package/dist/charts/primitives/ChartLegend.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/ChartLegend.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGrD,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAK5D,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,WAAW,CAAA;IAC9C,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;0EACsE;IACtE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mFAAmF;IACnF,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;iFAC6E;IAC7E,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB;gCAC4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAsOD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAkB,EAClB,WAAW,EACX,MAAkB,EAClB,QAAQ,EACR,OAAY,EACZ,SAAoB,EACpB,MAAc,EACd,OAAO,EACP,IAAc,EACd,SAAS,EACT,KAAK,GACN,EAAE,WAAW,GAAG;IACf,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC1C,kCAAkC;IAClC,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC5B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACxB,+BA2GA"}