@faintshadow/flarecharts 26.3.1

package/dist/components/Crosshair.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** Vertical line at the (snapped) x position. */
+    x?: boolean;
+    /** Horizontal line at the pointer y position. */
+    y?: boolean;
+    /** Snap the x line to the nearest data point across visible series. */
+    snap?: boolean;
+    dash?: string;
+    width?: number;
+    class?: string;
+}
+declare const Crosshair: import("svelte").Component<Props, {}, "">;
+type Crosshair = ReturnType<typeof Crosshair>;
+export default Crosshair;

package/dist/components/Grid.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { getChartContext } from '../core/context.svelte.js';
+
+	interface Props {
+		/** Draw vertical lines at x ticks. */
+		x?: boolean;
+		/** Draw horizontal lines at y ticks. */
+		y?: boolean;
+		/** Tick count hint. */
+		ticks?: number;
+		/** stroke-dasharray, e.g. "3 3". */
+		dash?: string;
+		class?: string;
+	}
+
+	let { x = false, y = true, ticks, dash, class: klass = '' }: Props = $props();
+
+	const ctx = getChartContext();
+
+	const xLines = $derived(x ? ctx.xTicks(ticks).map(ctx.xPos).filter(Number.isFinite) : []);
+	const yLines = $derived(y ? ctx.yTicks(ticks).map(ctx.yPos).filter(Number.isFinite) : []);
+</script>
+
+<g class="fc-grid {klass}">
+	{#each xLines as px (px)}
+		<line class="fc-grid-line fc-grid-x" x1={px} x2={px} y1="0" y2={ctx.innerHeight} stroke-dasharray={dash} />
+	{/each}
+	{#each yLines as py (py)}
+		<line class="fc-grid-line fc-grid-y" x1="0" x2={ctx.innerWidth} y1={py} y2={py} stroke-dasharray={dash} />
+	{/each}
+</g>
+
+<style>
+	.fc-grid-line {
+		stroke: var(--fc-grid, #e2e8f0);
+		fill: none;
+	}
+</style>

package/dist/components/Grid.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** Draw vertical lines at x ticks. */
+    x?: boolean;
+    /** Draw horizontal lines at y ticks. */
+    y?: boolean;
+    /** Tick count hint. */
+    ticks?: number;
+    /** stroke-dasharray, e.g. "3 3". */
+    dash?: string;
+    class?: string;
+}
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/components/Labels.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" generics="T">
+	import { getChartContext } from '../core/context.svelte.js';
+	import { normalizePoints } from '../core/normalize.js';
+	import type { XValue } from '../core/normalize.js';
+	import { placeLabels } from '../core/labels.js';
+
+	interface Props {
+		data: readonly T[];
+		x?: (datum: T, index: number) => XValue;
+		y?: (datum: T, index: number) => number | null | undefined;
+		/** Label text per point; defaults to the (rounded) y value. */
+		format?: (y: number, datum: T, index: number) => string;
+		/** Distance from the anchor point, px. */
+		offset?: number;
+		fontSize?: number;
+		class?: string;
+	}
+
+	let { data, x, y, format, offset = 8, fontSize = 10, class: klass = '' }: Props = $props();
+
+	const ctx = getChartContext();
+
+	const fmt = $derived(format ?? ((value: number) => String(Math.round(value * 100) / 100)));
+
+	const placed = $derived.by(() => {
+		const points = normalizePoints(data, { x, y });
+		const candidates = [];
+		for (const p of points) {
+			if (p.y == null) continue;
+			const px = ctx.xPos(p.x);
+			const py = ctx.yPos(p.y);
+			if (!Number.isFinite(px) || !Number.isFinite(py)) continue;
+			candidates.push({ px, py, text: fmt(p.y, p.datum, p.index) });
+		}
+		return placeLabels(candidates, {
+			bounds: { width: ctx.innerWidth, height: ctx.innerHeight },
+			offset,
+			fontSize
+		});
+	});
+</script>
+
+<g class="fc-labels {klass}">
+	{#each placed as label (label.px + '-' + label.py)}
+		<text
+			class="fc-label"
+			x={label.x}
+			y={label.y}
+			text-anchor="middle"
+			font-size={fontSize}
+		>
+			{label.text}
+		</text>
+	{/each}
+</g>
+
+<style>
+	.fc-label {
+		fill: var(--fc-label, var(--fc-axis-label, #64748b));
+	}
+</style>

package/dist/components/Labels.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { XValue } from '../core/normalize.js';
+declare function $$render<T>(): {
+    props: {
+        data: readonly T[];
+        x?: (datum: T, index: number) => XValue;
+        y?: (datum: T, index: number) => number | null | undefined;
+        /** Label text per point; defaults to the (rounded) y value. */
+        format?: (y: number, datum: T, index: number) => string;
+        /** Distance from the anchor point, px. */
+        offset?: number;
+        fontSize?: number;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Labels: $$IsomorphicComponent;
+type Labels<T> = InstanceType<typeof Labels<T>>;
+export default Labels;

package/dist/components/Legend.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getChartContext } from '../core/context.svelte.js';
+	import type { SeriesEntry } from '../core/context.svelte.js';
+
+	interface Props {
+		/** Overlay position inside the chart container. Reserve space via Chart padding. */
+		position?: 'top' | 'bottom';
+		/** Replace the default item content (swatch + label). Toggle wiring stays. */
+		item?: Snippet<[SeriesEntry]>;
+		class?: string;
+	}
+
+	let { position = 'bottom', item, class: klass = '' }: Props = $props();
+
+	const ctx = getChartContext();
+</script>
+
+{#if ctx.seriesEntries.length > 0}
+	<div class="fc-legend fc-legend-{position} {klass}">
+		{#each ctx.seriesEntries as entry (entry.index)}
+			<button
+				type="button"
+				class="fc-legend-item"
+				class:fc-legend-hidden={!entry.visible}
+				aria-pressed={entry.visible}
+				onclick={() => ctx.toggleSeries(entry.index)}
+			>
+				{#if item}
+					{@render item(entry)}
+				{:else}
+					<span class="fc-legend-swatch" style="background: {entry.color}"></span>
+					<span class="fc-legend-label">{entry.name ?? `Series ${entry.index + 1}`}</span>
+				{/if}
+			</button>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.fc-legend {
+		position: absolute;
+		left: 0;
+		right: 0;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 0.125rem 0.875rem;
+		font-family: var(--fc-font, ui-sans-serif, system-ui, sans-serif);
+	}
+	.fc-legend-bottom {
+		bottom: 0;
+	}
+	.fc-legend-top {
+		top: 0;
+	}
+	.fc-legend-item {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 2px 4px;
+		border: none;
+		background: none;
+		cursor: pointer;
+		font: inherit;
+		font-size: 12px;
+		color: var(--fc-legend-text, var(--fc-axis-label, #64748b));
+	}
+	.fc-legend-hidden {
+		opacity: 0.45;
+	}
+	.fc-legend-hidden .fc-legend-label {
+		text-decoration: line-through;
+	}
+	.fc-legend-swatch {
+		width: 10px;
+		height: 10px;
+		border-radius: 3px;
+		flex: none;
+	}
+</style>

package/dist/components/Legend.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { SeriesEntry } from '../core/context.svelte.js';
+interface Props {
+    /** Overlay position inside the chart container. Reserve space via Chart padding. */
+    position?: 'top' | 'bottom';
+    /** Replace the default item content (swatch + label). Toggle wiring stays. */
+    item?: Snippet<[SeriesEntry]>;
+    class?: string;
+}
+declare const Legend: import("svelte").Component<Props, {}, "">;
+type Legend = ReturnType<typeof Legend>;
+export default Legend;

package/dist/components/Line.svelte

@@ -0,0 +1,192 @@
+<script lang="ts" generics="T">
+	import { onDestroy, onMount } from 'svelte';
+	import { line as d3line } from 'd3-shape';
+	import { getChartContext } from '../core/context.svelte.js';
+	import { normalizePoints } from '../core/normalize.js';
+	import type { NormalizedPoint, XValue } from '../core/normalize.js';
+	import { curveFor } from '../core/curves.js';
+	import type { CurveName } from '../core/curves.js';
+	import { motionPath } from '../core/motion.svelte.js';
+	import { hitBisectX } from '../core/hit.js';
+	import { symbolFor, symbolByIndex, symbolPath } from '../core/symbols.js';
+	import type { SymbolName } from '../core/symbols.js';
+	import type { SymbolType } from 'd3-shape';
+	import type { MarkerMode } from '../core/options.js';
+
+	interface Props {
+		data: readonly T[];
+		x?: (datum: T, index: number) => XValue;
+		y?: (datum: T, index: number) => number | null | undefined;
+		color?: string;
+		name?: string;
+		description?: string;
+		describePoint?: (point: NormalizedPoint<T>) => string | undefined;
+		curve?: CurveName;
+		strokeWidth?: number;
+		index?: number;
+		/** Marker visibility: 'always' | 'hover' | 'none'. */
+		markers?: MarkerMode;
+		/** Symbol shape for markers. */
+		symbol?: SymbolName | SymbolType;
+		/** Symbol area in px² (default 64). */
+		symbolSize?: number;
+		class?: string;
+	}
+
+	let {
+		data,
+		x,
+		y,
+		color,
+		name,
+		description,
+		describePoint,
+		curve = 'linear',
+		strokeWidth = 2,
+		index: indexProp,
+		markers = 'none',
+		symbol: symbolProp,
+		symbolSize = 64,
+		class: klass = ''
+	}: Props = $props();
+
+	const ctx = getChartContext();
+
+	const points = $derived(normalizePoints(data, { x, y }));
+	const registration = ctx.registerSeries(() => ({
+		points,
+		name,
+		color: resolvedColor,
+		description,
+		describePoint: describePoint as ((p: NormalizedPoint<unknown>) => string | undefined) | undefined
+	}));
+	onDestroy(registration.unregister);
+
+	const seriesIndex = $derived(indexProp ?? registration.index);
+	const resolvedColor = $derived(ctx.seriesColor(seriesIndex, color));
+	const visible = $derived(ctx.isSeriesVisible(registration.index));
+
+	const path = $derived.by(() => {
+		if (!visible) return '';
+		const generator = d3line<NormalizedPoint<T>>()
+			.defined((p) => p.y != null && Number.isFinite(ctx.xPos(p.x)))
+			.x((p) => ctx.xPos(p.x))
+			.y((p) => ctx.yPos(p.y as number))
+			.curve(curveFor(curve));
+		return generator(points) ?? '';
+	});
+
+	// --- markers ---
+	const resolvedSymbol = $derived(
+		symbolProp ? symbolFor(symbolProp) : symbolByIndex(seriesIndex)
+	);
+	const markerPathD = $derived(markers !== 'none' ? symbolPath(resolvedSymbol, symbolSize) : '');
+
+	interface Dot {
+		cx: number;
+		cy: number;
+		index: number;
+	}
+	const dots = $derived.by((): Dot[] => {
+		if (markers === 'none') return [];
+		const out: Dot[] = [];
+		for (const p of points) {
+			const cx = ctx.xPos(p.x);
+			if (p.y == null || !Number.isFinite(cx)) continue;
+			out.push({ cx, cy: ctx.yPos(p.y), index: p.index });
+		}
+		return out;
+	});
+
+	const hoveredIndex = $derived.by(() => {
+		if (markers !== 'hover') return -1;
+		const ptr = ctx.hoverPointer;
+		if (!ptr) return -1;
+		const hit = hitBisectX(points, ctx.xPos, ctx.yPos, ptr.x);
+		return hit ? hit.point.index : -1;
+	});
+
+	let rootEl: SVGGElement | undefined = $state();
+	let mounted = $state(false);
+	onMount(() => {
+		mounted = true;
+	});
+	const morph = motionPath(() => path, () => rootEl);
+</script>
+
+{#if visible}
+	<g class="fc-series {klass}" data-name={name} bind:this={rootEl}>
+		<path
+			class="fc-line"
+			class:fc-draw={mounted}
+			d={morph.d}
+			pathLength="1"
+			fill="none"
+			stroke={resolvedColor}
+			stroke-width={strokeWidth}
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		{#if markers !== 'none'}
+			{#each dots as d (d.index)}
+				<g transform="translate({d.cx},{d.cy})">
+					<path
+						class="fc-marker"
+						class:fc-marker-active={markers === 'always' || d.index === hoveredIndex}
+						d={markerPathD}
+						fill={resolvedColor}
+					/>
+				</g>
+			{/each}
+		{/if}
+	</g>
+{/if}
+
+<style>
+	.fc-line {
+		transition: opacity var(--fc-duration-hover, 120ms) var(--fc-ease, ease);
+	}
+	.fc-draw {
+		stroke-dasharray: 1 1;
+		animation: fc-draw-on var(--fc-duration, 500ms) var(--fc-ease, ease) both;
+	}
+	@keyframes fc-draw-on {
+		from {
+			stroke-dashoffset: 1;
+		}
+		to {
+			stroke-dashoffset: 0;
+		}
+	}
+	:global(.fc-svg:has(.fc-series:hover)) .fc-series:not(:hover) .fc-line {
+		opacity: 0.35;
+	}
+
+	/* markers */
+	.fc-marker {
+		opacity: 0;
+		transform: scale(0.4);
+		transform-box: fill-box;
+		transform-origin: center;
+		transition:
+			opacity var(--fc-marker-out, 300ms) var(--fc-ease, ease),
+			transform var(--fc-marker-out, 300ms) var(--fc-ease, ease);
+	}
+	.fc-marker-active {
+		opacity: 1;
+		transform: scale(1);
+		transition:
+			opacity var(--fc-marker-in, 250ms) var(--fc-ease, ease),
+			transform var(--fc-marker-in, 250ms) var(--fc-ease, ease);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.fc-draw {
+			animation: none;
+		}
+		.fc-line,
+		.fc-marker {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/Line.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { NormalizedPoint, XValue } from '../core/normalize.js';
+import type { CurveName } from '../core/curves.js';
+import type { SymbolName } from '../core/symbols.js';
+import type { SymbolType } from 'd3-shape';
+import type { MarkerMode } from '../core/options.js';
+declare function $$render<T>(): {
+    props: {
+        data: readonly T[];
+        x?: (datum: T, index: number) => XValue;
+        y?: (datum: T, index: number) => number | null | undefined;
+        color?: string;
+        name?: string;
+        description?: string;
+        describePoint?: (point: NormalizedPoint<T>) => string | undefined;
+        curve?: CurveName;
+        strokeWidth?: number;
+        index?: number;
+        /** Marker visibility: 'always' | 'hover' | 'none'. */
+        markers?: MarkerMode;
+        /** Symbol shape for markers. */
+        symbol?: SymbolName | SymbolType;
+        /** Symbol area in px² (default 64). */
+        symbolSize?: number;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Line: $$IsomorphicComponent;
+type Line<T> = InstanceType<typeof Line<T>>;
+export default Line;

package/dist/components/PlotBand.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { getChartContext } from '../core/context.svelte.js';
+	import type { XValue } from '../core/normalize.js';
+
+	interface Props {
+		/** Which axis the band spans: 'y' (horizontal band, default) or 'x' (vertical band). */
+		axis?: 'x' | 'y';
+		from: XValue;
+		to: XValue;
+		/** Any CSS color string — passed through untouched. */
+		color?: string;
+		label?: string;
+		class?: string;
+	}
+
+	let { axis = 'y', from, to, color, label, class: klass = '' }: Props = $props();
+
+	const ctx = getChartContext();
+
+	const rect = $derived.by(() => {
+		if (axis === 'y') {
+			const a = ctx.yPos(from);
+			const b = ctx.yPos(to);
+			if (!Number.isFinite(a) || !Number.isFinite(b)) return null;
+			const y = Math.max(0, Math.min(a, b));
+			const y2 = Math.min(ctx.innerHeight, Math.max(a, b));
+			if (y2 <= y) return null;
+			return { x: 0, y, width: ctx.innerWidth, height: y2 - y };
+		}
+		const a = ctx.xPos(from);
+		const b = ctx.xPos(to);
+		if (!Number.isFinite(a) || !Number.isFinite(b)) return null;
+		const x = Math.max(0, Math.min(a, b));
+		const x2 = Math.min(ctx.innerWidth, Math.max(a, b));
+		if (x2 <= x) return null;
+		return { x, y: 0, width: x2 - x, height: ctx.innerHeight };
+	});
+</script>
+
+{#if rect}
+	<g class="fc-plot-band {klass}">
+		<rect
+			x={rect.x}
+			y={rect.y}
+			width={rect.width}
+			height={rect.height}
+			fill={color ?? 'var(--fc-band, rgba(148, 163, 184, 0.18))'}
+		/>
+		{#if label}
+			{#if axis === 'y'}
+				<text class="fc-plot-band-label" x={rect.x + rect.width - 6} y={rect.y + 14} text-anchor="end">
+					{label}
+				</text>
+			{:else}
+				<text class="fc-plot-band-label" x={rect.x + 4} y={12} text-anchor="start">
+					{label}
+				</text>
+			{/if}
+		{/if}
+	</g>
+{/if}
+
+<style>
+	.fc-plot-band-label {
+		fill: var(--fc-axis-label, #64748b);
+		font-size: 11px;
+	}
+</style>

package/dist/components/PlotBand.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { XValue } from '../core/normalize.js';
+interface Props {
+    /** Which axis the band spans: 'y' (horizontal band, default) or 'x' (vertical band). */
+    axis?: 'x' | 'y';
+    from: XValue;
+    to: XValue;
+    /** Any CSS color string — passed through untouched. */
+    color?: string;
+    label?: string;
+    class?: string;
+}
+declare const PlotBand: import("svelte").Component<Props, {}, "">;
+type PlotBand = ReturnType<typeof PlotBand>;
+export default PlotBand;

package/dist/components/PlotLine.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { getChartContext } from '../core/context.svelte.js';
+	import type { XValue } from '../core/normalize.js';
+
+	interface Props {
+		/** Which axis the value lives on: 'y' (horizontal line, default) or 'x' (vertical line). */
+		axis?: 'x' | 'y';
+		value: XValue;
+		/** Any CSS color string — passed through untouched. */
+		color?: string;
+		/** stroke-dasharray, e.g. "4 3". Solid when omitted. */
+		dash?: string;
+		width?: number;
+		label?: string;
+		class?: string;
+	}
+
+	let { axis = 'y', value, color, dash, width = 1, label, class: klass = '' }: Props = $props();
+
+	const ctx = getChartContext();
+
+	const p = $derived(axis === 'y' ? ctx.yPos(value) : ctx.xPos(value));
+	const visible = $derived(
+		Number.isFinite(p) && p >= 0 && p <= (axis === 'y' ? ctx.innerHeight : ctx.innerWidth)
+	);
+	const stroke = $derived(color ?? 'var(--fc-plot-line, var(--fc-axis, #94a3b8))');
+</script>
+
+{#if visible}
+	<g class="fc-plot-line {klass}">
+		{#if axis === 'y'}
+			<line x1="0" x2={ctx.innerWidth} y1={p} y2={p} {stroke} stroke-width={width} stroke-dasharray={dash} />
+			{#if label}
+				<text class="fc-plot-line-label" x={ctx.innerWidth - 6} y={p - 5} text-anchor="end">
+					{label}
+				</text>
+			{/if}
+		{:else}
+			<line x1={p} x2={p} y1="0" y2={ctx.innerHeight} {stroke} stroke-width={width} stroke-dasharray={dash} />
+			{#if label}
+				<text class="fc-plot-line-label" x={p + 5} y={12} text-anchor="start">
+					{label}
+				</text>
+			{/if}
+		{/if}
+	</g>
+{/if}
+
+<style>
+	.fc-plot-line-label {
+		fill: var(--fc-axis-label, #64748b);
+		font-size: 11px;
+	}
+</style>

package/dist/components/PlotLine.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { XValue } from '../core/normalize.js';
+interface Props {
+    /** Which axis the value lives on: 'y' (horizontal line, default) or 'x' (vertical line). */
+    axis?: 'x' | 'y';
+    value: XValue;
+    /** Any CSS color string — passed through untouched. */
+    color?: string;
+    /** stroke-dasharray, e.g. "4 3". Solid when omitted. */
+    dash?: string;
+    width?: number;
+    label?: string;
+    class?: string;
+}
+declare const PlotLine: import("svelte").Component<Props, {}, "">;
+type PlotLine = ReturnType<typeof PlotLine>;
+export default PlotLine;