perf improvements

.changeset/fix-series-state-effect-root.md

@@ -0,0 +1,7 @@
+---
+'layerchart': patch
+---
+
+fix(SeriesState): Avoid `derived_inert` crash when chart unmounts under a `<svelte:boundary>`
+
+The `selectedKeys` sync effect was wrapped in `$effect.root`, creating an isolated scope that survived chart unmount. When the parent chart was destroyed (e.g. an example reloading inside the docs `<svelte:boundary>` after an async `$derived` re-evaluated), the `#series` derived became inert while the orphaned effect kept reading it — producing `Reading a derived belonging to a now-destroyed effect may result in stale values` warnings followed by `TypeError: e.some is not a function`. The effect now lives in the constructor, scoped to the component that instantiated `SeriesState`, so it is torn down with the chart.

.changeset/fix-tween-on-mount.md

@@ -0,0 +1,11 @@
+---
+'layerchart': patch
+---
+
+fix(Arc, RectClipPath, ChartClipPath): Restore on-mount tween animations
+
+Two related regressions introduced in the layer-component split (#848) prevented `motion` + `initial*` props from animating on mount.
+
+**`Arc`** — `motion`, `value`, `initialValue` and the rest of Arc's geometry props (`domain`, `range`, `startAngle`, `endAngle`, `innerRadius`, `outerRadius`, `cornerRadius`, `padAngle`, `track*`, `offset`) were not destructured in `Arc.base.svelte`, so they leaked through `{...restProps}` onto the inner `<Path>`. The forwarded `motion` made `Path` *also* tween the path-string on top of the end-angle tween that `ArcState` already drives, producing visibly wrong arcs (NaN coordinates, runaway radii). They are now extracted and passed explicitly to `ArcState`.
+
+**`RectClipPath` / `ChartClipPath`** — `motion`, `initialX`, `initialY`, `initialWidth`, `initialHeight` were declared on the type but never consumed: the path was a plain `$derived` of the static `x`/`y`/`width`/`height` props, so passing `<ChartClipPath initialWidth={0} motion={{ width: { type: 'tween', … } }}>` rendered the final width on mount with no animation. Each dimension now flows through its own `createMotion` (using the corresponding `initial*` value as the animation start), and the path is built from the animated values.

.changeset/path-lazy-feature-allocation.md

@@ -0,0 +1,25 @@
+---
+'layerchart': patch
+---
+
+perf: Reduce per-tick reactive overhead in `Path` / `Link` (force-simulation graphs)
+
+In mark-heavy scenes (force simulations with hundreds of links flowing through `Link → Path`) several reactive structures unconditionally subscribed every `<path>` template updater to props that don't change on a tick, causing per-frame work to scale with the number of props × the number of marks. Each fix below is independent; together they take the lattice (n=20, 760 links) example from ~5–6 fps to ~9 fps during simulation.
+
+**`PathState.tweenedPathData` now reads only `pathData`, not all Path props.**
+Pre-fix, the getter resolved `pathData` via `getProps()`, a function that constructs an object literal of every reactive Path prop. Each read of `tweenedPathData` (i.e. each per-tick `<path d=...>` update) therefore subscribed the updater to every Path prop and re-read all of them. `PathState` now takes a dedicated `getPathData` getter alongside `getProps`, and the hot-path tween / DOM read only touches `pathData`. `Path.svg.svelte` and `Path.canvas.svelte` pass them as separate getters.
+
+**`Link.base.svelte` passes a stable `getPathData` function rather than `motionPath.current` directly.**
+Reading `motionPath.current` from `Link.base.svelte`'s template subscribed the entire `<Path>` block to every tick, forcing the parent's prop spread (`{...restProps}`) and `cls(...)` evaluation to re-run on every change. Passing a stable function reference moves the per-tick read inside `<Path>`'s own template, keeping `Link.base.svelte` stable. Requires the new `pathData?: string | (() => string)` form on `Path`.
+
+**`Path.svg.svelte` allocates `draw`-related state lazily.**
+
+- `endPoint = createControlledMotion(..., { type: 'none' })` was created for every `Path`, even when no `draw` transition was configured. Now only created when `draw` is set.
+- The `$effect` that tracked `tweenedPathData` for `startContent` / `endContent` positioning ran on every `Path`, even when neither prop was provided. Now only registered when at least one is set.
+- `drawKey` is only ever set when `draw` is configured, so the `{#key c.drawKey}` block is a no-op for paths without a draw transition. The block stays unconditional — splitting it behind `{#if draw}` showed no measurable benefit over leaving the inert subscription in place.
+
+**`Path.svg.svelte` extracts styling props out of `...rest`.**
+`pathData`, `class`, `fill` / `fillOpacity` / `stroke` / `strokeOpacity` / `strokeWidth` / `opacity` and `motion` are now destructured out of `$props()` rather than left in `...rest`, so the `<path>` element's `{...rest}` spread doesn't re-evaluate every frame when those props change (`pathData` changes on every force-sim tick; `class` is typically a fresh `cls(...)` string per parent render).
+
+**`Link.base.svelte` drops a redundant prop spread.**
+Removed `{...extractLayerProps(restProps, 'lc-link')}` before `{...restProps}` — the call's only contribution (`class`) was being immediately overridden by the explicit `class={cls('lc-link', …)}` that follows, making the spread pure overhead.

.changeset/skip-empty-markinfo-effect.md

@@ -0,0 +1,9 @@
+---
+'layerchart': patch
+---
+
+perf: Skip mark-info `$effect` for pixel-mode primitives
+
+`registerComponent` now probes `markInfo()` once at construction; if the result is initially empty (pixel-mode primitives where `cx`/`cy`/`r`/etc. are numbers rather than string/function accessors), it skips creating the tracking `$effect` entirely. Saves one effect frame per primitive — adds up in mark-heavy scenes (force simulations, scatter plots with hundreds of nodes).
+
+Trade-off: a primitive that starts in pixel mode and later flips to data mode at runtime (e.g. `cx` mutates from a number to a string) will not register a mark. Mark mode is typically static; if a chart needs runtime data-mode marks, define an explicit `series` on the chart instead.

bundle-analyzer/bundle-scenarios.ts

@@ -1749,35 +1749,38 @@ const INDIVIDUAL_COMPONENTS: string[] = [
   'AnnotationPoint',
   'AnnotationRange',
   'Arc',
+  'ArcChart',
   'ArcLabel',
   'Area',
+  'AreaChart',
   'Axis',
   'Bar',
+  'BarChart',
   'Bars',
   'Blur',
-  'BoxPlot',
   'Bounds',
+  'BoxPlot',
   'BrushContext',
   'Calendar',
   'Canvas',
   'Cell',
   'Chart',
+  'ChartClipPath',
   'ChartCore',
   'Chord',
-  'ChartClipPath',
   'Circle',
   'CircleClipPath',
   'CircleLegend',
   'ClipPath',
   'ColorRamp',
-  'Connector',
   'Contour',
   'Dagre',
   'Density',
   'Ellipse',
   'ForceSimulation',
   'Frame',
   'GeoCircle',
+  'GeoClipPath',
   'GeoEdgeFade',
   'GeoLegend',
   'GeoPath',
@@ -1799,6 +1802,7 @@ const INDIVIDUAL_COMPONENTS: string[] = [
   'Legend',
   'Line',
   'LinearGradient',
+  'LineChart',
   'Link',
   'Month',
   'MotionPath',
@@ -1807,6 +1811,7 @@ const INDIVIDUAL_COMPONENTS: string[] = [
   'Path',
   'Pattern',
   'Pie',
+  'PieChart',
   'Point',
   'Points',
   'Polygon',
@@ -1817,14 +1822,15 @@ const INDIVIDUAL_COMPONENTS: string[] = [
   'Ribbon',
   'Rule',
   'Sankey',
+  'ScatterChart',
   'Spline',
   'Svg',
   'Text',
   'Threshold',
   'TileImage',
   'Tooltip',
-  'TransformContext',
   'Trail',
+  'TransformContext',
   'Tree',
   'Treemap',
   'Vector',

bundle-analyzer/generate-pr-comment.js

@@ -50,13 +50,30 @@ function formatPercent(percent) {
 	return `${sign}${percent.toFixed(1)}%`;
 }
 
-function getStatusIcon(status, sizeDiff) {
+// Percent threshold above which a change is considered "large" (red/green).
+// Smaller changes still count as significant (per the size/percent gates in
+// analyzeChanges) but render as yellow to signal they're within tolerance.
+const LARGE_CHANGE_THRESHOLD_PERCENT = 1;
+
+function getStatusIcon(status, sizeDiff, sizePercent) {
 	if (status === "changed") {
-		return sizeDiff > 0 ? "\u{1F534}" : sizeDiff < 0 ? "\u{1F7E2}" : "\u27A1\uFE0F";
+		if (sizeDiff === 0) return "\u27A1\uFE0F";
+		if (Math.abs(sizePercent) < LARGE_CHANGE_THRESHOLD_PERCENT) {
+			return "\u{1F7E1}";
+		}
+		return sizeDiff > 0 ? "\u{1F534}" : "\u{1F7E2}";
 	}
 	return "\u27A1\uFE0F";
 }
 
+function isWarning(c) {
+	return (
+		c.status === "changed" &&
+		c.sizeDiff > 0 &&
+		Math.abs(c.sizePercent) >= LARGE_CHANGE_THRESHOLD_PERCENT
+	);
+}
+
 function analyzeChanges(prReport, targetReport) {
 	/** @type {ScenarioDiff[]} */
 	const changes = [];
@@ -162,6 +179,9 @@ function generateComment(changes, hasBaseline = true) {
 				if (!byGroup.has(g)) byGroup.set(g, []);
 				byGroup.get(g).push(s);
 			}
+			for (const rows of byGroup.values()) {
+				rows.sort((a, b) => b.currentSize - a.currentSize);
+			}
 
 			const expandedGroups = new Set(["Base (agnostic)", "Base (layer-specific)", "Core"]);
 
@@ -179,10 +199,13 @@ function generateComment(changes, hasBaseline = true) {
 		}
 
 		if (components.length > 0) {
+			const sortedComponents = [...components].sort(
+				(a, b) => b.currentSize - a.currentSize
+			);
 			comment += "<details>\n<summary>Individual Components</summary>\n\n";
 			comment += "| Component | Size | Gzipped |\n";
 			comment += "|-----------|-----:|--------:|\n";
-			for (const c of components) {
+			for (const c of sortedComponents) {
 				const name = c.scenario.replace("component:", "");
 				comment += `| \`${name}\` | ${formatKB(c.currentSize)} KB | ${formatKB(c.currentGzipSize)} KB |\n`;
 			}
@@ -207,34 +230,58 @@ function generateComment(changes, hasBaseline = true) {
 		c.scenario.startsWith("component:")
 	);
 
+	// Warnings — significant size increases shown at the top, uncollapsed, so
+	// regressions are visible without expanding any sections. Items still appear
+	// in their normal group/components section below.
+	const warnings = changedItems
+		.filter(isWarning)
+		.sort((a, b) => b.sizeDiff - a.sizeDiff);
+	if (warnings.length > 0) {
+		comment += `### ⚠️ Warnings (${warnings.length} significant size increase${warnings.length === 1 ? "" : "s"})\n\n`;
+		comment += "| Item | Current | New | Change |\n";
+		comment += "|------|--------:|----:|-------:|\n";
+		for (const w of warnings) {
+			const icon = getStatusIcon(w.status, w.sizeDiff, w.sizePercent);
+			const name = w.scenario.startsWith("component:")
+				? w.scenario.replace("component:", "")
+				: w.scenario;
+			const current = `${formatKB(w.targetSize)} KB<br><sub>${formatKB(w.targetGzipSize)} gz</sub>`;
+			const newSize = `${formatKB(w.currentSize)} KB<br><sub>${formatKB(w.currentGzipSize)} gz</sub>`;
+			const change = `${formatDiff(w.sizeDiff)} KB (${formatPercent(w.sizePercent)})<br><sub>${formatDiff(w.gzipSizeDiff)} gz (${formatPercent(w.gzipSizePercent)})</sub>`;
+			comment += `| ${icon} \`${name}\` | ${current} | ${newSize} | ${change} |\n`;
+		}
+		comment += "\n";
+	}
+
 	if (changedScenarios.length > 0) {
 		comment += "### Use-Case Scenarios\n\n";
 
 		// Group rows by `group` field, preserving insertion order. Scenarios
-		// without a `group` end up under "Other".
+		// without a `group` end up under "Other". Rows within each group are
+		// sorted by current size desc.
 		/** @type {Map<string, ScenarioDiff[]>} */
 		const byGroup = new Map();
 		for (const s of changedScenarios) {
 			const g = s.group || "Other";
 			if (!byGroup.has(g)) byGroup.set(g, []);
 			byGroup.get(g).push(s);
 		}
+		for (const rows of byGroup.values()) {
+			rows.sort((a, b) => b.currentSize - a.currentSize);
+		}
 
 		const renderRow = (s) => {
-			const icon = getStatusIcon(s.status, s.sizeDiff);
+			const icon = getStatusIcon(s.status, s.sizeDiff, s.sizePercent);
 			const current = `${formatKB(s.targetSize)} KB<br><sub>${formatKB(s.targetGzipSize)} gz</sub>`;
 			const newSize = `${formatKB(s.currentSize)} KB<br><sub>${formatKB(s.currentGzipSize)} gz</sub>`;
 			const change = `${formatDiff(s.sizeDiff)} KB (${formatPercent(s.sizePercent)})<br><sub>${formatDiff(s.gzipSizeDiff)} gz (${formatPercent(s.gzipSizePercent)})</sub>`;
 			return `| ${icon} \`${s.scenario}\` | ${current} | ${newSize} | ${change} |\n`;
 		};
 
-		// Base + Core groups expanded by default; other groups collapsed to keep
-		// the comment scannable. Each group shows the count of changed scenarios.
-		const expandedGroups = new Set(["Base (agnostic)", "Base (layer-specific)", "Core"]);
-
+		// All groups collapsed by default — Warnings section above surfaces any
+		// notable regressions, so the detail tables don't need to be open.
 		for (const [groupName, rows] of byGroup) {
-			const open = expandedGroups.has(groupName) ? " open" : "";
-			comment += `<details${open}>\n`;
+			comment += `<details>\n`;
 			comment += `<summary><strong>${groupName}</strong> (${rows.length} changed)</summary>\n\n`;
 			comment += "| Scenario | Current | New | Change |\n";
 			comment += "|----------|--------:|----:|-------:|\n";
@@ -244,14 +291,15 @@ function generateComment(changes, hasBaseline = true) {
 	}
 
 	if (changedComponents.length > 0) {
+		changedComponents.sort((a, b) => b.currentSize - a.currentSize);
 		comment += "<details>\n<summary>Individual Components";
 		comment += ` (${changedComponents.length} changed)</summary>\n\n`;
 		comment += "| Component | Current | New | Change |\n";
 		comment += "|-----------|--------:|----:|-------:|\n";
 
 		for (const c of changedComponents) {
 			const name = c.scenario.replace("component:", "");
-			const icon = getStatusIcon(c.status, c.sizeDiff);
+			const icon = getStatusIcon(c.status, c.sizeDiff, c.sizePercent);
 			const current = `${formatKB(c.targetSize)} KB`;
 			const newSize = `${formatKB(c.currentSize)} KB`;
 			const change = `${formatDiff(c.sizeDiff)} KB (${formatPercent(c.sizePercent)})`;

packages/layerchart/src/lib/components/Arc/Arc.base.svelte

@@ -20,24 +20,66 @@
     Path,
     ref: refProp = $bindable(),
     trackRef: trackRefProp = $bindable(),
-    fill,
-    fillOpacity,
+    // Override the `.lc-path` CSS stroke default so arcs don't get a visible outline
     stroke = 'none',
-    strokeWidth,
-    opacity,
+    // Arc-specific config — extracted out of `...restProps` so it doesn't
+    // leak onto `<Path>`. `motion` in particular would otherwise make Path
+    // also tween the path-string on top of the end-angle tween that
+    // `ArcState` already drives, producing visibly wrong arcs.
+    motion,
+    value,
+    initialValue,
+    domain,
+    range,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    padAngle,
+    trackStartAngle,
+    trackEndAngle,
+    trackInnerRadius,
+    trackOuterRadius,
+    trackCornerRadius,
+    trackPadAngle,
+    offset,
+    // Pointer / tooltip wiring
     data,
+    tooltip,
+    track = false,
     onpointerenter = () => {},
     onpointermove = () => {},
     onpointerleave = () => {},
     ontouchmove = () => {},
-    tooltip,
-    track = false,
     children,
     class: className,
     ...restProps
   }: ArcBaseProps = $props();
 
-  const c = new ArcState(() => ({ ...restProps, fill, fillOpacity, stroke, strokeWidth, opacity, data, tooltip, track }) as ArcProps);
+  const c = new ArcState(
+    () =>
+      ({
+        motion,
+        value,
+        initialValue,
+        domain,
+        range,
+        startAngle,
+        endAngle,
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        padAngle,
+        trackStartAngle,
+        trackEndAngle,
+        trackInnerRadius,
+        trackOuterRadius,
+        trackCornerRadius,
+        trackPadAngle,
+        offset,
+      }) as ArcProps
+  );
 
   let ref = $state<SVGPathElement>();
 
@@ -78,11 +120,7 @@
   bind:pathRef={ref}
   pathData={c.arc()}
   transform="translate({c.xOffset}, {c.yOffset})"
-  {fill}
-  {fillOpacity}
   {stroke}
-  {strokeWidth}
-  {opacity}
   {...restProps}
   class={cls('lc-arc-line', className)}
   onpointerenter={onPointerEnter}