diff --git a/.changeset/cruel-cameras-begin.md b/.changeset/cruel-cameras-begin.md
new file mode 100644
index 000000000..5b14ebd06
--- /dev/null
+++ b/.changeset/cruel-cameras-begin.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+breaking(Treemap): Remove `selected` prop
diff --git a/.changeset/early-peaches-accept.md b/.changeset/early-peaches-accept.md
new file mode 100644
index 000000000..08fd61a41
--- /dev/null
+++ b/.changeset/early-peaches-accept.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Treemap): Add `maintainAspectRatio` (default: false) to opt into tiling function adjustment (primarily for zoom)
diff --git a/.changeset/modern-nails-kiss.md b/.changeset/modern-nails-kiss.md
new file mode 100644
index 000000000..e218d5071
--- /dev/null
+++ b/.changeset/modern-nails-kiss.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Treemap): Fix reactivity of props (tile, padding, etc)
diff --git a/.changeset/spotty-rules-taste.md b/.changeset/spotty-rules-taste.md
new file mode 100644
index 000000000..50a84568d
--- /dev/null
+++ b/.changeset/spotty-rules-taste.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Treemap): Fix `padding*` prop types to support function or number constant
diff --git a/packages/layerchart/src/lib/components/Treemap.svelte b/packages/layerchart/src/lib/components/Treemap.svelte
index ee5d7e841..3d92d0b54 100644
--- a/packages/layerchart/src/lib/components/Treemap.svelte
+++ b/packages/layerchart/src/lib/components/Treemap.svelte
@@ -18,53 +18,53 @@
      *
      * @default 0
      */
-    padding?: number;
+    padding?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The inner padding between nodes.
      *
      * @default 0
      */
-    paddingInner?: number;
+    paddingInner?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The outer padding between nodes.
      *
      * @default 0
      */
-    paddingOuter?: number;
+    paddingOuter?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The top padding between nodes.
      *
      * @default 0
      */
-    paddingTop?: number;
+    paddingTop?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The bottom padding between nodes.
      *
      * @default 0
      */
-    paddingBottom?: number;
+    paddingBottom?: number | ((node: HierarchyRectangularNode<T>) => number);
     /**
      * The left padding between nodes.
      *
      */
-    paddingLeft?: number;
+    paddingLeft?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The right padding between nodes.
      *
      */
-    paddingRight?: number;
+    paddingRight?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
-     * The selected node.
+     * Modify tiling function for approapriate aspect ratio when treemap is zoomed in
      *
-     * @default null
+     * @default false
      */
-    selected?: HierarchyRectangularNode<T> | null;
+    maintainAspectRatio?: boolean;
 
     hierarchy?: HierarchyNode<T>;
 
@@ -99,7 +99,7 @@
     paddingBottom = 0,
     paddingLeft,
     paddingRight,
-    selected = $bindable(null),
+    maintainAspectRatio = false,
     children,
   }: TreemapProps<T> = $props();
 
@@ -121,45 +121,82 @@
                 : tile
   );
 
-  const treemap = $derived.by(() => {
+  const treemapData = $derived.by(() => {
     const _treemap = d3treemap<T>()
       .size([ctx.width, ctx.height])
-      .tile(aspectTile(tileFunc, ctx.width, ctx.height));
+      .tile(maintainAspectRatio ? aspectTile(tileFunc, ctx.width, ctx.height) : tileFunc);
 
     if (padding) {
-      _treemap.padding(padding);
+      // Make Typescript happy to pick the correct overload
+      // TODO: Better way to do this?
+      if (typeof padding === 'number') {
+        _treemap.padding(padding);
+      } else {
+        _treemap.padding(padding);
+      }
     }
 
     if (paddingInner) {
-      _treemap.paddingInner(paddingInner);
+      if (typeof paddingInner === 'number') {
+        _treemap.paddingInner(typeof paddingInner === 'number' ? paddingInner : paddingInner);
+      } else {
+        _treemap.paddingInner(paddingInner);
+      }
     }
 
     if (paddingOuter) {
-      _treemap.paddingOuter(paddingOuter);
+      if (typeof paddingOuter === 'number') {
+        _treemap.paddingOuter(paddingOuter);
+      } else {
+        _treemap.paddingOuter(paddingOuter);
+      }
     }
 
     if (paddingTop) {
-      _treemap.paddingTop(paddingTop);
+      if (typeof paddingTop === 'number') {
+        _treemap.paddingTop(paddingTop);
+      } else {
+        _treemap.paddingTop(paddingTop);
+      }
     }
 
     if (paddingBottom) {
-      _treemap.paddingBottom(paddingBottom);
+      if (typeof paddingBottom === 'number') {
+        _treemap.paddingBottom(paddingBottom);
+      } else {
+        _treemap.paddingBottom(paddingBottom);
+      }
     }
 
     if (paddingLeft) {
-      _treemap.paddingLeft(paddingLeft);
+      if (typeof paddingLeft === 'number') {
+        _treemap.paddingLeft(paddingLeft);
+      } else {
+        _treemap.paddingLeft(paddingLeft);
+      }
     }
     if (paddingRight) {
-      _treemap.paddingRight(paddingRight);
+      if (typeof paddingRight === 'number') {
+        _treemap.paddingRight(paddingRight);
+      } else {
+        _treemap.paddingRight(paddingRight);
+      }
     }
-    return _treemap;
-  });
 
-  const treemapData = $derived(hierarchy ? treemap(hierarchy) : null);
+    if (hierarchy) {
+      const h = hierarchy.copy();
+      const treemapData = _treemap(h);
+      return {
+        links: treemapData.links(),
+        nodes: treemapData.descendants(),
+      };
+    }
 
-  $effect.pre(() => {
-    selected = treemapData;
+    return {
+      links: [],
+      nodes: [],
+    };
   });
 </script>
 
-{@render children?.({ nodes: treemapData ? treemapData.descendants() : [] })}
+{@render children?.({ nodes: treemapData.nodes })}
diff --git a/packages/layerchart/src/lib/utils/treemap.ts b/packages/layerchart/src/lib/utils/treemap.ts
index 5d91de23a..5bace5889 100644
--- a/packages/layerchart/src/lib/utils/treemap.ts
+++ b/packages/layerchart/src/lib/utils/treemap.ts
@@ -28,7 +28,7 @@ export function aspectTile(tile: TileFunc, width: number, height: number): TileF
 /**
  * Show if the node (a) is a child of the selected (b), or any parent above selected
  */
-export function isNodeVisible(a: HierarchyNode<any>, b: HierarchyNode<any> | null) {
+export function isNodeVisible(a: HierarchyNode<any>, b: HierarchyNode<any> | null | undefined) {
   while (b) {
     if (a.parent === b) return true;
     b = b.parent;
diff --git a/packages/layerchart/src/routes/docs/components/Treemap/+page.svelte b/packages/layerchart/src/routes/docs/components/Treemap/+page.svelte
index 9d83a0259..f192a7ea0 100644
--- a/packages/layerchart/src/routes/docs/components/Treemap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Treemap/+page.svelte
@@ -29,7 +29,12 @@
     .sum((d) => d.value)
     .sort(sortFunc('value', 'desc'));
 
-  const simpleRoot = hierarchy({
+  const rootPopulation = hierarchy(data.population)
+    // @ts-expect-error
+    .sum((d) => d.value)
+    .sort(sortFunc('value', 'desc'));
+
+  const rootFlat = hierarchy({
     name: 'root',
     children: [
       { name: 'A', value: 1000 },
@@ -51,6 +56,7 @@
 
   let tile: ComponentProps<typeof Treemap>['tile'] = $state('squarify');
   let colorBy = $state('children');
+  let maintainAspectRatio = $state(false);
 
   let paddingOuter = $state(4);
   let paddingInner = $state(4);
@@ -91,7 +97,7 @@
 <h2>Playground</h2>
 
 <div class="grid gap-1 mb-4">
-  <div class="grid grid-cols-[6fr_3fr] gap-1">
+  <div class="grid grid-cols-[6fr_1fr_3fr] gap-1">
     <Field label="Tile">
       <ToggleGroup bind:value={tile} variant="outline" size="sm" inset class="w-full">
         <ToggleOption value="squarify">Squarify</ToggleOption>
@@ -102,6 +108,151 @@
         <ToggleOption value="sliceDice">Slice / Dice</ToggleOption>
       </ToggleGroup>
     </Field>
+    <Field label="Maintain Aspect Ratio">
+      <ToggleGroup
+        bind:value={maintainAspectRatio}
+        variant="outline"
+        size="sm"
+        inset
+        class="w-full"
+      >
+        <ToggleOption value={false}>No</ToggleOption>
+        <ToggleOption value={true}>Yes</ToggleOption>
+      </ToggleGroup>
+    </Field>
+    <Field label="Color By">
+      <ToggleGroup bind:value={colorBy} variant="outline" size="sm" inset class="w-full">
+        <ToggleOption value="children">Children</ToggleOption>
+        <ToggleOption value="depth">Depth</ToggleOption>
+        <ToggleOption value="parent">Parent</ToggleOption>
+      </ToggleGroup>
+    </Field>
+  </div>
+  <div class="grid grid-cols-2 gap-2">
+    <RangeField label="Padding Outer" bind:value={paddingOuter} />
+    <RangeField label="Padding Inner" bind:value={paddingInner} />
+  </div>
+  <div class="grid grid-cols-4 gap-2">
+    <RangeField label="Padding Top" bind:value={paddingTop} />
+    <RangeField label="Padding Bottom" bind:value={paddingBottom} />
+    <RangeField label="Padding Left" bind:value={paddingLeft} />
+    <RangeField label="Padding Right" bind:value={paddingRight} />
+  </div>
+</div>
+
+<Preview data={rootPopulation}>
+  <div class="aspect-[16/9]">
+    <Chart>
+      {#snippet children({ context })}
+        <Svg>
+          <Treemap
+            hierarchy={rootPopulation}
+            {tile}
+            {paddingOuter}
+            {paddingInner}
+            {paddingTop}
+            {paddingBottom}
+            {paddingLeft}
+            {paddingRight}
+            {maintainAspectRatio}
+          >
+            {#snippet children({ nodes })}
+              {#each nodes as node}
+                <Group
+                  x={node.x0}
+                  y={node.y0}
+                  onpointermove={(e) => context.tooltip.show(e, node)}
+                  onpointerleave={context.tooltip.hide}
+                >
+                  {@const nodeWidth = node.x1 - node.x0}
+                  {@const nodeHeight = node.y1 - node.y0}
+                  {@const nodeColor = getNodeColor(node, colorBy)}
+                  <Rect
+                    width={nodeWidth}
+                    height={nodeHeight}
+                    stroke={colorBy === 'children'
+                      ? 'var(--color-primary-content)'
+                      : hsl(nodeColor).darker(1).toString()}
+                    stroke-opacity={colorBy === 'children' ? 0.2 : 1}
+                    fill={nodeColor}
+                    fillOpacity={node.children ? 0.5 : 1}
+                    rx={5}
+                  />
+                  <RectClipPath width={nodeWidth} height={nodeHeight}>
+                    <text
+                      x={4}
+                      y={16 * 0.6 + 4}
+                      class={cls(
+                        'text-[10px] font-medium',
+                        colorBy === 'children' ? 'fill-primary-content' : 'fill-black'
+                      )}
+                    >
+                      <tspan>{node.data.name}</tspan>
+                      {#if node.children}
+                        <tspan class="text-[8px] font-extralight">
+                          {format(node.value ?? 0, 'integer')}
+                        </tspan>
+                      {/if}
+                    </text>
+
+                    {#if !node.children}
+                      <Text
+                        value={format(node.value ?? 0, 'integer')}
+                        class={cls(
+                          'text-[8px] font-extralight',
+                          colorBy === 'children' ? 'fill-primary-content' : 'fill-black'
+                        )}
+                        verticalAnchor="start"
+                        x={4}
+                        y={16}
+                      />
+                    {/if}
+                  </RectClipPath>
+                </Group>
+              {/each}
+            {/snippet}
+          </Treemap>
+        </Svg>
+
+        <Tooltip.Root>
+          {#snippet children({ data })}
+            <Tooltip.Header>{data.data.name}</Tooltip.Header>
+            <Tooltip.List>
+              <Tooltip.Item label="value" value={data.value} format="integer" />
+            </Tooltip.List>
+          {/snippet}
+        </Tooltip.Root>
+      {/snippet}
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Complex</h2>
+
+<div class="grid gap-1 mb-4">
+  <div class="grid grid-cols-[6fr_1fr_3fr] gap-1">
+    <Field label="Tile">
+      <ToggleGroup bind:value={tile} variant="outline" size="sm" inset class="w-full">
+        <ToggleOption value="squarify">Squarify</ToggleOption>
+        <ToggleOption value="resquarify">Resquarify</ToggleOption>
+        <ToggleOption value="binary">Binary</ToggleOption>
+        <ToggleOption value="slice">Slice</ToggleOption>
+        <ToggleOption value="dice">Dice</ToggleOption>
+        <ToggleOption value="sliceDice">Slice / Dice</ToggleOption>
+      </ToggleGroup>
+    </Field>
+    <Field label="Maintain Aspect Ratio">
+      <ToggleGroup
+        bind:value={maintainAspectRatio}
+        variant="outline"
+        size="sm"
+        inset
+        class="w-full"
+      >
+        <ToggleOption value={false}>No</ToggleOption>
+        <ToggleOption value={true}>Yes</ToggleOption>
+      </ToggleGroup>
+    </Field>
     <Field label="Color By">
       <ToggleGroup bind:value={colorBy} variant="outline" size="sm" inset class="w-full">
         <ToggleOption value="children">Children</ToggleOption>
@@ -122,13 +273,13 @@
   </div>
 </div>
 
-<Preview data={root}>
+<Preview>
   <div class="h-[800px]">
     <Chart>
       {#snippet children({ context })}
         <Svg>
           <Treemap
-            hierarchy={root}
+            hierarchy={root.copy()}
             {tile}
             {paddingOuter}
             {paddingInner}
@@ -136,6 +287,7 @@
             {paddingBottom}
             {paddingLeft}
             {paddingRight}
+            {maintainAspectRatio}
           >
             {#snippet children({ nodes })}
               {#each nodes as node}
@@ -210,11 +362,11 @@
 
 <h2>Simple / flat</h2>
 
-<Preview data={simpleRoot}>
+<Preview data={rootFlat}>
   <div class="h-[400px]">
     <Chart>
       <Svg>
-        <Treemap hierarchy={simpleRoot}>
+        <Treemap hierarchy={rootFlat}>
           {#snippet children({ nodes })}
             {#each nodes.filter((n) => n.depth > 0) as node}
               <Group x={node.x0} y={node.y0}>
diff --git a/packages/layerchart/src/routes/docs/components/Treemap/+page.ts b/packages/layerchart/src/routes/docs/components/Treemap/+page.ts
index d14b909a4..f35b4bea4 100644
--- a/packages/layerchart/src/routes/docs/components/Treemap/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Treemap/+page.ts
@@ -5,6 +5,56 @@ import pageSource from './+page.svelte?raw';
 export async function load() {
   return {
     flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()),
+    population: {
+      name: 'World',
+      children: [
+        {
+          name: 'Europe',
+          children: [
+            { name: 'Western Europe', value: 200 }, // ~200M based on UN data
+            { name: 'Southern Europe', value: 151 }, // ~151M based on UN data
+            { name: 'Eastern Europe', value: 284 }, // ~284M based on UN data
+            { name: 'Northern Europe', value: 109 }, // ~109M based on UN data
+          ],
+        },
+        {
+          name: 'Asia',
+          children: [
+            { name: 'East Asia', value: 1652 }, // 1,652M based on UN data
+            { name: 'South Asia', value: 2085 }, // 2,085M based on UN data
+            { name: 'Southeast Asia', value: 700 }, // 700M based on UN data
+            { name: 'Western Asia', value: 314 }, // 314M based on UN data
+            { name: 'Central Asia', value: 84 }, // 84M based on UN data
+          ],
+        },
+        {
+          name: 'North America',
+          children: [
+            { name: 'Northern America', value: 388 }, // ~388M based on UN data
+            { name: 'Central America', value: 184 }, // ~184M (estimated from total minus Northern America)
+          ],
+        },
+        {
+          name: 'South America',
+          children: [{ name: 'South America', value: 434 }], // ~434M based on UN data
+        },
+        {
+          name: 'Africa',
+          children: [
+            { name: 'Western Africa', value: 467 }, // 467M based on UN data
+            { name: 'Southern Africa', value: 74 }, // 74M based on UN data
+            { name: 'Northern Africa', value: 276 }, // 276M based on UN data
+            { name: 'Eastern Africa', value: 513 }, // 513M based on UN data
+            { name: 'Middle Africa', value: 220 }, // 220M based on UN data
+          ],
+        },
+        {
+          name: 'Oceania',
+          children: [{ name: 'Oceania', value: 47 }], // 47M based on UN data
+        },
+      ],
+    },
+
     meta: {
       api,
       source,
diff --git a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
index 27872946b..1ea742b1d 100644
--- a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
@@ -32,6 +32,7 @@
     Text,
     Tooltip,
     Treemap,
+    asAny,
     findAncestor,
   } from 'layerchart';
   import { isNodeVisible } from '$lib/utils/treemap.js';
@@ -81,10 +82,11 @@
   });
 
   let tile: ComponentProps<typeof Treemap>['tile'] = $state('squarify');
+  let maintainAspectRatio = $state(false);
   let colorBy = $state('children');
 
-  let selectedNested: HierarchyRectangularNode<any> | null = $state(null);
-  let selectedZoomable: HierarchyRectangularNode<any> | null = $state(null);
+  let selectedNested: HierarchyNode<any> = $state(complexDataHierarchy.copy());
+  let selectedZoomable: HierarchyNode<any> = $state(complexDataHierarchy.copy());
   let paddingOuter = $state(4);
   let paddingInner = $state(4);
   let paddingTop = $state(20);
@@ -123,7 +125,7 @@
 <h3>Zoomable</h3>
 
 <div class="grid gap-1 mb-4">
-  <div class="grid grid-cols-[6fr_3fr] gap-1">
+  <div class="grid grid-cols-[6fr_1fr_3fr] gap-1">
     <Field label="Tile">
       <ToggleGroup bind:value={tile} variant="outline" size="sm" inset class="w-full">
         <ToggleOption value="squarify">Squarify</ToggleOption>
@@ -134,6 +136,18 @@
         <ToggleOption value="sliceDice">Slice / Dice</ToggleOption>
       </ToggleGroup>
     </Field>
+    <Field label="Maintain Aspect Ratio">
+      <ToggleGroup
+        bind:value={maintainAspectRatio}
+        variant="outline"
+        size="sm"
+        inset
+        class="w-full"
+      >
+        <ToggleOption value={false}>No</ToggleOption>
+        <ToggleOption value={true}>Yes</ToggleOption>
+      </ToggleGroup>
+    </Field>
     <Field label="Color By">
       <ToggleGroup bind:value={colorBy} variant="outline" size="sm" inset class="w-full">
         <ToggleOption value="children">Children</ToggleOption>
@@ -174,15 +188,15 @@
       {#snippet children({ context })}
         <Svg>
           <Bounds
-            domain={selectedNested}
+            domain={asAny(selectedNested)}
             motion={{ type: 'tween', duration: 800, easing: cubicOut }}
           >
             {#snippet children({ xScale, yScale })}
               <ChartClipPath>
                 <Treemap
-                  hierarchy={complexDataHierarchy.copy()}
+                  hierarchy={complexDataHierarchy}
                   {tile}
-                  bind:selected={selectedNested}
+                  {maintainAspectRatio}
                   {paddingOuter}
                   {paddingInner}
                   {paddingTop}
@@ -271,7 +285,7 @@
 <h3>Grouped and Filterable</h3>
 
 <div class="grid gap-1 mb-4">
-  <div class="grid grid-cols-[6fr_3fr] gap-1">
+  <div class="grid grid-cols-[6fr_1fr_3fr] gap-1">
     <Field label="Tile">
       <ToggleGroup bind:value={tile} variant="outline" size="sm" inset class="w-full">
         <ToggleOption value="squarify">Squarify</ToggleOption>
@@ -282,6 +296,18 @@
         <ToggleOption value="sliceDice">Slice / Dice</ToggleOption>
       </ToggleGroup>
     </Field>
+    <Field label="Maintain Aspect Ratio">
+      <ToggleGroup
+        bind:value={maintainAspectRatio}
+        variant="outline"
+        size="sm"
+        inset
+        class="w-full"
+      >
+        <ToggleOption value={false}>No</ToggleOption>
+        <ToggleOption value={true}>Yes</ToggleOption>
+      </ToggleGroup>
+    </Field>
     <Field label="Color By">
       <ToggleGroup bind:value={colorBy} variant="outline" size="sm" inset class="w-full">
         <ToggleOption value="children">Children</ToggleOption>
@@ -330,6 +356,7 @@
         <Treemap
           hierarchy={groupedHierarchy}
           {tile}
+          {maintainAspectRatio}
           {paddingOuter}
           {paddingInner}
           {paddingTop}
@@ -412,7 +439,7 @@
 <h3>Zoomable</h3>
 
 <div class="grid grid-flow-col gap-4 mb-4">
-  <div class="grid grid-cols-[6fr_3fr] gap-2">
+  <div class="grid grid-cols-[6fr_1fr_3fr] gap-2">
     <Field label="Tile">
       <ToggleGroup bind:value={tile} variant="outline" size="sm" inset class="w-full">
         <ToggleOption value="squarify">Squarify</ToggleOption>
@@ -423,6 +450,18 @@
         <ToggleOption value="sliceDice">Slice / Dice</ToggleOption>
       </ToggleGroup>
     </Field>
+    <Field label="Maintain Aspect Ratio">
+      <ToggleGroup
+        bind:value={maintainAspectRatio}
+        variant="outline"
+        size="sm"
+        inset
+        class="w-full"
+      >
+        <ToggleOption value={false}>No</ToggleOption>
+        <ToggleOption value={true}>Yes</ToggleOption>
+      </ToggleGroup>
+    </Field>
     <Field label="Color By">
       <ToggleGroup bind:value={colorBy} variant="outline" size="sm" inset class="w-full">
         <ToggleOption value="children">Children</ToggleOption>
@@ -452,16 +491,12 @@
     <Chart>
       <Svg>
         <Bounds
-          domain={selectedZoomable}
+          domain={asAny(selectedZoomable)}
           motion={{ type: 'tween', duration: 800, easing: cubicOut }}
         >
           {#snippet children({ xScale, yScale })}
             <ChartClipPath>
-              <Treemap
-                hierarchy={complexDataHierarchy.copy()}
-                {tile}
-                bind:selected={selectedZoomable}
-              >
+              <Treemap hierarchy={complexDataHierarchy} {tile} {maintainAspectRatio}>
                 {#snippet children({ nodes })}
                   {#each nodes as node}
                     <Group
@@ -473,7 +508,7 @@
                       {@const nodeHeight = yScale(node.y1) - yScale(node.y0)}
                       <RectClipPath width={nodeWidth} height={nodeHeight}>
                         {@const nodeColor = getNodeColor(node, colorBy)}
-                        {#if isNodeVisible(node, selectedZoomable)}
+                        {#if isNodeVisible( node, nodes.find((n) => n.data.name === selectedZoomable.data.name && n.depth === selectedZoomable.depth) )}
                           <g transition:fade={{ duration: 600 }}>
                             <Rect
                               width={nodeWidth}