layerchart 2.0.0-next.60 → 2.0.0-next.62

package/dist/components/LinearGradient/LinearGradient.canvas.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+  export type {
+    LinearGradientProps,
+    LinearGradientPropsWithoutHTML,
+  } from './LinearGradient.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { asAny } from '../../utils/types.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { createLinearGradient, getComputedStyles } from '../../utils/canvas.js';
+  import { parsePercent } from '../../utils/math.js';
+  import { createId } from '../../utils/createId.js';
+  import type { LinearGradientProps } from './LinearGradient.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('linearGradient-', uid),
+    stops = ['var(--tw-gradient-from)', 'var(--tw-gradient-to)'],
+    vertical = false,
+    x1 = '0%',
+    y1 = '0%',
+    x2 = vertical ? '0%' : '100%',
+    y2 = vertical ? '100%' : '0%',
+    class: className,
+    children,
+    ...rest
+  }: LinearGradientProps = $props();
+
+  const ctx = getChartContext();
+
+  let canvasGradient = $state<CanvasGradient>();
+
+  function render(_ctx: CanvasRenderingContext2D) {
+    const _stops = stops.map((stop, i) => {
+      if (Array.isArray(stop)) {
+        const { fill } = getComputedStyles(_ctx.canvas, {
+          styles: { fill: stop[1] },
+          classes: className,
+        });
+        return { offset: parsePercent(stop[0]), color: fill };
+      } else {
+        const { fill } = getComputedStyles(_ctx.canvas, {
+          styles: { fill: stop },
+          classes: className,
+        });
+        return { offset: i / (stops.length - 1), color: fill };
+      }
+    });
+
+    // TODO: Use x1/y1/x2/y2 values (convert from percentage strings)
+    const gradient = createLinearGradient(
+      _ctx,
+      ctx.padding.left,
+      ctx.padding.top,
+      vertical ? ctx.padding.left : ctx.width - ctx.padding.right,
+      vertical ? ctx.height + ctx.padding.bottom : ctx.padding.top,
+      _stops
+    );
+
+    canvasGradient = gradient;
+  }
+
+  ctx.registerComponent({
+    name: 'Gradient',
+    kind: 'group',
+    canvasRender: {
+      render,
+      deps: () => [x1, y1, x2, y2, stops, className],
+    },
+  });
+</script>
+
+{@render children?.({ id, gradient: asAny(canvasGradient) })}

package/dist/components/LinearGradient/LinearGradient.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { LinearGradientProps, LinearGradientPropsWithoutHTML, } from './LinearGradient.shared.svelte.js';
+import type { LinearGradientProps } from './LinearGradient.shared.svelte.js';
+declare const LinearGradient: import("svelte").Component<LinearGradientProps, {}, "">;
+type LinearGradient = ReturnType<typeof LinearGradient>;
+export default LinearGradient;

package/dist/components/LinearGradient/LinearGradient.html.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+  export type {
+    LinearGradientProps,
+    LinearGradientPropsWithoutHTML,
+  } from './LinearGradient.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import type { LinearGradientProps } from './LinearGradient.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('linearGradient-', uid),
+    stops = ['var(--tw-gradient-from)', 'var(--tw-gradient-to)'],
+    vertical = false,
+    rotate,
+    children,
+  }: LinearGradientProps = $props();
+
+  function createCSSGradient(): string {
+    if (!stops?.length) return '';
+
+    let direction: string;
+    if (rotate !== undefined) {
+      // Convert SVG rotation to CSS linear-gradient angle
+      // SVG: rotate(0) on horizontal gradient = left-to-right = CSS 90deg
+      // SVG: rotate(0) on vertical gradient = top-to-bottom = CSS 180deg
+      const baseAngle = vertical ? 180 : 90;
+      const cssAngle = baseAngle + rotate;
+      direction = `${cssAngle}deg`;
+    } else {
+      direction = vertical ? 'to bottom' : 'to right';
+    }
+
+    const cssStops = stops
+      .map((stop, i) => {
+        if (Array.isArray(stop)) {
+          return `${stop[1]} ${stop[0]}`;
+        } else {
+          return `${stop} ${i * (100 / (stops.length - 1))}%`;
+        }
+      })
+      .join(', ');
+
+    return `linear-gradient(${direction}, ${cssStops})`;
+  }
+</script>
+
+{@render children?.({ id, gradient: createCSSGradient() })}

package/dist/components/LinearGradient/LinearGradient.html.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { LinearGradientProps, LinearGradientPropsWithoutHTML, } from './LinearGradient.shared.svelte.js';
+import type { LinearGradientProps } from './LinearGradient.shared.svelte.js';
+declare const LinearGradient: import("svelte").Component<LinearGradientProps, {}, "">;
+type LinearGradient = ReturnType<typeof LinearGradient>;
+export default LinearGradient;

package/dist/components/{LinearGradient.svelte.d.ts → LinearGradient/LinearGradient.shared.svelte.d.ts}

@@ -1,43 +1,27 @@
-import { type Without } from '../utils/types.js';
-import type { SVGAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
 export type LinearGradientPropsWithoutHTML = {
-    /**
-     * Unique id for linearGradient
-     */
+    /** Unique id for linearGradient */
     id?: string;
     /**
-     * Array array of strings (colors), will equally distributed from 0-100%.
-     * If array of tuples, will use first value as the offset, and second as color
+     * Array of strings (colors) distributed equally from 0-100%, or
+     * `[offset, color]` tuples.
      *
      * @default `['var(--tw-gradient-from)', 'var(--tw-gradient-to)']`
      */
     stops?: string[] | [string | number, string][];
-    /**
-     * Apply color stops top-to-bottom (true) or left-to-right (false)
-     *
-     * @default false
-     */
+    /** Apply color stops top-to-bottom (true) or left-to-right (false). @default false */
     vertical?: boolean;
-    /**
-     * @default '0%'
-     */
+    /** @default '0%' */
     x1?: string;
-    /**
-     * @default '0%'
-     */
+    /** @default '0%' */
     y1?: string;
-    /**
-     * @default vertical ? '0%' : '100%'
-     */
+    /** @default vertical ? '0%' : '100%' */
     x2?: string;
-    /**
-     * @default vertical ? '100%' : '0%'
-     */
+    /** @default vertical ? '100%' : '0%' */
     y2?: string;
-    /**
-     * Rotate the gradient by a given angle in degrees
-     */
+    /** Rotate the gradient by a given angle in degrees */
     rotate?: number;
     /**
      * Define the coordinate system for attributes (i.e. gradientUnits)
@@ -51,10 +35,7 @@ export type LinearGradientPropsWithoutHTML = {
      * @bindable
      */
     ref?: SVGLinearGradientElement;
-    /**
-     * Render as a child of the gradient and will opt out of the default stops
-     * being rendered.
-     */
+    /** Render as a child of the gradient and will opt out of the default stops being rendered. */
     stopsContent?: Snippet;
     children?: Snippet<[{
         id: string;
@@ -62,6 +43,3 @@ export type LinearGradientPropsWithoutHTML = {
     }]>;
 };
 export type LinearGradientProps = LinearGradientPropsWithoutHTML & Without<SVGAttributes<SVGLinearGradientElement>, LinearGradientPropsWithoutHTML>;
-declare const LinearGradient: import("svelte").Component<LinearGradientProps, {}, "ref">;
-type LinearGradient = ReturnType<typeof LinearGradient>;
-export default LinearGradient;

package/dist/components/LinearGradient/LinearGradient.shared.svelte.js

@@ -0,0 +1 @@
+export {};

package/dist/components/LinearGradient/LinearGradient.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  export type {
+    LinearGradientProps,
+    LinearGradientPropsWithoutHTML,
+  } from './LinearGradient.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import LinearGradientSvg from './LinearGradient.svg.svelte';
+  import LinearGradientCanvas from './LinearGradient.canvas.svelte';
+  import LinearGradientHtml from './LinearGradient.html.svelte';
+  import type { LinearGradientProps } from './LinearGradient.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let { ref = $bindable(), ...rest }: LinearGradientProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <LinearGradientSvg bind:ref {...rest} />
+{:else if layerCtx === 'canvas'}
+  <LinearGradientCanvas {...rest} />
+{:else if layerCtx === 'html'}
+  <LinearGradientHtml {...rest} />
+{/if}

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

@@ -0,0 +1,5 @@
+export type { LinearGradientProps, LinearGradientPropsWithoutHTML, } from './LinearGradient.shared.svelte.js';
+import type { LinearGradientProps } from './LinearGradient.shared.svelte.js';
+declare const LinearGradient: import("svelte").Component<LinearGradientProps, {}, "ref">;
+type LinearGradient = ReturnType<typeof LinearGradient>;
+export default LinearGradient;

package/dist/components/LinearGradient/LinearGradient.svg.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+  export type {
+    LinearGradientProps,
+    LinearGradientPropsWithoutHTML,
+  } from './LinearGradient.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { createId } from '../../utils/createId.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import type { LinearGradientProps } from './LinearGradient.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('linearGradient-', uid),
+    stops = ['var(--tw-gradient-from)', 'var(--tw-gradient-to)'],
+    vertical = false,
+    x1 = '0%',
+    y1 = '0%',
+    x2 = vertical ? '0%' : '100%',
+    y2 = vertical ? '100%' : '0%',
+    rotate,
+    units = 'objectBoundingBox',
+    ref: refProp = $bindable(),
+    class: className,
+    stopsContent,
+    children,
+    ...rest
+  }: LinearGradientProps = $props();
+
+  let ref = $state<SVGLinearGradientElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
+</script>
+
+<defs>
+  <linearGradient
+    bind:this={ref}
+    {id}
+    {x1}
+    {y1}
+    {x2}
+    {y2}
+    gradientTransform={rotate ? `rotate(${rotate})` : ''}
+    gradientUnits={units}
+    {...extractLayerProps(rest, 'lc-linear-gradient')}
+  >
+    {#if stopsContent}
+      {@render stopsContent?.()}
+    {:else if stops}
+      {#each stops as stop, i}
+        {#if Array.isArray(stop)}
+          <stop
+            offset={stop[0]}
+            stop-color={stop[1]}
+            class={cls('lc-linear-gradient-stop', className)}
+          />
+        {:else}
+          <stop
+            offset="{i * (100 / (stops.length - 1))}%"
+            stop-color={stop}
+            class={cls('lc-linear-gradient-stop', className)}
+          />
+        {/if}
+      {/each}
+    {/if}
+  </linearGradient>
+</defs>
+
+{@render children?.({ id, gradient: `url(#${id})` })}

package/dist/components/LinearGradient/LinearGradient.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { LinearGradientProps, LinearGradientPropsWithoutHTML, } from './LinearGradient.shared.svelte.js';
+import type { LinearGradientProps } from './LinearGradient.shared.svelte.js';
+declare const LinearGradient: import("svelte").Component<LinearGradientProps, {}, "ref">;
+type LinearGradient = ReturnType<typeof LinearGradient>;
+export default LinearGradient;

package/dist/components/{Link.svelte → Link/Link.base.svelte}

@@ -1,142 +1,37 @@
 <script lang="ts" module>
-  import type { MarkerOptions } from './MarkerWrapper.svelte';
-  import type { Without } from '../utils/types.js';
-  import type { MotionNoneOption, MotionTweenOption } from '../utils/motion.svelte.js';
-  import { curveBumpX, curveBumpY, type CurveFactory } from 'd3-shape';
-  import type { LinkSweep, LinkType } from '../utils/linkUtils.js';
-  import type { PathProps, PathPropsWithoutHTML } from './Path.svelte';
-  import type { Accessor } from '../utils/common.js';
+  import type { Component } from 'svelte';
+  import type { LinkProps } from './Link.shared.svelte.js';
 
-  export type LinkPropsWithoutHTML = {
-    /**
-     * Source `x` coordinate. Accepts a `number` (pixel value), a string property
-     * name, or `(d) => value` accessor. Strings/functions use `ctx.xScale`.
-     */
-    x1?: Accessor;
-    /**
-     * Source `y` coordinate. Accepts a `number`, property name, or
-     * `(d) => value` accessor. Strings/functions use `ctx.yScale`.
-     */
-    y1?: Accessor;
-    /** Target `x` coordinate. See `x1`. */
-    x2?: Accessor;
-    /** Target `y` coordinate. See `y1`. */
-    y2?: Accessor;
-
-    /**
-     * Data for the link. In array mode (when `x1`/`y1`/`x2`/`y2` are strings or
-     * functions) this should be an array of rows; one path is rendered per row.
-     * In hierarchy/sankey mode, a single link object (`{source, target, ...}`).
-     * Defaults to `ctx.data` in array mode.
-     */
-    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;
-    /** Accessor returning the source node from `data` (hierarchy/sankey mode). */
-    source?: (d: any) => any;
-    /** Accessor returning the target node from `data` (hierarchy/sankey mode). */
-    target?: (d: any) => any;
-    /** Accessor returning `x` for a node (hierarchy/sankey mode). */
-    x?: (d: any) => any;
-    /** Accessor returning `y` for a node (hierarchy/sankey mode). */
-    y?: (d: any) => any;
-
-    /**
-     * The link path type.
-     *
-     * Set to `'d3'` to use a D3 curve function via the `curve` prop.
-     *
-     * @default 'd3'
-     */
-    type?: LinkType;
-
-    /**
-     * Corner radius (used by `'beveled'` and `'rounded'`).
-     *
-     * @default 20
-     */
-    radius?: number;
-
-    /**
-     * Bend angle in degrees for the `'swoop'` link type.
-     *
-     * @default 22.5
-     */
-    bend?: number;
-
-    /** D3 curve function (used when `type === 'd3'`). */
-    curve?: CurveFactory;
-
-    /** Sweep direction for preset types and d3 paths. */
-    sweep?: LinkSweep;
-
-    /**
-     * Natural flow direction (affects default curve and axis-dependent step
-     * curves). Also toggles x/y accessor logic in hierarchy mode.
-     */
-    orientation?: 'vertical' | 'horizontal';
-
-    /**
-     * Interpret coords as polar (`x` = angle, `y` = radius) and render in
-     * radial space. Defaults to `ctx.radial` when unset.
-     */
-    radial?: boolean;
-
-    /** Marker at both start and end points. */
-    marker?: MarkerOptions;
-    /** Marker at the middle point. */
-    markerMid?: MarkerOptions;
-    /** Marker at the start point. */
-    markerStart?: MarkerOptions;
-    /** Marker at the end point. */
-    markerEnd?: MarkerOptions;
-
-    motion?: MotionTweenOption | MotionNoneOption;
-
-    /**
-     * CSS class. In array mode, accepts a `(d) => string` function evaluated
-     * per datum.
-     */
-    class?: string | ((d: any) => string);
-  } & Omit<PathPropsWithoutHTML, 'class'>;
-
-  export type LinkProps = LinkPropsWithoutHTML & Without<PathProps, LinkPropsWithoutHTML>;
-
-  const FALLBACK_COORDS = { x: 0, y: 0 };
+  export type LinkBaseLayerComponents = {
+    Path: Component<any>;
+  };
 
-  function isAccessorAccessor(value: Accessor | undefined): boolean {
-    return typeof value === 'string' || typeof value === 'function';
-  }
+  export type LinkBaseProps = LinkProps & LinkBaseLayerComponents;
 </script>
 
 <script lang="ts">
+  import { curveBumpX, curveBumpY } from 'd3-shape';
   import {
     getLinkD3Path,
     getLinkPresetPath,
     getLinkRadialD3Path,
     getLinkRadialPresetPath,
-  } from '../utils/linkUtils.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import Path from './Path.svelte';
-  import { extractLayerProps } from '../utils/attributes.js';
-  import { accessor } from '../utils/common.js';
+  } from '../../utils/linkUtils.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { accessor, type Accessor } from '../../utils/common.js';
   import { cls } from '@layerstack/tailwind';
   import {
     createMotion,
     extractTweenConfig,
     type ResolvedMotion,
-  } from '../utils/motion.svelte.js';
+  } from '../../utils/motion.svelte.js';
   import { interpolatePath } from 'd3-interpolate-path';
+  import { LINK_FALLBACK_COORDS, isAccessorAccessor } from './Link.shared.svelte.js';
 
   const ctx = getChartContext();
 
   let {
+    Path,
     x1,
     y1,
     x2,
@@ -163,7 +58,7 @@
     pathData: pathDataProp,
     class: classProp,
     ...restProps
-  }: LinkProps = $props();
+  }: LinkBaseProps = $props();
 
   const radial = $derived(radialProp ?? ctx.radial ?? false);
 
@@ -185,7 +80,6 @@
     return orientation === 'vertical' ? 'horizontal-vertical' : 'vertical-horizontal';
   });
 
-  // Array/data mode: any of x1/y1/x2/y2 is a string or function
   const isArrayMode = $derived(
     isAccessorAccessor(x1) ||
       isAccessorAccessor(y1) ||
@@ -193,7 +87,6 @@
       isAccessorAccessor(y2)
   );
 
-  // Pixel mode: any of x1/y1/x2/y2 is a number (and not array mode)
   const isPixelMode = $derived(
     !isArrayMode &&
       (typeof x1 === 'number' ||
@@ -202,7 +95,6 @@
         typeof y2 === 'number')
   );
 
-  // --- Hierarchy/sankey accessors (used only when !isArrayMode && !isPixelMode) ---
   const sourceAccessor = $derived.by(() => {
     if (sourceProp) return sourceProp;
     if (sankey) return (d: any) => ({ node: d.source, y: d.y0, isSource: true });
@@ -229,7 +121,6 @@
     return (d: any) => (orientation === 'horizontal' ? d.x : d.y);
   });
 
-  // --- Array mode: resolve endpoint coords for each row ---
   const x1Accessor = $derived(accessor(x1 as Accessor));
   const y1Accessor = $derived(accessor(y1 as Accessor));
   const x2Accessor = $derived(accessor(x2 as Accessor));
@@ -252,21 +143,20 @@
     };
   };
 
-  // --- Single-path coords (pixel or hierarchy/sankey mode) ---
   const singleSourceCoords = $derived.by(() => {
     if (isPixelMode) {
       return { x: typeof x1 === 'number' ? x1 : 0, y: typeof y1 === 'number' ? y1 : 0 };
     }
-    if (!data) return FALLBACK_COORDS;
+    if (!data) return LINK_FALLBACK_COORDS;
     try {
       const sourceData = sourceAccessor(data);
-      if (sourceData == null) return FALLBACK_COORDS;
+      if (sourceData == null) return LINK_FALLBACK_COORDS;
       const xVal = xAccessor(sourceData);
       const yVal = yAccessor(sourceData);
       return { x: Number.isFinite(xVal) ? xVal : 0, y: Number.isFinite(yVal) ? yVal : 0 };
     } catch (e) {
       console.error('Error accessing source coordinates:', e, 'Data:', data);
-      return FALLBACK_COORDS;
+      return LINK_FALLBACK_COORDS;
     }
   });
 
@@ -274,16 +164,16 @@
     if (isPixelMode) {
       return { x: typeof x2 === 'number' ? x2 : 100, y: typeof y2 === 'number' ? y2 : 100 };
     }
-    if (!data) return FALLBACK_COORDS;
+    if (!data) return LINK_FALLBACK_COORDS;
     try {
       const targetData = targetAccessor(data);
-      if (targetData == null) return FALLBACK_COORDS;
+      if (targetData == null) return LINK_FALLBACK_COORDS;
       const xVal = xAccessor(targetData);
       const yVal = yAccessor(targetData);
       return { x: Number.isFinite(xVal) ? xVal : 0, y: Number.isFinite(yVal) ? yVal : 0 };
     } catch (e) {
       console.error('Error accessing target coordinates:', e, 'Data:', data);
-      return FALLBACK_COORDS;
+      return LINK_FALLBACK_COORDS;
     }
   });
 
@@ -300,7 +190,6 @@
     return getLinkPresetPath({ source, target, sweep, type, radius, bend });
   }
 
-  // --- Single-path case ---
   const singlePathData = $derived(
     isArrayMode ? '' : buildPath(singleSourceCoords, singleTargetCoords)
   );
@@ -309,21 +198,26 @@
   const tweenOptions: ResolvedMotion | undefined = extractedTween
     ? {
         type: extractedTween.type,
-        options: {
-          interpolate: interpolatePath,
-          ...extractedTween.options,
-        },
+        options: { interpolate: interpolatePath, ...extractedTween.options },
       }
     : undefined;
 
-  const motionPath = createMotion(
-    '',
-    () => singlePathData,
-    tweenOptions ? tweenOptions : { type: 'none' }
-  );
+  // Pass `tweenOptions` (possibly undefined) so `createMotion` takes its
+  // fast-path passthrough when no tween is configured — avoids allocating
+  // a MotionNone container + per-instance `$effect` that fires on every
+  // x1/y1/x2/y2 change. Critical for force-simulation graphs which can
+  // have hundreds of links updating on every tick.
+  const motionPath = createMotion('', () => singlePathData, tweenOptions);
+
+  // Stable getter handed to `<Path>` instead of `motionPath.current`.
+  // Reading `motionPath.current` directly in the template would subscribe
+  // *this* component's template to per-tick updates, forcing the entire
+  // `<Path>` block to re-evaluate (and re-spread props) on every change.
+  // By passing a function reference, the per-tick `current` read happens
+  // inside `<Path>`'s own template — the parent stays stable.
+  const getPathData = () => motionPath.current;
 
-  // --- Array mode paths ---
-  const arrayRows = $derived(isArrayMode ? (data ?? ctx.data ?? []) : []);
+  const arrayRows = $derived(isArrayMode ? data ?? ctx.data ?? [] : []);
 
   function resolvePerDatum<T>(value: T | ((d: any) => T) | undefined, d: any): T | undefined {
     return typeof value === 'function' ? (value as (d: any) => T)(d) : (value as T | undefined);
@@ -333,8 +227,6 @@
     return resolvePerDatum<string>(classProp as any, d);
   }
 
-  // Pull potentially-per-datum style props out of restProps so we can resolve
-  // each per row in array mode (e.g. stroke={(d) => colorScale(...)})
   const strokeProp = $derived((restProps as any).stroke);
   const fillProp = $derived((restProps as any).fill);
   const strokeWidthProp = $derived(
@@ -353,7 +245,6 @@
       {markerStart}
       {markerMid}
       {markerEnd}
-      {...extractLayerProps(restProps, 'lc-link')}
       {...restProps}
       stroke={resolvedStroke}
       fill={resolvePerDatum(fillProp, d)}
@@ -363,13 +254,12 @@
   {/each}
 {:else}
   <Path
-    pathData={motionPath.current}
+    pathData={getPathData}
     bind:pathRef
     {marker}
     {markerStart}
     {markerMid}
     {markerEnd}
-    {...extractLayerProps(restProps, 'lc-link')}
     {...restProps}
     class={cls('lc-link', typeof classProp === 'string' ? classProp : undefined)}
   />

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

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { LinkProps } from './Link.shared.svelte.js';
+export type LinkBaseLayerComponents = {
+    Path: Component<any>;
+};
+export type LinkBaseProps = LinkProps & LinkBaseLayerComponents;
+declare const Link: Component<LinkBaseProps, {}, "pathRef">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/Link/Link.canvas.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { LinkProps, LinkPropsWithoutHTML } from './Link.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import LinkBase from './Link.base.svelte';
+  import Path from '../Path/Path.canvas.svelte';
+  import type { LinkProps } from './Link.shared.svelte.js';
+
+  let props: LinkProps = $props();
+</script>
+
+<LinkBase {Path} {...props} />

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

@@ -0,0 +1,5 @@
+export type { LinkProps, LinkPropsWithoutHTML } from './Link.shared.svelte.js';
+import type { LinkProps } from './Link.shared.svelte.js';
+declare const Link: import("svelte").Component<LinkProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;