layerchart 2.0.0-next.47 → 2.0.0-next.49

package/dist/states/__fixtures__/ComponentNodeLifecycleChild.svelte

@@ -6,7 +6,7 @@
   ctx.registerComponent({
     name: 'ComponentNodeLifecycleChild',
     kind: 'mark',
-    markInfo: () => ({ y: 'value' }),
+    markInfo: () => ({ y: 'other' }),
   });
 </script>
 

package/dist/states/brush.svelte.d.ts

@@ -1,4 +1,9 @@
-export type BrushDomainType = Array<number | Date | null>;
+export type BrushDomainType = Array<number | Date | string | null>;
+/**
+ * For band scales, expand a [first, last] brush selection into the full category subarray.
+ * For continuous scales, returns the domain unchanged.
+ */
+export declare function expandBandBrushDomain(brushDomain: BrushDomainType, baseDomain: any[]): BrushDomainType;
 export type BrushRange = {
     x: number;
     y: number;
@@ -10,8 +15,12 @@ export type BrushRange = {
  * Narrowed from ChartState to only what brush needs, enabling easier testing.
  */
 export type BrushChartContext = {
-    xScale: (v: any) => number;
-    yScale: (v: any) => number;
+    xScale: ((v: any) => number) & {
+        bandwidth?: () => number;
+    };
+    yScale: ((v: any) => number) & {
+        bandwidth?: () => number;
+    };
     baseXScale: {
         domain: () => any[];
     };
@@ -56,31 +65,31 @@ export declare class BrushState {
     }): void;
     /** Set brush to a new range, clamped to domain bounds */
     setRange(startValue: {
-        x: number;
-        y: number;
+        x: any;
+        y: any;
     }, currentValue: {
-        x: number;
-        y: number;
+        x: any;
+        y: any;
     }): void;
     /** Move the entire brush range by a delta, clamped to domain bounds */
     moveRange(start: {
-        x: [number, number];
-        y: [number, number];
+        x: [any, any];
+        y: [any, any];
         value: {
-            x: number;
-            y: number;
+            x: any;
+            y: any;
         };
     }, currentValue: {
-        x: number;
-        y: number;
+        x: any;
+        y: any;
     }): void;
     /** Adjust a single edge of the brush, clamped to domain bounds. Handles inversion if dragged past opposite edge. */
     adjustEdge(edge: 'top' | 'bottom' | 'left' | 'right', start: {
-        x: [number, number];
-        y: [number, number];
+        x: [any, any];
+        y: [any, any];
     }, currentValue: {
-        x: number;
-        y: number;
+        x: any;
+        y: any;
     }): void;
     /**
      * Sync external domain values into brush state.

package/dist/states/brush.svelte.js

@@ -1,6 +1,47 @@
 import { clamp } from '@layerstack/utils';
 import { min, max } from 'd3-array';
 import { add } from '../utils/math.js';
+/**
+ * For band scales, expand a [first, last] brush selection into the full category subarray.
+ * For continuous scales, returns the domain unchanged.
+ */
+export function expandBandBrushDomain(brushDomain, baseDomain) {
+    if (brushDomain[0] == null ||
+        brushDomain[1] == null ||
+        typeof brushDomain[0] !== 'string') {
+        return brushDomain;
+    }
+    const startIdx = baseDomain.indexOf(brushDomain[0]);
+    const endIdx = baseDomain.indexOf(brushDomain[1]);
+    if (startIdx === -1 || endIdx === -1)
+        return brushDomain;
+    return baseDomain.slice(startIdx, endIdx + 1);
+}
+/** Check if a domain array is categorical (string-based) */
+function isCategoricalDomain(domain) {
+    return domain.length > 0 && typeof domain[0] === 'string';
+}
+/** Get the min (by domain index) of two values */
+function minByIndex(a, b, domain) {
+    return domain.indexOf(a) <= domain.indexOf(b) ? a : b;
+}
+/** Get the max (by domain index) of two values */
+function maxByIndex(a, b, domain) {
+    return domain.indexOf(a) >= domain.indexOf(b) ? a : b;
+}
+/** Clamp a value to domain bounds by index */
+function clampByIndex(value, minVal, maxVal, domain) {
+    const idx = domain.indexOf(value);
+    const minIdx = domain.indexOf(minVal);
+    const maxIdx = domain.indexOf(maxVal);
+    if (idx === -1)
+        return minVal;
+    if (idx < minIdx)
+        return minVal;
+    if (idx > maxIdx)
+        return maxVal;
+    return value;
+}
 export class BrushState {
     ctx;
     x = $state([null, null]);
@@ -20,22 +61,24 @@ export class BrushState {
         return this.ctx?.baseXScale.domain()[0];
     }
     get xDomainMax() {
-        return this.ctx?.baseXScale.domain()[1];
+        return this.ctx?.baseXScale.domain().at(-1);
     }
     get yDomainMin() {
         return this.ctx?.baseYScale.domain()[0];
     }
     get yDomainMax() {
-        return this.ctx?.baseYScale.domain()[1];
+        return this.ctx?.baseYScale.domain().at(-1);
     }
     get range() {
         if (!this.ctx) {
             return { x: 0, y: 0, width: 0, height: 0 };
         }
-        const top = this.ctx.yScale(this.y?.[1]);
-        const bottom = this.ctx.yScale(this.y?.[0]);
+        const xBw = this.ctx.xScale.bandwidth?.() ?? 0;
+        const yBw = this.ctx.yScale.bandwidth?.() ?? 0;
         const left = this.ctx.xScale(this.x?.[0]);
-        const right = this.ctx.xScale(this.x?.[1]);
+        const right = this.ctx.xScale(this.x?.[1]) + xBw;
+        const top = this.ctx.yScale(this.y?.[1]);
+        const bottom = this.ctx.yScale(this.y?.[0]) + yBw;
         return {
             x: this.axis === 'both' || this.axis === 'x' ? left : 0,
             y: this.axis === 'both' || this.axis === 'y' ? top : 0,
@@ -72,47 +115,97 @@ export class BrushState {
     /** Set brush to a new range, clamped to domain bounds */
     setRange(startValue, currentValue) {
         this.active = true;
-        this.x = [
-            clamp(min([startValue.x, currentValue.x]), this.xDomainMin, this.xDomainMax),
-            clamp(max([startValue.x, currentValue.x]), this.xDomainMin, this.xDomainMax),
-        ];
-        this.y = [
-            clamp(min([startValue.y, currentValue.y]), this.yDomainMin, this.yDomainMax),
-            clamp(max([startValue.y, currentValue.y]), this.yDomainMin, this.yDomainMax),
-        ];
+        const xDomain = this.ctx?.baseXScale.domain() ?? [];
+        const yDomain = this.ctx?.baseYScale.domain() ?? [];
+        if (isCategoricalDomain(xDomain)) {
+            this.x = [
+                clampByIndex(minByIndex(startValue.x, currentValue.x, xDomain), this.xDomainMin, this.xDomainMax, xDomain),
+                clampByIndex(maxByIndex(startValue.x, currentValue.x, xDomain), this.xDomainMin, this.xDomainMax, xDomain),
+            ];
+        }
+        else {
+            this.x = [
+                clamp(min([startValue.x, currentValue.x]), this.xDomainMin, this.xDomainMax),
+                clamp(max([startValue.x, currentValue.x]), this.xDomainMin, this.xDomainMax),
+            ];
+        }
+        if (isCategoricalDomain(yDomain)) {
+            this.y = [
+                clampByIndex(minByIndex(startValue.y, currentValue.y, yDomain), this.yDomainMin, this.yDomainMax, yDomain),
+                clampByIndex(maxByIndex(startValue.y, currentValue.y, yDomain), this.yDomainMin, this.yDomainMax, yDomain),
+            ];
+        }
+        else {
+            this.y = [
+                clamp(min([startValue.y, currentValue.y]), this.yDomainMin, this.yDomainMax),
+                clamp(max([startValue.y, currentValue.y]), this.yDomainMin, this.yDomainMax),
+            ];
+        }
     }
     /** Move the entire brush range by a delta, clamped to domain bounds */
     moveRange(start, currentValue) {
-        const dx = clamp(currentValue.x - start.value.x, this.xDomainMin - +start.x[0], this.xDomainMax - +start.x[1]);
-        this.x = [add(start.x[0], dx), add(start.x[1], dx)];
-        const dy = clamp(currentValue.y - start.value.y, this.yDomainMin - +start.y[0], this.yDomainMax - +start.y[1]);
-        this.y = [add(start.y[0], dy), add(start.y[1], dy)];
+        const xDomain = this.ctx?.baseXScale.domain() ?? [];
+        const yDomain = this.ctx?.baseYScale.domain() ?? [];
+        if (isCategoricalDomain(xDomain)) {
+            const startIdx = xDomain.indexOf(start.value.x);
+            const currentIdx = xDomain.indexOf(currentValue.x);
+            const origStartIdx = xDomain.indexOf(start.x[0]);
+            const origEndIdx = xDomain.indexOf(start.x[1]);
+            const delta = Math.max(-origStartIdx, Math.min(xDomain.length - 1 - origEndIdx, currentIdx - startIdx));
+            this.x = [xDomain[origStartIdx + delta], xDomain[origEndIdx + delta]];
+        }
+        else {
+            const dx = clamp(currentValue.x - start.value.x, this.xDomainMin - +start.x[0], this.xDomainMax - +start.x[1]);
+            this.x = [add(start.x[0], dx), add(start.x[1], dx)];
+        }
+        if (isCategoricalDomain(yDomain)) {
+            const startIdx = yDomain.indexOf(start.value.y);
+            const currentIdx = yDomain.indexOf(currentValue.y);
+            const origStartIdx = yDomain.indexOf(start.y[0]);
+            const origEndIdx = yDomain.indexOf(start.y[1]);
+            const delta = Math.max(-origStartIdx, Math.min(yDomain.length - 1 - origEndIdx, currentIdx - startIdx));
+            this.y = [yDomain[origStartIdx + delta], yDomain[origEndIdx + delta]];
+        }
+        else {
+            const dy = clamp(currentValue.y - start.value.y, this.yDomainMin - +start.y[0], this.yDomainMax - +start.y[1]);
+            this.y = [add(start.y[0], dy), add(start.y[1], dy)];
+        }
     }
     /** Adjust a single edge of the brush, clamped to domain bounds. Handles inversion if dragged past opposite edge. */
     adjustEdge(edge, start, currentValue) {
+        const xDomain = this.ctx?.baseXScale.domain() ?? [];
+        const yDomain = this.ctx?.baseYScale.domain() ?? [];
+        const xCat = isCategoricalDomain(xDomain);
+        const yCat = isCategoricalDomain(yDomain);
+        const clampX = (v) => xCat ? clampByIndex(v, this.xDomainMin, this.xDomainMax, xDomain) : clamp(v, this.xDomainMin, this.xDomainMax);
+        const clampY = (v) => yCat ? clampByIndex(v, this.yDomainMin, this.yDomainMax, yDomain) : clamp(v, this.yDomainMin, this.yDomainMax);
+        const ltX = (a, b) => xCat ? xDomain.indexOf(a) < xDomain.indexOf(b) : a < +b;
+        const gtX = (a, b) => xCat ? xDomain.indexOf(a) > xDomain.indexOf(b) : a > +b;
+        const ltY = (a, b) => yCat ? yDomain.indexOf(a) < yDomain.indexOf(b) : a < +b;
+        const gtY = (a, b) => yCat ? yDomain.indexOf(a) > yDomain.indexOf(b) : a > +b;
         switch (edge) {
             case 'top':
                 this.y = [
-                    clamp(currentValue.y < +start.y[0] ? currentValue.y : start.y[0], this.yDomainMin, this.yDomainMax),
-                    clamp(currentValue.y < +start.y[0] ? start.y[0] : currentValue.y, this.yDomainMin, this.yDomainMax),
+                    clampY(ltY(currentValue.y, start.y[0]) ? currentValue.y : start.y[0]),
+                    clampY(ltY(currentValue.y, start.y[0]) ? start.y[0] : currentValue.y),
                 ];
                 break;
             case 'bottom':
                 this.y = [
-                    clamp(currentValue.y > +start.y[1] ? start.y[1] : currentValue.y, this.yDomainMin, this.yDomainMax),
-                    clamp(currentValue.y > +start.y[1] ? currentValue.y : start.y[1], this.yDomainMin, this.yDomainMax),
+                    clampY(gtY(currentValue.y, start.y[1]) ? start.y[1] : currentValue.y),
+                    clampY(gtY(currentValue.y, start.y[1]) ? currentValue.y : start.y[1]),
                 ];
                 break;
             case 'left':
                 this.x = [
-                    clamp(currentValue.x > +start.x[1] ? start.x[1] : currentValue.x, this.xDomainMin, this.xDomainMax),
-                    clamp(currentValue.x > +start.x[1] ? currentValue.x : start.x[1], this.xDomainMin, this.xDomainMax),
+                    clampX(gtX(currentValue.x, start.x[1]) ? start.x[1] : currentValue.x),
+                    clampX(gtX(currentValue.x, start.x[1]) ? currentValue.x : start.x[1]),
                 ];
                 break;
             case 'right':
                 this.x = [
-                    clamp(currentValue.x < +start.x[0] ? currentValue.x : start.x[0], this.xDomainMin, this.xDomainMax),
-                    clamp(currentValue.x < +start.x[0] ? start.x[0] : currentValue.x, this.xDomainMin, this.xDomainMax),
+                    clampX(ltX(currentValue.x, start.x[0]) ? currentValue.x : start.x[0]),
+                    clampX(ltX(currentValue.x, start.x[0]) ? start.x[0] : currentValue.x),
                 ];
                 break;
         }

package/dist/states/brush.svelte.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { BrushState } from './brush.svelte.js';
+import { BrushState, expandBandBrushDomain } from './brush.svelte.js';
 /** Create a mock chart context with a simple linear scale over [0, 100] */
 function createMockCtx(options) {
     const xDomain = options?.xDomain ?? [0, 100];
@@ -289,4 +289,129 @@ describe('BrushState', () => {
             expect(brush.x).toBe(originalX);
         });
     });
+    describe('band scale support', () => {
+        const categories = ['A', 'B', 'C', 'D', 'E'];
+        const bandwidth = 80; // 500 / 5 = 100 step, with padding ~80 band
+        function createBandMockCtx() {
+            const width = 500;
+            const height = 300;
+            const step = width / categories.length;
+            const bw = bandwidth;
+            const xScale = Object.assign((v) => {
+                const idx = categories.indexOf(v);
+                return idx * step + (step - bw) / 2;
+            }, { bandwidth: () => bw });
+            const yScale = (v) => height - (v / 100) * height;
+            return {
+                xScale,
+                yScale,
+                baseXScale: { domain: () => categories },
+                baseYScale: { domain: () => [0, 100] },
+                width,
+                height,
+            };
+        }
+        it('should return correct domain min/max for band scales', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx);
+            expect(brush.xDomainMin).toBe('A');
+            expect(brush.xDomainMax).toBe('E');
+        });
+        it('should selectAll with first and last categories', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx);
+            brush.selectAll();
+            expect(brush.x).toEqual(['A', 'E']);
+        });
+        it('should setRange with categorical values', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx);
+            brush.setRange({ x: 'B', y: 30 }, { x: 'D', y: 70 });
+            expect(brush.active).toBe(true);
+            expect(brush.x).toEqual(['B', 'D']);
+        });
+        it('should setRange with reversed categorical values', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx);
+            brush.setRange({ x: 'D', y: 30 }, { x: 'B', y: 70 });
+            expect(brush.x).toEqual(['B', 'D']);
+        });
+        it('should clamp setRange to domain bounds', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx);
+            // 'A' is the min, 'E' is the max
+            brush.setRange({ x: 'A', y: 0 }, { x: 'E', y: 100 });
+            expect(brush.x).toEqual(['A', 'E']);
+        });
+        it('should compute range with bandwidth for band scales', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx, { x: ['B', 'D'], axis: 'x' });
+            const range = brush.range;
+            // Right edge should include bandwidth of last category
+            const leftPx = ctx.xScale('B');
+            const rightPx = ctx.xScale('D') + bandwidth;
+            expect(range.x).toBe(leftPx);
+            expect(range.width).toBe(rightPx - leftPx);
+        });
+        it('should moveRange by category offset', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx, { x: ['B', 'C'], y: [20, 40] });
+            brush.moveRange({ x: ['B', 'C'], y: [20, 40], value: { x: 'B', y: 30 } }, { x: 'C', y: 40 });
+            // Delta of 1 category to the right
+            expect(brush.x).toEqual(['C', 'D']);
+        });
+        it('should clamp moveRange to domain bounds', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx, { x: ['D', 'E'] });
+            brush.moveRange({ x: ['D', 'E'], y: [0, 100], value: { x: 'D', y: 50 } }, { x: 'E', y: 50 } // try to move right by 1
+            );
+            // Should stay at domain boundary
+            expect(brush.x).toEqual(['D', 'E']);
+        });
+        it('should adjustEdge right for categorical', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx, { x: ['B', 'D'] });
+            brush.adjustEdge('right', { x: ['B', 'D'], y: [0, 100] }, { x: 'E', y: 50 });
+            expect(brush.x).toEqual(['B', 'E']);
+        });
+        it('should adjustEdge left for categorical', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx, { x: ['B', 'D'] });
+            brush.adjustEdge('left', { x: ['B', 'D'], y: [0, 100] }, { x: 'A', y: 50 });
+            expect(brush.x).toEqual(['A', 'D']);
+        });
+        it('should invert edges when dragged past opposite edge (categorical)', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx, { x: ['B', 'D'] });
+            // Drag left handle past right edge
+            brush.adjustEdge('left', { x: ['B', 'D'], y: [0, 100] }, { x: 'E', y: 50 });
+            expect(brush.x).toEqual(['D', 'E']);
+        });
+    });
+});
+describe('expandBandBrushDomain', () => {
+    const baseDomain = ['A', 'B', 'C', 'D', 'E'];
+    it('should expand [first, last] to full category subarray', () => {
+        expect(expandBandBrushDomain(['B', 'D'], baseDomain)).toEqual(['B', 'C', 'D']);
+    });
+    it('should return full domain for [first, last] matching full extent', () => {
+        expect(expandBandBrushDomain(['A', 'E'], baseDomain)).toEqual(['A', 'B', 'C', 'D', 'E']);
+    });
+    it('should return single category when first equals last', () => {
+        expect(expandBandBrushDomain(['C', 'C'], baseDomain)).toEqual(['C']);
+    });
+    it('should pass through numeric domains unchanged', () => {
+        expect(expandBandBrushDomain([10, 50], [0, 100])).toEqual([10, 50]);
+    });
+    it('should pass through null domains unchanged', () => {
+        expect(expandBandBrushDomain([null, null], baseDomain)).toEqual([null, null]);
+    });
+    it('should pass through Date domains unchanged', () => {
+        const d1 = new Date('2024-01-01');
+        const d2 = new Date('2024-06-01');
+        expect(expandBandBrushDomain([d1, d2], [d1, d2])).toEqual([d1, d2]);
+    });
+    it('should return unchanged if category not found in domain', () => {
+        expect(expandBandBrushDomain(['X', 'Y'], baseDomain)).toEqual(['X', 'Y']);
+    });
 });

package/dist/states/chart.svelte.d.ts

@@ -97,6 +97,9 @@ export declare class ChartState<TData = any, XScale extends AnyScale = AnyScale,
     _rScaleProp: AnyScale | import("d3-scale").ScalePower<any, any, any>;
     xRangeProp: import("../utils/types.js").BaseRange | undefined;
     yRangeProp: import("../utils/types.js").BaseRange | undefined;
+    /** Transform-aware range for band scales in domain mode (D3 range-rescaling pattern) */
+    private _xScaleRange;
+    private _yScaleRange;
     yReverse: boolean;
     private resolveAccessor;
     x: (d: TData) => any;
@@ -187,6 +190,9 @@ export declare class ChartState<TData = any, XScale extends AnyScale = AnyScale,
     yDomainPossiblyNice: any[];
     zDomainPossiblyNice: any[];
     rDomainPossiblyNice: any[];
+    /** Viewport range — always [0, width] / [height, 0] for layout components (axis, grid, etc).
+     *  When band scale domain transform is active, xScale.range() is wider than the viewport,
+     *  so we return the base scale's range instead. */
     xRange: any[];
     yRange: any[];
     zRange: any[];

package/dist/states/chart.svelte.js

@@ -119,7 +119,12 @@ export class ChartState {
         });
         if (markInfo && !insideCompositeMark) {
             $effect(() => {
-                return untrack(() => this.registerMark(markInfo()));
+                const info = markInfo();
+                // Skip registration for empty mark info (e.g. pixel-mode marks)
+                // to avoid unnecessary array push/splice and version bumps
+                if (!info.x && !info.y && !info.data && !info.color && !info.seriesKey && !info.label)
+                    return;
+                return untrack(() => this.registerMark(info));
             });
         }
         return node;
@@ -152,7 +157,8 @@ export class ChartState {
                 return explicit;
             // Generate implicit series from registered marks.
             // Use the value axis accessor (y for horizontal charts, x for vertical).
-            const valueAxis = this.props.valueAxis ?? 'y';
+            const valueAxis = this.valueAxis;
+            const chartValueProp = valueAxis === 'y' ? this.props.y : this.props.x;
             const implicitSeries = [];
             for (const { info } of this._markInfos) {
                 const valueAccessor = valueAxis === 'y' ? info.y : info.x;
@@ -160,6 +166,11 @@ export class ChartState {
                     (typeof valueAccessor === 'string' ? valueAccessor : undefined);
                 if (!key)
                     continue;
+                // Skip if the mark just reuses the chart's own axis accessor and has no
+                // separate data — it's not defining a new series, just using the chart's axis.
+                // Marks with their own data arrays are kept (multi-dataset scenario).
+                if (key === chartValueProp && !info.data)
+                    continue;
                 if (implicitSeries.some((s) => s.key === key))
                     continue;
                 implicitSeries.push({
@@ -352,6 +363,27 @@ export class ChartState {
     xRangeProp = $derived(this.props.xRange ? this.props.xRange : this.props.radial ? [0, 2 * Math.PI] : undefined);
     yRangeProp = $derived(this.props.yRange ??
         (this.props.radial ? ({ height }) => [0, height / 2] : undefined));
+    /** Transform-aware range for band scales in domain mode (D3 range-rescaling pattern) */
+    _xScaleRange = $derived.by(() => {
+        if (this.transformState?.mode === 'domain' &&
+            (this.transformState.axis === 'x' || this.transformState.axis === 'both') &&
+            isScaleBand(this._xScaleProp) &&
+            this.width > 0) {
+            const { scale, translate } = this.transformState;
+            return [translate.x, translate.x + this.width * scale];
+        }
+        return this.xRangeProp;
+    });
+    _yScaleRange = $derived.by(() => {
+        if (this.transformState?.mode === 'domain' &&
+            (this.transformState.axis === 'y' || this.transformState.axis === 'both') &&
+            isScaleBand(this._yScaleProp) &&
+            this.height > 0) {
+            const { scale, translate } = this.transformState;
+            return [translate.y, translate.y + this.height * scale];
+        }
+        return this.yRangeProp;
+    });
     yReverse = $derived(!isScaleBand(this._yScaleProp) && !isScaleTime(this._yScaleProp));
     resolveAccessor(axis) {
         const axisAccessor = axis === 'x' ? this.props.x : this.props.y;
@@ -676,7 +708,7 @@ export class ChartState {
         nice: this.xNice,
         reverse: this.props.xReverse ?? false,
         percentRange: this.props.percentRange ?? false,
-        range: this.xRangeProp,
+        range: this._xScaleRange,
         height: this.height,
         width: this.width,
         extents: this.snappedExtents,
@@ -689,7 +721,7 @@ export class ChartState {
         nice: this.yNice,
         reverse: this.yReverse,
         percentRange: this.props.percentRange ?? false,
-        range: this.yRangeProp,
+        range: this._yScaleRange,
         height: this.height,
         width: this.width,
         extents: this.filteredExtents,
@@ -783,8 +815,25 @@ export class ChartState {
     yDomainPossiblyNice = $derived(this.yScale.domain());
     zDomainPossiblyNice = $derived(this.zScale.domain());
     rDomainPossiblyNice = $derived(this.rScale.domain());
-    xRange = $derived(getRange(this.xScale));
-    yRange = $derived(getRange(this.yScale));
+    /** Viewport range — always [0, width] / [height, 0] for layout components (axis, grid, etc).
+     *  When band scale domain transform is active, xScale.range() is wider than the viewport,
+     *  so we return the base scale's range instead. */
+    xRange = $derived.by(() => {
+        if (this.transformState?.mode === 'domain' &&
+            (this.transformState.axis === 'x' || this.transformState.axis === 'both') &&
+            isScaleBand(this._xScaleProp)) {
+            return getRange(this.baseXScale);
+        }
+        return getRange(this.xScale);
+    });
+    yRange = $derived.by(() => {
+        if (this.transformState?.mode === 'domain' &&
+            (this.transformState.axis === 'y' || this.transformState.axis === 'both') &&
+            isScaleBand(this._yScaleProp)) {
+            return getRange(this.baseYScale);
+        }
+        return getRange(this.yScale);
+    });
     zRange = $derived(getRange(this.zScale));
     rRange = $derived(getRange(this.rScale));
     aspectRatio = $derived(this.width / this.height);
@@ -925,22 +974,52 @@ export class ChartState {
         const brushX = brush.x;
         const brushY = brush.y;
         if ((axis === 'x' || axis === 'both') && brushX[0] != null && brushX[1] != null) {
-            const baseMinX = +this._baseXDomain[0];
-            const baseRangeX = +this._baseXDomain[1] - baseMinX;
-            const brushMinX = +brushX[0];
-            const brushRangeX = +brushX[1] - brushMinX;
-            if (brushRangeX > 0 && baseRangeX > 0) {
-                const newScale = baseRangeX / brushRangeX;
-                const newTranslateX = -((brushMinX - baseMinX) / baseRangeX) * this.width * newScale;
-                let newTranslateY = 0;
-                if (axis === 'both' && brushY[0] != null && brushY[1] != null) {
-                    const baseMinY = +this._baseYDomain[0];
-                    const baseRangeY = +this._baseYDomain[1] - baseMinY;
-                    const brushMinY = +brushY[0];
-                    newTranslateY = -((brushMinY - baseMinY) / baseRangeY) * this.height * newScale;
+            const baseDomainX = this._baseXDomain;
+            if (typeof baseDomainX[0] === 'string') {
+                // Categorical: compute scale/translate from domain indices
+                const totalCount = baseDomainX.length;
+                const startIdx = baseDomainX.indexOf(brushX[0]);
+                const endIdx = baseDomainX.indexOf(brushX[1]) + 1;
+                const selectedCount = endIdx - startIdx;
+                if (selectedCount > 0 && totalCount > 0) {
+                    const newScale = totalCount / selectedCount;
+                    const newTranslateX = -(startIdx / totalCount) * this.width * newScale;
+                    let newTranslateY = 0;
+                    if (axis === 'both' && brushY[0] != null && brushY[1] != null) {
+                        const baseDomainY = this._baseYDomain;
+                        if (typeof baseDomainY[0] === 'string') {
+                            const yTotal = baseDomainY.length;
+                            const yStart = baseDomainY.indexOf(brushY[0]);
+                            const yEnd = baseDomainY.indexOf(brushY[1]) + 1;
+                            const ySelected = yEnd - yStart;
+                            if (ySelected > 0) {
+                                newTranslateY = -(yStart / yTotal) * this.height * newScale;
+                            }
+                        }
+                    }
+                    this.transform.setScale(newScale);
+                    this.transform.setTranslate({ x: newTranslateX, y: newTranslateY });
+                }
+            }
+            else {
+                // Continuous: existing numeric logic
+                const baseMinX = +baseDomainX[0];
+                const baseRangeX = +baseDomainX[1] - baseMinX;
+                const brushMinX = +brushX[0];
+                const brushRangeX = +brushX[1] - brushMinX;
+                if (brushRangeX > 0 && baseRangeX > 0) {
+                    const newScale = baseRangeX / brushRangeX;
+                    const newTranslateX = -((brushMinX - baseMinX) / baseRangeX) * this.width * newScale;
+                    let newTranslateY = 0;
+                    if (axis === 'both' && brushY[0] != null && brushY[1] != null) {
+                        const baseMinY = +this._baseYDomain[0];
+                        const baseRangeY = +this._baseYDomain[1] - baseMinY;
+                        const brushMinY = +brushY[0];
+                        newTranslateY = -((brushMinY - baseMinY) / baseRangeY) * this.height * newScale;
+                    }
+                    this.transform.setScale(newScale);
+                    this.transform.setTranslate({ x: newTranslateX, y: newTranslateY });
                 }
-                this.transform.setScale(newScale);
-                this.transform.setTranslate({ x: newTranslateX, y: newTranslateY });
             }
         }
     }

package/dist/states/chart.svelte.test.js

@@ -195,7 +195,6 @@ describe('ChartState mark registration', () => {
         const { state, cleanup } = createChartState({
             data: [{ date: '2024-01', value: 10 }],
             x: 'date',
-            y: 'value',
         });
         try {
             expect(state.seriesState.isDefaultSeries).toBe(true);
@@ -215,6 +214,22 @@ describe('ChartState mark registration', () => {
             cleanup();
         }
     });
+    it('should not create implicit series when mark accessor matches chart accessor', () => {
+        const { state, cleanup } = createChartState({
+            data: [{ date: '2024-01', value: 10 }],
+            x: 'date',
+            y: 'value',
+        });
+        try {
+            // Mark with same y as chart — not a new series, just using chart's axis
+            state.registerMark({ y: 'value', color: 'red' });
+            flushSync();
+            expect(state.seriesState.isDefaultSeries).toBe(true);
+        }
+        finally {
+            cleanup();
+        }
+    });
     it('should generate implicit series from marks with string y accessors', () => {
         const data = [
             { date: '2024-01', apples: 10, bananas: 15 },