entasis 0.9.2 → 0.10.0

package/dist/components/AppShell/appShell.theme.js

@@ -41,7 +41,7 @@ const defaultPage = cva({
     variants: {
         variant: {
             admin: 'bg-surface [--page-shell-chrome:var(--color-surface-canvas)] [--page-shell-surface:var(--color-surface)]',
-            floating: 'bg-surface-canvas [--page-shell-chrome:var(--color-surface)] [--page-shell-surface:var(--color-surface-canvas)] [--page-shell-chrome-inline-gap:0.5rem] [--page-shell-chrome-block-gap:0.5rem] [--page-shell-header-top-radius:var(--radius-lg)] [--page-shell-header-bottom-radius:var(--radius-lg)] [--page-shell-footer-top-radius:var(--radius-lg)] [--page-shell-footer-bottom-radius:var(--radius-lg)] [--page-shell-chrome-border:var(--color-neutral-muted)] [--page-shell-chrome-shadow:var(--elevation-1)]',
+            floating: 'bg-surface-canvas [--page-shell-chrome:var(--color-surface)] [--page-shell-surface:var(--color-surface-canvas)] [--page-shell-chrome-inline-gap:var(--space-md)] [--page-shell-chrome-block-gap:var(--space-md)] [--page-shell-header-top-radius:var(--radius-lg)] [--page-shell-header-bottom-radius:var(--radius-lg)] [--page-shell-footer-top-radius:var(--radius-lg)] [--page-shell-footer-bottom-radius:var(--radius-lg)] [--page-shell-chrome-border:var(--color-neutral-muted)] [--page-shell-chrome-shadow:var(--elevation-1)]',
             inset: 'bg-surface [--page-shell-chrome:var(--color-surface)] [--page-shell-surface:var(--color-surface)] transition-[border-color,box-shadow] md:raised-1 md:group-data-[page-flush=true]/sidebar-wrapper:border-transparent md:group-data-[page-flush=true]/sidebar-wrapper:shadow-none',
             split: 'bg-surface [--page-shell-chrome:var(--color-surface)] [--page-shell-surface:var(--color-surface)] transition-[border-color,box-shadow] md:raised-1 md:group-data-[page-flush=true]/sidebar-wrapper:border-transparent md:group-data-[page-flush=true]/sidebar-wrapper:shadow-none',
             // The frame already owns the radius, border and elevation, so the page inside it is flat,
@@ -61,12 +61,12 @@ const defaultPage = cva({
         {
             variant: 'floating',
             side: 'left',
-            class: 'md:[--page-shell-chrome-left-gap:0px] md:group-data-[display-state=hidden]/sidebar-wrapper:[--page-shell-chrome-left-gap:0.5rem]'
+            class: 'md:[--page-shell-chrome-left-gap:0px] md:group-data-[display-state=hidden]/sidebar-wrapper:[--page-shell-chrome-left-gap:var(--space-md)]'
         },
         {
             variant: 'floating',
             side: 'right',
-            class: 'md:[--page-shell-chrome-right-gap:0px] md:group-data-[display-state=hidden]/sidebar-wrapper:[--page-shell-chrome-right-gap:0.5rem]'
+            class: 'md:[--page-shell-chrome-right-gap:0px] md:group-data-[display-state=hidden]/sidebar-wrapper:[--page-shell-chrome-right-gap:var(--space-md)]'
         }
     ],
     defaultVariants: {

package/dist/components/ButtonGroup/ButtonGroup.svelte

@@ -5,6 +5,8 @@
 
 	let {
 		items,
+		children,
+		label,
 		size,
 		color,
 		variant,
@@ -17,8 +19,12 @@
 	const classes = $derived(useButtonGroupTheme(theme));
 </script>
 
-<div class={classes.root({ className })} {...attachments}>
-	{#each items as button, index (index)}
-		<Button {size} {color} {variant} {disabled} {...button} />
-	{/each}
+<div role="group" aria-label={label} class={classes.root({ className })} {...attachments}>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#each items ?? [] as button, index (index)}
+			<Button {size} {color} {variant} {...button} disabled={disabled || button.disabled} />
+		{/each}
+	{/if}
 </div>

package/dist/components/ButtonGroup/buttonGroup.mcp.d.ts

@@ -1 +1 @@
-export declare const buttonGroupDescription = "\n# ButtonGroup Component\n\nThe ButtonGroup component displays a collection of related buttons as a cohesive group with shared styling properties.\n\n## Basic Usage\n\n```svelte\n<ButtonGroup \n\titems={[\n\t\t{ children: 'First' },\n\t\t{ children: 'Second' },\n\t\t{ children: 'Third' }\n\t]}\n/>\n```\n\n## Props\n\n### Core Props\n- **items**: Array<ButtonProps> (required) - Array of button configurations\n  - Each button can have all standard Button component props\n\n### Shared Button Props\n- **size**: 'small' | 'normal' | 'large' - Applied to all buttons in the group\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Shared color for all buttons\n- **variant**: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' - Shared variant for all buttons\n- **disabled**: boolean - Disables all buttons in the group\n\n### Styling Props\n- **class**: string - Additional CSS classes for the group container\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<ButtonGroup>\n\t<Button />\n\t<Button />\n\t<Button />\n</ButtonGroup>\n```\n\n## Examples\n\n### Basic Button Group\n```svelte\n<ButtonGroup \n\titems={[\n\t\t{ children: 'Left' },\n\t\t{ children: 'Center' },\n\t\t{ children: 'Right' }\n\t]}\n/>\n```\n\n### With Shared Styling\n```svelte\n<ButtonGroup \n\tsize=\"large\"\n\tcolor=\"primary\"\n\tvariant=\"outline\"\n\titems={[\n\t\t{ children: 'Option 1' },\n\t\t{ children: 'Option 2' },\n\t\t{ children: 'Option 3' }\n\t]}\n/>\n```\n\n### With Icons\n```svelte\n<script lang=\"ts\">\n\timport { ButtonGroup } from 'entasis/button-group';\n\timport { textAlignLeftIcon } from 'entasis/icons/textAlignLeft';\n\timport { textAlignCenterIcon } from 'entasis/icons/textAlignCenter';\n\timport { textAlignRightIcon } from 'entasis/icons/textAlignRight';\n</script>\n\n<ButtonGroup \n\titems={[\n\t\t{ \n\t\t\tprefix: textAlignLeftIcon,\n\t\t\tchildren: 'Left' \n\t\t},\n\t\t{ \n\t\t\tprefix: textAlignCenterIcon,\n\t\t\tchildren: 'Center' \n\t\t},\n\t\t{ \n\t\t\tprefix: textAlignRightIcon,\n\t\t\tchildren: 'Right' \n\t\t}\n\t]}\n/>\n```\n\n### With Individual Click Handlers\n```svelte\n<script>\n\tfunction handleOption(option) {\n\t\tconsole.log(`Selected: ${option}`);\n\t}\n</script>\n\n<ButtonGroup \n\titems={[\n\t\t{ \n\t\t\tchildren: 'Save',\n\t\t\tonclick: () => handleOption('save')\n\t\t},\n\t\t{ \n\t\t\tchildren: 'Cancel',\n\t\t\tonclick: () => handleOption('cancel')\n\t\t}\n\t]}\n/>\n```\n\n### Disabled Group\n```svelte\n<ButtonGroup \n\tdisabled\n\titems={[\n\t\t{ children: 'Option 1' },\n\t\t{ children: 'Option 2' }\n\t]}\n/>\n```\n\n### Icon Only Buttons\n```svelte\n<script lang=\"ts\">\n\timport { ButtonGroup } from 'entasis/button-group';\n\timport { textBIcon } from 'entasis/icons/textB';\n\timport { textItalicIcon } from 'entasis/icons/textItalic';\n\timport { textUnderlineIcon } from 'entasis/icons/textUnderline';\n</script>\n\n<ButtonGroup \n\titems={[\n\t\t{ \n\t\t\tsquared: true,\n\t\t\tprefix: textBIcon\n\t\t},\n\t\t{ \n\t\t\tsquared: true,\n\t\t\tprefix: textItalicIcon\n\t\t},\n\t\t{ \n\t\t\tsquared: true,\n\t\t\tprefix: textUnderlineIcon\n\t\t}\n\t]}\n/>\n```\n\n### Mixed Button States\n```svelte\n<ButtonGroup \n\tvariant=\"outline\"\n\titems={[\n\t\t{ children: 'Active', color: 'primary' },\n\t\t{ children: 'Default', color: 'neutral' },\n\t\t{ children: 'Disabled', disabled: true }\n\t]}\n/>\n```\n\n### Segmented Control\n```svelte\n<script>\n\tlet selected = $state('week');\n</script>\n\n<ButtonGroup \n\titems={[\n\t\t{ \n\t\t\tchildren: 'Day',\n\t\t\tvariant: selected === 'day' ? 'solid' : 'ghost',\n\t\t\tonclick: () => selected = 'day'\n\t\t},\n\t\t{ \n\t\t\tchildren: 'Week',\n\t\t\tvariant: selected === 'week' ? 'solid' : 'ghost',\n\t\t\tonclick: () => selected = 'week'\n\t\t},\n\t\t{ \n\t\t\tchildren: 'Month',\n\t\t\tvariant: selected === 'month' ? 'solid' : 'ghost',\n\t\t\tonclick: () => selected = 'month'\n\t\t}\n\t]}\n/>\n```\n\n## Styling\n\nButtonGroup automatically:\n- Removes border-radius from middle buttons\n- Adjusts borders to prevent double borders\n- Creates a cohesive, connected appearance\n- Maintains consistent spacing\n\n## Accessibility\n\n- Each button maintains full keyboard accessibility\n- Focus styles are preserved\n- Disabled state cascades properly\n- Screen readers announce each button individually\n\n## Notes\n\n- Individual button props override shared props\n- Buttons are rendered in the order provided\n- The group container can be styled with the `class` prop\n- All Button component features are supported for individual buttons\n\n## Theme Customization\n\nThe ButtonGroup component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main button group container styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for button group container (handles border radius and border connections between buttons)\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<ButtonGroup \n  items={buttons}\n  theme={{\n    root: {\n      base: 'flex items-center rounded-lg overflow-hidden'\n    }\n  }}\n/>\n```\n\n**Custom Group Styling**:\n```svelte\n<ButtonGroup \n  items={buttons}\n  theme={{\n    root: {\n      base: 'flex items-center gap-0 border-2 border-primary rounded-lg overflow-hidden'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setButtonGroupTheme } from './index.ts';\n  \n  setButtonGroupTheme({\n    root: {\n      base: 'flex items-center first-child:rounded-r-none last-child:rounded-l-none'\n    }\n  });\n</script>\n```\n";
+export declare const buttonGroupDescription = "\n# ButtonGroup Component\n\nThe ButtonGroup component displays a collection of related buttons as a cohesive group with shared styling properties.\n\n## Basic Usage\n\n```svelte\n<ButtonGroup \n\titems={[\n\t\t{ children: 'First' },\n\t\t{ children: 'Second' },\n\t\t{ children: 'Third' }\n\t]}\n/>\n```\n\n## Props\n\n### Core Props\nPass either `items` or `children`.\n- **items**: Array<ButtonProps> - Array of button configurations\n  - Each button can have all standard Button component props\n- **children**: Snippet - Buttons composed directly, for content an item object cannot describe\n  (a Tooltip or Popover trigger, a Button with a custom body). Each direct child is joined to its\n  neighbours; set size, color and variant on each Button, since the shared props below apply to\n  `items` only.\n- **label**: string - Accessible name of the group (the root has `role=\"group\"`)\n\n### Shared Button Props (items)\n- **size**: 'small' | 'normal' | 'large' - Applied to all buttons in the group\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Shared color for all buttons\n- **variant**: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' - Shared variant for all buttons\n- **disabled**: boolean - Disables all buttons in the group, even one whose item sets `disabled: false`\n\n### Styling Props\n- **class**: string - Additional CSS classes for the group container\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<ButtonGroup>\n\t<Button />\n\t<Button />\n\t<Button />\n</ButtonGroup>\n```\n\n## Examples\n\n### Composed Children\n```svelte\n<script lang=\"ts\">\n\timport { Button } from 'entasis/button';\n\timport { ButtonGroup } from 'entasis/button-group';\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<ButtonGroup label=\"History\">\n\t<Button variant=\"outline\">Undo</Button>\n\t<Tooltip content=\"Redo the last change\" trigger={{ content: 'Redo', variant: 'outline' }} />\n</ButtonGroup>\n```\n\n### Basic Button Group\n```svelte\n<ButtonGroup \n\titems={[\n\t\t{ children: 'Left' },\n\t\t{ children: 'Center' },\n\t\t{ children: 'Right' }\n\t]}\n/>\n```\n\n### With Shared Styling\n```svelte\n<ButtonGroup \n\tsize=\"large\"\n\tcolor=\"primary\"\n\tvariant=\"outline\"\n\titems={[\n\t\t{ children: 'Option 1' },\n\t\t{ children: 'Option 2' },\n\t\t{ children: 'Option 3' }\n\t]}\n/>\n```\n\n### With Icons\n```svelte\n<script lang=\"ts\">\n\timport { ButtonGroup } from 'entasis/button-group';\n\timport { textAlignLeftIcon } from 'entasis/icons/textAlignLeft';\n\timport { textAlignCenterIcon } from 'entasis/icons/textAlignCenter';\n\timport { textAlignRightIcon } from 'entasis/icons/textAlignRight';\n</script>\n\n<ButtonGroup \n\titems={[\n\t\t{ \n\t\t\tprefix: textAlignLeftIcon,\n\t\t\tchildren: 'Left' \n\t\t},\n\t\t{ \n\t\t\tprefix: textAlignCenterIcon,\n\t\t\tchildren: 'Center' \n\t\t},\n\t\t{ \n\t\t\tprefix: textAlignRightIcon,\n\t\t\tchildren: 'Right' \n\t\t}\n\t]}\n/>\n```\n\n### With Individual Click Handlers\n```svelte\n<script>\n\tfunction handleOption(option) {\n\t\tconsole.log(`Selected: ${option}`);\n\t}\n</script>\n\n<ButtonGroup \n\titems={[\n\t\t{ \n\t\t\tchildren: 'Save',\n\t\t\tonclick: () => handleOption('save')\n\t\t},\n\t\t{ \n\t\t\tchildren: 'Cancel',\n\t\t\tonclick: () => handleOption('cancel')\n\t\t}\n\t]}\n/>\n```\n\n### Disabled Group\n```svelte\n<ButtonGroup \n\tdisabled\n\titems={[\n\t\t{ children: 'Option 1' },\n\t\t{ children: 'Option 2' }\n\t]}\n/>\n```\n\n### Icon Only Buttons\n```svelte\n<script lang=\"ts\">\n\timport { ButtonGroup } from 'entasis/button-group';\n\timport { textBIcon } from 'entasis/icons/textB';\n\timport { textItalicIcon } from 'entasis/icons/textItalic';\n\timport { textUnderlineIcon } from 'entasis/icons/textUnderline';\n</script>\n\n<ButtonGroup \n\titems={[\n\t\t{ \n\t\t\tsquared: true,\n\t\t\tprefix: textBIcon\n\t\t},\n\t\t{ \n\t\t\tsquared: true,\n\t\t\tprefix: textItalicIcon\n\t\t},\n\t\t{ \n\t\t\tsquared: true,\n\t\t\tprefix: textUnderlineIcon\n\t\t}\n\t]}\n/>\n```\n\n### Mixed Button States\n```svelte\n<ButtonGroup \n\tvariant=\"outline\"\n\titems={[\n\t\t{ children: 'Active', color: 'primary' },\n\t\t{ children: 'Default', color: 'neutral' },\n\t\t{ children: 'Disabled', disabled: true }\n\t]}\n/>\n```\n\n### Segmented Control\n```svelte\n<script>\n\tlet selected = $state('week');\n</script>\n\n<ButtonGroup \n\titems={[\n\t\t{ \n\t\t\tchildren: 'Day',\n\t\t\tvariant: selected === 'day' ? 'solid' : 'ghost',\n\t\t\tonclick: () => selected = 'day'\n\t\t},\n\t\t{ \n\t\t\tchildren: 'Week',\n\t\t\tvariant: selected === 'week' ? 'solid' : 'ghost',\n\t\t\tonclick: () => selected = 'week'\n\t\t},\n\t\t{ \n\t\t\tchildren: 'Month',\n\t\t\tvariant: selected === 'month' ? 'solid' : 'ghost',\n\t\t\tonclick: () => selected = 'month'\n\t\t}\n\t]}\n/>\n```\n\n## Styling\n\nButtonGroup automatically:\n- Removes border-radius from middle buttons\n- Adjusts borders to prevent double borders\n- Creates a cohesive, connected appearance\n- Maintains consistent spacing\n\n## Accessibility\n\n- Each button maintains full keyboard accessibility\n- Focus styles are preserved\n- Disabled state cascades properly\n- Screen readers announce each button individually\n\n## Notes\n\n- Individual button props override shared props\n- Buttons are rendered in the order provided\n- The group container can be styled with the `class` prop\n- All Button component features are supported for individual buttons\n\n## Theme Customization\n\nThe ButtonGroup component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main button group container styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for button group container (handles border radius and border connections between buttons)\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<ButtonGroup \n  items={buttons}\n  theme={{\n    root: {\n      base: 'flex items-center rounded-lg overflow-hidden'\n    }\n  }}\n/>\n```\n\n**Custom Group Styling**:\n```svelte\n<ButtonGroup \n  items={buttons}\n  theme={{\n    root: {\n      base: 'flex items-center gap-0 border-2 border-primary rounded-lg overflow-hidden'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setButtonGroupTheme } from './index.ts';\n  \n  setButtonGroupTheme({\n    root: {\n      base: 'flex items-center first-child:rounded-r-none last-child:rounded-l-none'\n    }\n  });\n</script>\n```\n";

package/dist/components/ButtonGroup/buttonGroup.mcp.js

@@ -18,14 +18,20 @@ The ButtonGroup component displays a collection of related buttons as a cohesive
 ## Props
 
 ### Core Props
-- **items**: Array<ButtonProps> (required) - Array of button configurations
+Pass either \`items\` or \`children\`.
+- **items**: Array<ButtonProps> - Array of button configurations
   - Each button can have all standard Button component props
+- **children**: Snippet - Buttons composed directly, for content an item object cannot describe
+  (a Tooltip or Popover trigger, a Button with a custom body). Each direct child is joined to its
+  neighbours; set size, color and variant on each Button, since the shared props below apply to
+  \`items\` only.
+- **label**: string - Accessible name of the group (the root has \`role="group"\`)
 
-### Shared Button Props
+### Shared Button Props (items)
 - **size**: 'small' | 'normal' | 'large' - Applied to all buttons in the group
 - **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Shared color for all buttons
 - **variant**: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' - Shared variant for all buttons
-- **disabled**: boolean - Disables all buttons in the group
+- **disabled**: boolean - Disables all buttons in the group, even one whose item sets \`disabled: false\`
 
 ### Styling Props
 - **class**: string - Additional CSS classes for the group container
@@ -43,6 +49,20 @@ The ButtonGroup component displays a collection of related buttons as a cohesive
 
 ## Examples
 
+### Composed Children
+\`\`\`svelte
+<script lang="ts">
+	import { Button } from '../Button/index.ts';
+	import { ButtonGroup } from './index.ts';
+	import { Tooltip } from '../Tooltip/index.ts';
+</script>
+
+<ButtonGroup label="History">
+	<Button variant="outline">Undo</Button>
+	<Tooltip content="Redo the last change" trigger={{ content: 'Redo', variant: 'outline' }} />
+</ButtonGroup>
+\`\`\`
+
 ### Basic Button Group
 \`\`\`svelte
 <ButtonGroup 

package/dist/components/ButtonGroup/buttonGroup.props.d.ts

@@ -1,20 +1,34 @@
+import type { Snippet } from 'svelte';
 import type { Sizes, Colors } from '../../types/theme.js';
 import type { WithAttachments } from '../../types/props.js';
 import type { ButtonProps, ButtonVariant } from '../Button/index.js';
 import type { ButtonGroupThemeProps } from './buttonGroup.theme.js';
-export type ButtonGroupProps = WithAttachments<{
+type ButtonGroupContent = {
     /** Items rendered in order inside the group. */
     items: ButtonProps[];
-    /** Size applied to every button in the group. */
+    children?: never;
+} | {
+    items?: never;
+    /**
+     * Buttons (or Tooltip and Popover triggers, which render one) composed directly. Each
+     * direct child is joined to its neighbours; set size, color and variant on each one.
+     */
+    children: Snippet;
+};
+export type ButtonGroupProps = WithAttachments<ButtonGroupContent & {
+    /** Accessible name of the group. */
+    label?: string;
+    /** Size applied to every item in the group. */
     size?: Sizes;
-    /** Color applied to every button in the group. */
+    /** Color applied to every item in the group. */
     color?: Colors;
-    /** Visual variant applied to every button in the group. */
+    /** Visual variant applied to every item in the group. */
     variant?: ButtonVariant;
-    /** When true, disables all buttons in the group. */
+    /** When true, disables every item in the group, whatever the item says. */
     disabled?: boolean;
     /** Class name on the root group container element. */
     class?: string;
     /** Theme overrides for the group container layout. */
     theme?: ButtonGroupThemeProps;
 }>;
+export {};

package/dist/components/Chart/Chart.svelte

@@ -140,7 +140,7 @@
 		children (and calls `replaceChildren` when it swaps renderers), so the button is a
 		sibling of the host inside this box, not a child of it.
 	-->
-	<div class={chart.plotClass}>
+	<div class={chart.plotClass} style={chart.plotStyle}>
 		<div {@attach chart.host} data-chart-host class="absolute inset-0">
 			<!-- Markup serialized by the chart engine itself from the typed mark specs, never user HTML. -->
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -->

package/dist/components/Chart/chart.cartesian.js

@@ -261,6 +261,7 @@ function compileAreaSeries(data, mark, path, gradients, line, fallbackSeries, fo
     const curve = line?.curve ?? mark.curve;
     const curveFactory = curve ? compileChartCurve(curve, `${path}.curve`) : undefined;
     const lineCurve = curveFactory ? d3Curve(curveFactory) : undefined;
+    const areaGradients = mark.areaFill === 'solid' ? undefined : gradients;
     const style = {
         ...compileMarkChannels(mark, fallbackSeries),
         fill: compileColorVisual(mark.fill),
@@ -277,7 +278,7 @@ function compileAreaSeries(data, mark, path, gradients, line, fallbackSeries, fo
             layout: compileStackLayout(mark.layout, `${path}.layout`),
             curve: lineCurve
         });
-        const area = applyAreaPresentation(compiled, 'vertical', gradients, {
+        const area = applyAreaPresentation(compiled, 'vertical', areaGradients, {
             curve: lineCurve,
             strokeOpacity: line?.strokeOpacity ?? mark.strokeOpacity,
             strokeDasharray: line?.strokeDasharray ?? mark.strokeDasharray,
@@ -302,7 +303,7 @@ function compileAreaSeries(data, mark, path, gradients, line, fallbackSeries, fo
             layout: compileStackLayout(mark.layout, `${path}.layout`),
             curve: curveFactory ? d3AreaXCurve(curveFactory) : undefined
         });
-        const area = applyAreaPresentation(compiled, 'horizontal', gradients, {
+        const area = applyAreaPresentation(compiled, 'horizontal', areaGradients, {
             curve: lineCurve,
             strokeOpacity: line?.strokeOpacity ?? mark.strokeOpacity,
             strokeDasharray: line?.strokeDasharray ?? mark.strokeDasharray,

package/dist/components/Chart/chart.fit.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Fitting a layout to its plot. Tree, network and sankey layouts place nodes along an axis at a
+ * fraction of the available length, and polar charts draw their angle labels a fixed distance
+ * outside the circle; either way the labels hang off the geometry by a known amount. Sizing the
+ * geometry to those extents fills the plot instead of reserving guessed margins.
+ */
+/** Space kept between the outermost node or label and the plot edge, in px. */
+export declare const CHART_FIT_MARGIN = 2;
+/**
+ * How far a label's line box reaches above and below its anchor, as shares of the font size, for
+ * each SVG baseline the charts use.
+ */
+export declare const LABEL_LINE_BOX: {
+    readonly middle: {
+        readonly above: 0.65;
+        readonly below: 0.55;
+    };
+    readonly auto: {
+        readonly above: 0.95;
+        readonly below: 0.25;
+    };
+    readonly hanging: {
+        readonly above: 0.15;
+        readonly below: 1.05;
+    };
+};
+export type RelationAxisItem = {
+    /** Position along the axis, 0 at the start of the span and 1 at its end. */
+    fraction: number;
+    /** Extent drawn before the node's anchor: its radius, or a label on that side. */
+    before: number;
+    /** Extent drawn after the node's anchor. */
+    after: number;
+};
+export type RelationAxisFit = {
+    /** Where fraction 0 lands. */
+    start: number;
+    /** Length covered by fractions 0 to 1. */
+    span: number;
+};
+/**
+ * The largest span whose items, with their extents, stay within `[margin, length - margin]`.
+ * Any two items bound it: the distance from the earlier item's leading extent to the later
+ * item's trailing extent must fit the plot.
+ */
+export declare function fitAxis(items: readonly RelationAxisItem[], length: number, margin?: number): RelationAxisFit;
+/** `value` within `[min, max]` as a 0–1 fraction; a single position sits in the middle. */
+export declare function axisFraction(value: number, min: number, max: number): number;
+/**
+ * A deterministic width estimate for a chart label, so layouts match between the server and
+ * the browser. Per-character advances approximate a UI sans-serif and err on the wide side.
+ */
+export declare function estimateLabelWidth(label: string, fontSize: number, fontWeight: number): number;

package/dist/components/Chart/chart.fit.js

@@ -0,0 +1,81 @@
+/**
+ * Fitting a layout to its plot. Tree, network and sankey layouts place nodes along an axis at a
+ * fraction of the available length, and polar charts draw their angle labels a fixed distance
+ * outside the circle; either way the labels hang off the geometry by a known amount. Sizing the
+ * geometry to those extents fills the plot instead of reserving guessed margins.
+ */
+/** Space kept between the outermost node or label and the plot edge, in px. */
+export const CHART_FIT_MARGIN = 2;
+/**
+ * How far a label's line box reaches above and below its anchor, as shares of the font size, for
+ * each SVG baseline the charts use.
+ */
+export const LABEL_LINE_BOX = {
+    middle: { above: 0.65, below: 0.55 },
+    auto: { above: 0.95, below: 0.25 },
+    hanging: { above: 0.15, below: 1.05 }
+};
+/**
+ * The largest span whose items, with their extents, stay within `[margin, length - margin]`.
+ * Any two items bound it: the distance from the earlier item's leading extent to the later
+ * item's trailing extent must fit the plot.
+ */
+export function fitAxis(items, length, margin = CHART_FIT_MARGIN) {
+    const room = Math.max(1, length - margin * 2);
+    if (items.length === 0)
+        return { start: margin, span: room };
+    // Items sharing a fraction only ever contribute their largest extents.
+    const byFraction = new Map();
+    for (const item of items) {
+        const current = byFraction.get(item.fraction);
+        byFraction.set(item.fraction, {
+            before: Math.max(current?.before ?? 0, item.before),
+            after: Math.max(current?.after ?? 0, item.after)
+        });
+    }
+    const stops = [...byFraction].map(([fraction, extent]) => ({ fraction, ...extent }));
+    let span = room;
+    for (const earlier of stops) {
+        for (const later of stops) {
+            const distance = later.fraction - earlier.fraction;
+            if (distance <= 0)
+                continue;
+            span = Math.min(span, (room - earlier.before - later.after) / distance);
+        }
+    }
+    // Labels wider than the plot cannot fit at any span; keep the layout visible regardless.
+    span = Math.max(1, span);
+    const start = Math.max(...stops.map((stop) => margin + stop.before - stop.fraction * span));
+    // A span limited by two items touches both edges. One that is not (a single position, or
+    // extents too small to matter) leaves room at the end; split it so the layout stays centred.
+    const end = Math.max(...stops.map((stop) => start + stop.fraction * span + stop.after));
+    return { start: start + Math.max(0, length - margin - end) / 2, span };
+}
+/** `value` within `[min, max]` as a 0–1 fraction; a single position sits in the middle. */
+export function axisFraction(value, min, max) {
+    return max > min ? (value - min) / (max - min) : 0.5;
+}
+/**
+ * A deterministic width estimate for a chart label, so layouts match between the server and
+ * the browser. Per-character advances approximate a UI sans-serif and err on the wide side.
+ */
+export function estimateLabelWidth(label, fontSize, fontWeight) {
+    let width = 0;
+    for (const character of label) {
+        if (/[ilj.,:;'!|()[\]\s]/.test(character))
+            width += 0.3;
+        else if (/[ftr"-]/.test(character))
+            width += 0.4;
+        else if (/[mwMW@%]/.test(character))
+            width += 0.88;
+        else if (/[A-Z]/.test(character))
+            width += 0.68;
+        else if (/[0-9]/.test(character))
+            width += 0.6;
+        else if (/[a-z]/.test(character))
+            width += 0.56;
+        else
+            width += 0.8;
+    }
+    return width * fontSize * (fontWeight >= 600 ? 1.06 : 1);
+}

package/dist/components/Chart/chart.mcp.d.ts

@@ -1 +1 @@
-export declare const chartDescription = "\n# Chart Component\n\nChart renders layered cartesian, polar, relation, or faceted marks from one typed data array. Consumers import only from `entasis/chart`; TanStack Charts and D3 stay private implementation details of the component, but they must be installed as optional peer dependencies.\n\n## Requires\n\nChart renders through TanStack Charts and D3. Those packages are optional peer dependencies of entasis, so install them alongside it:\n\n`pnpm add @tanstack/charts d3-array d3-force d3-hierarchy d3-sankey d3-scale d3-shape`\n\nOne public type (`curve`) is D3's `CurveFactory`, so TypeScript users add its typings: `pnpm add -D @types/d3-shape`.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  import { Chart } from './index.ts'\n\n  type Row = { month: Date; actual: number; forecast: number; low: number; high: number }\n  const x = { scale: { type: 'utc' }, axis: { label: 'Month' } } as const\n  const y = { scale: { type: 'linear' }, grid: true } as const\n  const marks = [\n      {\n        type: 'series',\n        x: 'month',\n        y: 'forecast',\n        interval: { lower: 'low', upper: 'high', fill: 'secondary' },\n        analysis: [\n          { type: 'reference', statistic: 'median' },\n          { type: 'rolling', statistic: 'mean', window: 3 }\n        ]\n      },\n      { type: 'series', x: 'month', y: 'actual', stroke: 'primary', points: true }\n    ] as const\n</script>\n\n<Chart\n  data={rows}\n  {x}\n  {y}\n  {marks}\n  tooltip\n  viewport\n  label=\"Monthly revenue\"\n  height={320}\n/>\n```\n\n## Contract\n\n- `data` is one immutable array shared by every mark.\n- `marks` is a required non-empty discriminated union; array order is paint order.\n- A `series` mark renders a line by default. Set `area`, `points`, or `line` with booleans or local option objects to compose its visible layers.\n- A series `interval` adds a non-interactive band behind the same line. Its required `lower` and `upper` numeric channels represent explicit bounds such as confidence, prediction, credible, or min/max intervals. `interval` and `area` are mutually exclusive because both own the filled surface.\n- `analysis` is a non-empty list of derived statistical layers owned by a series, scatter, bar, or distribution mark. Reference analysis supports mean, median, quantile, and standard deviation. Series and scatter support linear regression with optional confidence or prediction intervals. Series also supports rolling mean and rolling median. Analysis can use the complete plot or each series independently and does not add tooltip points. Stacked layouts reject analysis because their displayed values differ from the source channels.\n- A `scatter` mark renders independent observations with the default `points` variant. A numeric `size` is a constant pixel radius. A `size` data channel uses `sqrt` by default; `sizeScale` accepts `linear`, `sqrt`, `log`, `exp`, or an object with `type`, `domain`, `range`, and an optional `base` for logarithmic or exponential scales. The `hexbin` variant accepts numeric `x` and `y` channels and aggregates dense observations into responsive pixel-space hexagons; `radius` controls the bin size.\n- A `bar` mark is simple by default. Its optional `variant` is `group` or `stack`. Use `offset: 'normalize'` on a stacked bar to compare proportions with a 0\u20131 value axis. A stacked bar also accepts `gap` (pixels of surface between consecutive segments of one stack).\n- Wide data: a stacked bar, and an area series with `layout: { type: 'stack' }`, accept a list of numeric fields as their value channel (`y: ['completed', 'inProgress', 'pending']`, or `x` when horizontal). The rows are melted internally into one series per field, the field name becoming the series key, in the order the fields are listed. A wide mark owns its series identity, so it takes no `series` or `colorBy`, and rejects `annotations` and `analysis`. Long format with a `series` channel keeps working unchanged.\n- A `matrix` mark uses the default `grid` variant with categorical `x` and `y` channels. Use `colorBy` for a categorical matrix, or use a numeric `value` with `color` for a heatmap. The `calendar` variant replaces `x` and `y` with a `date` channel and derives week and weekday axes automatically. Its optional `colorScale` accepts a `quantize` domain and an ordered color range.\n- A data mark can own `arrow`, `label`, `rule`, `band`, and `marker` annotations. Targets resolve against the parent mark's final rendered coordinates. A band annotation uses `thickness` for its cross-axis size.\n- Position scales use local string discriminants such as `linear`, `utc`, and `band`.\n- `tooltip: true` groups cartesian marks on the categorical or x axis, renders native color rows, and stays inside the chart surface without adding chart focus states.\n- `palette` is either an ordered list consumed in series-discovery order, or a record keyed by series key (`{ completed: 'success', pending: 'danger' }`). Record entries win by key; a series without an entry falls back to the default palette in discovery order.\n- `ChartColor` accepts the seven semantic roles and the surface family (`surface`, `surface-recessed`, `surface-canvas`, `surface-raised`, `surface-floating`); anything else is passed through as a CSS color.\n- `legend: true` shows a categorical color key, or a numeric heatmap/hexbin color ramp. Use `legend: { interactive: true }` to hide and show series, bars, scatter points, and empirical distributions whose series and color identities match. Other layouts use static legends; facets keep their own labels. Visibility preserves axes, colors, and stack totals. The object accepts `placement: 'top' | 'bottom'`, `label`, controlled `value` and `onValueChange`, or an initial `defaultValue`; omitted visibility shows every series.\n- `legend.format: (key) => string` sets the display text of a series independently of its key. The same formatter labels the series in the tooltip.\n- A categorical legend is drawn by the library, not by the rendering engine: the interactive one is a `ToggleButtonGroup` of small ghost toggles, one per series, each carrying a color swatch of the resolved series color and the `legend.format` label, pressed when the series is visible; the static one is the same swatch and label as plain items. It takes its own row above or below the plot and the plot shrinks by that row. A numeric legend stays a color ramp drawn inside the plot. Style the row with the `legend`, `legendItem`, and `legendSwatch` theme parts.\n- Legend layout accepts `align: 'left' | 'center' | 'right'` and `orientation: 'horizontal' | 'vertical'`. Vertical stacks categorical entries in one column; numeric color ramps stay horizontal. Both static and interactive legends support alignment and top/bottom placement.\n- Histogram and rolling preparation use native transforms. Regression uses native Student-t confidence bounds; prediction intervals add observation uncertainty to the fitted-mean bounds. Small samples therefore have wider intervals than a fixed normal approximation.\n- Tooltip objects can override grouping with `groupBy: 'x'`, `groupBy: 'y'`, or `groupBy: false`.\n- A tooltip can be pinned: `tooltip.value` / `tooltip.defaultValue` take the row key of the pinned datum (the mark's `key` channel when it has one, its x value otherwise; `null` pins nothing). A pinned row shows its tooltip on mount, hover moves the tooltip normally, pointer leave restores the pinned row, and clicking a datum pins it (clicking it again unpins) through `tooltip.onValueChange`. Pinning is disabled while `viewport` owns the press gesture.\n- `viewport: true` enables native x-axis brush zoom with pointer and touch input, an accessible reset control, and a reduced-motion-aware transition. Numeric and date axes select continuous windows; categorical axes snap to values and also expose keyboard handles. The object form accepts `reset` and `transition` options. Native 2D brushing is not supported.\n- A `distribution` mark reads one categorical `group` channel and one numeric `value` channel. Its summary variants are `violin`, `box`, and `error-bar`. Its raw-sample variants are `histogram`, `density`, and `ecdf`. Histogram accepts `bins`; density accepts `bandwidth` and `samples`; `direction` can be `vertical` or `horizontal`.\n- Distribution tooltips use a built-in statistical summary. They do not accept custom `tooltip.fields`.\n- A `proportion` mark reads one categorical `category` channel and one non-negative numeric `value` channel. Its `variant` is `pie`, `donut`, or `waffle`; consumers do not calculate angles or cells.\n- A `polar` mark reads `angle` and `radius` channels. The `circular` and `radar` variants compose boolean `area`, `line`, and `points` layers. The `radial-bar` and `rose` variants render wedges and expose only bar options.\n- A `relation` mark owns a complete topology layout. Its `tree` variant reads `nodeId` and `parent`; its `network` and `sankey` variants read `nodeId` and an outgoing `relations` channel. Relation marks cannot use axes, sibling marks, facets, or custom tooltip fields.\n- A `facet` mark owns nested `marks` with the same public union and inherits the plot positions.\n- Proportion tooltips show the category value and its share. They do not accept custom `tooltip.fields` or grouped axes.\n- `label` is required and `ariaDescription` is optional.\n- Sizing has one input: `height` (pixels) or `aspectRatio`. Either one sizes the plot and the server-rendered SVG (laid out at 800px wide), and they cannot be combined. With neither, the root class owns the height (320px by default, replaced by a height class on `class`) and SSR emits a stable empty host whose SVG mounts only in the browser.\n- Replace `data`, `marks`, or another configuration prop to update a mounted chart. In-place mutation is not an update contract.\n- Configuration errors throw a prefixed `TypeError`; dependency and accessor errors propagate.\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) whose `duration` / `easing` are the default\n  timing of the viewport zoom settle; `viewport.transition` still overrides per chart.\n- Ladder: `<Theme components={{ chart: { motion } }}>` \u2192 `setChartTheme({ motion })` \u2192\n  `theme.motion`. Reduced motion collapses the duration to 0 and the chart snaps.\n";
+export declare const chartDescription = "\n# Chart Component\n\nChart renders layered cartesian, polar, relation, or faceted marks from one typed data array. Consumers import only from `entasis/chart`; TanStack Charts and D3 stay private implementation details of the component, but they must be installed as optional peer dependencies.\n\n## Requires\n\nChart renders through TanStack Charts and D3. Those packages are optional peer dependencies of entasis, so install them alongside it:\n\n`pnpm add @tanstack/charts d3-array d3-force d3-hierarchy d3-sankey d3-scale d3-shape`\n\nOne public type (`curve`) is D3's `CurveFactory`, so TypeScript users add its typings: `pnpm add -D @types/d3-shape`.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  import { Chart } from './index.ts'\n\n  type Row = { month: Date; actual: number; forecast: number; low: number; high: number }\n  const x = { scale: { type: 'utc' }, axis: { label: 'Month' } } as const\n  const y = { scale: { type: 'linear' }, grid: true } as const\n  const marks = [\n      {\n        type: 'series',\n        x: 'month',\n        y: 'forecast',\n        interval: { lower: 'low', upper: 'high', fill: 'secondary' },\n        analysis: [\n          { type: 'reference', statistic: 'median' },\n          { type: 'rolling', statistic: 'mean', window: 3 }\n        ]\n      },\n      { type: 'series', x: 'month', y: 'actual', stroke: 'primary', points: true }\n    ] as const\n</script>\n\n<Chart\n  data={rows}\n  {x}\n  {y}\n  {marks}\n  tooltip\n  viewport\n  label=\"Monthly revenue\"\n  height={320}\n/>\n```\n\n## Contract\n\n- `data` is one immutable array shared by every mark.\n- `marks` is a required non-empty discriminated union; array order is paint order.\n- A `series` mark renders a line by default. Set `area`, `points`, or `line` with booleans or local option objects to compose its visible layers.\n- An area is filled with a gradient of the series colour along its value axis. `areaFill: 'solid'` paints one flat fill at `fillOpacity` (20% by default) instead.\n- A series `interval` adds a non-interactive band behind the same line. Its required `lower` and `upper` numeric channels represent explicit bounds such as confidence, prediction, credible, or min/max intervals. `interval` and `area` are mutually exclusive because both own the filled surface.\n- `analysis` is a non-empty list of derived statistical layers owned by a series, scatter, bar, or distribution mark. Reference analysis supports mean, median, quantile, and standard deviation. Series and scatter support linear regression with optional confidence or prediction intervals. Series also supports rolling mean and rolling median. Analysis can use the complete plot or each series independently and does not add tooltip points. Stacked layouts reject analysis because their displayed values differ from the source channels.\n- A `scatter` mark renders independent observations with the default `points` variant. A numeric `size` is a constant pixel radius. A `size` data channel uses `sqrt` by default; `sizeScale` accepts `linear`, `sqrt`, `log`, `exp`, or an object with `type`, `domain`, `range`, and an optional `base` for logarithmic or exponential scales. The `hexbin` variant accepts numeric `x` and `y` channels and aggregates dense observations into responsive pixel-space hexagons; `radius` controls the bin size.\n- A `bar` mark is simple by default. Its optional `variant` is `group` or `stack`. Use `offset: 'normalize'` on a stacked bar to compare proportions with a 0\u20131 value axis. A stacked bar also accepts `gap` (pixels of surface between consecutive segments of one stack).\n- Wide data: a stacked bar, and an area series with `layout: { type: 'stack' }`, accept a list of numeric fields as their value channel (`y: ['completed', 'inProgress', 'pending']`, or `x` when horizontal). The rows are melted internally into one series per field, the field name becoming the series key, in the order the fields are listed. A wide mark owns its series identity, so it takes no `series` or `colorBy`, and rejects `annotations` and `analysis`. Long format with a `series` channel keeps working unchanged.\n- A `matrix` mark uses the default `grid` variant with categorical `x` and `y` channels. Use `colorBy` for a categorical matrix, or use a numeric `value` with `color` for a heatmap. The `calendar` variant replaces `x` and `y` with a `date` channel and derives week and weekday axes automatically. Its optional `colorScale` accepts a `quantize` domain and an ordered color range.\n- A data mark can own `arrow`, `label`, `rule`, `band`, and `marker` annotations. Targets resolve against the parent mark's final rendered coordinates. A band annotation uses `thickness` for its cross-axis size.\n- Position scales use local string discriminants such as `linear`, `utc`, and `band`.\n- `tooltip: true` groups cartesian marks on the categorical or x axis, renders native color rows, and stays inside the chart surface without adding chart focus states.\n- `palette` is either an ordered list consumed in series-discovery order, or a record keyed by series key (`{ completed: 'success', pending: 'danger' }`). Record entries win by key; a series without an entry falls back to the default palette in discovery order.\n- `ChartColor` accepts the seven semantic roles and the surface family (`surface`, `surface-recessed`, `surface-canvas`, `surface-raised`, `surface-floating`); anything else is passed through as a CSS color.\n- `legend: true` shows a categorical color key, or a numeric heatmap/hexbin color ramp. Use `legend: { interactive: true }` to hide and show series, bars, scatter points, and empirical distributions whose series and color identities match. Other layouts use static legends; facets keep their own labels. Visibility preserves axes, colors, and stack totals. The object accepts `placement: 'top' | 'bottom'`, `label`, controlled `value` and `onValueChange`, or an initial `defaultValue`; omitted visibility shows every series.\n- `legend.format: (key) => string` sets the display text of a series independently of its key. The same formatter labels the series in the tooltip.\n- A categorical legend is drawn by the library, not by the rendering engine: the interactive one is a `ToggleButtonGroup` of small ghost toggles, one per series, each carrying a color swatch of the resolved series color and the `legend.format` label, pressed when the series is visible; the static one is the same swatch and label as plain items. It takes its own row above or below the plot and the plot shrinks by that row. A numeric legend stays a color ramp drawn inside the plot. Style the row with the `legend`, `legendItem`, and `legendSwatch` theme parts.\n- Legend layout accepts `align: 'left' | 'center' | 'right'` and `orientation: 'horizontal' | 'vertical'`. Vertical stacks categorical entries in one column; numeric color ramps stay horizontal. Both static and interactive legends support alignment and top/bottom placement.\n- Histogram and rolling preparation use native transforms. Regression uses native Student-t confidence bounds; prediction intervals add observation uncertainty to the fitted-mean bounds. Small samples therefore have wider intervals than a fixed normal approximation.\n- Tooltip objects can override grouping with `groupBy: 'x'`, `groupBy: 'y'`, or `groupBy: false`.\n- A tooltip can be pinned: `tooltip.value` / `tooltip.defaultValue` take the row key of the pinned datum (the mark's `key` channel when it has one, its x value otherwise; `null` pins nothing). A pinned row shows its tooltip on mount, hover moves the tooltip normally, pointer leave restores the pinned row, and clicking a datum pins it (clicking it again unpins) through `tooltip.onValueChange`. Pinning is disabled while `viewport` owns the press gesture.\n- `viewport: true` enables native x-axis brush zoom with pointer and touch input, an accessible reset control, and a reduced-motion-aware transition. Numeric and date axes select continuous windows; categorical axes snap to values and also expose keyboard handles. The object form accepts `reset` and `transition` options. Native 2D brushing is not supported.\n- A `distribution` mark reads one categorical `group` channel and one numeric `value` channel. Its summary variants are `violin`, `box`, and `error-bar`. Its raw-sample variants are `histogram`, `density`, and `ecdf`. Histogram accepts `bins`; density accepts `bandwidth` and `samples`; `direction` can be `vertical` or `horizontal`.\n- Distribution tooltips use a built-in statistical summary. They do not accept custom `tooltip.fields`.\n- A `proportion` mark reads one categorical `category` channel and one non-negative numeric `value` channel. Its `variant` is `pie`, `donut`, or `waffle`; consumers do not calculate angles or cells.\n- A `polar` mark reads `angle` and `radius` channels. The `circular` and `radar` variants compose boolean `area`, `line`, and `points` layers. The `radial-bar` and `rose` variants render wedges and expose only bar options.\n- A `relation` mark owns a complete topology layout. Its `tree` variant reads `nodeId` and `parent`; its `network` and `sankey` variants read `nodeId` and an outgoing `relations` channel. Relation marks cannot use axes, sibling marks, facets, or custom tooltip fields.\n- A `facet` mark owns nested `marks` with the same public union and inherits the plot positions.\n- Proportion tooltips show the category value and its share. They do not accept custom `tooltip.fields` or grouped axes.\n- `label` is required and `ariaDescription` is optional.\n- Sizing has one input: `height` (pixels) or `aspectRatio`. Either one sizes the plot and the server-rendered SVG (laid out at 800px wide), and they cannot be combined. A legend row sits outside the plot and adds to the chart's height. With neither, the root class owns the height (320px by default, replaced by a height class on `class`) and SSR emits a stable empty host whose SVG mounts only in the browser.\n- Replace `data`, `marks`, or another configuration prop to update a mounted chart. In-place mutation is not an update contract.\n- Configuration errors throw a prefixed `TypeError`; dependency and accessor errors propagate.\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) whose `duration` / `easing` are the default\n  timing of the viewport zoom settle; `viewport.transition` still overrides per chart.\n- Ladder: `<Theme components={{ chart: { motion } }}>` \u2192 `setChartTheme({ motion })` \u2192\n  `theme.motion`. Reduced motion collapses the duration to 0 and the chart snaps.\n";

package/dist/components/Chart/chart.mcp.js

@@ -52,6 +52,7 @@ One public type (\`curve\`) is D3's \`CurveFactory\`, so TypeScript users add it
 - \`data\` is one immutable array shared by every mark.
 - \`marks\` is a required non-empty discriminated union; array order is paint order.
 - A \`series\` mark renders a line by default. Set \`area\`, \`points\`, or \`line\` with booleans or local option objects to compose its visible layers.
+- An area is filled with a gradient of the series colour along its value axis. \`areaFill: 'solid'\` paints one flat fill at \`fillOpacity\` (20% by default) instead.
 - A series \`interval\` adds a non-interactive band behind the same line. Its required \`lower\` and \`upper\` numeric channels represent explicit bounds such as confidence, prediction, credible, or min/max intervals. \`interval\` and \`area\` are mutually exclusive because both own the filled surface.
 - \`analysis\` is a non-empty list of derived statistical layers owned by a series, scatter, bar, or distribution mark. Reference analysis supports mean, median, quantile, and standard deviation. Series and scatter support linear regression with optional confidence or prediction intervals. Series also supports rolling mean and rolling median. Analysis can use the complete plot or each series independently and does not add tooltip points. Stacked layouts reject analysis because their displayed values differ from the source channels.
 - A \`scatter\` mark renders independent observations with the default \`points\` variant. A numeric \`size\` is a constant pixel radius. A \`size\` data channel uses \`sqrt\` by default; \`sizeScale\` accepts \`linear\`, \`sqrt\`, \`log\`, \`exp\`, or an object with \`type\`, \`domain\`, \`range\`, and an optional \`base\` for logarithmic or exponential scales. The \`hexbin\` variant accepts numeric \`x\` and \`y\` channels and aggregates dense observations into responsive pixel-space hexagons; \`radius\` controls the bin size.
@@ -79,7 +80,7 @@ One public type (\`curve\`) is D3's \`CurveFactory\`, so TypeScript users add it
 - A \`facet\` mark owns nested \`marks\` with the same public union and inherits the plot positions.
 - Proportion tooltips show the category value and its share. They do not accept custom \`tooltip.fields\` or grouped axes.
 - \`label\` is required and \`ariaDescription\` is optional.
-- Sizing has one input: \`height\` (pixels) or \`aspectRatio\`. Either one sizes the plot and the server-rendered SVG (laid out at 800px wide), and they cannot be combined. With neither, the root class owns the height (320px by default, replaced by a height class on \`class\`) and SSR emits a stable empty host whose SVG mounts only in the browser.
+- Sizing has one input: \`height\` (pixels) or \`aspectRatio\`. Either one sizes the plot and the server-rendered SVG (laid out at 800px wide), and they cannot be combined. A legend row sits outside the plot and adds to the chart's height. With neither, the root class owns the height (320px by default, replaced by a height class on \`class\`) and SSR emits a stable empty host whose SVG mounts only in the browser.
 - Replace \`data\`, \`marks\`, or another configuration prop to update a mounted chart. In-place mutation is not an update contract.
 - Configuration errors throw a prefixed \`TypeError\`; dependency and accessor errors propagate.
 

package/dist/components/Chart/chart.polar.js

@@ -1,6 +1,7 @@
 import {} from '@tanstack/charts';
 import { angleGrid, polar, radialArea, radialBarRadius, radialDot, radialGrid, radialLine } from '@tanstack/charts/polar';
 import { compileChannel, compileColor, compileColorVisual, compileMarkChannels } from './chart.channels.js';
+import { CHART_FIT_MARGIN, estimateLabelWidth, LABEL_LINE_BOX } from './chart.fit.js';
 import { compileChartCurve, compileChartScale } from './chart.scale.js';
 export function compilePolarChartMark(data, mark, path) {
     let marks;
@@ -26,9 +27,10 @@ export function compilePolarChartMark(data, mark, path) {
     if (mark.domain && mark.radiusScale?.domain) {
         throw new TypeError(`[Chart] ${path}.domain cannot be combined with ${path}.radiusScale.domain.`);
     }
-    const inset = mark.inset ?? (mark.variant === 'radar' ? 24 : 16);
-    const radiusRatio = mark.radiusRatio ?? (mark.variant === 'radar' ? 1 : 0.92);
-    const compiled = polar({
+    const radiusRatio = mark.radiusRatio ?? 1;
+    // TanStack reads `inset` from these options on every render, which lets `fitPolarToPlot`
+    // size the circle to the plot it is drawn in.
+    const options = {
         id: mark.id,
         marks,
         guides: compilePolarGuides(mark),
@@ -46,10 +48,15 @@ export function compilePolarChartMark(data, mark, path) {
         },
         startAngle: mark.startAngle,
         endAngle: mark.endAngle,
-        inset,
+        inset: mark.inset ?? 24,
         radiusRatio
+    };
+    return fitPolarToPlot(polar(options), {
+        options,
+        fit: mark.inset === undefined,
+        radar: mark.variant === 'radar',
+        shapeMargin: CHART_FIT_MARGIN + polarShapeOverhang(mark)
     });
-    return mark.variant === 'radar' ? centerPolarPolygon(compiled, inset, radiusRatio) : compiled;
 }
 function compilePolarLayers(data, mark, path) {
     const isDefault = mark.area === undefined && mark.line === undefined && mark.points === undefined;
@@ -135,7 +142,25 @@ function compilePolarGuides(mark) {
     const shape = mark.variant === 'radar' ? 'polygon' : 'circle';
     return [radialGrid({ ticks: 5, shape, strokeOpacity: 0.14 }), angleGrid({ strokeOpacity: 0.14 })];
 }
-function centerPolarPolygon(mark, inset, radiusRatio) {
+/** What a polar mark draws beyond its outer radius: half its stroke, or its points. */
+function polarShapeOverhang(mark) {
+    if (!isPolarPathMark(mark))
+        return (mark.strokeWidth ?? 0) / 2;
+    const line = Boolean(mark.line) ||
+        (mark.area === undefined && mark.line === undefined && mark.points === undefined);
+    return Math.max(line ? (mark.strokeWidth ?? 2.25) / 2 : 0, mark.points ? (mark.pointRadius ?? 3.5) : 0);
+}
+function isPolarPathMark(mark) {
+    return mark.variant === 'circular' || mark.variant === 'radar';
+}
+/**
+ * Sizes a polar chart to its plot. The angle labels sit a fixed distance outside the circle, so
+ * how much room they need depends on where they fall: a label at twelve o'clock adds its height
+ * above the circle, a band label just past it adds less, and side labels add their width. A first
+ * render places the labels; the largest radius that keeps every label and the outer circle inside
+ * the plot is then solved directly, and the chart is rendered at that radius.
+ */
+function fitPolarToPlot(mark, fit) {
     return {
         ...mark,
         initialize(context) {
@@ -143,19 +168,28 @@ function centerPolarPolygon(mark, inset, radiusRatio) {
             return {
                 ...initialized,
                 render(renderContext) {
-                    const rendered = initialized.render(renderContext);
-                    const angleValues = new Set((rendered.points ?? []).map((point) => chartValueIdentity(point.xValue)));
-                    if (angleValues.size < 3)
+                    const { chart } = renderContext;
+                    const half = Math.min(chart.width, chart.height) / 2;
+                    const ratio = fit.options.radiusRatio ?? 1;
+                    const radiusFor = () => Math.max(0, half - (fit.options.inset ?? 0)) * ratio;
+                    let rendered = initialized.render(renderContext);
+                    const polygon = fit.radar ? radarPolygon(rendered) : null;
+                    if (fit.fit) {
+                        const radius = solvePolarRadius(rendered, chart, polygon, fit.shapeMargin, {
+                            radius: radiusFor(),
+                            rtl: renderContext.layout?.typography?.direction === 'rtl'
+                        });
+                        // The previous frame's inset usually fits already; render again only when not.
+                        if (radius !== null && Math.abs(radius - radiusFor()) > 0.5) {
+                            fit.options.inset = Math.max(0, half - radius / ratio);
+                            rendered = initialized.render(renderContext);
+                        }
+                    }
+                    if (!polygon)
                         return rendered;
-                    const unitPoints = Array.from({ length: angleValues.size }, (_value, index) => {
-                        const angle = (index / angleValues.size) * Math.PI * 2;
-                        return [Math.sin(angle), -Math.cos(angle)];
-                    });
-                    const xs = unitPoints.map(([x]) => x);
-                    const ys = unitPoints.map(([, y]) => y);
-                    const radius = Math.max(0, Math.min(renderContext.chart.width, renderContext.chart.height) / 2 - inset) * radiusRatio;
-                    const translateX = -((Math.min(...xs) + Math.max(...xs)) / 2) * radius;
-                    const translateY = -((Math.min(...ys) + Math.max(...ys)) / 2) * radius;
+                    const radius = radiusFor();
+                    const translateX = polygon.shiftX * radius;
+                    const translateY = polygon.shiftY * radius;
                     return {
                         nodes: rendered.nodes.map((node) => node.kind === 'group'
                             ? {
@@ -175,6 +209,91 @@ function centerPolarPolygon(mark, inset, radiusRatio) {
         }
     };
 }
+function radarPolygon(rendered) {
+    const angleValues = new Set((rendered.points ?? []).map((point) => chartValueIdentity(point.xValue)));
+    if (angleValues.size < 3)
+        return null;
+    const corners = Array.from({ length: angleValues.size }, (_value, index) => {
+        const angle = (index / angleValues.size) * Math.PI * 2;
+        return [Math.sin(angle), -Math.cos(angle)];
+    });
+    const xs = corners.map(([x]) => x);
+    const ys = corners.map(([, y]) => y);
+    return {
+        corners,
+        shiftX: -(Math.min(...xs) + Math.max(...xs)) / 2,
+        shiftY: -(Math.min(...ys) + Math.max(...ys)) / 2
+    };
+}
+function solvePolarRadius(rendered, chart, polygon, shapeMargin, probe) {
+    const shape = (polygon?.corners ?? [
+        [0, -1],
+        [1, 0],
+        [0, 1],
+        [-1, 0]
+    ]).map((direction) => ({
+        direction,
+        offset: 0,
+        left: shapeMargin,
+        right: shapeMargin,
+        up: shapeMargin,
+        down: shapeMargin
+    }));
+    const labels = collectLabels(rendered.nodes).flatMap(({ label, x, y }) => {
+        const distance = Math.hypot(x, y);
+        if (distance === 0)
+            return [];
+        const fontSize = label.fontSize ?? 12;
+        const width = estimateLabelWidth(label.text, fontSize, label.fontWeight ?? 400);
+        const anchor = probe.rtl && label.anchor !== 'middle'
+            ? label.anchor === 'end'
+                ? 'start'
+                : 'end'
+            : label.anchor;
+        const lineBox = LABEL_LINE_BOX[label.baseline ?? 'middle'];
+        // Labels sit `offset` px beyond the circle along their spoke; recover both from the render.
+        return [
+            {
+                direction: [x / distance, y / distance],
+                offset: distance - probe.radius,
+                left: (anchor === 'end' ? width : anchor === 'start' ? 0 : width / 2) + CHART_FIT_MARGIN,
+                right: (anchor === 'start' ? width : anchor === 'end' ? 0 : width / 2) + CHART_FIT_MARGIN,
+                up: lineBox.above * fontSize + CHART_FIT_MARGIN,
+                down: lineBox.below * fontSize + CHART_FIT_MARGIN
+            }
+        ];
+    });
+    const halfWidth = chart.width / 2;
+    const halfHeight = chart.height / 2;
+    let radius = Infinity;
+    for (const extreme of [...shape, ...labels]) {
+        const [dx, dy] = extreme.direction;
+        const slopeX = dx + (polygon?.shiftX ?? 0);
+        const slopeY = dy + (polygon?.shiftY ?? 0);
+        const baseX = dx * extreme.offset;
+        const baseY = dy * extreme.offset;
+        if (slopeX > 0)
+            radius = Math.min(radius, (halfWidth - extreme.right - baseX) / slopeX);
+        if (slopeX < 0)
+            radius = Math.min(radius, (halfWidth - extreme.left + baseX) / -slopeX);
+        if (slopeY > 0)
+            radius = Math.min(radius, (halfHeight - extreme.down - baseY) / slopeY);
+        if (slopeY < 0)
+            radius = Math.min(radius, (halfHeight - extreme.up + baseY) / -slopeY);
+    }
+    return Number.isFinite(radius) && radius >= 1 ? radius : null;
+}
+/** Angle labels with positions relative to the plot centre, where the polar group is drawn. */
+function collectLabels(nodes) {
+    const within = (children, x, y) => children.flatMap((node) => {
+        if (node.kind === 'label')
+            return [{ label: node, x: node.x + x, y: node.y + y }];
+        if (node.kind !== 'group')
+            return [];
+        return within(node.children, x + (node.translateX ?? 0), y + (node.translateY ?? 0));
+    });
+    return nodes.flatMap((node) => (node.kind === 'group' ? within(node.children, 0, 0) : []));
+}
 function chartValueIdentity(value) {
     return value instanceof Date ? `date:${value.getTime()}` : `${typeof value}:${String(value)}`;
 }

package/dist/components/Chart/chart.polar.props.d.ts

@@ -13,7 +13,12 @@ type ChartPolarBase<TRow> = ChartDataMarkProps<TRow> & ChartSeriesChannels<TRow>
     color?: ChartColor;
     startAngle?: number;
     endAngle?: number;
+    /**
+     * Pixels between the outer circle and the plot edge. By default the circle is as large as
+     * the plot allows with every angle label inside it.
+     */
     inset?: number;
+    /** Share of the radius left after `inset` that the outer circle uses. Defaults to `1`. */
     radiusRatio?: number;
 };
 type ChartPolarPathMark<TRow> = ChartPolarBase<TRow> & ChartFillStyle<TRow> & ChartStrokeStyle<TRow> & {