@fjader/svelte 0.2.3 → 0.2.5

package/dist/scales/TimeScaleState.svelte.js

@@ -62,7 +62,7 @@ export class TimeScaleState extends LinearScaleState {
      * Register a mark's datetime extent.
      * Computes t0, converts all extents to offsets, updates parent.
      */
-    addDatetimeExtent(datetimeRange, markId) {
+    addDatetimeExtent(datetimeRange, markId, options = {}) {
         const minDate = toDate(datetimeRange[0]);
         const maxDate = toDate(datetimeRange[1]);
         this.#datetimeExtents.set(markId, [minDate, maxDate]);
@@ -77,21 +77,21 @@ export class TimeScaleState extends LinearScaleState {
         }
         this.#suppressUpdate = false;
         // Single update with time-aware nice
-        this.updateExtentFromExtents();
+        this.updateExtentFromExtents(true, options.instant);
     }
     /**
      * Register a mark's extent using offset values (seconds from t0).
      * Useful when data is already in offset form (e.g., from binned queries).
      * Converts offsets back to datetimes and delegates to addDatetimeExtent.
      */
-    addOffsetExtent(offsetRange, markId) {
+    addOffsetExtent(offsetRange, markId, options = {}) {
         if (!this.#t0) {
             console.warn(`[TimeScaleState] Cannot add offset extent: t0 not set yet`);
             return;
         }
         const minDate = this.offsetToDate(offsetRange[0]);
         const maxDate = this.offsetToDate(offsetRange[1]);
-        this.addDatetimeExtent([minDate, maxDate], markId);
+        this.addDatetimeExtent([minDate, maxDate], markId, options);
     }
     /**
      * Remove a mark's datetime extent.
@@ -110,12 +110,12 @@ export class TimeScaleState extends LinearScaleState {
      * Override: apply time-aware nice instead of linear nice.
      * Called by super.addMark via polymorphism.
      */
-    updateExtentFromExtents(nice = true) {
+    updateExtentFromExtents(nice = true, instant = false) {
         if (this.#suppressUpdate)
             return;
         // If no datetime extents, fall through to linear behavior
         if (this.#datetimeExtents.size === 0) {
-            super.updateExtentFromExtents(nice);
+            super.updateExtentFromExtents(nice, instant);
             return;
         }
         // Compute global datetime range
@@ -141,7 +141,7 @@ export class TimeScaleState extends LinearScaleState {
             this._setExtent(minOffset, maxOffset);
         }
         this.resetDomainLimits();
-        this.resetZoom();
+        this.resetZoom(instant);
     }
     // ===========================================================================
     // VIEWMANAGER INTEGRATION

package/dist/scales/color-utils.d.ts

@@ -26,9 +26,6 @@ export declare function getInterpolator(scheme: string): Interpolator | null;
  * Get the color array for an ordinal scheme.
  */
 export declare function getOrdinalColors(scheme: string): readonly string[] | null;
-/**
- * Determine if a scheme is ordinal (discrete) or continuous.
- */
 /**
  * All available scheme names, grouped by type.
  */

package/dist/scales/color-utils.js

@@ -327,9 +327,6 @@ export function getOrdinalColors(scheme) {
     const key = scheme.toLowerCase();
     return ORDINAL_SCHEMES[key] || null;
 }
-/**
- * Determine if a scheme is ordinal (discrete) or continuous.
- */
 /**
  * All available scheme names, grouped by type.
  */

package/dist/scales/entered.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether a scale's domain is ready to show: a continuous scale only once a
+ * chart drawing it has its marks' first data in (LinearScaleState.entered).
+ * Before that its domain is a placeholder, and an axis or grid drawn from it
+ * shows [0, 100] for a moment. Scales without the notion (band, point) are
+ * always shown.
+ */
+export declare function hasEntered(scale: unknown): boolean;

package/dist/scales/entered.js

@@ -0,0 +1,10 @@
+/**
+ * Whether a scale's domain is ready to show: a continuous scale only once a
+ * chart drawing it has its marks' first data in (LinearScaleState.entered).
+ * Before that its domain is a placeholder, and an axis or grid drawn from it
+ * shows [0, 100] for a moment. Scales without the notion (band, point) are
+ * always shown.
+ */
+export function hasEntered(scale) {
+    return scale?.entered !== false;
+}

package/dist/spec/LazyQueryEngine.js

@@ -8,10 +8,7 @@
  * DuckDB runs in the browser via @duckdb/duckdb-wasm, loaded from jsDelivr.
  */
 import { QueryEngine } from '../query-engine/QueryEngine';
-// ---------------------------------------------------------------------------
-// Configuration (must be set before first getOrCreateQueryEngine call)
-// ---------------------------------------------------------------------------
-/** Inline WASM bytes + worker code (for environments where separate assets can't be served). */
+import { initDuckDB } from '../query-engine/duckdb';
 // ---------------------------------------------------------------------------
 // Singleton QueryEngine
 // ---------------------------------------------------------------------------
@@ -35,24 +32,10 @@ export async function getOrCreateQueryEngine(userEngine) {
     return _enginePromise;
 }
 async function initEngine() {
-    _engine = new QueryEngine(await initFromWasm());
+    _engine = new QueryEngine(await initDuckDB());
     return _engine;
 }
 // ---------------------------------------------------------------------------
-// WASM init (standard CDN bundles)
-// ---------------------------------------------------------------------------
-async function initFromWasm() {
-    const duckdb = await import('@duckdb/duckdb-wasm');
-    const bundles = duckdb.getJsDelivrBundles();
-    const bundle = await duckdb.selectBundle(bundles);
-    const workerUrl = URL.createObjectURL(new Blob([`importScripts("${bundle.mainWorker}");`], { type: 'text/javascript' }));
-    const worker = new Worker(workerUrl);
-    const db = new duckdb.AsyncDuckDB(new duckdb.VoidLogger(), worker);
-    await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
-    URL.revokeObjectURL(workerUrl);
-    return (await db.connect());
-}
-// ---------------------------------------------------------------------------
 // Data loading (shared across all render calls)
 // ---------------------------------------------------------------------------
 const _loadedTables = new Set();

package/dist/spec/MarkRegistry.d.ts

@@ -3,7 +3,7 @@
  * and resolves mark spec objects into component props.
  */
 import type { Component } from 'svelte';
-import type { MarkSpec } from './types';
+import type { MarkSpec, ColorFieldSpec } from './types';
 export declare const MARK_REGISTRY: Record<string, Component<any>>;
 /** Channel prop names that hold FieldSpec values and need resolution. */
 export declare const FIELD_CHANNELS: Set<string>;
@@ -11,6 +11,8 @@ export declare const FIELD_CHANNELS: Set<string>;
 export declare const STROKE_AS_FIELD_MARKS: Set<string>;
 /** Internal mark type → spec mark type. Used by both resolveMarkEntry and exportSpec. */
 export declare const SPEC_MARK_TYPES: Record<string, string>;
+/** A colour channel with explicit `domain`/`range`, which is not a FieldSpec. */
+export declare function isColorFieldSpec(value: unknown): value is ColorFieldSpec;
 /**
  * Convert a MarkSpec into { component, props } for svelte:component rendering.
  * Resolves FieldSpecs, transforms, and selection references.

package/dist/spec/MarkRegistry.js

@@ -44,6 +44,13 @@ export const SPEC_MARK_TYPES = {
     rectx: 'rectX',
     text: 'text'
 };
+/** A colour channel with explicit `domain`/`range`, which is not a FieldSpec. */
+export function isColorFieldSpec(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        typeof value.field === 'string' &&
+        ('domain' in value || 'range' in value));
+}
 /**
  * Convert a MarkSpec into { component, props } for svelte:component rendering.
  * Resolves FieldSpecs, transforms, and selection references.
@@ -62,11 +69,16 @@ export function resolveMarkEntry(markSpec) {
             // Numbers are constants (e.g. r=3), not field references — skip resolution
             if (typeof props[key] === 'number')
                 continue;
+            // Explicit colours pass through as the colour prop's object form
+            if (isColorFieldSpec(props[key]))
+                continue;
             props[key] = resolveFieldSpec(props[key]);
         }
     }
     // stroke is data-driven (FieldSpec) on lines, but a CSS constant on areas
-    if (STROKE_AS_FIELD_MARKS.has(markSpec.mark) && props.stroke != null) {
+    if (STROKE_AS_FIELD_MARKS.has(markSpec.mark) &&
+        props.stroke != null &&
+        !isColorFieldSpec(props.stroke)) {
         props.stroke = resolveFieldSpec(props.stroke);
     }
     // Resolve transforms

package/dist/spec/PlotFromSpec.svelte

@@ -74,6 +74,7 @@
 		yPanLimit={spec.yPanLimit}
 		xDisableZoom={spec.xDisableZoom}
 		yDisableZoom={spec.yDisableZoom}
+		entrance={spec.entrance}
 		{legendPosition}
 	>
 		{#snippet background()}

package/dist/spec/export.js

@@ -5,7 +5,7 @@
  * back to spec format using the same types as the spec renderer.
  */
 import { fieldRefToSpec } from './ExpressionParser';
-import { SPEC_MARK_TYPES, FIELD_CHANNELS, STROKE_AS_FIELD_MARKS } from './MarkRegistry';
+import { SPEC_MARK_TYPES, FIELD_CHANNELS, STROKE_AS_FIELD_MARKS, isColorFieldSpec } from './MarkRegistry';
 /** Props handled specially (not passthrough) or internal-only (skip entirely). */
 const SKIP_PROPS = new Set([
     // Internal — not part of the spec
@@ -67,13 +67,22 @@ function entryToMarkSpec(entry) {
         const val = entry[ch];
         if (val == null)
             continue;
+        // Explicit colours: the colour prop's object form is already spec-shaped
+        if (isColorFieldSpec(val)) {
+            spec[ch] = { ...val };
+            continue;
+        }
         const converted = fieldRefToSpec(val);
         if (converted != null)
             spec[ch] = converted;
     }
     // stroke: data-driven on lines, CSS constant on areas
     if (entry.stroke != null) {
-        if (STROKE_AS_FIELD_MARKS.has(entry.markType)) {
+        const stroke = entry.stroke;
+        if (STROKE_AS_FIELD_MARKS.has(entry.markType) && isColorFieldSpec(stroke)) {
+            spec.stroke = { ...stroke };
+        }
+        else if (STROKE_AS_FIELD_MARKS.has(entry.markType)) {
             const converted = fieldRefToSpec(entry.stroke);
             if (converted != null)
                 spec.stroke = converted;

package/dist/spec/types.d.ts

@@ -2,7 +2,7 @@
  * Fjader Spec Schema — TypeScript interfaces defining the JSON contract
  * between spec producers (Python wrapper, JS API) and the spec renderer.
  */
-import type { ColorScheme, CurveType, ScaleType, SortConfig } from '../types';
+import type { ColorDomainValue, ColorScheme, CurveType, EntranceMode, ScaleType, SortConfig } from '../types';
 import type { QueryEngine } from '../query-engine/QueryEngine';
 /** A layout item: either a single plot or a nested layout. */
 export type LayoutItem = PlotSpec | {
@@ -64,6 +64,8 @@ export interface PlotSpec {
     xDisableZoom?: boolean;
     yDisableZoom?: boolean;
     legend?: LegendSpec | boolean;
+    /** How the marks enter when data first draws; see ChartContainer. Default 'auto'. */
+    entrance?: EntranceMode;
 }
 export type InteractorSpec = IntervalXSpec | IntervalYSpec | Interval2DSpec | ToggleSpec | DerivedIntervalSpec;
 export interface IntervalXSpec {
@@ -97,6 +99,17 @@ export interface DerivedIntervalSpec {
 }
 /** A column name, aggregate shorthand ("count()"), or structured object. */
 export type FieldSpec = string | AggregateFieldSpec | BinFieldSpec | WindowFieldSpec | RawSqlFieldSpec;
+/**
+ * A colour channel with explicit ordinal colours, as on the Svelte colour prop:
+ * `{ "field": "won", "domain": [0, 1], "range": ["#d62728", "#2ca02c"] }`.
+ */
+export interface ColorFieldSpec {
+    field: string;
+    domain?: ColorDomainValue[];
+    range?: string[];
+}
+/** What a colour channel (fill, a line's stroke) accepts. */
+export type ColorChannelSpec = FieldSpec | ColorFieldSpec;
 export interface AggregateFieldSpec {
     aggregate: 'count' | 'sum' | 'avg' | 'min' | 'max' | 'median';
     field?: string;
@@ -134,7 +147,11 @@ interface BaseMarkSpec {
     table: string;
     selection?: string;
     /** How the mark responds to selections in its group; see BaseMarkProps. Default 'auto'. */
-    selectionResponse?: 'auto' | 'filter';
+    selectionResponse?: 'auto' | 'filter' | 'ignore';
+    /** What the mark does with NULL in its categorical channels; see BaseMarkProps. Default 'keep'. */
+    nulls?: 'keep' | 'drop';
+    /** Whether the chart's entrance waits for this mark's first data; see BaseMarkProps. Default true. */
+    holdsEntrance?: boolean;
     scheme?: ColorScheme;
     limit?: number;
     transforms?: TransformSpec[];
@@ -143,7 +160,10 @@ interface BaseMarkSpec {
         x?: string[];
         y?: string[];
     } | null;
-    tooltip?: boolean;
+    /** Hover tooltips, or options; see BaseMarkProps.tooltip. */
+    tooltip?: boolean | {
+        sortTable?: boolean;
+    };
     tooltipProximity?: 'x' | 'y' | 'xy';
     tip?: (string | '*' | AggregateFieldSpec | LabeledTipFieldSpec)[] | false;
     fitDomain?: 'x' | 'y' | boolean;
@@ -156,7 +176,7 @@ export interface DotMarkSpec extends BaseMarkSpec, ContinuousScaleTypeSpec {
     mark: 'dot';
     x: FieldSpec;
     y: FieldSpec;
-    fill?: FieldSpec | null;
+    fill?: ColorChannelSpec | null;
     opacity?: number;
     r?: number | FieldSpec;
     radiusRange?: [number, number];
@@ -167,7 +187,7 @@ export interface BarXMarkSpec extends BaseMarkSpec {
     x1?: FieldSpec;
     x2?: FieldSpec;
     y: FieldSpec;
-    fill?: FieldSpec | null;
+    fill?: ColorChannelSpec | null;
     opacity?: number;
     padding?: number;
     paddingInner?: number;
@@ -175,6 +195,11 @@ export interface BarXMarkSpec extends BaseMarkSpec {
     inset?: number;
     dx?: number;
     dy?: number;
+    /**
+     * `false`: follow the band axis the other marks on it decide, adding no
+     * categories to it; see BaseMarkProps. Default `true`.
+     */
+    contributeDomain?: boolean;
 }
 export interface BarYMarkSpec extends BaseMarkSpec {
     mark: 'barY';
@@ -182,7 +207,7 @@ export interface BarYMarkSpec extends BaseMarkSpec {
     y: FieldSpec;
     y1?: FieldSpec;
     y2?: FieldSpec;
-    fill?: FieldSpec | null;
+    fill?: ColorChannelSpec | null;
     opacity?: number;
     padding?: number;
     paddingInner?: number;
@@ -190,12 +215,17 @@ export interface BarYMarkSpec extends BaseMarkSpec {
     inset?: number;
     dx?: number;
     dy?: number;
+    /**
+     * `false`: follow the band axis the other marks on it decide, adding no
+     * categories to it; see BaseMarkProps. Default `true`.
+     */
+    contributeDomain?: boolean;
 }
 export interface LineMarkSpec extends BaseMarkSpec, ContinuousScaleTypeSpec {
     mark: 'line';
     x: FieldSpec;
     y: FieldSpec;
-    stroke?: FieldSpec | null;
+    stroke?: ColorChannelSpec | null;
     z?: FieldSpec | null;
     strokeWidth?: number;
     dotRadius?: number;
@@ -220,7 +250,7 @@ export interface AreaYMarkSpec extends BaseMarkSpec, ContinuousScaleTypeSpec {
     y: FieldSpec;
     y1?: FieldSpec;
     y2?: FieldSpec;
-    fill?: FieldSpec | null;
+    fill?: ColorChannelSpec | null;
     z?: FieldSpec | null;
     fillOpacity?: number;
     stroke?: string | null;
@@ -235,7 +265,7 @@ export interface AreaXMarkSpec extends BaseMarkSpec, ContinuousScaleTypeSpec {
     x: FieldSpec;
     x1?: FieldSpec;
     x2?: FieldSpec;
-    fill?: FieldSpec | null;
+    fill?: ColorChannelSpec | null;
     z?: FieldSpec | null;
     fillOpacity?: number;
     stroke?: string | null;
@@ -252,7 +282,7 @@ export interface RectMarkSpec extends BaseMarkSpec, ContinuousScaleTypeSpec {
     y?: FieldSpec | null;
     y1?: FieldSpec | null;
     y2?: FieldSpec | null;
-    fill?: FieldSpec | null;
+    fill?: ColorChannelSpec | null;
     opacity?: number;
     padding?: number;
     paddingInner?: number;
@@ -269,7 +299,7 @@ export interface RectXMarkSpec extends BaseMarkSpec {
     y?: FieldSpec | null;
     y1?: FieldSpec | null;
     y2?: FieldSpec | null;
-    fill?: FieldSpec | null;
+    fill?: ColorChannelSpec | null;
     opacity?: number;
     inset?: number;
     dx?: number;
@@ -285,7 +315,7 @@ export interface RectYMarkSpec extends BaseMarkSpec {
     y: FieldSpec;
     y1?: FieldSpec;
     y2?: FieldSpec;
-    fill?: FieldSpec | null;
+    fill?: ColorChannelSpec | null;
     opacity?: number;
     inset?: number;
     dx?: number;
@@ -298,7 +328,7 @@ export interface TextMarkSpec extends BaseMarkSpec, ContinuousScaleTypeSpec {
     x: FieldSpec;
     y: FieldSpec;
     text: FieldSpec;
-    fill?: FieldSpec | null;
+    fill?: ColorChannelSpec | null;
     fontSize?: number;
     fontWeight?: string;
     fontFamily?: string | null;

package/dist/sql/bin.d.ts

@@ -1,4 +1,5 @@
 import type { ExprNode, BinHistogramOptions, BinDateOptions } from '@uwdata/mosaic-sql';
+import type { BinPadding } from '../types';
 type BinOptions = BinHistogramOptions & BinDateOptions;
 interface FieldStats {
     column: string;
@@ -9,14 +10,38 @@ interface FieldInfo {
     max?: number;
     type?: string;
 }
+/**
+ * The edge of numeric bin `index` (SQL), `min + alpha * (index + offset)`, in
+ * DOUBLE arithmetic. The one formula both `bin()` and `dense()`'s padding
+ * write, so a bin's edge is the same bits whichever produced it: a padded row
+ * then merges with a real one, and a mark's rows are the same bits whether
+ * they came from the base table or a preagg table.
+ */
+export declare function numericBinEdgeSQL(min: number, alpha: number, offset: number, index: string): string;
 export declare function bin(field: string | ExprNode, options?: BinOptions): AutoBinNode;
 export declare class AutoBinNode {
+    #private;
     field: string | ExprNode;
     options: BinOptions;
     isAutoBinNode: true;
     constructor(field: string | ExprNode, options?: BinOptions);
     get stats(): FieldStats;
     resolve(fieldInfo: Record<string, FieldInfo>, scaleType: string, timeOffset?: number | null, currentDomain?: [number, number] | null, binStepMultiplier?: number): ExprNode;
+    /**
+     * The bins `resolve` produces with the same arguments: every bin a value of
+     * the field can fall in. What `dense()` pads a histogram from, so a bin
+     * emptied by a filter stays as a zero row and the bars can morph.
+     *
+     * Numeric bins as numbers, edge k at `min + alpha * (k + offset)`. Time
+     * buckets as the interval `time_bucket` steps by, and the field's extent;
+     * those need `t0`, the time scale's origin in epoch seconds, because a time
+     * channel is drawn as seconds from it, and are null without it (before the
+     * scale has one, the channel is not rewritten either).
+     *
+     * Null for a field with a single value, which binHistogram floors instead
+     * of binning.
+     */
+    padding(fieldInfo: Record<string, FieldInfo>, scaleType: string, currentDomain?: [number, number] | null, binStepMultiplier?: number, t0?: number | null): BinPadding | null;
     withOffset(offset: number): AutoBinNode;
 }
 export declare function isBinExpression(expr: unknown): expr is AutoBinNode;

package/dist/sql/bin.js

@@ -1,5 +1,43 @@
-import { binDate, binHistogram, column } from '@uwdata/mosaic-sql';
+import { binDate, binHistogram, binSpec, column, interval, sql, timeInterval } from '@uwdata/mosaic-sql';
 import { isTemporalScale } from '../scales/scale-categories';
+/**
+ * Numeric bins over [min, max]: binHistogram's own derivation (binSpec, with
+ * the linear transform it is given), as the first edge and the width.
+ */
+function numericBins(min, max, options) {
+    const b = binSpec(min, max, options);
+    return { min: b.min, alpha: (b.max - b.min) / b.steps || 1 };
+}
+/**
+ * The edge of numeric bin `index` (SQL), `min + alpha * (index + offset)`, in
+ * DOUBLE arithmetic. The one formula both `bin()` and `dense()`'s padding
+ * write, so a bin's edge is the same bits whichever produced it: a padded row
+ * then merges with a real one, and a mark's rows are the same bits whether
+ * they came from the base table or a preagg table.
+ */
+export function numericBinEdgeSQL(min, alpha, offset, index) {
+    return `(${sqlDouble(min)} + ${sqlDouble(alpha)} * (${index} + ${offset}))`;
+}
+/** A JS number as a DOUBLE literal: a bare 0.1 would be read as a DECIMAL. */
+function sqlDouble(n) {
+    return `CAST(${JSON.stringify(n)} AS DOUBLE)`;
+}
+/** Engine-built SQL text as an expression node. Never user input. */
+function sqlFragment(text) {
+    return sql([text]);
+}
+/** A time unit's typical length, for estimating a bucket count. */
+const UNIT_MS = {
+    year: 365 * 86_400_000,
+    quarter: 91 * 86_400_000,
+    month: 30 * 86_400_000,
+    day: 86_400_000,
+    hour: 3_600_000,
+    minute: 60_000,
+    second: 1000,
+    millisecond: 1,
+    microsecond: 0.001
+};
 export function bin(field, options = {}) {
     return new AutoBinNode(field, options);
 }
@@ -19,6 +57,70 @@ export class AutoBinNode {
         };
     }
     resolve(fieldInfo, scaleType, timeOffset = null, currentDomain = null, binStepMultiplier = 1.0) {
+        const { col, min, max, isTemporal, binOptions } = this.#plan(fieldInfo, scaleType, currentDomain, binStepMultiplier);
+        if (isTemporal)
+            return binDate(col, [min, max], binOptions);
+        // A single value: binHistogram floors it rather than binning.
+        if (max === min)
+            return binHistogram(col, [min, max], binOptions);
+        // binHistogram's bins, written with the formula dense() pads with, so a
+        // real row's edge and a padded row's are the same bits (see
+        // numericBinEdgeSQL).
+        const { min: lo, alpha } = numericBins(min, max, binOptions);
+        const index = `floor((CAST(${col} AS DOUBLE) - ${sqlDouble(lo)}) / ${sqlDouble(alpha)})`;
+        return sqlFragment(numericBinEdgeSQL(lo, alpha, binOptions.offset ?? 0, index));
+    }
+    /**
+     * The bins `resolve` produces with the same arguments: every bin a value of
+     * the field can fall in. What `dense()` pads a histogram from, so a bin
+     * emptied by a filter stays as a zero row and the bars can morph.
+     *
+     * Numeric bins as numbers, edge k at `min + alpha * (k + offset)`. Time
+     * buckets as the interval `time_bucket` steps by, and the field's extent;
+     * those need `t0`, the time scale's origin in epoch seconds, because a time
+     * channel is drawn as seconds from it, and are null without it (before the
+     * scale has one, the channel is not rewritten either).
+     *
+     * Null for a field with a single value, which binHistogram floors instead
+     * of binning.
+     */
+    padding(fieldInfo, scaleType, currentDomain = null, binStepMultiplier = 1.0, t0 = null) {
+        const { col, min, max, isTemporal, binOptions } = this.#plan(fieldInfo, scaleType, currentDomain, binStepMultiplier);
+        const offset = binOptions.offset ?? 0;
+        const source = String(col);
+        if (isTemporal) {
+            if (t0 === null)
+                return null;
+            // binDate's own choice of unit and step.
+            const { unit, step = 1 } = binOptions.interval
+                ? { unit: binOptions.interval, step: binOptions.step }
+                : timeInterval(min, max, binOptions.steps || 40);
+            const width = (UNIT_MS[unit] ?? UNIT_MS.day) * step;
+            return {
+                kind: 'time',
+                source,
+                interval: String(interval(unit, step)),
+                minMs: min,
+                maxMs: max,
+                t0,
+                count: Math.ceil((max - min) / width) + 2,
+                offset
+            };
+        }
+        if (max === min)
+            return null;
+        const { min: lo, alpha } = numericBins(min, max, binOptions);
+        return {
+            kind: 'number',
+            source,
+            min: lo,
+            alpha,
+            count: Math.floor((max - lo) / alpha) + 1,
+            offset
+        };
+    }
+    /** The column, extent and options both `resolve` and `padding` bin with. */
+    #plan(fieldInfo, scaleType, currentDomain, binStepMultiplier) {
         const fieldName = typeof this.field === 'string' ? this.field : this.field.toString();
         const info = fieldInfo[fieldName] || {};
         const { min, max, type } = info;
@@ -50,12 +152,13 @@ export class AutoBinNode {
                 binOptions.steps = Math.max(1, Math.round(binOptions.steps * binStepMultiplier));
             }
             if (binOptions.step) {
-                binOptions.step = binOptions.step / binStepMultiplier;
+                // A time interval counts whole units: `INTERVAL 6.78 day` is not SQL.
+                binOptions.step = binOptions.interval
+                    ? Math.max(1, Math.round(binOptions.step / binStepMultiplier))
+                    : binOptions.step / binStepMultiplier;
             }
         }
-        return isTemporal
-            ? binDate(col, [min, max], binOptions)
-            : binHistogram(col, [min, max], binOptions);
+        return { col, min, max, isTemporal, binOptions };
     }
     withOffset(offset) {
         return new AutoBinNode(this.field, {

package/dist/theme.css

@@ -7,6 +7,11 @@
  * Or copy and customize the variables below in your own CSS.
  * All variables are optional — Fjader components have sensible
  * inline fallbacks and work without any CSS imports.
+ *
+ * The tooltip is not set here: it follows the color-scheme it inherits (the
+ * one below, or the app's own) by itself, in contrast or follow mode
+ * (data-fjader-tooltip on any ancestor, or ChartContainer's tooltipScheme).
+ * Set --fjader-tooltip-bg and --fjader-tooltip-text to override both modes.
  */
 
 :where(:root) {
@@ -16,8 +21,6 @@
 	--fjader-bg: #ffffff;
 	--fjader-primary: #3b82f6;
 	--fjader-accent: #93c5fd;
-	--fjader-tooltip-bg: rgba(0, 0, 0, 0.88);
-	--fjader-tooltip-text: #ffffff;
 	--fjader-palette-bg: rgba(0, 0, 0, 0.92);
 	--fjader-palette-text: #ffffff;
 	--fjader-palette-text-secondary: rgba(255, 255, 255, 0.5);
@@ -34,8 +37,6 @@
 		--fjader-bg: #111827;
 		--fjader-primary: #60a5fa;
 		--fjader-accent: #3b82f6;
-		--fjader-tooltip-bg: rgba(255, 255, 255, 0.92);
-		--fjader-tooltip-text: #111827;
 		--fjader-palette-bg: rgba(255, 255, 255, 0.95);
 		--fjader-palette-text: #111827;
 		--fjader-palette-text-secondary: rgba(17, 24, 39, 0.5);