From b4132b54ca67217f706c512c921bf70f86302e31 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Sun, 11 Jan 2026 09:01:17 -0500
Subject: [PATCH 1/3] fix for empty layers toggle showing small circle

---
 docs/src/routes/docs/components/[name]/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/routes/docs/components/[name]/+layout.svelte b/docs/src/routes/docs/components/[name]/+layout.svelte
index 6d4b92132..cd50a4c2b 100644
--- a/docs/src/routes/docs/components/[name]/+layout.svelte
+++ b/docs/src/routes/docs/components/[name]/+layout.svelte
@@ -94,7 +94,7 @@
 			{page.params.example?.replaceAll('-', ' ') ?? metadata.name}
 		</h1>
 		<span class="flex items-center gap-1">
-			{#if layers}
+			{#if layers?.length}
 				<ToggleGroup
 					bind:value={settings.layer}
 					variant="outline"

From 14e2d39bbebe3b69de992a4dc8b7a91c7cbfae84 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Mon, 26 Jan 2026 15:06:44 -0500
Subject: [PATCH 2/3] use clip over overflow-hidden

---
 .../examples/components/Dagre/basic.svelte    | 103 ++++++------
 .../components/Dagre/playground.svelte        | 103 ++++++------
 .../Dagre/software-user-flow.svelte           | 127 ++++++++-------
 .../components/Dagre/tcp-state-diagram.svelte | 126 +++++++--------
 .../GeoContext/geojson-preview.svelte         |   1 +
 .../components/GeoPath/spike-map.svelte       |   2 +-
 .../GeoPath/transform-projection.svelte       | 149 +++++++++---------
 .../examples/components/GeoTile/basic.svelte  |  13 +-
 .../GeoTile/zoomable-seamless-layers.svelte   |   1 +
 .../GeoTile/zoomable-with-padding.svelte      |   3 +-
 .../components/GeoTile/zoomable.svelte        |   2 +-
 .../src/examples/components/Pack/basic.svelte |   2 +-
 .../TransformContext/playground.svelte        |   3 +-
 13 files changed, 321 insertions(+), 314 deletions(-)

diff --git a/docs/src/examples/components/Dagre/basic.svelte b/docs/src/examples/components/Dagre/basic.svelte
index 76aea7252..6a91934c7 100644
--- a/docs/src/examples/components/Dagre/basic.svelte
+++ b/docs/src/examples/components/Dagre/basic.svelte
@@ -32,61 +32,60 @@
 <ShowControls bind:show={showSettings} label="Show Settings" />
 
 <div class="flex gap-2 pt-6">
-	<div class="flex-1 p-4 border rounded-sm overflow-hidden">
-		<Chart
-			transform={{
-				mode: 'canvas',
-				initialScrollMode: 'scale',
-				motion: { type: 'tween', duration: 800, easing: cubicOut }
-			}}
-			height={500}
-		>
-			<TransformContextControls />
+	<Chart
+		transform={{
+			mode: 'canvas',
+			initialScrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={500}
+	>
+		<TransformContextControls />
 
-			<Layer>
-				<Dagre data={data as any} edges={(d) => d.links} {...settings}>
-					{#snippet children({ nodes, edges })}
-						<g class="edges">
-							{#each edges as edge, i (edge.v + '-' + edge.w)}
-								<Spline
-									data={edge.points}
-									x="x"
-									y="y"
-									class="stroke-surface-content opacity-30"
-									motion="tween"
-									curve={settings.curve}
-									markerEnd={settings.arrow}
-								/>
-							{/each}
-						</g>
+		<Layer>
+			<Dagre data={data as any} edges={(d) => d.links} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge, i (edge.v + '-' + edge.w)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+						{/each}
+					</g>
 
-						<g class="nodes">
-							{#each nodes as node (node.label)}
-								<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
-									<Rect
-										width={node.width}
-										height={node.height}
-										class="fill-surface-200 stroke-2 stroke-primary/50"
-										rx={10}
-									/>
+					<g class="nodes">
+						{#each nodes as node (node.label)}
+							<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class="fill-surface-200 stroke-2 stroke-primary/50"
+									rx={10}
+								/>
 
-									<Text
-										value={node.label}
-										x={node.width / 2}
-										y={node.height / 2}
-										dy={-2}
-										textAnchor="middle"
-										verticalAnchor="middle"
-										class={cls('text-xs pointer-events-none')}
-									/>
-								</Group>
-							{/each}
-						</g>
-					{/snippet}
-				</Dagre>
-			</Layer>
-		</Chart>
-	</div>
+								<Text
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class={cls('text-xs pointer-events-none')}
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Dagre>
+		</Layer>
+	</Chart>
 
 	{#if showSettings}
 		<div transition:slide={{ axis: 'x' }}>
diff --git a/docs/src/examples/components/Dagre/playground.svelte b/docs/src/examples/components/Dagre/playground.svelte
index eee801925..420eac9f2 100644
--- a/docs/src/examples/components/Dagre/playground.svelte
+++ b/docs/src/examples/components/Dagre/playground.svelte
@@ -33,61 +33,60 @@
 <DagrePlaygroundControls bind:selectedGraphValue bind:showSettings />
 
 <div class="flex gap-2">
-	<div class="flex-1 p-4 border rounded-sm overflow-hidden">
-		<Chart
-			transform={{
-				mode: 'canvas',
-				initialScrollMode: 'scale',
-				motion: { type: 'tween', duration: 800, easing: cubicOut }
-			}}
-			height={700}
-		>
-			<TransformContextControls />
+	<Chart
+		transform={{
+			mode: 'canvas',
+			initialScrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
 
-			<Layer>
-				<Dagre {data} edges={(d) => d.links} {...settings}>
-					{#snippet children({ nodes, edges })}
-						<g class="edges">
-							{#each edges as edge, i (edge.v + '-' + edge.w)}
-								<Spline
-									data={edge.points}
-									x="x"
-									y="y"
-									class="stroke-surface-content opacity-30"
-									motion="tween"
-									curve={settings.curve}
-									markerEnd={settings.arrow}
-								/>
-							{/each}
-						</g>
+		<Layer>
+			<Dagre {data} edges={(d) => d.links} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge, i (edge.v + '-' + edge.w)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+						{/each}
+					</g>
 
-						<g class="nodes">
-							{#each nodes as node (node.label)}
-								<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
-									<Rect
-										width={node.width}
-										height={node.height}
-										class="fill-surface-200 stroke-2 stroke-primary/50"
-										rx={10}
-									/>
+					<g class="nodes">
+						{#each nodes as node (node.label)}
+							<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class="fill-surface-200 stroke-2 stroke-primary/50"
+									rx={10}
+								/>
 
-									<Text
-										value={node.label}
-										x={node.width / 2}
-										y={node.height / 2}
-										dy={-2}
-										textAnchor="middle"
-										verticalAnchor="middle"
-										class={cls('text-xs pointer-events-none')}
-									/>
-								</Group>
-							{/each}
-						</g>
-					{/snippet}
-				</Dagre>
-			</Layer>
-		</Chart>
-	</div>
+								<Text
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class={cls('text-xs pointer-events-none')}
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Dagre>
+		</Layer>
+	</Chart>
 
 	{#if showSettings}
 		<div transition:slide={{ axis: 'x' }}>
diff --git a/docs/src/examples/components/Dagre/software-user-flow.svelte b/docs/src/examples/components/Dagre/software-user-flow.svelte
index c5f248e9c..2539cecac 100644
--- a/docs/src/examples/components/Dagre/software-user-flow.svelte
+++ b/docs/src/examples/components/Dagre/software-user-flow.svelte
@@ -32,77 +32,76 @@
 <ShowControls bind:show={showSettings} label="Show Settings" />
 
 <div class="flex gap-2 pt-6">
-	<div class="flex-1 p-4 border rounded-sm overflow-hidden">
-		<Chart
-			transform={{
-				mode: 'canvas',
-				initialScale: 0.75,
-				initialTranslate: { x: 0, y: -110 },
-				initialScrollMode: 'scale',
-				motion: { type: 'tween', duration: 800, easing: cubicOut }
-			}}
-			height={700}
-		>
-			<TransformContextControls />
+	<Chart
+		transform={{
+			mode: 'canvas',
+			initialScale: 0.75,
+			initialTranslate: { x: 0, y: -110 },
+			initialScrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
 
-			<Layer>
-				<Dagre data={data as any} edges={(d) => d.links} {...settings}>
-					{#snippet children({ nodes, edges })}
-						<g class="edges">
-							{#each edges as edge, i (edge.v + '-' + edge.w)}
-								<Spline
-									data={edge.points}
-									x="x"
-									y="y"
-									class="stroke-surface-content opacity-30"
-									motion="tween"
-									curve={settings?.curve}
-									markerEnd={settings.arrow}
+		<Layer>
+			<Dagre data={data as any} edges={(d) => d.links} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge, i (edge.v + '-' + edge.w)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings?.curve}
+								markerEnd={settings.arrow}
+							/>
+
+							<Text
+								value={edge.label}
+								x={edge.x}
+								y={edge.y}
+								textAnchor="middle"
+								verticalAnchor="middle"
+								class="stroke-2 stroke-surface-100"
+								motion="tween"
+							/>
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.label)}
+							<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class={cls(
+										'fill-surface-200 stroke-2 stroke-primary/50',
+										node.label === 'CLOSED' && 'fill-danger/10 stroke-danger/50',
+										node.label === 'ESTAB' && 'fill-success/10 stroke-success/50'
+									)}
+									rx={10}
 								/>
 
 								<Text
-									value={edge.label}
-									x={edge.x}
-									y={edge.y}
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
 									textAnchor="middle"
 									verticalAnchor="middle"
-									class="stroke-2 stroke-surface-100"
-									motion="tween"
+									class={cls('text-xs pointer-events-none')}
 								/>
-							{/each}
-						</g>
-
-						<g class="nodes">
-							{#each nodes as node (node.label)}
-								<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
-									<Rect
-										width={node.width}
-										height={node.height}
-										class={cls(
-											'fill-surface-200 stroke-2 stroke-primary/50',
-											node.label === 'CLOSED' && 'fill-danger/10 stroke-danger/50',
-											node.label === 'ESTAB' && 'fill-success/10 stroke-success/50'
-										)}
-										rx={10}
-									/>
-
-									<Text
-										value={node.label}
-										x={node.width / 2}
-										y={node.height / 2}
-										dy={-2}
-										textAnchor="middle"
-										verticalAnchor="middle"
-										class={cls('text-xs pointer-events-none')}
-									/>
-								</Group>
-							{/each}
-						</g>
-					{/snippet}
-				</Dagre>
-			</Layer>
-		</Chart>
-	</div>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Dagre>
+		</Layer>
+	</Chart>
 
 	{#if showSettings}
 		<div transition:slide={{ axis: 'x' }}>
diff --git a/docs/src/examples/components/Dagre/tcp-state-diagram.svelte b/docs/src/examples/components/Dagre/tcp-state-diagram.svelte
index d33a8938b..529b56cd4 100644
--- a/docs/src/examples/components/Dagre/tcp-state-diagram.svelte
+++ b/docs/src/examples/components/Dagre/tcp-state-diagram.svelte
@@ -31,76 +31,76 @@
 
 <ShowControls bind:show={showSettings} label="Show Settings" />
 <div class="flex gap-2 pt-6">
-	<div class="flex-1 h-[700px] p-4 border rounded-sm overflow-hidden">
-		<Chart
-			transform={{
-				mode: 'canvas',
-				initialScale: 0.75,
-				initialTranslate: { x: 0, y: -110 },
-				initialScrollMode: 'scale',
-				motion: { type: 'tween', duration: 800, easing: cubicOut }
-			}}
-		>
-			<TransformContextControls />
+	<Chart
+		transform={{
+			mode: 'canvas',
+			initialScale: 0.75,
+			initialTranslate: { x: 0, y: -110 },
+			initialScrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
 
-			<Layer>
-				<Dagre data={data as any} edges={(d) => d.links} {...settings}>
-					{#snippet children({ nodes, edges })}
-						<g class="edges">
-							{#each edges as edge, i (edge.v + '-' + edge.w)}
-								<Spline
-									data={edge.points}
-									x="x"
-									y="y"
-									class="stroke-surface-content opacity-30"
-									motion="tween"
-									curve={settings?.curve}
-									markerEnd={settings.arrow}
+		<Layer center>
+			<Dagre data={data as any} edges={(d) => d.links} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge, i (edge.v + '-' + edge.w)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings?.curve}
+								markerEnd={settings.arrow}
+							/>
+
+							<Text
+								value={edge.label}
+								x={edge.x}
+								y={edge.y}
+								textAnchor="middle"
+								verticalAnchor="middle"
+								class="stroke-2 stroke-surface-100"
+								motion="tween"
+							/>
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.label)}
+							<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class={cls(
+										'fill-surface-200 stroke-2 stroke-primary/50',
+										node.label === 'CLOSED' && 'fill-danger/10 stroke-danger/50',
+										node.label === 'ESTAB' && 'fill-success/10 stroke-success/50'
+									)}
+									rx={10}
 								/>
 
 								<Text
-									value={edge.label}
-									x={edge.x}
-									y={edge.y}
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
 									textAnchor="middle"
 									verticalAnchor="middle"
-									class="stroke-2 stroke-surface-100"
-									motion="tween"
+									class={cls('text-xs pointer-events-none')}
 								/>
-							{/each}
-						</g>
-
-						<g class="nodes">
-							{#each nodes as node (node.label)}
-								<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
-									<Rect
-										width={node.width}
-										height={node.height}
-										class={cls(
-											'fill-surface-200 stroke-2 stroke-primary/50',
-											node.label === 'CLOSED' && 'fill-danger/10 stroke-danger/50',
-											node.label === 'ESTAB' && 'fill-success/10 stroke-success/50'
-										)}
-										rx={10}
-									/>
-
-									<Text
-										value={node.label}
-										x={node.width / 2}
-										y={node.height / 2}
-										dy={-2}
-										textAnchor="middle"
-										verticalAnchor="middle"
-										class={cls('text-xs pointer-events-none')}
-									/>
-								</Group>
-							{/each}
-						</g>
-					{/snippet}
-				</Dagre>
-			</Layer>
-		</Chart>
-	</div>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Dagre>
+		</Layer>
+	</Chart>
 
 	{#if showSettings}
 		<div transition:slide={{ axis: 'x' }}>
diff --git a/docs/src/examples/components/GeoContext/geojson-preview.svelte b/docs/src/examples/components/GeoContext/geojson-preview.svelte
index 96ae11bb3..4c81d1abe 100644
--- a/docs/src/examples/components/GeoContext/geojson-preview.svelte
+++ b/docs/src/examples/components/GeoContext/geojson-preview.svelte
@@ -96,6 +96,7 @@
 					initialScrollMode: 'scale'
 				}}
 				padding={{ top: 8, bottom: 8, left: 8, right: 8 }}
+				height={600}
 			>
 				{#snippet children({ context })}
 					{#if projection === geoMercator && serviceUrl}
diff --git a/docs/src/examples/components/GeoPath/spike-map.svelte b/docs/src/examples/components/GeoPath/spike-map.svelte
index 47d775c2c..19813970c 100644
--- a/docs/src/examples/components/GeoPath/spike-map.svelte
+++ b/docs/src/examples/components/GeoPath/spike-map.svelte
@@ -70,7 +70,7 @@
 		{@const strokeWidth = 1 / context.transform.scale}
 		<TransformContextControls />
 
-		<Layer>
+		<Layer clip>
 			<GeoPath geojson={states} class="fill-surface-content/10 stroke-surface-100" {strokeWidth} />
 
 			{#each enrichedCountiesFeatures as feature}
diff --git a/docs/src/examples/components/GeoPath/transform-projection.svelte b/docs/src/examples/components/GeoPath/transform-projection.svelte
index 28002054e..8ff745d61 100644
--- a/docs/src/examples/components/GeoPath/transform-projection.svelte
+++ b/docs/src/examples/components/GeoPath/transform-projection.svelte
@@ -46,88 +46,87 @@
 
 <GeoPathProjectionControls {projections} bind:projection />
 
-<div class="h-[600px] relative overflow-hidden">
-	<Chart
-		geo={{
-			projection,
-			fitGeojson: projection === geoMercator ? contiguousStates : states,
-			applyTransform: ['translate', 'scale']
-		}}
-		transform={{
-			initialScrollMode: 'none',
-			motion: { type: 'tween', duration: 800, easing: cubicOut }
-		}}
-		height={600}
-	>
-		{#snippet children({ context })}
-			<TransformContextControls />
+<Chart
+	geo={{
+		projection,
+		fitGeojson: projection === geoMercator ? contiguousStates : states,
+		applyTransform: ['translate', 'scale']
+	}}
+	transform={{
+		initialScrollMode: 'none',
+		motion: { type: 'tween', duration: 800, easing: cubicOut }
+	}}
+	clip
+	height={600}
+>
+	{#snippet children({ context })}
+		<TransformContextControls />
 
-			<Layer>
-				{#each states.features as feature}
+		<Layer>
+			{#each states.features as feature}
+				<GeoPath
+					geojson={feature}
+					class="stroke-surface-content fill-surface-100 hover:fill-surface-content/10"
+					tooltipContext={context.tooltip}
+					onclick={() => {
+						context.tooltip.hide();
+						if (selectedStateId === feature.id) {
+							selectedStateId = null;
+							context.transform.reset();
+						} else {
+							selectedStateId = feature.id;
+							if (context.geo.projection) {
+								const featureTransform = geoFitObjectTransform(
+									context.geo.projection,
+									[context.width, context.height],
+									feature
+								);
+								context.transform.setTranslate(featureTransform.translate);
+								context.transform.setScale(featureTransform.scale);
+							}
+						}
+					}}
+				/>
+			{/each}
+
+			{#each selectedCountiesFeatures as feature (feature.id)}
+				<!-- Fade does not work for Canvas -->
+				<g in:fade={{ duration: 300, delay: 600 }} out:fade={{ duration: 300 }}>
 					<GeoPath
 						geojson={feature}
-						class="stroke-surface-content fill-surface-100 hover:fill-surface-content/10"
 						tooltipContext={context.tooltip}
+						class="stroke-surface-content/10 hover:stroke-surface-content/50 hover:fill-surface-content/10"
 						onclick={() => {
+							selectedStateId = null;
 							context.tooltip.hide();
-							if (selectedStateId === feature.id) {
-								selectedStateId = null;
-								context.transform.reset();
-							} else {
-								selectedStateId = feature.id;
-								if (context.geo.projection) {
-									const featureTransform = geoFitObjectTransform(
-										context.geo.projection,
-										[context.width, context.height],
-										feature
-									);
-									context.transform.setTranslate(featureTransform.translate);
-									context.transform.setScale(featureTransform.scale);
-								}
-							}
+							context.transform.reset();
 						}}
 					/>
-				{/each}
+				</g>
+			{/each}
+		</Layer>
 
-				{#each selectedCountiesFeatures as feature (feature.id)}
-					<!-- Fade does not work for Canvas -->
-					<g in:fade={{ duration: 300, delay: 600 }} out:fade={{ duration: 300 }}>
-						<GeoPath
-							geojson={feature}
-							tooltipContext={context.tooltip}
-							class="stroke-surface-content/10 hover:stroke-surface-content/50 hover:fill-surface-content/10"
-							onclick={() => {
-								selectedStateId = null;
-								context.tooltip.hide();
-								context.transform.reset();
-							}}
-						/>
-					</g>
-				{/each}
-			</Layer>
-
-			<!-- Provides better performance by rendering tooltip path on separate Canvas layer -->
-			<Layer pointerEvents={false}>
-				{#if context.tooltip.data && settings.layer === 'canvas'}
-					<GeoPath
-						geojson={context.tooltip.data}
-						strokeWidth={1 / context.transform.scale}
-						class="stroke-surface-content/50 fill-surface-content/20"
-					/>
-				{/if}
-			</Layer>
+		<!-- Provides better performance by rendering tooltip path on separate Canvas layer -->
+		<Layer pointerEvents={false}>
+			{#if context.tooltip.data && settings.layer === 'canvas'}
+				<GeoPath
+					geojson={context.tooltip.data}
+					strokeWidth={1 / context.transform.scale}
+					class="stroke-surface-content/50 fill-surface-content/20"
+				/>
+			{/if}
+		</Layer>
 
-			<Tooltip.Root>
-				{#snippet children({ data })}
-					{@const [longitude, latitude] =
-						context.geo.projection?.invert?.([context.tooltip.x, context.tooltip.y]) ?? []}
-					<Tooltip.Header>{data.properties.name}</Tooltip.Header>
-					<Tooltip.List>
-						<Tooltip.Item label="longitude" value={longitude} format="decimal" />
-						<Tooltip.Item label="latitude" value={latitude} format="decimal" />
-					</Tooltip.List>
-				{/snippet}
-			</Tooltip.Root>
-		{/snippet}
-	</Chart>
-</div>
+		<Tooltip.Root>
+			{#snippet children({ data })}
+				{@const [longitude, latitude] =
+					context.geo.projection?.invert?.([context.tooltip.x, context.tooltip.y]) ?? []}
+				<Tooltip.Header>{data.properties.name}</Tooltip.Header>
+				<Tooltip.List>
+					<Tooltip.Item label="longitude" value={longitude} format="decimal" />
+					<Tooltip.Item label="latitude" value={latitude} format="decimal" />
+				</Tooltip.List>
+			{/snippet}
+		</Tooltip.Root>
+	{/snippet}
+</Chart>
diff --git a/docs/src/examples/components/GeoTile/basic.svelte b/docs/src/examples/components/GeoTile/basic.svelte
index a8072056e..aa67f724a 100644
--- a/docs/src/examples/components/GeoTile/basic.svelte
+++ b/docs/src/examples/components/GeoTile/basic.svelte
@@ -3,7 +3,15 @@
 	import { geoMercator } from 'd3-geo';
 	import { feature } from 'topojson-client';
 
-	import { Chart, GeoPath, GeoTile, Layer, Tooltip, getSettings } from 'layerchart';
+	import {
+		Chart,
+		GeoPath,
+		GeoTile,
+		Layer,
+		Tooltip,
+		defaultChartPadding,
+		getSettings
+	} from 'layerchart';
 	import GeoTileControls from '$lib/components/controls/GeoTileControls.svelte';
 	import { getUsStatesTopology } from '$lib/geo.remote';
 
@@ -30,12 +38,13 @@
 </script>
 
 <GeoTileControls bind:serviceUrl bind:doubleScale={zoomDelta} />
-
 <Chart
 	geo={{
 		projection: geoMercator,
 		fitGeojson: selectedFeature
 	}}
+	clip
+	padding={defaultChartPadding({ top: 40 })}
 	height={600}
 >
 	{#snippet children({ context })}
diff --git a/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte b/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte
index b7adab6de..3896a40a5 100644
--- a/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte
+++ b/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte
@@ -50,6 +50,7 @@
 		transform={{
 			initialScrollMode: 'scale'
 		}}
+		clip
 		height={600}
 	>
 		{#snippet children({ context })}
diff --git a/docs/src/examples/components/GeoTile/zoomable-with-padding.svelte b/docs/src/examples/components/GeoTile/zoomable-with-padding.svelte
index 0810fda8d..0bda4e7fb 100644
--- a/docs/src/examples/components/GeoTile/zoomable-with-padding.svelte
+++ b/docs/src/examples/components/GeoTile/zoomable-with-padding.svelte
@@ -41,7 +41,6 @@
 <GeoTileControls bind:serviceUrl bind:doubleScale={zoomDelta} />
 
 {#if serviceUrl}
-	<div class="h-[600px] relative overflow-hidden">
 		<Chart
 			geo={{
 				projection: geoMercator,
@@ -57,6 +56,7 @@
 				left: 100,
 				right: 100
 			}}
+			clip
 			height={600}
 		>
 			{#snippet children({ context })}
@@ -106,5 +106,4 @@
 				</Tooltip.Root>
 			{/snippet}
 		</Chart>
-	</div>
 {/if}
diff --git a/docs/src/examples/components/GeoTile/zoomable.svelte b/docs/src/examples/components/GeoTile/zoomable.svelte
index dd22d1ebd..da8fc112f 100644
--- a/docs/src/examples/components/GeoTile/zoomable.svelte
+++ b/docs/src/examples/components/GeoTile/zoomable.svelte
@@ -50,8 +50,8 @@
 		transform={{
 			initialScrollMode: 'scale'
 		}}
-		height={600}
 		clip
+		height={600}
 	>
 		{#snippet children({ context })}
 			{#if settings.debug}
diff --git a/docs/src/examples/components/Pack/basic.svelte b/docs/src/examples/components/Pack/basic.svelte
index 5580de98c..a930bbe5e 100644
--- a/docs/src/examples/components/Pack/basic.svelte
+++ b/docs/src/examples/components/Pack/basic.svelte
@@ -101,7 +101,7 @@
 	}}
 	bind:context
 	height={600}
-	class="overflow-hidden"
+	clip
 >
 	<Layer onclick={() => (selected = complexHierarchy)}>
 		<Pack {padding} hierarchy={complexHierarchy} bind:nodes>
diff --git a/docs/src/examples/components/TransformContext/playground.svelte b/docs/src/examples/components/TransformContext/playground.svelte
index e4cd8c4fe..eca9c3e48 100644
--- a/docs/src/examples/components/TransformContext/playground.svelte
+++ b/docs/src/examples/components/TransformContext/playground.svelte
@@ -41,12 +41,13 @@
 			motion: config.tweened ? { type: 'tween', duration: 800, easing: cubicOut } : undefined,
 			initialScrollMode: 'scale'
 		}}
+		clip
 		padding={50}
 		width={500}
 		height={500}
 	>
 		<TransformContextControls />
-		<Layer class="overflow-hidden">
+		<Layer>
 			{#if config.showPath}
 				<Spline curve={config.curve} motion="tween" />
 			{/if}

From de1f32ec3e4cb9dee50ea1982a97e64bb0697d8e Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 27 Jan 2026 09:43:12 -0500
Subject: [PATCH 3/3] refine

---
 docs/src/content/components/GeoTile.md        |   2 +-
 .../components/GeoPath/spike-map.svelte       |   3 +-
 .../examples/components/GeoTile/basic.svelte  |  14 +-
 .../GeoTile/zoomable-seamless-layers.svelte   |   2 +-
 .../GeoTile/zoomable-with-padding.svelte      | 124 +++++++++---------
 .../components/GeoTile/zoomable.svelte        |   2 +-
 .../controls/GeoTileControls.svelte           |   8 +-
 7 files changed, 76 insertions(+), 79 deletions(-)

diff --git a/docs/src/content/components/GeoTile.md b/docs/src/content/components/GeoTile.md
index c2d78f006..2107991e9 100644
--- a/docs/src/content/components/GeoTile.md
+++ b/docs/src/content/components/GeoTile.md
@@ -7,4 +7,4 @@ related: []
 
 ## Usage
 
-:example{ name="basic" showCode }
+:example{ name="basic" }
diff --git a/docs/src/examples/components/GeoPath/spike-map.svelte b/docs/src/examples/components/GeoPath/spike-map.svelte
index 19813970c..2aed216e0 100644
--- a/docs/src/examples/components/GeoPath/spike-map.svelte
+++ b/docs/src/examples/components/GeoPath/spike-map.svelte
@@ -65,12 +65,13 @@
 		initialScrollMode: 'scale'
 	}}
 	height={600}
+	clip
 >
 	{#snippet children({ context })}
 		{@const strokeWidth = 1 / context.transform.scale}
 		<TransformContextControls />
 
-		<Layer clip>
+		<Layer>
 			<GeoPath geojson={states} class="fill-surface-content/10 stroke-surface-100" {strokeWidth} />
 
 			{#each enrichedCountiesFeatures as feature}
diff --git a/docs/src/examples/components/GeoTile/basic.svelte b/docs/src/examples/components/GeoTile/basic.svelte
index aa67f724a..6ddeed82b 100644
--- a/docs/src/examples/components/GeoTile/basic.svelte
+++ b/docs/src/examples/components/GeoTile/basic.svelte
@@ -3,15 +3,7 @@
 	import { geoMercator } from 'd3-geo';
 	import { feature } from 'topojson-client';
 
-	import {
-		Chart,
-		GeoPath,
-		GeoTile,
-		Layer,
-		Tooltip,
-		defaultChartPadding,
-		getSettings
-	} from 'layerchart';
+	import { Chart, GeoPath, GeoTile, Layer, Tooltip, getSettings } from 'layerchart';
 	import GeoTileControls from '$lib/components/controls/GeoTileControls.svelte';
 	import { getUsStatesTopology } from '$lib/geo.remote';
 
@@ -37,14 +29,14 @@
 	let settings = getSettings();
 </script>
 
-<GeoTileControls bind:serviceUrl bind:doubleScale={zoomDelta} />
+<GeoTileControls bind:serviceUrl bind:doubleScale={zoomDelta} class="mb-4" />
 <Chart
 	geo={{
 		projection: geoMercator,
 		fitGeojson: selectedFeature
 	}}
 	clip
-	padding={defaultChartPadding({ top: 40 })}
+	padding={{ left: 20, right: 10 }}
 	height={600}
 >
 	{#snippet children({ context })}
diff --git a/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte b/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte
index 3896a40a5..8d2a06bed 100644
--- a/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte
+++ b/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte
@@ -38,7 +38,7 @@
 	export { data };
 </script>
 
-<GeoTileControls bind:serviceUrl bind:doubleScale={zoomDelta} />
+<GeoTileControls bind:serviceUrl bind:doubleScale={zoomDelta} class="mb-4" />
 
 {#if serviceUrl}
 	<Chart
diff --git a/docs/src/examples/components/GeoTile/zoomable-with-padding.svelte b/docs/src/examples/components/GeoTile/zoomable-with-padding.svelte
index 0bda4e7fb..bca837e46 100644
--- a/docs/src/examples/components/GeoTile/zoomable-with-padding.svelte
+++ b/docs/src/examples/components/GeoTile/zoomable-with-padding.svelte
@@ -38,72 +38,72 @@
 	export { data };
 </script>
 
-<GeoTileControls bind:serviceUrl bind:doubleScale={zoomDelta} />
+<GeoTileControls bind:serviceUrl bind:doubleScale={zoomDelta} class="mb-4" />
 
 {#if serviceUrl}
-		<Chart
-			geo={{
-				projection: geoMercator,
-				fitGeojson: filteredStates,
-				applyTransform: ['translate', 'scale']
-			}}
-			transform={{
-				initialScrollMode: 'scale'
-			}}
-			padding={{
-				top: 100,
-				bottom: 100,
-				left: 100,
-				right: 100
-			}}
-			clip
-			height={600}
-		>
-			{#snippet children({ context })}
-				{#if settings.debug}
-					<div class="absolute top-0 left-0 z-10 grid gap-1">
-						<!-- Debug component removed for simplified example -->
-					</div>
-				{/if}
+	<Chart
+		geo={{
+			projection: geoMercator,
+			fitGeojson: filteredStates,
+			applyTransform: ['translate', 'scale']
+		}}
+		transform={{
+			initialScrollMode: 'scale'
+		}}
+		padding={{
+			top: 100,
+			bottom: 100,
+			left: 100,
+			right: 100
+		}}
+		clip
+		height={600}
+	>
+		{#snippet children({ context })}
+			{#if settings.debug}
+				<div class="absolute top-0 left-0 z-10 grid gap-1">
+					<!-- Debug component removed for simplified example -->
+				</div>
+			{/if}
 
-				<TransformControls />
+			<TransformControls />
 
-				<Layer>
-					<GeoTile url={serviceUrl} {zoomDelta} debug={settings.debug} />
+			<Layer>
+				<GeoTile url={serviceUrl} {zoomDelta} debug={settings.debug} />
 
-					{#each filteredStates.features as feature}
-						<GeoPath
-							geojson={feature}
-							class="stroke-none"
-							tooltipContext={context.tooltip}
-							onclick={() => {
-								if (!context.geo.projection) return;
-								const featureTransform = geoFitObjectTransform(
-									context.geo.projection,
-									[context.width, context.height],
-									feature
-								);
-								context.transform.setTranslate(featureTransform.translate);
-								context.transform.setScale(featureTransform.scale);
-							}}
-						/>
-					{/each}
-				</Layer>
+				{#each filteredStates.features as feature}
+					<GeoPath
+						geojson={feature}
+						class="stroke-none"
+						tooltipContext={context.tooltip}
+						onclick={() => {
+							if (!context.geo.projection) return;
+							const featureTransform = geoFitObjectTransform(
+								context.geo.projection,
+								[context.width, context.height],
+								feature
+							);
+							context.transform.setTranslate(featureTransform.translate);
+							context.transform.setScale(featureTransform.scale);
+						}}
+					/>
+				{/each}
+			</Layer>
 
-				<Tooltip.Root>
-					{#snippet children({ data })}
-						{@const [longitude, latitude] =
-							context.geo.projection?.invert?.([
-								context.tooltip.x - context.padding.left,
-								context.tooltip.y - context.padding.top
-							]) ?? []}
-						<Tooltip.Header>{data.properties.name}</Tooltip.Header>
-						<Tooltip.List>
-							<Tooltip.Item label="longitude" value={longitude} format="decimal" />
-							<Tooltip.Item label="latitude" value={latitude} format="decimal" />
-						</Tooltip.List>
-					{/snippet}
-				</Tooltip.Root>
-			{/snippet}
-		</Chart>
+			<Tooltip.Root>
+				{#snippet children({ data })}
+					{@const [longitude, latitude] =
+						context.geo.projection?.invert?.([
+							context.tooltip.x - context.padding.left,
+							context.tooltip.y - context.padding.top
+						]) ?? []}
+					<Tooltip.Header>{data.properties.name}</Tooltip.Header>
+					<Tooltip.List>
+						<Tooltip.Item label="longitude" value={longitude} format="decimal" />
+						<Tooltip.Item label="latitude" value={latitude} format="decimal" />
+					</Tooltip.List>
+				{/snippet}
+			</Tooltip.Root>
+		{/snippet}
+	</Chart>
 {/if}
diff --git a/docs/src/examples/components/GeoTile/zoomable.svelte b/docs/src/examples/components/GeoTile/zoomable.svelte
index da8fc112f..03280d6e8 100644
--- a/docs/src/examples/components/GeoTile/zoomable.svelte
+++ b/docs/src/examples/components/GeoTile/zoomable.svelte
@@ -38,7 +38,7 @@
 	export { data };
 </script>
 
-<GeoTileControls bind:serviceUrl bind:doubleScale={zoomDelta} />
+<GeoTileControls bind:serviceUrl bind:doubleScale={zoomDelta} class="mb-4" />
 
 {#if serviceUrl}
 	<Chart
diff --git a/docs/src/lib/components/controls/GeoTileControls.svelte b/docs/src/lib/components/controls/GeoTileControls.svelte
index b7c6a3582..c1e6c8aa8 100644
--- a/docs/src/lib/components/controls/GeoTileControls.svelte
+++ b/docs/src/lib/components/controls/GeoTileControls.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { SelectField, Switch } from 'svelte-ux';
 
-	let { doubleScale = $bindable(devicePixelRatio > 1), serviceUrl = $bindable() } = $props();
+	let {
+		doubleScale = $bindable(devicePixelRatio > 1),
+		serviceUrl = $bindable(),
+		...restProps
+	} = $props();
 
 	// <TilesetField bind:doubleScale bind:serviceUrl />
 
@@ -123,7 +127,7 @@
 	});
 </script>
 
-<div class="screenshot-hidden">
+<div class="screenshot-hidden" {...restProps}>
 	<SelectField
 		label="Tileset"
 		options={serviceOptions}