layerchart 2.0.0-next.4 → 2.0.0-next.40

package/dist/components/MonthPath.svelte

@@ -20,30 +20,32 @@
      *
      * @bindable
      */
-    ref?: SVGPathElement;
+    pathRef?: SVGPathElement;
   };
 
   export type MonthPathProps = MonthPathPropsWithoutHTML &
-    Without<SVGAttributes<SVGPathElement>, 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>;
 </script>
 
 <script lang="ts">
   import { timeWeek, timeYear } from 'd3-time';
-  import { endOfMonth } from 'date-fns';
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../utils/attributes.js';
+  import { endOfInterval } from '@layerstack/utils';
+  import Spline, { type SplinePropsWithoutHTML } from './Spline.svelte';
 
   let {
     date,
     cellSize: cellSizeProp,
-    ref: refProp = $bindable(),
+    pathRef: pathRefProp = $bindable(),
     class: className,
     ...restProps
   }: MonthPathProps = $props();
 
-  let ref = $state<SVGPathElement>();
+  let pathRef = $state<SVGPathElement>();
   $effect.pre(() => {
-    refProp = ref;
+    pathRefProp = pathRef;
   });
 
   const cellSize = $derived(
@@ -55,7 +57,7 @@
   const startWeek = $derived(timeWeek.count(timeYear(date), date));
 
   // end of month
-  const monthEnd = $derived(endOfMonth(date));
+  const monthEnd = $derived(endOfInterval('month', date));
   const endDayOfWeek = $derived(monthEnd.getDay());
   const endWeek = $derived(timeWeek.count(timeYear(monthEnd), monthEnd));
 
@@ -68,10 +70,22 @@
   `);
 </script>
 
-<path
-  bind:this={ref}
-  d={pathData}
+<Spline
+  bind:pathRef
+  {pathData}
   fill="none"
-  class={cls(layerClass('month-path'), 'stroke-surface-content/20', className)}
+  class={cls('lc-month-path', className)}
   {...restProps}
 />
+
+<style>
+  @layer components {
+    :global(:where(.lc-month-path)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+    }
+  }
+</style>

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

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

package/dist/components/MotionPath.svelte

@@ -100,7 +100,7 @@
     {fill}
     {rotate}
     bind:this={ref}
-    {...extractLayerProps(restProps, 'motion-path')}
+    {...extractLayerProps(restProps, 'lc-motion-path')}
   >
     <mpath href="#{pathId}" />
   </animateMotion>

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

@@ -25,10 +25,17 @@ export type PackProps<T> = {
         nodes: HierarchyCircularNode<T>[];
     }]>;
 };
+declare function $$render<T>(): {
+    props: PackProps<T>;
+    exports: {};
+    bindings: "nodes";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): PackProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "nodes";
     exports(): {};
 }

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

@@ -32,10 +32,17 @@ export type PartitionProps<T> = {
         nodes: HierarchyRectangularNode<T>[];
     }]>;
 };
+declare function $$render<T>(): {
+    props: PartitionProps<T>;
+    exports: {};
+    bindings: "nodes";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): PartitionProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "nodes";
     exports(): {};
 }

package/dist/components/Pattern.svelte

@@ -154,7 +154,7 @@
     const lineDefs = Array.isArray(linesProp) ? linesProp : linesProp === true ? [{}] : [linesProp];
     for (const line of lineDefs) {
       // const spacing = Math.abs(line.spacing);
-      const stroke = line.color ?? 'var(--color-surface-content)';
+      const stroke = line.color ?? 'var(--color-surface-content, currentColor)';
       const strokeWidth = line.width ?? 1;
       const opacity = line.opacity ?? 1;
 
@@ -217,7 +217,7 @@
             cx: size / 4,
             cy: size / 4,
             r: circle.radius ?? 1,
-            fill: circle.color ?? 'var(--color-surface-content)',
+            fill: circle.color ?? 'var(--color-surface-content, currentColor)',
             opacity: circle.opacity ?? 1,
           },
           {
@@ -225,7 +225,7 @@
             cx: (size * 3) / 4,
             cy: (size * 3) / 4,
             r: circle.radius ?? 1,
-            fill: circle.color ?? 'var(--color-surface-content)',
+            fill: circle.color ?? 'var(--color-surface-content, currentColor)',
             opacity: circle.opacity ?? 1,
           }
         );
@@ -235,7 +235,7 @@
           cx: size / 2,
           cy: size / 2,
           r: circle.radius ?? 1,
-          fill: circle.color ?? 'var(--color-surface-content)',
+          fill: circle.color ?? 'var(--color-surface-content, currentColor)',
           opacity: circle.opacity ?? 1,
         });
       }
@@ -265,7 +265,7 @@
       {width}
       {height}
       patternUnits="userSpaceOnUse"
-      {...extractLayerProps(restProps, 'pattern')}
+      {...extractLayerProps(restProps, 'lc-pattern')}
     >
       {#if patternContent}
         {@render patternContent?.()}

package/dist/components/Pie.svelte

@@ -81,7 +81,6 @@
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import { getChartContext } from './Chart.svelte';
   import type { Snippet } from 'svelte';
-  import { layerClass } from '../utils/attributes.js';
 
   /*
     TODO:
@@ -140,7 +139,7 @@
 {:else}
   {#each arcs as arc}
     <Arc
-      class={layerClass('pie-arc')}
+      class="lc-pie-arc"
       startAngle={arc.startAngle}
       endAngle={arc.endAngle}
       padAngle={arc.padAngle}

package/dist/components/Points.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type { CommonStyleProps, Without } from '../utils/types.js';
-  import type { ComponentProps, Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
   export type Point = { x: number; y: number; r: number; xValue: any; yValue: any; data: any };
   type Offset = number | ((value: number, context: any) => number) | undefined;
@@ -37,13 +37,6 @@
      */
     offsetY?: Offset;
 
-    /**
-     * Enable showing links between related points (array x/y accessors)
-     *
-     * @default false
-     */
-    links?: boolean | Partial<ComponentProps<typeof Link>>;
-
     children?: Snippet<[{ points: Point[] }]>;
   } & CommonStyleProps;
 
@@ -52,11 +45,9 @@
 </script>
 
 <script lang="ts">
-  import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
 
   import Circle, { type CircleProps } from './Circle.svelte';
-  import Link from './Link.svelte';
   import { isScaleBand, type AnyScale } from '../utils/scales.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
@@ -71,7 +62,6 @@
     r = 5,
     offsetX,
     offsetY,
-    links = false,
     fill,
     fillOpacity,
     stroke,
@@ -103,9 +93,14 @@
     const scaledX: number = ctx.xScale(xVal);
     const scaledY: number = ctx.yScale(yVal);
 
+    const x = scaledX + getOffset(scaledX, offsetX, ctx.xScale);
+    const y = scaledY + getOffset(scaledY, offsetY, ctx.yScale);
+
+    const radialPoint = pointRadial(x, y);
+
     return {
-      x: scaledX + getOffset(scaledX, offsetX, ctx.xScale),
-      y: scaledY + getOffset(scaledY, offsetY, ctx.yScale),
+      x: ctx.radial ? radialPoint[0] : x,
+      y: ctx.radial ? radialPoint[1] : y,
       r: ctx.config.r ? ctx.rGet(d) : r,
       xValue: xVal,
       yValue: yVal,
@@ -131,78 +126,22 @@
       return [];
     }) as Point[]
   );
-
-  const _links = $derived(
-    pointsData.flatMap((d: any) => {
-      const xValue = xAccessor(d);
-      const yValue = yAccessor(d);
-
-      if (Array.isArray(xValue)) {
-        /*
-				x={["prop1" ,"prop2"]}
-				y="prop3"
-			*/
-        const [xMin, xMax] = extent(ctx.xGet(d)) as unknown as [number, number];
-        const y = ctx.yGet(d) + getOffset(ctx.yGet(d), offsetY, ctx.yScale);
-        return {
-          source: {
-            x: xMin + getOffset(xMin, offsetX, ctx.xScale) + (ctx.config.r ? ctx.rGet(d) : r),
-            y,
-          },
-          target: {
-            x: xMax + getOffset(xMax, offsetX, ctx.xScale) - (ctx.config.r ? ctx.rGet(d) : r),
-            y: y,
-          },
-          data: d,
-        };
-      } else if (Array.isArray(yValue)) {
-        /*
-				x="prop1"
-				y={["prop2" ,"prop3"]}
-			*/
-        const x = ctx.xGet(d) + getOffset(ctx.xGet(d), offsetX, ctx.xScale);
-        const [yMin, yMax] = extent(ctx.yGet(d)) as unknown as [number, number];
-        return {
-          source: {
-            x: x,
-            y: yMin + getOffset(yMin, offsetY, ctx.yScale),
-          },
-          target: {
-            x: x,
-            y: yMax + getOffset(yMax, offsetY, ctx.yScale),
-          },
-          data: d,
-        };
-      }
-    })
-  );
 </script>
 
 {#if children}
   {@render children({ points })}
 {:else}
-  {#if links}
-    {#each _links as link}
-      <Link
-        data={link}
-        stroke={fill ?? (ctx.config.c ? ctx.cGet(link.data) : null)}
-        {...extractLayerProps(links, 'points-link')}
-      />
-    {/each}
-  {/if}
-
   {#each points as point}
-    {@const radialPoint = pointRadial(point.x, point.y)}
     <Circle
-      cx={ctx.radial ? radialPoint[0] : point.x}
-      cy={ctx.radial ? radialPoint[1] : point.y}
+      cx={point.x}
+      cy={point.y}
       r={point.r}
       fill={fill ?? (ctx.config.c ? ctx.cGet(point.data) : null)}
       {fillOpacity}
       {stroke}
       {strokeWidth}
       {opacity}
-      {...extractLayerProps(restProps, 'point')}
+      {...extractLayerProps(restProps, 'lc-point')}
     />
   {/each}
 {/if}

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

@@ -1,5 +1,5 @@
 import type { CommonStyleProps, Without } from '../utils/types.js';
-import type { ComponentProps, Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 export type Point = {
     x: number;
     y: number;
@@ -36,19 +36,12 @@ export type PointsPropsWithoutHTML = {
      * The offset of the point in the y direction
      */
     offsetY?: Offset;
-    /**
-     * Enable showing links between related points (array x/y accessors)
-     *
-     * @default false
-     */
-    links?: boolean | Partial<ComponentProps<typeof Link>>;
     children?: Snippet<[{
         points: Point[];
     }]>;
 } & CommonStyleProps;
 export type PointsProps = PointsPropsWithoutHTML & Omit<Without<CircleProps, PointsPropsWithoutHTML>, 'ref'>;
 import { type CircleProps } from './Circle.svelte';
-import Link from './Link.svelte';
 import { type Accessor } from '../utils/common.js';
 declare const Points: import("svelte").Component<PointsProps, {}, "">;
 type Points = ReturnType<typeof Points>;

package/dist/components/Polygon.svelte

@@ -0,0 +1,309 @@
+<script lang="ts" module>
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+
+  export type PolygonPropsWithoutHTML = {
+    /**
+     * The center x position of the polygon.
+     *
+     * @default 0
+     */
+    cx?: number;
+
+    /**
+     * The initial center x position of the polygon.
+     *
+     * @default cx
+     */
+    initialCx?: number;
+
+    /**
+     * The center y position of the polygon.
+     *
+     * @default 0
+     */
+    cy?: number;
+
+    /**
+     * The initial center y position of the polygon.
+     *
+     * @default cy
+     */
+    initialCy?: number;
+
+    /**
+     * The radius of the polygon.
+     *
+     * @default 1
+     */
+    r?: number;
+
+    /**
+     * The initial radius of the polygon.
+     *
+     * @default r
+     */
+    initialR?: number;
+
+    /**
+     * The number of points or explicit points to create the polygon.
+     *
+     * @default 4
+     */
+    points?: number | { x: number; y: number }[];
+
+    /**
+     * The radius of the curve for rounded corners.
+     *
+     * @default 0
+     */
+    cornerRadius?: number;
+
+    /**
+     * The rotation of the polygon.
+     *
+     * @default 0
+     */
+    rotate?: number;
+
+    /**
+     * The percent to inset the odd points of the star (<1 inset, >1 outset)
+     *
+     * @default 0
+     */
+    inset?: number;
+
+    /**
+     * The horizontal stretch factor of the polygon.
+     *
+     * @default 1
+     */
+    scaleX?: number;
+
+    /**
+     * The vertical stretch factor of the polygon.
+     *
+     * @default 1
+     */
+    scaleY?: number;
+
+    /**
+     * The skew angle in degrees along the X axis.
+     *
+     * @default 0
+     */
+    skewX?: number;
+
+    /**
+     * The skew angle in degrees along the Y axis.
+     *
+     * @default 0
+     */
+    skewY?: number;
+
+    /**
+     * The tilt factor for x-coordinates.
+     *
+     * @default 1
+     */
+    tiltX?: number;
+
+    /**
+     * The tilt factor for y-coordinates.
+     *
+     * @default 1
+     */
+    tiltY?: number;
+
+    /**
+     * A bindable reference to the `<path>` element
+     *
+     * @bindable
+     */
+    ref?: SVGPathElement;
+
+    motion?: MotionProp;
+  } & CommonStyleProps;
+
+  export type PolygonProps = PolygonPropsWithoutHTML &
+    Without<SVGAttributes<Element>, PolygonPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements';
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from 'lodash-es';
+  import { interpolatePath } from 'd3-interpolate-path';
+
+  import { getRenderContext } from './Chart.svelte';
+  import {
+    createMotion,
+    extractTweenConfig,
+    type MotionProp,
+    type ResolvedMotion,
+  } from '../utils/motion.svelte.js';
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
+  import { createKey } from '../utils/key.svelte.js';
+  import { polygon } from '../utils/shape.js';
+  import { roundedPolygonPath } from '../utils/path.js';
+
+  let {
+    cx = 0,
+    initialCx: initialCxProp,
+    cy = 0,
+    initialCy: initialCyProp,
+    r = 1,
+    initialR: initialRProp,
+    points = 4,
+    cornerRadius = 0,
+    rotate = 0,
+    inset = 0,
+    scaleX = 1,
+    scaleY = 1,
+    skewX = 0,
+    skewY = 0,
+    tiltX = 0,
+    tiltY = 0,
+    motion,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ref: refProp = $bindable(),
+    ...restProps
+  }: PolygonProps = $props();
+
+  let ref = $state<SVGPathElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  const initialCx = initialCxProp ?? cx;
+  const initialCy = initialCyProp ?? cy;
+  const initialR = initialRProp ?? r;
+
+  const motionCx = createMotion(initialCx, () => cx, motion);
+  const motionCy = createMotion(initialCy, () => cy, motion);
+  const motionR = createMotion(initialR, () => r, motion);
+
+  let polygonPoints = $derived(
+    typeof points === 'number'
+      ? polygon({
+          cx: motionCx.current,
+          cy: motionCy.current,
+          count: points,
+          radius: motionR.current,
+          rotate,
+          inset,
+          scaleX,
+          scaleY,
+          skewX,
+          skewY,
+          tiltX,
+          tiltY,
+        })
+      : points
+  );
+  let d = $derived(roundedPolygonPath(polygonPoints, cornerRadius));
+
+  const extractedTween = extractTweenConfig(motion);
+
+  const tweenedOptions: ResolvedMotion | undefined = extractedTween
+    ? {
+        type: extractedTween.type,
+        options: { interpolate: interpolatePath, ...extractedTween.options },
+      }
+    : undefined;
+
+  const tweenedState = createMotion(null, () => d, tweenedOptions);
+
+  const renderCtx = getRenderContext();
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    renderPathData(
+      ctx,
+      tweenedState.current,
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
+            classes: cls('lc-polygon', className),
+          }
+    );
+  }
+
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  const fillKey = createKey(() => fill);
+  const strokeKey = createKey(() => stroke);
+
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
+      name: 'Polygon',
+      render,
+      events: {
+        click: restProps.onclick,
+        pointerenter: restProps.onpointerenter,
+        pointermove: restProps.onpointermove,
+        pointerleave: restProps.onpointerleave,
+        pointerdown: restProps.onpointerdown,
+        pointerover: restProps.onpointerover,
+        pointerout: restProps.onpointerout,
+        touchmove: restProps.ontouchmove,
+      },
+      deps: () => [
+        fillKey.current,
+        fillOpacity,
+        strokeKey.current,
+        strokeWidth,
+        opacity,
+        className,
+        tweenedState.current,
+      ],
+    });
+  }
+</script>
+
+{#if renderCtx === 'svg'}
+  <path
+    d={tweenedState.current}
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    {opacity}
+    class={cls('lc-polygon', className)}
+    {...restProps}
+    bind:this={ref}
+  />
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-polygon)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-polygon, svg.lc-polygon):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-polygon, svg.lc-polygon):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-polygon):not([background-color])) {
+      background-color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-polygon):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>