@faintshadow/flarecharts 26.3.1

package/LICENSE

@@ -0,0 +1,40 @@
+FlareCharts License (MIT with Attribution)
+
+Copyright (c) 2026 Safwen TBINI
+
+Permission is hereby granted, free of charge, to any person or organization
+obtaining a copy of this software and associated documentation files
+("FlareCharts", the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following
+conditions:
+
+1. The above copyright notice and this permission notice shall be included in
+   all copies or substantial portions of the Software.
+
+2. Attribution. Any application, product, or distribution that uses the
+   Software, in whole or in part, must include a visible credit to FlareCharts
+   in a place accessible to end users (for example: an "About" page, a credits
+   or settings screen, documentation, or a page footer). The credit must show
+   the project name and a link to the project repository — either as a
+   clickable hyperlink or as plain, copyable text — for example:
+
+       FlareCharts can be found here: https://gitlab.com/FaintShadow/flarecharts
+
+   The repository URL is the one specified in the NOTICE file of the version
+   of the Software in use.
+
+   No commercial license is offered at this time. One may be made available in
+   a future version of the Software. A commercial license, when offered, removes
+   the attribution requirement of this condition 2, and the terms accompanying
+   that version apply instead. Until then, this condition 2 applies to all use,
+   including commercial use.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,103 @@
+<p align="center"><img src="https://gitlab.com/FaintShadow/flarecharts/-/raw/main/static/favicon.svg" width="127" alt="Flarecharts Logo"></p>
+
+## About Flarecharts
+
+Flarecharts is a composable SVG chart library for **Svelte 5** built on runes. We believe data visualization should be expressive, accessible, and easy to customize. Flarecharts takes the pain out of charting by easing common tasks used in many web projects, such as:
+
+- **Runes-first architecture:** Built specifically for Svelte 5.
+- **d3 for math only:** No d3 DOM bindings, just pure SVG components.
+- **CSS-variable themed:** "Styled mode" is the only mode. Theme by setting variables on any wrapper.
+- **Composable Primitives & one-tag Charts:** Eject from a wrapper to custom composition without reshaping your data.
+- **Accessibility built-in:** Visually-hidden data tables, aria-live regions, and full arrow-key point navigation.
+- **First-class stacking & curves:** Modelled on d3's stack generator with diverging, stream, and silhouette offsets.
+
+## Learning Flarecharts
+
+Flarecharts has extensive and thorough [documentation](https://flarecharts.gitbook.io/docs). It covers everything from getting started to deep dives on stacking, curves, and accessibility.
+
+The documentation is also available in [docs/](https://gitlab.com/FaintShadow/flarecharts/-/tree/main/docs) directory of the repository, covering:
+
+- **Core Concepts** — the two layers, data, scales & axes, options & precedence
+- **Theming** — full variable surface and class lists for plain-CSS/Tailwind restyling
+- **Charts** — LineChart, AreaChart, BarChart, StackChart, DonutChart, Sparkline
+- **Primitives** — Chart/Svg, marks, axes & grid, overlays
+- **Guides** — stacking, curves, accessibility, responsive, interaction, etc..
+
+## Installation
+
+Install Flarecharts via your preferred package manager:
+
+```bash
+npm install @faintshadow/flarecharts
+# or
+bun add @faintshadow/flarecharts
+```
+
+## One Tag or Composed — Your Choice
+
+Use a single `<LineChart>` tag for quick implementation:
+
+```svelte
+<LineChart
+  xAxis={{ type: 'time' }}
+  series={[
+    { name: 'Revenue', data: revenue, x: (d) => d.date, y: (d) => d.value },
+    { name: 'Costs', data: costs, x: (d) => d.date, y: (d) => d.value }
+  ]}
+  bands={[{ from: 55, to: 70, label: 'Target' }]}
+  crosshair
+/>
+```
+
+Or compose your own chart pixel-identically using primitives, using the exact same data shapes and defaults. When you outgrow the one-tag form, you don't have to rewrite anything:
+
+```svelte
+<script lang="ts">
+  import { Chart, Svg, Axis, Grid, Line, PlotBand } from 'flarechart';
+
+  const revenue = [
+    { date: new Date(2025, 0, 1), value: 48 },
+    { date: new Date(2025, 1, 1), value: 61 }
+    // ...
+  ];
+</script>
+
+<div style="height: 280px">
+  <Chart x={{ type: 'time' }} label="Revenue by month">
+    <Svg>
+      <Grid y />
+      <PlotBand from={55} to={70} label="Target" />
+      <Line data={revenue} x={(d) => d.date} y={(d) => d.value} />
+      <Axis placement="left" />
+      <Axis placement="bottom" />
+    </Svg>
+  </Chart>
+</div>
+```
+
+The chart fills its container (give it a height) and resizes with it. Paint order is markup order.
+
+## Core Concepts
+
+- **Two Layers:** **Primitives** (`src/lib/components/`) are composable building blocks you assemble in markup. **Charts** (`src/lib/charts/`) are one-tag wrappers built *only* from Primitives.
+- **Flexible Data Shapes:** Every mark accepts the same `data` shapes (`number[]`, `[x, y][]`, `{ x?, y }[]`, or `T[]` with accessors). `null` / `NaN` values render as gaps, never zeros.
+- **Theming:** Every visual attribute resolves from a CSS custom property with a built-in fallback. Dark mode is just you flipping variables — the library does nothing, by design.
+- **Accessibility:** `<Chart>` renders a `role="group"` container with an aria-label, a visually-hidden data table of every visible series, and arrow-key point navigation.
+
+## Development
+
+```bash
+bun install
+bun run dev      # demo app (routes/)
+bun run test     # vitest: normalizer, merge, scales, stacking, …
+bun run check    # svelte-check, strict
+bun run package  # svelte-package + publint
+```
+
+## Contributing
+
+Thank you for considering contributing to Flarecharts! Please review the design rationale in the [Architecture](https://flarecharts.gitbook.io/docs/contributing/architecture) page before opening a pull request.
+
+## License
+
+Flarecharts is open-sourced software licensed under the [MIT + Attribution License](https://gitlab.com/FaintShadow/flarecharts/-/blob/main/LICENSE).

package/dist/charts/AreaChart.svelte

@@ -0,0 +1,150 @@
+<script lang="ts" generics="T">
+	import Chart from '../components/Chart.svelte';
+	import Svg from '../components/Svg.svelte';
+	import Axis from '../components/Axis.svelte';
+	import Grid from '../components/Grid.svelte';
+	import Area from '../components/Area.svelte';
+
+	import Labels from '../components/Labels.svelte';
+	import PlotBand from '../components/PlotBand.svelte';
+	import PlotLine from '../components/PlotLine.svelte';
+	import Tooltip from '../components/Tooltip.svelte';
+	import Crosshair from '../components/Crosshair.svelte';
+	import Legend from '../components/Legend.svelte';
+	import { resolveSeries, splitAxisOptions } from '../core/options.js';
+	import type {
+		BandSpec,
+		LegendSpec,
+		PlotLineSpec,
+		PlotOptions,
+		SeriesOptions,
+		SimpleAxisOptions,
+		TooltipSpec
+	} from '../core/options.js';
+	import { applyResponsive } from '../core/responsive.js';
+	import type { ResponsiveRule } from '../core/responsive.js';
+	import type { Padding } from '../core/types.js';
+
+	interface BaseProps {
+		series: SeriesOptions<T>[];
+		xAxis?: SimpleAxisOptions;
+		yAxis?: SimpleAxisOptions;
+		bands?: BandSpec[];
+		lines?: PlotLineSpec[];
+		grid?: boolean;
+		crosshair?: boolean;
+		tooltip?: boolean | TooltipSpec;
+		legend?: boolean | LegendSpec;
+		plotOptions?: PlotOptions<T>;
+		padding?: Padding;
+		label?: string;
+		/** Accessible chart description. */
+		description?: string;
+	}
+
+	interface Props extends BaseProps {
+		responsive?: ResponsiveRule<BaseProps>[];
+		class?: string;
+	}
+
+	let {
+		series,
+		xAxis,
+		yAxis,
+		bands,
+		lines,
+		grid = true,
+		crosshair = false,
+		tooltip = true,
+		legend,
+		plotOptions,
+		padding,
+		label = 'Area chart',
+		description,
+		responsive,
+		class: klass = ''
+	}: Props = $props();
+
+	let width = $state(0);
+
+	const eff = $derived(
+		applyResponsive(
+			{ series, xAxis, yAxis, bands, lines, grid, crosshair, tooltip, legend, plotOptions, padding, label, description },
+			responsive,
+			width
+		)
+	);
+
+	const resolved = $derived(eff.series.map((s) => resolveSeries(eff.plotOptions, s)));
+	const xa = $derived(splitAxisOptions(eff.xAxis));
+	const ya = $derived(splitAxisOptions(eff.yAxis));
+
+	const legendOn = $derived(
+		eff.legend === undefined ? eff.series.length > 1 : eff.legend !== false
+	);
+	const legendPos = $derived(
+		typeof eff.legend === 'object' && eff.legend ? (eff.legend.position ?? 'bottom') : 'bottom'
+	);
+	const tooltipOn = $derived(eff.tooltip !== false);
+	const tip = $derived(typeof eff.tooltip === 'object' && eff.tooltip ? eff.tooltip : {});
+	const pad = $derived({
+		...(legendOn ? (legendPos === 'top' ? { top: 48 } : { bottom: 56 }) : {}),
+		...eff.padding
+	});
+</script>
+
+<div class="fc-simple fc-area-chart {klass}" bind:clientWidth={width}>
+	<Chart x={xa.scale} y={ya.scale} padding={pad} label={eff.label} description={eff.description}>
+		<Svg>
+			{#if eff.grid}<Grid y />{/if}
+			{#each eff.bands ?? [] as band, i (i)}
+				<PlotBand axis={band.axis} from={band.from} to={band.to} color={band.color} label={band.label} />
+			{/each}
+			{#each eff.lines ?? [] as pl, i (i)}
+				<PlotLine axis={pl.axis} value={pl.value} color={pl.color} dash={pl.dash} label={pl.label} />
+			{/each}
+			{#if eff.crosshair}<Crosshair />{/if}
+			{#each resolved as s, i (i)}
+				<Area
+					data={s.data}
+					x={s.x}
+					y={s.y}
+					color={s.color}
+					name={s.name}
+					description={s.description}
+					curve={s.curve}
+					strokeWidth={s.strokeWidth}
+					fillOpacity={s.fillOpacity}
+					stacking={s.stacking}
+					stack={s.stack}
+					index={i}
+					markers={s.markers}
+					symbol={s.symbol}
+					symbolSize={s.symbolSize}
+				/>
+			{/each}
+			{#each resolved as s, i (i)}
+				{#if s.labels}
+					<Labels data={s.data} x={s.x} y={s.y} />
+				{/if}
+			{/each}
+			{#if xa.visible}
+				<Axis placement="bottom" title={xa.display.title} ticks={xa.display.ticks} format={xa.display.format} rotate={xa.display.rotate} />
+			{/if}
+			{#if ya.visible}
+				<Axis placement="left" title={ya.display.title} ticks={ya.display.ticks} format={ya.display.format} rotate={ya.display.rotate} />
+			{/if}
+		</Svg>
+		{#if tooltipOn}
+			<Tooltip mode={tip.mode ?? 'bisect-x'} shared={tip.shared ?? true} formatX={tip.formatX} formatY={tip.formatY} />
+		{/if}
+		{#if legendOn}<Legend position={legendPos} />{/if}
+	</Chart>
+</div>
+
+<style>
+	.fc-simple {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/charts/AreaChart.svelte.d.ts

@@ -0,0 +1,60 @@
+import type { BandSpec, LegendSpec, PlotLineSpec, PlotOptions, SeriesOptions, SimpleAxisOptions, TooltipSpec } from '../core/options.js';
+import type { ResponsiveRule } from '../core/responsive.js';
+import type { Padding } from '../core/types.js';
+declare function $$render<T>(): {
+    props: {
+        series: SeriesOptions<T>[];
+        xAxis?: SimpleAxisOptions;
+        yAxis?: SimpleAxisOptions;
+        bands?: BandSpec[];
+        lines?: PlotLineSpec[];
+        grid?: boolean;
+        crosshair?: boolean;
+        tooltip?: boolean | TooltipSpec;
+        legend?: boolean | LegendSpec;
+        plotOptions?: PlotOptions<T>;
+        padding?: Padding;
+        label?: string;
+        /** Accessible chart description. */
+        description?: string;
+    } & {
+        responsive?: ResponsiveRule<{
+            series: SeriesOptions<T>[];
+            xAxis?: SimpleAxisOptions;
+            yAxis?: SimpleAxisOptions;
+            bands?: BandSpec[];
+            lines?: PlotLineSpec[];
+            grid?: boolean;
+            crosshair?: boolean;
+            tooltip?: boolean | TooltipSpec;
+            legend?: boolean | LegendSpec;
+            plotOptions?: PlotOptions<T>;
+            padding?: Padding;
+            label?: string;
+            /** Accessible chart description. */
+            description?: string;
+        }>[];
+        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 AreaChart: $$IsomorphicComponent;
+type AreaChart<T> = InstanceType<typeof AreaChart<T>>;
+export default AreaChart;

package/dist/charts/BarChart.svelte

@@ -0,0 +1,142 @@
+<script lang="ts" generics="T">
+	import Chart from '../components/Chart.svelte';
+	import Svg from '../components/Svg.svelte';
+	import Axis from '../components/Axis.svelte';
+	import Grid from '../components/Grid.svelte';
+	import Bars from '../components/Bars.svelte';
+	import Labels from '../components/Labels.svelte';
+	import PlotBand from '../components/PlotBand.svelte';
+	import PlotLine from '../components/PlotLine.svelte';
+	import Tooltip from '../components/Tooltip.svelte';
+	import Legend from '../components/Legend.svelte';
+	import { resolveSeries, splitAxisOptions } from '../core/options.js';
+	import type {
+		BandSpec,
+		LegendSpec,
+		PlotLineSpec,
+		PlotOptions,
+		SeriesOptions,
+		SimpleAxisOptions,
+		TooltipSpec
+	} from '../core/options.js';
+	import { applyResponsive } from '../core/responsive.js';
+	import type { ResponsiveRule } from '../core/responsive.js';
+	import type { Padding } from '../core/types.js';
+
+	interface BaseProps {
+		series: SeriesOptions<T>[];
+		xAxis?: SimpleAxisOptions;
+		yAxis?: SimpleAxisOptions;
+		bands?: BandSpec[];
+		lines?: PlotLineSpec[];
+		grid?: boolean;
+		tooltip?: boolean | TooltipSpec;
+		legend?: boolean | LegendSpec;
+		plotOptions?: PlotOptions<T>;
+		padding?: Padding;
+		label?: string;
+		/** Accessible chart description. */
+		description?: string;
+	}
+
+	interface Props extends BaseProps {
+		responsive?: ResponsiveRule<BaseProps>[];
+		class?: string;
+	}
+
+	let {
+		series,
+		xAxis,
+		yAxis,
+		bands,
+		lines,
+		grid = true,
+		tooltip = true,
+		legend,
+		plotOptions,
+		padding,
+		label = 'Bar chart',
+		description,
+		responsive,
+		class: klass = ''
+	}: Props = $props();
+
+	let width = $state(0);
+
+	const eff = $derived(
+		applyResponsive(
+			{ series, xAxis, yAxis, bands, lines, grid, tooltip, legend, plotOptions, padding, label, description },
+			responsive,
+			width
+		)
+	);
+
+	const resolved = $derived(eff.series.map((s) => resolveSeries(eff.plotOptions, s)));
+	const xa = $derived(splitAxisOptions(eff.xAxis));
+	const ya = $derived(splitAxisOptions(eff.yAxis));
+
+	const legendOn = $derived(
+		eff.legend === undefined ? eff.series.length > 1 : eff.legend !== false
+	);
+	const legendPos = $derived(
+		typeof eff.legend === 'object' && eff.legend ? (eff.legend.position ?? 'bottom') : 'bottom'
+	);
+	const tooltipOn = $derived(eff.tooltip !== false);
+	const tip = $derived(typeof eff.tooltip === 'object' && eff.tooltip ? eff.tooltip : {});
+	const pad = $derived({
+		...(legendOn ? (legendPos === 'top' ? { top: 48 } : { bottom: 56 }) : {}),
+		...eff.padding
+	});
+</script>
+
+<div class="fc-simple fc-bar-chart {klass}" bind:clientWidth={width}>
+	<Chart x={xa.scale} y={ya.scale} padding={pad} label={eff.label} description={eff.description}>
+		<Svg>
+			{#if eff.grid}<Grid y />{/if}
+			{#each eff.bands ?? [] as band, i (i)}
+				<PlotBand axis={band.axis} from={band.from} to={band.to} color={band.color} label={band.label} />
+			{/each}
+			{#each resolved as s, i (i)}
+				<Bars
+					data={s.data}
+					x={s.x}
+					y={s.y}
+					color={s.color}
+					colorFor={s.colorFor}
+					name={s.name}
+					description={s.description}
+					stacking={s.stacking}
+					stack={s.stack}
+					barPadding={s.barPadding}
+					rx={s.rx}
+					index={i}
+				/>
+			{/each}
+			{#each eff.lines ?? [] as pl, i (i)}
+				<PlotLine axis={pl.axis} value={pl.value} color={pl.color} dash={pl.dash} label={pl.label} />
+			{/each}
+			{#each resolved as s, i (i)}
+				{#if s.labels}
+					<Labels data={s.data} x={s.x} y={s.y} />
+				{/if}
+			{/each}
+			{#if xa.visible}
+				<Axis placement="bottom" title={xa.display.title} ticks={xa.display.ticks} format={xa.display.format} rotate={xa.display.rotate} />
+			{/if}
+			{#if ya.visible}
+				<Axis placement="left" title={ya.display.title} ticks={ya.display.ticks} format={ya.display.format} rotate={ya.display.rotate} />
+			{/if}
+		</Svg>
+		{#if tooltipOn}
+			<Tooltip mode={tip.mode ?? 'band'} shared={tip.shared ?? true} formatX={tip.formatX} formatY={tip.formatY} />
+		{/if}
+		{#if legendOn}<Legend position={legendPos} />{/if}
+	</Chart>
+</div>
+
+<style>
+	.fc-simple {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/charts/BarChart.svelte.d.ts

@@ -0,0 +1,58 @@
+import type { BandSpec, LegendSpec, PlotLineSpec, PlotOptions, SeriesOptions, SimpleAxisOptions, TooltipSpec } from '../core/options.js';
+import type { ResponsiveRule } from '../core/responsive.js';
+import type { Padding } from '../core/types.js';
+declare function $$render<T>(): {
+    props: {
+        series: SeriesOptions<T>[];
+        xAxis?: SimpleAxisOptions;
+        yAxis?: SimpleAxisOptions;
+        bands?: BandSpec[];
+        lines?: PlotLineSpec[];
+        grid?: boolean;
+        tooltip?: boolean | TooltipSpec;
+        legend?: boolean | LegendSpec;
+        plotOptions?: PlotOptions<T>;
+        padding?: Padding;
+        label?: string;
+        /** Accessible chart description. */
+        description?: string;
+    } & {
+        responsive?: ResponsiveRule<{
+            series: SeriesOptions<T>[];
+            xAxis?: SimpleAxisOptions;
+            yAxis?: SimpleAxisOptions;
+            bands?: BandSpec[];
+            lines?: PlotLineSpec[];
+            grid?: boolean;
+            tooltip?: boolean | TooltipSpec;
+            legend?: boolean | LegendSpec;
+            plotOptions?: PlotOptions<T>;
+            padding?: Padding;
+            label?: string;
+            /** Accessible chart description. */
+            description?: string;
+        }>[];
+        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 BarChart: $$IsomorphicComponent;
+type BarChart<T> = InstanceType<typeof BarChart<T>>;
+export default BarChart;

package/dist/charts/BoxPlotChart.svelte

@@ -0,0 +1,138 @@
+<script lang="ts" generics="T">
+	import Chart from '../components/Chart.svelte';
+	import Svg from '../components/Svg.svelte';
+	import Axis from '../components/Axis.svelte';
+	import Grid from '../components/Grid.svelte';
+	import Box from '../components/Box.svelte';
+	import PlotBand from '../components/PlotBand.svelte';
+	import PlotLine from '../components/PlotLine.svelte';
+	import Tooltip from '../components/Tooltip.svelte';
+	import Legend from '../components/Legend.svelte';
+	import { resolveSeries, splitAxisOptions } from '../core/options.js';
+	import type {
+		BandSpec,
+		LegendSpec,
+		PlotLineSpec,
+		PlotOptions,
+		SeriesOptions,
+		SimpleAxisOptions,
+		TooltipSpec
+	} from '../core/options.js';
+	import { applyResponsive } from '../core/responsive.js';
+	import type { ResponsiveRule } from '../core/responsive.js';
+	import type { Padding } from '../core/types.js';
+
+	interface BaseProps {
+		series: SeriesOptions<T>[];
+		xAxis?: SimpleAxisOptions;
+		yAxis?: SimpleAxisOptions;
+		bands?: BandSpec[];
+		lines?: PlotLineSpec[];
+		grid?: boolean;
+		tooltip?: boolean | TooltipSpec;
+		legend?: boolean | LegendSpec;
+		plotOptions?: PlotOptions<T>;
+		padding?: Padding;
+		label?: string;
+		description?: string;
+	}
+
+	interface Props extends BaseProps {
+		responsive?: ResponsiveRule<BaseProps>[];
+		class?: string;
+	}
+
+	let {
+		series,
+		xAxis,
+		yAxis,
+		bands,
+		lines,
+		grid = true,
+		tooltip = true,
+		legend,
+		plotOptions,
+		padding,
+		label = 'Box plot',
+		description,
+		responsive,
+		class: klass = ''
+	}: Props = $props();
+
+	let width = $state(0);
+
+	const eff = $derived(
+		applyResponsive(
+			{ series, xAxis, yAxis, bands, lines, grid, tooltip, legend, plotOptions, padding, label, description },
+			responsive,
+			width
+		)
+	);
+
+	const resolved = $derived(eff.series.map((s) => resolveSeries(eff.plotOptions, s)));
+	const xa = $derived(splitAxisOptions(eff.xAxis));
+	const ya = $derived(splitAxisOptions(eff.yAxis));
+
+	const legendOn = $derived(eff.legend === undefined ? eff.series.length > 1 : eff.legend !== false);
+	const legendPos = $derived(
+		typeof eff.legend === 'object' && eff.legend ? (eff.legend.position ?? 'bottom') : 'bottom'
+	);
+	const tooltipOn = $derived(eff.tooltip !== false);
+	const tip = $derived(typeof eff.tooltip === 'object' && eff.tooltip ? eff.tooltip : {});
+	const pad = $derived({
+		...(legendOn ? (legendPos === 'top' ? { top: 48 } : { bottom: 56 }) : {}),
+		...eff.padding
+	});
+</script>
+
+<div class="fc-simple fc-box-chart {klass}" bind:clientWidth={width}>
+	<Chart x={xa.scale} y={ya.scale} padding={pad} label={eff.label} description={eff.description}>
+		<Svg>
+			{#if eff.grid}<Grid y />{/if}
+			{#each eff.bands ?? [] as band, i (i)}
+				<PlotBand axis={band.axis} from={band.from} to={band.to} color={band.color} label={band.label} />
+			{/each}
+			{#each resolved as s, i (i)}
+				<Box
+					data={s.data}
+					x={s.x}
+					low={s.low}
+					q1={s.q1}
+					median={s.median}
+					q3={s.q3}
+					high={s.high}
+					outliers={s.outliers}
+					samples={s.samples}
+					whisker={s.whisker}
+					whiskerK={s.whiskerK}
+					color={s.color}
+					colorFor={s.colorFor}
+					name={s.name}
+					description={s.description}
+					boxPadding={s.boxPadding}
+					index={i}
+				/>
+			{/each}
+			{#each eff.lines ?? [] as pl, i (i)}
+				<PlotLine axis={pl.axis} value={pl.value} color={pl.color} dash={pl.dash} label={pl.label} />
+			{/each}
+			{#if xa.visible}
+				<Axis placement="bottom" title={xa.display.title} ticks={xa.display.ticks} format={xa.display.format} rotate={xa.display.rotate} />
+			{/if}
+			{#if ya.visible}
+				<Axis placement="left" title={ya.display.title} ticks={ya.display.ticks} format={ya.display.format} rotate={ya.display.rotate} />
+			{/if}
+		</Svg>
+		{#if tooltipOn}
+			<Tooltip mode={tip.mode ?? 'band'} shared={tip.shared ?? true} formatX={tip.formatX} formatY={tip.formatY} />
+		{/if}
+		{#if legendOn}<Legend position={legendPos} />{/if}
+	</Chart>
+</div>
+
+<style>
+	.fc-simple {
+		width: 100%;
+		height: 100%;
+	}
+</style>