layerchart 2.0.0-next.55 → 2.0.0-next.56

package/dist/components/GeoPoint.svelte

@@ -63,11 +63,25 @@
 
 {#if layerCtx === 'svg'}
   {#if children}
-    <Group {x} {y} opacity={opacity as number} class={className as string} {...extractLayerProps(restProps, 'lc-geo-point-group')}>
+    <Group
+      {x}
+      {y}
+      opacity={opacity as number}
+      class={className as string}
+      {...extractLayerProps(restProps, 'lc-geo-point-group')}
+    >
       {@render children({ x, y })}
     </Group>
   {:else}
-    <Circle cx={x} cy={y} {opacity} {fillOpacity} {strokeWidth} class={className} {...extractLayerProps(restProps, 'lc-geo-point')} />
+    <Circle
+      cx={x}
+      cy={y}
+      {opacity}
+      {fillOpacity}
+      {strokeWidth}
+      class={className}
+      {...extractLayerProps(restProps, 'lc-geo-point')}
+    />
   {/if}
 {/if}
 
@@ -78,6 +92,14 @@
     {@render children({ x, y })}
     <!-- </Group> -->
   {:else}
-    <Circle cx={x} cy={y} {opacity} {fillOpacity} {strokeWidth} class={className} {...extractLayerProps(restProps, 'lc-geo-point')} />
+    <Circle
+      cx={x}
+      cy={y}
+      {opacity}
+      {fillOpacity}
+      {strokeWidth}
+      class={className}
+      {...extractLayerProps(restProps, 'lc-geo-point')}
+    />
   {/if}
 {/if}

package/dist/components/GeoSpline.svelte

@@ -75,7 +75,4 @@
   );
 </script>
 
-<Path
-  pathData={d}
-  {...extractLayerProps(restProps, 'lc-geo-spline')}
-/>
+<Path pathData={d} {...extractLayerProps(restProps, 'lc-geo-spline')} />

package/dist/components/GeoTile.svelte

@@ -91,10 +91,14 @@
   }
 
   if (layerCtx === 'canvas') {
-    ctx.registerComponent({ name: 'GeoTile', kind: 'mark', canvasRender: {
-      render,
-      deps: () => [tiles],
-    } });
+    ctx.registerComponent({
+      name: 'GeoTile',
+      kind: 'mark',
+      canvasRender: {
+        render,
+        deps: () => [tiles],
+      },
+    });
   }
 </script>
 

package/dist/components/Group.svelte

@@ -137,9 +137,7 @@
   const dataMode = $derived(hasAnyDataProp(x, y));
 
   // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(
-    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
-  );
+  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
 
   // Resolve a single data item to pixel coordinates
   function resolveGroup(d: any) {
@@ -198,10 +196,18 @@
   const initialY = initialYProp ?? (typeof y === 'number' ? y : undefined);
 
   const trueX = $derived(
-    typeof x === 'number' ? x : (x == null && (center === 'x' || center === true) ? chartCtx.width / 2 : 0)
+    typeof x === 'number'
+      ? x
+      : x == null && (center === 'x' || center === true)
+        ? chartCtx.width / 2
+        : 0
   );
   const trueY = $derived(
-    typeof y === 'number' ? y : (y == null && (center === 'y' || center === true) ? chartCtx.height / 2 : 0)
+    typeof y === 'number'
+      ? y
+      : y == null && (center === 'y' || center === true)
+        ? chartCtx.height / 2
+        : 0
   );
   const motionX = createMotion(initialX, () => trueX, motion);
   const motionY = createMotion(initialY, () => trueY, motion);

package/dist/components/Highlight.svelte

@@ -389,9 +389,9 @@
               : null;
             // For diverging stacks, use the outer edge (y0 for below-baseline, y1 for above)
             const stackedY1 = stackValue
-              ? (ctx.series.stackLayout === 'stackDiverging' && stackValue[1] <= 0
-                  ? stackValue[0]
-                  : stackValue[1])
+              ? ctx.series.stackLayout === 'stackDiverging' && stackValue[1] <= 0
+                ? stackValue[0]
+                : stackValue[1]
               : 0;
 
             if (ctx.valueAxis === 'x') {

package/dist/components/Image.svelte

@@ -195,16 +195,16 @@
   const geo = getGeoContext();
 
   // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(
-    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
-  );
+  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
 
   // Resolve a single data item to pixel coordinates and dimensions
   function resolveImage(d: any) {
     const resolvedR = r !== undefined ? resolveDataProp(r, d, null, 0) : undefined;
     const defaultSize = resolvedR !== undefined ? resolvedR * 2 : 16;
-    const resolvedWidth = width !== undefined ? resolveDataProp(width, d, null, defaultSize) : defaultSize;
-    const resolvedHeight = height !== undefined ? resolveDataProp(height, d, null, defaultSize) : defaultSize;
+    const resolvedWidth =
+      width !== undefined ? resolveDataProp(width, d, null, defaultSize) : defaultSize;
+    const resolvedHeight =
+      height !== undefined ? resolveDataProp(height, d, null, defaultSize) : defaultSize;
 
     let resolvedX: number, resolvedY: number;
     if (geo.projection) {
@@ -247,7 +247,14 @@
         const key = keyFn(d, i);
         activeKeys.add(key);
         const resolved = resolveImage(d);
-        untrack(() => dataMotionMap.update(key, { x: resolved.x, y: resolved.y, width: resolved.width, height: resolved.height }));
+        untrack(() =>
+          dataMotionMap.update(key, {
+            x: resolved.x,
+            y: resolved.y,
+            width: resolved.width,
+            height: resolved.height,
+          })
+        );
       }
       untrack(() => dataMotionMap.cleanup(activeKeys));
     });
@@ -416,29 +423,32 @@
         y: typeof y === 'string' ? y : undefined,
       };
     },
-    canvasRender: layerCtx === 'canvas' ? {
-      render: canvasRender,
-      events: {
-        click: restProps.onclick,
-        pointerdown: restProps.onpointerdown,
-        pointerenter: restProps.onpointerenter,
-        pointermove: restProps.onpointermove,
-        pointerleave: restProps.onpointerleave,
-      },
-      deps: () => [
-        dataMode,
-        dataMode ? resolvedItems : null,
-        motionX.current,
-        motionY.current,
-        motionWidth.current,
-        motionHeight.current,
-        href,
-        opacity,
-        className,
-        restProps.style,
-        loadedImageCount,
-      ],
-    } : undefined,
+    canvasRender:
+      layerCtx === 'canvas'
+        ? {
+            render: canvasRender,
+            events: {
+              click: restProps.onclick,
+              pointerdown: restProps.onpointerdown,
+              pointerenter: restProps.onpointerenter,
+              pointermove: restProps.onpointermove,
+              pointerleave: restProps.onpointerleave,
+            },
+            deps: () => [
+              dataMode,
+              dataMode ? resolvedItems : null,
+              motionX.current,
+              motionY.current,
+              motionWidth.current,
+              motionHeight.current,
+              href,
+              opacity,
+              className,
+              restProps.style,
+              loadedImageCount,
+            ],
+          }
+        : undefined,
   });
 </script>
 
@@ -487,7 +497,9 @@
       width={motionWidth.current}
       height={motionHeight.current}
       clip-path={pixelR !== undefined ? `url(#${clipId})` : undefined}
-      transform={pixelRotate ? `rotate(${pixelRotate}, ${motionX.current}, ${motionY.current})` : undefined}
+      transform={pixelRotate
+        ? `rotate(${pixelRotate}, ${motionX.current}, ${motionY.current})`
+        : undefined}
       {preserveAspectRatio}
       crossorigin={crossOrigin}
       image-rendering={imageRendering}

package/dist/components/Labels.svelte

@@ -173,8 +173,7 @@
           fill: fillValue,
           x: point.x + (placement === 'outside' ? -offset : offset),
           y: point.y,
-          textAnchor:
-            placement === 'middle' ? 'middle' : placement === 'outside' ? 'end' : 'start',
+          textAnchor: placement === 'middle' ? 'middle' : placement === 'outside' ? 'end' : 'start',
           verticalAnchor: 'middle',
           capHeight: '.6rem',
         };
@@ -185,8 +184,7 @@
           fill: fillValue,
           x: point.x + (placement === 'outside' ? offset : -offset),
           y: point.y,
-          textAnchor:
-            placement === 'middle' ? 'middle' : placement === 'outside' ? 'start' : 'end',
+          textAnchor: placement === 'middle' ? 'middle' : placement === 'outside' ? 'start' : 'end',
           verticalAnchor: 'middle',
           capHeight: '.6rem',
         };

package/dist/components/Line.svelte

@@ -298,12 +298,13 @@
             'lc-line',
             itemClass ?? (typeof className === 'string' ? className : undefined)
           ),
-          style: [
-            restProps.style as string | undefined,
-            dashArrayAttr ? `stroke-dasharray: ${dashArrayAttr}` : undefined,
-          ]
-            .filter(Boolean)
-            .join('; ') || undefined,
+          style:
+            [
+              restProps.style as string | undefined,
+              dashArrayAttr ? `stroke-dasharray: ${dashArrayAttr}` : undefined,
+            ]
+              .filter(Boolean)
+              .join('; ') || undefined,
         };
   }
 

package/dist/components/LinearGradient.svelte

@@ -174,10 +174,14 @@
   }
 
   if (layerCtx === 'canvas') {
-    ctx.registerComponent({ name: 'Gradient', kind: 'group', canvasRender: {
-      render,
-      deps: () => [x1, y1, x2, y2, stops, className],
-    } });
+    ctx.registerComponent({
+      name: 'Gradient',
+      kind: 'group',
+      canvasRender: {
+        render,
+        deps: () => [x1, y1, x2, y2, stops, className],
+      },
+    });
   }
 </script>
 

package/dist/components/Link.svelte

@@ -171,7 +171,6 @@ TODO:
       return FALLBACK_COORDS;
     }
   });
-
 </script>
 
 <Connector

package/dist/components/Marker.svelte

@@ -8,7 +8,15 @@
      *
      * Pass `children` to render a custom element/component inside the marker instead.
      */
-    type?: 'arrow' | 'triangle' | 'line' | 'circle' | 'circle-stroke' | 'dot' | 'square' | 'square-stroke';
+    type?:
+      | 'arrow'
+      | 'triangle'
+      | 'line'
+      | 'circle'
+      | 'circle-stroke'
+      | 'dot'
+      | 'square'
+      | 'square-stroke';
 
     /**
      * Unique identifier for the marker

package/dist/components/Path.svelte

@@ -197,30 +197,50 @@
   const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
 
   if (layerCtx === 'canvas') {
-    ctx.registerComponent({ name: 'Path', kind: 'mark', canvasRender: {
-      render,
-      events: {
-        get click() { return onclick; },
-        get pointerenter() { return onpointerenter; },
-        get pointermove() { return onpointermove; },
-        get pointerleave() { return onpointerleave; },
-        get pointerdown() { return onpointerdown; },
-        get pointerover() { return onpointerover; },
-        get pointerout() { return onpointerout; },
-        get touchmove() { return ontouchmove; },
+    ctx.registerComponent({
+      name: 'Path',
+      kind: 'mark',
+      canvasRender: {
+        render,
+        events: {
+          get click() {
+            return onclick;
+          },
+          get pointerenter() {
+            return onpointerenter;
+          },
+          get pointermove() {
+            return onpointermove;
+          },
+          get pointerleave() {
+            return onpointerleave;
+          },
+          get pointerdown() {
+            return onpointerdown;
+          },
+          get pointerover() {
+            return onpointerover;
+          },
+          get pointerout() {
+            return onpointerout;
+          },
+          get touchmove() {
+            return ontouchmove;
+          },
+        },
+        deps: () => [
+          fillKey!.current,
+          fillOpacity,
+          strokeKey!.current,
+          strokeOpacity,
+          strokeWidth,
+          opacity,
+          className,
+          tweenedState.current,
+          restProps.style,
+        ],
       },
-      deps: () => [
-        fillKey!.current,
-        fillOpacity,
-        strokeKey!.current,
-        strokeOpacity,
-        strokeWidth,
-        opacity,
-        className,
-        tweenedState.current,
-        restProps.style,
-      ],
-    } });
+    });
   }
 
   let startPoint = $state<DOMPoint | undefined>();

package/dist/components/Pattern.svelte

@@ -95,7 +95,9 @@
     background?: string;
 
     /**
-     * Render as a child of the pattern
+     * Render as a child of the pattern.
+     *
+     * Note: only supported on the `<Svg>` layer.
      */
     patternContent?: Snippet;
 
@@ -250,10 +252,102 @@
   }
 
   if (layerCtx === 'canvas') {
-    chartCtx.registerComponent({ name: 'Pattern', kind: 'mark', canvasRender: {
-      render,
-      deps: () => [width, height, shapes, background],
-    } });
+    chartCtx.registerComponent({
+      name: 'Pattern',
+      kind: 'group',
+      canvasRender: {
+        render,
+        deps: () => [width, height, shapes, background],
+      },
+    });
+  }
+
+  function withOpacity(color: string, opacity: number) {
+    return opacity === 1 ? color : `color-mix(in srgb, ${color} ${opacity * 100}%, transparent)`;
+  }
+
+  // Build a CSS `background` value from lines/circles/background.
+  // Uses repeating-linear-gradient for lines and radial-gradient for circles
+  // so CSS variables/classes resolve natively in the HTML layer.
+  function createCSSPattern(): string {
+    const layers: string[] = [];
+
+    if (linesProp) {
+      const lineDefs = Array.isArray(linesProp)
+        ? linesProp
+        : linesProp === true
+          ? [{}]
+          : [linesProp];
+      for (const line of lineDefs) {
+        const color = withOpacity(
+          line.color ?? 'var(--color-surface-content, currentColor)',
+          line.opacity ?? 1
+        );
+        const sw = line.width ?? 1;
+
+        let rotate = Math.round(line.rotate ?? 0) % 360;
+        if (rotate > 180) rotate = rotate - 360;
+        else if (rotate > 90) rotate = rotate - 180;
+        else if (rotate < -180) rotate = rotate + 360;
+        else if (rotate < -90) rotate = rotate + 180;
+
+        let angle: number;
+        let period: number;
+        if (rotate === 0) {
+          angle = 0;
+          period = height;
+        } else if (rotate === 90) {
+          angle = 90;
+          period = width;
+        } else if (rotate > 0) {
+          angle = 45;
+          period = (width * height) / Math.sqrt(width * width + height * height);
+        } else {
+          angle = 135;
+          period = (width * height) / Math.sqrt(width * width + height * height);
+        }
+
+        layers.push(
+          `repeating-linear-gradient(${angle}deg, ${color} 0 ${sw}px, transparent ${sw}px ${period}px)`
+        );
+      }
+    }
+
+    if (circlesProp) {
+      const circleDefs = Array.isArray(circlesProp)
+        ? circlesProp
+        : circlesProp === true
+          ? [{}]
+          : [circlesProp];
+      for (const circle of circleDefs) {
+        const color = withOpacity(
+          circle.color ?? 'var(--color-surface-content, currentColor)',
+          circle.opacity ?? 1
+        );
+        const r = circle.radius ?? 1;
+
+        if (circle.stagger) {
+          layers.push(
+            `radial-gradient(circle at 25% 25%, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`,
+            `radial-gradient(circle at 75% 75%, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`
+          );
+        } else {
+          layers.push(
+            `radial-gradient(circle at center, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`
+          );
+        }
+      }
+    }
+
+    // `background` may be either a plain color or an image value (e.g. `linear-gradient(...)`
+    // when used as `<Pattern background={gradient}>`). Images go in the image-layer list
+    // tiled at the pattern size (after shape layers so they paint underneath);
+    // colors go in the background-color slot.
+    const isImage = background != null && /gradient\(|url\(/i.test(background);
+    if (isImage) layers.push(`${background} 0 0 / ${width}px ${height}px`);
+
+    if (layers.length === 0) return background ?? 'transparent';
+    return !isImage && background ? `${layers.join(', ')}, ${background}` : layers.join(', ');
   }
 </script>
 
@@ -299,4 +393,6 @@
   </defs>
 
   {@render children?.({ id, pattern: `url(#${id})` })}
+{:else if layerCtx === 'html'}
+  {@render children?.({ id, pattern: createCSSPattern() })}
 {/if}

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

@@ -75,7 +75,9 @@ export type PatternPropsWithoutHTML = {
      */
     background?: string;
     /**
-     * Render as a child of the pattern
+     * Render as a child of the pattern.
+     *
+     * Note: only supported on the `<Svg>` layer.
      */
     patternContent?: Snippet;
     children?: Snippet<[{

package/dist/components/Pie.svelte

@@ -109,9 +109,7 @@
 
   const endAngle = $derived(
     endAngleProp ??
-      degreesToRadians(
-        (ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!
-      )
+      degreesToRadians((ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!)
   );
 
   const motionEndAngle = createMotion(0, () => endAngle, motion);
@@ -120,9 +118,7 @@
     let _pie = d3pie<any>()
       .startAngle(
         startAngleProp ??
-          degreesToRadians(
-            (ctx.config.xRange ? min(ctx.config.xRange as number[]) : min(range))!
-          )
+          degreesToRadians((ctx.config.xRange ? min(ctx.config.xRange as number[]) : min(range))!)
       )
       .endAngle(motionEndAngle.current)
       .padAngle(padAngle)

package/dist/components/RadialGradient.svelte

@@ -144,10 +144,14 @@
   }
 
   if (layerCtx === 'canvas') {
-    ctx.registerComponent({ name: 'Gradient', kind: 'group', canvasRender: {
-      render,
-      deps: () => [stops, cx, cy, fx, fy, ctx.width, ctx.height],
-    } });
+    ctx.registerComponent({
+      name: 'Gradient',
+      kind: 'group',
+      canvasRender: {
+        render,
+        deps: () => [stops, cx, cy, fx, fy, ctx.width, ctx.height],
+      },
+    });
   }
 </script>
 

package/dist/components/Rect.svelte

@@ -313,9 +313,7 @@
     const resolved = resolveCorners(corners, Infinity, Infinity);
     return cornersUniform(resolved) ? resolved[0] : undefined;
   });
-  const cornersNonUniform = $derived(
-    corners !== undefined && cornersUniformValue === undefined
-  );
+  const cornersNonUniform = $derived(corners !== undefined && cornersUniformValue === undefined);
 
   // Normalize rx/ry - if only one is provided, use it for both (SVG behavior)
   // Coerce to number for canvas rendering (SVG allows string like "50%")
@@ -368,8 +366,14 @@
   const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
   const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
   const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+  // Match SVG's implicit `stroke-width: 1` default: if `stroke` is set but
+  // `strokeWidth` is not, render a 1px border so HTML matches SVG/Canvas layers.
   const staticBorderWidth = $derived(
-    typeof strokeWidth === 'number' ? `${strokeWidth}px` : undefined
+    typeof strokeWidth === 'number'
+      ? `${strokeWidth}px`
+      : typeof stroke === 'string'
+        ? '1px'
+        : undefined
   );
   const htmlRestProps = $derived(restProps as unknown as HTMLAttributes<HTMLDivElement>);
 
@@ -430,12 +434,13 @@
             'lc-rect',
             itemClass ?? (typeof className === 'string' ? className : undefined)
           ),
-          style: [
-            restProps.style as string | undefined,
-            dashArrayAttr ? `stroke-dasharray: ${dashArrayAttr}` : undefined,
-          ]
-            .filter(Boolean)
-            .join('; ') || undefined,
+          style:
+            [
+              restProps.style as string | undefined,
+              dashArrayAttr ? `stroke-dasharray: ${dashArrayAttr}` : undefined,
+            ]
+              .filter(Boolean)
+              .join('; ') || undefined,
         };
   }
 
@@ -596,7 +601,7 @@
       opacity={staticOpacity}
       stroke-dasharray={dashArrayAttr}
       class={cls('lc-rect', staticClassName)}
-      {...(restProps as unknown as SVGAttributes<SVGPathElement>)}
+      {...restProps as unknown as SVGAttributes<SVGPathElement>}
       {onclick}
       {ondblclick}
       {onpointerenter}
@@ -641,6 +646,12 @@
       {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
       {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
       {@const resolvedClass = resolveStyleProp(className, item.d)}
+      {@const resolvedBorderWidth =
+        resolvedStrokeWidth != null
+          ? `${resolvedStrokeWidth}px`
+          : resolvedStroke != null
+            ? '1px'
+            : undefined}
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
@@ -650,8 +661,9 @@
         style:width="{item.width}px"
         style:height="{item.height}px"
         style:background={resolvedFill}
+        style:background-origin="border-box"
         style:opacity={resolvedOpacity}
-        style:border-width="{resolvedStrokeWidth}px"
+        style:border-width={resolvedBorderWidth}
         style:border-style={dashArrayResolved ? 'dashed' : 'solid'}
         style:border-color={resolvedStroke}
         style:border-radius="{rx}px"
@@ -676,6 +688,7 @@
       style:width="{motionWidth.current}px"
       style:height="{motionHeight.current}px"
       style:background={staticFill}
+      style:background-origin="border-box"
       style:opacity={staticOpacity}
       style:border-width={staticBorderWidth}
       style:border-style={dashArrayResolved ? 'dashed' : 'solid'}
@@ -712,6 +725,10 @@
     }
 
     /* Html layers */
+    :global(:where(.lc-layout-html .lc-rect)) {
+      /* Match SVG sizing/positioning (visual extent equals `width`×`height`, border on outer edge) */
+      box-sizing: border-box;
+    }
     :global(:where(.lc-layout-html .lc-rect):not([background])) {
       background: var(--fill-color);
     }