layerchart 2.0.0-next.55 → 2.0.0-next.57

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);
     }

package/dist/components/Spline.svelte

@@ -95,12 +95,30 @@
   const ctx = getChartContext();
   const geo = getGeoContext();
 
-  let { data, x, y, seriesKey, defined, curve, stroke, fill, opacity, motion, ...restProps }: SplineProps = $props();
+  let {
+    data,
+    x,
+    y,
+    seriesKey,
+    defined,
+    curve,
+    stroke,
+    fill,
+    opacity,
+    motion,
+    ...restProps
+  }: SplineProps = $props();
 
   ctx.registerComponent({
     name: 'Spline',
     kind: 'mark',
-    markInfo: () => ({ data, x, y, seriesKey, color: typeof stroke === 'string' ? stroke : undefined }),
+    markInfo: () => ({
+      data,
+      x,
+      y,
+      seriesKey,
+      color: typeof stroke === 'string' ? stroke : undefined,
+    }),
   });
 
   function getScaleValue(
@@ -267,8 +285,8 @@
 
   const seriesOpacity = $derived(
     series?.key == null ||
-    ctx.series.visibleSeries.length <= 1 ||
-    ctx.series.isHighlighted(series.key, true)
+      ctx.series.visibleSeries.length <= 1 ||
+      ctx.series.isHighlighted(series.key, true)
       ? 1
       : 0.1
   );
@@ -283,9 +301,9 @@
       pathData={seg.d}
       stroke={seg.stroke}
       fill={seg.fill}
+      opacity={seg.opacity ?? seriesOpacity}
       {...series?.props}
       {...restProps}
-      opacity={seg.opacity ?? seriesOpacity}
     />
   {/each}
 {:else}
@@ -293,8 +311,8 @@
     pathData={isTweened ? tweenState.current : d}
     stroke={(typeof stroke === 'string' ? stroke : undefined) ?? series?.color}
     fill={typeof fill === 'string' ? fill : undefined}
+    opacity={(typeof opacity === 'number' ? opacity : undefined) ?? seriesOpacity}
     {...series?.props}
     {...restProps}
-    opacity={(typeof opacity === 'number' ? opacity : undefined) ?? seriesOpacity}
   />
 {/if}

package/dist/components/Text.svelte

@@ -686,7 +686,14 @@
       if (segments) {
         let xOffset = baseX;
         for (const segment of segments) {
-          const segStyles = getTextStyles(undefined, undefined, undefined, undefined, undefined, segment.class);
+          const segStyles = getTextStyles(
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            segment.class
+          );
           const text = String(segment.value);
           // Set font before rendering and measuring so width is accurate
           const segComputedStyles = getComputedStyles(ctx.canvas, segStyles);
@@ -838,10 +845,7 @@
         >
           {#if segments}
             {#each segments as segment, index (index)}
-              <tspan
-                dy={index === 0 ? startDy : 0}
-                class={['lc-text-tspan', segment.class]}
-              >
+              <tspan dy={index === 0 ? startDy : 0} class={['lc-text-tspan', segment.class]}>
                 {segment.value}
               </tspan>
             {/each}

package/dist/components/Trail.svelte

@@ -180,9 +180,15 @@
       .map((d: any) => ({
         x: getScaleValue(d, ctx.xScale, xAccessor) + xOffset,
         y: getScaleValue(d, ctx.yScale, yAccessor) + yOffset,
-        r: resolvedR != null
-          ? resolveDataProp(resolvedR, d, ctx.rScale, typeof resolvedR === 'number' ? resolvedR : 4)
-          : 4,
+        r:
+          resolvedR != null
+            ? resolveDataProp(
+                resolvedR,
+                d,
+                ctx.rScale,
+                typeof resolvedR === 'number' ? resolvedR : 4
+              )
+            : 4,
       }));
 
     return computeTrailPath(points, { curve, cap, tension, resolution });
@@ -206,9 +212,15 @@
         .map((d: any) => ({
           x: getScaleValue(d, ctx.xScale, xAccessor) + xOffset,
           y: baseline,
-          r: resolvedR != null
-            ? resolveDataProp(resolvedR, d, ctx.rScale, typeof resolvedR === 'number' ? resolvedR : 4)
-            : 4,
+          r:
+            resolvedR != null
+              ? resolveDataProp(
+                  resolvedR,
+                  d,
+                  ctx.rScale,
+                  typeof resolvedR === 'number' ? resolvedR : 4
+                )
+              : 4,
         }));
 
       return computeTrailPath(points, { curve, cap, tension, resolution });
@@ -236,7 +248,7 @@
 <Path
   pathData={isTweened ? tweenState.current : trailPath}
   {fill}
-  fillOpacity={fillOpacity}
+  {fillOpacity}
   {opacity}
   stroke="none"
   class={cls('lc-trail', className)}

package/dist/components/Vector.svelte

@@ -127,10 +127,22 @@
   import { getGeoContext } from '../contexts/geo.js';
   import { getLayerContext } from '../contexts/layer.js';
   import { createMotion, createDataMotionMap, type MotionProp } from '../utils/motion.svelte.js';
-  import { hasAnyDataProp, resolveDataProp, extractRawDataValue, resolveGeoDataPair, resolveStyleProp, resolveColorProp } from '../utils/dataProp.js';
+  import {
+    hasAnyDataProp,
+    resolveDataProp,
+    extractRawDataValue,
+    resolveGeoDataPair,
+    resolveStyleProp,
+    resolveColorProp,
+  } from '../utils/dataProp.js';
   import { chartDataArray } from '../utils/common.js';
   import { cls } from '@layerstack/tailwind';
-  import { vectorArrowPath, vectorArrowFilledPath, vectorSpikePath, transformVectorPath } from '../utils/path.js';
+  import {
+    vectorArrowPath,
+    vectorArrowFilledPath,
+    vectorSpikePath,
+    transformVectorPath,
+  } from '../utils/path.js';
   import Path from './Path.svelte';
 
   let {
@@ -169,11 +181,11 @@
   // Per-item style mode: when any style prop is a function, we must render individual paths
   const hasPerItemStyles = $derived(
     typeof fill === 'function' ||
-    typeof stroke === 'function' ||
-    typeof fillOpacity === 'function' ||
-    typeof strokeWidth === 'function' ||
-    typeof opacity === 'function' ||
-    typeof className === 'function'
+      typeof stroke === 'function' ||
+      typeof fillOpacity === 'function' ||
+      typeof strokeWidth === 'function' ||
+      typeof opacity === 'function' ||
+      typeof className === 'function'
   );
 
   // Contexts
@@ -182,9 +194,7 @@
   const layerCtx = getLayerContext();
 
   // 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 values
   function resolveVector(d: any) {
@@ -200,8 +210,14 @@
     return {
       x: resolvedX,
       y: resolvedY,
-      length: resolveDataProp(lengthProp, d, chartCtx.rScale, typeof lengthProp === 'number' ? lengthProp : 12),
-      rotate: typeof rotateProp === 'number' ? rotateProp : (extractRawDataValue(rotateProp, d) ?? 0),
+      length: resolveDataProp(
+        lengthProp,
+        d,
+        chartCtx.rScale,
+        typeof lengthProp === 'number' ? lengthProp : 12
+      ),
+      rotate:
+        typeof rotateProp === 'number' ? rotateProp : (extractRawDataValue(rotateProp, d) ?? 0),
     };
   }
 
@@ -289,7 +305,11 @@
 
   const motionX = createMotion(initialX, () => (typeof x === 'number' ? x : 0), motion);
   const motionY = createMotion(initialY, () => (typeof y === 'number' ? y : 0), motion);
-  const motionLength = createMotion(initialLength, () => (typeof lengthProp === 'number' ? lengthProp : 12), motion);
+  const motionLength = createMotion(
+    initialLength,
+    () => (typeof lengthProp === 'number' ? lengthProp : 12),
+    motion
+  );
 
   const pixelRotate = $derived(typeof rotateProp === 'number' ? rotateProp : 0);
 
@@ -346,7 +366,10 @@
     stroke={stroke as string}
     strokeWidth={strokeWidth as number}
     opacity={opacity as number}
-    class="lc-vector {isFilled ? 'lc-vector-filled' : 'lc-vector-stroked'} {typeof className === 'string' ? className : ''}"
+    class="lc-vector {isFilled ? 'lc-vector-filled' : 'lc-vector-stroked'} {typeof className ===
+    'string'
+      ? className
+      : ''}"
   />
 {/if}
 

package/dist/components/Violin.svelte

@@ -148,8 +148,7 @@
     const ext: [number, number] = [sorted[0], sorted[sorted.length - 1]];
 
     // Silverman's rule of thumb for bandwidth
-    const bw =
-      bandwidthProp ?? 1.06 * (deviation(sorted) ?? 1) * Math.pow(sorted.length, -1 / 5);
+    const bw = bandwidthProp ?? 1.06 * (deviation(sorted) ?? 1) * Math.pow(sorted.length, -1 / 5);
 
     const kernelFn = epanechnikov(bw);
 

package/dist/components/charts/ArcChart.svelte

@@ -240,9 +240,7 @@
   );
 
   // Compute series colors locally to avoid derived_references_self cycle through context.series.allSeriesColors
-  const allSeriesColors = $derived(
-    series.map((s) => s.color).filter((c) => c != null) as string[]
-  );
+  const allSeriesColors = $derived(series.map((s) => s.color).filter((c) => c != null) as string[]);
 
   // Custom tickFormat for ArcChart legends - uses data labels instead of series labels
   const legendTickFormat = (tick: any) => {
@@ -416,8 +414,13 @@
               value={valueAccessor(data)}
               color={snippetProps.context.cScale?.(snippetProps.context.c(data))}
               {format}
-              onpointerenter={() => { if (snippetProps.context) snippetProps.context.series.highlightKey = keyAccessor(data); }}
-              onpointerleave={() => { if (snippetProps.context) snippetProps.context.series.highlightKey = null; }}
+              onpointerenter={() => {
+                if (snippetProps.context)
+                  snippetProps.context.series.highlightKey = keyAccessor(data);
+              }}
+              onpointerleave={() => {
+                if (snippetProps.context) snippetProps.context.series.highlightKey = null;
+              }}
               {...props.tooltip?.item}
             />
           </Tooltip.List>

package/dist/components/charts/AreaChart.svelte

@@ -108,7 +108,12 @@
         ...(typeof tooltipContext === 'object' ? tooltipContext : null),
       }}
   brush={brush
-    ? { axis: 'x', zoomOnBrush: true, ...(typeof brush === 'object' ? brush : null), ...props.brush }
+    ? {
+        axis: 'x',
+        zoomOnBrush: true,
+        ...(typeof brush === 'object' ? brush : null),
+        ...props.brush,
+      }
     : false}
   {series}
   {seriesLayout}

package/dist/components/charts/BarChart.svelte

@@ -184,7 +184,9 @@
           x1={valueAxis === 'y' && isGroupSeries ? (d) => s.value ?? s.key : undefined}
           y1={valueAxis === 'x' && isGroupSeries ? (d) => s.value ?? s.key : undefined}
           rounded={context.series.divergingEdgeKeys
-            ? context.series.divergingEdgeKeys.has(s.key) ? 'edge' : 'none'
+            ? context.series.divergingEdgeKeys.has(s.key)
+              ? 'edge'
+              : 'none'
             : context.series.isStacked && i !== context.series.visibleSeries.length - 1
               ? 'none'
               : Array.isArray(xProp) || Array.isArray(yProp)

package/dist/components/charts/LineChart.svelte

@@ -133,7 +133,12 @@
         ...(typeof tooltipContext === 'object' ? tooltipContext : null),
       }}
   brush={brush
-    ? { axis: 'x', zoomOnBrush: true, ...(typeof brush === 'object' ? brush : null), ...props.brush }
+    ? {
+        axis: 'x',
+        zoomOnBrush: true,
+        ...(typeof brush === 'object' ? brush : null),
+        ...props.brush,
+      }
     : false}
   {series}
   highlight={highlightWithPointClick as any}

package/dist/components/charts/PieChart.svelte

@@ -308,7 +308,9 @@
       startAngle: arc.startAngle,
       endAngle: arc.endAngle,
       outerRadius:
-        (context?.series.visibleSeries.length ?? 0) > 1 ? seriesIndex * (outerRadius ?? 0) : outerRadius,
+        (context?.series.visibleSeries.length ?? 0) > 1
+          ? seriesIndex * (outerRadius ?? 0)
+          : outerRadius,
       innerRadius,
       cornerRadius,
       padAngle,
@@ -464,8 +466,13 @@
               value={valueAccessor(data)}
               color={snippetProps.context.cScale?.(snippetProps.context.c(data))}
               {format}
-              onpointerenter={() => { if (snippetProps.context) snippetProps.context.series.highlightKey = keyAccessor(data); }}
-              onpointerleave={() => { if (snippetProps.context) snippetProps.context.series.highlightKey = null; }}
+              onpointerenter={() => {
+                if (snippetProps.context)
+                  snippetProps.context.series.highlightKey = keyAccessor(data);
+              }}
+              onpointerleave={() => {
+                if (snippetProps.context) snippetProps.context.series.highlightKey = null;
+              }}
               {...props.tooltip?.item}
             />
           </Tooltip.List>

package/dist/components/tooltip/Tooltip.svelte

@@ -377,10 +377,7 @@
           ) {
             rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
           }
-          if (
-            (xAlign === 'end' || xAlign === 'center') &&
-            containerRect.left + rect.left < 0
-          ) {
+          if ((xAlign === 'end' || xAlign === 'center') && containerRect.left + rect.left < 0) {
             rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
           }
         }
@@ -393,10 +390,7 @@
           ) {
             rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
           }
-          if (
-            (yAlign === 'end' || yAlign === 'center') &&
-            containerRect.top + rect.top < 0
-          ) {
+          if ((yAlign === 'end' || yAlign === 'center') && containerRect.top + rect.top < 0) {
             rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
           }
         }

package/dist/contexts/chart.d.ts

@@ -1,6 +1,6 @@
 import type { ChartState } from '../states/chart.svelte.js';
 import type { AnyScale } from '../utils/scales.svelte.js';
 export type { ChartState };
-export type { NodeKind, ComponentNode, RegisterComponentOptions } from '../states/chart.svelte.js';
+export type { NodeKind, ComponentNode, RegisterComponentOptions, } from '../states/chart.svelte.js';
 export declare function getChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): ChartState<T, XScale, YScale>;
 export declare function setChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(context: ChartState<T, XScale, YScale>): ChartState<T, XScale, YScale>;

package/dist/contexts/chart.js

@@ -5,7 +5,9 @@ const _ChartContext = new Context('ChartContext');
  * Provides safe defaults to prevent runtime errors.
  */
 const fallbackContext = {
-    registerMark: () => () => { },
+    registerMark: () => () => {
+        /* no-op */
+    },
     registerComponent: (_options) => ({
         id: Symbol('noop'),
         kind: 'mark',

package/dist/server/TestBarChart.svelte

@@ -1,35 +1,35 @@
 <script lang="ts">
-	import { scaleBand } from 'd3-scale';
-	import ServerChart from './ServerChart.svelte';
-	import type { CaptureTarget } from './captureStore.js';
-	import Bars from '../components/Bars.svelte';
+  import { scaleBand } from 'd3-scale';
+  import ServerChart from './ServerChart.svelte';
+  import type { CaptureTarget } from './captureStore.js';
+  import Bars from '../components/Bars.svelte';
 
-	let {
-		data,
-		width,
-		height,
-		capture,
-		onCapture
-	}: {
-		data: { category: string; value: number }[];
-		width: number;
-		height: number;
-		capture?: CaptureTarget;
-		onCapture?: (data: CaptureTarget) => void;
-	} = $props();
+  let {
+    data,
+    width,
+    height,
+    capture,
+    onCapture,
+  }: {
+    data: { category: string; value: number }[];
+    width: number;
+    height: number;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+  } = $props();
 </script>
 
 <ServerChart
-	{capture}
-	{onCapture}
-	{width}
-	{height}
-	{data}
-	x="category"
-	xScale={scaleBand().paddingInner(0.2).paddingOuter(0.1)}
-	y="value"
-	yDomain={[0, null]}
-	padding={{ top: 20, right: 20, bottom: 30, left: 40 }}
+  {capture}
+  {onCapture}
+  {width}
+  {height}
+  {data}
+  x="category"
+  xScale={scaleBand().paddingInner(0.2).paddingOuter(0.1)}
+  y="value"
+  yDomain={[0, null]}
+  padding={{ top: 20, right: 20, bottom: 30, left: 40 }}
 >
-	<Bars fill="rgb(59, 130, 246)" radius={4} />
+  <Bars fill="rgb(59, 130, 246)" radius={4} />
 </ServerChart>

package/dist/server/TestLineChart.svelte

@@ -1,35 +1,35 @@
 <script lang="ts">
-	import ServerChart from './ServerChart.svelte';
-	import type { CaptureTarget } from './captureStore.js';
-	import Area from '../components/Area.svelte';
-	import Spline from '../components/Spline.svelte';
+  import ServerChart from './ServerChart.svelte';
+  import type { CaptureTarget } from './captureStore.js';
+  import Area from '../components/Area.svelte';
+  import Spline from '../components/Spline.svelte';
 
-	let {
-		data,
-		width,
-		height,
-		capture,
-		onCapture
-	}: {
-		data: { date: number; value: number }[];
-		width: number;
-		height: number;
-		capture?: CaptureTarget;
-		onCapture?: (data: CaptureTarget) => void;
-	} = $props();
+  let {
+    data,
+    width,
+    height,
+    capture,
+    onCapture,
+  }: {
+    data: { date: number; value: number }[];
+    width: number;
+    height: number;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+  } = $props();
 </script>
 
 <ServerChart
-	{capture}
-	{onCapture}
-	{width}
-	{height}
-	{data}
-	x="date"
-	y="value"
-	yDomain={[0, null]}
-	padding={{ top: 20, right: 20, bottom: 20, left: 20 }}
+  {capture}
+  {onCapture}
+  {width}
+  {height}
+  {data}
+  x="date"
+  y="value"
+  yDomain={[0, null]}
+  padding={{ top: 20, right: 20, bottom: 20, left: 20 }}
 >
-	<Area fill="rgba(59, 130, 246, 0.15)" stroke="none" />
-	<Spline stroke="rgb(59, 130, 246)" strokeWidth={2} />
+  <Area fill="rgba(59, 130, 246, 0.15)" stroke="none" />
+  <Spline stroke="rgb(59, 130, 246)" strokeWidth={2} />
 </ServerChart>

package/dist/server/index.js

@@ -64,7 +64,7 @@ export function renderChart(component, options) {
     const captureTarget = {};
     // SSR render to build the component tree and capture chart state
     const rendered = render(component, {
-        props: { ...props, width, height, capture: captureTarget }
+        props: { ...props, width, height, capture: captureTarget },
     });
     // Force the SSR render to fully flush
     void rendered.body;