@fundar/data-chart-telling 0.0.64 → 1.1.0

package/dist/layout/composer/PlotComposer.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import Figure from '../figure/Figure.svelte';
+	import Grid from '../grid/Grid.svelte';
+	import { TimelineState } from '../timeline/TimelineState.svelte';
+	import type { Snippet } from 'svelte';
+	import type { FigureBoxProps, PlotChromeProps } from '../../types/plots/props';
+	import type { PlotBoxContext } from '../../types/layout/figure';
+	import type {
+		ComposerHoverConfig,
+		ComposerLayout,
+		ComposerTags,
+		ComposerTimelineConfig
+	} from '../../types/layout/composer';
+
+	/**
+	 * Combines separate plots into one figure, drawn as a `Figure` of its own:
+	 * every plot (or composer) drawn straight in its `children` takes a cell of
+	 * its `Grid` - its `area`, an `inset` over it, or the next free one,
+	 * laid out by `layout` - with panel tags, shared hover and legend, and one
+	 * `timeline` for every panel. Anything else goes in a `GridCell`.
+	 */
+	let {
+		width,
+		height,
+		area,
+		inset,
+		title,
+		subtitle,
+		caption,
+		header,
+		footer,
+		legend,
+		order,
+		layout = {},
+		tags,
+		hover,
+		timeline,
+		children
+	}: PlotChromeProps &
+		FigureBoxProps & {
+			layout?: ComposerLayout;
+			tags?: ComposerTags;
+			hover?: ComposerHoverConfig;
+			timeline?: ComposerTimelineConfig;
+			children: Snippet;
+		} = $props();
+
+	// One timeline for every panel, which the plots below follow instead of their own.
+	const timelineState = new TimelineState(() => timeline);
+	timelineState.watch();
+
+	/** Height of the tag row above every panel, when the composer tags them. */
+	const TAG_H = 24;
+</script>
+
+{#snippet grid({ width: w, height: h }: PlotBoxContext)}
+	<Grid
+		width={w}
+		height={h}
+		gap={layout.gap ?? 12}
+		columns={layout.columns}
+		areas={layout.areas}
+		widths={layout.widths}
+		heights={layout.heights}
+		align={layout.align ?? false}
+		header={tags === undefined ? 0 : TAG_H}
+		{tags}
+		scoped
+	>
+		{@render children()}
+	</Grid>
+{/snippet}
+
+{#snippet body({ width: w, height: h }: PlotBoxContext)}
+	{@render grid({ width: w, height: h })}
+{/snippet}
+
+<Figure
+	{width}
+	{height}
+	{area}
+	{inset}
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	hoverStrategy={hover?.strategy ?? 'x'}
+	hoverSync={hover?.sync ?? false}
+	{timelineState}
+	{body}
+/>

package/dist/layout/composer/PlotComposer.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { FigureBoxProps, PlotChromeProps } from '../../types/plots/props';
+import type { ComposerHoverConfig, ComposerLayout, ComposerTags, ComposerTimelineConfig } from '../../types/layout/composer';
+type $$ComponentProps = PlotChromeProps & FigureBoxProps & {
+    layout?: ComposerLayout;
+    tags?: ComposerTags;
+    hover?: ComposerHoverConfig;
+    timeline?: ComposerTimelineConfig;
+    children: Snippet;
+};
+declare const PlotComposer: import("svelte").Component<$$ComponentProps, {}, "">;
+type PlotComposer = ReturnType<typeof PlotComposer>;
+export default PlotComposer;

package/dist/layout/coordinates/CameraFit.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { geoBounds, type GeoPermissibleObjects } from 'd3-geo';
-	import { usePlot } from 'svelteplot';
+	import { usePlot } from '../plot/usePlot';
 	import {
 		toProjectionLike,
 		type StreamingProjection,
@@ -35,9 +35,9 @@
 		onFit: (fit: GeoZoomTransform) => void;
 	} = $props();
 
-	const plot = usePlot();
+	const plot = usePlot().svelteplot;
 
-	// Runtime shape verified against svelteplot's own projection helper — see TileLayer.svelte.
+	// Runtime shape verified against svelteplot's own projection helper - see TileLayer.svelte.
 	const rawProjection = $derived(
 		plot.scales.projection as unknown as StreamingProjection | undefined
 	);
@@ -82,7 +82,7 @@
 		const bboxW = maxX - minX;
 		const bboxH = maxY - minY;
 
-		// No extent to fit for a plain point — `zoom` is used directly as the scale.
+		// No extent to fit for a plain point - `zoom` is used directly as the scale.
 		const availW = Math.max(1, width - padding * 2);
 		const availH = Math.max(1, height - padding * 2);
 		const fitScale =

package/dist/layout/coordinates/CoordinatesLayout.svelte

@@ -29,6 +29,8 @@
 		margin,
 		x,
 		y,
+		r = undefined,
+		length = undefined,
 		coordinates = undefined,
 		locale = undefined,
 		data,
@@ -41,13 +43,17 @@
 		margin: SveltePlotProps['margin'];
 		x: SveltePlotProps['x'];
 		y: SveltePlotProps['y'];
+		/** Forwarded verbatim to svelteplot's own `<Plot r>` - the plot-wide radius/size scale (see `RScaleConfig`'s own doc comment for why this is plot-wide only). */
+		r?: SveltePlotProps['r'];
+		/** Forwarded verbatim to svelteplot's own `<Plot length>` - the plot-wide vector/spike magnitude scale (see `LengthScaleConfig`'s own doc comment). */
+		length?: SveltePlotProps['length'];
 		coordinates?: CoordinatesConfig;
 		/** Forwarded verbatim to svelteplot's own `<Plot locale>`. */
 		locale?: SveltePlotProps['locale'];
 		/** Fed to `resolveProjection`'s `domain: 'data'` sentinel and to `coordinates.camera`'s `{features}` target resolution. */
 		data: TData[];
 		containerEl?: HTMLDivElement;
-		/** See `BasePlotLayout`'s own `remountKey` doc comment — forwarded verbatim to key svelteplot's `<Plot>` itself. */
+		/** See `BasePlotLayout`'s own `remountKey` doc comment - forwarded verbatim to key svelteplot's `<Plot>` itself. */
 		remountKey?: string | number;
 		children: Snippet;
 	} = $props();
@@ -101,7 +107,7 @@
 	);
 	const cameraActive = $derived(resolvedCameraTarget != null);
 
-	/** `[-lon, -lat, gamma]` faces the target toward the viewer — only applied on `orthographic`, see `activeRotate`. */
+	/** `[-lon, -lat, gamma]` faces the target toward the viewer - only applied on `orthographic`, see `activeRotate`. */
 	const cameraRotateTarget = $derived.by((): GeoRotate | undefined => {
 		if (!resolvedCameraTarget) return undefined;
 		if (resolvedCameraTarget.kind === 'point') {
@@ -116,7 +122,7 @@
 		transition: () => cameraConfig?.transition
 	});
 
-	/** `camera` claims `rotate` outright on `orthographic` (only one `rotate` value exists at a time) — interactive `rotate` takes back over once `camera` is unset. */
+	/** `camera` claims `rotate` outright on `orthographic` (only one `rotate` value exists at a time) - interactive `rotate` takes back over once `camera` is unset. */
 	const cameraOrthoRotate = $derived(
 		cameraActive && projectionType === 'orthographic' ? cameraRotateTween.current : undefined
 	);
@@ -152,6 +158,8 @@
 		{margin}
 		{x}
 		{y}
+		{r}
+		{length}
 		{locale}
 		projection={finalProjection as SveltePlotProps['projection']}
 	>

package/dist/layout/coordinates/CoordinatesLayout.svelte.d.ts

@@ -5,15 +5,19 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         width: number;
         height: number;
         margin: number | "auto" | import("svelteplot/types/plot.js").PlotMargin | undefined;
-        x: false | import("svelteplot/types/data.js").RawValue[] | Partial<import("svelteplot/types/scale.js").XScaleOptions> | undefined;
+        x: false | Partial<import("svelteplot/types/scale.js").XScaleOptions> | import("svelteplot/types/data.js").RawValue[] | undefined;
         y: false | import("svelteplot/types/data.js").RawValue[] | Partial<import("svelteplot/types/scale.js").YScaleOptions> | undefined;
+        /** Forwarded verbatim to svelteplot's own `<Plot r>` - the plot-wide radius/size scale (see `RScaleConfig`'s own doc comment for why this is plot-wide only). */
+        r?: Partial<import("svelteplot/types/scale.js").ScaleOptions> | undefined;
+        /** Forwarded verbatim to svelteplot's own `<Plot length>` - the plot-wide vector/spike magnitude scale (see `LengthScaleConfig`'s own doc comment). */
+        length?: Partial<import("svelteplot/types/scale.js").ScaleOptions> | undefined;
         coordinates?: CoordinatesConfig;
         /** Forwarded verbatim to svelteplot's own `<Plot locale>`. */
         locale?: string | undefined;
         /** Fed to `resolveProjection`'s `domain: 'data'` sentinel and to `coordinates.camera`'s `{features}` target resolution. */
         data: TData[];
         containerEl?: HTMLDivElement;
-        /** See `BasePlotLayout`'s own `remountKey` doc comment — forwarded verbatim to key svelteplot's `<Plot>` itself. */
+        /** See `BasePlotLayout`'s own `remountKey` doc comment - forwarded verbatim to key svelteplot's `<Plot>` itself. */
         remountKey?: string | number;
         children: Snippet;
     };

package/dist/layout/coordinates/camera.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { GeoCameraTransition } from '../../types/plots/camera';
 import type { GeoRotate } from './rotate.svelte';
 import type { GeoZoomTransform } from './zoom.svelte';
-/** Tweens the camera's pixel-space `{x,y,k}` transform toward `target()` — see `tweenState`'s doc comment for the two transition modes. */
+/** Tweens the camera's pixel-space `{x,y,k}` transform toward `target()` - see `tweenState`'s doc comment for the two transition modes. */
 export declare function createCameraTransformTween(args: {
     target: () => GeoZoomTransform | undefined;
     transition: () => GeoCameraTransition | undefined;

package/dist/layout/coordinates/camera.svelte.js

@@ -1,4 +1,4 @@
-import { resolveEasing } from '../../utils/interpolate';
+import { Interpolation } from '../../utils/Interpolation';
 function clamp01(t) {
     return t < 0 ? 0 : t > 1 ? 1 : t;
 }
@@ -10,7 +10,7 @@ function clamp01(t) {
  */
 function tweenState(args) {
     let current = $state(undefined);
-    // Mirrors `current` without being reactive — read this, not `current`,
+    // Mirrors `current` without being reactive - read this, not `current`,
     // inside the effect below, or the async `tick()` write to `current` would
     // re-trigger this very effect (see `rotate.svelte.ts`'s own warning).
     let lastValue;
@@ -42,13 +42,13 @@ function tweenState(args) {
             raf = undefined;
         }
         if (progress != null) {
-            setCurrent(args.lerp(from, to, resolveEasing(transition?.easing)(clamp01(progress)), direction));
+            setCurrent(args.lerp(from, to, Interpolation.buildEasing(transition?.easing)(clamp01(progress)), direction));
             return;
         }
         if (!changed)
             return;
         const duration = Math.max(0, transition?.duration ?? 750);
-        const easing = resolveEasing(transition?.easing);
+        const easing = Interpolation.buildEasing(transition?.easing);
         const startFrom = from;
         const endTo = to;
         const start = performance.now();
@@ -79,7 +79,7 @@ function lerpTransform(from, to, t) {
 function transformEquals(a, b) {
     return a.x === b.x && a.y === b.y && a.k === b.k;
 }
-/** Signed angular delta from `a` to `b` in degrees — the smaller one for `'shortest'`, the way around it for `'longest'`. */
+/** Signed angular delta from `a` to `b` in degrees - the smaller one for `'shortest'`, the way around it for `'longest'`. */
 function angleDelta(a, b, direction) {
     const shortest = ((((b - a + 180) % 360) + 360) % 360) - 180;
     if (direction === 'shortest')
@@ -96,7 +96,7 @@ function lerpRotate(from, to, t, direction) {
 function rotateEquals(a, b) {
     return a[0] === b[0] && a[1] === b[1] && a[2] === b[2];
 }
-/** Tweens the camera's pixel-space `{x,y,k}` transform toward `target()` — see `tweenState`'s doc comment for the two transition modes. */
+/** Tweens the camera's pixel-space `{x,y,k}` transform toward `target()` - see `tweenState`'s doc comment for the two transition modes. */
 export function createCameraTransformTween(args) {
     return tweenState({ ...args, lerp: lerpTransform, equals: transformEquals });
 }

package/dist/layout/coordinates/projections/argentina.js

@@ -1,6 +1,6 @@
 import { geoAzimuthalEquidistant } from 'd3-geo';
 import { pointsToFitFeature } from './fit';
-// Representative extremity points — not real border geometry (which stays
+// Representative extremity points - not real border geometry (which stays
 // out of `src/lib`, see stories/plots/geo/data.ts), just enough for
 // `fitSize` to frame Argentina's full territorial claim sensibly. These are
 // plain real-world coordinates, not derived from any particular dataset, so
@@ -11,7 +11,7 @@ const MAINLAND_POINTS = [
     [-68.3, -54.8], // Ushuaia / Tierra del Fuego (south)
     [-53.7, -25.6], // Puerto Iguazú (east)
     [-73.4, -50.3], // Los Glaciares, Santa Cruz (west)
-    [-71.8, -41.1], // Bariloche (west, mid-latitude bulge)
+    [-71.8, -41.1] // Bariloche (west, mid-latitude bulge)
 ];
 const ANTARCTIC_POINTS = [
     [-61.2, -51.0], // Malvinas (north tip)
@@ -20,7 +20,7 @@ const ANTARCTIC_POINTS = [
     [-26.5, -59.5], // Sandwich del Sur
     [-74, -60], // Antarctic sector, western meridian (60°S treaty boundary)
     [-25, -60], // Antarctic sector, eastern meridian (60°S treaty boundary)
-    [-49.5, -89.9], // South Pole, on the sector's central meridian
+    [-49.5, -89.9] // South Pole, on the sector's central meridian
 ];
 /**
  * Argentina's territory in one unbroken frame: the mainland and the

package/dist/layout/coordinates/projections/fit.js

@@ -9,6 +9,6 @@ export function pointsToFitFeature(points) {
     return {
         type: 'Feature',
         properties: null,
-        geometry: { type: 'MultiPoint', coordinates: points },
+        geometry: { type: 'MultiPoint', coordinates: points }
     };
 }

package/dist/layout/coordinates/resolveCameraTarget.d.ts

@@ -1,5 +1,5 @@
 import type { GeoCameraTarget } from '../../types/plots/camera';
-/** `GeoCameraTarget` resolved to actual geometry — `features` looked up by `__id` and unioned into one `FeatureCollection`; `undefined` if none match. */
+/** `GeoCameraTarget` resolved to actual geometry - `features` looked up by `__id` and unioned into one `FeatureCollection`; `undefined` if none match. */
 export type ResolvedGeoCameraTarget = {
     kind: 'point';
     lon: number;

package/dist/layout/coordinates/resolveProjection.d.ts

@@ -1,7 +1,7 @@
 import type { GeoProjectionConfig } from '../../types/layout/coordinates';
 /**
  * Resolves a `GeoScalesConfig['projection']` into what svelteplot's own
- * `<Plot projection>` expects — kept separate from `GeoPlot`'s own
+ * `<Plot projection>` expects - kept separate from `GeoPlot`'s own
  * `Plot.svelte` so adding more projection-level behavior (like the
  * `domain: 'data'` sentinel below) doesn't grow that component itself.
  */

package/dist/layout/coordinates/resolveProjection.js

@@ -1,6 +1,6 @@
 /**
  * Resolves a `GeoScalesConfig['projection']` into what svelteplot's own
- * `<Plot projection>` expects — kept separate from `GeoPlot`'s own
+ * `<Plot projection>` expects - kept separate from `GeoPlot`'s own
  * `Plot.svelte` so adding more projection-level behavior (like the
  * `domain: 'data'` sentinel below) doesn't grow that component itself.
  */
@@ -19,6 +19,6 @@ export function resolveProjection(projection, data) {
         parallels: projection.parallels,
         inset: projection.inset,
         clip: projection.clip,
-        domain,
+        domain
     };
 }

package/dist/layout/coordinates/rotate.svelte.d.ts

@@ -1,7 +1,7 @@
 export type GeoRotate = [number, number, number];
 /**
  * Wires drag-to-rotate onto a DOM node for orthographic-style projections,
- * exposing the resulting `[lambda, phi, gamma]` as reactive Svelte state —
+ * exposing the resulting `[lambda, phi, gamma]` as reactive Svelte state -
  * the caller feeds it back into the projection's own `rotate` config (see
  * `GeoPlot`'s own `Plot.svelte`). Plain pointer events rather than d3-drag: a
  * single-pointer drag-delta-to-rotation-delta conversion doesn't need
@@ -10,9 +10,9 @@ export type GeoRotate = [number, number, number];
  *
  * Sensitivity is a fixed degrees-per-pixel constant scaled by the current
  * pan/zoom `scale` (so dragging feels consistent whether zoomed in or out)
- * — not derived from the projection's own fitted scale, which isn't
+ * - not derived from the projection's own fitted scale, which isn't
  * exposed back up to this layer. Known v1 simplification, in the same
- * spirit as `createGeoZoom`'s own "v1 limitation" — good enough to spin
+ * spirit as `createGeoZoom`'s own "v1 limitation" - good enough to spin
  * the globe, not tuned to feel identical across wildly different
  * width/height/domain combinations.
  */

package/dist/layout/coordinates/rotate.svelte.js

@@ -1,6 +1,6 @@
 /**
  * Wires drag-to-rotate onto a DOM node for orthographic-style projections,
- * exposing the resulting `[lambda, phi, gamma]` as reactive Svelte state —
+ * exposing the resulting `[lambda, phi, gamma]` as reactive Svelte state -
  * the caller feeds it back into the projection's own `rotate` config (see
  * `GeoPlot`'s own `Plot.svelte`). Plain pointer events rather than d3-drag: a
  * single-pointer drag-delta-to-rotation-delta conversion doesn't need
@@ -9,16 +9,16 @@
  *
  * Sensitivity is a fixed degrees-per-pixel constant scaled by the current
  * pan/zoom `scale` (so dragging feels consistent whether zoomed in or out)
- * — not derived from the projection's own fitted scale, which isn't
+ * - not derived from the projection's own fitted scale, which isn't
  * exposed back up to this layer. Known v1 simplification, in the same
- * spirit as `createGeoZoom`'s own "v1 limitation" — good enough to spin
+ * spirit as `createGeoZoom`'s own "v1 limitation" - good enough to spin
  * the globe, not tuned to feel identical across wildly different
  * width/height/domain combinations.
  */
 export function createGeoRotate(args) {
     let rotate = $state(args.baseRotate());
     // Reset to the configured base rotation whenever it changes (e.g. a
-    // Storybook control edit) — but only while not actively enabled, so this
+    // Storybook control edit) - but only while not actively enabled, so this
     // doesn't fight the user's own in-progress drag.
     $effect(() => {
         if (!args.enabled())
@@ -29,13 +29,13 @@ export function createGeoRotate(args) {
         if (!args.enabled() || !el)
             return;
         // `dragging`/`start`/`startRotate` are deliberately plain closure
-        // variables, not `$state` — this effect must NOT read the reactive
+        // variables, not `$state` - this effect must NOT read the reactive
         // `rotate` value anywhere in its own synchronous body (only inside the
         // event-handler closures below, which aren't part of dependency
         // tracking). Reading it here would make every `rotate` write from
         // `onPointerMove` re-trigger this very effect mid-drag, tearing down
-        // and rebuilding the listeners — and losing `dragging`'s `true` state
-        // — on every pixel of movement.
+        // and rebuilding the listeners - and losing `dragging`'s `true` state
+        // - on every pixel of movement.
         let dragging = false;
         let start = { x: 0, y: 0 };
         let startRotate = [0, 0, 0];
@@ -74,6 +74,6 @@ export function createGeoRotate(args) {
     return {
         get rotate() {
             return rotate;
-        },
+        }
     };
 }

package/dist/layout/coordinates/zoom.svelte.d.ts

@@ -21,7 +21,7 @@ export declare function createGeoZoom(args: {
     zoomEnabled: () => boolean;
     config: () => GeoZoomConfig | undefined;
     node: () => HTMLElement | null;
-    /** When true, drag/touch is left for something else (e.g. `createGeoRotate`) — only wheel/pinch scaling stays wired here. */
+    /** When true, drag/touch is left for something else (e.g. `createGeoRotate`) - only wheel/pinch scaling stays wired here. */
     disableDrag?: () => boolean;
 }): {
     readonly transform: GeoZoomTransform;

package/dist/layout/facet/FacetIndicator.svelte

@@ -1,31 +1,31 @@
 <script lang="ts">
-  /**
-   * Default position badge for `carousel`/`paginated` facet modes. Styled from
-   * the `--dct-facet-indicator-*` config vars; positioning is owned by the
-   * parent that renders it.
-   */
-  let {
-    current,
-    total,
-    format,
-  }: {
-    current: number;
-    total: number;
-    format?: (current: number, total: number) => string;
-  } = $props();
+	/**
+	 * Default position badge for `carousel`/`paginated` facet modes. Styled from
+	 * the `--dct-facet-indicator-*` config vars; positioning is owned by the
+	 * parent that renders it.
+	 */
+	let {
+		current,
+		total,
+		format
+	}: {
+		current: number;
+		total: number;
+		format?: (current: number, total: number) => string;
+	} = $props();
 
-  const text = $derived(format ? format(current, total) : `${current} / ${total}`);
+	const text = $derived(format ? format(current, total) : `${current} / ${total}`);
 </script>
 
 <div class="dct-facet-indicator">{text}</div>
 
 <style>
-  .dct-facet-indicator {
-    padding: var(--dct-facet-indicator-pad, 0.125rem 0.5rem);
-    border-radius: var(--dct-facet-indicator-radius, 999px);
-    font-size: var(--dct-facet-indicator-size, 0.8125rem);
-    background: var(--dct-facet-indicator-bg, #111827);
-    color: var(--dct-facet-indicator-color, #fff);
-    pointer-events: none;
-  }
+	.dct-facet-indicator {
+		padding: var(--dct-facet-indicator-pad, 0.125rem 0.5rem);
+		border-radius: var(--dct-facet-indicator-radius, 999px);
+		font-size: var(--dct-facet-indicator-size, 0.8125rem);
+		background: var(--dct-facet-indicator-bg, #111827);
+		color: var(--dct-facet-indicator-color, #fff);
+		pointer-events: none;
+	}
 </style>