@fundar/data-chart-telling 0.0.33 → 0.0.35

package/dist/configuration/config.svelte.js

@@ -22,7 +22,7 @@ const text = (over) => ({
     color: 'inherit',
     leading: '1.3',
     spacing: 'normal',
-    ...over,
+    ...over
 });
 export const DEFAULT_CONFIG = {
     font: 'inherit',
@@ -32,10 +32,14 @@ export const DEFAULT_CONFIG = {
     spacing: {
         headerPadding: '0.75rem 0 1rem',
         legendPadding: '0.75rem 0',
-        captionPadding: '0.5rem 0',
+        captionPadding: '0.5rem 0'
     },
     title: text({ size: '1.5rem', weight: 500, leading: '1.2' }),
-    subtitle: text({ size: '1rem', weight: 400, color: 'color-mix(in srgb, currentColor 85%, transparent)' }),
+    subtitle: text({
+        size: '1rem',
+        weight: 400,
+        color: 'color-mix(in srgb, currentColor 85%, transparent)'
+    }),
     caption: text({ size: '0.75rem', color: 'color-mix(in srgb, currentColor 75%, transparent)' }),
     legend: {
         font: 'inherit',
@@ -47,6 +51,13 @@ export const DEFAULT_CONFIG = {
         gap: '0.5rem 2rem',
         swatchSize: '1.25rem',
         disabledOpacity: 0.12,
+        navButton: {
+            background: 'transparent',
+            color: 'currentColor',
+            size: '1.5rem',
+            fontSize: '1rem',
+            disabledOpacity: 0.3
+        }
     },
     axis: {
         color: 'currentColor',
@@ -57,7 +68,7 @@ export const DEFAULT_CONFIG = {
         yTickSize: 5,
         xTickPadding: 10,
         yTickPadding: 10,
-        grid: false,
+        grid: false
     },
     tooltip: {
         background: '#111827',
@@ -65,7 +76,7 @@ export const DEFAULT_CONFIG = {
         fontSize: '0.8125rem',
         padding: '0.5rem 0.75rem',
         radius: '0.375rem',
-        border: 'none',
+        border: 'none'
     },
     margins: { top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' },
     palette: ['#4f46e5', '#e6580d', '#16a34a', '#dc2626', '#0891b2', '#9333ea', '#ca8a04', '#db2777'],
@@ -75,15 +86,15 @@ export const DEFAULT_CONFIG = {
         dotRadius: 4,
         gap: {
             stroke: { strokeOpacity: 0.6, strokeDasharray: '4 4' },
-            dots: {},
+            dots: {}
         },
         valueLabels: {
             elbowGap: 10,
             laneStep: 7,
             labelGap: 6,
             connectorColor: '#94a3b8',
-            connectorWidth: 0.5,
-        },
+            connectorWidth: 0.5
+        }
     },
     bar: { gap: { fillOpacity: 0.5 } },
     pyramid: { gap: { fillOpacity: 0.5 } },
@@ -93,7 +104,7 @@ export const DEFAULT_CONFIG = {
         rule: { stroke: '#e6580d', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
         dot: { dotRadius: 5, dotFill: 'currentColor' },
         font: { fill: 'currentColor', fontSize: 12, dy: -18 },
-        area: { stroke: '#e6580d', strokeWidth: 2, fillOpacity: 0 },
+        area: { stroke: '#e6580d', strokeWidth: 2, fillOpacity: 0 }
     },
     facet: {
         indicator: {
@@ -101,16 +112,16 @@ export const DEFAULT_CONFIG = {
             color: '#ffffff',
             fontSize: '0.8125rem',
             padding: '0.125rem 0.5rem',
-            radius: '999px',
+            radius: '999px'
         },
         navButton: {
             background: '#111827',
             color: '#ffffff',
             size: '2rem',
             fontSize: '1.1rem',
-            disabledOpacity: 0.3,
-        },
-    },
+            disabledOpacity: 0.3
+        }
+    }
 };
 // ── Merge ─────────────────────────────────────────────────────────────────────
 function isPlainObject(v) {
@@ -151,7 +162,7 @@ export function configToCssVars(c) {
         [`--dct-${prefix}-weight`]: String(s.weight),
         [`--dct-${prefix}-color`]: s.color,
         [`--dct-${prefix}-leading`]: s.leading,
-        [`--dct-${prefix}-spacing`]: s.spacing,
+        [`--dct-${prefix}-spacing`]: s.spacing
     });
     return {
         '--dct-font': c.font,
@@ -172,6 +183,11 @@ export function configToCssVars(c) {
         '--dct-legend-title-weight': String(c.legend.titleWeight),
         '--dct-legend-gap': c.legend.gap,
         '--dct-legend-swatch': c.legend.swatchSize,
+        '--dct-legend-nav-bg': c.legend.navButton.background,
+        '--dct-legend-nav-color': c.legend.navButton.color,
+        '--dct-legend-nav-size': c.legend.navButton.size,
+        '--dct-legend-nav-font-size': c.legend.navButton.fontSize,
+        '--dct-legend-nav-disabled-opacity': String(c.legend.navButton.disabledOpacity),
         '--dct-axis-color': c.axis.color,
         '--dct-tooltip-bg': c.tooltip.background,
         '--dct-tooltip-color': c.tooltip.color,
@@ -193,7 +209,7 @@ export function configToCssVars(c) {
         '--dct-facet-nav-color': c.facet.navButton.color,
         '--dct-facet-nav-btn-size': c.facet.navButton.size,
         '--dct-facet-nav-font-size': c.facet.navButton.fontSize,
-        '--dct-facet-nav-disabled-opacity': String(c.facet.navButton.disabledOpacity),
+        '--dct-facet-nav-disabled-opacity': String(c.facet.navButton.disabledOpacity)
     };
 }
 /** Serialize a CSS-vars record into a `style` attribute string. */

package/dist/configuration/themes/index.d.ts

@@ -49,6 +49,13 @@ export declare const THEMES: {
             gap?: string | undefined;
             swatchSize?: string | undefined;
             disabledOpacity?: number | undefined;
+            navButton?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                size?: string | undefined;
+                fontSize?: string | undefined;
+                disabledOpacity?: number | undefined;
+            } | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;
@@ -249,6 +256,13 @@ export declare const THEMES: {
             gap?: string | undefined;
             swatchSize?: string | undefined;
             disabledOpacity?: number | undefined;
+            navButton?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                size?: string | undefined;
+                fontSize?: string | undefined;
+                disabledOpacity?: number | undefined;
+            } | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;
@@ -449,6 +463,13 @@ export declare const THEMES: {
             gap?: string | undefined;
             swatchSize?: string | undefined;
             disabledOpacity?: number | undefined;
+            navButton?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                size?: string | undefined;
+                fontSize?: string | undefined;
+                disabledOpacity?: number | undefined;
+            } | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;
@@ -649,6 +670,13 @@ export declare const THEMES: {
             gap?: string | undefined;
             swatchSize?: string | undefined;
             disabledOpacity?: number | undefined;
+            navButton?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                size?: string | undefined;
+                fontSize?: string | undefined;
+                disabledOpacity?: number | undefined;
+            } | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export { default as FacetLayout } from './layout/facet/FacetLayout.svelte';
 export { default as FacetIndicator } from './layout/facet/FacetIndicator.svelte';
 export { default as LegendLayout } from './layout/legend/LegendLayout.svelte';
 export { default as Tooltip } from './layout/tooltip/Tooltip.svelte';
-export { getLegendInteraction, provideLegendInteraction, createLegendInteraction, } from './layout/legend/interaction.svelte';
+export { getLegendInteraction, provideLegendInteraction, createLegendInteraction } from './layout/legend/interaction.svelte';
 export { default as BarMarker } from './markers/BarMarker.svelte';
 export { default as CellMarker } from './markers/CellMarker.svelte';
 export { default as DeltaMarker } from './markers/DeltaMarker.svelte';
@@ -31,31 +31,31 @@ export { default as LineMarker } from './markers/LineMarker.svelte';
 export { default as PeakMarker } from './markers/PeakMarker.svelte';
 export { default as RuleMarker } from './markers/RuleMarker.svelte';
 export { default as TextMarker } from './markers/TextMarker.svelte';
-export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG, } from './configuration/config.svelte';
+export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
 export type { ThemeName } from './configuration/themes';
 export { groupBy, buildSeries } from './utils/grouping';
 export { makeColorScale, normalize, resolveCssColor, paletteColor } from './utils/color';
 export type { AxisValue, AxisScale, AxisBasedScalesConfig } from './types/layout/scales';
 export type { Accessor, Series, SeriesProps, DataProps } from './types/plots/data/common';
-export type { BasePlotProps, StylesConfig, MarkersConfig, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig, PointMatchingStrategy, } from './types/plots/props';
-export type { ValuesStyle, ColorsStyle, FrameStyle, FrameProp, BasePlotStylesConfig, AxisBasedStylesConfig, GapsAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig, } from './types/layout/styles';
-export type { GapsConfig, GapZonesConfig, GapZoneConfig, OpenGapZoneConfig, } from './types/plots/gaps';
+export type { BasePlotProps, StylesConfig, MarkersConfig, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig, PointMatchingStrategy } from './types/plots/props';
+export type { ValuesStyle, ColorsStyle, FrameStyle, FrameProp, BasePlotStylesConfig, AxisBasedStylesConfig, GapsAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig } from './types/layout/styles';
+export type { GapsConfig, GapZonesConfig, GapZoneConfig, OpenGapZoneConfig } from './types/plots/gaps';
 export type { LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, GeoSegmentStyle, ScatterSegmentStyle } from './types/plots/segments/common';
 export type { Range, Area, Segment } from './types/plots/segments/config';
-export type { ValueAnchor, SymbolType, LineStyle, LineCap, LineJoin, FontWeight, FontStyleKeyword, TextAnchor, LineAnchor, } from './types/plots/constants';
+export type { ValueAnchor, SymbolType, LineStyle, LineCap, LineJoin, FontWeight, FontStyleKeyword, TextAnchor, LineAnchor } from './types/plots/constants';
 export type { FontStyle, StrokeStyle, DotStyle, AreaStyle } from './types/plots/styling';
 export type { AxisBasedMarkersConfig } from './types/markers/common';
 export type { LineMarkersConfig, DeltaMarkerConfig, DeltaConfig, DeltaTarget } from './types/markers/line';
 export type { MarkerProps } from './types/markers/props';
 export type { GeoFeature, GeoJsonInput, GeoDataProps, Topology } from './types/plots/data/geo';
 export type { ScatterDataProps } from './types/plots/data/scatter';
-export type { GeoProjectionName, GeoProjectionConfig, GeoCustomProjection, GeoCustomProjectionFactory, GeoScalesConfig, GeoZoomConfig, CoordinatesConfig, } from './types/layout/coordinates';
-export type { GeoMarkersConfig, GeoInsetMarkerConfig, GeoInsetTooltipConfig, GeoInsetLocation, GeoInsetProjectionName, GeoInsetProjectionConfig, } from './types/markers/geo';
-export type { ChartPlotContext, ChartPlotSnippet, } from './types/charts/common';
-export type { TimeValue, Orientation, TimelineConfig, } from './types/layout/timeline';
-export type { Responsive, FacetColumns, FacetMode, FacetNavLayout, FacetConfig, FacetIndicatorContext, FacetIndicatorSnippet, FacetNavDirection, FacetNavContext, FacetNavSnippet, } from './types/layout/facet';
-export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, LegendInteractionStore, LegendPlotContext, } from './types/layout/legend';
-export type { HoverStrategy, TooltipOptions, TooltipProp, TooltipAnchorX, TooltipAnchorY, } from './types/layout/tooltip';
+export type { GeoProjectionName, GeoProjectionConfig, GeoCustomProjection, GeoCustomProjectionFactory, GeoScalesConfig, GeoZoomConfig, CoordinatesConfig } from './types/layout/coordinates';
+export type { GeoMarkersConfig, GeoInsetMarkerConfig, GeoInsetTooltipConfig, GeoInsetLocation, GeoInsetProjectionName, GeoInsetProjectionConfig } from './types/markers/geo';
+export type { ChartPlotContext, ChartPlotSnippet } from './types/charts/common';
+export type { TimeValue, Orientation, TimelineConfig } from './types/layout/timeline';
+export type { Responsive, FacetColumns, FacetMode, FacetNavLayout, FacetConfig, FacetIndicatorContext, FacetIndicatorSnippet, FacetNavDirection, FacetNavContext, FacetNavSnippet } from './types/layout/facet';
+export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, LegendItemsLayout, LegendNavDirection, LegendNavContext, LegendNavSnippet, LegendInteractionStore, LegendPlotContext } from './types/layout/legend';
+export type { HoverStrategy, TooltipOptions, TooltipProp, TooltipAnchorX, TooltipAnchorY } from './types/layout/tooltip';
 export type { ChartConfig, ChartConfigInput, TextStyle } from './types/configuration/styling';
 export type { ChartProps, GapsAwareChartProps } from './types/charts/props';

package/dist/index.js

@@ -27,7 +27,7 @@ export { default as FacetLayout } from './layout/facet/FacetLayout.svelte';
 export { default as FacetIndicator } from './layout/facet/FacetIndicator.svelte';
 export { default as LegendLayout } from './layout/legend/LegendLayout.svelte';
 export { default as Tooltip } from './layout/tooltip/Tooltip.svelte';
-export { getLegendInteraction, provideLegendInteraction, createLegendInteraction, } from './layout/legend/interaction.svelte';
+export { getLegendInteraction, provideLegendInteraction, createLegendInteraction } from './layout/legend/interaction.svelte';
 // Markers
 export { default as BarMarker } from './markers/BarMarker.svelte';
 export { default as CellMarker } from './markers/CellMarker.svelte';
@@ -38,7 +38,7 @@ export { default as LineMarker } from './markers/LineMarker.svelte';
 export { default as PeakMarker } from './markers/PeakMarker.svelte';
 export { default as RuleMarker } from './markers/RuleMarker.svelte';
 export { default as TextMarker } from './markers/TextMarker.svelte';
-export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG, } from './configuration/config.svelte';
+export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
 // ── Utils ─────────────────────────────────────────────────────────────────────
 export { groupBy, buildSeries } from './utils/grouping';

package/dist/types/configuration/styling.d.ts

@@ -39,6 +39,14 @@ export type ChartConfig = {
         swatchSize: string;
         /** Fallback opacity for a legend-disabled series/value when a section doesn't set its own `disabledStyle`. */
         disabledOpacity: number;
+        /** Prev/next arrows shown when a `layout: { type: 'horizontal' }` discrete section overflows `maxRows`. */
+        navButton: {
+            background: string;
+            color: string;
+            size: string;
+            fontSize: string;
+            disabledOpacity: number;
+        };
     };
     axis: {
         color: string;

package/dist/types/layout/legend.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { SvelteMap } from 'svelte/reactivity';
 import type { SymbolType, LineStyle } from '../plots/constants';
 import type { StrokeStyle, DotStyle } from '../plots/styling';
@@ -26,15 +27,37 @@ export type LegendItem = {
     /** Initial toggled-off state (uncontrolled — the user can still click it back on). */
     disabled?: boolean;
 };
+/**
+ * How a discrete section's items flow. `'vertical'` (the default) stacks them
+ * in a `columns`-wide grid, as it always has. `'horizontal'` flows them left
+ * to right, wrapping to new rows as needed — and once wrapped rows exceed
+ * `maxRows` (default 1), the section paginates instead of growing taller,
+ * surfacing prev/next arrows to page through the rest.
+ */
+export type LegendItemsLayout = {
+    type: 'vertical';
+} | {
+    type: 'horizontal';
+    maxRows?: number;
+};
+export type LegendNavDirection = 'prev' | 'next';
+export type LegendNavContext = {
+    direction: LegendNavDirection;
+    disabled: boolean;
+    onclick: () => void;
+};
+/** Custom prev/next button renderer for a paginated horizontal section. Falls back to a small default arrow button. */
+export type LegendNavSnippet = Snippet<[LegendNavContext]>;
 export type DiscreteLegendSection = {
     type: 'discrete';
     title?: string;
     items: LegendItem[];
     columns?: number;
-    /** Enables click-to-toggle on each item. */
+    /** Item flow direction. Defaults to `{ type: 'vertical' }` (unchanged prior behaviour). */
+    layout?: LegendItemsLayout;
     interactive?: boolean;
-    /** Style applied to a toggled-off item's series. Falls back to `cfg.legend.disabledOpacity`. */
     disabledStyle?: LegendDisabledStyle;
+    navButton?: LegendNavSnippet;
 };
 export type ContinuousLegendSection = {
     type: 'continuous';
@@ -47,7 +70,6 @@ export type ContinuousLegendSection = {
     ticks?: number[];
     width?: number;
     format?: (v: number) => string;
-    /** Enables drag handles on the bar's edges to narrow the visible range. */
     interactive?: boolean;
     /**
      * How the color ramp responds to a narrowed range: `'rescale'` reprojects
@@ -55,7 +77,6 @@ export type ContinuousLegendSection = {
      * excludes out-of-range values. Defaults to `'filter'`.
      */
     mode?: 'rescale' | 'filter';
-    /** Style applied to values outside the active range. Falls back to `cfg.legend.disabledOpacity`. */
     disabledStyle?: LegendDisabledStyle;
 };
 export type LegendSection = DiscreteLegendSection | ContinuousLegendSection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "type": "module",
   "files": [
     "dist"