@ojiepermana/angular 22.1.11 → 22.1.13

package/fesm2022/ojiepermana-angular-chart-core.mjs

@@ -1,7 +1,1486 @@
-export * from '@ojiepermana/angular-chart/core';
+import * as i0 from '@angular/core';
+import { signal, computed, Service, inject, effect, ElementRef, Renderer2, Component, NgZone, PLATFORM_ID, DestroyRef, viewChild, input, afterNextRender, Directive } from '@angular/core';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { scalePoint, scaleLinear, scaleBand } from 'd3-scale';
+import { min, max } from 'd3-array';
+import { curveLinear, curveStep, curveMonotoneX, line, area, stack, stackOffsetExpand } from 'd3-shape';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/** CSS selector under which a chart instance is scoped. */
+const CHART_DATA_ATTRIBUTE = 'data-chart';
+/** Default color schemes supported by the generated `<style>` block. */
+const CHART_THEMES = [
+    { key: 'light', selector: '' },
+    { key: 'dark', selector: '[data-mode="dark"]' },
+];
+/**
+ * Characters and sequences that could close the current declaration or rule and
+ * start a new one. A series color is interpolated into a `<style>` block, so any
+ * of these turns a color into arbitrary CSS.
+ *
+ * Control characters (newlines included) need no entry here: they are absent from
+ * {@link CSS_COLOR_CHARACTERS}, so the allow-list rejects them on its own.
+ */
+const CSS_CONTEXT_BREAKERS = /[;{}<>@\\"']|\/\*|\*\//;
+/** Characters a CSS color value may legitimately contain. */
+const CSS_COLOR_CHARACTERS = /^[a-zA-Z0-9#%.,+\-_()/ ]+$/;
+/**
+ * Color functions a series value may call. Anything else (`url`, `attr`,
+ * `image-set`, an unknown function) is rejected: none of them belong in a color
+ * and `url()` in particular would let a config make a network request.
+ */
+const ALLOWED_COLOR_FUNCTIONS = new Set([
+    'rgb',
+    'rgba',
+    'hsl',
+    'hsla',
+    'hwb',
+    'lab',
+    'lch',
+    'oklab',
+    'oklch',
+    'color',
+    'color-mix',
+    'light-dark',
+    'var',
+]);
+/**
+ * Whether a value is safe to interpolate into the generated `<style>` block.
+ *
+ * The check is deliberately layered rather than one clever regular expression:
+ *
+ *  1. reject anything containing a character that can end a declaration or a
+ *     rule, which is what actually stops an injection;
+ *  2. restrict the remaining characters to those a color can be built from;
+ *  3. require balanced parentheses, so a truncated function cannot swallow the
+ *     rest of the block;
+ *  4. require every function called to be a color function.
+ *
+ * Real values keep working: `#2563eb`, `red`, `var(--chart-2)`,
+ * `hsl(var(--chart-1))`, `rgb(0 0 0 / 50%)`, `color-mix(in srgb, red, blue)`.
+ */
+function isSafeCssColorValue(value) {
+    const trimmed = value.trim();
+    if (!trimmed || trimmed.length > 200)
+        return false;
+    if (CSS_CONTEXT_BREAKERS.test(trimmed))
+        return false;
+    if (!CSS_COLOR_CHARACTERS.test(trimmed))
+        return false;
+    let depth = 0;
+    for (const character of trimmed) {
+        if (character === '(')
+            depth += 1;
+        else if (character === ')') {
+            depth -= 1;
+            if (depth < 0)
+                return false;
+        }
+    }
+    if (depth !== 0)
+        return false;
+    for (const match of trimmed.matchAll(/([a-zA-Z][a-zA-Z0-9-]*)\s*\(/g)) {
+        if (!ALLOWED_COLOR_FUNCTIONS.has(match[1].toLowerCase()))
+            return false;
+    }
+    return true;
+}
+/**
+ * Generate the CSS rule-set for a chart instance: one `--color-<key>` per
+ * series, scoped to the owning `[data-chart]` element, with optional dark
+ * variant via `[data-mode="dark"] [data-chart="…"]`.
+ *
+ * Series without any color are skipped (consumer can fall back to a default), and
+ * so is any series whose color fails {@link isSafeCssColorValue}: the value never
+ * reaches the stylesheet, and the series falls back to its default exactly as an
+ * unset color would. `chartId` is escaped, so it cannot break out of the
+ * attribute selector either.
+ *
+ * @param chartId  Unique chart id (used as attribute value).
+ * @param config   Series configuration map.
+ */
+function buildChartCss(chartId, config) {
+    const entries = Object.entries(config).filter(([, cfg]) => cfg.color || cfg.theme);
+    if (entries.length === 0) {
+        return '';
+    }
+    const scopeId = escapeCssIdent(chartId);
+    return CHART_THEMES.map(({ key, selector }) => {
+        const vars = entries
+            .map(([seriesKey, cfg]) => {
+            const value = cfg.theme?.[key] ?? cfg.color;
+            if (!value || !isSafeCssColorValue(value)) {
+                return '';
+            }
+            return `  --color-${escapeCssIdent(seriesKey)}: ${value.trim()};`;
+        })
+            .filter(Boolean)
+            .join('\n');
+        if (!vars) {
+            return '';
+        }
+        const scope = selector
+            ? `${selector} [${CHART_DATA_ATTRIBUTE}="${scopeId}"]`
+            : `[${CHART_DATA_ATTRIBUTE}="${scopeId}"]`;
+        return `${scope} {\n${vars}\n}`;
+    })
+        .filter(Boolean)
+        .join('\n');
+}
+/** What a CSS custom-property identifier and an attribute selector value may hold. */
+const CSS_IDENT_CHARACTERS = /^[a-zA-Z0-9_-]*$/;
+/**
+ * The suffix {@link escapeCssIdent} appends. A key that already ends this way is
+ * fingerprinted too, so a key that passes through untouched can never land on
+ * the identifier some other key was escaped into.
+ */
+const CSS_IDENT_FINGERPRINTED = /_h[0-9a-f]{8}$/;
+/**
+ * Escape a string so it is safe to use as a CSS custom-property identifier or as
+ * an attribute selector value. The result only ever holds `[A-Za-z0-9_-]`.
+ *
+ * A string that is ALREADY an identifier passes through untouched, which is
+ * every real series key: `sales` stays `--color-sales`.
+ *
+ * Anything else has its unsafe characters replaced with `_` AND gains a short
+ * fingerprint of the ORIGINAL string, because the replacement alone is not
+ * injective. `'a b'` and `'a_b'` both collapse to `a_b`, and two series sharing
+ * one custom property is silent data loss: {@link buildChartCss} emits both
+ * declarations into the same rule so the last one wins, and
+ * {@link seriesColorVar} then resolves both series to that one token.
+ */
+function escapeCssIdent(input) {
+    if (CSS_IDENT_CHARACTERS.test(input) && !CSS_IDENT_FINGERPRINTED.test(input)) {
+        return input;
+    }
+    return `${input.replace(/[^a-zA-Z0-9_-]/g, '_')}_h${fingerprint(input)}`;
+}
+/**
+ * FNV-1a, 32 bits, hex. A short stable fingerprint used only to keep two escaped
+ * keys apart — not a security hash, and never parsed back.
+ */
+function fingerprint(input) {
+    let hash = 0x811c9dc5;
+    for (let index = 0; index < input.length; index += 1) {
+        hash ^= input.charCodeAt(index);
+        hash = Math.imul(hash, 0x01000193);
+    }
+    return (hash >>> 0).toString(16).padStart(8, '0');
+}
+/** Resolve the `var(--color-<key>)` reference for a given series. */
+function seriesColorVar(seriesKey) {
+    return `var(--color-${escapeCssIdent(seriesKey)})`;
+}
+/**
+ * Resolve a raw per-datum colour to a paint value for an SVG attribute
+ * (`[attr.fill]`, `[attr.stroke]`).
+ *
+ * `raw` is `unknown` so a caller can hand over `datum[colorKey]` directly
+ * without its own `typeof` guard.
+ *
+ * The rule, which is the union of the two copies this replaces:
+ *  1. not a string, or empty            -> `fallback`
+ *  2. looks like a CSS colour or calls a
+ *     function (`var(`, `#`, `rgb`,
+ *     `hsl`, or a `(` anywhere)         -> used verbatim
+ *  3. anything else is a series key     -> `var(--color-<key>)`
+ *
+ * Deliberately NOT added: no `.trim()`, and no named-colour detector. Either
+ * would move an input that today lands on branch 3, so `'red'` stays a series
+ * key rather than becoming the colour red. That is the existing behaviour and
+ * changing it is a separate decision.
+ */
+function resolveSeriesColor(raw, fallback) {
+    if (typeof raw !== 'string' || raw.length === 0) {
+        return fallback;
+    }
+    if (raw.startsWith('var(') ||
+        raw.startsWith('#') ||
+        raw.startsWith('rgb') ||
+        raw.startsWith('hsl') ||
+        raw.includes('(')) {
+        return raw;
+    }
+    return seriesColorVar(raw);
+}
+
+/**
+ * Shared chart state provided by `ChartContainer` to all nested chart
+ * components (axes, grid, tooltip, legend, chart types).
+ *
+ * All state is exposed as signals so consumers can derive computed state
+ * (scales, visible series, tooltip position) without manual subscriptions.
+ */
+class ChartContext {
+    /** Stable instance id — used in the `data-chart` attribute and CSS scope. */
+    id = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** User-provided series config. */
+    config = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /** Measured render-area dimensions (ResizeObserver-driven). */
+    dimensions = signal({ width: 0, height: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dimensions" }] : /* istanbul ignore next */ []));
+    /** Currently highlighted data point (tooltip / crosshair). */
+    activePoint = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePoint" }] : /* istanbul ignore next */ []));
+    /** Series keys the user has toggled off via legend. */
+    hiddenSeries = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []));
+    /** Ordered list of series keys (from `config`). */
+    seriesKeys = computed(() => Object.keys(this.config()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
+    /** Series keys currently visible (config order minus `hiddenSeries`). */
+    visibleSeriesKeys = computed(() => {
+        const hidden = this.hiddenSeries();
+        return this.seriesKeys().filter((k) => !hidden.has(k));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleSeriesKeys" }] : /* istanbul ignore next */ []));
+    /** Toggle visibility of a series. */
+    toggleSeries(key) {
+        this.hiddenSeries.update((set) => {
+            const next = new Set(set);
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            return next;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartContext, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ChartContext, autoProvided: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartContext, decorators: [{
+            type: Service,
+            args: [{ autoProvided: false }]
+        }] });
+
+/**
+ * Given a pointer event's local (x, y) relative to the chart's inner group,
+ * resolve the nearest category index along the categorical axis.
+ *
+ * @returns index into `ctx.categories()` (or −1 if no scale / no data).
+ */
+function nearestCategoryIndex(ctx, localX, localY) {
+    const scale = ctx.categoryScale();
+    const categories = ctx.categories();
+    if (!scale || categories.length === 0)
+        return -1;
+    const isVertical = ctx.orientation() === 'vertical';
+    const pointerAlong = isVertical ? localX : localY;
+    const bandwidth = scale.bandwidth();
+    // scale.step() is only defined for band scales; fall back to bandwidth.
+    const step = scale.step?.() ?? bandwidth;
+    let bestIndex = -1;
+    let bestDelta = Infinity;
+    for (let i = 0; i < categories.length; i++) {
+        const base = scale(categories[i]) ?? 0;
+        const center = base + bandwidth / 2;
+        const delta = Math.abs(pointerAlong - center);
+        if (delta < bestDelta) {
+            bestDelta = delta;
+            bestIndex = i;
+        }
+    }
+    // Ignore clicks far outside any band (> 1 step away).
+    if (bestDelta > step) {
+        return -1;
+    }
+    return bestIndex;
+}
+/** Resolve the client-space center point of a focused or clicked SVG/HTML element. */
+function elementClientCenter(target) {
+    const el = target;
+    if (!el || typeof el.getBoundingClientRect !== 'function') {
+        return null;
+    }
+    const rect = el.getBoundingClientRect();
+    return {
+        clientX: rect.left + rect.width / 2,
+        clientY: rect.top + rect.height / 2,
+    };
+}
+/**
+ * Where the tooltip should sit for whichever gesture activated a mark.
+ *
+ * A pointer carries a real cursor position, so the tooltip follows it. Keyboard
+ * focus carries none, and falls back to the centre of the mark that took focus.
+ */
+function activationClientPoint(event) {
+    return event instanceof PointerEvent
+        ? { clientX: event.clientX, clientY: event.clientY }
+        : elementClientCenter(event.currentTarget ?? event.target);
+}
+
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function normalizeIndexRange(start, end, maxCount) {
+    if (maxCount <= 0) {
+        return null;
+    }
+    const lo = clamp(Math.floor(Math.min(start, end)), 0, maxCount - 1);
+    const hi = clamp(Math.floor(Math.max(start, end)), 0, maxCount - 1);
+    return { startIndex: lo, endIndex: hi };
+}
+function effectiveIndexRange(range, maxCount) {
+    if (maxCount <= 0) {
+        return null;
+    }
+    return range
+        ? normalizeIndexRange(range.startIndex, range.endIndex, maxCount)
+        : { startIndex: 0, endIndex: maxCount - 1 };
+}
+function indexRangeSize(range, maxCount) {
+    const effective = effectiveIndexRange(range, maxCount);
+    return effective ? effective.endIndex - effective.startIndex + 1 : 0;
+}
+function sliceByIndexRange(data, range) {
+    if (!range) {
+        return data;
+    }
+    return data.slice(range.startIndex, range.endIndex + 1);
+}
+function zoomIndexRange(current, maxCount, anchorIndex, factor) {
+    const base = effectiveIndexRange(current, maxCount);
+    if (!base) {
+        return null;
+    }
+    const currentSize = base.endIndex - base.startIndex + 1;
+    const nextSize = clamp(Math.round(currentSize * factor), 2, maxCount);
+    if (nextSize >= maxCount) {
+        return null;
+    }
+    const boundedAnchor = clamp(anchorIndex, base.startIndex, base.endIndex);
+    const ratio = currentSize <= 1 ? 0.5 : (boundedAnchor - base.startIndex) / (currentSize - 1);
+    let start = Math.round(boundedAnchor - ratio * (nextSize - 1));
+    start = clamp(start, 0, maxCount - nextSize);
+    return { startIndex: start, endIndex: start + nextSize - 1 };
+}
+function panIndexRange(current, maxCount, deltaSteps) {
+    const base = effectiveIndexRange(current, maxCount);
+    if (!base) {
+        return null;
+    }
+    const size = base.endIndex - base.startIndex + 1;
+    if (size >= maxCount) {
+        return null;
+    }
+    const start = clamp(base.startIndex + deltaSteps, 0, maxCount - size);
+    return { startIndex: start, endIndex: start + size - 1 };
+}
+/**
+ * The value domain for a chart drawn against a zero baseline.
+ *
+ * A bar, a line, or an area is read against the origin, so the domain has to
+ * reach it in both directions: negative data below, positive above. Clamping
+ * one end at zero is what pushed negative marks outside the plot.
+ *
+ * A dataset that is entirely zero would collapse the domain onto a point, which
+ * d3 maps to the middle of the range for every value, so it is opened by one
+ * unit instead.
+ */
+function zeroBaselineDomain(minValue, maxValue) {
+    const min = Math.min(0, minValue);
+    const max = Math.max(0, maxValue);
+    return min === max ? [min, max + 1] : [min, max];
+}
+function normalizeNumericDomain(a, b) {
+    if (a === b) {
+        return [a - 1, b + 1];
+    }
+    return a < b ? [a, b] : [b, a];
+}
+function zoomNumericDomain(current, full, anchor, factor) {
+    const currentWidth = current[1] - current[0];
+    const fullWidth = full[1] - full[0];
+    const nextWidth = clamp(currentWidth * factor, fullWidth / 50, fullWidth);
+    if (nextWidth >= fullWidth) {
+        return full;
+    }
+    const ratio = currentWidth === 0 ? 0.5 : (anchor - current[0]) / currentWidth;
+    let start = anchor - ratio * nextWidth;
+    start = clamp(start, full[0], full[1] - nextWidth);
+    return [start, start + nextWidth];
+}
+function panNumericDomain(current, full, delta) {
+    const width = current[1] - current[0];
+    const start = clamp(current[0] + delta, full[0], full[1] - width);
+    return [start, start + width];
+}
+
+/**
+ * Build the shared cartesian scaffolding.
+ *
+ * MUST be called in an injection context, so a field initializer or the
+ * constructor: it injects `ChartContext` and creates one `effect`.
+ */
+function setupCartesianChart(options) {
+    const root = inject(ChartContext);
+    const innerWidth = computed(() => Math.max(0, root.dimensions().width - options.margin().left - options.margin().right), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    const innerHeight = computed(() => Math.max(0, root.dimensions().height - options.margin().top - options.margin().bottom), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    const viewBox = computed(() => {
+        const { width, height } = root.dimensions();
+        return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    const innerTransform = computed(() => `translate(${options.margin().left},${options.margin().top})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    // The saved zoom range outlives the data it was drawn on. Renormalizing it
+    // against the current row count is what keeps a shrunken dataset from
+    // slicing to nothing and reporting a window that no longer exists.
+    const windowRange = computed(() => options.viewport
+        ? effectiveIndexRange(options.viewport.zoomRange(), options.data().length)
+        : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "windowRange" }] : /* istanbul ignore next */ []));
+    const visibleStartIndex = computed(() => windowRange()?.startIndex ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleStartIndex" }] : /* istanbul ignore next */ []));
+    const visibleData = computed(() => options.viewport ? sliceByIndexRange(options.data(), windowRange()) : options.data(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleData" }] : /* istanbul ignore next */ []));
+    const resolveDatumIndex = (mark) => visibleStartIndex() + mark.datumIndex;
+    const seriesLabel = (seriesKey) => root.config()[seriesKey]?.label ?? seriesKey;
+    // One effect for all of it. Reading every signal here keeps them tracked
+    // together, so a geometry change publishes the layout exactly once.
+    effect(() => {
+        options.viewport?.dataCount.set(options.data().length);
+        const cartesian = options.cartesian;
+        if (cartesian) {
+            cartesian.context.orientation.set(cartesian.orientation());
+            cartesian.context.margin.set(options.margin());
+            cartesian.context.innerWidth.set(innerWidth());
+            cartesian.context.innerHeight.set(innerHeight());
+        }
+        options.publishLayout?.({ width: innerWidth(), height: innerHeight() });
+    });
+    return {
+        innerWidth,
+        innerHeight,
+        viewBox,
+        innerTransform,
+        visibleStartIndex,
+        visibleData,
+        resolveDatumIndex,
+        seriesLabel,
+        pointAriaLabel: (mark) => options.ariaLabel(mark, seriesLabel(mark.seriesKey)),
+        emitClick: (mark) => {
+            const datumIndex = resolveDatumIndex(mark);
+            options.click.emit(options.click.payload(mark, datumIndex, options.data()[datumIndex]));
+        },
+        setActivePoint: (event, mark) => {
+            const center = activationClientPoint(event);
+            root.activePoint.set({
+                // `index` stays visible-local (it addresses the rendered mark) while
+                // `datumIndex` is absolute (it addresses the data row). Both are needed.
+                index: mark.datumIndex,
+                datumIndex: resolveDatumIndex(mark),
+                seriesKey: mark.seriesKey,
+                clientX: center?.clientX,
+                clientY: center?.clientY,
+            });
+        },
+        clearActivePoint: () => root.activePoint.set(null),
+    };
+}
+
+/**
+ * Build the shared polar scaffolding.
+ *
+ * MUST be called in an injection context, so a field initializer or the
+ * constructor: it injects `ChartContext`.
+ */
+function setupPolarChart(options) {
+    const root = inject(ChartContext);
+    const innerWidth = computed(() => Math.max(0, root.dimensions().width - options.margin().left - options.margin().right), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    const innerHeight = computed(() => Math.max(0, root.dimensions().height - options.margin().top - options.margin().bottom), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    const viewBox = computed(() => {
+        const { width, height } = root.dimensions();
+        return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    const innerTransform = computed(() => `translate(${options.margin().left},${options.margin().top})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    return {
+        innerWidth,
+        innerHeight,
+        viewBox,
+        innerTransform,
+        seriesLabel: (seriesKey) => root.config()[seriesKey]?.label ?? seriesKey,
+        setActivePoint: (event, mark) => {
+            const location = activationClientPoint(event);
+            root.activePoint.set({
+                // A polar mark addresses one row, so the rendered index and the data
+                // index are the same number. Both are set because the tooltip and the
+                // crosshair read different ones.
+                index: mark.datumIndex,
+                datumIndex: mark.datumIndex,
+                seriesKey: mark.seriesKey,
+                clientX: location?.clientX,
+                clientY: location?.clientY,
+            });
+        },
+        clearActivePoint: () => root.activePoint.set(null),
+    };
+}
+
+/**
+ * Emits a scoped `<style>` block mapping every series key in the current
+ * `ChartConfig` to a `--color-<key>` CSS custom property, scoped to
+ * `[data-chart="<id>"]`. Dark-mode values are scoped under `[data-mode="dark"]`.
+ *
+ * Implemented as an empty component that injects a real `<style>` element
+ * into its host via `Renderer2`. We avoid rendering `<style>` directly in a
+ * template — Angular hoists those into component CSS and strips
+ * interpolations from them.
+ *
+ * Consumers never instantiate this directly — `ChartContainer` renders it.
+ */
+class ChartStyle {
+    ctx = inject(ChartContext);
+    host = inject((ElementRef));
+    renderer = inject(Renderer2);
+    styleEl = null;
+    css = computed(() => buildChartCss(this.ctx.id(), this.ctx.config()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "css" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const css = this.css();
+            if (!this.styleEl) {
+                this.styleEl = this.renderer.createElement('style');
+                this.renderer.appendChild(this.host.nativeElement, this.styleEl);
+            }
+            this.styleEl.textContent = css;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartStyle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: ChartStyle, isStandalone: true, selector: "ChartStyle", ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartStyle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartStyle',
+                    template: '',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Resolve the effective chart style from the canonical `styleVariant` input and
+ * the deprecated `styles` input.
+ *
+ * `styleVariant` wins whenever it is bound, which is the only direction that is
+ * implementable: `styles` keeps its `'base'` default, so there is no way to tell
+ * an explicit `styles="base"` from an unset one. Giving `styleVariant` the
+ * `undefined` default leaves the deprecated input's emitted type untouched.
+ *
+ * The precedence rule lives here alone, so the seven chart families cannot drift
+ * from each other. The two `input()` calls themselves have to stay literal in
+ * each class body: the compiler discovers signal inputs by looking at the field
+ * initializer, and an `input()` hidden behind a helper is never registered.
+ */
+function resolveChartStyle(styleVariant, styles) {
+    return computed(() => styleVariant() ?? styles());
+}
+
+let chartIdCounter = 0;
+/**
+ * Root of every chart. Provides `ChartContext` to descendants, reflects the
+ * chart id via `data-chart`, injects the per-instance CSS-variable
+ * `<style>` block, and tracks its render-area dimensions via
+ * `ResizeObserver`.
+ *
+ * Usage:
+ * ```html
+ * <Chart [config]="cfg">
+ *   <ChartBar [data]="data" />
+ *   <ChartLegend />
+ * </Chart>
+ * ```
+ *
+ * The chart render area is laid out on top; any projected `<ChartLegend>` is
+ * rendered as a centered row beneath it. Render-area dimensions are measured on
+ * the chart area only, so the legend never shrinks the chart.
+ */
+class ChartContainer {
+    ctx = inject(ChartContext);
+    zone = inject(NgZone);
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    areaRef = viewChild.required('area', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "areaRef" }] : /* istanbul ignore next */ []));
+    /** Series configuration. Required for color / label resolution. */
+    config = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /**
+     * Tailwind aspect-ratio utility for the chart render area. Defaults to
+     * `aspect-video` for cartesian charts; override with `aspect-square` for
+     * radial / pie layouts, or e.g. `aspect-auto h-80` for a fixed height.
+     */
+    aspect = input('aspect-video', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aspect" }] : /* istanbul ignore next */ []));
+    areaClass = computed(() => `relative flex ${this.aspect()} w-full justify-center`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "areaClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional explicit id override. When omitted, a stable auto-id is
+     * generated (`chart-<n>`), unique across the document.
+     */
+    chartId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chartId" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const autoId = `chart-${++chartIdCounter}`;
+        // Sync id + config into the shared context.
+        effect(() => {
+            this.ctx.id.set(this.chartId() ?? autoId);
+        });
+        effect(() => {
+            this.ctx.config.set(this.config());
+        });
+        // Observe host size (browser only; client-only is a confirmed constraint).
+        if (isPlatformBrowser(this.platformId)) {
+            afterNextRender(() => this.observeSize());
+        }
+    }
+    observeSize() {
+        const el = this.areaRef().nativeElement;
+        if (typeof ResizeObserver === 'undefined') {
+            const rect = el.getBoundingClientRect();
+            this.ctx.dimensions.set({ width: rect.width, height: rect.height });
+            return;
+        }
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const { width, height } = entry.contentRect;
+                // Avoid NgZone churn — dimensions signal drives CD on its own.
+                this.zone.run(() => this.ctx.dimensions.set({ width, height }));
+            }
+        });
+        observer.observe(el);
+        this.destroyRef.onDestroy(() => observer.disconnect());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: ChartContainer, isStandalone: true, selector: "Chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, chartId: { classPropertyName: "chartId", publicName: "chartId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-chart": "ctx.id()" }, classAttribute: "relative flex flex-col text-xs" }, providers: [ChartContext], viewQueries: [{ propertyName: "areaRef", first: true, predicate: ["area"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ChartStyle />
+    <div #area data-chart-area [class]="areaClass()">
+      <ng-content />
+    </div>
+    <ng-content select="ChartLegend" />
+  `, isInline: true, dependencies: [{ kind: "component", type: ChartStyle, selector: "ChartStyle" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Chart',
+                    providers: [ChartContext],
+                    imports: [ChartStyle],
+                    host: {
+                        '[attr.data-chart]': 'ctx.id()',
+                        class: 'relative flex flex-col text-xs',
+                    },
+                    template: `
+    <ChartStyle />
+    <div #area data-chart-area [class]="areaClass()">
+      <ng-content />
+    </div>
+    <ng-content select="ChartLegend" />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { areaRef: [{ type: i0.ViewChild, args: ['area', { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], aspect: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspect", required: false }] }], chartId: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartId", required: false }] }] } });
+
+/** Screen-reader fallback for charts whose visual SVG is not tabular content. */
+class ChartDataTable {
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    label = input('Chart data', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    rowHeaderKey = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowHeaderKey" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ChartDataTable, isStandalone: true, selector: "ChartDataTable", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, rowHeaderKey: { classPropertyName: "rowHeaderKey", publicName: "rowHeaderKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <table class="sr-only" [attr.aria-label]="label()">
+      <thead>
+        <tr>
+          @for (column of columns(); track column) {
+            <th scope="col">{{ column }}</th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (row of data(); track $index) {
+          <tr>
+            @for (column of columns(); track column) {
+              @if (column === rowHeaderKey()) {
+                <th scope="row">{{ row[column] }}</th>
+              } @else {
+                <td>{{ row[column] }}</td>
+              }
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartDataTable, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartDataTable',
+                    template: `
+    <table class="sr-only" [attr.aria-label]="label()">
+      <thead>
+        <tr>
+          @for (column of columns(); track column) {
+            <th scope="col">{{ column }}</th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (row of data(); track $index) {
+          <tr>
+            @for (column of columns(); track column) {
+              @if (column === rowHeaderKey()) {
+                <th scope="row">{{ row[column] }}</th>
+              } @else {
+                <td>{{ row[column] }}</td>
+              }
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], rowHeaderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeaderKey", required: false }] }] } });
+
+/**
+ * Keeps dense SVG charts to one tab stop while preserving arrow-key access to
+ * every interactive mark. Marks are discovered by their `role="img"` and
+ * `tabindex` attributes so chart implementations do not need a shared base
+ * class or additional DOM wrappers.
+ */
+class ChartRovingFocus {
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    activeMark = null;
+    constructor() {
+        afterNextRender(() => {
+            this.syncTabStops(this.marks());
+            if (typeof MutationObserver === 'undefined') {
+                return;
+            }
+            const observer = new MutationObserver(() => this.syncTabStops(this.marks()));
+            observer.observe(this.host.nativeElement, { childList: true, subtree: true });
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
+    onFocusIn(event) {
+        const target = event.target;
+        if (!(target instanceof Element) || !this.marks().includes(target)) {
+            return;
+        }
+        this.activeMark = target;
+        this.syncTabStops(this.marks());
+    }
+    onKeydown(event) {
+        const marks = this.marks();
+        const target = event.target;
+        const currentIndex = target instanceof Element ? marks.indexOf(target) : -1;
+        if (currentIndex < 0 || marks.length < 2) {
+            return;
+        }
+        let targetIndex = null;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            targetIndex = (currentIndex + 1) % marks.length;
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            targetIndex = (currentIndex - 1 + marks.length) % marks.length;
+        }
+        else if (event.key === 'Home') {
+            targetIndex = 0;
+        }
+        else if (event.key === 'End') {
+            targetIndex = marks.length - 1;
+        }
+        if (targetIndex === null) {
+            return;
+        }
+        event.preventDefault();
+        const next = marks[targetIndex];
+        this.activeMark = next;
+        this.syncTabStops(marks);
+        next.focus();
+    }
+    marks() {
+        return Array.from(this.host.nativeElement.querySelectorAll('[role="img"][tabindex]'));
+    }
+    syncTabStops(marks) {
+        if (marks.length === 0) {
+            this.activeMark = null;
+            return;
+        }
+        const active = this.activeMark && marks.includes(this.activeMark) ? this.activeMark : marks[0];
+        this.activeMark = active;
+        for (const mark of marks) {
+            mark.setAttribute('tabindex', mark === active ? '0' : '-1');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartRovingFocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: ChartRovingFocus, isStandalone: true, selector: "svg[ChartRovingFocus]", host: { listeners: { "focusin": "onFocusIn($event)", "keydown": "onKeydown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartRovingFocus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'svg[ChartRovingFocus]',
+                    host: {
+                        '(focusin)': 'onFocusIn($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The focus treatment shared by every interactive chart mark.
+ *
+ * SVG shapes cannot carry the `ring-*` box-shadow the HTML controls use, so the
+ * indicator is painted as a stroke in the theme's dedicated `--ring` token,
+ * which is a near-black in light mode and a near-white in dark mode and so
+ * separates the focused mark from its own fill on either ground. The class
+ * takes precedence over the `stroke` presentation attribute a mark may already
+ * carry, which is why the emphasis strokes bound elsewhere do not have to know
+ * about focus at all.
+ *
+ * `outline-none` lives here rather than in the templates so the suppression and
+ * its replacement can never drift apart.
+ */
+class ChartMarkFocus {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartMarkFocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: ChartMarkFocus, isStandalone: true, selector: "[ChartMarkFocus]", host: { classAttribute: "outline-none focus-visible:stroke-ring focus-visible:stroke-2" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartMarkFocus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ChartMarkFocus]',
+                    host: {
+                        class: 'outline-none focus-visible:stroke-ring focus-visible:stroke-2',
+                    },
+                }]
+        }] });
+
+/**
+ * Default margins, one per chart geometry. THREE constants, not one: the
+ * families disagree on purpose, and collapsing them would silently relayout
+ * pie, radial, and radar.
+ *
+ * Cartesian charts need a bottom gutter for the axis and a wide left gutter for
+ * y tick labels. Polar charts have no axes to make room for. Radar needs
+ * symmetric room for its outer labels.
+ */
+const DEFAULT_CARTESIAN_MARGIN = { top: 8, right: 8, bottom: 24, left: 40 };
+/** Polar geometry (pie, radial): no axis gutters. */
+const DEFAULT_POLAR_MARGIN = { top: 8, right: 8, bottom: 8, left: 8 };
+/** Radar geometry: symmetric room for the outer axis labels. */
+const DEFAULT_RADAR_MARGIN = { top: 24, right: 24, bottom: 24, left: 24 };
+/**
+ * The same three margins expressed in SPACING UNITS rather than pixels.
+ *
+ * A chart draws its plot area with numbers, so no token can cascade into it.
+ * These are what {@link ChartThemeSpace} multiplies by the live spacing unit, so
+ * plot gutters tighten along with everything else when the density axis moves.
+ *
+ * The px constants above stay exactly as they are, and stay exported. They are
+ * the published defaults and the SSR fallback, and at the `normal` preset the
+ * unit maths reproduces them precisely: 4px per unit gives back 8/8/24/40,
+ * 8 all round, and 24 all round.
+ */
+const DEFAULT_CARTESIAN_MARGIN_UNITS = {
+    top: 2,
+    right: 2,
+    bottom: 6,
+    left: 10,
+};
+const DEFAULT_POLAR_MARGIN_UNITS = { top: 2, right: 2, bottom: 2, left: 2 };
+const DEFAULT_RADAR_MARGIN_UNITS = {
+    top: 6,
+    right: 6,
+    bottom: 6,
+    left: 6,
+};
+/**
+ * Cartesian plotting frame shared between a chart type (Bar, Line, Area…)
+ * and its axis / grid primitives.
+ *
+ * The owning chart component provides an instance and publishes its scales;
+ * descendants read them via signals and re-render when dimensions or data
+ * change.
+ */
+class CartesianContext {
+    /** Inner width (outer width − margin.left − margin.right). */
+    innerWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    /** Inner height (outer height − margin.top − margin.bottom). */
+    innerHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    /** Margins around the plotting area. */
+    margin = signal(DEFAULT_CARTESIAN_MARGIN, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    /** Layout orientation (drives which axis holds the band scale). */
+    orientation = signal('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Band (categorical) scale. */
+    categoryScale = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categoryScale" }] : /* istanbul ignore next */ []));
+    /** Linear (numeric) scale. */
+    valueScale = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueScale" }] : /* istanbul ignore next */ []));
+    /** Ordered category domain (e.g. x labels for vertical, y labels for horizontal). */
+    categories = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CartesianContext, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: CartesianContext, autoProvided: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CartesianContext, decorators: [{
+            type: Service,
+            args: [{ autoProvided: false }]
+        }] });
+/** Resolve the scale that maps to the X axis for a given orientation. */
+function xScale(ctx) {
+    return computed(() => ctx.orientation() === 'vertical' ? ctx.categoryScale() : ctx.valueScale());
+}
+/** Resolve the scale that maps to the Y axis for a given orientation. */
+function yScale(ctx) {
+    return computed(() => ctx.orientation() === 'vertical' ? ctx.valueScale() : ctx.categoryScale());
+}
+/**
+ * The plot margin actually in effect: the consumer's `margin` input when they
+ * set one, otherwise the default scaled by the live spacing unit.
+ *
+ * An explicit `margin` always wins. A consumer who has already tuned their
+ * gutters chose those exact numbers, and quietly rescaling them when the
+ * density axis moves would override a decision they made on purpose.
+ *
+ * This is why the `margin` inputs accept `null` and default to it: a chart has
+ * to be able to tell "the caller wants 8px here" apart from "nobody said", and
+ * an eagerly-defaulted object cannot express the difference.
+ */
+function resolveChartMargin(margin, units, space) {
+    return computed(() => {
+        const explicit = margin();
+        if (explicit) {
+            return explicit;
+        }
+        return {
+            top: space.scale(units.top),
+            right: space.scale(units.right),
+            bottom: space.scale(units.bottom),
+            left: space.scale(units.left),
+        };
+    });
+}
+
+class CategoricalViewportContext {
+    dataCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataCount" }] : /* istanbul ignore next */ []));
+    brushRange = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brushRange" }] : /* istanbul ignore next */ []));
+    zoomRange = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomRange" }] : /* istanbul ignore next */ []));
+    hasZoom = computed(() => {
+        const range = this.zoomRange();
+        const count = this.dataCount();
+        return !!range && count > 0 && (range.startIndex > 0 || range.endIndex < count - 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasZoom" }] : /* istanbul ignore next */ []));
+    resetZoom() {
+        this.brushRange.set(null);
+        this.zoomRange.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CategoricalViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: CategoricalViewportContext, autoProvided: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CategoricalViewportContext, decorators: [{
+            type: Service,
+            args: [{ autoProvided: false }]
+        }] });
+
+class ScatterViewportContext {
+    innerWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    fullXDomain = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullXDomain" }] : /* istanbul ignore next */ []));
+    fullYDomain = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullYDomain" }] : /* istanbul ignore next */ []));
+    zoomXDomain = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomXDomain" }] : /* istanbul ignore next */ []));
+    zoomYDomain = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomYDomain" }] : /* istanbul ignore next */ []));
+    xScale = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xScale" }] : /* istanbul ignore next */ []));
+    yScale = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yScale" }] : /* istanbul ignore next */ []));
+    hasZoom = computed(() => this.zoomXDomain() !== null || this.zoomYDomain() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasZoom" }] : /* istanbul ignore next */ []));
+    resetZoom() {
+        this.zoomXDomain.set(null);
+        this.zoomYDomain.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScatterViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ScatterViewportContext, autoProvided: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScatterViewportContext, decorators: [{
+            type: Service,
+            args: [{ autoProvided: false }]
+        }] });
+
+/** Produce evenly-spaced ticks for a band (categorical) scale. */
+function bandTicks(scale) {
+    const half = scale.bandwidth() / 2;
+    return scale.domain().map((value) => ({
+        value,
+        offset: (scale(value) ?? 0) + half,
+        label: value,
+    }));
+}
+/**
+ * Produce ticks for a linear scale.
+ *
+ * @param scale      The linear scale.
+ * @param count      Approximate number of ticks (hint, d3 may return fewer/more).
+ * @param formatter  Label formatter.
+ */
+function linearTicks(scale, count = 5, formatter = (v) => String(v)) {
+    return scale.ticks(count).map((value) => ({
+        value,
+        offset: scale(value),
+        label: formatter(value),
+    }));
+}
+
+/**
+ * Read a numeric value from a datum, tolerating strings.
+ *
+ * Every layout in this library reads its numbers through here. Bar and line
+ * each used to carry their own identical copy while the polar and scatter
+ * layouts reached for a bare `Number(d[key] ?? 0)`, so the same dataset drew
+ * correctly as a bar chart and silently lost marks as a pie: `Number('n/a')`
+ * is `NaN`, and a `NaN` flows straight into the path data.
+ *
+ * Anything that is not a finite number or a parseable numeric string reads as
+ * `0`. That is the behaviour bar and line already shipped, so it is the one the
+ * rest of the family adopts.
+ */
+function readNumber(datum, key) {
+    const raw = datum[key];
+    if (typeof raw === 'number' && Number.isFinite(raw)) {
+        return raw;
+    }
+    if (typeof raw === 'string') {
+        const parsed = Number(raw);
+        return Number.isFinite(parsed) ? parsed : 0;
+    }
+    return 0;
+}
+
+function curveFor(curve) {
+    switch (curve) {
+        case 'monotone':
+            return curveMonotoneX;
+        case 'step':
+            return curveStep;
+        case 'linear':
+        default:
+            return curveLinear;
+    }
+}
+/** Build category + value scales for point-based charts (line / area). */
+function buildCartesianScales(input) {
+    const { data, xKey, seriesKeys, orientation, innerWidth, innerHeight } = input;
+    const isVertical = orientation === 'vertical';
+    const categories = data.map((d) => String(d[xKey] ?? ''));
+    const categoryScale = scalePoint()
+        .domain(categories)
+        .range(isVertical ? [0, innerWidth] : [0, innerHeight])
+        .padding(0);
+    const minValue = min(data, (d) => min(seriesKeys, (k) => readNumber(d, k)) ?? 0) ?? 0;
+    const maxValue = max(data, (d) => max(seriesKeys, (k) => readNumber(d, k)) ?? 0) ?? 0;
+    const [domainMin, domainMax] = zeroBaselineDomain(minValue, maxValue);
+    const valueScale = scaleLinear()
+        .domain([domainMin, domainMax])
+        .nice()
+        .range(isVertical ? [innerHeight, 0] : [0, innerWidth]);
+    return { categories, categoryScale, valueScale };
+}
+/** Compute line-chart geometry. */
+function computeLineLayout(input) {
+    const { data, seriesKeys, orientation, curve } = input;
+    const { categories, categoryScale, valueScale } = buildCartesianScales(input);
+    const isVertical = orientation === 'vertical';
+    const allPoints = [];
+    const series = [];
+    for (const seriesKey of seriesKeys) {
+        const points = data.map((d, datumIndex) => {
+            const value = readNumber(d, seriesKey);
+            const category = categories[datumIndex];
+            const c = categoryScale(category) ?? 0;
+            const v = valueScale(value);
+            return {
+                seriesKey,
+                datumIndex,
+                category,
+                value,
+                x: isVertical ? c : v,
+                y: isVertical ? v : c,
+            };
+        });
+        allPoints.push(...points);
+        const generator = line()
+            .x((p) => p.x)
+            .y((p) => p.y)
+            .curve(curveFor(curve));
+        series.push({
+            seriesKey,
+            color: seriesColorVar(seriesKey),
+            linePath: generator(points) ?? '',
+            points,
+        });
+    }
+    return {
+        series,
+        points: allPoints,
+        categoryScale,
+        valueScale,
+        categories,
+    };
+}
+/** Compute area-chart geometry (single or stacked). */
+function computeAreaLayout(input) {
+    if (input.stacked && input.seriesKeys.length > 0) {
+        return computeStackedArea(input);
+    }
+    return computeSingleArea(input);
+}
+function computeSingleArea(input) {
+    const { data, seriesKeys, orientation, curve } = input;
+    const { categories, categoryScale, valueScale } = buildCartesianScales(input);
+    const isVertical = orientation === 'vertical';
+    const baseline = isVertical ? valueScale(0) : valueScale(0);
+    const allPoints = [];
+    const series = [];
+    for (const seriesKey of seriesKeys) {
+        const points = data.map((d, datumIndex) => {
+            const value = readNumber(d, seriesKey);
+            const category = categories[datumIndex];
+            const c = categoryScale(category) ?? 0;
+            const v = valueScale(value);
+            return {
+                seriesKey,
+                datumIndex,
+                category,
+                value,
+                x: isVertical ? c : v,
+                y: isVertical ? v : c,
+            };
+        });
+        allPoints.push(...points);
+        const lineGen = line()
+            .x((p) => p.x)
+            .y((p) => p.y)
+            .curve(curveFor(curve));
+        const areaGen = isVertical
+            ? area()
+                .x((p) => p.x)
+                .y0(baseline)
+                .y1((p) => p.y)
+                .curve(curveFor(curve))
+            : area()
+                .y((p) => p.y)
+                .x0(baseline)
+                .x1((p) => p.x)
+                .curve(curveFor(curve));
+        series.push({
+            seriesKey,
+            color: seriesColorVar(seriesKey),
+            linePath: lineGen(points) ?? '',
+            areaPath: areaGen(points) ?? '',
+            points,
+        });
+    }
+    return {
+        series,
+        points: allPoints,
+        categoryScale,
+        valueScale,
+        categories,
+        stacked: false,
+    };
+}
+function computeStackedArea(input) {
+    const { data, seriesKeys, orientation, innerWidth, innerHeight, xKey, curve, expanded } = input;
+    const isVertical = orientation === 'vertical';
+    const categories = data.map((d) => String(d[xKey] ?? ''));
+    const categoryScale = scalePoint()
+        .domain(categories)
+        .range(isVertical ? [0, innerWidth] : [0, innerHeight])
+        .padding(0);
+    const normalized = data.map((d) => {
+        const out = {};
+        for (const k of seriesKeys)
+            out[k] = readNumber(d, k);
+        return out;
+    });
+    const stackGenerator = stack().keys(seriesKeys);
+    if (expanded) {
+        stackGenerator.offset(stackOffsetExpand);
+    }
+    const stackSeries = stackGenerator(normalized);
+    // Every layer is measured, not just the last one: a stack that runs below the
+    // baseline puts its extreme on whichever layer carries the negative values.
+    const minTotal = expanded
+        ? 0
+        : (min(stackSeries, (layer) => min(layer, (p) => Math.min(p[0], p[1]))) ?? 0);
+    const maxTotal = expanded
+        ? 1
+        : (max(stackSeries, (layer) => max(layer, (p) => Math.max(p[0], p[1]))) ?? 0);
+    const [domainMin, domainMax] = zeroBaselineDomain(minTotal, maxTotal);
+    const valueScale = scaleLinear()
+        .domain([domainMin, domainMax])
+        .range(isVertical ? [innerHeight, 0] : [0, innerWidth]);
+    if (!expanded) {
+        valueScale.nice();
+    }
+    const allPoints = [];
+    const series = stackSeries.map((layer) => {
+        const seriesKey = layer.key;
+        const points = layer.map((p, datumIndex) => {
+            const category = categories[datumIndex];
+            const c = categoryScale(category) ?? 0;
+            const upper = valueScale(p[1]);
+            return {
+                seriesKey,
+                datumIndex,
+                category,
+                value: p[1] - p[0],
+                x: isVertical ? c : upper,
+                y: isVertical ? upper : c,
+            };
+        });
+        allPoints.push(...points);
+        const lineGen = line()
+            .x(([x]) => x)
+            .y(([, y]) => y)
+            .curve(curveFor(curve));
+        const areaGen = isVertical
+            ? area()
+                .x(([x]) => x)
+                .y0(([, , y0]) => y0)
+                .y1(([, y1]) => y1)
+                .curve(curveFor(curve))
+            : area()
+                .y(([x]) => x)
+                .x0(([, , x0]) => x0)
+                .x1(([, x1]) => x1)
+                .curve(curveFor(curve));
+        const tuples = layer.map((p, i) => {
+            const c = categoryScale(categories[i]) ?? 0;
+            return [c, valueScale(p[1]), valueScale(p[0])];
+        });
+        return {
+            seriesKey,
+            color: seriesColorVar(seriesKey),
+            linePath: lineGen(tuples) ?? '',
+            areaPath: areaGen(tuples) ?? '',
+            points,
+        };
+    });
+    return {
+        series,
+        points: allPoints,
+        categoryScale,
+        valueScale,
+        categories,
+        stacked: true,
+    };
+}
+
+/**
+ * Publish a `scalePoint` from line/area layouts to the `CartesianContext`,
+ * which expects a `scaleBand`. Line/area points sit on the range edges (the
+ * point scale has zero padding, so the first point touches the y-axis and the
+ * last touches the right edge). We extend the band range by half a step on
+ * each side so band centers — used to position axis ticks — line up exactly
+ * with those edge-touching points.
+ *
+ * This keeps axes/grid primitives agnostic to whether the underlying chart
+ * uses `scaleBand` (bar) or `scalePoint` (line/area).
+ */
+function pointToBandAdapter(pointScale, range) {
+    const half = pointScale.step() / 2;
+    const extended = [range[0] - half, range[1] + half];
+    return scaleBand().domain(pointScale.domain()).range(extended).padding(0);
+}
+/** Recreate a linear scale with the same domain/range (handy for effects). */
+function cloneLinear(scale) {
+    return scaleLinear().domain(scale.domain()).range(scale.range());
+}
+function provideCartesianFromLineLayout(ctx, layout, orientation, innerWidth, innerHeight) {
+    const range = orientation === 'vertical' ? [0, innerWidth] : [0, innerHeight];
+    ctx.orientation.set(orientation);
+    ctx.innerWidth.set(innerWidth);
+    ctx.innerHeight.set(innerHeight);
+    ctx.categoryScale.set(pointToBandAdapter(layout.categoryScale, range));
+    ctx.valueScale.set(cloneLinear(layout.valueScale));
+    ctx.categories.set(layout.categories);
+}
+
+/** 0.375rem @ 16px root — Tailwind's stock `rounded-md` value. */
+const FALLBACK_RADIUS_PX = 6;
+/**
+ * Resolves the live theme corner radius (the `--radius` token) in pixels for SVG
+ * chart geometry, and re-emits when the global `theme-radius` axis switches.
+ *
+ * SVG `rx`/`ry` need px numbers, so this reads the computed `--radius` off
+ * `<html>` and converts rem→px. A `MutationObserver` on the `<html theme-radius>`
+ * attribute keeps the `px` signal in sync with `ThemeRadiusService` at runtime;
+ * charts default their corner radius to this value (still overridable per chart).
+ *
+ * SSR-safe: with no document it returns the `md` fallback and skips observing.
+ */
+class ChartThemeRadius {
+    document = inject(DOCUMENT, { optional: true });
+    basePx = signal(this.readBasePx(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "basePx" }] : /* istanbul ignore next */ []));
+    /** Resolved base radius (`--radius`) in px; reactive to the theme-radius axis. */
+    px = this.basePx.asReadonly();
+    constructor() {
+        const root = this.document?.documentElement;
+        const view = this.document?.defaultView;
+        if (!root || !view || typeof view.MutationObserver !== 'function') {
+            return;
+        }
+        const observer = new view.MutationObserver(() => this.basePx.set(this.readBasePx()));
+        observer.observe(root, { attributes: true, attributeFilter: ['theme-radius'] });
+        inject(DestroyRef).onDestroy(() => observer.disconnect());
+    }
+    readBasePx() {
+        const root = this.document?.documentElement;
+        const view = this.document?.defaultView;
+        if (!root || !view) {
+            return FALLBACK_RADIUS_PX;
+        }
+        const raw = view.getComputedStyle(root).getPropertyValue('--radius').trim();
+        return this.toPx(raw, view, root) ?? FALLBACK_RADIUS_PX;
+    }
+    toPx(value, view, root) {
+        if (!value) {
+            return null;
+        }
+        // Tailwind v4 emits `rounded-full` as `calc(infinity * 1px)`. SVG geometry
+        // still needs a finite number; 9999px preserves the same pill/circle result.
+        if (value.includes('infinity')) {
+            return 9999;
+        }
+        const numeric = Number.parseFloat(value);
+        if (!Number.isFinite(numeric)) {
+            return null;
+        }
+        if (value.endsWith('rem')) {
+            const rootFontSize = Number.parseFloat(view.getComputedStyle(root).fontSize) || 16;
+            return numeric * rootFontSize;
+        }
+        // Concrete px values parse directly.
+        return numeric;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartThemeRadius, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ChartThemeRadius });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartThemeRadius, decorators: [{
+            type: Service
+        }], ctorParameters: () => [] });
+
+/** 0.25rem @ 16px root — the `--spacing-base` value on the `normal` preset. */
+const FALLBACK_SPACING_PX = 4;
+/**
+ * Resolves the live spacing unit in pixels for SVG chart geometry, and re-emits
+ * when the global `theme-space` axis switches.
+ *
+ * Charts are the one part of the library CSS cannot reach: plot margins are
+ * numbers handed to SVG, not properties a token can cascade into. Without a
+ * bridge, choosing `compact` tightens every card and control on a dashboard and
+ * leaves the charts sitting in exactly as much white space as before -- one
+ * island of the old density in the middle of the new one.
+ *
+ * This is deliberately the same shape as {@link ChartThemeRadius}: an attribute
+ * `MutationObserver`, an SSR-safe read, and a fallback constant. Copying a
+ * pattern that already works beats inventing a second one, and it means both
+ * bridges can be tested the same way.
+ *
+ * It reads `--spacing-base`, NOT `--spacing`. They hold the same number, but
+ * `--spacing` is declared inside Tailwind's `@theme inline` block, which is
+ * inlined into utilities at build time and never lands on `<html>` as something
+ * `getComputedStyle` can read back. Reading it would have returned an empty
+ * string, and this bridge would have quietly served its fallback forever while
+ * looking perfectly correct.
+ *
+ * SSR-safe: with no document it returns the fallback and skips observing.
+ */
+class ChartThemeSpace {
+    document = inject(DOCUMENT, { optional: true });
+    unitPx = signal(this.readUnitPx(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unitPx" }] : /* istanbul ignore next */ []));
+    /** Resolved spacing unit (`--spacing-base`) in px; reactive to the theme-space axis. */
+    px = this.unitPx.asReadonly();
+    constructor() {
+        const root = this.document?.documentElement;
+        const view = this.document?.defaultView;
+        if (!root || !view || typeof view.MutationObserver !== 'function') {
+            return;
+        }
+        const observer = new view.MutationObserver(() => this.unitPx.set(this.readUnitPx()));
+        observer.observe(root, { attributes: true, attributeFilter: ['theme-space'] });
+        inject(DestroyRef).onDestroy(() => observer.disconnect());
+    }
+    /** Scale one margin constant, expressed in spacing units, into pixels. */
+    scale(units) {
+        return units * this.unitPx();
+    }
+    readUnitPx() {
+        const root = this.document?.documentElement;
+        const view = this.document?.defaultView;
+        if (!root || !view) {
+            return FALLBACK_SPACING_PX;
+        }
+        const raw = view.getComputedStyle(root).getPropertyValue('--spacing-base').trim();
+        return this.toPx(raw, view, root) ?? FALLBACK_SPACING_PX;
+    }
+    toPx(value, view, root) {
+        if (!value) {
+            return null;
+        }
+        const numeric = Number.parseFloat(value);
+        if (!Number.isFinite(numeric)) {
+            return null;
+        }
+        if (value.endsWith('rem')) {
+            const rootFontSize = Number.parseFloat(view.getComputedStyle(root).fontSize) || 16;
+            return numeric * rootFontSize;
+        }
+        // Concrete px values parse directly.
+        return numeric;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartThemeSpace, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ChartThemeSpace });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ChartThemeSpace, decorators: [{
+            type: Service
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { CHART_DATA_ATTRIBUTE, CHART_THEMES, CartesianContext, CategoricalViewportContext, ChartContainer, ChartContext, ChartDataTable, ChartMarkFocus, ChartRovingFocus, ChartStyle, ChartThemeRadius, ChartThemeSpace, DEFAULT_CARTESIAN_MARGIN, DEFAULT_CARTESIAN_MARGIN_UNITS, DEFAULT_POLAR_MARGIN, DEFAULT_POLAR_MARGIN_UNITS, DEFAULT_RADAR_MARGIN, DEFAULT_RADAR_MARGIN_UNITS, ScatterViewportContext, activationClientPoint, bandTicks, buildCartesianScales, buildChartCss, cloneLinear, computeAreaLayout, computeLineLayout, effectiveIndexRange, elementClientCenter, escapeCssIdent, indexRangeSize, isSafeCssColorValue, linearTicks, nearestCategoryIndex, normalizeIndexRange, normalizeNumericDomain, panIndexRange, panNumericDomain, pointToBandAdapter, provideCartesianFromLineLayout, readNumber, resolveChartMargin, resolveChartStyle, resolveSeriesColor, seriesColorVar, setupCartesianChart, setupPolarChart, sliceByIndexRange, xScale, yScale, zeroBaselineDomain, zoomIndexRange, zoomNumericDomain };