layerchart 0.18.2 → 0.20.0

package/README.md

@@ -14,7 +14,7 @@ Interactions
 
 SVG
 
-- Basic (Arc, Circle, Group, Line, Path, Text)
+- Basic (Arc, Circle, Group, Line, Spline, Text)
 - Gradients and Patterns
 - ClipPath
 - Multi-line text
@@ -22,3 +22,11 @@ SVG
 Others
 
 - Legends including ColorRamps
+
+## Publishing
+
+- `npm run changeset` for each changelog worthy change
+- `npm run version` to bump `package.json` version based on changesets, materialize changesets into CHANGELOG.md
+- Commit as `Version bump to x.y.z` (TODO: automate)
+- `npm run publish` to publish version to npm
+- `git push --tags` to publish tags to Github

package/dist/components/Area.svelte

@@ -1,22 +1,27 @@
 <script>import { getContext } from 'svelte';
 import { area as d3Area } from 'd3-shape';
-import { min, max } from 'd3-array';
+import { max } from 'd3-array';
 import { interpolatePath } from 'd3-interpolate-path';
+import { cls } from 'svelte-ux';
 import { motionStore } from '../stores/motionStore';
-import Path from './Path.svelte';
+import Spline from './Spline.svelte';
 const { data: contextData, xGet, yGet, yRange } = getContext('LayerCake');
-// Properties to override what is used from context
-export let data = undefined; // TODO: Update Type
+/** Override data instead of using context */
+export let data = undefined;
+/** Pass `<path d={...} />` explicitly instead of calculating from data / context */
+export let pathData = undefined;
+/** Override x accessor */
 export let x = undefined; // TODO: Update Type
+/** Override y0 accessor.  Defaults to max($yRange) */
 export let y0 = undefined; // TODO: Update Type
+/** Override y1 accessor.  Defaults to y accessor */
 export let y1 = undefined; // TODO: Update Type
-export let pathData = undefined;
-export let clipPath = undefined;
+/** Interpolate path data using d3-interpolate-path */
 export let tweened = undefined;
+export let clipPath = undefined;
 export let curve = undefined;
 export let defined = undefined;
-export let color = 'var(--color-blue-500)';
-export let opacity = 0.3;
+/** Enable showing line */
 export let line = false;
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
@@ -35,16 +40,14 @@ $: {
 </script>
 
 {#if line}
-  <Path {data} {curve} {defined} {color} {tweened} {...line} />
+  <Spline {data} {curve} {defined} {tweened} {...typeof line === 'object' ? line : null} />
 {/if}
 
 <path
-  class="path-area"
   d={$tweened_d}
   clip-path={clipPath}
-  fill={color}
-  fill-opacity={opacity}
   {...$$restProps}
+  class={cls('path-area', $$props.class)}
   on:click
   on:mousemove
   on:mouseleave

package/dist/components/AreaStack.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from 'svelte';
 import Area from './Area.svelte';
-import Path from './Path.svelte';
+import Spline from './Spline.svelte';
 const { data, yScale, rGet } = getContext('LayerCake');
 export let curve = undefined;
 export let defined = undefined;
@@ -14,10 +14,10 @@ $: lineData = [...$data].reverse();
 {#if line}
   <g class="line-group">
     {#each lineData as seriesData}
-      <Path
+      <Spline
         data={seriesData}
         y={(d) => $yScale(d[1])}
-        color={$rGet(seriesData)}
+        stroke={$rGet(seriesData)}
         {curve}
         {defined}
         {tweened}
@@ -33,7 +33,7 @@ $: lineData = [...$data].reverse();
       data={seriesData}
       y0={(d) => $yScale(d[0])}
       y1={(d) => $yScale(d[1])}
-      color={$rGet(seriesData)}
+      fill={$rGet(seriesData)}
       {curve}
       {defined}
       {opacity}

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

@@ -1,9 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
+import type { tweened as tweenedStore } from 'svelte/motion';
 import type { CurveFactory } from 'd3-shape';
+import Spline from './Spline.svelte';
 declare const __propDef: {
     props: {
         curve?: CurveFactory | undefined;
-        defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
+        defined?: ComponentProps<Spline>['defined'] | undefined;
         opacity?: number | undefined;
         line?: boolean | any;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

package/dist/components/Chart.svelte

@@ -36,7 +36,7 @@ export let x = undefined;
 export let y = undefined;
 export let yScale = undefined;
 /**
- * xBaseline guaranteed to be visible in xDomain
+ * x value guaranteed to be visible in xDomain.  Useful with optional negative values since `xDomain={[0, null]}` would ignore negative values
  */
 export let xBaseline = null;
 let xDomain = undefined;
@@ -45,7 +45,7 @@ $: if (xBaseline != null) {
     xDomain = [min([xBaseline, ...xValues]), max([xBaseline, ...xValues])];
 }
 /**
- * yBaseline guaranteed to be visible in yDomain
+ * y value guaranteed to be visible in yDomain.  Useful with optional negative values since `yDomain={[0, null]}` would ignore negative values
  */
 export let yBaseline = null;
 let yDomain = undefined;

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

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
     };
     events: {
-        click: MouseEvent;
+        click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/CircleClipPath.svelte

@@ -11,11 +11,6 @@ export let tweened = undefined;
 </script>
 
 <ClipPath {id}>
-  <Circle {cx} {cy} {r} {spring} {tweened} />
+  <Circle slot="clip" {cx} {cy} {r} {spring} {tweened} />
+  <slot {id} />
 </ClipPath>
-
-{#if $$slots.default}
-  <g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave>
-    <slot {id} />
-  </g>
-{/if}

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

@@ -10,10 +10,6 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
-        click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/ClipPath.svelte

@@ -1,10 +1,22 @@
 <script>import { uniqueId } from 'svelte-ux';
 /** Unique id for clipPath */
 export let id = uniqueId('clipPath-');
+/** Use existing path or shape (by id) for clipPath */
+export let useId = undefined;
 </script>
 
 <defs>
   <clipPath {id} {...$$restProps}>
-    <slot {id} />
+    <slot name="clip" {id} />
+
+    {#if useId}
+      <use href="#{useId}" />
+    {/if}
   </clipPath>
 </defs>
+
+{#if $$slots.default}
+  <g style:clip-path="url(#{id})" on:click on:mousemove on:mouseleave on:keydown>
+    <slot {id} {useId} />
+  </g>
+{/if}

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

@@ -3,13 +3,23 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id?: string | undefined;
+        useId?: string | undefined;
     };
     events: {
+        click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        clip: {
+            id: string;
+        };
         default: {
             id: string;
+            useId: string | undefined;
         };
     };
 };

package/dist/components/HighlightLine.svelte

@@ -122,10 +122,7 @@ $: if ($tooltip.data) {
       y1={line.y1}
       x2={line.x2}
       y2={line.y2}
-      stroke="rgba(0,0,0,.5)"
-      stroke-width={2}
-      style="pointerEvents: none"
-      stroke-dasharray="2,2"
+      class="stroke-black/50 stroke-2 [stroke-dasharray:2,2] pointer-events-none"
     />
   {/each}
 
@@ -135,9 +132,8 @@ $: if ($tooltip.data) {
       cx={point.x}
       cy={point.y}
       r={7}
-      fill="rgba(255,255,255,.9)"
+      class="fill-white/90 stroke-2"
       stroke={point.color}
-      stroke-width={2}
     />
     <Circle spring cx={point.x} cy={point.y} r={3} fill={point.color} />
   {/each}

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

@@ -12,7 +12,7 @@ declare const __propDef: {
         tickValues?: any[] | undefined;
         tickFontSize?: number | undefined;
         tickSize?: number | undefined;
-        placement?: ("top" | "bottom" | "left" | "right" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        placement?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         classes?: {
             root?: string | undefined;
             title?: string | undefined;

package/dist/components/MotionPath.svelte

@@ -0,0 +1,44 @@
+<script>import { onMount } from 'svelte';
+import { uniqueId } from 'svelte-ux';
+/** Id of path to move object along */
+export let pathId = uniqueId('motionPathId-');
+/** Id of object to move along path */
+export let objectId = uniqueId('motionObjectId-');
+/** Duration of the animation */
+export let duration;
+/** Number of times the animation will occur */
+export let repeatCount = undefined;
+/** Final state of the animation.  Freeze (last frame) or remove (first frame)
+ * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#animate
+ * */
+export let fill = 'freeze';
+/** Rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation */
+export let rotate = undefined;
+// TODO: Investigate `calcMode:spline`, `keyTimes`, and `keySplines` to work with `svelte/easing`
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/calcMode
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keyTimes
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keySplines
+// https://medium.com/javarevisited/animate-your-scalable-vector-graphics-svg-56f5800cd34b
+// Restart animation anytime the component is remounted (otherwise it only ever plays once)
+let animateEl;
+onMount(() => {
+    animateEl.beginElement();
+});
+</script>
+
+<defs>
+  <animateMotion
+    href="#{objectId}"
+    dur={duration}
+    {repeatCount}
+    {fill}
+    {rotate}
+    bind:this={animateEl}
+  >
+    <mpath href="#{pathId}" />
+  </animateMotion>
+</defs>
+
+{#if $$slots.default}
+  <slot {pathId} {objectId} />
+{/if}

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

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Id of path to move object along */ pathId?: string | undefined;
+        /** Id of object to move along path */ objectId?: string | undefined;
+        /** Duration of the animation */ duration: string;
+        /** Number of times the animation will occur */ repeatCount?: number | 'indefinite' | undefined;
+        /** Final state of the animation.  Freeze (last frame) or remove (first frame)
+           * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#animate
+           * */ fill?: "remove" | "freeze" | undefined;
+        /** Rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation */ rotate?: number | 'auto' | 'auto-reverse' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            pathId: string;
+            objectId: string;
+        };
+    };
+};
+export type MotionPathProps = typeof __propDef.props;
+export type MotionPathEvents = typeof __propDef.events;
+export type MotionPathSlots = typeof __propDef.slots;
+export default class MotionPath extends SvelteComponentTyped<MotionPathProps, MotionPathEvents, MotionPathSlots> {
+}
+export {};

package/dist/components/Point.svelte

@@ -0,0 +1,10 @@
+<script>import { getContext } from 'svelte';
+const context = getContext('LayerCake');
+const { xGet, yGet } = context;
+/** Single data point to translate to x/y */
+export let d;
+$: x = $xGet(d);
+$: y = $yGet(d);
+</script>
+
+<slot {x} {y} />

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Single data point to translate to x/y */ d: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            x: any;
+            y: any;
+        };
+    };
+};
+export type PointProps = typeof __propDef.props;
+export type PointEvents = typeof __propDef.events;
+export type PointSlots = typeof __propDef.slots;
+export default class Point extends SvelteComponentTyped<PointProps, PointEvents, PointSlots> {
+}
+export {};

package/dist/components/RectClipPath.svelte

@@ -12,12 +12,6 @@ export let tweened = undefined;
 </script>
 
 <ClipPath {id}>
-  <Rect {x} {y} {width} {height} {spring} {tweened} />
+  <Rect slot="clip" {x} {y} {width} {height} {spring} {tweened} />
+  <slot {id} />
 </ClipPath>
-
-{#if $$slots.default}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave>
-    <slot {id} />
-  </g>
-{/if}

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

@@ -11,10 +11,6 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
-        click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         nodeId?: ((d: any) => any) | undefined;
         /**
            * see: https://github.com/d3/d3-sankey#alignments
-           */ nodeAlign?: "left" | "right" | "center" | "justify" | ((node: SankeyNode<any, any>, n: number) => number) | undefined;
+           */ nodeAlign?: "center" | "left" | "right" | "justify" | ((node: SankeyNode<any, any>, n: number) => number) | undefined;
         nodeWidth?: number | undefined;
         nodePadding?: number | undefined;
         nodeSort?: undefined;

package/dist/components/Spline.svelte

@@ -0,0 +1,103 @@
+<script>import { getContext, tick } from 'svelte';
+import { writable } from 'svelte/store';
+import { tweened as tweenedStore } from 'svelte/motion';
+import { draw as _drawTransition } from 'svelte/transition';
+import { cubicInOut } from 'svelte/easing';
+import { line as d3Line } from 'd3-shape';
+// import { interpolateString } from 'd3-interpolate';
+import { interpolatePath } from 'd3-interpolate-path';
+import { cls } from 'svelte-ux';
+import { motionStore } from '../stores/motionStore';
+import Group from './Group.svelte';
+const { data: contextData, xGet, yGet } = getContext('LayerCake');
+/** Override data instead of using context */
+export let data = undefined;
+/** Pass `<path d={...} />` explicitly instead of calculating from data / context */
+export let pathData = undefined;
+/** Override x accessor */
+export let x = undefined; // TODO: Update Type
+/** Override y accessor */
+export let y = undefined; // TODO: Update Type
+/** Interpolate path data using d3-interpolate-path.  Works best without `draw` enabled */
+export let tweened = undefined;
+/** Draw path over time.  Works best without `tweened` enabled */
+export let draw = undefined;
+export let curve = undefined;
+export let defined = undefined;
+let d = '';
+$: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+$: tweened_d = motionStore('', { tweened: tweenedOptions });
+$: {
+    const path = d3Line()
+        .x(x ?? $xGet)
+        .y(y ?? $yGet);
+    if (curve)
+        path.curve(curve);
+    if (defined)
+        path.defined(defined);
+    d = pathData ?? path(data ?? $contextData);
+    tweened_d.set(d);
+}
+$: drawTransition = draw ? _drawTransition : () => ({});
+let key = Symbol();
+$: if (draw) {
+    // Anytime the path data changes, redraw
+    $tweened_d;
+    key = Symbol();
+}
+let pathEl = undefined;
+const startPoint = writable(undefined);
+$: endPoint = motionStore(undefined, {
+    tweened: draw
+        ? {
+            duration: (typeof draw === 'object' && draw.duration) || 800,
+            easing: (typeof draw === 'object' && draw.easing) || cubicInOut,
+            interpolate(a, b) {
+                return (t) => {
+                    const totalLength = pathEl.getTotalLength();
+                    const point = pathEl.getPointAtLength(totalLength * t);
+                    return point;
+                };
+            }
+        }
+        : false
+});
+$: {
+    if ($$slots.start || $$slots.end) {
+        // Wait for path data to update DOM, then update
+        d;
+        tick().then(() => {
+            if (pathEl) {
+                startPoint.set(pathEl.getPointAtLength(0));
+                const totalLength = pathEl.getTotalLength();
+                endPoint.set(pathEl.getPointAtLength(totalLength));
+            }
+        });
+    }
+}
+</script>
+
+{#key key}
+  <path
+    d={$tweened_d}
+    {...$$restProps}
+    class={cls('path-line fill-none', !$$props.stroke && 'stroke-black', $$props.class)}
+    in:drawTransition={typeof draw === 'object' ? draw : undefined}
+    on:click
+    on:mousemove
+    on:mouseleave
+    bind:this={pathEl}
+  />
+
+  {#if $$slots.start && $startPoint}
+    <Group x={$startPoint.x} y={$startPoint.y}>
+      <slot name="start" point={$startPoint} />
+    </Group>
+  {/if}
+
+  {#if $$slots.end && $endPoint}
+    <Group x={$endPoint.x} y={$endPoint.y}>
+      <slot name="end" point={$endPoint} />
+    </Group>
+  {/if}
+{/key}

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

@@ -0,0 +1,38 @@
+import { SvelteComponentTyped } from "svelte";
+import { tweened as tweenedStore } from 'svelte/motion';
+import { draw as _drawTransition } from 'svelte/transition';
+import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        data?: any;
+        pathData?: string | undefined | null;
+        x?: any;
+        y?: any;
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+        draw?: boolean | Parameters<typeof _drawTransition>[1];
+        curve?: CurveFactory | CurveFactoryLineOnly | undefined;
+        defined?: Parameters<Line<any>['defined']>[0] | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        start: {
+            point: DOMPoint | undefined;
+        };
+        end: {
+            point: DOMPoint | undefined;
+        };
+    };
+};
+export type SplineProps = typeof __propDef.props;
+export type SplineEvents = typeof __propDef.events;
+export type SplineSlots = typeof __propDef.slots;
+export default class Spline extends SvelteComponentTyped<SplineProps, SplineEvents, SplineSlots> {
+}
+export {};

package/dist/components/Text.svelte

@@ -121,7 +121,7 @@ function isValidXOrY(xOrY) {
 
 <!-- `overflow: visible` allow contents to be shown outside element -->
 <!-- `paint-order: stroke` supports stroke outlining text  -->
-<svg x={dx} y={dy} style="overflow: visible; paint-order: stroke;">
+<svg x={dx} y={dy} class="overflow-visible [paint-order:stroke]">
   {#if isValidXOrY(x) && isValidXOrY(y)}
     <text {x} {y} {transform} text-anchor={textAnchor} {...$$restProps}>
       {#each wordsByLines as line, index}

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

@@ -11,8 +11,8 @@ declare const __propDef: {
         lineHeight?: string | undefined;
         capHeight?: string | undefined;
         scaleToFit?: boolean | undefined;
-        textAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
-        verticalAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
+        textAnchor?: "start" | "end" | "middle" | "inherit" | undefined;
+        verticalAnchor?: "start" | "end" | "middle" | "inherit" | undefined;
         rotate?: number | undefined;
     };
     events: {

package/dist/components/TooltipItem.svelte

@@ -1,6 +1,7 @@
 <script>import { cls, format as formatUtil } from 'svelte-ux';
 export let label;
-export let value = undefined; // Can be pass as slot
+/** Value to be formatted and displayed.  Can also be passed as default slot */
+export let value = undefined;
 export let format = undefined;
 export let valueAlign = 'left';
 export let classes = {};

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         label: any;
         value?: any;
         format?: FormatType;
-        valueAlign?: "left" | "right" | "center" | undefined;
+        valueAlign?: "center" | "left" | "right" | undefined;
         classes?: {
             label?: string | undefined;
             value?: string | undefined;

package/dist/components/index.d.ts

@@ -10,7 +10,6 @@ export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
-export { default as ClipPathUse } from './ClipPathUse.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as ConnectedPoints } from './ConnectedPoints.svelte';
 export { default as Frame } from './Frame.svelte';
@@ -25,13 +24,15 @@ export { default as HighlightRect } from './HighlightRect.svelte';
 export { default as Labels } from './Labels.svelte';
 export { default as Legend } from './Legend.svelte';
 export { default as Line } from './Line.svelte';
+export { default as Spline } from './Spline.svelte';
 export { default as LinearGradient } from './LinearGradient.svelte';
 export { default as Link } from './Link.svelte';
+export { default as MotionPath } from './MotionPath.svelte';
 export { default as Pack } from './Pack.svelte';
 export { default as Partition } from './Partition.svelte';
-export { default as Path } from './Path.svelte';
 export { default as Pattern } from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
+export { default as Point } from './Point.svelte';
 export { default as Points } from './Points.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';

package/dist/components/index.js

@@ -10,7 +10,6 @@ export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
-export { default as ClipPathUse } from './ClipPathUse.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as ConnectedPoints } from './ConnectedPoints.svelte';
 export { default as Frame } from './Frame.svelte';
@@ -25,13 +24,15 @@ export { default as HighlightRect } from './HighlightRect.svelte';
 export { default as Labels } from './Labels.svelte';
 export { default as Legend } from './Legend.svelte';
 export { default as Line } from './Line.svelte';
+export { default as Spline } from './Spline.svelte';
 export { default as LinearGradient } from './LinearGradient.svelte';
 export { default as Link } from './Link.svelte';
+export { default as MotionPath } from './MotionPath.svelte';
 export { default as Pack } from './Pack.svelte';
 export { default as Partition } from './Partition.svelte';
-export { default as Path } from './Path.svelte';
 export { default as Pattern } from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
+export { default as Point } from './Point.svelte';
 export { default as Points } from './Points.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';

package/dist/docs/Code.svelte

@@ -13,8 +13,8 @@ export let highlightedSource = source
   {#if source}
     <div class="relative">
       <pre class="language-{language} rounded" style="margin: 0; white-space: normal;">
-            <code class="language-{language}">{@html highlightedSource}</code>
-        </pre>
+        <code class="language-{language}">{@html highlightedSource}</code>
+      </pre>
 
       <div class="absolute top-0 right-0 p-2">
         <Button

package/dist/docs/CurveMenuField.svelte

@@ -0,0 +1,19 @@
+<script>import { onMount } from 'svelte';
+import * as d3shapes from 'd3-shape';
+import { MenuField } from 'svelte-ux';
+export let value = undefined;
+const options = Object.keys(d3shapes)
+    .filter((key) => key.startsWith('curve'))
+    .filter((key) => !key.endsWith('Open') && !key.endsWith('Closed'))
+    .map((key) => {
+    return {
+        label: key.replace('curve', ''),
+        value: d3shapes[key]
+    };
+});
+onMount(() => {
+    value = d3shapes['curveLinear'];
+});
+</script>
+
+<MenuField label="Curve" {options} bind:value stepper classes={{ menuIcon: 'hidden' }} />

package/dist/docs/CurveMenuField.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: any | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CurveMenuFieldProps = typeof __propDef.props;
+export type CurveMenuFieldEvents = typeof __propDef.events;
+export type CurveMenuFieldSlots = typeof __propDef.slots;
+export default class CurveMenuField extends SvelteComponentTyped<CurveMenuFieldProps, CurveMenuFieldEvents, CurveMenuFieldSlots> {
+}
+export {};

package/dist/docs/PathDataMenuField.svelte

@@ -0,0 +1,66 @@
+<script>import { onMount } from 'svelte';
+import * as easings from 'svelte/easing';
+import { MenuField } from 'svelte-ux';
+export let value = undefined;
+// TODO: Allow updating externally without loosing selection
+export let amplitude = 1;
+export let frequency = 10;
+export let phase = 0;
+$: mathOptions = [
+    {
+        label: 'sin',
+        group: 'math',
+        value: (x) => amplitude * Math.sin(x * frequency) + phase
+    },
+    {
+        label: 'cos',
+        group: 'math',
+        value: (x) => amplitude * Math.cos(x * frequency) + phase
+    },
+    {
+        label: 'tan',
+        group: 'math',
+        value: (x) => amplitude * Math.tan(x * frequency) + phase
+    },
+    {
+        label: 'sqrt',
+        group: 'math',
+        value: (x) => amplitude * Math.sqrt(x * frequency) + phase
+    },
+    {
+        label: 'ceil',
+        group: 'math',
+        value: (x) => amplitude * Math.ceil(x * frequency) + phase
+    },
+    {
+        label: 'floor',
+        group: 'math',
+        value: (x) => amplitude * Math.floor(x * frequency) + phase
+    },
+    {
+        label: 'round',
+        group: 'math',
+        value: (x) => amplitude * Math.round(x * frequency) + phase
+    },
+    { label: 'random', group: 'math', value: (x) => amplitude * Math.random() + phase },
+    {
+        label: 'pow',
+        group: 'math',
+        value: (x) => amplitude * Math.pow(x, frequency) + phase
+    }
+];
+const easingOptions = Object.entries(easings).map(([key, value]) => {
+    return {
+        label: key,
+        value,
+        group: 'easing'
+    };
+});
+$: options = [...mathOptions, ...easingOptions];
+// Select initial option
+onMount(() => {
+    value = options[0].value;
+});
+</script>
+
+<MenuField label="Path data" {options} bind:value stepper classes={{ menuIcon: 'hidden' }} />

package/dist/docs/PathDataMenuField.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: any | undefined;
+        amplitude?: number | undefined;
+        frequency?: number | undefined;
+        phase?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PathDataMenuFieldProps = typeof __propDef.props;
+export type PathDataMenuFieldEvents = typeof __propDef.events;
+export type PathDataMenuFieldSlots = typeof __propDef.slots;
+export default class PathDataMenuField extends SvelteComponentTyped<PathDataMenuFieldProps, PathDataMenuFieldEvents, PathDataMenuFieldSlots> {
+}
+export {};

package/dist/docs/RangeField.svelte

@@ -6,23 +6,29 @@ export let max = 100;
 export let step = 1;
 </script>
 
-<Field let:id classes={{ input: 'mt-[6px] mb-1' }} {...$$restProps}>
-  <Button
-    icon={mdiChevronLeft}
-    on:click={() => (value -= value > min ? step : 0)}
-    class="mr-2"
-    size="sm"
-  />
+<Field let:id classes={{ input: 'mt-2 mb-1' }} {...$$restProps}>
+  <span slot="prepend">
+    <Button
+      icon={mdiChevronLeft}
+      on:click={() => (value -= value > min ? step : 0)}
+      class="mr-2"
+      size="sm"
+    />
+  </span>
+
   <input type="range" bind:value {min} {max} {step} {id} class="h-6 w-full" />
   <span class="ml-2 text-sm text-black/50 tabular-nums text-right inline-grid">
     <span class="col-span-full row-span-full invisible">{min}</span>
     <span class="col-span-full row-span-full">{value}</span>
     <span class="col-span-full row-span-full invisible">{max}</span>
   </span>
-  <Button
-    icon={mdiChevronRight}
-    on:click={() => (value += value < max ? step : 0)}
-    class="ml-2"
-    size="sm"
-  />
+
+  <span slot="append">
+    <Button
+      icon={mdiChevronRight}
+      on:click={() => (value += value < max ? step : 0)}
+      class="ml-2"
+      size="sm"
+    />
+  </span>
 </Field>

package/dist/docs/ViewSourceButton.svelte

@@ -10,7 +10,11 @@ export let icon;
 {#if source}
   <Toggle let:on={open} let:toggle>
     <Button {icon} on:click={toggle} variant="fill-light" color="blue" size="sm">{label}</Button>
-    <Dialog {open} on:close={toggle}>
+    <Dialog
+      {open}
+      on:close={toggle}
+      class="max-h-[98vh] md:max-h-[90vh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
+    >
       <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
         <div class="overflow-auto">
           <div class="text-lg font-semibold">{label}</div>
@@ -24,7 +28,7 @@ export let icon;
         {/if}
       </div>
 
-      <div class="max-h-[80vh] overflow-auto">
+      <div class="overflow-auto">
         <Code {source} language={source.startsWith('<script') ? 'svelte' : 'js'} />
       </div>
 

package/dist/docs/ZoomControls.svelte.d.ts

@@ -3,7 +3,7 @@ import type Zoom from '../components/Zoom.svelte';
 declare const __propDef: {
     props: {
         zoom: Zoom;
-        placement?: ("top" | "bottom" | "left" | "right" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        placement?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
     };
     events: {

package/dist/stores/motionStore.d.ts

@@ -16,7 +16,7 @@ export type PropMotionOptions = {
 /**
  * Convenient wrapper to create a motion store (spring(), tweened()) based on properties, or fall back to basic writable() store
  */
-export declare function motionStore(value: any, options: MotionOptions): import("svelte/motion").Tweened<unknown> | import("svelte/motion").Spring<any> | import("svelte/store").Writable<any>;
+export declare function motionStore<T = any>(value: any, options: MotionOptions): import("svelte/motion").Spring<T> | import("svelte/motion").Tweened<T> | import("svelte/store").Writable<T>;
 /**
  * Helper to resolve motion options with specific property option (useful for specifying per-prop delays)
  */

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.18.2",
+  "version": "0.20.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -15,12 +15,14 @@
     "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
     "changeset": "changeset",
-    "version": "changeset version"
+    "version": "changeset version",
+    "version-status": "changeset status -v",
+    "publish": "changeset publish"
   },
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
     "@sveltejs/adapter-vercel": "^3.0.1",
-    "@sveltejs/kit": "^1.22.0",
+    "@sveltejs/kit": "^1.22.1",
     "@sveltejs/package": "^2.1.0",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.9",
@@ -30,6 +32,7 @@
     "@types/d3-geo": "^3.0.3",
     "@types/d3-hierarchy": "^3.1.2",
     "@types/d3-interpolate": "^3.0.1",
+    "@types/d3-interpolate-path": "^2.0.0",
     "@types/d3-quadtree": "^3.0.2",
     "@types/d3-random": "^3.0.1",
     "@types/d3-sankey": "^0.12.1",
@@ -40,21 +43,22 @@
     "@types/shapefile": "^0.6.1",
     "@types/topojson-client": "^3.1.1",
     "autoprefixer": "^10.4.14",
-    "marked": "^5.1.0",
+    "execa": "^7.1.1",
+    "marked": "^5.1.1",
     "mdsvex": "^0.11.0",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "prism-themes": "^1.9.0",
     "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.4.4",
+    "svelte-check": "^3.4.5",
     "svelte-preprocess": "^5.0.4",
-    "svelte2tsx": "^0.6.16",
+    "svelte2tsx": "^0.6.19",
     "tailwindcss": "^3.3.2",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6",
     "unist-util-visit": "^4.1.2",
     "us-atlas": "^3.0.1",
-    "vite": "^4.3.9",
+    "vite": "^4.4.2",
     "vite-plugin-sveld": "^1.1.0"
   },
   "type": "module",
@@ -81,7 +85,7 @@
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
     "svelte": "^3.59.1",
-    "svelte-ux": "^0.43.5",
+    "svelte-ux": "^0.43.11",
     "topojson-client": "^3.1.0"
   },
   "main": "./dist/index.js",

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

@@ -1,34 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { tweened as tweenedStore } from 'svelte/motion';
-import type { CurveFactory } from 'd3-shape';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        data?: any;
-        x?: any;
-        y0?: any;
-        y1?: any;
-        pathData?: string | undefined;
-        clipPath?: string | undefined;
-        tweened?: boolean | Parameters<typeof tweenedStore>[1];
-        curve?: CurveFactory | undefined;
-        defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
-        color?: string | undefined;
-        opacity?: number | undefined;
-        line?: boolean | any;
-    };
-    events: {
-        click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AreaProps = typeof __propDef.props;
-export type AreaEvents = typeof __propDef.events;
-export type AreaSlots = typeof __propDef.slots;
-export default class Area extends SvelteComponentTyped<AreaProps, AreaEvents, AreaSlots> {
-}
-export {};

package/dist/components/ClipPathUse.svelte

@@ -1,17 +0,0 @@
-<script>import { uniqueId } from 'svelte-ux';
-import ClipPath from './ClipPath.svelte';
-/** Id of path or shape */
-export let refId;
-/** Unique id for clipPath */
-export let clipPathId = uniqueId('clipPath-');
-</script>
-
-<ClipPath id={clipPathId}>
-  <use href="#{refId}" />
-</ClipPath>
-
-{#if $$slots.default}
-  <g style="clip-path: url(#{clipPathId})" on:click on:mousemove on:mouseleave on:keydown>
-    <slot {refId} {clipPathId} />
-  </g>
-{/if}

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

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        /** Id of path or shape */ refId: string;
-        /** Unique id for clipPath */ clipPathId?: string | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
-        keydown: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            refId: string;
-            clipPathId: string;
-        };
-    };
-};
-export type ClipPathUseProps = typeof __propDef.props;
-export type ClipPathUseEvents = typeof __propDef.events;
-export type ClipPathUseSlots = typeof __propDef.slots;
-export default class ClipPathUse extends SvelteComponentTyped<ClipPathUseProps, ClipPathUseEvents, ClipPathUseSlots> {
-}
-export {};

package/dist/components/Path.svelte

@@ -1,53 +0,0 @@
-<script>/*
-      TODO:
-      - [ ] Show path progressively show / animated in on load.  Also fix sliding in from left side (at last in from bottom)
-  */
-import { getContext } from 'svelte';
-import { line as d3Line } from 'd3-shape';
-// import { interpolateString } from 'd3-interpolate';
-import { interpolatePath } from 'd3-interpolate-path';
-import { motionStore } from '../stores/motionStore';
-const { data: contextData, xGet, yGet } = getContext('LayerCake');
-// Properties to override what is used from context
-export let data = undefined; // TODO: Update Type
-export let x = undefined; // TODO: Update Type
-export let y = undefined; // TODO: Update Type
-export let pathData = undefined;
-export let tweened = undefined;
-export let curve = undefined;
-export let defined = undefined;
-export let color = 'black';
-export let width = undefined;
-$: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
-$: tweened_d = motionStore('', { tweened: tweenedOptions });
-$: {
-    const path = d3Line()
-        .x(x ?? $xGet)
-        .y(y ?? $yGet);
-    if (curve)
-        path.curve(curve);
-    if (defined)
-        path.defined(defined);
-    const d = pathData ?? path(data ?? $contextData);
-    tweened_d.set(d);
-}
-</script>
-
-<path
-  class="path-line"
-  d={$tweened_d}
-  stroke={color}
-  stroke-width={width}
-  {...$$restProps}
-  on:click
-  on:mousemove
-  on:mouseleave
-/>
-
-<style>
-  .path-line {
-    fill: none;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-  }
-</style>

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

@@ -1,31 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { tweened as tweenedStore } from 'svelte/motion';
-import type { CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        data?: any;
-        x?: any;
-        y?: any;
-        pathData?: string | undefined;
-        tweened?: boolean | Parameters<typeof tweenedStore>[1];
-        curve?: CurveFactory | CurveFactoryLineOnly | undefined;
-        defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
-        color?: string | undefined;
-        width?: undefined;
-    };
-    events: {
-        click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type PathProps = typeof __propDef.props;
-export type PathEvents = typeof __propDef.events;
-export type PathSlots = typeof __propDef.slots;
-export default class Path extends SvelteComponentTyped<PathProps, PathEvents, PathSlots> {
-}
-export {};