layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/components/geo/GeoRaster.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { GeoProjection } from 'd3-geo';
+export type GeoRasterPropsWithoutHTML = {
+    /**
+     * The image to reproject. Either:
+     *
+     * - a URL string (loaded via `Image` with `crossOrigin="anonymous"`),
+     * - a preloaded `HTMLImageElement`,
+     * - an `HTMLCanvasElement` (e.g. a stitched tile mosaic),
+     * - or an `ImageBitmap`.
+     *
+     * The image pixel data must be readable (not tainted by CORS). When passing a
+     * URL, the component sets `crossOrigin` on the underlying `Image` — the host
+     * must respond with the appropriate `Access-Control-Allow-Origin` header.
+     */
+    image: string | HTMLImageElement | HTMLCanvasElement | ImageBitmap;
+    /**
+     * Projection used by the source image. Pass as an uncalled function, e.g.
+     * `sourceProjection={geoEquirectangular}`.
+     *
+     * When omitted, the source is assumed to be an equirectangular (plate carrée)
+     * image covering the full globe — i.e. `x = ((lon + 180) / 360) * width`,
+     * `y = ((90 - lat) / 180) * height`. This is the common layout for imagery
+     * such as NASA Blue Marble / Black Marble.
+     */
+    sourceProjection?: () => GeoProjection;
+    /**
+     * Pixel sampling strategy.
+     *
+     * - `nearest` (default): fastest, slightly blocky at low source resolution.
+     * - `bilinear`: smoother, ~4x slower per pixel.
+     *
+     * @default 'nearest'
+     */
+    interpolate?: 'nearest' | 'bilinear';
+    /**
+     * `crossOrigin` attribute applied to the underlying `Image` element when
+     * loading from a URL. Set to `null` to disable.
+     *
+     * @default 'anonymous'
+     */
+    crossOrigin?: string | null;
+    /**
+     * Resolution multiplier for the reprojected output, relative to chart CSS
+     * pixels. A value greater than 1 produces a sharper image on HiDPI
+     * displays at the cost of more work per frame.
+     *
+     * @default 1
+     */
+    resolution?: number;
+    /**
+     * Disable image smoothing when compositing the reprojected buffer onto the
+     * destination canvas. Useful for a pixel-art look.
+     *
+     * @default false
+     */
+    pixelated?: boolean;
+};
+export type GeoRasterProps = GeoRasterPropsWithoutHTML;
+declare const GeoRaster: import("svelte").Component<GeoRasterPropsWithoutHTML, {}, "">;
+type GeoRaster = ReturnType<typeof GeoRaster>;
+export default GeoRaster;

package/dist/components/geo/GeoSpline.svelte

@@ -0,0 +1,78 @@
+<script lang="ts" module>
+  import { curveNatural, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+  import type { Without } from '../../utils/types.js';
+  import type { PathProps } from '../Path.svelte';
+
+  export type GeoSplinePropsWithoutHTML = {
+    /**
+     * Link between two points on the globe.
+     */
+    link: { source: [number, number]; target: [number, number] };
+
+    /**
+     * The amount of loft to apply to the middle of the curve.
+     *
+     * @default 1.0
+     */
+    loft?: number;
+
+    /**
+     * Curve of spline drawn. Imported via d3-shape.
+     *
+     * @example
+     * import { curveNatural } from 'd3-shape';
+     * <GeoSpline curve={curveNatural} />
+     *
+     * @default curveNatural
+     */
+    curve?: CurveFactory | CurveFactoryLineOnly;
+  };
+
+  export type GeoSplineProps = GeoSplinePropsWithoutHTML &
+    Without<PathProps, GeoSplinePropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { geoOrthographic, geoInterpolate } from 'd3-geo';
+  import { line as d3Line } from 'd3-shape';
+
+  import { getGeoContext } from '../../contexts/geo.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import Path from '../Path.svelte';
+
+  let { link, loft = 1.0, curve = curveNatural, ...restProps }: GeoSplineProps = $props();
+
+  const geo = getGeoContext();
+
+  const loftedProjection = $derived(
+    geo.projection
+      ? geoOrthographic()
+          .translate(geo.projection.translate())
+          .rotate(geo.projection.rotate())
+          .scale(geo.projection.scale() * loft)
+      : undefined
+  );
+
+  const source = $derived(geo.projection ? geo.projection(link.source) : [0, 0]) as [
+    number,
+    number,
+  ];
+  const target = $derived(geo.projection ? geo.projection(link.target) : [0, 0]) as [
+    number,
+    number,
+  ];
+  const middle = $derived(
+    geo.projection ? loftedProjection!(geoInterpolate(link.source, link.target)(0.5)) : [0, 0]
+  ) as [number, number];
+
+  // Build SVG path directly since coordinates are already projected to screen space.
+  // Using Spline would double-project via its geo mode.
+  const d = $derived(
+    d3Line<[number, number]>()
+      .x((d) => d[0])
+      .y((d) => d[1])
+      .curve(curve)([source, middle, target]) ?? ''
+  );
+</script>
+
+<Path pathData={d} {...extractLayerProps(restProps, 'lc-geo-spline')} />

package/dist/components/{GeoSpline.svelte.d.ts → geo/GeoSpline.svelte.d.ts}

@@ -1,6 +1,6 @@
-import { type SplineProps } from './Spline.svelte';
 import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
-import type { Without } from '../utils/types.js';
+import type { Without } from '../../utils/types.js';
+import type { PathProps } from '../Path.svelte';
 export type GeoSplinePropsWithoutHTML = {
     /**
      * Link between two points on the globe.
@@ -26,7 +26,7 @@ export type GeoSplinePropsWithoutHTML = {
      */
     curve?: CurveFactory | CurveFactoryLineOnly;
 };
-export type GeoSplineProps = GeoSplinePropsWithoutHTML & Without<SplineProps, GeoSplinePropsWithoutHTML>;
-declare const GeoSpline: import("svelte").Component<GeoSplineProps, {}, "splineRef">;
+export type GeoSplineProps = GeoSplinePropsWithoutHTML & Without<PathProps, GeoSplinePropsWithoutHTML>;
+declare const GeoSpline: import("svelte").Component<GeoSplineProps, {}, "">;
 type GeoSpline = ReturnType<typeof GeoSpline>;
 export default GeoSpline;

package/dist/components/{GeoTile.svelte → geo/GeoTile.svelte}

@@ -44,12 +44,12 @@
   // @ts-expect-error
   import { tile as d3Tile } from 'd3-tile';
 
-  import { getRenderContext, getChartContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
-  import Group from './Group.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import { getLayerContext } from '../../contexts/layer.js';
+  import Group from '../Group.svelte';
   import TileImage from './TileImage.svelte';
-  import { getGeoContext } from './GeoContext.svelte';
-  import { extractLayerProps } from '../utils/attributes.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
 
   let {
     url,
@@ -62,17 +62,17 @@
   }: GeoTilePropsWithoutHTML = $props();
 
   const ctx = getChartContext();
-  const geoCtx = getGeoContext();
-  const renderCtx = getRenderContext();
+  const geo = getGeoContext();
+  const layerCtx = getLayerContext();
 
-  const center = $derived(geoCtx.projection?.([0, 0]) ?? [0, 0]);
+  const center = $derived(geo.projection?.([0, 0]) ?? [0, 0]);
 
   const tiles = $derived(
     d3Tile()
       .size([ctx.containerWidth, ctx.containerHeight])
       .translate([center[0] + ctx.padding.left, center[1] + ctx.padding.top])
       // TODO: is this fine to add the 0 as a default?
-      .scale(geoCtx.projection ? geoCtx.projection.scale() * 2 * Math.PI : undefined)
+      .scale(geo.projection ? geo.projection.scale() * 2 * Math.PI : undefined)
       .tileSize(tileSize)
       .zoomDelta(zoomDelta)()
   );
@@ -90,23 +90,26 @@
     }
   }
 
-  if (renderCtx === 'canvas') {
-    registerCanvasComponent({
+  if (layerCtx === 'canvas') {
+    ctx.registerComponent({
       name: 'GeoTile',
-      render,
-      deps: () => [tiles],
+      kind: 'mark',
+      canvasRender: {
+        render,
+        deps: () => [tiles],
+      },
     });
   }
 </script>
 
-{#if renderCtx === 'svg' && url}
+{#if layerCtx === 'svg' && url}
   {#if children}
     {@render children({ tiles })}
   {:else}
     <Group
       x={-ctx.padding.left}
       y={-ctx.padding.top}
-      {...extractLayerProps(group, 'geo-tile-group')}
+      {...extractLayerProps(group, 'lc-geo-tile-group')}
     >
       {#each tiles as [x, y, z] (url(x, y, z))}
         <TileImage

package/dist/components/{GeoTile.svelte.d.ts → geo/GeoTile.svelte.d.ts}

@@ -33,7 +33,7 @@ export type GeoTilePropsWithoutHTML = {
         tiles: any[];
     }]>;
 };
-import Group from './Group.svelte';
+import Group from '../Group.svelte';
 declare const GeoTile: import("svelte").Component<GeoTilePropsWithoutHTML, {}, "">;
 type GeoTile = ReturnType<typeof GeoTile>;
 export default GeoTile;

package/dist/components/{GeoVisible.svelte → geo/GeoVisible.svelte}

@@ -11,13 +11,13 @@
 </script>
 
 <script lang="ts">
-  import { isVisible } from '../utils/geo.js';
-  import { getGeoContext } from './GeoContext.svelte';
+  import { isVisible } from '../../utils/geo.js';
+  import { getGeoContext } from '../../contexts/geo.js';
 
   let { lat, long, children }: GeoVisibleProps = $props();
-  const geoCtx = getGeoContext();
+  const geo = getGeoContext();
 </script>
 
-{#if geoCtx.projection && isVisible(geoCtx.projection)([long, lat])}
+{#if geo.projection && isVisible(geo.projection)([long, lat])}
   {@render children?.()}
 {/if}

package/dist/components/{Graticule.svelte → geo/Graticule.svelte}

@@ -1,12 +1,13 @@
 <script lang="ts" module>
-  import type { Without } from '../utils/types.js';
+  import type { Without } from '../../utils/types.js';
   import type { ComponentProps } from 'svelte';
   import GeoPath, { type GeoPathProps } from './GeoPath.svelte';
 
   export type GraticulePropsWithoutHTML = {
     lines?: Partial<ComponentProps<typeof GeoPath>> | boolean | undefined;
     outline?: Partial<ComponentProps<typeof GeoPath>> | boolean | undefined;
-    step?: [number, number];
+    stepX?: number;
+    stepY?: number;
   };
 
   export type GraticuleProps = GraticulePropsWithoutHTML &
@@ -15,34 +16,30 @@
 
 <script lang="ts">
   import { geoGraticule } from 'd3-geo';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
-  import Group from './Group.svelte';
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import Group from '../Group.svelte';
 
-  let { lines, outline, step = [10, 10], ...restProps }: GraticuleProps = $props();
+  let { lines, outline, stepX = 10, stepY = 10, ...restProps }: GraticuleProps = $props();
 
-  const graticule = geoGraticule();
-
-  $effect(() => {
-    graticule.step(step);
-  });
+  const graticule = $derived(geoGraticule().step([stepX, stepY]));
 </script>
 
-<Group class={layerClass('graticule-g')}>
+<Group class="lc-graticule-g">
   <!-- TODO: Any reason to still render the single `MultiLineString` path if using `lines` and/or `outline` -->
   {#if !lines && !outline}
-    <GeoPath geojson={graticule()} {...extractLayerProps(restProps, 'graticule-geo-path')} />
+    <GeoPath geojson={graticule()} {...extractLayerProps(restProps, 'lc-graticule-geo-path')} />
   {/if}
 
   {#if lines}
     {#each graticule.lines() as line}
-      <GeoPath geojson={line} {...extractLayerProps(lines, 'graticule-geo-line')} />
+      <GeoPath geojson={line} {...extractLayerProps(lines, 'lc-graticule-geo-line')} />
     {/each}
   {/if}
 
   {#if outline}
     <GeoPath
       geojson={graticule.outline()}
-      {...extractLayerProps(outline, 'graticule-geo-outline')}
+      {...extractLayerProps(outline, 'lc-graticule-geo-outline')}
     />
   {/if}
 </Group>

package/dist/components/{Graticule.svelte.d.ts → geo/Graticule.svelte.d.ts}

@@ -1,10 +1,11 @@
-import type { Without } from '../utils/types.js';
+import type { Without } from '../../utils/types.js';
 import type { ComponentProps } from 'svelte';
 import GeoPath, { type GeoPathProps } from './GeoPath.svelte';
 export type GraticulePropsWithoutHTML = {
     lines?: Partial<ComponentProps<typeof GeoPath>> | boolean | undefined;
     outline?: Partial<ComponentProps<typeof GeoPath>> | boolean | undefined;
-    step?: [number, number];
+    stepX?: number;
+    stepY?: number;
 };
 export type GraticuleProps = GraticulePropsWithoutHTML & Without<GeoPathProps, Omit<GraticulePropsWithoutHTML, 'ref'>>;
 declare const Graticule: import("svelte").Component<GraticuleProps, {}, "">;

package/dist/components/{TileImage.svelte → geo/TileImage.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { Without } from '../utils/types.js';
+  import type { Without } from '../../utils/types.js';
 
   let tileCache = new Map<string, Promise<string>>();
 
@@ -59,9 +59,9 @@
 </script>
 
 <script lang="ts">
-  import { extractLayerProps } from '../utils/attributes.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
 
-  import Text from './Text.svelte';
+  import Text from '../Text.svelte';
   import type { SVGAttributes } from 'svelte/elements';
   import { onMount } from 'svelte';
 
@@ -135,7 +135,7 @@
     y={(y + ty) * scale - 0.5}
     width={scale + 1}
     height={scale + 1}
-    {...extractLayerProps(restProps, 'tile-image-lower')}
+    {...extractLayerProps(restProps, 'lc-tile-image-lower')}
   />
   <image
     {href}
@@ -143,7 +143,7 @@
     y={(y + ty) * scale}
     width={scale}
     height={scale}
-    {...extractLayerProps(restProps, 'tile-image')}
+    {...extractLayerProps(restProps, 'lc-tile-image')}
   />
 {/key}
 {#if debug}
@@ -152,7 +152,7 @@
     y={(y + ty) * scale}
     width={scale}
     height={scale}
-    class="stroke-danger/50 fill-none"
+    class="lc-tile-image-debug-rect"
   />
   <Text
     x={(x + tx) * scale}
@@ -161,6 +161,21 @@
     dx={2}
     dy={-2}
     value="{x}-{y}-{z}"
-    class="text-[8px] fill-black/50"
+    class="lc-tile-image-debug-text"
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-tile-image-debug-rect)) {
+      fill: none;
+      stroke: var(--color-danger, red);
+    }
+
+    :global(:where(.lc-tile-image-debug-text)) {
+      --fill-color: var(--color-danger, red);
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+</style>

package/dist/components/{TileImage.svelte.d.ts → geo/TileImage.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { Without } from '../utils/types.js';
+import type { Without } from '../../utils/types.js';
 export type TileImagePropsWithoutHTML = {
     /**
      * x position of the tile

package/dist/components/geo/index.d.ts

@@ -0,0 +1,26 @@
+export { default as GeoCircle } from './GeoCircle.svelte';
+export * from './GeoCircle.svelte';
+export { default as GeoClipPath } from './GeoClipPath.svelte';
+export * from './GeoClipPath.svelte';
+export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
+export * from './GeoEdgeFade.svelte';
+export { default as GeoLegend } from './GeoLegend.svelte';
+export * from './GeoLegend.svelte';
+export { default as GeoPath } from './GeoPath.svelte';
+export * from './GeoPath.svelte';
+export { default as GeoPoint } from './GeoPoint.svelte';
+export * from './GeoPoint.svelte';
+export { default as GeoProjection } from './GeoProjection.svelte';
+export * from './GeoProjection.svelte';
+export { default as GeoRaster } from './GeoRaster.svelte';
+export * from './GeoRaster.svelte';
+export { default as GeoSpline } from './GeoSpline.svelte';
+export * from './GeoSpline.svelte';
+export { default as GeoTile } from './GeoTile.svelte';
+export * from './GeoTile.svelte';
+export { default as GeoVisible } from './GeoVisible.svelte';
+export * from './GeoVisible.svelte';
+export { default as Graticule } from './Graticule.svelte';
+export * from './Graticule.svelte';
+export { default as TileImage } from './TileImage.svelte';
+export * from './TileImage.svelte';

package/dist/components/geo/index.js

@@ -0,0 +1,26 @@
+export { default as GeoCircle } from './GeoCircle.svelte';
+export * from './GeoCircle.svelte';
+export { default as GeoClipPath } from './GeoClipPath.svelte';
+export * from './GeoClipPath.svelte';
+export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
+export * from './GeoEdgeFade.svelte';
+export { default as GeoLegend } from './GeoLegend.svelte';
+export * from './GeoLegend.svelte';
+export { default as GeoPath } from './GeoPath.svelte';
+export * from './GeoPath.svelte';
+export { default as GeoPoint } from './GeoPoint.svelte';
+export * from './GeoPoint.svelte';
+export { default as GeoProjection } from './GeoProjection.svelte';
+export * from './GeoProjection.svelte';
+export { default as GeoRaster } from './GeoRaster.svelte';
+export * from './GeoRaster.svelte';
+export { default as GeoSpline } from './GeoSpline.svelte';
+export * from './GeoSpline.svelte';
+export { default as GeoTile } from './GeoTile.svelte';
+export * from './GeoTile.svelte';
+export { default as GeoVisible } from './GeoVisible.svelte';
+export * from './GeoVisible.svelte';
+export { default as Graticule } from './Graticule.svelte';
+export * from './Graticule.svelte';
+export { default as TileImage } from './TileImage.svelte';
+export * from './TileImage.svelte';

package/dist/components/graph/Chord.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { ChordGroup, Chord } from 'd3-chord';
+
+  export type ChordProps = {
+    /**
+     * The input adjacency matrix for the chord layout.
+     */
+    matrix: number[][];
+
+    /**
+     * The variant of chord layout to use.
+     *
+     * - `'default'` - symmetric chord layout (d3.chord)
+     * - `'directed'` - directed/asymmetric chord layout (d3.chordDirected)
+     * - `'transpose'` - transpose chord layout, highlights outgoing (d3.chordTranspose)
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'directed' | 'transpose';
+
+    /**
+     * The angular padding between adjacent groups in radians.
+     *
+     * @default 0
+     */
+    padAngle?: number;
+
+    /**
+     * A comparator function to sort groups.
+     */
+    sortGroups?: ((a: number, b: number) => number) | null;
+
+    /**
+     * A comparator function to sort subgroups within each group.
+     */
+    sortSubgroups?: ((a: number, b: number) => number) | null;
+
+    /**
+     * A comparator function to sort chords.
+     */
+    sortChords?: ((a: number, b: number) => number) | null;
+
+    /**
+     * Multiplier for inner radius relative to outerRadius.
+     *
+     * @default 0.9
+     */
+    innerRadiusRatio?: number;
+
+    children?: Snippet<
+      [
+        {
+          groups: ChordGroup[];
+          chords: Chord[];
+          innerRadius: number;
+          outerRadius: number;
+        },
+      ]
+    >;
+  };
+</script>
+
+<script lang="ts">
+  import { chord as d3Chord, chordDirected, chordTranspose } from 'd3-chord';
+
+  import { getChartContext } from '../../contexts/chart.js';
+
+  let {
+    matrix,
+    variant = 'default',
+    padAngle = 0,
+    sortGroups = null,
+    sortSubgroups = null,
+    sortChords = null,
+    innerRadiusRatio = 0.9,
+    children,
+  }: ChordProps = $props();
+
+  const ctx = getChartContext();
+
+  const outerRadius = $derived(Math.max(0, Math.min(ctx.width, ctx.height) / 2));
+  const innerRadius = $derived(outerRadius * innerRadiusRatio);
+
+  const chordLayout = $derived.by(() => {
+    const generator =
+      variant === 'directed'
+        ? chordDirected()
+        : variant === 'transpose'
+          ? chordTranspose()
+          : d3Chord();
+
+    generator.padAngle(padAngle);
+
+    if (sortGroups != null) {
+      generator.sortGroups(sortGroups);
+    }
+    if (sortSubgroups != null) {
+      generator.sortSubgroups(sortSubgroups);
+    }
+    if (sortChords != null) {
+      generator.sortChords(sortChords);
+    }
+
+    return generator(matrix);
+  });
+</script>
+
+{@render children?.({
+  groups: chordLayout.groups,
+  chords: chordLayout,
+  innerRadius,
+  outerRadius,
+})}

package/dist/components/graph/Chord.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import type { ChordGroup, Chord } from 'd3-chord';
+export type ChordProps = {
+    /**
+     * The input adjacency matrix for the chord layout.
+     */
+    matrix: number[][];
+    /**
+     * The variant of chord layout to use.
+     *
+     * - `'default'` - symmetric chord layout (d3.chord)
+     * - `'directed'` - directed/asymmetric chord layout (d3.chordDirected)
+     * - `'transpose'` - transpose chord layout, highlights outgoing (d3.chordTranspose)
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'directed' | 'transpose';
+    /**
+     * The angular padding between adjacent groups in radians.
+     *
+     * @default 0
+     */
+    padAngle?: number;
+    /**
+     * A comparator function to sort groups.
+     */
+    sortGroups?: ((a: number, b: number) => number) | null;
+    /**
+     * A comparator function to sort subgroups within each group.
+     */
+    sortSubgroups?: ((a: number, b: number) => number) | null;
+    /**
+     * A comparator function to sort chords.
+     */
+    sortChords?: ((a: number, b: number) => number) | null;
+    /**
+     * Multiplier for inner radius relative to outerRadius.
+     *
+     * @default 0.9
+     */
+    innerRadiusRatio?: number;
+    children?: Snippet<[
+        {
+            groups: ChordGroup[];
+            chords: Chord[];
+            innerRadius: number;
+            outerRadius: number;
+        }
+    ]>;
+};
+declare const Chord: import("svelte").Component<ChordProps, {}, "">;
+type Chord = ReturnType<typeof Chord>;
+export default Chord;

package/dist/components/{Dagre.svelte → graph/Dagre.svelte}

@@ -2,7 +2,7 @@
   import { type Snippet } from 'svelte';
   import dagre, { type Edge, type EdgeConfig, type GraphEdge } from '@dagrejs/dagre';
 
-  import { dagreGraph } from '../utils/graph/dagre.js';
+  import { dagreGraph } from '../../utils/graph/dagre.js';
 
   export type DagreGraphData = {
     nodes: Array<{ id: string; parent?: string; label?: string | dagre.Label }>;
@@ -171,6 +171,11 @@
 </script>
 
 <script lang="ts">
+  import { getChartContext } from '../../contexts/chart.js';
+
+  const ctx = getChartContext();
+  ctx.registerComponent({ name: 'Dagre', kind: 'composite-mark' });
+
   let {
     data,
     nodes = (d: any) => d.nodes,