svelteplot 0.14.0 → 0.14.1-pr-549.1

package/dist/marks/Density.svelte

@@ -12,6 +12,12 @@
     density through the plot's color scale.  Defaults: `fill="none"`,
     `stroke="currentColor"`.
 
+    Grouping: when a `z` channel is specified (or when `fill`/`stroke` is a
+    field name or function rather than a CSS color), the mark computes a
+    separate density estimate per group and renders each group independently.
+    Using `fill` or `stroke` as a data accessor also maps the group value
+    through the plot's color scale.
+
     Supports faceting via `fx`/`fy`.
 -->
 <script lang="ts" generics="Datum extends DataRecord">
@@ -24,6 +30,13 @@
         y?: ChannelAccessor<Datum>;
         /** Optional weight channel; defaults to 1 for each point. */
         weight?: ChannelAccessor<Datum>;
+        /**
+         * Grouping channel.  When specified the mark computes a separate
+         * density estimate per unique z value and renders the groups
+         * independently.  Unlike `fill`/`stroke` as accessors, `z` does not
+         * automatically add a color channel.
+         */
+        z?: ChannelAccessor<Datum>;
         /**
          * Gaussian kernel bandwidth in screen pixels (default 20).
          * Larger values produce smoother, more blurred density estimates.
@@ -40,14 +53,22 @@
         /**
          * Fill color for density bands.  Use `"density"` to map each band's
          * estimated density through the plot's color scale.  Default `"none"`.
+         *
+         * When a field name or accessor function is provided (instead of a CSS
+         * color), the mark groups by the fill channel and maps group values
+         * through the plot's fill color scale.
          */
-        fill?: string;
+        fill?: ChannelAccessor<Datum> | string;
         /**
          * Stroke color for density isolines.  Use `"density"` to map each
          * isoline's estimated density through the plot's color scale.
          * Default `"currentColor"` when fill is `"none"`, otherwise `"none"`.
+         *
+         * When a field name or accessor function is provided (instead of a CSS
+         * color), the mark groups by the stroke channel and maps group values
+         * through the plot's stroke color scale.
          */
-        stroke?: string;
+        stroke?: ChannelAccessor<Datum> | string;
         strokeWidth?: number;
         strokeOpacity?: number;
         fillOpacity?: number;
@@ -79,6 +100,7 @@
     import { RAW_VALUE } from '../transforms/recordize.js';
     import { ORIGINAL_NAME_KEYS } from '../constants.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { isColorOrNull } from '../helpers/typeChecks.js';
 
     // Per-band fake-datum symbols — used to attach the density geometry,
     // extent, and pre-resolved facet values to the synthetic records passed
@@ -86,6 +108,7 @@
     const GEOM = Symbol('density_geom');
     const FX_VAL = Symbol('density_fx');
     const FY_VAL = Symbol('density_fy');
+    const Z_VAL = Symbol('density_z');
     const X1_VAL = Symbol('density_x1');
     const X2_VAL = Symbol('density_x2');
     const Y1_VAL = Symbol('density_y1');
@@ -108,10 +131,11 @@
         data,
         x: xAcc,
         y: yAcc,
+        z: zAcc,
         weight: weightAcc,
         bandwidth = 20,
         thresholds: thresholdSpec = 20,
-        fill = 'none',
+        fill: rawFill = 'none',
         stroke: rawStroke,
         strokeWidth,
         strokeOpacity,
@@ -128,13 +152,61 @@
 
     const plot = usePlot();
 
+    /**
+     * Returns true when a fill/stroke value should be treated as a data
+     * accessor (field name or function) rather than a constant color.
+     */
+    function isDensityAccessor(v: ChannelAccessor<Datum> | string | undefined): boolean {
+        if (v == null) return false;
+        if (typeof v === 'function') return true;
+        // Descriptor form { value, scale } — recurse into the inner value.
+        if (typeof v === 'object' && 'value' in (v as object))
+            return isDensityAccessor((v as { value: any }).value);
+        if (typeof v !== 'string') return false;
+        const lower = v.toLowerCase();
+        if (
+            lower === 'none' ||
+            lower === 'density' ||
+            lower === 'inherit' ||
+            lower === 'currentcolor'
+        )
+            return false;
+        return !isColorOrNull(v);
+    }
+
+    // Whether fill/stroke are data accessors (trigger z-grouping + color scale)
+    const fillIsAccessor = $derived(isDensityAccessor(rawFill));
+    const strokeIsAccessor = $derived(isDensityAccessor(rawStroke));
+
+    // Effective grouping accessor: explicit z > fill (if accessor) > stroke (if accessor)
+    const zGroupAcc = $derived<ChannelAccessor<Datum> | null>(
+        zAcc != null
+            ? zAcc
+            : fillIsAccessor
+              ? (rawFill as ChannelAccessor<Datum>)
+              : strokeIsAccessor
+                ? (rawStroke as ChannelAccessor<Datum>)
+                : null
+    );
+    const isZGrouped = $derived(zGroupAcc != null);
+
+    // Resolved static fill/stroke strings (after extracting accessor info)
+    const fill = $derived<string>(fillIsAccessor ? 'none' : ((rawFill as string) ?? 'none'));
+
     const fillDensity = $derived(/^density$/i.test(fill ?? ''));
 
     /**
      * When fill is active (not "none" or "density"), stroke defaults to "none";
      * otherwise it defaults to "currentColor".
+     * fillIsAccessor also counts as "fill active" even though the static fill
+     * prop is forced to "none" for GeoPathGroup — per-path fills flow via d.fill.
      */
-    const effectiveStroke = $derived(rawStroke ?? (fill !== 'none' ? 'none' : 'currentColor'));
+    const effectiveStroke = $derived<string>(
+        strokeIsAccessor
+            ? 'currentColor'
+            : ((rawStroke as string | undefined) ??
+                  (fill !== 'none' || fillIsAccessor ? 'none' : 'currentColor'))
+    );
 
     const strokeDensity = $derived(/^density$/i.test(effectiveStroke ?? ''));
 
@@ -145,9 +217,12 @@
     const markUsesColorScale = $derived(fillDensity || strokeDensity);
 
     /** Resolve a channel accessor against a single datum. */
-    function resolveAcc(acc: ChannelAccessor<any> | undefined, d: any): any {
+    function resolveAcc(acc: ChannelAccessor<any> | undefined | null, d: any): any {
         if (acc == null) return undefined;
         if (typeof acc === 'function') return (acc as (d: any) => any)(d);
+        // Descriptor form { value, scale } — resolve the inner value.
+        if (typeof acc === 'object' && 'value' in (acc as object))
+            return resolveAcc((acc as { value: any }).value, d);
         return (d as any)[acc as string];
     }
 
@@ -174,6 +249,8 @@
         fxVal?: RawValue;
         /** pre-resolved fy channel value for facet filtering */
         fyVal?: RawValue;
+        /** pre-resolved z group value for per-group coloring */
+        zVal?: RawValue;
     };
 
     /**
@@ -183,7 +260,8 @@
      * Phase 2: derive thresholds from global max (for consistent color scale).
      * Phase 3: compute contour geometries at those thresholds.
      *
-     * Geometries are tagged with fxVal/fyVal so <Mark> can filter per panel.
+     * Geometries are tagged with fxVal/fyVal/zVal so <Mark> can filter per
+     * panel and apply per-group colors.
      */
     const densityResult = $derived.by((): DensityGeometry[] | null => {
         const xFn = plot.scales.x?.fn;
@@ -193,13 +271,17 @@
         const { bx1, by1, w, h } = getBounds();
         const isFaceted = fxAcc != null || fyAcc != null;
 
-        // Group data by (fxVal, fyVal) — a single group when not faceted.
-        const groups = new SvelteMap<string, { fxVal: RawValue; fyVal: RawValue; items: any[] }>();
+        // Group data by (fxVal, fyVal, zVal) — a single group when not faceted/z-grouped.
+        const groups = new SvelteMap<
+            string,
+            { fxVal: RawValue; fyVal: RawValue; zVal: RawValue; items: any[] }
+        >();
         for (const d of data as any[]) {
-            const fxVal = isFaceted ? resolveAcc(fxAcc, d) : undefined;
-            const fyVal = isFaceted ? resolveAcc(fyAcc, d) : undefined;
-            const key = `${fxVal}\0${fyVal}`;
-            if (!groups.has(key)) groups.set(key, { fxVal, fyVal, items: [] });
+            const fxVal = fxAcc != null ? resolveAcc(fxAcc, d) : undefined;
+            const fyVal = fyAcc != null ? resolveAcc(fyAcc, d) : undefined;
+            const zVal = isZGrouped ? resolveAcc(zGroupAcc, d) : undefined;
+            const key = `${fxVal}\0${fyVal}\0${zVal}`;
+            if (!groups.has(key)) groups.set(key, { fxVal, fyVal, zVal, items: [] });
             groups.get(key)!.items.push(d);
         }
 
@@ -207,6 +289,7 @@
         type GroupEntry = {
             fxVal: RawValue;
             fyVal: RawValue;
+            zVal: RawValue;
             /** function returned by kde.contours(data); call it with a threshold */
             contourFn: (t: number) => DensityGeometry;
             maxVal: number;
@@ -214,7 +297,7 @@
         const groupEntries: GroupEntry[] = [];
         let globalMax = 0;
 
-        for (const { fxVal, fyVal, items } of groups.values()) {
+        for (const { fxVal, fyVal, zVal, items } of groups.values()) {
             if (!items.length) continue;
 
             const kde = contourDensity<any>()
@@ -231,7 +314,7 @@
             };
             const maxVal = contourFn.max;
             if (maxVal > globalMax) globalMax = maxVal;
-            groupEntries.push({ fxVal, fyVal, contourFn, maxVal });
+            groupEntries.push({ fxVal, fyVal, zVal, contourFn, maxVal });
         }
 
         if (!groupEntries.length || globalMax === 0) return null;
@@ -250,7 +333,7 @@
         // Phase 3: compute contour geometries for each group at each threshold.
         const allGeoms: DensityGeometry[] = [];
 
-        for (const { fxVal, fyVal, contourFn } of groupEntries) {
+        for (const { fxVal, fyVal, zVal, contourFn } of groupEntries) {
             for (const t of T) {
                 // contourFn expects actual density values; t is k-scaled.
                 const geom = contourFn(t / k);
@@ -268,6 +351,7 @@
                 geom.value = t; // k-scaled, used for color mapping
                 if (isFaceted && fxVal !== undefined) geom.fxVal = fxVal;
                 if (isFaceted && fyVal !== undefined) geom.fyVal = fyVal;
+                if (isZGrouped && zVal !== undefined) geom.zVal = zVal;
                 allGeoms.push(geom);
             }
         }
@@ -277,7 +361,7 @@
         // no record ever has an undefined fx/fy value, which would otherwise
         // introduce a spurious null facet panel.
         if (markUsesColorScale) {
-            for (const { fxVal, fyVal } of groupEntries) {
+            for (const { fxVal, fyVal, zVal } of groupEntries) {
                 const anchor: DensityGeometry = {
                     type: 'MultiPolygon',
                     coordinates: [],
@@ -285,6 +369,7 @@
                 };
                 if (isFaceted && fxVal !== undefined) anchor.fxVal = fxVal;
                 if (isFaceted && fyVal !== undefined) anchor.fyVal = fyVal;
+                if (isZGrouped && zVal !== undefined) anchor.zVal = zVal;
                 allGeoms.push(anchor);
             }
         }
@@ -348,7 +433,8 @@
      * computed (scatter-style circular dependency with x/y scales).  Each
      * per-band fake datum carries:
      *   [X1_VAL]..[Y2_VAL]  data-space extent → x/y scale domain
-     *   [RAW_VALUE]          k-scaled density  → color scale domain
+     *   [RAW_VALUE]          k-scaled density  → color scale domain (density mode)
+     *   [Z_VAL]              z group value     → fill/stroke scale domain (z-group mode)
      *   [FX_VAL]/[FY_VAL]   facet values      → Mark facet filtering
      *   [GEOM]               geometry          → rendered by children snippet
      */
@@ -356,17 +442,18 @@
         const ext = extent;
         const records: any[] = [];
         // Bootstrap extent record(s) so x/y scales are available for density
-        // computation on the first render pass.  When faceted, emit one record
-        // per unique (fxVal, fyVal) combination so no record carries an
-        // undefined fx/fy value (which would create a spurious null facet).
+        // computation on the first render pass.  When faceted or z-grouped, emit
+        // one record per unique (fxVal, fyVal, zVal) combination so no record
+        // carries an undefined fx/fy value (which would create a spurious null facet).
         if (ext && !densityResult) {
             const isFaceted = fxAcc != null || fyAcc != null;
-            if (isFaceted && data?.length) {
+            if ((isFaceted || isZGrouped) && data?.length) {
                 const seen = new SvelteSet<string>();
                 for (const d of data as any[]) {
-                    const fxVal = resolveAcc(fxAcc, d);
-                    const fyVal = resolveAcc(fyAcc, d);
-                    const key = `${fxVal}\0${fyVal}`;
+                    const fxVal = fxAcc != null ? resolveAcc(fxAcc, d) : undefined;
+                    const fyVal = fyAcc != null ? resolveAcc(fyAcc, d) : undefined;
+                    const zVal = isZGrouped ? resolveAcc(zGroupAcc, d) : undefined;
+                    const key = `${fxVal}\0${fyVal}\0${zVal}`;
                     if (!seen.has(key)) {
                         seen.add(key);
                         records.push({
@@ -375,7 +462,8 @@
                             [Y1_VAL]: ext.y1,
                             [Y2_VAL]: ext.y2,
                             [FX_VAL]: fxVal,
-                            [FY_VAL]: fyVal
+                            [FY_VAL]: fyVal,
+                            [Z_VAL]: zVal
                         });
                     }
                 }
@@ -399,6 +487,7 @@
                     [RAW_VALUE]: geom.value,
                     [FX_VAL]: geom.fxVal,
                     [FY_VAL]: geom.fyVal,
+                    [Z_VAL]: geom.zVal,
                     [GEOM]: geom
                 });
             }
@@ -407,13 +496,24 @@
         return records as DataRecord[];
     });
 
-    const markChannels = $derived(
-        markUsesColorScale
-            ? (['x1', 'x2', 'y1', 'y2', 'fill'] as const)
-            : (['x1', 'x2', 'y1', 'y2'] as const)
+    const markChannels = $derived.by(() => {
+        const base = ['x1', 'x2', 'y1', 'y2'] as const;
+        if (markUsesColorScale || fillIsAccessor) return [...base, 'fill'] as const;
+        if (strokeIsAccessor) return [...base, 'stroke'] as const;
+        return base;
+    });
+
+    // fill channel accessor:
+    //   density color scale (fill or stroke="density") → RAW_VALUE (registers domain)
+    //   fill accessor (z-grouping)                    → Z_VAL
+    //   else                                          → undefined
+    const markFill = $derived(
+        markUsesColorScale ? (RAW_VALUE as any) : fillIsAccessor ? (Z_VAL as any) : undefined
     );
 
-    const markFill = $derived(markUsesColorScale ? (RAW_VALUE as any) : undefined);
+    // stroke channel accessor: only set when stroke is a z-group accessor
+    const markStroke = $derived(strokeIsAccessor ? (Z_VAL as any) : undefined);
+
     const markFx = $derived(fxAcc != null ? FX_VAL : undefined);
     const markFy = $derived(fyAcc != null ? FY_VAL : undefined);
 
@@ -423,11 +523,16 @@
         y1: Y1_VAL as any,
         y2: Y2_VAL as any,
         fill: markFill as any,
+        stroke: markStroke as any,
         fx: markFx as any,
         fy: markFy as any,
         ...(typeof xAcc === 'string' && { [ORIGINAL_NAME_KEYS.x]: xAcc }),
         ...(typeof yAcc === 'string' && { [ORIGINAL_NAME_KEYS.y]: yAcc }),
-        ...(markUsesColorScale && { [ORIGINAL_NAME_KEYS.fill]: 'Density' })
+        ...(markUsesColorScale && { [ORIGINAL_NAME_KEYS.fill]: 'Density' }),
+        ...(fillIsAccessor &&
+            typeof rawFill === 'string' && { [ORIGINAL_NAME_KEYS.fill]: rawFill }),
+        ...(strokeIsAccessor &&
+            typeof rawStroke === 'string' && { [ORIGINAL_NAME_KEYS.stroke]: rawStroke })
     });
 
     const path = geoPath();
@@ -456,6 +561,8 @@
             className={className || undefined}
             ariaLabel="density"
             {canvas}
-            {plot} />
+            {plot}
+            usePerPathFill={fillIsAccessor}
+            usePerPathStroke={strokeIsAccessor} />
     {/snippet}
 </Mark>

package/dist/marks/Density.svelte.d.ts

@@ -9,6 +9,13 @@ declare function $$render<Datum extends DataRecord>(): {
         y?: ChannelAccessor<Datum>;
         /** Optional weight channel; defaults to 1 for each point. */
         weight?: ChannelAccessor<Datum>;
+        /**
+         * Grouping channel.  When specified the mark computes a separate
+         * density estimate per unique z value and renders the groups
+         * independently.  Unlike `fill`/`stroke` as accessors, `z` does not
+         * automatically add a color channel.
+         */
+        z?: ChannelAccessor<Datum>;
         /**
          * Gaussian kernel bandwidth in screen pixels (default 20).
          * Larger values produce smoother, more blurred density estimates.
@@ -25,14 +32,22 @@ declare function $$render<Datum extends DataRecord>(): {
         /**
          * Fill color for density bands.  Use `"density"` to map each band's
          * estimated density through the plot's color scale.  Default `"none"`.
+         *
+         * When a field name or accessor function is provided (instead of a CSS
+         * color), the mark groups by the fill channel and maps group values
+         * through the plot's fill color scale.
          */
-        fill?: string;
+        fill?: ChannelAccessor<Datum> | string;
         /**
          * Stroke color for density isolines.  Use `"density"` to map each
          * isoline's estimated density through the plot's color scale.
          * Default `"currentColor"` when fill is `"none"`, otherwise `"none"`.
+         *
+         * When a field name or accessor function is provided (instead of a CSS
+         * color), the mark groups by the stroke channel and maps group values
+         * through the plot's stroke color scale.
          */
-        stroke?: string;
+        stroke?: ChannelAccessor<Datum> | string;
         strokeWidth?: number;
         strokeOpacity?: number;
         fillOpacity?: number;
@@ -80,6 +95,12 @@ interface $$IsomorphicComponent {
  * density through the plot's color scale.  Defaults: `fill="none"`,
  * `stroke="currentColor"`.
  *
+ * Grouping: when a `z` channel is specified (or when `fill`/`stroke` is a
+ * field name or function rather than a CSS color), the mark computes a
+ * separate density estimate per group and renders each group independently.
+ * Using `fill` or `stroke` as a data accessor also maps the group value
+ * through the plot's color scale.
+ *
  * Supports faceting via `fx`/`fy`.
  */
 declare const Density: $$IsomorphicComponent;

package/dist/marks/Link.svelte

@@ -184,7 +184,7 @@
         {:else}
             <g class={['link', className]} data-use-x={usedScales.x ? 1 : 0}>
                 {#each scaledData as d, i (i)}
-                    {#if d.valid || true}
+                    {#if d.valid}
                         {@const [style, styleClass] = resolveStyles(
                             plot,
                             d,

package/dist/marks/RegressionX.svelte

@@ -34,7 +34,7 @@
     );
 </script>
 
-<Mark type="regression">
+<Mark type="regression" {data} fx={options.fx} fy={options.fy}>
     {#each groups as group, g (g)}
         <Regression data={group as any} dependent="x" {...options as any} />
     {/each}

package/dist/marks/RegressionY.svelte

@@ -33,7 +33,7 @@
     );
 </script>
 
-<Mark type="regression">
+<Mark type="regression" {data} fx={options.fx} fy={options.fy}>
     {#each groups as group, i (i)}
         <Regression data={group as any} dependent="y" {...options as any} />
     {/each}

package/dist/marks/helpers/GeoPathCanvas.svelte

@@ -19,7 +19,9 @@
         strokeOpacity,
         fillOpacity,
         opacity,
-        strokeMiterlimit
+        strokeMiterlimit,
+        usePerPathFill = false,
+        usePerPathStroke = false
     }: {
         scaledData: ScaledDataRecord[];
         path: GeoPath;
@@ -38,6 +40,8 @@
         fillOpacity?: number;
         opacity?: number;
         strokeMiterlimit?: number;
+        usePerPathFill?: boolean;
+        usePerPathStroke?: boolean;
     } = $props();
 
     const plot = usePlot();
@@ -86,8 +90,16 @@
                 if (!geom?.coordinates?.length) continue;
 
                 const thresholdValue = (d.datum[RAW_VALUE as any] as number) ?? 0;
-                const fillColor = resolveCanvasColor(resolveColorProp(fill, thresholdValue));
-                const strokeColor = resolveCanvasColor(resolveColorProp(stroke, thresholdValue));
+                const fillColor = resolveCanvasColor(
+                    usePerPathFill && d.fill
+                        ? (d.fill as string)
+                        : resolveColorProp(fill, thresholdValue)
+                );
+                const strokeColor = resolveCanvasColor(
+                    usePerPathStroke && d.stroke
+                        ? (d.stroke as string)
+                        : resolveColorProp(stroke, thresholdValue)
+                );
 
                 context.beginPath();
                 path(geom);

package/dist/marks/helpers/GeoPathCanvas.svelte.d.ts

@@ -18,6 +18,8 @@ type $$ComponentProps = {
     fillOpacity?: number;
     opacity?: number;
     strokeMiterlimit?: number;
+    usePerPathFill?: boolean;
+    usePerPathStroke?: boolean;
 };
 declare const GeoPathCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
 type GeoPathCanvas = ReturnType<typeof GeoPathCanvas>;

package/dist/marks/helpers/GeoPathGroup.svelte

@@ -26,7 +26,9 @@
         className,
         ariaLabel,
         canvas = false,
-        plot
+        plot,
+        usePerPathFill = false,
+        usePerPathStroke = false
     }: {
         scaledData: ScaledDataRecord[];
         /** d3 geoPath renderer (must NOT have a canvas context set). */
@@ -52,6 +54,17 @@
         /** Render using a canvas element instead of SVG paths. */
         canvas?: boolean;
         plot: PlotState;
+        /**
+         * When true, per-path fill color is read from `d.fill` in scaledData
+         * (z-group coloring).  Must be set explicitly; avoids accidental fill
+         * when fill channel is only registered for color-scale domain purposes.
+         */
+        usePerPathFill?: boolean;
+        /**
+         * When true, per-path stroke color is read from `d.stroke` in scaledData
+         * (z-group coloring).
+         */
+        usePerPathStroke?: boolean;
     } = $props();
 
     /** Resolve a fill/stroke prop that may be the colorKeyword. */
@@ -63,10 +76,14 @@
     }
 
     /** Build the inline style string for a single contour/density path. */
-    function buildStyle(value: number): string {
+    function buildStyle(d: ScaledDataRecord, value: number): string {
         const parts: string[] = [];
-        parts.push(`fill:${resolveColor(fill, value)}`);
-        parts.push(`stroke:${resolveColor(stroke, value)}`);
+        parts.push(
+            `fill:${usePerPathFill && d.fill ? (d.fill as string) : resolveColor(fill, value)}`
+        );
+        parts.push(
+            `stroke:${usePerPathStroke && d.stroke ? (d.stroke as string) : resolveColor(stroke, value)}`
+        );
         if (strokeWidth != null) parts.push(`stroke-width:${strokeWidth}`);
         if (strokeOpacity != null) parts.push(`stroke-opacity:${strokeOpacity}`);
         if (fillOpacity != null) parts.push(`fill-opacity:${fillOpacity}`);
@@ -88,7 +105,9 @@
         {strokeOpacity}
         {fillOpacity}
         {opacity}
-        {strokeMiterlimit} />
+        {strokeMiterlimit}
+        {usePerPathFill}
+        {usePerPathStroke} />
 {:else}
     <g clip-path={clipPath} class={className || null} aria-label={ariaLabel}>
         {#each scaledData as d, i (i)}
@@ -96,7 +115,7 @@
             {#if geom?.coordinates?.length}
                 <path
                     d={path(geom)}
-                    style={buildStyle((d.datum[RAW_VALUE as any] as number) ?? 0)} />
+                    style={buildStyle(d, (d.datum[RAW_VALUE as any] as number) ?? 0)} />
             {/if}
         {/each}
     </g>

package/dist/marks/helpers/GeoPathGroup.svelte.d.ts

@@ -25,6 +25,17 @@ type $$ComponentProps = {
     /** Render using a canvas element instead of SVG paths. */
     canvas?: boolean;
     plot: PlotState;
+    /**
+     * When true, per-path fill color is read from `d.fill` in scaledData
+     * (z-group coloring).  Must be set explicitly; avoids accidental fill
+     * when fill channel is only registered for color-scale domain purposes.
+     */
+    usePerPathFill?: boolean;
+    /**
+     * When true, per-path stroke color is read from `d.stroke` in scaledData
+     * (z-group coloring).
+     */
+    usePerPathStroke?: boolean;
 };
 /**
  * Renders GeoJSON geometries as SVG <path> elements (or via canvas when

package/dist/marks/helpers/Regression.svelte

@@ -43,7 +43,6 @@
         regressionLoess
     } from '../../regression/index.js';
     import { resolveChannel } from '../../helpers/resolve.js';
-    import { isTemporalScale } from '../../helpers/typeChecks.js';
     import { confidenceInterval } from '../../helpers/math.js';
     import callWithProps from '../../helpers/callWithProps.js';
     import type { DataRecord, FacetContext, RawValue } from '../../types/index.js';
@@ -93,8 +92,12 @@
     }
 
     // Convert generated points back to Date for time scales so downstream marks render correctly.
-    function toOutputX(value: number, scaleType: string): RawValue {
-        return isTemporalScale(scaleType) ? new Date(value) : value;
+    // Takes a boolean instead of the scale type to avoid a circular dependency: if we used
+    // plot.scales[independent].type, the Line mark would register numeric __x values during the
+    // first render pass (before the scale type is resolved), causing scale inference to see a mix
+    // of Dates and numbers and fall back to 'linear' permanently.
+    function toOutputX(value: number, isTemporal: boolean): RawValue {
+        return isTemporal ? new Date(value) : value;
     }
 
     function makeTicks(domain: [number, number], count = 40): number[] {
@@ -129,6 +132,16 @@
 
     const regressionFn = $derived(maybeRegression(type));
 
+    // Detect temporality from the raw data rather than from the computed scale type to avoid a
+    // circular dependency that would cause the scale type to be permanently inferred as 'linear'.
+    // Scan for the first row that resolves to a non-null independent value — checking only
+    // filteredData[0] would give false negatives when the leading row has a missing/null value.
+    const independentIsDate = $derived(
+        filteredData.some(
+            (d) => resolveChannel(independent, d, options as any) instanceof Date
+        )
+    );
+
     // Build a clean numeric input set for regression fitting, dropping invalid rows early.
     const regressionInput = $derived(
         filteredData
@@ -193,18 +206,18 @@
         // Prefer batch prediction when supported, then per-point predict, then raw curve output.
         if (typeof regression.predictMany === 'function') {
             return regression.predictMany(regrPoints).map((__y, i) => ({
-                __x: toOutputX(regrPoints[i], plot.scales[independent].type),
+                __x: toOutputX(regrPoints[i], independentIsDate),
                 __y
             }));
         }
         if (typeof regression.predict === 'function') {
             return regrPoints.map((point) => ({
-                __x: toOutputX(point, plot.scales[independent].type),
+                __x: toOutputX(point, independentIsDate),
                 __y: regression.predict!(point)
             }));
         }
         return regression.map(([__x, __y]) => ({
-            __x: toOutputX(__x, plot.scales[independent].type),
+            __x: toOutputX(__x, independentIsDate),
             __y
         }));
     });
@@ -230,7 +243,7 @@
         return regrPoints.map((x) => {
             const { x: __x, left, right } = confBandGen(x);
             return {
-                __x: toOutputX(__x, plot.scales[independent].type),
+                __x: toOutputX(__x, independentIsDate),
                 __y1: left,
                 __y2: right
             };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.14.0",
+    "version": "0.14.1-pr-549.1",
     "description": "A Svelte-native data visualization framework based on the layered grammar of graphics principles.",
     "keywords": [
         "svelte",
@@ -94,7 +94,7 @@
         "d3-scale-chromatic": "^3.1.0",
         "d3-shape": "^3.2.0",
         "d3-time": "^3.1.0",
-        "es-toolkit": "^1.44.0",
+        "es-toolkit": "^1.45.1",
         "fast-equals": "^6.0.0",
         "interval-tree-1d": "^1.0.4",
         "merge-deep": "^3.0.3"
@@ -105,13 +105,13 @@
         "@shikijs/twoslash": "^3.22.0",
         "@sveltejs/adapter-auto": "^7.0.1",
         "@sveltejs/adapter-static": "^3.0.10",
-        "@sveltejs/enhanced-img": "^0.10.2",
+        "@sveltejs/enhanced-img": "^0.10.4",
         "@sveltejs/eslint-config": "^8.3.5",
-        "@sveltejs/kit": "^2.52.2",
+        "@sveltejs/kit": "^2.57.1",
         "@sveltejs/package": "^2.5.7",
         "@sveltejs/vite-plugin-svelte": "6.2.4",
-        "@sveltepress/twoslash": "^1.3.6",
-        "@sveltepress/vite": "^1.3.6",
+        "@sveltepress/twoslash": "^1.3.10",
+        "@sveltepress/vite": "^1.3.10",
         "@testing-library/svelte": "^5.3.1",
         "@testing-library/user-event": "^14.6.1",
         "@types/d3-array": "^3.2.2",
@@ -128,11 +128,12 @@
         "@types/d3-scale-chromatic": "^3.1.0",
         "@types/d3-shape": "^3.1.8",
         "@types/geojson": "^7946.0.16",
+        "@types/node": "^25.6.0",
         "@types/topojson": "^3.2.6",
         "@types/topojson-client": "^3.1.5",
-        "@typescript-eslint/eslint-plugin": "^8.56.0",
-        "@typescript-eslint/parser": "^8.56.0",
-        "@unocss/extractor-svelte": "^66.6.0",
+        "@typescript-eslint/eslint-plugin": "^8.58.1",
+        "@typescript-eslint/parser": "^8.58.1",
+        "@unocss/extractor-svelte": "^66.6.8",
         "@vite-pwa/sveltekit": "^1.1.0",
         "csstype": "^3.2.3",
         "d3-dsv": "^3.0.1",
@@ -142,50 +143,50 @@
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-package-json": "^0.88.3",
         "eslint-plugin-regexp": "^2.10.0",
-        "eslint-plugin-svelte": "3.15.0",
+        "eslint-plugin-svelte": "3.17.0",
         "jqmath": "^0.4.9",
         "jsdom": "^27.4.0",
         "log-update": "^7.1.0",
-        "lru-cache": "^11.2.6",
+        "lru-cache": "^11.3.3",
         "magic-string": "^0.30.21",
-        "mdast-util-from-markdown": "^2.0.2",
+        "mdast-util-from-markdown": "^2.0.3",
         "mdast-util-gfm": "^3.1.0",
-        "oxlint": "^1.48.0",
+        "oxlint": "^1.59.0",
         "oxlint-tsgolint": "^0.14.0",
         "pixelmatch": "^7.1.0",
         "pngjs": "^7.0.0",
-        "prettier": "^3.8.1",
-        "prettier-plugin-svelte": "^3.5.0",
-        "puppeteer": "^24.37.4",
+        "prettier": "^3.8.2",
+        "prettier-plugin-svelte": "^3.5.1",
+        "puppeteer": "^24.40.0",
         "remark-code-extra": "^1.0.1",
         "remark-code-frontmatter": "^1.0.0",
         "remark-math": "^6.0.0",
         "resize-observer-polyfill": "^1.5.1",
-        "sass": "^1.97.3",
+        "sass": "^1.99.0",
         "shiki": "^3.22.0",
         "svelte": "5",
-        "svelte-check": "^4.4.1",
-        "svelte-eslint-parser": "1.4.1",
+        "svelte-check": "^4.4.6",
+        "svelte-eslint-parser": "1.6.0",
         "svelte-highlight": "^7.9.0",
         "svg-path-parser": "^1.1.0",
-        "temml": "^0.13.1",
+        "temml": "^0.13.2",
         "topojson-client": "^3.1.0",
         "ts-essentials": "^10.1.1",
         "tslib": "^2.8.1",
-        "typedoc": "^0.28.17",
-        "typedoc-plugin-markdown": "^4.10.0",
+        "typedoc": "^0.28.18",
+        "typedoc-plugin-markdown": "^4.11.0",
         "typescript": "^5.9.3",
         "uid": "^2.0.2",
         "unist-util-visit": "^5.1.0",
-        "unocss": "^66.6.0",
+        "unocss": "^66.6.8",
         "vite": "^7.3.1",
-        "vitest": "^4.0.18",
+        "vitest": "^4.1.4",
         "vitest-matchmedia-mock": "^2.0.3",
-        "wx-svelte-grid": "^2.5.0",
+        "wx-svelte-grid": "^2.6.1",
         "yoctocolors": "^2.1.2"
     },
     "peerDependencies": {
         "svelte": "^5.43.0"
     },
-    "packageManager": "pnpm@10.30.0"
+    "packageManager": "pnpm@10.33.0"
 }