bo-grid 0.1.0

package/dist/grid/pin.js

@@ -0,0 +1,24 @@
+import { colWidth } from './column';
+/**
+ * Arrange columns for pinning: pinned-left columns move to the front, and each
+ * gets a sticky `left` offset (cumulative width of the pinned columns before it).
+ * When nothing is pinned, column order is untouched and the grid stays in its
+ * default fit-to-width layout.
+ */
+export function arrangePinned(cols) {
+    const pinned = cols.filter((c) => c.pinned);
+    const anyPinned = pinned.length > 0;
+    const columns = anyPinned ? [...pinned, ...cols.filter((c) => !c.pinned)] : [...cols];
+    const info = [];
+    let left = 0;
+    let totalWidth = 0;
+    for (let i = 0; i < columns.length; i++) {
+        const width = colWidth(columns[i]);
+        const isPinned = anyPinned && i < pinned.length;
+        info.push({ pinned: isPinned, left: isPinned ? left : 0, width });
+        if (isPinned)
+            left += width;
+        totalWidth += width;
+    }
+    return { columns, info, totalWidth, anyPinned };
+}

package/dist/grid/pivot.d.ts

@@ -0,0 +1,27 @@
+import type { ColumnDef, GridRow } from './column';
+import { type AggKind } from './aggregate';
+export interface PivotConfig {
+    /** Group rows by these fields (≥1); each becomes a leading text column. */
+    rowFields: string[];
+    /** Distinct values of this field become columns. Omit for a single measure column. */
+    columnField?: string;
+    /** Numeric field to aggregate into each cell. */
+    measure: string;
+    /** Aggregation. Default 'sum'. */
+    agg?: AggKind;
+    /** Decimal places for value columns. Default 0. */
+    decimals?: number;
+    /** Append a Total column (across all column values). Default true. */
+    totals?: boolean;
+}
+export interface PivotResult {
+    rows: GridRow[];
+    columns: ColumnDef[];
+}
+/**
+ * Transform flat rows into a pivot table: group by `rowFields`, optionally spread
+ * `columnField`'s distinct values into columns, and aggregate `measure` into each
+ * cell. Returns rows + columns ready to hand to <Grid>. Pure — call it yourself
+ * (snapshot or reactively) and feed the result in.
+ */
+export declare function pivot(source: readonly GridRow[], config: PivotConfig): PivotResult;

package/dist/grid/reorder.d.ts

@@ -0,0 +1,2 @@
+/** Return a new array with the item at index `from` moved to index `to`. */
+export declare function moveIndex<T>(arr: readonly T[], from: number, to: number): T[];

package/dist/grid/reorder.js

@@ -0,0 +1,10 @@
+/** Return a new array with the item at index `from` moved to index `to`. */
+export function moveIndex(arr, from, to) {
+    const next = [...arr];
+    if (from < 0 || to < 0 || from >= arr.length || to >= arr.length || from === to) {
+        return next;
+    }
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    return next;
+}

package/dist/grid/rowheight.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Row-height model for the virtualizer. Two implementations behind one
+ * interface: a uniform O(1) model (the default fast path) and a variable model
+ * backed by prefix sums + binary search. The grid positions rows via offsetOf()
+ * and finds the first visible row via indexAt(), so it doesn't care which.
+ */
+export interface HeightModel {
+    readonly total: number;
+    readonly count: number;
+    /** Pixel offset (top) of the row at `index`. */
+    offsetOf(index: number): number;
+    heightOf(index: number): number;
+    /** Index of the row whose vertical span contains `offset`. */
+    indexAt(offset: number): number;
+}
+export declare function uniformHeights(count: number, h: number): HeightModel;
+export declare function variableHeights(heights: readonly number[]): HeightModel;

package/dist/grid/rowheight.js

@@ -0,0 +1,41 @@
+export function uniformHeights(count, h) {
+    const safe = h > 0 ? h : 1;
+    return {
+        total: count * safe,
+        count,
+        offsetOf: (i) => i * safe,
+        heightOf: () => safe,
+        indexAt: (offset) => {
+            if (count === 0)
+                return 0;
+            return Math.max(0, Math.min(count - 1, Math.floor(offset / safe)));
+        },
+    };
+}
+export function variableHeights(heights) {
+    const n = heights.length;
+    const prefix = new Float64Array(n + 1);
+    for (let i = 0; i < n; i++)
+        prefix[i + 1] = prefix[i] + Math.max(0, heights[i]);
+    return {
+        total: prefix[n],
+        count: n,
+        offsetOf: (i) => prefix[Math.max(0, Math.min(n, i))],
+        heightOf: (i) => (i >= 0 && i < n ? heights[i] : 0),
+        indexAt: (offset) => {
+            if (n === 0)
+                return 0;
+            // largest i with prefix[i] <= offset
+            let lo = 0;
+            let hi = n - 1;
+            while (lo < hi) {
+                const mid = (lo + hi + 1) >> 1;
+                if (prefix[mid] <= offset)
+                    lo = mid;
+                else
+                    hi = mid - 1;
+            }
+            return lo;
+        },
+    };
+}

package/dist/grid/selection.svelte.d.ts

@@ -0,0 +1,30 @@
+export interface CellRef {
+    r: number;
+    c: number;
+}
+export interface Bounds {
+    r0: number;
+    c0: number;
+    r1: number;
+    c1: number;
+}
+/**
+ * Rectangular cell selection defined by an anchor and a focus corner.
+ * Positional (by view row/column index), so it survives sort/filter the way a
+ * spreadsheet selection does. State is reactive ($state) so the grid re-renders
+ * cell highlighting and the aggregation bar as the selection changes.
+ */
+export declare class Selection {
+    anchor: CellRef | null;
+    focus: CellRef | null;
+    get bounds(): Bounds | null;
+    get count(): number;
+    start(r: number, c: number): void;
+    extendTo(r: number, c: number): void;
+    selectAll(rows: number, cols: number): void;
+    /** Move the focus by (dr, dc), clamped. When extend is false, collapse to it. */
+    move(dr: number, dc: number, extend: boolean, maxR: number, maxC: number): void;
+    contains(r: number, c: number): boolean;
+    isFocus(r: number, c: number): boolean;
+    clear(): void;
+}

package/dist/grid/selection.svelte.js

@@ -0,0 +1,64 @@
+/**
+ * Rectangular cell selection defined by an anchor and a focus corner.
+ * Positional (by view row/column index), so it survives sort/filter the way a
+ * spreadsheet selection does. State is reactive ($state) so the grid re-renders
+ * cell highlighting and the aggregation bar as the selection changes.
+ */
+export class Selection {
+    anchor = $state(null);
+    focus = $state(null);
+    get bounds() {
+        if (!this.anchor || !this.focus)
+            return null;
+        return {
+            r0: Math.min(this.anchor.r, this.focus.r),
+            r1: Math.max(this.anchor.r, this.focus.r),
+            c0: Math.min(this.anchor.c, this.focus.c),
+            c1: Math.max(this.anchor.c, this.focus.c),
+        };
+    }
+    get count() {
+        const b = this.bounds;
+        if (!b)
+            return 0;
+        return (b.r1 - b.r0 + 1) * (b.c1 - b.c0 + 1);
+    }
+    start(r, c) {
+        this.anchor = { r, c };
+        this.focus = { r, c };
+    }
+    extendTo(r, c) {
+        if (this.anchor)
+            this.focus = { r, c };
+        else
+            this.start(r, c);
+    }
+    selectAll(rows, cols) {
+        if (rows <= 0 || cols <= 0)
+            return;
+        this.anchor = { r: 0, c: 0 };
+        this.focus = { r: rows - 1, c: cols - 1 };
+    }
+    /** Move the focus by (dr, dc), clamped. When extend is false, collapse to it. */
+    move(dr, dc, extend, maxR, maxC) {
+        const f = this.focus ?? { r: 0, c: 0 };
+        const next = {
+            r: Math.max(0, Math.min(maxR, f.r + dr)),
+            c: Math.max(0, Math.min(maxC, f.c + dc)),
+        };
+        this.focus = next;
+        if (!extend || !this.anchor)
+            this.anchor = next;
+    }
+    contains(r, c) {
+        const b = this.bounds;
+        return !!b && r >= b.r0 && r <= b.r1 && c >= b.c0 && c <= b.c1;
+    }
+    isFocus(r, c) {
+        return this.focus?.r === r && this.focus?.c === c;
+    }
+    clear() {
+        this.anchor = null;
+        this.focus = null;
+    }
+}

package/dist/grid/sizing.d.ts

@@ -0,0 +1,17 @@
+import type { ColumnDef } from './column';
+/** Smallest width (px) a column may be dragged to. */
+export declare const MIN_COL_WIDTH = 48;
+/** User width overrides, keyed by column `key` so they survive reorder/pin. */
+export type WidthMap = Record<string, number>;
+/** Clamp + round a proposed drag width to the minimum. */
+export declare function clampWidth(w: number): number;
+/** Whether a column may be resized, given the grid-level toggle. */
+export declare function isResizable(col: ColumnDef, gridResizable: boolean): boolean;
+/**
+ * Apply width overrides to a column list. An overridden column becomes
+ * fixed-width (its `flex` cleared) so the dragged size sticks; in fit-to-width
+ * mode the remaining flex columns absorb the difference. Untouched columns pass
+ * through by reference, so the default fit-to-width layout is unchanged when no
+ * column has been resized.
+ */
+export declare function applyWidths(cols: readonly ColumnDef[], widths: WidthMap): ColumnDef[];

package/dist/grid/sizing.js

@@ -0,0 +1,28 @@
+/** Smallest width (px) a column may be dragged to. */
+export const MIN_COL_WIDTH = 48;
+/** Clamp + round a proposed drag width to the minimum. */
+export function clampWidth(w) {
+    return Math.max(MIN_COL_WIDTH, Math.round(w));
+}
+/** Whether a column may be resized, given the grid-level toggle. */
+export function isResizable(col, gridResizable) {
+    return gridResizable && col.resizable !== false;
+}
+/**
+ * Apply width overrides to a column list. An overridden column becomes
+ * fixed-width (its `flex` cleared) so the dragged size sticks; in fit-to-width
+ * mode the remaining flex columns absorb the difference. Untouched columns pass
+ * through by reference, so the default fit-to-width layout is unchanged when no
+ * column has been resized.
+ */
+export function applyWidths(cols, widths) {
+    let changed = false;
+    const out = cols.map((c) => {
+        const w = widths[c.key];
+        if (w == null)
+            return c;
+        changed = true;
+        return { ...c, width: w, flex: undefined };
+    });
+    return changed ? out : cols;
+}

package/dist/grid/source.d.ts

@@ -0,0 +1,43 @@
+import type { GridRow, SortState } from './column';
+export interface RowRange {
+    /** First row index (inclusive). */
+    start: number;
+    /** One past the last row index (exclusive). */
+    end: number;
+}
+export interface RowSourceParams {
+    range: RowRange;
+    /** Primary sort key, or null. Equals `sorts[0] ?? null`; kept for sources
+        that only support single-column sort. */
+    sort: SortState | null;
+    /** Full sort order (primary first) for multi-column sort. May be empty. */
+    sorts?: SortState[];
+    filter: string;
+}
+export interface RowSourceResult {
+    /** Rows for the requested range, in order. */
+    rows: GridRow[];
+    /** Total rows matching the current sort/filter (drives the scrollbar). */
+    total: number;
+}
+/**
+ * A windowed, sort/filter-aware row provider. Implement this to back the grid
+ * with paginated/server data instead of an in-memory array. The grid asks only
+ * for the visible window plus overscan, so the dataset can be far larger than
+ * memory. Results may be returned synchronously or as a Promise.
+ */
+export interface RowSource {
+    getRows(params: RowSourceParams): RowSourceResult | Promise<RowSourceResult>;
+}
+export interface ArraySourceOptions {
+    /** Artificial latency (ms) to simulate a network round-trip. Default 0. */
+    latency?: number;
+    /** Row keys to match when filtering. Omit to disable filtering. */
+    filterKeys?: string[];
+}
+/**
+ * Adapt an in-memory array to the RowSource interface — applies sort/filter and
+ * slices the requested range. Useful as a real client-side adapter and for
+ * exercising the server-side code path in tests/demos (set `latency`).
+ */
+export declare function createArraySource(all: readonly GridRow[], opts?: ArraySourceOptions): RowSource;

package/dist/grid/source.js

@@ -0,0 +1,29 @@
+import { compareBySorts } from './column';
+/**
+ * Adapt an in-memory array to the RowSource interface — applies sort/filter and
+ * slices the requested range. Useful as a real client-side adapter and for
+ * exercising the server-side code path in tests/demos (set `latency`).
+ */
+export function createArraySource(all, opts = {}) {
+    const { latency = 0, filterKeys } = opts;
+    function compute(params) {
+        let rows = all;
+        const f = params.filter.trim().toLowerCase();
+        if (f && filterKeys && filterKeys.length > 0) {
+            rows = rows.filter((r) => filterKeys.some((k) => String(r[k] ?? '').toLowerCase().includes(f)));
+        }
+        const sorts = params.sorts?.length ? params.sorts : params.sort ? [params.sort] : [];
+        if (sorts.length > 0) {
+            rows = [...rows].sort((a, b) => compareBySorts(a, b, sorts));
+        }
+        const total = rows.length;
+        return { rows: rows.slice(params.range.start, params.range.end), total };
+    }
+    return {
+        getRows(params) {
+            if (latency <= 0)
+                return compute(params);
+            return new Promise((resolve) => setTimeout(() => resolve(compute(params)), latency));
+        },
+    };
+}

package/dist/grid/source.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { GridRow, SortState } from './column';
+import type { RowRange, RowSource } from './source';
+/**
+ * Drives a RowSource for the grid: fetches the visible window, caches rows by
+ * index, tracks the total, and guards against stale responses. Cache is keyed by
+ * the active sort+filter; changing either drops it (the index→row mapping moved).
+ */
+export declare class RowSourceController {
+    total: number;
+    loading: boolean;
+    /** Bumped whenever cached rows change, so renderers can react. */
+    version: number;
+    private readonly source;
+    private cache;
+    private reqId;
+    private key;
+    constructor(source: RowSource);
+    rowAt(index: number): GridRow | null;
+    private keyOf;
+    fetch(range: RowRange, sorts: SortState[], filter: string): Promise<void>;
+}

package/dist/grid/source.svelte.js

@@ -0,0 +1,53 @@
+/**
+ * Drives a RowSource for the grid: fetches the visible window, caches rows by
+ * index, tracks the total, and guards against stale responses. Cache is keyed by
+ * the active sort+filter; changing either drops it (the index→row mapping moved).
+ */
+export class RowSourceController {
+    total = $state(0);
+    loading = $state(false);
+    /** Bumped whenever cached rows change, so renderers can react. */
+    version = $state(0);
+    source;
+    cache = new Map();
+    reqId = 0;
+    key = '';
+    constructor(source) {
+        this.source = source;
+    }
+    rowAt(index) {
+        return this.cache.get(index) ?? null;
+    }
+    keyOf(sorts, filter) {
+        return `${sorts.map((s) => `${s.key}:${s.dir}`).join(',')}|${filter}`;
+    }
+    async fetch(range, sorts, filter) {
+        const key = this.keyOf(sorts, filter);
+        if (key !== this.key) {
+            this.key = key;
+            this.cache.clear();
+            this.total = 0;
+            this.version++;
+        }
+        let missing = false;
+        for (let i = range.start; i < range.end; i++) {
+            if (!this.cache.has(i)) {
+                missing = true;
+                break;
+            }
+        }
+        if (!missing)
+            return;
+        const id = ++this.reqId;
+        this.loading = true;
+        const res = await this.source.getRows({ range, sort: sorts[0] ?? null, sorts, filter });
+        if (id !== this.reqId)
+            return; // a newer request superseded this one
+        this.total = res.total;
+        for (let i = 0; i < res.rows.length; i++) {
+            this.cache.set(range.start + i, res.rows[i]);
+        }
+        this.loading = false;
+        this.version++;
+    }
+}

package/dist/grid/theme.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Theme = a partial set of design tokens. Applied as inline `--bo-grid-*` custom
+ * properties on the grid root, so a theme overrides the built-in dark defaults
+ * without any CSS import. Pass a built-in name or your own partial token map.
+ */
+export interface GridTheme {
+    bg?: string;
+    headerBg?: string;
+    rowA?: string;
+    rowB?: string;
+    rowHover?: string;
+    text?: string;
+    textDim?: string;
+    border?: string;
+    up?: string;
+    down?: string;
+    amber?: string;
+    selFill?: string;
+    selBorder?: string;
+    headerH?: string;
+    mono?: string;
+    sans?: string;
+}
+/** Serialize a theme to a CSS `--bo-grid-*: …;` declaration string. */
+export declare function themeVars(theme: GridTheme): string;
+export declare const darkTheme: GridTheme;
+export declare const lightTheme: GridTheme;

package/dist/grid/theme.js

@@ -0,0 +1,60 @@
+const VARS = {
+    bg: '--bo-grid-bg',
+    headerBg: '--bo-grid-header-bg',
+    rowA: '--bo-grid-row-a',
+    rowB: '--bo-grid-row-b',
+    rowHover: '--bo-grid-row-hover',
+    text: '--bo-grid-text',
+    textDim: '--bo-grid-text-dim',
+    border: '--bo-grid-border',
+    up: '--bo-grid-up',
+    down: '--bo-grid-down',
+    amber: '--bo-grid-amber',
+    selFill: '--bo-grid-sel-fill',
+    selBorder: '--bo-grid-sel-border',
+    headerH: '--bo-grid-header-h',
+    mono: '--bo-grid-mono',
+    sans: '--bo-grid-sans',
+};
+/** Serialize a theme to a CSS `--bo-grid-*: …;` declaration string. */
+export function themeVars(theme) {
+    let out = '';
+    for (const key of Object.keys(theme)) {
+        const value = theme[key];
+        if (value != null)
+            out += `${VARS[key]}:${value};`;
+    }
+    return out;
+}
+export const darkTheme = {
+    bg: '#1a1a1a',
+    headerBg: '#0f0f0f',
+    rowA: '#131313',
+    rowB: '#0f0f0f',
+    rowHover: '#1f1f24',
+    text: '#e5e5e5',
+    textDim: '#8a8a8a',
+    border: 'rgba(255,255,255,0.06)',
+    up: '#34d399',
+    down: '#f87171',
+    amber: '#f59e0b',
+    selFill: 'rgba(99,102,241,0.16)',
+    selBorder: '#6366f1',
+};
+// A deliberate light palette (not an inverted dark one): near-white surfaces,
+// stronger green/red for contrast on light, subtle borders.
+export const lightTheme = {
+    bg: '#ffffff',
+    headerBg: '#f6f7f9',
+    rowA: '#fafbfc',
+    rowB: '#ffffff',
+    rowHover: '#eef1f6',
+    text: '#16181d',
+    textDim: '#6b7280',
+    border: 'rgba(0,0,0,0.10)',
+    up: '#16a34a',
+    down: '#dc2626',
+    amber: '#d97706',
+    selFill: 'rgba(99,102,241,0.12)',
+    selBorder: '#6366f1',
+};

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+export { default as Grid } from './grid/Grid.svelte';
+export { default as Sparkline } from './sparkline/Sparkline.svelte';
+export type { ColumnDef, Align, GridRow, SortDir, SortState, CellEditEvent } from './grid/column';
+export type { AggKind, AggResult } from './grid/aggregate';
+export { fmtPrice, fmtPercent, fmtVolume, fmtDate } from './format/format';
+export type { DateStyle } from './format/format';
+export { aggregate } from './grid/aggregate';
+export { heatColor } from './grid/heatmap';
+export { pivot } from './grid/pivot';
+export type { PivotConfig, PivotResult } from './grid/pivot';
+export { themeVars, darkTheme, lightTheme } from './grid/theme';
+export type { GridTheme } from './grid/theme';
+export { drawCandles, setupHiDpiCanvas } from './sparkline/sparkline-render';
+export { toCSV, exportCSV } from './grid/export';
+export { exportXLSX } from './grid/export-xlsx';
+export type { ExportOptions } from './grid/export';
+export { createArraySource } from './grid/source';
+export type { RowSource, RowRange, RowSourceParams, RowSourceResult, ArraySourceOptions, } from './grid/source';
+export type { Candle } from './types';

package/dist/index.js

@@ -0,0 +1,24 @@
+// Public API for the bo-grid package.
+// Consumers: `import { Grid, type ColumnDef } from 'bo-grid';`
+//
+// This surface is intentionally small — every export is a compatibility promise.
+// Internal helpers (layout, sorting, grouping, selection internals) are NOT
+// exported; they can change freely between versions.
+// Components
+export { default as Grid } from './grid/Grid.svelte';
+export { default as Sparkline } from './sparkline/Sparkline.svelte';
+// Value formatters (handy when building custom cell content)
+export { fmtPrice, fmtPercent, fmtVolume, fmtDate } from './format/format';
+// Standalone helpers
+export { aggregate } from './grid/aggregate';
+export { heatColor } from './grid/heatmap';
+export { pivot } from './grid/pivot';
+// Theming
+export { themeVars, darkTheme, lightTheme } from './grid/theme';
+// Sparkline canvas primitives (draw candlesticks on your own canvas)
+export { drawCandles, setupHiDpiCanvas } from './sparkline/sparkline-render';
+// Export (CSV is dependency-free; XLSX dynamic-imports the optional `xlsx` peer)
+export { toCSV, exportCSV } from './grid/export';
+export { exportXLSX } from './grid/export-xlsx';
+// Server-side / windowed data source
+export { createArraySource } from './grid/source';

package/dist/sparkline/Sparkline.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { Candle } from '../types';
+  import { setupHiDpiCanvas, drawCandles, summarize, candleAtX } from './sparkline-render';
+  import { fmtPrice } from '../format/format';
+
+  let {
+    candles,
+    width = 104,
+    height = 26,
+  }: { candles: Candle[]; width?: number; height?: number } = $props();
+
+  let canvas: HTMLCanvasElement;
+  let hover = $state<number | null>(null);
+
+  // Redraw whenever the candle array reference changes. Only mounted (= visible)
+  // sparklines run this, so the realtime feed never repaints off-screen charts.
+  $effect(() => {
+    const ctx = setupHiDpiCanvas(canvas, width, height);
+    drawCandles(ctx, candles, width, height);
+  });
+
+  const label = $derived(summarize(candles));
+
+  function onMove(e: MouseEvent) {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    hover = candleAtX(e.clientX - rect.left, width, candles.length);
+  }
+</script>
+
+<div class="spark" style="width:{width}px;height:{height}px" role="img" aria-label={label}>
+  <canvas bind:this={canvas}></canvas>
+  <div
+    class="hit"
+    role="presentation"
+    onmousemove={onMove}
+    onmouseleave={() => (hover = null)}
+  ></div>
+  {#if hover !== null && candles[hover]}
+    <div class="tip">
+      O {fmtPrice(candles[hover].open)} · H {fmtPrice(candles[hover].high)} · L
+      {fmtPrice(candles[hover].low)} · C {fmtPrice(candles[hover].close)}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .spark {
+    position: relative;
+    display: inline-block;
+  }
+  canvas {
+    display: block;
+  }
+  .hit {
+    position: absolute;
+    inset: 0;
+    cursor: crosshair;
+  }
+  .tip {
+    position: absolute;
+    bottom: calc(100% + 4px);
+    right: 0;
+    z-index: 10;
+    white-space: nowrap;
+    padding: 4px 6px;
+    font-family: var(--bo-mono, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace);
+    font-size: 10px;
+    color: var(--bo-text, #e5e5e5);
+    background: #000;
+    border: 0.5px solid var(--bo-border, rgba(255, 255, 255, 0.12));
+    border-radius: 4px;
+    pointer-events: none;
+  }
+</style>

package/dist/sparkline/Sparkline.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Candle } from '../types';
+type $$ComponentProps = {
+    candles: Candle[];
+    width?: number;
+    height?: number;
+};
+declare const Sparkline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Sparkline = ReturnType<typeof Sparkline>;
+export default Sparkline;

package/dist/sparkline/sparkline-render.d.ts

@@ -0,0 +1,16 @@
+import type { Candle } from '../types';
+/**
+ * Size a canvas for the current devicePixelRatio so 1px CSS strokes render
+ * crisp on HiDPI/Retina. Returns a context already scaled to CSS pixels —
+ * callers draw in CSS-pixel coordinates and forget dpr exists.
+ */
+export declare function setupHiDpiCanvas(canvas: HTMLCanvasElement, cssW: number, cssH: number): CanvasRenderingContext2D;
+/**
+ * Draw compact candlesticks. Body shows open→close, wick shows low→high.
+ * Color by per-candle direction. Canvas (not SVG) so 100+ of these stay cheap.
+ */
+export declare function drawCandles(ctx: CanvasRenderingContext2D, candles: Candle[], w: number, h: number): void;
+/** Screen-reader text — canvas alone is invisible to AT, so we narrate trend. */
+export declare function summarize(candles: Candle[]): string;
+/** Which candle index sits under an x offset (for hover tooltips). */
+export declare function candleAtX(x: number, w: number, n: number): number;