layerchart 2.0.0-next.1 → 2.0.0-next.11

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

@@ -1,16 +1,20 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TransformDebugProps = typeof __propDef.props;
-export type TransformDebugEvents = typeof __propDef.events;
-export type TransformDebugSlots = typeof __propDef.slots;
-export default class TransformDebug extends SvelteComponentTyped<TransformDebugProps, TransformDebugEvents, TransformDebugSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const TransformDebug: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TransformDebug = InstanceType<typeof TransformDebug>;
+export default TransformDebug;

package/dist/docs/ViewSourceButton.svelte

@@ -5,10 +5,13 @@
 
   import Code from './Code.svelte';
 
-  export let label: string;
-  export let source: string | undefined = undefined;
-  export let href: string | undefined = undefined;
-  export let icon: ComponentProps<Button>['icon'];
+  const {
+    label,
+    source,
+    href,
+    icon,
+  }: { label: string; source?: string; href?: string; icon: ComponentProps<Button>['icon'] } =
+    $props();
 </script>
 
 {#if source}

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

@@ -1,21 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
 import type { ComponentProps } from 'svelte';
 import { Button } from 'svelte-ux';
-declare const __propDef: {
-    props: {
-        label: string;
-        source?: string | undefined;
-        href?: string | undefined;
-        icon: ComponentProps<Button>["icon"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    label: string;
+    source?: string;
+    href?: string;
+    icon: ComponentProps<Button>['icon'];
 };
-export type ViewSourceButtonProps = typeof __propDef.props;
-export type ViewSourceButtonEvents = typeof __propDef.events;
-export type ViewSourceButtonSlots = typeof __propDef.slots;
-export default class ViewSourceButton extends SvelteComponentTyped<ViewSourceButtonProps, ViewSourceButtonEvents, ViewSourceButtonSlots> {
-}
-export {};
+declare const ViewSourceButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViewSourceButton = ReturnType<typeof ViewSourceButton>;
+export default ViewSourceButton;

package/dist/types/d3-shape-extentions.d.ts

@@ -0,0 +1,7 @@
+import * as d3 from 'd3-shape';
+
+declare module 'd3-shape' {
+  interface Arc<This, Datum> {
+    (): string | null;
+  }
+}

package/dist/utils/afterTick.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Executes a callback function after the next DOM update.
+ * @param cb Callback function to be executed after the next DOM update
+ */
+export declare function afterTick(cb: () => void): void;

package/dist/utils/afterTick.js

@@ -0,0 +1,8 @@
+import { tick } from 'svelte';
+/**
+ * Executes a callback function after the next DOM update.
+ * @param cb Callback function to be executed after the next DOM update
+ */
+export function afterTick(cb) {
+    tick().then(cb);
+}

package/dist/utils/arcText.svelte.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Reactive utilities to create and position text for Arc-based labels/annotations.
+ *
+ * TODO: we can probably simplify / pull some of these pieces out to not do a bunch
+ * of extra work when we don't need to. But for now while we work on the API, this is fine :)
+ */
+import type { Getter, GetterValues } from './types.js';
+import type { ComponentProps } from 'svelte';
+import type { Text } from '../components/index.js';
+export type ArcTextProps = GetterValues<{
+    innerRadius: number;
+    outerRadius: number;
+    cornerRadius: number;
+    startAngle: number;
+    endAngle: number;
+    centroid: [number, number];
+}>;
+export type InternalArcTextProps = ArcTextProps & {
+    /**
+     * Whether the corner radius should be inverted or not.
+     * This changes when text is rotated/flipped to ensure
+     * the corner offset is applied correctly.
+     */
+    invertCorner: Getter<boolean>;
+};
+export type ArcPathResult = {
+    current: string;
+};
+export type ArcTextPosition = 'inner' | 'outer' | 'middle' | 'centroid' | 'outer-radial';
+export type ArcTextOptions = {
+    /**
+     * A percentage string (e.g., '50%') to offset the start angle of the text path.
+     * If a specific offset is needed, you should use option rather than passing it
+     * directly to the `<Text>` component to ensure it is taken into account when
+     * calculating the path the text should follow.
+     *
+     * This has no effect if the position is `'centroid'`.
+     */
+    startOffset?: string;
+    /**
+     * An amount of padding to add to the outer radius of the path to add space
+     * between the text and the arc.
+     */
+    outerPadding?: number;
+    /**
+     * Optional offset specifically for 'outer-radial' position from the outer arc edge.
+     * If not provided, 'outerPadding' will be used.
+     *
+     * // TODO: does 23 even make sense? It looks good but is it too arbitrary? needs sean's attention
+     * Defaults to 23 if neither is set.
+     */
+    radialOffset?: number;
+};
+export declare function createArcTextProps(props: ArcTextProps, opts: ArcTextOptions | undefined, position: ArcTextPosition): {
+    current: ComponentProps<typeof Text>;
+};
+export type GetArcTextProps = (position: ArcTextPosition, opts?: ArcTextOptions) => ComponentProps<typeof Text>;

package/dist/utils/arcText.svelte.js

@@ -0,0 +1,262 @@
+/**
+ * Reactive utilities to create and position text for Arc-based labels/annotations.
+ *
+ * TODO: we can probably simplify / pull some of these pieces out to not do a bunch
+ * of extra work when we don't need to. But for now while we work on the API, this is fine :)
+ */
+import { arc as d3arc } from 'd3-shape';
+import { radiansToDegrees } from './math.js';
+function extractOutsideArc(arcPath) {
+    // Extract first arc until straight line to innerRadius (L) or close path (Z)
+    const matches = arcPath.match(/(^.+?)(L|Z)/);
+    if (!matches || !matches[1])
+        return arcPath;
+    return matches[1];
+}
+// Normalize angles to [0, 360) range
+function normalizeAngle(angle) {
+    return ((angle % 360) + 360) % 360;
+}
+/**
+ * Calculates and generates a path in the middle/medial line of an arc.
+ */
+function getArcPathMiddle(props) {
+    const centerRadius = $derived((props.innerRadius() + props.outerRadius()) / 2);
+    const cornerAngleOffset = $derived.by(() => {
+        if (props.cornerRadius() <= 0 || centerRadius <= 0)
+            return 0;
+        const effectiveCornerRadius = Math.min(props.cornerRadius(), centerRadius);
+        return (effectiveCornerRadius * 0.5) / centerRadius;
+    });
+    const effectiveStartAngle = $derived.by(() => {
+        if (props.invertCorner()) {
+            return props.startAngle() - cornerAngleOffset;
+        }
+        return props.startAngle() + cornerAngleOffset;
+    });
+    const effectiveEndAngle = $derived.by(() => {
+        if (props.invertCorner()) {
+            return props.endAngle() + cornerAngleOffset;
+        }
+        return props.endAngle() - cornerAngleOffset;
+    });
+    const path = $derived(extractOutsideArc(d3arc()
+        .outerRadius(centerRadius)
+        .innerRadius(centerRadius - 0.5)
+        .startAngle(effectiveStartAngle)
+        .endAngle(effectiveEndAngle)() ?? ''));
+    return {
+        get current() {
+            return path;
+        },
+    };
+}
+function getArcPathInner(props) {
+    const cornerAngleOffset = $derived.by(() => {
+        if (props.cornerRadius() <= 0 || props.innerRadius() <= 0)
+            return 0;
+        if (props.cornerRadius() >= props.innerRadius())
+            return Math.PI / 4;
+        return (props.cornerRadius() * 0.5) / props.innerRadius();
+    });
+    const effectiveStartAngle = $derived.by(() => {
+        if (props.invertCorner()) {
+            return props.startAngle() - cornerAngleOffset;
+        }
+        return props.startAngle() + cornerAngleOffset;
+    });
+    const effectiveEndAngle = $derived.by(() => {
+        if (props.invertCorner()) {
+            return props.endAngle() + cornerAngleOffset;
+        }
+        return props.endAngle() - cornerAngleOffset;
+    });
+    const path = $derived(extractOutsideArc(d3arc()
+        .innerRadius(props.innerRadius())
+        .outerRadius(props.innerRadius() + 0.5)
+        .startAngle(effectiveStartAngle)
+        .endAngle(effectiveEndAngle)() ?? ''));
+    return {
+        get current() {
+            return path;
+        },
+    };
+}
+function getArcPathOuter(props) {
+    const cornerAngleOffset = $derived.by(() => {
+        if (props.cornerRadius() <= 0 || props.outerRadius() <= 0)
+            return 0;
+        return (props.cornerRadius() * 0.5) / props.outerRadius();
+    });
+    const effectiveStartAngle = $derived.by(() => {
+        if (props.invertCorner()) {
+            return props.startAngle() - cornerAngleOffset;
+        }
+        return props.startAngle() + cornerAngleOffset;
+    });
+    const effectiveEndAngle = $derived.by(() => {
+        if (props.invertCorner()) {
+            return props.endAngle() + cornerAngleOffset;
+        }
+        return props.endAngle() - cornerAngleOffset;
+    });
+    const path = $derived(extractOutsideArc(d3arc()
+        .innerRadius(props.outerRadius() - 0.5)
+        .outerRadius(props.outerRadius())
+        .startAngle(effectiveStartAngle)
+        .endAngle(effectiveEndAngle)() ?? ''));
+    return {
+        get current() {
+            return path;
+        },
+    };
+}
+function pointOnCircle(radius, angle) {
+    const adjustedAngle = angle - Math.PI / 2;
+    return [radius * Math.cos(adjustedAngle), radius * Math.sin(adjustedAngle)];
+}
+export function createArcTextProps(props, opts = {}, position) {
+    const effectiveStartAngleRadians = $derived.by(() => {
+        const start = props.startAngle();
+        const end = props.endAngle();
+        const offset = opts.startOffset;
+        if (offset) {
+            try {
+                const percentage = parseFloat(offset.slice(0, -1)) / 100;
+                if (!isNaN(percentage) && percentage >= 0 && percentage <= 1) {
+                    const span = end - start;
+                    return start + span * percentage;
+                }
+                else {
+                    console.warn('Invalid percentage for startOffset:', offset);
+                }
+            }
+            catch (e) {
+                console.warn('Could not parse startOffset percentage:', offset, e);
+            }
+        }
+        return start;
+    });
+    // Convert the effective start angle to degrees for orientation checks
+    const effectiveStartDegrees = $derived(radiansToDegrees(effectiveStartAngleRadians));
+    // Normalize the effective angle to the [0, 360) range
+    const normalizedStartDegrees = $derived(normalizeAngle(effectiveStartDegrees));
+    const startDegrees = $derived(radiansToDegrees(props.startAngle()));
+    const endDegrees = $derived(radiansToDegrees(props.endAngle()));
+    const isClockwise = $derived(startDegrees < endDegrees);
+    // Reverse direction of arc when text is on top going counterclockwise or bottom going clockwise
+    const isTopCw = $derived(isClockwise && (normalizedStartDegrees >= 270 || normalizedStartDegrees <= 90));
+    const isTopCcw = $derived(!isClockwise && (normalizedStartDegrees > 270 || normalizedStartDegrees <= 90));
+    const isBottomCw = $derived(isClockwise && normalizedStartDegrees < 270 && normalizedStartDegrees >= 90);
+    const isBottomCcw = $derived(!isClockwise && normalizedStartDegrees <= 270 && normalizedStartDegrees > 90);
+    const reverseText = $derived(isTopCcw || isBottomCw);
+    const pathGenProps = {
+        ...props,
+        startAngle: () => (reverseText ? props.endAngle() : props.startAngle()),
+        endAngle: () => (reverseText ? props.startAngle() : props.endAngle()),
+        invertCorner: () => isBottomCw || isBottomCcw,
+    };
+    const innerPath = getArcPathInner(pathGenProps);
+    const middlePath = getArcPathMiddle(pathGenProps);
+    const outerPath = getArcPathOuter(pathGenProps);
+    const innerDominantBaseline = $derived.by(() => {
+        if (isBottomCw || isBottomCcw)
+            return 'auto';
+        if (isTopCw || isTopCcw)
+            return 'hanging';
+        return 'auto';
+    });
+    const outerDominantBaseline = $derived.by(() => {
+        if (isBottomCw || isBottomCcw)
+            return 'hanging';
+        return undefined;
+    });
+    const sharedProps = $derived.by(() => {
+        if (reverseText) {
+            return {
+                startOffset: opts.startOffset ?? '100%',
+                textAnchor: 'end',
+            };
+        }
+        return {
+            startOffset: opts.startOffset ?? undefined,
+        };
+    });
+    const radialPositionProps = $derived.by(() => {
+        if (position !== 'outer-radial')
+            return {};
+        const midAngle = (props.startAngle() + props.endAngle()) / 2;
+        const basePadding = opts.radialOffset ?? opts.outerPadding ?? 23;
+        const midAngleDegrees = normalizeAngle(radiansToDegrees(midAngle));
+        let textAnchor = 'middle';
+        let effectivePadding = basePadding;
+        const isBottomZone = midAngleDegrees > 45 && midAngleDegrees < 135;
+        const isTopZone = midAngleDegrees > 225 && midAngleDegrees < 315;
+        const isRightZone = midAngleDegrees <= 45 || midAngleDegrees >= 315;
+        const isLeftZone = midAngleDegrees >= 135 && midAngleDegrees <= 225;
+        const positionRadius = props.outerRadius() + effectivePadding;
+        const [x, y] = pointOnCircle(positionRadius, midAngle);
+        if (isRightZone) {
+            textAnchor = 'start';
+            if (midAngleDegrees > 350 || midAngleDegrees < 10)
+                textAnchor = 'start';
+        }
+        else if (isLeftZone) {
+            textAnchor = 'end';
+            if (midAngleDegrees > 170 && midAngleDegrees < 190)
+                textAnchor = 'end';
+        }
+        else if (isBottomZone) {
+            textAnchor = 'middle';
+        }
+        else if (isTopZone) {
+            textAnchor = 'middle';
+        }
+        return {
+            x: x,
+            y: y,
+            textAnchor,
+            dominantBaseline: 'middle',
+        };
+    });
+    const current = $derived.by(() => {
+        if (position === 'inner') {
+            return {
+                path: innerPath.current,
+                ...sharedProps,
+                dominantBaseline: innerDominantBaseline,
+            };
+        }
+        else if (position === 'outer') {
+            return {
+                path: outerPath.current,
+                ...sharedProps,
+                dominantBaseline: outerDominantBaseline,
+            };
+        }
+        else if (position === 'middle') {
+            return {
+                path: middlePath.current,
+                ...sharedProps,
+                dominantBaseline: 'middle',
+            };
+        }
+        else if (position === 'centroid') {
+            const centroid = props.centroid();
+            return {
+                x: centroid[0],
+                y: centroid[1],
+                textAnchor: 'middle',
+                verticalAnchor: 'middle',
+            };
+        }
+        else {
+            return radialPositionProps;
+        }
+    });
+    return {
+        get current() {
+            return current;
+        },
+    };
+}

package/dist/utils/array.d.ts

@@ -1,5 +1,13 @@
-import { extent as d3extent, type Numeric } from 'd3-array';
+import type { Numeric } from 'd3-array';
+import { extent as d3extent } from 'd3-array';
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
  */
 export declare function extent<T extends Numeric>(iterable: Parameters<typeof d3extent<T>>[0]): [T, T];
+/**
+ * Determine whether two arrays equal one another, order not important.
+ * This uses includes instead of converting to a set because this is only
+ * used internally on a small array size and it's not worth the cost
+ * of making a set
+ */
+export declare function arraysEqual(arr1: unknown[], arr2: unknown[]): boolean;

package/dist/utils/array.js

@@ -5,3 +5,16 @@ import { extent as d3extent } from 'd3-array';
 export function extent(iterable) {
     return d3extent(iterable);
 }
+/**
+ * Determine whether two arrays equal one another, order not important.
+ * This uses includes instead of converting to a set because this is only
+ * used internally on a small array size and it's not worth the cost
+ * of making a set
+ */
+export function arraysEqual(arr1, arr2) {
+    if (arr1.length !== arr2.length)
+        return false;
+    return arr1.every((k) => {
+        return arr2.includes(k);
+    });
+}

package/dist/utils/attributes.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Creates a string containing a class name that can be used by
+ * developers to target a specific layer/element within a LayerChart.
+ *
+ * This is a function so that the class names remain consistent and the
+ * prefix/structure can be changed in the future if needed
+ *
+ * @param layerName - the name of the layer to be appended to the generated class name
+ * @returns a string to be used as a class on an element
+ */
+export declare function layerClass(layerName: string): string;
+type ExtractObjectType<T> = T extends object ? (T extends Function ? never : T) : never;
+type WithClass<T> = T & {
+    class?: string;
+};
+type DefaultProps = WithClass<{
+    [key: string]: any;
+}>;
+/**
+ * Pulls out the props from an arbitrary object/function/boolean and appends
+ * a class name to its class property to identify the layer for CSS targeting.
+ *
+ * @param props The props to be extracted, can be an object, function or any other type
+ * @param layerName The name of the layer used to apply a layer classname for targeting styling
+ * @param extraClasses Additional classes to be applied to the layer if they don't exist in the props already
+ * @returns a typed spreadable object with props for the layer
+ */
+export declare function extractLayerProps<T>(props: T, layerName: string, extraClasses?: string): WithClass<ExtractObjectType<T> extends never ? DefaultProps : ExtractObjectType<T>>;
+export {};

package/dist/utils/attributes.js

@@ -0,0 +1,40 @@
+import { cls } from '@layerstack/tailwind';
+/**
+ * Creates a string containing a class name that can be used by
+ * developers to target a specific layer/element within a LayerChart.
+ *
+ * This is a function so that the class names remain consistent and the
+ * prefix/structure can be changed in the future if needed
+ *
+ * @param layerName - the name of the layer to be appended to the generated class name
+ * @returns a string to be used as a class on an element
+ */
+export function layerClass(layerName) {
+    return `lc-${layerName}`;
+}
+// type guard to narrow props to an object with optional class
+// for extractLayerProps
+function isObjectWithClass(val) {
+    return typeof val === 'object' && val !== null && typeof val !== 'function';
+}
+/**
+ * Pulls out the props from an arbitrary object/function/boolean and appends
+ * a class name to its class property to identify the layer for CSS targeting.
+ *
+ * @param props The props to be extracted, can be an object, function or any other type
+ * @param layerName The name of the layer used to apply a layer classname for targeting styling
+ * @param extraClasses Additional classes to be applied to the layer if they don't exist in the props already
+ * @returns a typed spreadable object with props for the layer
+ */
+export function extractLayerProps(props, layerName, extraClasses) {
+    const className = layerClass(layerName);
+    if (isObjectWithClass(props)) {
+        return {
+            ...props,
+            class: cls(className, props.class ?? '', extraClasses),
+        };
+    }
+    return {
+        class: cls(className, extraClasses),
+    };
+}

package/dist/utils/canvas.js

@@ -49,7 +49,7 @@ function render(ctx, render, styleOptions = {}) {
         ctx.globalAlpha = Number(computedStyles?.opacity);
     }
     // Text properties
-    ctx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
+    ctx.font = `${computedStyles.fontWeight} ${computedStyles.fontSize} ${computedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
     // TODO: Hack to handle `textAnchor` with canvas.  Try to find a better approach
     if (computedStyles.textAnchor === 'middle') {
         ctx.textAlign = 'center';
@@ -74,10 +74,11 @@ function render(ctx, render, styleOptions = {}) {
             .map((s) => Number(s.replace('px', '')));
         ctx.setLineDash(dashArray);
     }
-    paintOrder.forEach((attr) => {
+    for (const attr of paintOrder) {
         if (attr === 'fill') {
             const fill = styleOptions.styles?.fill &&
                 (styleOptions.styles?.fill instanceof CanvasGradient ||
+                    styleOptions.styles?.fill instanceof CanvasPattern ||
                     !styleOptions.styles?.fill?.includes('var'))
                 ? styleOptions.styles.fill
                 : computedStyles?.fill;
@@ -107,7 +108,7 @@ function render(ctx, render, styleOptions = {}) {
                 render.stroke(ctx);
             }
         }
-    });
+    }
 }
 /** Render SVG path data onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
 export function renderPathData(ctx, pathData, styleOptions = {}) {
@@ -163,11 +164,18 @@ export function scaleCanvas(ctx, width, height) {
     ctx.scale(devicePixelRatio, devicePixelRatio);
     return { width: ctx.canvas.width, height: ctx.canvas.height };
 }
+/** Get pixel color (r,g,b,a) at canvas coordinates */
+export function getPixelColor(ctx, x, y) {
+    const dpr = window.devicePixelRatio ?? 1;
+    const imageData = ctx.getImageData(x * dpr, y * dpr, 1, 1);
+    const [r, g, b, a] = imageData.data;
+    return { r, g, b, a };
+}
 export function _createLinearGradient(ctx, x0, y0, x1, y1, stops) {
     const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-    stops.forEach(({ offset, color }) => {
+    for (const { offset, color } of stops) {
         gradient.addColorStop(offset, color);
-    });
+    }
     return gradient;
 }
 /** Create linear gradient and memoize result to fix reactivity */
@@ -175,9 +183,38 @@ export const createLinearGradient = memoize(_createLinearGradient, (ctx, x0, y0,
     const key = JSON.stringify({ x0, y0, x1, y1, stops });
     return key;
 });
-export function getPixelColor(ctx, x, y) {
-    const dpr = window.devicePixelRatio ?? 1;
-    const imageData = ctx.getImageData(x * dpr, y * dpr, 1, 1);
-    const [r, g, b, a] = imageData.data;
-    return { r, g, b, a };
+export function _createPattern(ctx, width, height, shapes, background) {
+    const patternCanvas = document.createElement('canvas');
+    const patternCtx = patternCanvas.getContext('2d');
+    // Add pattern canvas to DOM to allow computed styles to be read (`getComputedStyles()`)
+    ctx.canvas.after(patternCanvas);
+    // TODO: Fix blurry pattern
+    // const newScale = scaleCanvas(patternCtx, width, height);
+    patternCanvas.width = width;
+    patternCanvas.height = height;
+    if (background) {
+        patternCtx.fillStyle = background;
+        patternCtx.fillRect(0, 0, width, height);
+    }
+    for (const shape of shapes) {
+        patternCtx.save();
+        if (shape.type === 'circle') {
+            renderCircle(patternCtx, { cx: shape.cx, cy: shape.cy, r: shape.r }, { styles: { fill: shape.fill, opacity: shape.opacity } });
+        }
+        else if (shape.type === 'line') {
+            renderPathData(patternCtx, shape.path, {
+                styles: { stroke: shape.stroke, strokeWidth: shape.strokeWidth, opacity: shape.opacity },
+            });
+        }
+        patternCtx.restore();
+    }
+    const pattern = ctx.createPattern(patternCanvas, 'repeat');
+    // Cleanup
+    ctx.canvas.parentElement?.removeChild(patternCanvas);
+    return pattern;
 }
+/** Create pattern and memoize result to fix reactivity */
+export const createPattern = memoize(_createPattern, (ctx, width, height, shapes, background) => {
+    const key = JSON.stringify({ width, height, shapes, background });
+    return key;
+});