@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/chart/chart-loader.d.ts

@@ -1,25 +1,56 @@
 import type * as ChartJsModule from 'chart.js';
 import type ZoomPlugin from 'chartjs-plugin-zoom';
 /**
- * Independently loads the mandatory `chart.js` peer dependency and the
- * opt-in `chartjs-plugin-zoom` peer dependency, so a partial install
- * (`chart.js` only, which `peerDependenciesMeta` marks as a valid
- * combination) degrades to "charts render, zoom is inert" instead of every
- * chart breaking. Exported (in addition to `loadChartJs()` below) so both
- * failure paths — and the real caught error each one logs — are directly
- * testable without needing to actually uninstall either package.
+ * Independently loads the mandatory `chart.js` peer dependency and, only
+ * when `needsZoom` is true, the opt-in `chartjs-plugin-zoom` peer dependency
+ * — so a partial install (`chart.js` only, which `peerDependenciesMeta`
+ * marks as a valid combination) degrades to "charts render, zoom is inert"
+ * instead of every chart breaking. `needsZoom` defaults to `false` because
+ * most charts never set `zoom`, and `chartjs-plugin-zoom` has a hard
+ * dependency on `hammerjs` — no point paying that import cost for every
+ * chart on the page. Exported (in addition to `loadChartJs()`/
+ * `loadChartJsWithZoom()` below) so both failure paths — and the real caught
+ * error each one logs — are directly testable without needing to actually
+ * uninstall either package.
  */
 export declare function loadChartAndZoom(importChart?: () => Promise<typeof ChartJsModule>, importZoom?: () => Promise<{
     default: typeof ZoomPlugin;
-}>): Promise<{
+}>, needsZoom?: boolean): Promise<{
     mod: typeof ChartJsModule;
     zoomPlugin: typeof ZoomPlugin | undefined;
 } | null>;
 /**
- * Lazily loads the optional peer dependency `chart.js` (+ `chartjs-plugin-zoom`,
- * loaded independently — see `loadChartAndZoom()`) once per page, registering
- * only the tree-shaken subset this library uses. Resolves to `null` if
- * chart.js isn't installed; still resolves the real module (with zoom simply
- * unregistered) if only `chartjs-plugin-zoom` is missing.
+ * Lazily loads the optional peer dependency `chart.js` once per page,
+ * registering only the tree-shaken subset this library uses.
+ * `chartjs-plugin-zoom` is *not* loaded here — see `loadChartJsWithZoom()`
+ * below, which any chart that actually sets `zoom` should call instead.
+ * Resolves to `null` if chart.js isn't installed.
  */
 export declare function loadChartJs(): Promise<typeof ChartJsModule | null>;
+/**
+ * Loads `chart.js` (reusing the cached load above) plus `chartjs-plugin-zoom`,
+ * on first actual demand — most charts never set `zoom`, and the plugin has
+ * a hard dependency on `hammerjs`. Registers the plugin at most once across
+ * the page. Call this instead of `loadChartJs()` from any chart that has
+ * `zoom` set (at connect time, or later once `zoom` turns on).
+ *
+ * The whole operation (chart.js core + the zoom plugin import + its
+ * registration) is memoized behind a single `zoomLoad` promise, assigned
+ * synchronously before any `await` — mirroring `loadChartJs()`'s own
+ * `chartJs` memoization above. A plain boolean "already registered" guard
+ * checked before an `await` and only set after would leave a check-then-act
+ * race across that `await` boundary: two callers racing to turn `zoom` on
+ * close together (e.g. two `<lyra-chart zoom>` elements connecting around
+ * the same time) could both pass the check before either sets the flag,
+ * each independently re-importing the plugin and calling
+ * `mod.Chart.register()`. A single promise assigned up front closes that
+ * window — the second caller synchronously observes `zoomLoad` already set
+ * and awaits the same in-flight load instead of starting its own.
+ *
+ * `importZoom` defaults to the real dynamic import; it's a parameter purely
+ * so tests can instrument/count the underlying import without needing to
+ * actually uninstall the package.
+ */
+export declare function loadChartJsWithZoom(importZoom?: () => Promise<{
+    default: typeof ZoomPlugin;
+}>): Promise<typeof ChartJsModule | null>;

package/dist/components/chart/chart-loader.js

@@ -1,15 +1,20 @@
 let chartJs;
+let zoomLoad;
 let registered = false;
 /**
- * Independently loads the mandatory `chart.js` peer dependency and the
- * opt-in `chartjs-plugin-zoom` peer dependency, so a partial install
- * (`chart.js` only, which `peerDependenciesMeta` marks as a valid
- * combination) degrades to "charts render, zoom is inert" instead of every
- * chart breaking. Exported (in addition to `loadChartJs()` below) so both
- * failure paths — and the real caught error each one logs — are directly
- * testable without needing to actually uninstall either package.
+ * Independently loads the mandatory `chart.js` peer dependency and, only
+ * when `needsZoom` is true, the opt-in `chartjs-plugin-zoom` peer dependency
+ * — so a partial install (`chart.js` only, which `peerDependenciesMeta`
+ * marks as a valid combination) degrades to "charts render, zoom is inert"
+ * instead of every chart breaking. `needsZoom` defaults to `false` because
+ * most charts never set `zoom`, and `chartjs-plugin-zoom` has a hard
+ * dependency on `hammerjs` — no point paying that import cost for every
+ * chart on the page. Exported (in addition to `loadChartJs()`/
+ * `loadChartJsWithZoom()` below) so both failure paths — and the real caught
+ * error each one logs — are directly testable without needing to actually
+ * uninstall either package.
  */
-export async function loadChartAndZoom(importChart = () => import('chart.js'), importZoom = () => import('chartjs-plugin-zoom')) {
+export async function loadChartAndZoom(importChart = () => import('chart.js'), importZoom = () => import('chartjs-plugin-zoom'), needsZoom = false) {
     let mod;
     try {
         mod = await importChart();
@@ -18,6 +23,8 @@ export async function loadChartAndZoom(importChart = () => import('chart.js'), i
         console.warn('<lyra-chart> needs the optional peer dependency `chart.js` — install it with `pnpm add chart.js`:', err);
         return null;
     }
+    if (!needsZoom)
+        return { mod, zoomPlugin: undefined };
     let zoomPlugin;
     try {
         zoomPlugin = (await importZoom()).default;
@@ -29,25 +36,65 @@ export async function loadChartAndZoom(importChart = () => import('chart.js'), i
     }
     return { mod, zoomPlugin };
 }
+function registerCore(mod) {
+    if (registered)
+        return;
+    mod.Chart.register(mod.LineController, mod.BarController, mod.ScatterController, mod.DoughnutController, mod.PieController, mod.RadarController, mod.PolarAreaController, mod.BubbleController, mod.LineElement, mod.PointElement, mod.BarElement, mod.ArcElement, mod.LinearScale, mod.CategoryScale, mod.RadialLinearScale, mod.Filler, mod.Tooltip, mod.Legend);
+    registered = true;
+}
 /**
- * Lazily loads the optional peer dependency `chart.js` (+ `chartjs-plugin-zoom`,
- * loaded independently — see `loadChartAndZoom()`) once per page, registering
- * only the tree-shaken subset this library uses. Resolves to `null` if
- * chart.js isn't installed; still resolves the real module (with zoom simply
- * unregistered) if only `chartjs-plugin-zoom` is missing.
+ * Lazily loads the optional peer dependency `chart.js` once per page,
+ * registering only the tree-shaken subset this library uses.
+ * `chartjs-plugin-zoom` is *not* loaded here — see `loadChartJsWithZoom()`
+ * below, which any chart that actually sets `zoom` should call instead.
+ * Resolves to `null` if chart.js isn't installed.
  */
 export function loadChartJs() {
     if (!chartJs) {
         chartJs = loadChartAndZoom().then((result) => {
             if (!result)
                 return null;
-            const { mod, zoomPlugin } = result;
-            if (!registered) {
-                mod.Chart.register(mod.LineController, mod.BarController, mod.ScatterController, mod.DoughnutController, mod.PieController, mod.RadarController, mod.PolarAreaController, mod.BubbleController, mod.LineElement, mod.PointElement, mod.BarElement, mod.ArcElement, mod.LinearScale, mod.CategoryScale, mod.RadialLinearScale, mod.Filler, mod.Tooltip, mod.Legend, ...(zoomPlugin ? [zoomPlugin] : []));
-                registered = true;
+            registerCore(result.mod);
+            return result.mod;
+        });
+    }
+    return chartJs;
+}
+/**
+ * Loads `chart.js` (reusing the cached load above) plus `chartjs-plugin-zoom`,
+ * on first actual demand — most charts never set `zoom`, and the plugin has
+ * a hard dependency on `hammerjs`. Registers the plugin at most once across
+ * the page. Call this instead of `loadChartJs()` from any chart that has
+ * `zoom` set (at connect time, or later once `zoom` turns on).
+ *
+ * The whole operation (chart.js core + the zoom plugin import + its
+ * registration) is memoized behind a single `zoomLoad` promise, assigned
+ * synchronously before any `await` — mirroring `loadChartJs()`'s own
+ * `chartJs` memoization above. A plain boolean "already registered" guard
+ * checked before an `await` and only set after would leave a check-then-act
+ * race across that `await` boundary: two callers racing to turn `zoom` on
+ * close together (e.g. two `<lyra-chart zoom>` elements connecting around
+ * the same time) could both pass the check before either sets the flag,
+ * each independently re-importing the plugin and calling
+ * `mod.Chart.register()`. A single promise assigned up front closes that
+ * window — the second caller synchronously observes `zoomLoad` already set
+ * and awaits the same in-flight load instead of starting its own.
+ *
+ * `importZoom` defaults to the real dynamic import; it's a parameter purely
+ * so tests can instrument/count the underlying import without needing to
+ * actually uninstall the package.
+ */
+export function loadChartJsWithZoom(importZoom = () => import('chartjs-plugin-zoom')) {
+    if (!zoomLoad) {
+        zoomLoad = loadChartJs().then(async (mod) => {
+            if (!mod)
+                return null;
+            const result = await loadChartAndZoom(() => Promise.resolve(mod), importZoom, true);
+            if (result?.zoomPlugin) {
+                mod.Chart.register(result.zoomPlugin);
             }
             return mod;
         });
     }
-    return chartJs;
+    return zoomLoad;
 }

package/dist/components/chart/chart.d.ts

@@ -1,5 +1,4 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
-import type { ChartConfiguration } from 'chart.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import '../skeleton/skeleton.js';
 export interface Series {
@@ -73,10 +72,13 @@ export declare class LyraChart extends LyraElement {
      * without discarding sibling keys the generated config set), for consumers
      * who need full Chart.js control beyond the simplified `Series` shape.
      */
-    config?: Partial<ChartConfiguration>;
+    config?: Partial<import('chart.js').ChartConfiguration>;
     /** True until the lazy-loaded `chart.js` peer dependency has settled (success or failure). */
     private loading;
     private zoomed;
+    private visible;
+    private intersectionObserver?;
+    private lastSignature;
     private canvasEl?;
     private chart?;
     private chartJsModule?;
@@ -95,6 +97,14 @@ export declare class LyraChart extends LyraElement {
      * is called fresh from `buildConfig()` on every draw rather than cached.
      */
     private themeColors;
+    /**
+     * A content-affecting-properties fingerprint used by `updated()` to skip a
+     * redundant `draw()` when neither visibility nor any of these properties
+     * actually changed since the last draw (e.g. an unrelated property/state
+     * update, or `requestUpdate()` with nothing changed). Mirrors
+     * `lite-chart.ts`'s `computeSignature()`.
+     */
+    private computeSignature;
     /**
      * Builds `options.scales` for the effective chart type: no scale at all for
      * pie/doughnut (a proportional-area chart has no axis), the single radial

package/dist/components/chart/chart.js

@@ -8,7 +8,7 @@ import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
-import { loadChartJs } from './chart-loader.js';
+import { loadChartJs, loadChartJsWithZoom } from './chart-loader.js';
 import { styles } from './chart.styles.js';
 import '../skeleton/skeleton.js';
 /**
@@ -99,6 +99,8 @@ export class LyraChart extends LyraElement {
         /** True until the lazy-loaded `chart.js` peer dependency has settled (success or failure). */
         this.loading = true;
         this.zoomed = false;
+        this.visible = true;
+        this.lastSignature = '';
         // `chartjs-plugin-zoom`'s own `resetZoom()` synchronously re-invokes the
         // `onZoomComplete` callback below as part of its reset, which would emit a
         // stale `{zoomed: true}` right before `resetZoom()` emits the real
@@ -109,20 +111,46 @@ export class LyraChart extends LyraElement {
     static { this.styles = [LyraElement.styles, styles]; }
     connectedCallback() {
         super.connectedCallback();
-        void loadChartJs().then((mod) => {
+        const load = this.zoom ? loadChartJsWithZoom() : loadChartJs();
+        void load.then((mod) => {
+            if (!this.isConnected)
+                return;
             this.loading = false;
             if (!mod)
                 return;
             this.chartJsModule = mod;
             this.draw();
         });
+        if (typeof IntersectionObserver !== 'undefined') {
+            this.intersectionObserver = new IntersectionObserver((entries) => {
+                const wasVisible = this.visible;
+                this.visible = entries[0]?.isIntersecting ?? true;
+                if (this.visible && !wasVisible)
+                    this.draw();
+            });
+            this.intersectionObserver.observe(this);
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.chart?.destroy();
         this.chart = undefined;
+        this.intersectionObserver?.disconnect();
     }
     updated(changed) {
+        // Disconnected between the property change that scheduled this update
+        // and Lit's (microtask-deferred) processing of it — e.g. a property
+        // changes and the element is removed in the same synchronous tick, so
+        // `disconnectedCallback()` (which already destroyed `this.chart`) runs
+        // *before* this method does. Nothing below should run in that case:
+        // this method's own unconditional `draw()` call further down would
+        // otherwise construct a brand-new `Chart` bound to the now-detached
+        // canvas — `draw()`'s own guard (`!chartJsModule || !canvasEl`) doesn't
+        // catch this, since both persist on a disconnected-but-intact element.
+        // If the component is reconnected later, `connectedCallback()` re-kicks
+        // its own load/draw sequence, so nothing is lost by bailing out here.
+        if (!this.isConnected)
+            return;
         if (this.loading)
             this.setAttribute('aria-busy', 'true');
         else
@@ -135,16 +163,59 @@ export class LyraChart extends LyraElement {
         if (changed.has('height')) {
             this.style.setProperty('--lyra-chart-height', this.height);
         }
+        // While `chart.js` is still loading, `draw()` would no-op anyway (no
+        // `chartJsModule`/`canvasEl` yet) — bail before touching `lastSignature`
+        // so that phantom "no-op" update doesn't get cached as the baseline and
+        // silently swallow the real first draw once loading finishes with no
+        // other property having changed in the meantime.
+        if (this.loading)
+            return;
+        // `zoom` can also turn on after connect (it was false at
+        // `connectedCallback()` time, so only the core `loadChartJs()` load was
+        // kicked off) — load the zoom plugin on demand now and redraw once it's
+        // registered. Mirrors the same `isConnected` guard `connectedCallback()`
+        // uses: this method already bailed out above if *already* disconnected,
+        // but the element can *also* disconnect during the gap while this
+        // dynamic import is in flight — without this guard, `draw()` would
+        // construct a new, leaked `Chart` bound to the now-detached canvas once
+        // the import resolves.
+        if (changed.has('zoom') && this.zoom) {
+            void loadChartJsWithZoom().then(() => {
+                if (!this.isConnected)
+                    return;
+                this.draw();
+            });
+        }
         const onlyZoomChanged = changed.size === 1 && changed.has('zoomed');
-        if (!onlyZoomChanged)
-            this.draw();
+        if (onlyZoomChanged)
+            return;
+        if (!this.visible)
+            return; // becoming visible again triggers its own draw() via the observer above
+        const signature = this.computeSignature();
+        if (signature === this.lastSignature)
+            return;
+        this.lastSignature = signature;
+        this.draw();
     }
     seriesToDataset(s) {
         const colors = Array.isArray(s.color) ? s.color : s.color ? [s.color] : undefined;
         return {
             label: s.label,
             data: s.points ?? s.data ?? [],
-            type: s.type ?? this.type,
+            // Leave unset rather than defaulting to `this.type`: Chart.js already
+            // falls back to the chart-level (effective) type for any dataset that
+            // doesn't set its own `type`, and forcing `this.type` here unconditionally
+            // used to be harmless (it normally matched the effective type anyway) —
+            // but it actively breaks a `config.type` override to a different chart
+            // family (e.g. attribute `type="line"` + `config.type: 'radar'`): every
+            // dataset would carry an explicit `type: 'line'` under a chart whose
+            // scales are built for `radar` (a single radial `r` scale, no `x`/`y`),
+            // which Chart.js can't reconcile — it hangs the page trying to lay out
+            // a cartesian-scale controller against a radial-only scale set. Only
+            // `s.type` (an explicit per-series mixed-type override, e.g. a line
+            // series over a bar chart of the *same* effective family) is passed
+            // through.
+            type: s.type,
             fill: s.fill ?? this.area,
             borderWidth: s.width ?? 2,
             borderDash: s.dash ? [4, 4] : undefined,
@@ -153,7 +224,6 @@ export class LyraChart extends LyraElement {
             pointBackgroundColor: s.pointColors,
             pointRadius: s.pointRadius,
             yAxisID: s.axis === 'y2' ? 'y2' : 'y',
-            tooltip: s.noTooltip ? { enabled: false } : undefined,
         };
     }
     /**
@@ -174,6 +244,29 @@ export class LyraChart extends LyraElement {
             tooltipText: cs.getPropertyValue('--lyra-chart-tooltip-text').trim() || FALLBACK_TOOLTIP_TEXT,
         };
     }
+    /**
+     * A content-affecting-properties fingerprint used by `updated()` to skip a
+     * redundant `draw()` when neither visibility nor any of these properties
+     * actually changed since the last draw (e.g. an unrelated property/state
+     * update, or `requestUpdate()` with nothing changed). Mirrors
+     * `lite-chart.ts`'s `computeSignature()`.
+     */
+    computeSignature() {
+        return JSON.stringify([
+            this.type,
+            this.labels,
+            this.datasets,
+            this.legend,
+            this.area,
+            this.xLabel,
+            this.yLabel,
+            this.y2Label,
+            this.beginAtZero,
+            this.horizontal,
+            this.stacked,
+            this.config,
+        ]);
+    }
     /**
      * Builds `options.scales` for the effective chart type: no scale at all for
      * pie/doughnut (a proportional-area chart has no axis), the single radial
@@ -186,10 +279,10 @@ export class LyraChart extends LyraElement {
      * scale's `ticks.color`/`grid.color`/axis `title.color` so grid lines and
      * labels retheme instead of sitting at Chart.js's own hardcoded defaults.
      */
-    buildScales(theme) {
-        if (this.type === 'pie' || this.type === 'doughnut')
+    buildScales(effectiveType, theme) {
+        if (effectiveType === 'pie' || effectiveType === 'doughnut')
             return {};
-        if (this.type === 'radar' || this.type === 'polarArea') {
+        if (effectiveType === 'radar' || effectiveType === 'polarArea') {
             return {
                 r: {
                     beginAtZero: this.beginAtZero,
@@ -204,10 +297,10 @@ export class LyraChart extends LyraElement {
         // `stacked` only applies to bar/line-family charts sharing a categorical
         // axis, per the design spec — scatter/bubble's linear x scale and the
         // radial r scale above are out of scope.
-        const stacked = this.stacked && (this.type === 'bar' || this.type === 'line');
+        const stacked = this.stacked && (effectiveType === 'bar' || effectiveType === 'line');
         return {
             x: {
-                type: this.type === 'scatter' || this.type === 'bubble' ? 'linear' : 'category',
+                type: effectiveType === 'scatter' || effectiveType === 'bubble' ? 'linear' : 'category',
                 title: { display: !!this.xLabel, text: this.xLabel, color: theme.tick },
                 ticks: { color: theme.tick },
                 grid: { color: theme.grid },
@@ -261,8 +354,15 @@ export class LyraChart extends LyraElement {
     }
     buildConfig() {
         const theme = this.themeColors();
+        // Resolve the effective type up front: `config.type` (if set) overrides
+        // the attribute `type` post-merge, so scales/interaction must be built
+        // for *that* type, not `this.type` — otherwise a config.type override
+        // (e.g. line -> radar) ships with the wrong axis shape (categorical x/y
+        // instead of a radial r scale).
+        const effectiveType = this.config?.type ??
+            this.type;
         const generated = {
-            type: this.type,
+            type: effectiveType,
             data: {
                 labels: this.labels,
                 datasets: this.datasets.map((s) => this.seriesToDataset(s)),
@@ -280,7 +380,7 @@ export class LyraChart extends LyraElement {
                 // canvas-internal animation loop, so `prefersReducedMotion()` is
                 // checked here instead and fed into `options.animation`.
                 animation: prefersReducedMotion() ? false : undefined,
-                interaction: { intersect: false, mode: this.type === 'scatter' ? 'nearest' : 'index' },
+                interaction: { intersect: false, mode: effectiveType === 'scatter' ? 'nearest' : 'index' },
                 onClick: (event, _elements, chart) => this.handlePointClick(event, chart),
                 plugins: {
                     legend: { display: this.legend, labels: { color: theme.legend } },
@@ -288,6 +388,10 @@ export class LyraChart extends LyraElement {
                         backgroundColor: theme.tooltipBg,
                         titleColor: theme.tooltipText,
                         bodyColor: theme.tooltipText,
+                        // Chart.js's tooltip plugin has no per-dataset `tooltip.enabled`
+                        // — `Series.noTooltip` is implemented here instead, via the one
+                        // mechanism the core tooltip plugin actually reads.
+                        filter: (item) => !this.datasets[item.datasetIndex]?.noTooltip,
                     },
                     zoom: this.zoom
                         ? {
@@ -308,7 +412,7 @@ export class LyraChart extends LyraElement {
                         }
                         : undefined,
                 },
-                scales: this.buildScales(theme),
+                scales: this.buildScales(effectiveType, theme),
             },
         };
         if (!this.config)
@@ -428,6 +532,9 @@ __decorate([
 __decorate([
     state()
 ], LyraChart.prototype, "zoomed", void 0);
+__decorate([
+    state()
+], LyraChart.prototype, "visible", void 0);
 __decorate([
     query('canvas')
 ], LyraChart.prototype, "canvasEl", void 0);

package/dist/components/chart/histogram-bin.d.ts

@@ -2,5 +2,8 @@ export interface HistogramBucket {
     label: string;
     count: number;
 }
-/** Splits `values` into `binCount` equal-width buckets and counts membership. */
+/** Splits `values` into `binCount` equal-width buckets and counts membership.
+ *  Non-finite `binCount` (or <= 0) yields no buckets; a fractional `binCount`
+ *  is floored; non-finite samples in `values` are dropped rather than
+ *  corrupting bucket-index math. */
 export declare function binValues(values: number[], binCount: number): HistogramBucket[];

package/dist/components/chart/histogram-bin.js

@@ -1,29 +1,39 @@
-/** Splits `values` into `binCount` equal-width buckets and counts membership. */
+/** Splits `values` into `binCount` equal-width buckets and counts membership.
+ *  Non-finite `binCount` (or <= 0) yields no buckets; a fractional `binCount`
+ *  is floored; non-finite samples in `values` are dropped rather than
+ *  corrupting bucket-index math. */
 export function binValues(values, binCount) {
-    if (values.length === 0 || binCount <= 0)
+    const finite = values.filter((v) => Number.isFinite(v));
+    if (finite.length === 0 || !Number.isFinite(binCount))
         return [];
-    // Spreading `values` as call arguments (`Math.min(...values)`) throws
-    // `RangeError: Maximum call stack size exceeded` once `values` is large
-    // enough to overflow the engine's argument-list limit — reduce manually
-    // instead so an arbitrarily large sample never crashes.
-    let lo = values[0];
-    let hi = values[0];
-    for (const v of values) {
+    const bins = Math.floor(binCount);
+    if (bins <= 0)
+        return [];
+    let lo = finite[0];
+    let hi = finite[0];
+    for (const v of finite) {
         if (v < lo)
             lo = v;
         if (v > hi)
             hi = v;
     }
+    // Constant data (lo === hi) previously fell into the `v === hi` branch
+    // below, which places every value in the *last* bucket alone — misleading,
+    // since every other bucket reads 0 and the label implies a spread that
+    // isn't real. Spread it into the *first* bucket instead so a single-value
+    // dataset reads as "N items, one bucket populated" starting from the data's
+    // own value, not its synthetic +1 upper edge.
+    const constant = hi === lo;
     const span = hi - lo || 1;
-    const width = span / binCount;
-    const buckets = Array.from({ length: binCount }, (_, i) => {
+    const width = span / bins;
+    const buckets = Array.from({ length: bins }, (_, i) => {
         const bLo = lo + i * width;
         const bHi = lo + (i + 1) * width;
         return { label: `${bLo.toFixed(1)}–${bHi.toFixed(1)}`, count: 0 };
     });
-    for (const v of values) {
-        const index = v === hi ? binCount - 1 : Math.floor((v - lo) / width);
-        buckets[Math.min(binCount - 1, Math.max(0, index))].count++;
+    for (const v of finite) {
+        const index = constant ? 0 : v === hi ? bins - 1 : Math.floor((v - lo) / width);
+        buckets[Math.min(bins - 1, Math.max(0, index))].count++;
     }
     return buckets;
 }

package/dist/components/chart/lite-chart.d.ts

@@ -7,6 +7,13 @@ export interface LiteSeries {
     color?: string;
 }
 export type LyraLiteChartType = 'bar' | 'line';
+/**
+ * `'fit'` (default) squeezes the whole plot into the measured host width,
+ * exactly as this component always behaved. `'scroll'` gives every bar a
+ * fixed `barWidth` instead and lets the plot's content width exceed the
+ * host's, making the host horizontally scrollable.
+ */
+export type LyraLiteChartLayout = 'fit' | 'scroll';
 /**
  * `<lyra-lite-chart>` — a dependency-free bar/line chart, plain SVG/DOM
  * rendering with zero peer dependencies (unlike `lyra-chart`, which wraps
@@ -22,6 +29,17 @@ export type LyraLiteChartType = 'bar' | 'line';
  * `getComputedStyle()`-based re-theming step is needed the way `chart.ts`
  * needs one for its canvas.
  *
+ * By default (`layout="fit"`) the plot always squeezes to the measured host
+ * width. Three independent, opt-in escape hatches for dense/aligned data:
+ * `layout="scroll"` (+ `barWidth`) gives every bar a fixed pixel width and
+ * lets the plot overflow the host horizontally (scrollable) instead of
+ * squeezing; `maxLabels` decimates which x-axis text labels render (bars
+ * always still render) once there are more categories than that; and
+ * `barX` lets a consumer hand in its own per-category x-coordinate function
+ * — e.g. to pixel-align this chart's bars with a sibling `lyra-heatmap`'s
+ * calendar columns — overriding the internal slot math for both bars and
+ * their labels. All three are additive and no-ops when left unset.
+ *
  * @customElement lyra-lite-chart
  * @event lyra-point-click - Fired when a bar/point is activated (click, or
  *   Enter/Space while focused). `detail: { datasetIndex: number, index:
@@ -50,22 +68,67 @@ export declare class LyraLiteChart extends LyraElement {
     beginAtZero: boolean;
     /** Stacks each category's bars into one segmented bar. Ignored for `type="line"`. */
     stacked: boolean;
+    /** Formats a y-axis tick value for display (e.g. `(v) => \`$${v.toFixed(2)}\``). Falls back to the
+     *  built-in nice-number formatter when unset. */
+    tickFormat?: (value: number) => string;
+    /** `'fit'` (default) squeezes the plot into the measured host width, unchanged from before this
+     *  property existed. `'scroll'` gives every bar a fixed `barWidth` instead, letting the plot's
+     *  content width exceed the host's — the host becomes horizontally scrollable
+     *  (`overflow-x: auto`) so every bar stays exactly `barWidth` wide regardless of category count.
+     *  Reflects to the `layout` attribute (e.g. for `:host([layout='scroll'])` host styling). */
+    layout: LyraLiteChartLayout;
+    /** Fixed per-category bar width in px, used only when `layout="scroll"`. Ignored (as before this
+     *  property existed) in `layout="fit"`, the default. */
+    barWidth: number;
+    /** Caps how many x-axis category labels render text once `this.labels.length` exceeds it,
+     *  decimating roughly evenly while always keeping the first and last label. Bars themselves
+     *  always render regardless — only the axis text is decimated. Unset (the default) renders every
+     *  label, unchanged from before this property existed. Works in either `layout` mode. */
+    maxLabels?: number;
+    /** Overrides the x-origin `renderBars()`/the category labels would otherwise compute internally
+     *  for a given category index, for `type="bar"` only (bars and their axis labels stay
+     *  consistent with each other either way). Lets a consumer pixel-align this chart's bars with,
+     *  e.g., a sibling `lyra-heatmap`'s calendar columns by handing both components the same
+     *  coordinate function. Unset (the default) uses the existing internal per-category slot math,
+     *  unchanged from before this property existed. */
+    barX?: (index: number) => number;
     private plotWidth;
     private plotHeight;
+    private visible;
     private svgEl?;
     private resizeObserver?;
+    private intersectionObserver?;
+    private lastSignature;
+    private lastResult?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changed: PropertyValues): void;
     private colorFor;
     private domain;
+    private computeSignature;
     private emitPoint;
     private onPointKeyDown;
     private renderGrid;
+    /**
+     * `slot` is the per-category width to lay bars out against — either the
+     * measured-width-derived `plotW / n` (`layout="fit"`) or the fixed
+     * `barWidth` (`layout="scroll"`), computed once by the caller
+     * (`renderChart()`) and handed to both this method and the category-label
+     * x-position calc so the two can never drift apart from each other.
+     */
     private renderBars;
     private renderLines;
     render(): TemplateResult;
+    /**
+     * Step size for `maxLabels` decimation: 1 (show every label, today's
+     * unchanged default) when `maxLabels` is unset or already >= the label
+     * count, otherwise the ceil-divide spacing that lands close to
+     * `maxLabels` shown labels while always keeping index 0 and the last
+     * index (enforced by the caller, not here).
+     */
+    private labelStep;
+    private renderChart;
 }
 declare global {
     interface HTMLElementTagNameMap {