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

package/dist/components/Bars/Bars.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type { BarsProps, BarsPropsWithoutHTML } from './Bars.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import BarsSvg from './Bars.svg.svelte';
+  import BarsCanvas from './Bars.canvas.svelte';
+  import BarsHtml from './Bars.html.svelte';
+  import type { BarsProps } from './Bars.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: BarsProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <BarsSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <BarsCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <BarsHtml {...props} />
+{/if}

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

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

package/dist/components/Bars/Bars.svg.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  export type { BarsProps, BarsPropsWithoutHTML } from './Bars.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import BarsBase from './Bars.base.svelte';
+  import Bar from '../Bar/Bar.svg.svelte';
+  import Group from '../Group/Group.svg.svelte';
+
+  import type { BarsProps } from './Bars.shared.svelte.js';
+
+  let props: BarsProps = $props();
+</script>
+
+<BarsBase {Bar} {Group} {...props} />

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

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

package/dist/components/Blur/Blur.canvas.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  export type { BlurProps, BlurPropsWithoutHTML } from './Blur.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getChartContext } from '../../contexts/chart.js';
+  import type { BlurProps } from './Blur.shared.svelte.js';
+
+  let { stdDeviation = 5, children }: BlurProps = $props();
+
+  const chartCtx = getChartContext();
+
+  chartCtx.registerComponent({
+    name: 'Blur',
+    kind: 'group',
+    canvasRender: {
+      render: (ctx) => {
+        ctx.filter = `blur(${stdDeviation}px)`;
+      },
+      deps: () => [stdDeviation],
+    },
+  });
+</script>
+
+{@render children?.()}

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

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

package/dist/components/Blur/Blur.html.svelte

@@ -0,0 +1,11 @@
+<script lang="ts" module>
+  export type { BlurProps, BlurPropsWithoutHTML } from './Blur.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import type { BlurProps } from './Blur.shared.svelte.js';
+
+  let { children }: BlurProps = $props();
+</script>
+
+{@render children?.()}

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

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

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

@@ -1,4 +1,5 @@
-export type BlurProps = {
+import type { Snippet } from 'svelte';
+export type BlurPropsWithoutHTML = {
     /**
      * A unique id for the filter.
      */
@@ -15,7 +16,4 @@ export type BlurProps = {
      */
     children?: Snippet;
 };
-import type { Snippet } from 'svelte';
-declare const Blur: import("svelte").Component<BlurProps, {}, "">;
-type Blur = ReturnType<typeof Blur>;
-export default Blur;
+export type BlurProps = BlurPropsWithoutHTML;

package/dist/components/Blur/Blur.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type { BlurProps, BlurPropsWithoutHTML } from './Blur.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import BlurSvg from './Blur.svg.svelte';
+  import BlurCanvas from './Blur.canvas.svelte';
+  import BlurHtml from './Blur.html.svelte';
+  import type { BlurProps } from './Blur.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: BlurProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <BlurSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <BlurCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <BlurHtml {...props} />
+{/if}

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

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

package/dist/components/Blur/Blur.svg.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  export type { BlurProps, BlurPropsWithoutHTML } from './Blur.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import type { BlurProps } from './Blur.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let { id = createId('blur-', uid), stdDeviation = 5, children }: BlurProps = $props();
+</script>
+
+<defs>
+  <filter {id} class="lc-blur-filter">
+    <feGaussianBlur in="SourceGraphic" {stdDeviation} />
+  </filter>
+</defs>
+
+{#if children}
+  <g filter="url(#{id})" class="lc-blur-g">
+    {@render children()}
+  </g>
+{/if}

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

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

package/dist/components/BoxPlot/BoxPlot.base.svelte

@@ -0,0 +1,195 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { BoxPlotProps } from './BoxPlot.shared.svelte.js';
+
+  export type BoxPlotBaseLayerComponents = {
+    Group: Component<any>;
+    Rect: Component<any>;
+    Line: Component<any>;
+    Circle: Component<any>;
+  };
+
+  export type BoxPlotBaseProps = BoxPlotProps & BoxPlotBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import type { PointerEventHandler } from 'svelte/elements';
+  import { cls } from '@layerstack/tailwind';
+  import { quantile } from 'd3-array';
+
+  import { accessor } from '../../utils/common.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { isScaleBand } from '../../utils/scales.svelte.js';
+
+  const ctx = getChartContext();
+
+  let {
+    Group,
+    Rect,
+    Line,
+    Circle,
+    data,
+    min: minProp,
+    q1: q1Prop,
+    median: medianProp,
+    q3: q3Prop,
+    max: maxProp,
+    outliers: outliersProp,
+    values: valuesProp,
+    iqrMultiplier = 1.5,
+    width: widthProp,
+    capWidth = 0.5,
+    radius = 0,
+    outlierRadius = 3,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth = 1,
+    opacity,
+    tooltip,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
+    class: className,
+    ...restProps
+  }: BoxPlotBaseProps = $props();
+
+  ctx.registerComponent({ name: 'BoxPlot', kind: 'composite-mark' });
+
+  const computedStats = $derived.by(() => {
+    if (!valuesProp) return null;
+
+    const valuesAccessor = accessor(valuesProp);
+    const raw: number[] = valuesAccessor(data);
+    if (!raw || !Array.isArray(raw) || raw.length === 0) return null;
+
+    const sorted = Float64Array.from(raw).sort();
+    const q1 = quantile(sorted, 0.25)!;
+    const q3 = quantile(sorted, 0.75)!;
+    const med = quantile(sorted, 0.5)!;
+    const iqr = q3 - q1;
+    const lowerFence = q1 - iqrMultiplier * iqr;
+    const upperFence = q3 + iqrMultiplier * iqr;
+
+    const outliers: number[] = [];
+    let min = Infinity;
+    let max = -Infinity;
+
+    for (const v of sorted) {
+      if (v < lowerFence || v > upperFence) {
+        outliers.push(v);
+      } else {
+        if (v < min) min = v;
+        if (v > max) max = v;
+      }
+    }
+
+    if (min === Infinity) min = q1;
+    if (max === -Infinity) max = q3;
+
+    return { min, q1, median: med, q3, max, outliers };
+  });
+
+  const minVal = $derived(minProp != null ? accessor(minProp)(data) : computedStats?.min);
+  const q1Val = $derived(q1Prop != null ? accessor(q1Prop)(data) : computedStats?.q1);
+  const medianVal = $derived(
+    medianProp != null ? accessor(medianProp)(data) : computedStats?.median
+  );
+  const q3Val = $derived(q3Prop != null ? accessor(q3Prop)(data) : computedStats?.q3);
+  const maxVal = $derived(maxProp != null ? accessor(maxProp)(data) : computedStats?.max);
+  const outliersVal = $derived<number[]>(
+    outliersProp != null ? accessor(outliersProp)(data) ?? [] : computedStats?.outliers ?? []
+  );
+
+  const isVertical = $derived(ctx.valueAxis === 'y');
+
+  const categoryPos = $derived.by(() => {
+    const catAccessor = isVertical ? ctx.x : ctx.y;
+    const catScale = isVertical ? ctx.xScale : ctx.yScale;
+    const pos = catScale(catAccessor(data));
+    const bandwidth = isScaleBand(catScale) ? catScale.bandwidth() : 0;
+    return pos + bandwidth / 2;
+  });
+
+  const boxWidth = $derived.by(() => {
+    if (widthProp != null) return widthProp;
+    const catScale = isVertical ? ctx.xScale : ctx.yScale;
+    return isScaleBand(catScale) ? catScale.bandwidth() * 0.6 : 20;
+  });
+
+  const whiskerCapWidth = $derived(boxWidth * capWidth);
+  const valueScale = $derived(isVertical ? ctx.yScale : ctx.xScale);
+
+  const minPos = $derived(minVal != null ? valueScale(minVal) : 0);
+  const q1Pos = $derived(q1Val != null ? valueScale(q1Val) : 0);
+  const medianPos = $derived(medianVal != null ? valueScale(medianVal) : 0);
+  const q3Pos = $derived(q3Val != null ? valueScale(q3Val) : 0);
+  const maxPos = $derived(maxVal != null ? valueScale(maxVal) : 0);
+
+  const onPointerEnter: PointerEventHandler<Element> = (e) => {
+    onpointerenter?.(e);
+    if (tooltip) ctx.tooltip.show(e, data);
+  };
+  const onPointerMove: PointerEventHandler<Element> = (e) => {
+    onpointermove?.(e);
+    if (tooltip) ctx.tooltip.show(e, data);
+  };
+  const onPointerLeave: PointerEventHandler<Element> = (e) => {
+    onpointerleave?.(e);
+    if (tooltip) ctx.tooltip.hide();
+  };
+</script>
+
+{#if minVal != null && q1Val != null && medianVal != null && q3Val != null && maxVal != null}
+  <Group
+    class="lc-boxplot"
+    {opacity}
+    onpointerenter={onPointerEnter}
+    onpointermove={onPointerMove}
+    onpointerleave={onPointerLeave}
+  >
+    {#if isVertical}
+      <Line x1={categoryPos} y1={minPos} x2={categoryPos} y2={q1Pos} {stroke} {strokeWidth} class={cls('lc-boxplot-whisker', className)} />
+      <Line x1={categoryPos} y1={q3Pos} x2={categoryPos} y2={maxPos} {stroke} {strokeWidth} class={cls('lc-boxplot-whisker', className)} />
+      <Line x1={categoryPos - whiskerCapWidth / 2} y1={minPos} x2={categoryPos + whiskerCapWidth / 2} y2={minPos} {stroke} {strokeWidth} class={cls('lc-boxplot-cap', className)} />
+      <Line x1={categoryPos - whiskerCapWidth / 2} y1={maxPos} x2={categoryPos + whiskerCapWidth / 2} y2={maxPos} {stroke} {strokeWidth} class={cls('lc-boxplot-cap', className)} />
+      <Rect x={categoryPos - boxWidth / 2} y={Math.min(q1Pos, q3Pos)} width={boxWidth} height={Math.abs(q3Pos - q1Pos)} {fill} {fillOpacity} {stroke} {strokeWidth} rx={radius} class={cls('lc-boxplot-box', className)} />
+      <Line x1={categoryPos - boxWidth / 2} y1={medianPos} x2={categoryPos + boxWidth / 2} y2={medianPos} {stroke} strokeWidth={strokeWidth * 2} class={cls('lc-boxplot-median', className)} />
+      {#each outliersVal as outlier, i (i)}
+        <Circle cx={categoryPos} cy={valueScale(outlier)} r={outlierRadius} {stroke} {strokeWidth} class={cls('lc-boxplot-outlier', className)} />
+      {/each}
+    {:else}
+      <Line x1={minPos} y1={categoryPos} x2={q1Pos} y2={categoryPos} {stroke} {strokeWidth} class={cls('lc-boxplot-whisker', className)} />
+      <Line x1={q3Pos} y1={categoryPos} x2={maxPos} y2={categoryPos} {stroke} {strokeWidth} class={cls('lc-boxplot-whisker', className)} />
+      <Line x1={minPos} y1={categoryPos - whiskerCapWidth / 2} x2={minPos} y2={categoryPos + whiskerCapWidth / 2} {stroke} {strokeWidth} class={cls('lc-boxplot-cap', className)} />
+      <Line x1={maxPos} y1={categoryPos - whiskerCapWidth / 2} x2={maxPos} y2={categoryPos + whiskerCapWidth / 2} {stroke} {strokeWidth} class={cls('lc-boxplot-cap', className)} />
+      <Rect x={Math.min(q1Pos, q3Pos)} y={categoryPos - boxWidth / 2} width={Math.abs(q3Pos - q1Pos)} height={boxWidth} {fill} {fillOpacity} {stroke} {strokeWidth} rx={radius} class={cls('lc-boxplot-box', className)} />
+      <Line x1={medianPos} y1={categoryPos - boxWidth / 2} x2={medianPos} y2={categoryPos + boxWidth / 2} {stroke} strokeWidth={strokeWidth * 2} class={cls('lc-boxplot-median', className)} />
+      {#each outliersVal as outlier, i (i)}
+        <Circle cx={valueScale(outlier)} cy={categoryPos} r={outlierRadius} {stroke} {strokeWidth} class={cls('lc-boxplot-outlier', className)} />
+      {/each}
+    {/if}
+  </Group>
+{/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-boxplot)) {
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    :global(:where(.lc-boxplot-box)) {
+      --fill-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 15%,
+        transparent
+      );
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    :global(:where(.lc-boxplot-outlier)) {
+      --fill-color: none;
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { Component } from 'svelte';
+import type { BoxPlotProps } from './BoxPlot.shared.svelte.js';
+export type BoxPlotBaseLayerComponents = {
+    Group: Component<any>;
+    Rect: Component<any>;
+    Line: Component<any>;
+    Circle: Component<any>;
+};
+export type BoxPlotBaseProps = BoxPlotProps & BoxPlotBaseLayerComponents;
+declare const BoxPlot: Component<BoxPlotBaseProps, {}, "">;
+type BoxPlot = ReturnType<typeof BoxPlot>;
+export default BoxPlot;

package/dist/components/BoxPlot/BoxPlot.canvas.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type { BoxPlotProps, BoxPlotPropsWithoutHTML } from './BoxPlot.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import BoxPlotBase from './BoxPlot.base.svelte';
+  import Group from '../Group/Group.canvas.svelte';
+  import Rect from '../Rect/Rect.canvas.svelte';
+  import Line from '../Line/Line.canvas.svelte';
+  import Circle from '../Circle/Circle.canvas.svelte';
+  import type { BoxPlotProps } from './BoxPlot.shared.svelte.js';
+
+  let props: BoxPlotProps = $props();
+</script>
+
+<BoxPlotBase {Group} {Rect} {Line} {Circle} {...props} />

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

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

package/dist/components/BoxPlot/BoxPlot.shared.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { CommonStyleProps, CommonEvents, Without } from '../../utils/types.js';
+import type { Accessor } from '../../utils/common.js';
+export type BoxPlotPropsWithoutHTML = {
+    data: Object;
+    min?: Accessor;
+    q1?: Accessor;
+    median?: Accessor;
+    q3?: Accessor;
+    max?: Accessor;
+    outliers?: Accessor;
+    values?: Accessor;
+    /** @default 1.5 */
+    iqrMultiplier?: number;
+    width?: number;
+    /** @default 0.5 */
+    capWidth?: number;
+    /** @default 0 */
+    radius?: number;
+    /** @default 3 */
+    outlierRadius?: number;
+    tooltip?: boolean;
+} & CommonStyleProps;
+export type BoxPlotProps = BoxPlotPropsWithoutHTML & Without<SVGAttributes<SVGElement>, BoxPlotPropsWithoutHTML> & CommonEvents;

package/dist/components/BoxPlot/BoxPlot.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  export type { BoxPlotProps, BoxPlotPropsWithoutHTML } from './BoxPlot.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import BoxPlotSvg from './BoxPlot.svg.svelte';
+  import BoxPlotCanvas from './BoxPlot.canvas.svelte';
+  import type { BoxPlotProps } from './BoxPlot.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: BoxPlotProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <BoxPlotSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <BoxPlotCanvas {...props} />
+{/if}

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

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

package/dist/components/BoxPlot/BoxPlot.svg.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type { BoxPlotProps, BoxPlotPropsWithoutHTML } from './BoxPlot.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import BoxPlotBase from './BoxPlot.base.svelte';
+  import Group from '../Group/Group.svg.svelte';
+  import Rect from '../Rect/Rect.svg.svelte';
+  import Line from '../Line/Line.svg.svelte';
+  import Circle from '../Circle/Circle.svg.svelte';
+  import type { BoxPlotProps } from './BoxPlot.shared.svelte.js';
+
+  let props: BoxPlotProps = $props();
+</script>
+
+<BoxPlotBase {Group} {Rect} {Line} {Circle} {...props} />

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

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

package/dist/components/BrushContext.svelte.test.js

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { tick } from 'svelte';
-import Chart from './Chart.svelte';
+import Chart from "./Chart/Chart.svelte";
 import BrushTestHarness from './tests/BrushTestHarness.svelte';
 const data = [
     { x: 0, y: 10 },

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

@@ -1,74 +1,29 @@
 <script lang="ts" module>
-  export type CalendarCell = {
-    x: number;
-    y: number;
-    color: any;
-    data: any;
-  };
-
-  export type CalendarPropsWithoutHTML = {
-    /**
-     * The start date of the calendar.
-     */
-    start: Date;
-
-    /**
-     * The end date of the calendar.
-     */
-    end: Date;
-
-    /**
-     * Size of the cell in the calendar.
-     *
-     * - `number`: sets width/height as same value (square).
-     * - `array`: sets as [width,height].
-     * - `undefined/omitted`: is derived from Chart width/height
-     */
-    cellSize?: number | [number, number];
+  import type { Component } from 'svelte';
+  import type { CalendarCell, CalendarPropsWithoutHTML } from './Calendar.shared.svelte.js';
 
-    /**
-     * Enable drawing path around each month.  If object, pass as props to underlying <path>
-     *
-     * @default false
-     */
-    monthPath?: boolean | Partial<ComponentProps<typeof MonthPath>>;
-
-    /**
-     * Props to pass to the `<text>` element for month labels.
-     */
-    monthLabel?: boolean | Partial<ComponentProps<typeof Text>>;
-
-    /**
-     * Setup pointer events to show tooltip for related data
-     */
-    tooltip?: boolean;
-
-    children?: Snippet<[{ cells: CalendarCell[]; cellSize: [number, number] }]>;
-  } & Omit<
-    RectPropsWithoutHTML,
-    'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'
-  >;
+  export type CalendarBaseLayerComponents = {
+    Rect: Component<any>;
+    Text: Component<any>;
+  };
 
-  export type CalendarProps = CalendarPropsWithoutHTML &
-    Without<SVGAttributes<SVGRectElement>, CalendarPropsWithoutHTML>;
+  export type CalendarBaseProps = CalendarPropsWithoutHTML & CalendarBaseLayerComponents;
 </script>
 
 <script lang="ts">
-  import { type ComponentProps, type Snippet } from 'svelte';
   import { timeDays, timeMonths, timeWeek } from 'd3-time';
   import { index } from 'd3-array';
   import { format } from '@layerstack/utils';
 
-  import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
-  import MonthPath from './MonthPath.svelte';
-  import Text from './Text.svelte';
-  import { chartDataArray } from '../utils/common.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import type { SVGAttributes } from 'svelte/elements';
-  import type { Without } from '../utils/types.js';
-  import { extractLayerProps } from '../utils/attributes.js';
+  // MonthPath isn't split — only used here when `monthPath` is set.
+  import MonthPath from '../MonthPath.svelte';
+  import { chartDataArray } from '../../utils/common.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
 
   let {
+    Rect,
+    Text,
     end,
     start,
     cellSize: cellSizeProp,
@@ -77,7 +32,7 @@
     tooltip,
     children,
     ...restProps
-  }: CalendarPropsWithoutHTML = $props();
+  }: CalendarBaseProps = $props();
 
   const ctx = getChartContext();
 
@@ -86,10 +41,8 @@
   const yearWeeks = $derived(timeWeek.count(start, end));
   const chartCellWidth = $derived(ctx.width / (yearWeeks + 1));
   const chartCellHeight = $derived(ctx.height / 7);
-  // Use smallest to fit, and keep square aspect
   const chartCellSize = $derived(Math.min(chartCellWidth, chartCellHeight));
 
-  // [width, height]
   const cellSize: [number, number] = $derived(
     Array.isArray(cellSizeProp)
       ? cellSizeProp
@@ -125,8 +78,8 @@
       width={cellSize[0]}
       height={cellSize[1]}
       fill={cell.color}
-      onpointermove={(e) => tooltip && ctx.tooltip?.show(e, cell.data)}
-      onpointerleave={(e) => tooltip && ctx.tooltip?.hide()}
+      onpointermove={(e: PointerEvent) => tooltip && ctx.tooltip?.show(e, cell.data)}
+      onpointerleave={() => tooltip && ctx.tooltip?.hide()}
       strokeWidth={1}
       {...extractLayerProps(restProps, 'lc-calendar-cell')}
     />

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

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+import type { CalendarPropsWithoutHTML } from './Calendar.shared.svelte.js';
+export type CalendarBaseLayerComponents = {
+    Rect: Component<any>;
+    Text: Component<any>;
+};
+export type CalendarBaseProps = CalendarPropsWithoutHTML & CalendarBaseLayerComponents;
+declare const Calendar: Component<CalendarBaseProps, {}, "">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/Calendar/Calendar.canvas.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  export type {
+    CalendarProps,
+    CalendarPropsWithoutHTML,
+    CalendarCell,
+  } from './Calendar.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import CalendarBase from './Calendar.base.svelte';
+  import Rect from '../Rect/Rect.canvas.svelte';
+  import Text from '../Text/Text.canvas.svelte';
+  import type { CalendarPropsWithoutHTML } from './Calendar.shared.svelte.js';
+
+  let props: CalendarPropsWithoutHTML = $props();
+</script>
+
+<CalendarBase {Rect} {Text} {...props} />

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

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