layerchart 2.0.0-next.61 → 2.0.0-next.63

package/dist/components/Dodge/Dodge.test.js

@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest';
+import { dodge } from './Dodge.shared.svelte.js';
+/** Build inputs for the circular case (`rx === ry === r`). */
+function input(arr) {
+    return arr.map((d, index) => ({
+        x: d.x,
+        rx: d.r,
+        ry: d.r,
+        data: { id: d.id },
+        index,
+    }));
+}
+/** Build inputs for rectangular cases (per-axis half-extents). */
+function rectInput(arr) {
+    return arr.map((d, index) => ({
+        x: d.x,
+        rx: d.rx,
+        ry: d.ry,
+        data: { id: d.id },
+        index,
+    }));
+}
+describe('dodge() — circular packing', () => {
+    it('places a single item at the natural anchor position', () => {
+        const out = dodge(input([{ id: 'a', x: 50, r: 10 }]), {
+            axis: 'y',
+            anchor: 'bottom',
+            padding: 0,
+            baseline: 100,
+        });
+        expect(out).toHaveLength(1);
+        expect(out[0].x).toBe(50);
+        expect(out[0].y).toBe(90); // baseline - r
+    });
+    it('places non-overlapping items both at the anchor', () => {
+        // Two items 100px apart, r=10 each — no horizontal overlap, both can sit at the bottom
+        const out = dodge(input([
+            { id: 'a', x: 0, r: 10 },
+            { id: 'b', x: 100, r: 10 },
+        ]), { axis: 'y', anchor: 'bottom', padding: 0, baseline: 100 });
+        expect(out[0].y).toBe(90);
+        expect(out[1].y).toBe(90);
+    });
+    it('stacks overlapping items vertically', () => {
+        // Two items at the same x — must stack with a gap ≥ r1 + r2 + padding = 21.
+        // padding is also applied to the chart edge, so the first item sits 1px
+        // above the bottom (y=89, not 90).
+        const out = dodge(input([
+            { id: 'a', x: 50, r: 10 },
+            { id: 'b', x: 50, r: 10 },
+        ]), { axis: 'y', anchor: 'bottom', padding: 1, baseline: 100 });
+        expect(out[0].y).toBe(89);
+        expect(out[1].y).toBeCloseTo(89 - 21, 5); // gap of sumR+padding
+    });
+    it('returns items in original input order', () => {
+        const out = dodge(input([
+            { id: 'small', x: 50, r: 5 },
+            { id: 'large', x: 50, r: 20 },
+        ]), { axis: 'y', anchor: 'bottom', padding: 0, baseline: 100 });
+        expect(out[0].data.id).toBe('small');
+        expect(out[1].data.id).toBe('large');
+        // Algorithm processes input order: small placed first at bottom (y=95),
+        // then large stacks above.
+        expect(out[0].y).toBe(95);
+        expect(out[1].y).toBeLessThan(95);
+    });
+    it('respects anchor=top (stacks downward)', () => {
+        const out = dodge(input([
+            { id: 'a', x: 50, r: 10 },
+            { id: 'b', x: 50, r: 10 },
+        ]), { axis: 'y', anchor: 'top', padding: 0, baseline: 0 });
+        expect(out[0].y).toBe(10); // first at top
+        expect(out[1].y).toBeCloseTo(30, 5); // second below, gap = r1+r2 = 20
+    });
+    it('swaps axes for axis=x', () => {
+        const out = dodge(input([{ id: 'a', x: 30, r: 5 }]), {
+            axis: 'x',
+            anchor: 'left',
+            padding: 0,
+            baseline: 0,
+        });
+        expect(out[0].x).toBe(5); // dodged: at left edge
+        expect(out[0].y).toBe(30); // anchor y preserved
+    });
+});
+describe('dodge() — rectangular packing (rx + ry)', () => {
+    // ry = 8 ⇒ row spacing = 2 * ry = 16 (matches the old `rowHeight: 16` cases).
+    it('places non-overlapping items in row 0', () => {
+        const out = dodge(rectInput([
+            { id: 'a', x: 0, rx: 20, ry: 8 }, // spans -20 to 20
+            { id: 'b', x: 100, rx: 20, ry: 8 }, // spans 80 to 120
+        ]), { axis: 'y', anchor: 'bottom', padding: 0, baseline: 200, rectangular: true });
+        // Row 0 center from bottom = baseline - ry = 192
+        expect(out[0].y).toBe(192);
+        expect(out[1].y).toBe(192);
+    });
+    it('stacks horizontally-overlapping items into separate rows', () => {
+        const out = dodge(rectInput([
+            { id: 'a', x: 50, rx: 30, ry: 8 },
+            { id: 'b', x: 60, rx: 30, ry: 8 },
+            { id: 'c', x: 70, rx: 30, ry: 8 },
+        ]), { axis: 'y', anchor: 'bottom', padding: 0, baseline: 200, rectangular: true });
+        // Input order: a → row 0, b overlaps a → row 1, c overlaps both → row 2
+        // Row centers from bottom: 192, 176, 160.
+        expect(out[0].y).toBe(192);
+        expect(out[1].y).toBe(176);
+        expect(out[2].y).toBe(160);
+    });
+    it("reuses row 0 when later items don't overlap earlier ones in that row", () => {
+        const out = dodge(rectInput([
+            { id: 'a', x: 0, rx: 10, ry: 8 },
+            { id: 'b', x: 5, rx: 10, ry: 8 }, // overlaps a → row 1
+            { id: 'c', x: 100, rx: 10, ry: 8 }, // far from both → row 0
+        ]), { axis: 'y', anchor: 'bottom', padding: 0, baseline: 200, rectangular: true });
+        expect(out[0].y).toBe(192);
+        expect(out[1].y).toBe(176);
+        expect(out[2].y).toBe(192);
+    });
+    it('respects anchor=top for rectangular mode', () => {
+        const out = dodge(rectInput([
+            { id: 'a', x: 50, rx: 30, ry: 8 },
+            { id: 'b', x: 60, rx: 30, ry: 8 },
+        ]), { axis: 'y', anchor: 'top', padding: 0, baseline: 0, rectangular: true });
+        // Row 0 from top: 0 + ry = 8. Row 1: 24.
+        expect(out[0].y).toBe(8);
+        expect(out[1].y).toBe(24);
+    });
+});

package/dist/components/Image/Image.html.svelte

@@ -104,11 +104,3 @@
     {...rest as any}
   />
 {/if}
-
-<style>
-  @layer base {
-    :global(:where(.lc-image)) {
-      pointer-events: none;
-    }
-  }
-</style>

package/dist/components/Image/Image.svg.svelte

@@ -127,12 +127,4 @@
     {opacity}
     class={cls('lc-image', className)}
   />
-{/if}
-
-<style>
-  @layer base {
-    :global(:where(.lc-image)) {
-      pointer-events: none;
-    }
-  }
-</style>
+{/if}

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

@@ -18,7 +18,6 @@
     getLinkRadialPresetPath,
   } from '../../utils/linkUtils.js';
   import { getChartContext } from '../../contexts/chart.js';
-  import { extractLayerProps } from '../../utils/attributes.js';
   import { accessor, type Accessor } from '../../utils/common.js';
   import { cls } from '@layerstack/tailwind';
   import {
@@ -203,11 +202,20 @@
       }
     : 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;
 
   const arrayRows = $derived(isArrayMode ? data ?? ctx.data ?? [] : []);
 
@@ -237,7 +245,6 @@
       {markerStart}
       {markerMid}
       {markerEnd}
-      {...extractLayerProps(restProps, 'lc-link')}
       {...restProps}
       stroke={resolvedStroke}
       fill={resolvePerDatum(fillProp, d)}
@@ -247,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/Path/Path.canvas.svelte

@@ -9,9 +9,12 @@
   import { createKey } from '../../utils/key.svelte.js';
   import { PathState, type PathProps } from './Path.shared.svelte.js';
 
-  let { ...rest }: PathProps = $props();
+  let { pathData, ...rest }: PathProps = $props();
 
-  const c = new PathState(() => rest as PathProps);
+  const c = new PathState(
+    () => pathData,
+    () => rest as PathProps
+  );
 
   function render(
     ctx: CanvasRenderingContext2D,

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

@@ -7,10 +7,15 @@ import type { ChartState } from '../../states/chart.svelte.js';
 import type { draw as _drawTransition } from 'svelte/transition';
 export type PathPropsWithoutHTML = {
     /**
-     * Pass `<path d={...} />` explicitly instead of calculating
-     * from data / context
+     * The `d` attribute of the rendered `<path>`.
+     *
+     * Accepts either a value (resolved at call site) or a function that
+     * returns the current value. Passing a function lets the parent avoid
+     * re-rendering its own template on every change to the path data —
+     * useful when a parent like `Link` / `Spline` / `Area` updates the
+     * path on every animation tick across hundreds of instances.
      */
-    pathData?: string | undefined | null;
+    pathData?: string | undefined | null | (() => string | undefined | null);
     /**
      * Whether to animate the drawing of the path over time.
      * Pass either `true` or an object with transition options to
@@ -66,5 +71,13 @@ export declare class PathState {
     chartCtx: ChartState;
     get tweenedPathData(): any;
     drawKey: symbol;
-    constructor(getProps: () => PathProps);
+    /**
+     * @param getPathData  Hot-path getter — reads only `pathData`. Kept separate from
+     *                     `getProps` so the `<path d=...>` updater (and the canvas
+     *                     `tweenedPathData` consumer) does not subscribe to every
+     *                     Path prop on every tick.
+     * @param getProps     Full-props getter — used for one-time / cold-path config
+     *                     (motion, draw).
+     */
+    constructor(getPathData: () => PathProps['pathData'], getProps?: () => PathProps);
 }

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

@@ -2,11 +2,20 @@ import { interpolatePath } from 'd3-interpolate-path';
 import { flattenPathData } from '../../utils/path.js';
 import { createMotion, extractTweenConfig, } from '../../utils/motion.svelte.js';
 import { getChartContext } from '../../contexts/chart.js';
+/** Resolve `pathData` whether it was passed as a value or a getter function. */
+function resolvePathData(v) {
+    return typeof v === 'function' ? v() : v;
+}
 /**
  * Reactive state shared by every per-layer Path variant.
  */
 export class PathState {
-    #getProps = () => ({});
+    // Hot-path getter: reads only `pathData` (or invokes the function-getter form).
+    // Kept separate from the full-props getter so that the `<path d=...>` template
+    // updater does not subscribe to every Path prop on every read — critical for
+    // mark-heavy scenes (force-simulation graphs with hundreds of links updating
+    // per tick) where pre-fix each tween read re-evaluated all 15+ props.
+    #getPathData;
     // Contexts
     chartCtx = getChartContext();
     // Path data tween source — the actual `d` attribute / canvas render input
@@ -16,8 +25,16 @@ export class PathState {
     }
     // Re-key trigger for draw transitions
     drawKey = $state(Symbol());
-    constructor(getProps) {
-        this.#getProps = getProps;
+    /**
+     * @param getPathData  Hot-path getter — reads only `pathData`. Kept separate from
+     *                     `getProps` so the `<path d=...>` updater (and the canvas
+     *                     `tweenedPathData` consumer) does not subscribe to every
+     *                     Path prop on every tick.
+     * @param getProps     Full-props getter — used for one-time / cold-path config
+     *                     (motion, draw).
+     */
+    constructor(getPathData, getProps = () => ({})) {
+        this.#getPathData = () => resolvePathData(getPathData());
         const initial = getProps();
         const extractedTween = extractTweenConfig(initial.motion);
         const tweenedOptions = extractedTween
@@ -32,18 +49,19 @@ export class PathState {
                 // Fast initial render when not tweened
                 return '';
             }
-            else if (initial.pathData) {
-                return flattenPathData(initial.pathData, Math.min(this.chartCtx.yScale(0) ?? this.chartCtx.yRange[0], this.chartCtx.yRange[0]));
+            const resolved = resolvePathData(getPathData());
+            if (resolved) {
+                return flattenPathData(resolved, Math.min(this.chartCtx.yScale(0) ?? this.chartCtx.yRange[0], this.chartCtx.yRange[0]));
             }
             return '';
         })();
-        this.#tweenedState = createMotion(defaultPathData, () => getProps().pathData, tweenedOptions);
+        this.#tweenedState = createMotion(defaultPathData, this.#getPathData, tweenedOptions);
         // Re-trigger draw transition when path data changes
         $effect(() => {
             if (!getProps().draw)
                 return;
-            // Touch dependency
-            void getProps().pathData;
+            // Touch dependency (resolves getter form too)
+            void this.#getPathData();
             this.drawKey = Symbol();
         });
     }

package/dist/components/Path/Path.svg.svelte

@@ -16,7 +16,7 @@
   const uid = $props.id();
 
   let {
-    pathRef: pathRefProp = $bindable(),
+    pathRef = $bindable(),
     marker,
     markerStart: markerStartProp,
     markerMid: markerMidProp,
@@ -24,29 +24,35 @@
     startContent,
     endContent,
     draw,
+    motion,
+    // Extracted out of `rest` so the `<path>` element's `{...rest}`
+    // spread doesn't re-evaluate on every frame in mark-heavy scenes
+    // (force-simulation graphs with hundreds of links updating per tick).
+    // - `pathData`: changes every frame
+    // - `class`: parents typically pass `cls(...)` which produces a new
+    //   string reference per parent render
+    // - styling props: explicit on the <path> element below, no need to
+    //   leak them through the spread
+    pathData: _pathData,
+    class: classProp,
+    fill: fillProp,
+    fillOpacity: fillOpacityProp,
+    stroke: strokeProp,
+    strokeOpacity: strokeOpacityProp,
+    strokeWidth: strokeWidthProp,
+    opacity: opacityProp,
     ...rest
   }: PathProps = $props();
 
+  // Pass `pathData` as its own getter so the hot-path tween read only subscribes
+  // to `pathData` (which changes per tick on force sims) and not to every other
+  // Path prop. Pre-fix the per-tick `<path d=...>` updater re-read all 15+ props
+  // through `getProps()` on each force-sim tick × hundreds of paths.
   const c = new PathState(
-    () =>
-      ({
-        marker,
-        markerStart: markerStartProp,
-        markerMid: markerMidProp,
-        markerEnd: markerEndProp,
-        startContent,
-        endContent,
-        draw,
-        ...rest,
-      }) as PathProps
+    () => _pathData,
+    () => ({ draw, motion }) as PathProps
   );
 
-  let pathRef = $state<SVGPathElement>();
-
-  $effect.pre(() => {
-    pathRefProp = pathRef;
-  });
-
   const markerStart = $derived(markerStartProp ?? marker);
   const markerMid = $derived(markerMidProp ?? marker);
   const markerEnd = $derived(markerEndProp ?? marker);
@@ -56,7 +62,6 @@
   const markerEndId = $derived(markerEnd ? createId('marker-end', uid) : '');
 
   const drawTransition = $derived(draw ? _drawTransition : () => ({}));
-
   let startPoint = $state<DOMPoint | undefined>();
 
   const endPointDuration = $derived.by(() => {
@@ -70,60 +75,70 @@
     return 800;
   });
 
-  const endPoint = createControlledMotion<DOMPoint | undefined>(
-    undefined,
-    draw
-      ? {
-          type: 'tween',
-          duration: () => endPointDuration,
-          easing: typeof draw === 'object' && draw.easing ? draw.easing : cubicInOut,
-          interpolate() {
-            return (t: number) => {
-              const totalLength = pathRef?.getTotalLength() ?? 0;
-              const point = pathRef?.getPointAtLength(totalLength * t);
-              return point;
-            };
-          },
-        }
-      : { type: 'none' }
-  );
-
-  $effect(() => {
-    if (!startContent && !endContent) return;
-    // Track path data changes
-    void c.tweenedPathData;
-    if (!pathRef) return;
-
-    tick().then(() => {
+  // Only allocate the controlled motion container when `draw` is configured;
+  // otherwise the per-Path `MotionNone` × hundreds of paths was a measurable
+  // mount-time cost in mark-heavy scenes.
+  const endPoint = draw
+    ? createControlledMotion<DOMPoint | undefined>(undefined, {
+        type: 'tween',
+        duration: () => endPointDuration,
+        easing: typeof draw === 'object' && draw.easing ? draw.easing : cubicInOut,
+        interpolate() {
+          return (t: number) => {
+            const totalLength = pathRef?.getTotalLength() ?? 0;
+            const point = pathRef?.getPointAtLength(totalLength * t);
+            return point;
+          };
+        },
+      })
+    : null;
+
+  // Only set up path-end tracking when startContent/endContent require it.
+  if (startContent || endContent) {
+    $effect(() => {
+      // Track path data changes
+      void c.tweenedPathData;
       if (!pathRef) return;
-      const totalLength = pathRef.getTotalLength();
-      if (!totalLength) return;
-      startPoint = pathRef.getPointAtLength(0);
-      endPoint.target = pathRef.getPointAtLength(totalLength);
+
+      tick().then(() => {
+        if (!pathRef) return;
+        const totalLength = pathRef.getTotalLength();
+        if (!totalLength) return;
+        startPoint = pathRef.getPointAtLength(0);
+        if (endPoint) {
+          endPoint.target = pathRef.getPointAtLength(totalLength);
+        }
+      });
     });
-  });
+  }
 </script>
 
 {#key c.drawKey}
   <path
     {...rest as any}
     d={c.tweenedPathData}
-    fill={rest.fill}
-    fill-opacity={rest.fillOpacity}
-    stroke={rest.stroke}
-    stroke-opacity={rest.strokeOpacity}
-    stroke-width={rest.strokeWidth}
-    opacity={rest.opacity}
-    class={cls('lc-path', rest.class as string | undefined)}
+    fill={fillProp}
+    fill-opacity={fillOpacityProp}
+    stroke={strokeProp}
+    stroke-opacity={strokeOpacityProp}
+    stroke-width={strokeWidthProp}
+    opacity={opacityProp}
+    class={cls('lc-path', classProp as string | undefined)}
     marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
     marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
     marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
     in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
     bind:this={pathRef}
   />
-  <MarkerWrapper id={markerStartId} marker={markerStart} />
-  <MarkerWrapper id={markerMidId} marker={markerMid} />
-  <MarkerWrapper id={markerEndId} marker={markerEnd} />
+  {#if markerStart}
+    <MarkerWrapper id={markerStartId} marker={markerStart} />
+  {/if}
+  {#if markerMid}
+    <MarkerWrapper id={markerMidId} marker={markerMid} />
+  {/if}
+  {#if markerEnd}
+    <MarkerWrapper id={markerEndId} marker={markerEnd} />
+  {/if}
 
   {#if startContent && startPoint}
     <Group x={startPoint.x} y={startPoint.y} class="lc-path-g-start">
@@ -137,7 +152,7 @@
     </Group>
   {/if}
 
-  {#if endContent && endPoint.current}
+  {#if endContent && endPoint?.current}
     <Group x={endPoint.current.x} y={endPoint.current.y} class="lc-path-g-end">
       {@render endContent({
         point: endPoint.current,

package/dist/components/Pattern/Pattern.canvas.svelte

@@ -22,11 +22,14 @@
     height = size,
     lines: linesProp,
     circles: circlesProp,
+    rects: rectsProp,
     background,
     children,
   }: PatternProps = $props();
 
-  const shapes = $derived(buildPatternShapes(linesProp, circlesProp, size, width, height));
+  const shapes = $derived(
+    buildPatternShapes(linesProp, circlesProp, size, width, height, rectsProp)
+  );
 
   let canvasPattern = $state<CanvasPattern | null>(null);
 

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

@@ -21,6 +21,22 @@ export type PatternCircleDef = {
     /** The opacity of the circle @default 1 */
     opacity?: number;
 };
+export type PatternRectDef = {
+    /**
+     * Inset from each edge of the pattern tile, in pixels. Useful for cell
+     * grids — set to half the desired gap between cells.
+     * @default 0
+     */
+    inset?: number;
+    /** Horizontal corner radius, or `"100%"` for a full ellipse / circle. */
+    rx?: number | string;
+    /** Vertical corner radius. Defaults to `rx` if not provided. */
+    ry?: number | string;
+    /** Fill color @default 'var(--color-surface-content)' */
+    color?: string;
+    /** Opacity @default 1 */
+    opacity?: number;
+};
 export type PatternPropsWithoutHTML = {
     /** The id of the pattern */
     id?: string;
@@ -34,6 +50,8 @@ export type PatternPropsWithoutHTML = {
     lines?: boolean | PatternLineDef | PatternLineDef[];
     /** The number of circles to render */
     circles?: boolean | PatternCircleDef | PatternCircleDef[];
+    /** Rect(s) to render in each pattern tile */
+    rects?: boolean | PatternRectDef | PatternRectDef[];
     /** The background color of the pattern */
     background?: string;
     /** Render as a child of the pattern. Note: only supported on the `<Svg>` layer. */
@@ -59,9 +77,20 @@ export type LineShape = {
     strokeWidth: string | number;
     opacity: number;
 };
-export type PatternShape = CircleShape | LineShape;
+export type RectShape = {
+    type: 'rect';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rx?: number | string;
+    ry?: number | string;
+    fill: string;
+    opacity: number;
+};
+export type PatternShape = CircleShape | LineShape | RectShape;
 /**
  * Build the SVG/canvas shape descriptors for a pattern's lines/circles.
  * Pure function — no reactivity.
  */
-export declare function buildPatternShapes(linesProp: PatternPropsWithoutHTML['lines'], circlesProp: PatternPropsWithoutHTML['circles'], size: number, width: number, height: number): PatternShape[];
+export declare function buildPatternShapes(linesProp: PatternPropsWithoutHTML['lines'], circlesProp: PatternPropsWithoutHTML['circles'], size: number, width: number, height: number, rectsProp?: PatternPropsWithoutHTML['rects']): PatternShape[];

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

@@ -2,7 +2,7 @@
  * Build the SVG/canvas shape descriptors for a pattern's lines/circles.
  * Pure function — no reactivity.
  */
-export function buildPatternShapes(linesProp, circlesProp, size, width, height) {
+export function buildPatternShapes(linesProp, circlesProp, size, width, height, rectsProp) {
     const shapes = [];
     if (linesProp) {
         const lineDefs = Array.isArray(linesProp) ? linesProp : linesProp === true ? [{}] : [linesProp];
@@ -67,5 +67,24 @@ export function buildPatternShapes(linesProp, circlesProp, size, width, height)
             }
         }
     }
+    if (rectsProp) {
+        const rectDefs = Array.isArray(rectsProp) ? rectsProp : rectsProp === true ? [{}] : [rectsProp];
+        for (const rect of rectDefs) {
+            const inset = rect.inset ?? 0;
+            const fill = rect.color ?? 'var(--color-surface-content, currentColor)';
+            const opacity = rect.opacity ?? 1;
+            shapes.push({
+                type: 'rect',
+                x: inset,
+                y: inset,
+                width: Math.max(0, width - 2 * inset),
+                height: Math.max(0, height - 2 * inset),
+                rx: rect.rx,
+                ry: rect.ry,
+                fill,
+                opacity,
+            });
+        }
+    }
     return shapes;
 }

package/dist/components/Pattern/Pattern.svg.svelte

@@ -19,13 +19,16 @@
     height = size,
     lines: linesProp,
     circles: circlesProp,
+    rects: rectsProp,
     background,
     patternContent,
     children,
     ...rest
   }: PatternProps = $props();
 
-  const shapes = $derived(buildPatternShapes(linesProp, circlesProp, size, width, height));
+  const shapes = $derived(
+    buildPatternShapes(linesProp, circlesProp, size, width, height, rectsProp)
+  );
 </script>
 
 <defs>
@@ -62,6 +65,19 @@
           opacity={circle.opacity}
         />
       {/each}
+
+      {#each shapes.filter((s) => s.type === 'rect') as rect}
+        <rect
+          x={rect.x}
+          y={rect.y}
+          width={rect.width}
+          height={rect.height}
+          rx={rect.rx as number | string | undefined}
+          ry={rect.ry as number | string | undefined}
+          fill={rect.fill}
+          opacity={rect.opacity}
+        />
+      {/each}
     {/if}
   </pattern>
 </defs>