Rune migration: Rework main lib with dynamic dimension calculations

[mhkeller]

Builds off of #331

A few things it does:

• Gets rid of stores in favor of the cake. syntax.
• Assembles scales dynamically for each dimension (x, y, z, r).
• Adds two new dimensions c and c2 which will be the default scales for color. Makes a little more semantic sense than z
• Also adds x2 and y2 scales that can be easily assembled as descendants (right word?) of x and y for a built-in way of doing grouped bar / column charts. Their range defaults to the parent's bandwidth.
• Folds in a fix for Preserve range on ordinal scales if range is not default #364
• Cleans up type errors and smooths out some of the helper functions that had weird return types (my past-self's fault!)
• Makes the layercake context the user receives typed. I want to test this some more because it has a somewhat weird build step but seems neat.
• Adds some examples of diverging positive/negative bar and column charts examples: Modify components to support negative bars and columns #181

Still need to update the rest of the components and examples but pushing this so @rgieseke can see what he thinks of the shape of it all.

[mhkeller]

One thing that's clashing a bit though, which I thought was fine but as I update the components has started to bother me is if we access the new c scale it's now c.cGet or c.config.c which is weird. Maybe we const ctx = getLayerCakeContext or const k instead of c because k obviously stands for cake.

[mhkeller]

Definitely needs some testing. Still not sure about the type setup.

[rgieseke]

Still need to update the rest of the components and examples but pushing this so @rgieseke can see what he thinks of the shape of it all.

Thanks for sharing @mhkeller, the more dynamic prop handling and avoiding repetitions in the definitions looks very cool!

One thing that's clashing a bit though, which I thought was fine but as I update the components has started to bother me is if we access the new c scale it's now c.cGet or c.config.c which is weird. Maybe we const ctx = getLayerCakeContext or const k instead of c because k obviously stands for cake.

I think something longer could work well, this is read more often than typed: ctx.data, context.data or cake.data

Also adds x1 and y1 scales that can be easily assembled as descendants (right word?) of x and y for a built-in way of doing grouped bar / column charts.

Is this the same as x2, y2 in Vega/Vega-Lite? (https://vega.github.io/vega-lite/docs/encoding.html#position)
I like the "secondary" implied in "2" for understanding what this does.

[mhkeller]

Let's maybe do cake – it's the most semantic and if we do context or ctx, that could also clash with the canvas stuff. Too bad we can't do 🍰.

Is this the same as x2, y2 in Vega/Vega-Lite? (https://vega.github.io/vega-lite/docs/encoding.html#position)
I like the "secondary" implied in "2" for understanding what this does.

I don't think so? Those look like they are related to drawing actual marks. But I'm not super familiar with Vega.

Take a look at the new ColumnGrouped example and component. The x1 scale is by default a scaleBand and is downstream of the x scale so there's out of the box support for groups. (As I look at that example, actually, we can get rid of settting x1Scale prop – that was just to set a different paddingInner and `round=true.)

Here's where it's defined:

layercake/src/lib/settings/dimensions.js

Lines 83 to 87 in e5c13f3

	name: 'x1',
	defaultScale: scaleBand,
	defaultRange: ctx => nestedRange(ctx.scales.x, ctx.percentRange === true ? 100 : ctx.width),
	canBePercentRange: false,
	features: { domainSort: true }

That being said, x1 is kind of confusing and x2 I think is a better name for it.

[mhkeller]

Also @aslak01, I rolled some of your ideas in #298 but I think the type situation is still a work in progress (which is entirely my fault since this is a point where I am not the strongest).

[mhkeller]

What I might do is take a week to think about this and look it over some more and then merge. The type stuff may need to be its own PR.

[Copilot]

Pull request overview

This PR continues the Svelte 5 (“runes”) migration by switching LayerCake internals and bundled components from store-based context access to a typed cake context (getLayerCakeContext), while also reworking scale/domain/range handling to be assembled per-dimension (including new color dimensions and nested scales for grouped charts). It also adds new examples, helper utilities, and test coverage for nested scale ranges, and updates docs + e2e snapshots to reflect the new output/ARIA structure.

Changes:

• Replace store-based LayerCake context consumption with getLayerCakeContext() across layouts and shipped components; re-export context/types from src/lib/index.js.
• Add nested range logic (nestedRange) to support x2/y2 grouped chart positioning and include new grouped/diverging examples + tests.
• Improve domain/range computation utilities (e.g., “complete domain” detection and preserving non-default scale ranges) and refresh docs/snapshots accordingly.

Reviewed changes

Copilot reviewed 217 out of 235 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
vite.config.js	Fix Vite alias value type for layercake path resolution.
test/lib/padScale.test.js	Comment formatting only; no behavioral change.
test/lib/nestedRange.test.js	New unit tests validating nested scale range derivation behavior.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Voronoi-svelte-1.aria.yml	Snapshot update for properties table ARIA structure/output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Tooltip-html-svelte-1.aria.yml	Snapshot update for properties table ARIA structure/output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-SharedTooltip-percent-range-html-svelte-1.aria.yml	Snapshot update reflecting cake.* wording and ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-SharedTooltip-html-svelte-1.aria.yml	Snapshot update reflecting cake.* wording and ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Scatter-webgl-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Scatter-svg-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Scatter-html-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Scatter-canvas-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Radar-svelte-1.aria.yml	Snapshot update reflecting corrected prop description text.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-QuadTree-percent-range-html-svelte-1.aria.yml	Snapshot update reflecting cake.* wording and ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-QuadTree-html-svelte-1.aria.yml	Snapshot update reflecting cake.* wording and ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MultiLine-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-svelte-1.aria.yml	Snapshot update reflecting cake.* wording and ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-html-svelte-1.aria.yml	Snapshot update reflecting cake.* wording and ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-canvas-svelte-1.aria.yml	Snapshot update reflecting cake.* wording and ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Line-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Line-D3-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Labels-html-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Key-html-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-ColumnGrouped-svelte-1.aria.yml	New snapshot for new grouped column component docs table.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Column-svelte-1.aria.yml	Snapshot update reflecting new c-scale guidance text.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-ClevelandDotPlot-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-ClevelandDotPlot-percent-range-html-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-CirclePack-html-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-CalendarMonth-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Brush-html-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-BeeswarmForce-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-BeeswarmForce-html-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Beeswarm-svelte-1.aria.yml	Snapshot update reflecting updated getTitle semantics.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Beeswarm-html-svelte-1.aria.yml	Snapshot update reflecting updated getTitle semantics.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-BarGrouped-svelte-1.aria.yml	New snapshot for new grouped bar component docs table.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Bar-svelte-1.aria.yml	Snapshot update reflecting new c-scale guidance text.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisXTop-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisX-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisRadial-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Arrows-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Area-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Area-D3-svelte-1.aria.yml	Snapshot update for ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AnnotationsData-html-svelte-1.aria.yml	Snapshot update reflecting cake.percentRange wording and ARIA output changes.
test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Annotations-html-svelte-1.aria.yml	Snapshot update for ARIA output changes.
src/scripts/svelte-app/vite.config.js	Add CSV numeric coercion via @rollup/plugin-dsv processing in the example Svelte app.
src/scripts/svelte-app/src/app.d.ts	Add *.csv module typing for the example Svelte app and update Kit docs link.
src/scripts/svelte-app/package.json	Bump example app dependencies/devDependencies to newer SvelteKit/Vite toolchain versions.
src/scripts/svelte-app/.github/dependabot.yml	Add Dependabot configuration for the example Svelte app.
src/routes/components/[slug].json/+server.js	Prefer code defaults when generating prop tables, without overwriting explicit JSDoc defaults unnecessarily.
src/routes/_examples/Timeplot.svelte	Convert block comments to line comments (no behavioral change).
src/routes/_examples/SmallMultiples.svelte	Convert block comments to line comments (no behavioral change).
src/routes/_examples/MultiLine.svelte	Migrate example from z to c (color dimension) and update scale props accordingly.
src/routes/_examples/MapSvg.svelte	Migrate example from z to c for color encoding.
src/routes/_examples/MapLayered.svelte	Migrate example from z to c for color encoding.
src/routes/_examples/ColumnStacked.svelte	Migrate example from z to c for stacked series coloring.
src/routes/_examples/ColumnGrouped.svelte	New grouped column example using x2 nested scale and c for series color.
src/routes/_examples/ColumnDiverging.svelte	New diverging column example demonstrating zero-baseline columns with c for up/down.
src/routes/_examples/ClevelandDotPlot.svelte	Migrate example from z to c for coloring.
src/routes/_examples/CirclePackForce.svelte	Migrate example from z to c for coloring.
src/routes/_examples/Calendar.svelte	Migrate example from z to c for coloring.
src/routes/_examples/BeeswarmForce.svelte	Migrate example from z to c for coloring and domain sort.
src/routes/_examples/Beeswarm.svelte	Migrate example to cake snippet context and from z to c.
src/routes/_examples/BarStacked.svelte	Migrate example from z to c for stacked series coloring.
src/routes/_examples/BarGrouped.svelte	New grouped bar example using y2 nested scale and c for series color.
src/routes/_examples/BarDiverging.svelte	New diverging bar example demonstrating zero-baseline bars with c for up/down.
src/routes/_examples/AreaStacked.svelte	Migrate example from z to c for stacked series coloring.
src/routes/_examples.js	Register new grouped/diverging examples in the examples index.
src/routes/_examples_ssr/Timeplot.svelte	Comment-only formatting change in SSR example.
src/routes/_examples_ssr/SmallMultiples.svelte	Comment-only formatting change in SSR example.
src/routes/_examples_ssr/MultiLine.svelte	Migrate SSR example from z to c.
src/routes/_examples_ssr/MapSvg.svelte	Migrate SSR example from z to c.
src/routes/_examples_ssr/MapLayered.svelte	Migrate SSR example from z to c.
src/routes/_examples_ssr/ColumnStacked.svelte	Migrate SSR example from z to c.
src/routes/_examples_ssr/ColumnGrouped.svelte	New SSR grouped column example using nested scale ranges under percentRange.
src/routes/_examples_ssr/ClevelandDotPlot.svelte	Migrate SSR example to c-based coloring.
src/routes/_examples_ssr/Calendar.svelte	Migrate SSR example to c-based coloring.
src/routes/_examples_ssr/BarStacked.svelte	Migrate SSR example from z to c.
src/routes/_examples_ssr/BarGrouped.svelte	New SSR grouped bar example using nested scale ranges under percentRange.
src/routes/_examples_ssr/AreaStacked.svelte	Migrate SSR example from z to c.
src/routes/_examples_ssr.js	Register new SSR grouped/diverging examples in the SSR examples index.
src/routes/_components/Tooltip.html.svelte	Update routed component example to use c scale instead of z.
src/routes/_components/SharedTooltip.html.svelte	Update routed component example to use c scale instead of z.
src/routes/_components/MultiLine.svelte	Update routed component example to use c scale instead of z.
src/routes/_components/Map.svg.svelte	Update routed component example to use c scale instead of z.
src/routes/_components/GroupLabels.html.svelte	Update routed component example to use c scale instead of z.
src/routes/_components/ColumnStacked.svelte	Update routed component example to use c scale instead of z.
src/routes/_components/ColumnGrouped.svelte	New routed component example showcasing grouped columns via x2.
src/routes/_components/ClevelandDotPlot.svelte	Update routed component example to use c-based coloring.
src/routes/_components/ClevelandDotPlot.html.svelte	Update routed component example to use c-based coloring.
src/routes/_components/CirclePackForce.svelte	Update routed component example to use c-based coloring.
src/routes/_components/Calendar.svelte	Update routed component example to use c-based coloring.
src/routes/_components/BeeswarmForce.svelte	Update routed component example to use c-based coloring and cake snippet.
src/routes/_components/BeeswarmForce.html.svelte	Update routed component example to use c-based coloring and cake snippet.
src/routes/_components/Beeswarm.svelte	Update routed component example to use c-based coloring and cake snippet.
src/routes/_components/Beeswarm.html.svelte	Update routed component example to use c-based coloring and cake snippet.
src/routes/_components/BarStacked.svelte	Update routed component example to use c-based coloring.
src/routes/_components/BarGrouped.svelte	New routed component example showcasing grouped bars via y2.
src/routes/_components/AreaStacked.svelte	Update routed component example to use c-based coloring.
src/routes/_components.js	Register new routed component examples (grouped bar/column).
src/routes/_components_ssr/SharedTooltip.percent-range.html.svelte	Update SSR routed component example to use c instead of z.
src/routes/_components_ssr/Key.html.svelte	Update SSR routed component example to use c instead of z.
src/lib/utils/isCompleteDomain.js	New utility to detect whether a domain is “complete” vs needs measured extents.
src/lib/utils/hasPristineRange.js	New utility to detect whether a scale range is still the default (supports preserving user-set ranges).
src/lib/utils/hasBandwidth.js	New utility to detect band/point scales for nested range logic.
src/lib/utils/getCompleteDomain.js	Removed in favor of clearer isCompleteDomain utility.
src/lib/utils/filterObject.js	Improve JSDoc typing for filtered objects.
src/lib/types.js	New shared prop/type unions exported for consumer JSDoc typing.
src/lib/settings/getDefaultRange.js	Rework default range selection to be dimension-driven and context-aware (incl. percentRange).
src/lib/settings/defaultScales.js	Removed old default scales mapping in favor of dimension definitions.
src/lib/layouts/Webgl.svelte	Switch layout to cake context for padding and expose WebGL context via getter-based subcontext.
src/lib/layouts/Svg.svelte	Switch layout sizing/padding to cake context getters.
src/lib/layouts/ScaledSvg.svelte	Switch layout padding to cake context getters.
src/lib/layouts/Html.svelte	Switch layout padding to cake context getters.
src/lib/layouts/Canvas.svelte	Switch layout to cake context for padding and expose 2D context via getter-based subcontext.
src/lib/index.js	Export typed LayerCake context helpers and shared JSDoc typedefs.
src/lib/helpers/nestedRange.js	New helper to derive nested dimension ranges from parent scale units/bandwidth.
src/lib/helpers/getRange.js	Adjust helper signature/docs for direct scale input.
src/lib/helpers/getPadFunctions.js	Add/clarify JSDoc typing for pad function helpers.
src/lib/helpers/findScaleType.js	Convert header comment into JSDoc with explicit return union.
src/lib/helpers/createGetter.js	Adjust helper signature/docs to accept accessor+scale directly.
src/lib/helpers/createEmptySizeWarner.js	New helper to debounce warnings for zero-sized chart drawing areas.
src/lib/helpers/calcScaleExtents.js	Rework extent calculation to accept explicit dimension info and avoid scale probing.
src/lib/helpers/calcDomain.js	Rework domain calculation to return undefined when domain should be preserved.
src/content/guide/06-layout-component-props.md	Update examples for Svelte 5 snippet usage and bindable state.
src/content/guide/02-accessibility.md	Add guidance around hover layers being mouse-only and aria-hidden hit areas.
src/_modules/hljsDefineSvelte.js	Comment update for clarity and module provenance.
src/_modules/getSections.js	Avoid global marked singleton mutation by creating a fresh Marked instance per file.
src/_data/yearGroupsLong.js	Add dataset for grouped bar/column examples.
src/_data/yearChanges.csv	Add dataset for diverging bar/column examples.
src/_components/Voronoi.svelte	Switch to cake context, fix docs link text, and remove hover hit areas from accessibility tree.
src/_components/Tooltip.html.svelte	Clarify component documentation wording for tooltip usage.
src/_components/SharedTooltip.html.svelte	Switch to cake context and update docs text to reference cake.* fields.
src/_components/Scatter.svg.svelte	Switch to cake context for accessors/scales.
src/_components/Scatter.html.svelte	Switch to cake context for accessors/scales.
src/_components/Scatter.canvas.svelte	Switch to cake context and updated canvas subcontext usage.
src/_components/Radar.svelte	Switch to cake context and correct strokeWidth doc description.
src/_components/QuadTree.html.svelte	Switch to cake context and update docs to reference cake.data.
src/_components/MultiLine.svelte	Switch to cake context and use c for stroke coloring.
src/_components/MapPoints.svelte	Switch to cake context and update docs to reference cake.data.features.
src/_components/MapPoints.html.svelte	Switch to cake context and update docs to reference cake.data.features.
src/_components/MapLabels.svg.svelte	Switch to cake context and fix wording in docs.
src/_components/MapLabels.html.svelte	Switch to cake context and fix wording in docs.
src/_components/Line.svelte	Switch to cake context for accessors/data.
src/_components/Line-D3.svelte	Switch to cake context for accessors/data.
src/_components/Labels.html.svelte	Switch to cake context for label positioning.
src/_components/Key.html.svelte	Switch from zScale/zDomain to cScale/cDomain.
src/_components/GroupLabels.html.svelte	Switch to cake context and use c accessor for label text.
src/_components/ColumnStacked.svelte	Switch to cake context and use c scale for series color.
src/_components/ColumnGrouped.svelte	New grouped column rendering component using x2 nested scale and c for color.
src/_components/ClevelandDotPlot.svelte	Switch to cake context and use c scale for dot coloring.
src/_components/ClevelandDotPlot.percent-range.html.svelte	Switch to cake context and use c scale for dot coloring.
src/_components/CirclePack.html.svelte	Switch to cake context and update hierarchy node typedef typing.
src/_components/CalendarMonth.svelte	Switch to cake context and migrate z usage to c.
src/_components/BeeswarmForce.svelte	Switch to cake context and use c for node coloring.
src/_components/BeeswarmForce.html.svelte	Switch to cake context and use c for node coloring.
src/_components/Beeswarm.svelte	Switch to cake context; keep full row on data instead of copying z fields.
src/_components/Beeswarm.html.svelte	Switch to cake context; keep full row on data instead of copying z fields.
src/_components/BarStacked.svelte	Switch to cake context and use c scale for series color.
src/_components/BarGrouped.svelte	New grouped bar rendering component using y2 nested scale and c for color.
src/_components/Bar.svelte	Update bar rendering to use zero baseline and optionally color via c scale.
src/_components/AxisY.svelte	Switch to cake context and add fallback when xRange is unavailable.
src/_components/AxisY.percent-range.html.svelte	Switch to cake context and add fallback when xRange is unavailable.
src/_components/AxisXTop.percent-range.html.svelte	Switch to cake context and fix baseline rendering placement.
src/_components/AxisX.svelte	Switch to cake context and add fallback when yRange is unavailable.
src/_components/AxisX.percent-range.html.svelte	Switch to cake context and fix baseline rendering placement.
src/_components/AxisRadial.svelte	Switch to cake context for config/extents/scale access.
src/_components/Arrows.svelte	Switch to cake context for scale and dimension access.
src/_components/AreaStacked.svelte	Switch to cake context and use c scale for series fill.
src/_components/Area.svelte	Switch to cake context for accessors/scales/extents.
src/_components/Area-D3.svelte	Switch to cake context for accessors/scales.
src/_components/AnnotationsData.html.svelte	Switch to cake context and default pr to cake.percentRange.
.gitignore	Ignore /.claude directory.

Files not reviewed (2)

• pnpm-lock.yaml: Generated file
• src/scripts/svelte-app/package-lock.json: Generated file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.