layerchart 2.0.0-next.44 → 2.0.0-next.45

package/dist/components/Graticule.svelte

@@ -6,7 +6,8 @@
   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 &
@@ -18,13 +19,9 @@
   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="lc-graticule-g">

package/dist/components/Graticule.svelte.d.ts

@@ -4,7 +4,8 @@ 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/Grid.svelte

@@ -97,7 +97,7 @@
   import Line from './Line.svelte';
   import Rule from './Rule.svelte';
   import Spline from './Spline.svelte';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import { extractLayerProps } from '../utils/attributes.js';
   import { autoTickVals, type TicksConfig } from '../utils/ticks.js';
 

package/dist/components/Group.svelte

@@ -83,10 +83,10 @@
   import { fade } from 'svelte/transition';
   import { cubicIn } from 'svelte/easing';
 
-  import { getRenderContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
+  import { registerCanvasComponent } from './layers/Canvas.svelte';
 
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
 
   const ctx = getChartContext();
 
@@ -134,9 +134,9 @@
     }
   });
 
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
-  if (renderCtx === 'canvas') {
+  if (layerCtx === 'canvas') {
     registerCanvasComponent({
       name: 'Group',
       render: (ctx) => {
@@ -170,9 +170,9 @@
   };
 </script>
 
-{#if renderCtx === 'canvas'}
+{#if layerCtx === 'canvas'}
   {@render children?.()}
-{:else if renderCtx === 'svg'}
+{:else if layerCtx === 'svg'}
   <g
     style:transform
     class={['lc-group-g', className]}
@@ -184,7 +184,7 @@
   >
     {@render children?.()}
   </g>
-{:else if renderCtx === 'html'}
+{:else if layerCtx === 'html'}
   <div
     bind:this={ref}
     style:transform

package/dist/components/Highlight.svelte

@@ -122,8 +122,8 @@
 
   import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
   import { asAny } from '../utils/types.js';
-  import { getChartContext } from './Chart.svelte';
-  import { getTooltipContext } from './tooltip/TooltipContext.svelte';
+  import { getChartContext } from '../contexts/chart.js';
+  import { getTooltipContext } from '../contexts/tooltip.js';
   import { extractLayerProps } from '../utils/attributes.js';
   import type { MotionProp } from '../utils/motion.svelte.js';
   import Arc from './Arc.svelte';
@@ -261,27 +261,28 @@
       // x area
       if (Array.isArray(xCoord)) {
         // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+        tmpArea.x = min(xCoord);
         tmpArea.width = max(xCoord) - min(xCoord); // Use first/last values for width
       } else if (isScaleBand(ctx.xScale)) {
+        tmpArea.x = xCoord - (ctx.xScale.padding() * ctx.xScale.step()) / 2;
         tmpArea.width = ctx.xScale.step();
       } else if (ctx.xInterval) {
         // x-axis time scale with interval
         const start = ctx.xInterval.floor(xValue);
         const end = ctx.xInterval.offset(start);
-        tmpArea.width = ctx.xScale(end) - ctx.xScale(start);
+        const xStart = ctx.xScale(start);
+        const xEnd = ctx.xScale(end);
+        tmpArea.x = Math.min(xStart, xEnd);
+        tmpArea.width = Math.abs(xEnd - xStart);
       } else {
         // Find width to next data point
         const index = ctx.flatData.findIndex((d) => Number(x(d)) === Number(x(highlightData)));
         const isLastPoint = index + 1 === ctx.flatData.length;
         const nextDataPoint = isLastPoint ? max(ctx.xDomain) : x(ctx.flatData[index + 1]);
+        tmpArea.x = xCoord;
         tmpArea.width = (ctx.xScale(nextDataPoint) ?? 0) - (xCoord ?? 0);
       }
 
-      // If array, use left-most value for top left of rect
-      tmpArea.x =
-        (Array.isArray(xCoord) ? min(xCoord) : xCoord) -
-        (isScaleBand(ctx.xScale) ? (ctx.xScale.padding() * ctx.xScale.step()) / 2 : 0);
-
       if (axis === 'x') {
         tmpArea.y = min(ctx.yRange) as unknown as number;
         tmpArea.height = (max(ctx.yRange) - min(ctx.yRange)) as unknown as number;
@@ -292,27 +293,28 @@
       // y area
       if (Array.isArray(yCoord)) {
         // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
-        tmpArea.height = max(yCoord) - min(yCoord); // Use first/last values for width
+        tmpArea.y = min(yCoord);
+        tmpArea.height = max(yCoord) - min(yCoord); // Use first/last values for height
       } else if (isScaleBand(ctx.yScale)) {
+        tmpArea.y = yCoord - (ctx.yScale.padding() * ctx.yScale.step()) / 2;
         tmpArea.height = ctx.yScale.step();
       } else if (ctx.yInterval) {
         // y-axis time scale with interval
         const start = ctx.yInterval.floor(yValue);
         const end = ctx.yInterval.offset(start);
-        tmpArea.height = ctx.yScale(end) - ctx.yScale(start);
+        const yStart = ctx.yScale(start);
+        const yEnd = ctx.yScale(end);
+        tmpArea.y = Math.min(yStart, yEnd);
+        tmpArea.height = Math.abs(yEnd - yStart);
       } else {
-        // Find width to next data point
+        // Find height to next data point
         const index = ctx.flatData.findIndex((d) => Number(y(d)) === Number(y(highlightData)));
         const isLastPoint = index + 1 === ctx.flatData.length;
         const nextDataPoint = isLastPoint ? max(ctx.yDomain) : y(ctx.flatData[index + 1]);
+        tmpArea.y = yCoord;
         tmpArea.height = (ctx.yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
       }
 
-      // If array, use left-most value for top left of rect
-      tmpArea.y =
-        (Array.isArray(yCoord) ? min(yCoord) : yCoord) -
-        (isScaleBand(ctx.yScale) ? (ctx.yScale.padding() * ctx.yScale.step()) / 2 : 0);
-
       if (axis === 'y') {
         tmpArea.width = max(ctx.xRange) as unknown as number;
       }

package/dist/components/Hull.svelte

@@ -63,8 +63,8 @@
   import GeoPath from './GeoPath.svelte';
   import Group, { type GroupProps } from './Group.svelte';
   import Spline from './Spline.svelte';
-  import { getChartContext } from './Chart.svelte';
-  import { getGeoContext } from './GeoContext.svelte';
+  import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
 
   let {
     data,

package/dist/components/Labels.svelte

@@ -72,7 +72,7 @@
   import { cls } from '@layerstack/tailwind';
 
   import { isScaleBand } from '../utils/scales.svelte.js';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import Group from './Group.svelte';
   import { extractLayerProps } from '../utils/attributes.js';
 

package/dist/components/Legend.svelte

@@ -120,7 +120,7 @@
   import ColorRamp from './ColorRamp.svelte';
   import { cls } from '@layerstack/tailwind';
   import type { AnyScale } from '../utils/scales.svelte.js';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import { extractLayerProps } from '../utils/attributes.js';
   import { resolveMaybeFn } from '../utils/common.js';
 

package/dist/components/Line.svelte

@@ -92,10 +92,10 @@
 
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { merge } from 'lodash-es';
+  import { merge } from '@layerstack/utils';
 
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
-  import { getRenderContext } from './Chart.svelte';
+  import { registerCanvasComponent } from './layers/Canvas.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
 
   import { createKey } from '../utils/key.svelte.js';
   import { createId } from '../utils/createId.js';
@@ -134,7 +134,7 @@
   const motionX2 = createMotion(initialX2, () => x2, motion);
   const motionY2 = createMotion(initialY2, () => y2, motion);
 
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
   function render(
     ctx: CanvasRenderingContext2D,
@@ -149,6 +149,7 @@
         : {
             styles: { fill, stroke, strokeWidth, opacity },
             classes: cls('lc-line', className),
+            style: restProps.style as string | undefined,
           }
     );
   }
@@ -156,7 +157,7 @@
   const fillKey = createKey(() => fill);
   const strokeKey = createKey(() => stroke);
 
-  if (renderCtx === 'canvas') {
+  if (layerCtx === 'canvas') {
     registerCanvasComponent({
       name: 'Line',
       render,
@@ -176,12 +177,13 @@
         strokeWidth,
         opacity,
         className,
+        restProps.style,
       ],
     });
   }
 </script>
 
-{#if renderCtx === 'svg'}
+{#if layerCtx === 'svg'}
   <line
     x1={motionX1.current}
     y1={motionY1.current}
@@ -201,7 +203,7 @@
   <MarkerWrapper id={markerStartId} marker={markerStart ?? marker} />
   <MarkerWrapper id={markerMidId} marker={markerMid ?? marker} />
   <MarkerWrapper id={markerEndId} marker={markerEnd ?? marker} />
-{:else if renderCtx === 'html'}
+{:else if layerCtx === 'html'}
   {@const { angle, length } = pointsToAngleAndLength(
     { x: motionX1.current, y: motionY1.current },
     { x: motionX2.current, y: motionY2.current }

package/dist/components/LinearGradient.svelte

@@ -76,8 +76,9 @@
 </script>
 
 <script lang="ts">
-  import { getChartContext, getRenderContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { registerCanvasComponent } from './layers/Canvas.svelte';
   import { createLinearGradient, getComputedStyles } from '../utils/canvas.js';
   import { parsePercent } from '../utils/math.js';
   import { createId } from '../utils/createId.js';
@@ -109,7 +110,7 @@
   });
 
   const ctx = getChartContext();
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
   let canvasGradient = $state<CanvasGradient>();
 
@@ -173,7 +174,7 @@
     canvasGradient = gradient;
   }
 
-  if (renderCtx === 'canvas') {
+  if (layerCtx === 'canvas') {
     registerCanvasComponent({
       name: 'Gradient',
       render,
@@ -182,13 +183,13 @@
   }
 </script>
 
-{#if renderCtx === 'canvas'}
+{#if layerCtx === 'canvas'}
   <!--
 	TODO: we can probably pass the context to coerce this type so we don't need a bunch
 	of predicates to check if the gradient is a CanvasGradient or not...
 	-->
   {@render children?.({ id, gradient: asAny(canvasGradient) })}
-{:else if renderCtx === 'svg'}
+{:else if layerCtx === 'svg'}
   <defs>
     <linearGradient
       bind:this={ref}
@@ -224,6 +225,6 @@
   </defs>
 
   {@render children?.({ id, gradient: `url(#${id})` })}
-{:else if renderCtx === 'html'}
+{:else if layerCtx === 'html'}
   {@render children?.({ id, gradient: createCSSGradient() })}
 {/if}

package/dist/components/MonthPath.svelte

@@ -29,16 +29,16 @@
   };
 
   export type MonthPathProps = MonthPathPropsWithoutHTML &
-    // we omit the spline props to avoid conflicts with attribute names since we are
-    // passing them through to `<Spline />`
-    Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML & SplinePropsWithoutHTML>;
+    // we omit the path props to avoid conflicts with attribute names since we are
+    // passing them through to `<Path />`
+    Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML & PathPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
   import { timeWeek } from 'd3-time';
   import { cls } from '@layerstack/tailwind';
   import { endOfInterval } from '@layerstack/utils';
-  import Spline, { type SplinePropsWithoutHTML } from './Spline.svelte';
+  import Path, { type PathPropsWithoutHTML } from './Path.svelte';
 
   let {
     date,
@@ -76,13 +76,7 @@
   `);
 </script>
 
-<Spline
-  bind:pathRef
-  {pathData}
-  fill="none"
-  class={cls('lc-month-path', className)}
-  {...restProps}
-/>
+<Path bind:pathRef {pathData} fill="none" class={cls('lc-month-path', className)} {...restProps} />
 
 <style>
   @layer components {

package/dist/components/MonthPath.svelte.d.ts

@@ -22,8 +22,8 @@ export type MonthPathPropsWithoutHTML = {
      */
     pathRef?: SVGPathElement;
 };
-export type MonthPathProps = MonthPathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML & SplinePropsWithoutHTML>;
-import { type SplinePropsWithoutHTML } from './Spline.svelte';
+export type MonthPathProps = MonthPathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML & PathPropsWithoutHTML>;
+import { type PathPropsWithoutHTML } from './Path.svelte';
 declare const MonthPath: import("svelte").Component<MonthPathProps, {}, "pathRef">;
 type MonthPath = ReturnType<typeof MonthPath>;
 export default MonthPath;

package/dist/components/Pack.svelte

@@ -3,6 +3,9 @@
   import type { Snippet } from 'svelte';
 
   export type PackProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
+
     /**
      * The size of the pack layout.
      */
@@ -15,11 +18,6 @@
      */
     padding?: number;
 
-    /**
-     * The hierarchy data to be packed.
-     */
-    hierarchy: HierarchyNode<T>;
-
     /**
      * A bindable reference to the computed packed nodes.
      *
@@ -32,7 +30,7 @@
 </script>
 
 <script lang="ts" generics="T">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
 
   const ctx = getChartContext();
 

package/dist/components/Pack.svelte.d.ts

@@ -1,6 +1,8 @@
 import { type HierarchyCircularNode, type HierarchyNode } from 'd3-hierarchy';
 import type { Snippet } from 'svelte';
 export type PackProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
     /**
      * The size of the pack layout.
      */
@@ -11,10 +13,6 @@ export type PackProps<T> = {
      * @see https://github.com/d3/d3-hierarchy#pack_padding
      */
     padding?: number;
-    /**
-     * The hierarchy data to be packed.
-     */
-    hierarchy: HierarchyNode<T>;
     /**
      * A bindable reference to the computed packed nodes.
      *

package/dist/components/Partition.svelte

@@ -7,6 +7,9 @@
   import type { Snippet } from 'svelte';
 
   export type PartitionProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
+
     /**
      * The orientation of the partition layout.
      *
@@ -31,8 +34,6 @@
      */
     round?: boolean;
 
-    hierarchy: HierarchyNode<T>;
-
     /**
      * A bindable reference to the descendants of the partition layout.
      *
@@ -45,7 +46,7 @@
 </script>
 
 <script lang="ts" generics="T">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
 
   let {
     size,

package/dist/components/Partition.svelte.d.ts

@@ -1,6 +1,8 @@
 import { type HierarchyNode, type HierarchyRectangularNode } from 'd3-hierarchy';
 import type { Snippet } from 'svelte';
 export type PartitionProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
     /**
      * The orientation of the partition layout.
      *
@@ -21,7 +23,6 @@ export type PartitionProps<T> = {
      * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
      */
     round?: boolean;
-    hierarchy: HierarchyNode<T>;
     /**
      * A bindable reference to the descendants of the partition layout.
      *