@sentropic/dataviz-svelte 0.1.0 → 0.2.1

package/dist/adapter.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Svelte 5 adapter for the framework-agnostic dataviz-core store. It bridges the
+ * core's `getState`/`subscribe` contract onto Svelte's `Readable` store contract
+ * so the dashboard state can be consumed with `$store` syntax. All presentation
+ * comes from `@sentropic/design-system-svelte`; this module only wires state.
+ */
+import { type DashboardState, type DashboardStore, type DashboardStoreConfig } from '@sentropic/dataviz-core';
+export * from '@sentropic/dataviz-core';
+export type { BarChartTone } from '@sentropic/design-system-svelte';
+export type { TenantTheme } from '@sentropic/design-system-themes';
+/** Minimal Svelte `Readable` contract (avoids a hard dep on `svelte/store`). */
+export interface SvelteReadable<T> {
+    subscribe(run: (value: T) => void): () => void;
+}
+/**
+ * Wrap a core {@link DashboardStore} as a Svelte `Readable<DashboardState>`.
+ *
+ * Following the Svelte store contract, `subscribe(run)` calls `run` immediately
+ * with the current state, then again after every core notification, and returns
+ * an unsubscribe function.
+ */
+export declare function toSvelteStore(store: DashboardStore): SvelteReadable<DashboardState>;
+/** Result of {@link createDashboard}: the core store plus its Svelte view. */
+export interface SvelteDashboard {
+    /** The underlying core store (use its mutators: setFilter, toggleSelection…). */
+    store: DashboardStore;
+    /** Svelte-readable snapshot, usable with `$state` in a component. */
+    state: SvelteReadable<DashboardState>;
+}
+/**
+ * Create a dashboard store and its Svelte-readable view in one call.
+ */
+export declare function createDashboard(config: DashboardStoreConfig): SvelteDashboard;
+/**
+ * Canonical adapter hook (parity with React/Vue `useDashboard`).
+ * Returns the Svelte-readable state for a given core store.
+ */
+export declare function useDashboard(store: DashboardStore): SvelteReadable<DashboardState>;
+//# sourceMappingURL=adapter.d.ts.map

package/dist/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../src/adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,oBAAoB,EAC1B,MAAM,yBAAyB,CAAC;AAGjC,cAAc,yBAAyB,CAAC;AAIxC,YAAY,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAEpE,YAAY,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAEnE,gFAAgF;AAChF,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAChD;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,CAQnF;AAED,8EAA8E;AAC9E,MAAM,WAAW,eAAe;IAC9B,iFAAiF;IACjF,KAAK,EAAE,cAAc,CAAC;IACtB,qEAAqE;IACrE,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,oBAAoB,GAAG,eAAe,CAG7E;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,CAElF"}

package/dist/adapter.js

@@ -0,0 +1,39 @@
+/**
+ * Svelte 5 adapter for the framework-agnostic dataviz-core store. It bridges the
+ * core's `getState`/`subscribe` contract onto Svelte's `Readable` store contract
+ * so the dashboard state can be consumed with `$store` syntax. All presentation
+ * comes from `@sentropic/design-system-svelte`; this module only wires state.
+ */
+import { createDashboardStore, } from '@sentropic/dataviz-core';
+// Re-export the full core surface so consumers need a single import.
+export * from '@sentropic/dataviz-core';
+/**
+ * Wrap a core {@link DashboardStore} as a Svelte `Readable<DashboardState>`.
+ *
+ * Following the Svelte store contract, `subscribe(run)` calls `run` immediately
+ * with the current state, then again after every core notification, and returns
+ * an unsubscribe function.
+ */
+export function toSvelteStore(store) {
+    return {
+        subscribe(run) {
+            run(store.getState());
+            const off = store.subscribe(() => run(store.getState()));
+            return off;
+        },
+    };
+}
+/**
+ * Create a dashboard store and its Svelte-readable view in one call.
+ */
+export function createDashboard(config) {
+    const store = createDashboardStore(config);
+    return { store, state: toSvelteStore(store) };
+}
+/**
+ * Canonical adapter hook (parity with React/Vue `useDashboard`).
+ * Returns the Svelte-readable state for a given core store.
+ */
+export function useDashboard(store) {
+    return toSvelteStore(store);
+}

package/dist/index.d.ts

@@ -1,41 +1,37 @@
 /**
  * @sentropic/dataviz-svelte
  *
- * Svelte 5 adapter for the framework-agnostic dataviz-core store. It bridges the
- * core's `getState`/`subscribe` contract onto Svelte's `Readable` store contract
- * so the dashboard state can be consumed with `$store` syntax. All presentation
- * comes from `@sentropic/design-system-svelte`; this package only wires state.
+ * Svelte 5 adapter + dashboard components for @sentropic/dataviz-core, built on
+ * @sentropic/design-system-svelte. The adapter wires the core's observable store
+ * onto Svelte reactivity; the components compose design-system presentational
+ * pieces and bind them to the shared dashboard state. No presentation is
+ * authored here — it all comes from the design system.
  */
-import { type DashboardState, type DashboardStore, type DashboardStoreConfig } from '@sentropic/dataviz-core';
-export * from '@sentropic/dataviz-core';
-export type { BarChartTone } from '@sentropic/design-system-svelte';
-export type { TenantTheme } from '@sentropic/design-system-themes';
-/** Minimal Svelte `Readable` contract (avoids a hard dep on `svelte/store`). */
-export interface SvelteReadable<T> {
-    subscribe(run: (value: T) => void): () => void;
-}
-/**
- * Wrap a core {@link DashboardStore} as a Svelte `Readable<DashboardState>`.
- *
- * Following the Svelte store contract, `subscribe(run)` calls `run` immediately
- * with the current state, then again after every core notification, and returns
- * an unsubscribe function.
- */
-export declare function toSvelteStore(store: DashboardStore): SvelteReadable<DashboardState>;
-/** Result of {@link createDashboard}: the core store plus its Svelte view. */
-export interface SvelteDashboard {
-    /** The underlying core store (use its mutators: setFilter, toggleSelection…). */
-    store: DashboardStore;
-    /** Svelte-readable snapshot, usable with `$state` in a component. */
-    state: SvelteReadable<DashboardState>;
-}
-/**
- * Create a dashboard store and its Svelte-readable view in one call.
- */
-export declare function createDashboard(config: DashboardStoreConfig): SvelteDashboard;
-/**
- * Canonical adapter hook (parity with React/Vue `useDashboard`).
- * Returns the Svelte-readable state for a given core store.
- */
-export declare function useDashboard(store: DashboardStore): SvelteReadable<DashboardState>;
+export * from './adapter.js';
+export { default as DashboardFilterBar } from './lib/DashboardFilterBar.svelte';
+export type { DashboardFilterBarProps } from './lib/DashboardFilterBar.svelte';
+export { default as SelectionLegend } from './lib/SelectionLegend.svelte';
+export type { SelectionLegendProps } from './lib/SelectionLegend.svelte';
+export { default as CrossfilteredBarChart } from './lib/CrossfilteredBarChart.svelte';
+export type { CrossfilteredBarChartProps } from './lib/CrossfilteredBarChart.svelte';
+export { default as SmallMultiples } from './lib/SmallMultiples.svelte';
+export type { SmallMultiplesProps } from './lib/SmallMultiples.svelte';
+export { default as FieldPane } from './lib/FieldPane.svelte';
+export type { FieldPaneProps } from './lib/FieldPane.svelte';
+export { default as PivotDataTable } from './lib/PivotDataTable.svelte';
+export type { PivotDataTableProps } from './lib/PivotDataTable.svelte';
+export { default as KpiCardGroup } from './lib/KpiCardGroup.svelte';
+export type { KpiCardGroupProps } from './lib/KpiCardGroup.svelte';
+export { default as RecordsTable } from './lib/RecordsTable.svelte';
+export type { RecordsTableProps } from './lib/RecordsTable.svelte';
+export { default as DrillBarChart } from './lib/DrillBarChart.svelte';
+export type { DrillBarChartProps } from './lib/DrillBarChart.svelte';
+export { default as DrillBreadcrumb } from './lib/DrillBreadcrumb.svelte';
+export type { DrillBreadcrumbProps } from './lib/DrillBreadcrumb.svelte';
+export { default as TopNFilter } from './lib/TopNFilter.svelte';
+export type { TopNFilterProps } from './lib/TopNFilter.svelte';
+export { default as ValueSlicer } from './lib/ValueSlicer.svelte';
+export type { ValueSlicerProps } from './lib/ValueSlicer.svelte';
+export { default as ExportMenu, rowsToCsv } from './lib/ExportMenu.svelte';
+export type { ExportMenuProps } from './lib/ExportMenu.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,oBAAoB,EAC1B,MAAM,yBAAyB,CAAC;AAGjC,cAAc,yBAAyB,CAAC;AAIxC,YAAY,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAEpE,YAAY,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAEnE,gFAAgF;AAChF,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAChD;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,CAQnF;AAED,8EAA8E;AAC9E,MAAM,WAAW,eAAe;IAC9B,iFAAiF;IACjF,KAAK,EAAE,cAAc,CAAC;IACtB,qEAAqE;IACrE,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,oBAAoB,GAAG,eAAe,CAG7E;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,CAElF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,cAAc,cAAc,CAAC;AAG7B,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAChF,YAAY,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AACtF,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACxE,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACxE,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -1,42 +1,25 @@
 /**
  * @sentropic/dataviz-svelte
  *
- * Svelte 5 adapter for the framework-agnostic dataviz-core store. It bridges the
- * core's `getState`/`subscribe` contract onto Svelte's `Readable` store contract
- * so the dashboard state can be consumed with `$store` syntax. All presentation
- * comes from `@sentropic/design-system-svelte`; this package only wires state.
+ * Svelte 5 adapter + dashboard components for @sentropic/dataviz-core, built on
+ * @sentropic/design-system-svelte. The adapter wires the core's observable store
+ * onto Svelte reactivity; the components compose design-system presentational
+ * pieces and bind them to the shared dashboard state. No presentation is
+ * authored here — it all comes from the design system.
  */
-import { createDashboardStore, } from '@sentropic/dataviz-core';
-// Re-export the full core surface so consumers need a single import.
-export * from '@sentropic/dataviz-core';
-/**
- * Wrap a core {@link DashboardStore} as a Svelte `Readable<DashboardState>`.
- *
- * Following the Svelte store contract, `subscribe(run)` calls `run` immediately
- * with the current state, then again after every core notification, and returns
- * an unsubscribe function.
- */
-export function toSvelteStore(store) {
-    return {
-        subscribe(run) {
-            run(store.getState());
-            const off = store.subscribe(() => run(store.getState()));
-            return off;
-        },
-    };
-}
-/**
- * Create a dashboard store and its Svelte-readable view in one call.
- */
-export function createDashboard(config) {
-    const store = createDashboardStore(config);
-    return { store, state: toSvelteStore(store) };
-}
-/**
- * Canonical adapter hook (parity with React/Vue `useDashboard`).
- * Returns the Svelte-readable state for a given core store.
- */
-export function useDashboard(store) {
-    return toSvelteStore(store);
-}
-//# sourceMappingURL=index.js.map
+// Adapter + full core surface re-export (incl. the core's `describeFilterSpec`).
+export * from './adapter.js';
+// Dashboard components (state consumers built on the design system).
+export { default as DashboardFilterBar } from './lib/DashboardFilterBar.svelte';
+export { default as SelectionLegend } from './lib/SelectionLegend.svelte';
+export { default as CrossfilteredBarChart } from './lib/CrossfilteredBarChart.svelte';
+export { default as SmallMultiples } from './lib/SmallMultiples.svelte';
+export { default as FieldPane } from './lib/FieldPane.svelte';
+export { default as PivotDataTable } from './lib/PivotDataTable.svelte';
+export { default as KpiCardGroup } from './lib/KpiCardGroup.svelte';
+export { default as RecordsTable } from './lib/RecordsTable.svelte';
+export { default as DrillBarChart } from './lib/DrillBarChart.svelte';
+export { default as DrillBreadcrumb } from './lib/DrillBreadcrumb.svelte';
+export { default as TopNFilter } from './lib/TopNFilter.svelte';
+export { default as ValueSlicer } from './lib/ValueSlicer.svelte';
+export { default as ExportMenu, rowsToCsv } from './lib/ExportMenu.svelte';

package/dist/lib/CrossfilteredBarChart.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" module>
+  import type { DashboardStore } from '@sentropic/dataviz-core';
+  import type { BarChartTone } from '@sentropic/design-system-svelte';
+
+  export type CrossfilteredBarChartProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This chart's view id in the cross-filter graph. */
+    viewId: string;
+    /** Dimension id to group rows by (one bar per distinct value). */
+    dimension: string;
+    /** Measure id to aggregate into each bar's value. */
+    measure: string;
+    /** Accessible label of the chart (required by the design-system BarChart). */
+    label: string;
+    /** Bar colour tone from the design system. */
+    tone?: BarChartTone;
+    /**
+     * When true (default) clicking a bar toggles this view's selection
+     * (brushing input → `store.toggleSelection`); selected bars are highlighted.
+     * Set false for an output-only facet.
+     */
+    selectable?: boolean;
+    /** Fixed value-axis domain `[min, max]` for a shared scale across facets. */
+    domain?: [number, number];
+    orientation?: 'vertical' | 'horizontal';
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { BarChart, type BarChartDatum } from '@sentropic/design-system-svelte';
+  import { findDimension, findMeasure, groupAggregate } from '@sentropic/dataviz-core';
+  import { useDashboard } from '../adapter.js';
+
+  let {
+    store,
+    viewId,
+    dimension,
+    measure,
+    label,
+    tone,
+    selectable = true,
+    domain,
+    orientation = 'vertical',
+    width,
+    height,
+    class: className,
+  }: CrossfilteredBarChartProps = $props();
+
+  // `$dash` establishes the reactive dependency so the chart re-aggregates on
+  // every store mutation; the rows visible to this view come from the core
+  // cross-filter scope.
+  const dash = $derived(useDashboard(store));
+  const data = $derived.by((): BarChartDatum[] => {
+    void $dash;
+    const dim = findDimension(store.model, dimension);
+    const m = findMeasure(store.model, measure);
+    if (!dim || !m) return [];
+    const rows = store.applyCrossfilter(viewId);
+    return groupAggregate(rows, dimension, m).map(({ key, value }) =>
+      tone ? { label: key, value, tone } : { label: key, value },
+    );
+  });
+  const selectedKeys = $derived($dash.selections[viewId] ?? []);
+</script>
+
+<BarChart
+  {data}
+  {label}
+  {orientation}
+  {width}
+  {height}
+  {domain}
+  class={className}
+  selectedKeys={selectable ? selectedKeys : []}
+  onSelect={selectable ? (key) => store.toggleSelection(viewId, key) : undefined}
+/>

package/dist/lib/CrossfilteredBarChart.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { DashboardStore } from '@sentropic/dataviz-core';
+import type { BarChartTone } from '@sentropic/design-system-svelte';
+export type CrossfilteredBarChartProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This chart's view id in the cross-filter graph. */
+    viewId: string;
+    /** Dimension id to group rows by (one bar per distinct value). */
+    dimension: string;
+    /** Measure id to aggregate into each bar's value. */
+    measure: string;
+    /** Accessible label of the chart (required by the design-system BarChart). */
+    label: string;
+    /** Bar colour tone from the design system. */
+    tone?: BarChartTone;
+    /**
+     * When true (default) clicking a bar toggles this view's selection
+     * (brushing input → `store.toggleSelection`); selected bars are highlighted.
+     * Set false for an output-only facet.
+     */
+    selectable?: boolean;
+    /** Fixed value-axis domain `[min, max]` for a shared scale across facets. */
+    domain?: [number, number];
+    orientation?: 'vertical' | 'horizontal';
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const CrossfilteredBarChart: import("svelte").Component<CrossfilteredBarChartProps, {}, "">;
+type CrossfilteredBarChart = ReturnType<typeof CrossfilteredBarChart>;
+export default CrossfilteredBarChart;
+//# sourceMappingURL=CrossfilteredBarChart.svelte.d.ts.map

package/dist/lib/CrossfilteredBarChart.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossfilteredBarChart.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/CrossfilteredBarChart.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAEpE,MAAM,MAAM,0BAA0B,GAAG;IACvC,sCAAsC;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkDJ,QAAA,MAAM,qBAAqB,gEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/lib/DashboardFilterBar.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+  import type { DashboardStore } from '@sentropic/dataviz-core';
+
+  export type DashboardFilterBarProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** Aria-label of the filter group. */
+    label?: string;
+    /** Label of the "clear all" button (design-system default otherwise). */
+    clearAllLabel?: string;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { FilterBar, FilterPill } from '@sentropic/design-system-svelte';
+  import { findDimension, describeFilterSpec } from '@sentropic/dataviz-core';
+  import { useDashboard } from '../adapter.js';
+
+  let {
+    store,
+    label = 'Filtres actifs',
+    clearAllLabel,
+    class: className,
+  }: DashboardFilterBarProps = $props();
+
+  // `store` is read inside `$derived` (a reactive context) so the readable is
+  // re-created if the prop changes; `$dash` auto-subscribes (SSR-safe).
+  const dash = $derived(useDashboard(store));
+  const entries = $derived(Object.entries($dash.filters));
+</script>
+
+<FilterBar
+  {label}
+  {clearAllLabel}
+  class={className}
+  onClearAll={entries.length > 0
+    ? () => {
+        for (const id of Object.keys($dash.filters)) store.clearFilter(id);
+      }
+    : undefined}
+>
+  {#each entries as [dimensionId, spec] (dimensionId)}
+    {@const dimension = findDimension(store.model, dimensionId)}
+    <FilterPill
+      field={dimension?.label ?? dimensionId}
+      value={describeFilterSpec(spec, dimension)}
+      onRemove={() => store.clearFilter(dimensionId)}
+    />
+  {/each}
+</FilterBar>

package/dist/lib/DashboardFilterBar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { DashboardStore } from '@sentropic/dataviz-core';
+export type DashboardFilterBarProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** Aria-label of the filter group. */
+    label?: string;
+    /** Label of the "clear all" button (design-system default otherwise). */
+    clearAllLabel?: string;
+    class?: string;
+};
+declare const DashboardFilterBar: import("svelte").Component<DashboardFilterBarProps, {}, "">;
+type DashboardFilterBar = ReturnType<typeof DashboardFilterBar>;
+export default DashboardFilterBar;
+//# sourceMappingURL=DashboardFilterBar.svelte.d.ts.map

package/dist/lib/DashboardFilterBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardFilterBar.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/DashboardFilterBar.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG;IACpC,sCAAsC;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwCJ,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/lib/DrillBarChart.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" module>
+  import type { DashboardStore } from '@sentropic/dataviz-core';
+  import type { BarChartTone } from '@sentropic/design-system-svelte';
+
+  export type DrillBarChartProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This view's id (drill state + cross-filter scope live under it). */
+    viewId: string;
+    /** Ordered dimension hierarchy; bars group by the current drill level. */
+    hierarchy: string[];
+    /** Measure id aggregated into each bar's value. */
+    measure: string;
+    /** Accessible label of the chart. */
+    label: string;
+    tone?: BarChartTone;
+    orientation?: 'vertical' | 'horizontal';
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { BarChart, type BarChartDatum } from '@sentropic/design-system-svelte';
+  import { findMeasure, groupAggregate } from '@sentropic/dataviz-core';
+  import { useDashboard } from '../adapter.js';
+
+  let {
+    store,
+    viewId,
+    hierarchy,
+    measure,
+    label,
+    tone,
+    orientation = 'vertical',
+    width,
+    height,
+    class: className,
+  }: DrillBarChartProps = $props();
+
+  const dash = $derived(useDashboard(store));
+  // Current depth = length of the drill path, capped at the deepest level.
+  const level = $derived(
+    Math.min(($dash.drill[viewId] ?? []).length, Math.max(hierarchy.length - 1, 0)),
+  );
+  const currentDim = $derived(hierarchy[level]);
+  const canDrill = $derived(level < hierarchy.length - 1);
+
+  const data = $derived.by((): BarChartDatum[] => {
+    void $dash;
+    const m = findMeasure(store.model, measure);
+    if (!m || !currentDim) return [];
+    return groupAggregate(store.applyCrossfilter(viewId), currentDim, m).map(({ key, value }) =>
+      tone ? { label: key, value, tone } : { label: key, value },
+    );
+  });
+
+  const selectedKeys = $derived($dash.selections[viewId] ?? []);
+
+  // Clicking a bar drills one level deeper (filter the clicked value, push the
+  // next hierarchy dimension as group-by). At the deepest level there is nowhere
+  // to drill, so a click toggles this view's selection (brushing) instead.
+  function onSelect(key: string) {
+    if (canDrill) {
+      store.setFilter(currentDim, { kind: 'include', values: [key] });
+      store.drillDown(viewId, hierarchy[level + 1]);
+    } else {
+      store.toggleSelection(viewId, key);
+    }
+  }
+</script>
+
+<BarChart
+  {data}
+  {label}
+  {orientation}
+  {width}
+  {height}
+  class={className}
+  selectedKeys={canDrill ? [] : selectedKeys}
+  {onSelect}
+/>

package/dist/lib/DrillBarChart.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { DashboardStore } from '@sentropic/dataviz-core';
+import type { BarChartTone } from '@sentropic/design-system-svelte';
+export type DrillBarChartProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This view's id (drill state + cross-filter scope live under it). */
+    viewId: string;
+    /** Ordered dimension hierarchy; bars group by the current drill level. */
+    hierarchy: string[];
+    /** Measure id aggregated into each bar's value. */
+    measure: string;
+    /** Accessible label of the chart. */
+    label: string;
+    tone?: BarChartTone;
+    orientation?: 'vertical' | 'horizontal';
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const DrillBarChart: import("svelte").Component<DrillBarChartProps, {}, "">;
+type DrillBarChart = ReturnType<typeof DrillBarChart>;
+export default DrillBarChart;
+//# sourceMappingURL=DrillBarChart.svelte.d.ts.map

package/dist/lib/DrillBarChart.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrillBarChart.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/DrillBarChart.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAEpE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,sCAAsC;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,uEAAuE;IACvE,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+DJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/lib/DrillBreadcrumb.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+  import type { DashboardStore } from '@sentropic/dataviz-core';
+
+  export type DrillBreadcrumbProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This view's id (must match the DrillBarChart it accompanies). */
+    viewId: string;
+    /** The same ordered dimension hierarchy used by the DrillBarChart. */
+    hierarchy: string[];
+    /** Aria-label of the breadcrumb trail. */
+    label?: string;
+    /** Label of the "go up one level" button. */
+    backLabel?: string;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { Breadcrumb, Button, Inline } from '@sentropic/design-system-svelte';
+  import { findDimension } from '@sentropic/dataviz-core';
+  import { useDashboard } from '../adapter.js';
+
+  let {
+    store,
+    viewId,
+    hierarchy,
+    label = 'Chemin de drill',
+    backLabel = 'Remonter',
+    class: className,
+  }: DrillBreadcrumbProps = $props();
+
+  const dash = $derived(useDashboard(store));
+  const path = $derived($dash.drill[viewId] ?? []);
+  const dimLabel = (id: string) => findDimension(store.model, id)?.label ?? id;
+  const items = $derived(
+    hierarchy
+      .slice(0, path.length + 1)
+      .map((dim, i) => ({ label: dimLabel(dim), current: i === path.length })),
+  );
+
+  // Going up pops the drill path and clears the value-filter that was applied
+  // when drilling away from the level we are returning to (see DrillBarChart).
+  function back() {
+    const p = store.getState().drill[viewId] ?? [];
+    if (p.length === 0) return;
+    store.drillUp(viewId);
+    store.clearFilter(hierarchy[p.length - 1]);
+  }
+</script>
+
+<Inline gap={2} class={className}>
+  <Breadcrumb {items} {label} />
+  {#if path.length > 0}
+    <Button variant="ghost" onclick={back}>{backLabel}</Button>
+  {/if}
+</Inline>

package/dist/lib/DrillBreadcrumb.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { DashboardStore } from '@sentropic/dataviz-core';
+export type DrillBreadcrumbProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This view's id (must match the DrillBarChart it accompanies). */
+    viewId: string;
+    /** The same ordered dimension hierarchy used by the DrillBarChart. */
+    hierarchy: string[];
+    /** Aria-label of the breadcrumb trail. */
+    label?: string;
+    /** Label of the "go up one level" button. */
+    backLabel?: string;
+    class?: string;
+};
+declare const DrillBreadcrumb: import("svelte").Component<DrillBreadcrumbProps, {}, "">;
+type DrillBreadcrumb = ReturnType<typeof DrillBreadcrumb>;
+export default DrillBreadcrumb;
+//# sourceMappingURL=DrillBreadcrumb.svelte.d.ts.map

package/dist/lib/DrillBreadcrumb.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrillBreadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/DrillBreadcrumb.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,oBAAoB,GAAG;IACjC,sCAAsC;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,oEAAoE;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmDJ,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}