layerchart 2.0.0-next.1 → 2.0.0-next.3

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

@@ -0,0 +1,54 @@
+import type { MarkerOptions } from './MarkerWrapper.svelte';
+import type { Without } from '../utils/types.js';
+import type { MotionNoneOption, MotionTweenOption } from '../utils/motion.svelte.js';
+import { type CurveFactory } from 'd3-shape';
+export type LinkPropsWithoutHTML = {
+    data?: any;
+    /**
+     * Update source and target accessors to be compatible with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
+     *
+     * @default false
+     */
+    sankey?: boolean;
+    source?: (d: any) => any;
+    target?: (d: any) => any;
+    /**
+     * Convenient property to swap x/y accessor logic
+     */
+    orientation?: 'vertical' | 'horizontal';
+    x?: (d: any) => any;
+    y?: (d: any) => any;
+    curve?: CurveFactory;
+    /**
+     * Marker to attach to both start and end points of the line
+     */
+    marker?: MarkerOptions;
+    /**
+     * Marker to attach to the middle point of the line
+     */
+    markerMid?: MarkerOptions;
+    /**
+     * Marker to attach to the start point of the line
+     */
+    markerStart?: MarkerOptions;
+    /**
+     * Marker to attach to the end point of the line
+     */
+    markerEnd?: MarkerOptions;
+    /**
+     * Apply explicit coordinates to the line. Useful when dealing with
+     * force simulation links.
+     */
+    explicitCoords?: {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    };
+    motion?: MotionTweenOption | MotionNoneOption;
+};
+export type LinkProps = LinkPropsWithoutHTML & Without<ConnectorProps, LinkPropsWithoutHTML>;
+import { type ConnectorProps } from './Connector.svelte';
+declare const Link: import("svelte").Component<LinkProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/Marker.svelte

@@ -1,37 +1,97 @@
-<script lang="ts">
-  import { cls } from '@layerstack/tailwind';
-  import { uniqueId } from '@layerstack/utils';
+<script lang="ts" module>
+  import type { Without } from '../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  export type MarkerPropsWithoutHTML = {
+    /**
+     * The type of marker to render (e.g., arrow, triangle, etc.)
+     *
+     * Pass `children` to render a custom element/component inside the marker instead.
+     */
+    type?: 'arrow' | 'triangle' | 'line' | 'circle' | 'circle-stroke' | 'dot';
+
+    /**
+     * Unique identifier for the marker
+     */
+    id?: string;
+
+    /**
+     * Size of the marker
+     * (used as default for width and height if not overridden)
+     * @default 10
+     */
+    size?: number;
 
-  /** Defined the type of a default marker, or define your own in the slot */
-  export let type: 'arrow' | 'triangle' | 'line' | 'circle' | 'circle-stroke' | 'dot' | undefined =
-    undefined;
+    /**
+     * Width of the marker (can be a string or number)
+     * @default size
+     */
+    markerWidth?: string | number;
 
-  /** Unique id for marker */
-  export let id: string = uniqueId('marker-');
+    /**
+     * Height of the marker (can be a string or number)
+     * @default size
+     */
+    markerHeight?: string | number;
 
-  /** A number used to determine the size of the bounding box the marker content. */
-  export let size = 10;
+    /**
+     * Units for marker dimensions ('userSpaceOnUse' or 'strokeWidth')
+     * @default 'userSpaceOnUse'
+     */
+    markerUnits?: 'userSpaceOnUse' | 'strokeWidth';
 
-  /** The width of the marker viewport */
-  export let markerWidth: string | number = size;
+    /**
+     * Orientation of the marker
+     * ('auto', 'auto-start-reverse', or a specific angle in degrees)
+     * @default 'auto-start-reverse'
+     */
+    orient?: 'auto' | 'auto-start-reverse' | number;
 
-  /** The height of the marker viewport */
-  export let markerHeight: string | number = size;
+    /**
+     * X-coordinate offset of the marker's reference point
+     * @default 9 if type is 'arrow' or 'triangle', otherwise 5
+     */
+    refX?: string | number;
 
-  /** Set the coordinate system for the markerWidth, markerHeight, and `<marker>` contents  */
-  export let markerUnits: 'userSpaceOnUse' | 'strokeWidth' = 'userSpaceOnUse';
+    /**
+     * Y-coordinate offset of the marker's reference point
+     * @default 5
+     */
+    refY?: string | number;
 
-  /** The orientation of the marker relative to the shape it is attached to */
-  export let orient: 'auto' | 'auto-start-reverse' | number = 'auto-start-reverse';
+    /**
+     * Viewbox defining the coordinate system for the marker (e.g., '0 0 10 10')
+     * @default '0 0 10 10'
+     */
+    viewBox?: string;
+  };
 
-  /** The x coordinate for the reference point of the marker */
-  export let refX: string | number = ['arrow', 'triangle'].includes(type ?? '') ? 9 : 5;
+  export type MarkerProps = MarkerPropsWithoutHTML &
+    Without<SVGAttributes<SVGMarkerElement>, MarkerPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { createId } from '../utils/createId.js';
+  import { layerClass } from '../utils/attributes.js';
 
-  /** The y coordinate for the reference point of the maker */
-  export let refY: string | number = 5;
+  const uid = $props.id();
 
-  /** The bound of the SVG viewport for the current SVG fragment */
-  export let viewBox = '0 0 10 10';
+  let {
+    type,
+    id = createId('marker-', uid),
+    size = 10,
+    markerWidth = size,
+    markerHeight = size,
+    markerUnits = 'userSpaceOnUse',
+    orient = 'auto-start-reverse',
+    refX = ['arrow', 'triangle'].includes(type ?? '') ? 9 : 5,
+    refY = 5,
+    viewBox = '0 0 10 10',
+    class: className,
+    children,
+    ...restProps
+  }: MarkerProps = $props();
 </script>
 
 <defs>
@@ -44,11 +104,12 @@
     {refX}
     {refY}
     {viewBox}
-    {...$$restProps}
+    {...restProps}
     class={cls(
+      layerClass('marker'),
       'overflow-visible',
       // stroke
-      $$props.stroke == null &&
+      restProps.stroke == null &&
         (['arrow', 'circle-stroke', 'line'].includes(type ?? '')
           ? 'stroke-[context-stroke]'
           : type === 'circle'
@@ -57,25 +118,25 @@
       // extra stroke attrs
       '[stroke-linecap:round] [stroke-linejoin:round]',
       //fill
-      $$props.fill == null &&
+      restProps.fill == null &&
         (['triangle', 'dot', 'circle'].includes(type ?? '')
           ? 'fill-[context-stroke]'
           : type === 'circle-stroke'
             ? 'fill-surface-100'
             : 'fill-none'),
-      $$props.class
+      className
     )}
   >
-    <slot>
-      {#if type === 'triangle'}
-        <path d="M 0 0 L 10 5 L 0 10 z" />
-      {:else if type === 'arrow'}
-        <polyline points="0 0, 10 5, 0 10" />
-      {:else if type === 'circle' || type === 'circle-stroke' || type === 'dot'}
-        <circle cx={5} cy={5} r={5} />
-      {:else if type === 'line'}
-        <polyline points="5 0, 5 10" />
-      {/if}
-    </slot>
+    {#if children}
+      {@render children()}
+    {:else if type === 'triangle'}
+      <path d="M 0 0 L 10 5 L 0 10 z" class={layerClass('marker-triangle')} />
+    {:else if type === 'arrow'}
+      <polyline points="0 0, 10 5, 0 10" class={layerClass('marker-arrow')} />
+    {:else if type === 'circle' || type === 'circle-stroke' || type === 'dot'}
+      <circle cx={5} cy={5} r={5} class={layerClass('marker-circle')} />
+    {:else if type === 'line'}
+      <polyline points="5 0, 5 10" class={layerClass('marker-line')} />
+    {/if}
   </marker>
 </defs>

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

@@ -1,28 +1,60 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: "arrow" | "triangle" | "line" | "circle" | "circle-stroke" | "dot" | undefined | undefined;
-        id?: string | undefined;
-        size?: number | undefined;
-        markerWidth?: string | number | undefined;
-        markerHeight?: string | number | undefined;
-        markerUnits?: "userSpaceOnUse" | "strokeWidth" | undefined;
-        orient?: "auto" | "auto-start-reverse" | number | undefined;
-        refX?: string | number | undefined;
-        refY?: string | number | undefined;
-        viewBox?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Without } from '../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+export type MarkerPropsWithoutHTML = {
+    /**
+     * The type of marker to render (e.g., arrow, triangle, etc.)
+     *
+     * Pass `children` to render a custom element/component inside the marker instead.
+     */
+    type?: 'arrow' | 'triangle' | 'line' | 'circle' | 'circle-stroke' | 'dot';
+    /**
+     * Unique identifier for the marker
+     */
+    id?: string;
+    /**
+     * Size of the marker
+     * (used as default for width and height if not overridden)
+     * @default 10
+     */
+    size?: number;
+    /**
+     * Width of the marker (can be a string or number)
+     * @default size
+     */
+    markerWidth?: string | number;
+    /**
+     * Height of the marker (can be a string or number)
+     * @default size
+     */
+    markerHeight?: string | number;
+    /**
+     * Units for marker dimensions ('userSpaceOnUse' or 'strokeWidth')
+     * @default 'userSpaceOnUse'
+     */
+    markerUnits?: 'userSpaceOnUse' | 'strokeWidth';
+    /**
+     * Orientation of the marker
+     * ('auto', 'auto-start-reverse', or a specific angle in degrees)
+     * @default 'auto-start-reverse'
+     */
+    orient?: 'auto' | 'auto-start-reverse' | number;
+    /**
+     * X-coordinate offset of the marker's reference point
+     * @default 9 if type is 'arrow' or 'triangle', otherwise 5
+     */
+    refX?: string | number;
+    /**
+     * Y-coordinate offset of the marker's reference point
+     * @default 5
+     */
+    refY?: string | number;
+    /**
+     * Viewbox defining the coordinate system for the marker (e.g., '0 0 10 10')
+     * @default '0 0 10 10'
+     */
+    viewBox?: string;
 };
-export type MarkerProps = typeof __propDef.props;
-export type MarkerEvents = typeof __propDef.events;
-export type MarkerSlots = typeof __propDef.slots;
-export default class Marker extends SvelteComponentTyped<MarkerProps, MarkerEvents, MarkerSlots> {
-}
-export {};
+export type MarkerProps = MarkerPropsWithoutHTML & Without<SVGAttributes<SVGMarkerElement>, MarkerPropsWithoutHTML>;
+declare const Marker: import("svelte").Component<MarkerProps, {}, "">;
+type Marker = ReturnType<typeof Marker>;
+export default Marker;

package/dist/components/MarkerWrapper.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  import Marker from './Marker.svelte';
+  import type { ComponentProps, Snippet } from 'svelte';
+
+  export type MarkerProps = {
+    /**
+     * A unique identifier for the marker.
+     */
+    id: string;
+
+    /**
+     * The marker or marker options to render
+     */
+    marker?: MarkerOptions;
+  };
+
+  export type MarkerOptions =
+    | ComponentProps<typeof Marker>['type']
+    | ComponentProps<typeof Marker>
+    | Snippet<[{ id: string }]>;
+</script>
+
+<script lang="ts">
+  let { id, marker }: MarkerProps = $props();
+</script>
+
+{#if typeof marker === 'function'}
+  {@render marker({ id })}
+{:else if marker}
+  <Marker
+    {id}
+    type={typeof marker === 'string' ? marker : undefined}
+    {...typeof marker === 'object' ? marker : null}
+  />
+{/if}

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

@@ -0,0 +1,18 @@
+import Marker from './Marker.svelte';
+import type { ComponentProps, Snippet } from 'svelte';
+export type MarkerProps = {
+    /**
+     * A unique identifier for the marker.
+     */
+    id: string;
+    /**
+     * The marker or marker options to render
+     */
+    marker?: MarkerOptions;
+};
+export type MarkerOptions = ComponentProps<typeof Marker>['type'] | ComponentProps<typeof Marker> | Snippet<[{
+    id: string;
+}]>;
+declare const MarkerWrapper: import("svelte").Component<MarkerProps, {}, "">;
+type MarkerWrapper = ReturnType<typeof MarkerWrapper>;
+export default MarkerWrapper;

package/dist/components/MonthPath.svelte

@@ -1,32 +1,77 @@
+<script lang="ts" module>
+  import type { Without } from '../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  export type MonthPathPropsWithoutHTML = {
+    /**
+     * The date to use for the month path.
+     */
+    date: Date;
+
+    /**
+     * Size of cell.
+     * - `number` - sets width/height as same.
+     * - array - sets [width, height].
+     */
+    cellSize: number | [number, number];
+
+    /**
+     * A bindable reference to the underlying `<path>` element.
+     *
+     * @bindable
+     */
+    ref?: SVGPathElement;
+  };
+
+  export type MonthPathProps = MonthPathPropsWithoutHTML &
+    Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML>;
+</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';
 
-  export let date: Date;
+  let {
+    date,
+    cellSize: cellSizeProp,
+    ref: refProp = $bindable(),
+    class: className,
+    ...restProps
+  }: MonthPathProps = $props();
 
-  /**
-   * Size of cell.  If `number`, sets width/height as same.  If array, sets [width,height].  If undefined, is based on Chart width/height
-   */
-  export let cellSize: number | [number, number];
+  let ref = $state<SVGPathElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
 
-  $: [cellWidth, cellHeight] = Array.isArray(cellSize) ? cellSize : [cellSize, cellSize];
+  const cellSize = $derived(
+    Array.isArray(cellSizeProp) ? cellSizeProp : [cellSizeProp, cellSizeProp]
+  );
 
   // start of month
-  $: startDayOfWeek = date.getDay();
-  $: startWeek = timeWeek.count(timeYear(date), date);
+  const startDayOfWeek = $derived(date.getDay());
+  const startWeek = $derived(timeWeek.count(timeYear(date), date));
 
   // end of month
-  $: monthEnd = endOfMonth(date);
-  $: endDayOfWeek = monthEnd.getDay();
-  $: endWeek = timeWeek.count(timeYear(monthEnd), monthEnd);
-
-  $: pathData = `
-    M${(startWeek + 1) * cellWidth},${startDayOfWeek * cellHeight}
-    H${startWeek * cellWidth} V${cellHeight * 7}
-    H${endWeek * cellWidth} V${(endDayOfWeek + 1) * cellHeight}
-    H${(endWeek + 1) * cellWidth} V0
-    H${(startWeek + 1) * cellWidth}Z
-  `;
+  const monthEnd = $derived(endOfMonth(date));
+  const endDayOfWeek = $derived(monthEnd.getDay());
+  const endWeek = $derived(timeWeek.count(timeYear(monthEnd), monthEnd));
+
+  const pathData = $derived(`
+    M${(startWeek + 1) * cellSize[0]},${startDayOfWeek * cellSize[1]}
+    H${startWeek * cellSize[0]} V${cellSize[1] * 7}
+    H${endWeek * cellSize[0]} V${(endDayOfWeek + 1) * cellSize[1]}
+    H${(endWeek + 1) * cellSize[0]} V0
+    H${(startWeek + 1) * cellSize[0]}Z
+  `);
 </script>
 
-<path d={pathData} fill="none" class="stroke-surface-content/20" {...$$restProps} />
+<path
+  bind:this={ref}
+  d={pathData}
+  fill="none"
+  class={cls(layerClass('month-path'), 'stroke-surface-content/20', className)}
+  {...restProps}
+/>

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

@@ -1,18 +1,24 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        date: Date;
-        cellSize: number | [number, number];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { Without } from '../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+export type MonthPathPropsWithoutHTML = {
+    /**
+     * The date to use for the month path.
+     */
+    date: Date;
+    /**
+     * Size of cell.
+     * - `number` - sets width/height as same.
+     * - array - sets [width, height].
+     */
+    cellSize: number | [number, number];
+    /**
+     * A bindable reference to the underlying `<path>` element.
+     *
+     * @bindable
+     */
+    ref?: SVGPathElement;
 };
-export type MonthPathProps = typeof __propDef.props;
-export type MonthPathEvents = typeof __propDef.events;
-export type MonthPathSlots = typeof __propDef.slots;
-export default class MonthPath extends SvelteComponentTyped<MonthPathProps, MonthPathEvents, MonthPathSlots> {
-}
-export {};
+export type MonthPathProps = MonthPathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML>;
+declare const MonthPath: import("svelte").Component<MonthPathProps, {}, "ref">;
+type MonthPath = ReturnType<typeof MonthPath>;
+export default MonthPath;

package/dist/components/MotionPath.svelte

@@ -1,26 +1,82 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { uniqueId } from '@layerstack/utils';
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  export type MotionPathPropsWithoutHTML = {
+    /**
+     * Id of path to move object along
+     */
+    pathId?: string;
+
+    /**
+     * Id of object to move along path
+     */
+    objectId?: string;
+
+    /**
+     * Duration of the animation
+     */
+    duration: string;
+
+    /**
+     * Number of times the animation will occur
+     */
+    repeatCount?: number | 'indefinite';
+
+    /**
+     * Final state of the animation.  Freeze (last frame) or remove (first frame)
+     * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#animate
+     *
+     * @default 'freeze'
+     */
+    fill?: 'freeze' | 'remove';
 
-  /** Id of path to move object along */
-  export let pathId: string = uniqueId('motionPathId-');
+    /**
+     * 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';
 
-  /** Id of object to move along path */
-  export let objectId: string = uniqueId('motionObjectId-');
+    /**
+     * A bindable reference to the underlying `<animateMotion>` element.
+     *
+     * @bindable
+     */
+    ref?: SVGAnimateMotionElement;
 
-  /** Duration of the animation */
-  export let duration: string;
+    children?: Snippet<[{ pathId: string; objectId: string }]>;
+  };
 
-  /** Number of times the animation will occur */
-  export let repeatCount: number | 'indefinite' | undefined = undefined;
+  export type MotionPathProps = MotionPathPropsWithoutHTML &
+    Without<
+      Omit<SVGAttributes<SVGAnimateMotionElement>, 'dir' | 'href'>,
+      MotionPathPropsWithoutHTML
+    >;
+</script>
+
+<script lang="ts">
+  import type { Without } from '../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { createId } from '../utils/createId.js';
+  import { extractLayerProps } from '../utils/attributes.js';
 
-  /** 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' | 'remove' = 'freeze';
+  const uid = $props.id();
 
-  /** Rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation */
-  export let rotate: number | 'auto' | 'auto-reverse' | undefined = undefined;
+  let {
+    pathId = createId('motionPathId-', uid),
+    objectId = createId('motionObjectId-', uid),
+    duration,
+    repeatCount,
+    fill = 'freeze',
+    rotate,
+    ref: refProp = $bindable(),
+    children,
+    ...restProps
+  }: MotionPathPropsWithoutHTML = $props();
+
+  let ref = $state<SVGAnimateMotionElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
 
   // TODO: Investigate `calcMode:spline`, `keyTimes`, and `keySplines` to work with `svelte/easing`
   // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/calcMode
@@ -29,9 +85,10 @@
   // 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: SVGAnimateMotionElement;
-  onMount(() => {
-    animateEl.beginElement();
+
+  $effect(() => {
+    if (!ref) return;
+    ref.beginElement();
   });
 </script>
 
@@ -42,12 +99,11 @@
     {repeatCount}
     {fill}
     {rotate}
-    bind:this={animateEl}
+    bind:this={ref}
+    {...extractLayerProps(restProps, 'motion-path')}
   >
     <mpath href="#{pathId}" />
   </animateMotion>
 </defs>
 
-{#if $$slots.default}
-  <slot {pathId} {objectId} />
-{/if}
+{@render children?.({ pathId, objectId })}