From 17b70c16d9e261b1937008e0c44941cec3893d08 Mon Sep 17 00:00:00 2001
From: "ai@codebar" <ai@codebar.ch>
Date: Sat, 8 Aug 2026 02:19:31 +0200
Subject: [PATCH] =?UTF-8?q?v1.16.1=20=E2=80=94=20three=20components=20cach?=
 =?UTF-8?q?ed=20a=20slot=20check=20that=20Vue=20never=20invalidates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A Card with no title and no description rendered no header at all when its only
slot arrived after mount — so a page gating its Save button behind
`<template v-if="..." #actions>` had no Save button, ever. Reproduced as a story
before anything was changed: the card renders, the body button's label updates
proving the child DID re-render, and there is no <header> element.

The cause is that the object useSlots() returns is not reactive. Vue builds it
once with createInternalObject() and updateSlots mutates it in place, so a
computed over slots.* is evaluated at mount and cached forever.

THE TRAP IN THE OBVIOUS FIX. Switching the computed from `slots` to `$slots`
would have shipped the same bug. Vue does track $slots — there is a
track(instance, 'get', '$slots') in the public instance proxy. But there is
exactly one matching trigger in @vue/runtime-core 3.5.40, inside updateSlots,
behind `if (isHmrUpdating)`. A computed over slots is invalidated by hot module
replacement and by nothing else: it recomputes while you edit the file, which is
precisely when you would be watching it, and never in a built app.

So the condition moves into the template and useSlots() is dropped from the
component entirely — there is no `slots` identifier left in setup scope for a
future computed to close over. This is also the house pattern: 14 other
components already read $slots in their templates, so the fix deletes an outlier
rather than inventing a rule.

THE SWEEP FOUND TWO MORE, ONE OF THEM LIVE.

MetricGrid was visibly wrong today. fillerCount was a computed over
slots.default().length — vnodes, not tiles. Measured: a v-for collapses its whole
run into one Fragment, so three metrics read as ONE and a nearly-full row was
padded with three fillers and drawn quarter-full; a v-if leaves a Comment
placeholder, so three metrics plus a hidden fourth read as FOUR and the filler
that was needed never appeared. Both are how a real application writes a metric
row. It now flattens fragments and drops comment and whitespace placeholders, in
the render. Literal-children call sites are byte-identical.

DataTable was latent: hasRowClick was a computed over instance.vnode.props, and
instance.vnode is replaced on every parent render. Probing the reachable case
turned up something worth knowing — Vue's hasPropsChanged deliberately skips
declared emit listeners, so binding row-click makes the listener live while the
component is never asked to redraw. The affordance now self-corrects at the next
render for any reason; before, never.

Not instances, but converted anyway to remove the setup-scope binding:
FormActions, PageHeading and Table already read slots in their templates.
useAttrs() looks identical but Vue backs attrs with a real track/trigger pair
that fires on every props update — that asymmetry is most of why the slots
version survived this long.

Found and deliberately left, because the fix changes a signature and is not a
patch: DataTable unwraps comparators.value into useSort() at setup, so a table
that swaps columns after mount sorts with the old comparators.

Patch, correctly: no prop, slot, token or class added, and every call site
rendering correctly today renders byte-identically. The closest thing to a
behaviour change is MetricGrid's dynamic grids, which is wrong output becoming
right.

Gates: typecheck clean, lint 0 errors (7 pre-existing warnings, none in touched
files), build incl. verify:externals and verify:dev-warnings, build-storybook,
test:ci 242 passed. Each of the three fixes has a story that fails on the
previous code and passes on this one, verified by reverting each component.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                                  | 135 ++++++++++++++++++
 package.json                                  |   2 +-
 src/components/molecules/Card.stories.ts      |  73 ++++++++++
 src/components/molecules/Card.vue             |  21 +--
 src/components/molecules/FormActions.vue      |   6 +-
 src/components/molecules/PageHeading.vue      |   7 +-
 src/components/organisms/DataTable.stories.ts |  55 ++++++-
 src/components/organisms/DataTable.vue        |  14 +-
 .../organisms/MetricGrid.stories.ts           |  73 ++++++++++
 src/components/organisms/MetricGrid.vue       |  39 ++++-
 src/components/organisms/Table.vue            |   5 +-
 11 files changed, 398 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ac13a0..eb72cae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,141 @@ All notable changes to `@codebar-ag/storybook`.
 The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
 this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v1.16.1
+
+One bug, found in a consuming app, and the two more the sweep for its shape
+turned up. Nothing gains a prop, a slot, a token or a class; every call site
+that renders correctly today renders byte-identically after this.
+
+### Fixed
+
+- **`Card` rendered no header — and so no `#actions` — when its only slot
+  arrived after mount.** A card with neither `title` nor `description`, whose
+  `#actions` template sits behind a `v-if`, never grew a header when the
+  condition turned true. The consuming symptom was a page on which the Save
+  button did not exist: the form could only be submitted by pressing Enter in
+  its single text input, and implicit submission is the only reason that page
+  was not a hard block. Card's own inner `v-if="$slots.actions"` was correct the
+  whole time and simply unreachable, which is why reading the component does not
+  find this and only trying it does.
+
+  The header was decided by a `computed`:
+
+  ```js
+  const hasHeader = computed(
+      () => props.title !== null || props.description !== null || !!slots.title || !!slots.actions,
+  );
+  ```
+
+  **`useSlots()` does not return a reactive object.** Vue builds it once
+  (`instance.slots = createInternalObject()`) and `updateSlots` **mutates that
+  same object in place** on every parent render — the identity never changes and
+  no proxy is watching, so nothing invalidates a computed over it. With no
+  `title` and no `description` the expression evaluated `false` during mount and
+  cached that for the lifetime of the card. The card *did* re-render — a
+  conditional slot makes its slots non-stable, which forces the child to update
+  — but a cached computed does not care that a render happened.
+
+  The trap has a lid on it, and that is the part worth recording. Vue does track
+  `$slots`: reading it through the public instance proxy calls
+  `track(instance, 'get', '$slots')`, and in development `useSlots()` returns a
+  proxy that does the same. Grep the matching `trigger(instance, 'set',
+  '$slots')` in `@vue/runtime-core` 3.5 and there is **exactly one**, inside
+  `updateSlots`, behind `if (isHmrUpdating)`. A computed over slots is therefore
+  invalidated by hot module replacement and by nothing else: it recomputes while
+  you edit the file — precisely when you would be looking at it — and never once
+  in a built application. Switching the computed from `slots` to `$slots` would
+  have looked like the fix and would have shipped the same bug.
+
+  There is no version of this that is safe to cache, so the header is decided in
+  the render and only in the render:
+
+  ```html
+  <header v-if="title !== null || description !== null || $slots.title || $slots.actions">
+  ```
+
+  A template *is* a render function, so the read happens once per render, after
+  `updateSlots` has finished mutating the object — the only moment at which the
+  answer is knowable. It is also what fourteen other components in this kit
+  already do (`Modal`, `Drawer`, `Toggle`, `AppShell`, `Navbar`, …), so the fix
+  deletes an outlier rather than introducing a mechanism.
+
+  Two alternatives were rejected. **Mirroring the slot names into a `ref` from
+  an `onBeforeUpdate` hook** does work and keeps a computed — but it makes a
+  second copy of state Vue already owns, correct only for as long as the hook
+  stays wired to it, in exchange for caching a four-term boolean. **Rendering
+  the `<header>` unconditionally** and letting its contents collapse is the one
+  option here that would be breaking: every plain card would gain an empty
+  padded strip and a bottom border it does not have today.
+
+- **`MetricGrid` counted its caller's syntax instead of its caller's tiles.**
+  The filler tiles that stop the hairline-gap background showing through as a
+  stray solid block were sized from `slots.default().length` — the length of a
+  vnode array, which is not the number of tiles in either shape a real caller
+  writes. `v-for` collapses its whole run into a single Fragment, so **three
+  metrics read as one** and a nearly full row was padded with three fillers and
+  drawn as a quarter-full one. `v-if` leaves a Comment placeholder behind when
+  false, so **three metrics plus a hidden fourth read as four** and the filler
+  the gap actually needed was never drawn. Both counts are now taken after
+  flattening fragments and dropping comment and whitespace placeholders, and —
+  same rule as `Card` — in the render rather than in a `computed`, so a grid
+  whose tile count changes re-pads instead of keeping its first answer.
+
+  Grids written with literal children, which is every story and every static
+  call site, are unaffected: they counted correctly before and count correctly
+  now.
+
+- **`DataTable`'s `cursor-pointer` affordance answered for the vnode that
+  existed at mount.** `hasRowClick` was a `computed` over
+  `instance.vnode.props.onRowClick`, and `instance.vnode` is *replaced* on every
+  parent render while `instance` is a plain object — the same defect against a
+  different dependency. It is read per render now.
+
+  The honest scope, because the fix is real but smaller than it looks: written
+  as `@row-click` in an SFC the compiler emits a cached wrapper function, so the
+  key is always present and the affordance was never wrong for that spelling. It
+  is reachable by binding the handler as a value
+  (`:onRowClick="editable ? open : undefined"`), and even then only partly,
+  because Vue's `hasPropsChanged` deliberately skips declared emit listeners:
+  binding `row-click` makes the listener live without asking this component to
+  redraw at all. So the affordance now corrects itself at the next render for
+  any other reason — which in a table is constant — where before it never
+  corrected itself.
+
+### Changed
+
+- **`FormActions`, `PageHeading` and `Table` read `$slots` instead of a
+  `useSlots()` binding.** Behaviour is identical — the same property on the same
+  object, read at the same moment — and this is housekeeping with a point: the
+  hazard was never the read, it is having a `slots` identifier sitting in setup
+  scope where the next `computed` can close over it. `MetricGrid` is now the
+  only component that calls `useSlots()`, because it needs to invoke the slot
+  function rather than test for it.
+
+### Notes
+
+- Each of the three is pinned by a story whose play function fails on the
+  previous code and passes on this one: a slot arriving and leaving after mount,
+  a tile count from `v-for` and from `v-if`, a handler bound late. The suite is
+  242 tests, up from 237.
+- The `Card` defect predates the `#title` slot. The computed has read
+  `slots.actions` since the initial build-out; v1.14.0 only added a second slot
+  to an already-broken expression. Its note there — "the header renders whenever
+  a `title`, `description`, `#title` or `#actions` is present" — was true only
+  of slots present at mount, and is true as written from this release.
+- Adjacent, found by the same sweep and deliberately not changed: `DataTable`
+  passes `comparators.value` into `useSort()`, unwrapping a computed at setup
+  and freezing the per-column `sortFn` map, so a table that swaps its `columns`
+  after mount sorts with the old comparators. Same family — a value read once
+  where it should be read on demand — but the fix is a change to `useSort`'s
+  signature, and that belongs in a release that can look at the composable's API
+  rather than in a patch.
+- `useAttrs()` is **not** an instance of this, which is most of why the slots
+  version survived so long. It looks identical, but Vue backs attrs with a real
+  `track`/`trigger` pair that fires on every props update, so the computeds in
+  `useRootAttrs` and `usePasswordManagerAttrs` are correctly reactive. Slots are
+  the exception, not the rule.
+
 ## v1.16.0
 
 The non-colour channel v1.15.0 said would be needed. Additive and non-breaking:
diff --git a/package.json b/package.json
index 92b5470..288b0bf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codebar-ag/storybook",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "description": "codebar-ag DocuHub — shared Vue 3 + Tailwind v4 design-system atoms and tokens, documented in Storybook.",
   "license": "MIT",
   "author": "codebar Solutions AG",
diff --git a/src/components/molecules/Card.stories.ts b/src/components/molecules/Card.stories.ts
index e210891..2c91ad5 100644
--- a/src/components/molecules/Card.stories.ts
+++ b/src/components/molecules/Card.stories.ts
@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { ref } from 'vue';
 import Card from './Card.vue';
 import Button from '../atoms/Button.vue';
 import StatusBadge from '../atoms/StatusBadge.vue';
@@ -49,6 +51,77 @@ export const TitleSlot: Story = {
     }),
 };
 
+// The header's existence is decided per render, not once at mount. A card with
+// no `title` and no `description` starts with no header at all; the moment a
+// conditional `#actions` template turns on, the header — and the actions it
+// contains — has to appear, and has to go again when it turns off. This is the
+// shape a form card takes: the Save button only exists once the form is
+// complete enough to submit, and the card carrying it has no title.
+export const ActionsAppearingAfterMount: Story = {
+    render: () => ({
+        components: { Card, Button },
+        setup: () => ({ ready: ref(false) }),
+        template: `<Card>
+            <template
+                v-if="ready"
+                #actions
+            ><Button size="sm">Save</Button></template>
+            <Button
+                size="sm"
+                variant="secondary"
+                @click="ready = !ready"
+            >{{ ready ? 'Reset' : 'Complete form' }}</Button>
+        </Card>`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.queryByRole('button', { name: 'Save' })).not.toBeInTheDocument();
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Complete form' }));
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Save' })).toBeVisible());
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Reset' }));
+        await waitFor(() =>
+            expect(canvas.queryByRole('button', { name: 'Save' })).not.toBeInTheDocument(),
+        );
+    },
+};
+
+// Same rule for `#title`: a card that gains a title after mount gains a header.
+export const TitleAppearingAfterMount: Story = {
+    render: () => ({
+        components: { Card, Button },
+        setup: () => ({ loaded: ref(false) }),
+        template: `<Card>
+            <template
+                v-if="loaded"
+                #title
+            >Nightly sync</template>
+            <Button
+                size="sm"
+                variant="secondary"
+                @click="loaded = !loaded"
+            >{{ loaded ? 'Unload' : 'Load' }}</Button>
+        </Card>`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.queryByRole('heading', { name: 'Nightly sync' })).not.toBeInTheDocument();
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Load' }));
+        await waitFor(() =>
+            expect(canvas.getByRole('heading', { name: 'Nightly sync' })).toBeVisible(),
+        );
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Unload' }));
+        await waitFor(() =>
+            expect(canvas.queryByRole('heading', { name: 'Nightly sync' })).not.toBeInTheDocument(),
+        );
+    },
+};
+
 export const Small: Story = {
     render: () => ({
         components: { Card },
diff --git a/src/components/molecules/Card.vue b/src/components/molecules/Card.vue
index b4876df..873886e 100644
--- a/src/components/molecules/Card.vue
+++ b/src/components/molecules/Card.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useSlots } from 'vue';
+import { computed } from 'vue';
 import { cx } from '../../helpers/cx';
 import { useRootAttrs } from '../../composables/useRootAttrs';
 import { pick } from '../../helpers/pick';
@@ -22,7 +22,6 @@ const props = withDefaults(
     { title: null, description: null, padded: true, variant: 'default', hoverable: false, size: 'md' },
 );
 
-const slots = useSlots();
 const { rootAttrs, classAttr } = useRootAttrs();
 
 const variants: Record<string, string> = { default: '', danger: 'border-danger-line/60' };
@@ -56,10 +55,6 @@ const rootClass = computed(() =>
         classAttr.value,
     ),
 );
-
-const hasHeader = computed(
-    () => props.title !== null || props.description !== null || !!slots.title || !!slots.actions,
-);
 </script>
 
 <template>
@@ -67,8 +62,14 @@ const hasHeader = computed(
     :class="rootClass"
     v-bind="rootAttrs"
   >
+    <!-- Read `$slots` here, in the render, and never through a `computed`. The
+         object `useSlots()` returns is built once and mutated in place, so it
+         is not a reactive dependency: a computed over it caches whatever was
+         true at mount. A card with no `title` and no `description` would then
+         cache "no header" forever, and a `#actions` that arrived later — the
+         normal shape for a form's Save button — could never appear. -->
     <header
-      v-if="hasHeader"
+      v-if="title !== null || description !== null || $slots.title || $slots.actions"
       :class="['flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4 border-b border-line', headerPadding[size]]"
     >
       <div class="min-w-0">
@@ -79,7 +80,7 @@ const hasHeader = computed(
              state of the thing the card is about — instead of being exiled to
              `#actions` on the far side of the header. -->
         <h2
-          v-if="title !== null || slots.title"
+          v-if="title !== null || $slots.title"
           :class="['flex flex-wrap items-center gap-x-3 gap-y-1 font-semibold text-ink', titleSize[size]]"
         >
           <slot name="title">
@@ -94,7 +95,7 @@ const hasHeader = computed(
         </p>
       </div>
       <div
-        v-if="slots.actions"
+        v-if="$slots.actions"
         class="flex flex-wrap items-center gap-2 sm:shrink-0"
       >
         <slot name="actions" />
@@ -106,7 +107,7 @@ const hasHeader = computed(
     </div>
 
     <footer
-      v-if="slots.footer"
+      v-if="$slots.footer"
       :class="[footerPadding[size], 'bg-surface-2 border-t border-line text-xs text-muted rounded-b-surface']"
     >
       <slot name="footer" />
diff --git a/src/components/molecules/FormActions.vue b/src/components/molecules/FormActions.vue
index 800227d..5582863 100644
--- a/src/components/molecules/FormActions.vue
+++ b/src/components/molecules/FormActions.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useSlots } from 'vue';
+import { computed } from 'vue';
 import { pick } from '../../helpers/pick';
 
 // Form-footer action row. `between` puts the secondary action (Cancel) on the
@@ -10,8 +10,6 @@ const props = withDefaults(
     { align: 'between' },
 );
 
-const slots = useSlots();
-
 const alignments: Record<string, string> = {
     between: 'justify-between',
     end: 'justify-end',
@@ -24,7 +22,7 @@ const alignment = computed(() => pick(alignments, props.align, 'between', 'FormA
 <template>
   <div :class="['flex items-center gap-2 pt-2', alignment]">
     <slot
-      v-if="slots.secondary"
+      v-if="$slots.secondary"
       name="secondary"
     />
     <slot />
diff --git a/src/components/molecules/PageHeading.vue b/src/components/molecules/PageHeading.vue
index c70bd31..02deec9 100644
--- a/src/components/molecules/PageHeading.vue
+++ b/src/components/molecules/PageHeading.vue
@@ -11,7 +11,7 @@
 // consuming app was otherwise re-pairing them by hand on every nested page.
 // Pass `breadcrumbAs` (e.g. Inertia's `Link`) for SPA navigation, exactly as
 // Breadcrumbs' own `as` prop expects.
-import { computed, useSlots } from 'vue';
+import { computed } from 'vue';
 import { cx } from '../../helpers/cx';
 import { useRootAttrs } from '../../composables/useRootAttrs';
 import Breadcrumbs, { type BreadcrumbItem } from './Breadcrumbs.vue';
@@ -27,7 +27,6 @@ withDefaults(
     { eyebrow: null, breadcrumbs: () => [], breadcrumbAs: 'a' },
 );
 
-const slots = useSlots();
 const { rootAttrs, classAttr } = useRootAttrs();
 
 const classes = computed(() => cx('text-xl font-semibold text-ink', classAttr.value));
@@ -61,14 +60,14 @@ const classes = computed(() => cx('text-xl font-semibold text-ink', classAttr.va
           <slot />
         </h1>
         <p
-          v-if="slots.description"
+          v-if="$slots.description"
           class="mt-1 text-sm text-muted"
         >
           <slot name="description" />
         </p>
       </div>
       <div
-        v-if="slots.actions"
+        v-if="$slots.actions"
         class="flex flex-wrap items-center gap-2 shrink-0"
       >
         <slot name="actions" />
diff --git a/src/components/organisms/DataTable.stories.ts b/src/components/organisms/DataTable.stories.ts
index 736f780..9aae360 100644
--- a/src/components/organisms/DataTable.stories.ts
+++ b/src/components/organisms/DataTable.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { expect, fn, userEvent, within } from 'storybook/test';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import { ref } from 'vue';
 import DataTable from './DataTable.vue';
 import Dropdown from '../molecules/Dropdown.vue';
@@ -322,3 +322,56 @@ export const RowClick: Story = {
             </div>`,
     }),
 };
+
+// The `cursor-pointer` affordance tracks whether a `row-click` handler is
+// actually bound — a fact about the CURRENT incoming vnode, not the one that
+// existed at mount. A caller may only make rows openable once the user has
+// permission, or once a `v-bind` object gains the handler.
+//
+// The intermediate sort click is not padding, it is the contract. Vue's
+// `hasPropsChanged` deliberately ignores declared emit listeners, so binding
+// `row-click` does not on its own cause this component to re-render — the
+// listener goes live (the click below fires it) while nothing asks the table
+// to redraw. Read per render, the affordance therefore corrects itself at the
+// next render for any other reason, which in a real table is immediate and
+// constant. Cached in a `computed`, it never corrects itself at all.
+const rowClickProbe = fn();
+
+export const RowClickBoundAfterMount: Story = {
+    render: () => ({
+        components: { DataTable },
+        setup: () => ({
+            documents,
+            columns,
+            editable: ref(false),
+            onRowClick: rowClickProbe,
+        }),
+        template: `
+            <div>
+                <button
+                    class="mb-3 text-sm underline"
+                    @click="editable = !editable"
+                >{{ editable ? 'Lock rows' : 'Unlock rows' }}</button>
+                <DataTable
+                    :columns="columns"
+                    :rows="documents"
+                    row-key="id"
+                    :onRowClick="editable ? onRowClick : undefined"
+                />
+            </div>`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const firstRow = () => canvasElement.querySelectorAll('tbody tr')[0] as HTMLElement;
+
+        await expect(firstRow()).not.toHaveClass(/cursor-pointer/);
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Unlock rows' }));
+        await userEvent.click(canvas.getByRole('button', { name: /Document/ }));
+        await waitFor(() => expect(firstRow()).toHaveClass(/cursor-pointer/));
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Lock rows' }));
+        await userEvent.click(canvas.getByRole('button', { name: /Document/ }));
+        await waitFor(() => expect(firstRow()).not.toHaveClass(/cursor-pointer/));
+    },
+};
diff --git a/src/components/organisms/DataTable.vue b/src/components/organisms/DataTable.vue
index 53bee12..e404a06 100644
--- a/src/components/organisms/DataTable.vue
+++ b/src/components/organisms/DataTable.vue
@@ -73,8 +73,18 @@ const emit = defineEmits<{
 
 // `emits` listeners are stripped from $attrs, so detect a bound `row-click`
 // handler via the raw incoming vnode props instead.
+//
+// A function called from the template, deliberately NOT a `computed`:
+// `instance.vnode` is REPLACED on every parent re-render and the instance is a
+// plain object, so a computed over it answers for the vnode that existed at
+// mount and never for the current one. A caller whose handler is itself
+// conditional (`@row-click="editable ? open : undefined"`) would gain the
+// handler without gaining the affordance that says the row is clickable.
 const instance = getCurrentInstance();
-const hasRowClick = computed(() => Boolean(instance?.vnode.props?.onRowClick));
+
+function hasRowClick(): boolean {
+    return Boolean(instance?.vnode.props?.onRowClick);
+}
 
 function keyOf(row: T): RowKey {
     return typeof props.rowKey === 'function'
@@ -302,7 +312,7 @@ function onRowClick(row: T, event: MouseEvent): void {
               <tr
                 :class="[
                   isSelected(keyOf(row)) ? 'bg-surface-2/60' : 'hover:bg-surface-2/40',
-                  hasRowClick ? 'cursor-pointer' : '',
+                  hasRowClick() ? 'cursor-pointer' : '',
                 ]"
                 class="border-t border-line transition first:border-t-0"
                 @click="onRowClick(row, $event)"
diff --git a/src/components/organisms/MetricGrid.stories.ts b/src/components/organisms/MetricGrid.stories.ts
index d5f09b8..243cf9e 100644
--- a/src/components/organisms/MetricGrid.stories.ts
+++ b/src/components/organisms/MetricGrid.stories.ts
@@ -1,7 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { ref } from 'vue';
 import MetricGrid from './MetricGrid.vue';
 import Metric from '../atoms/Metric.vue';
 
+// The filler tiles are `aria-hidden` and carry no text, so the count is the
+// only thing to assert on and there is nothing else in the grid that matches.
+const fillerCount = (canvasElement: HTMLElement): number =>
+    canvasElement.querySelectorAll('[aria-hidden="true"]').length;
+
 const meta: Meta<typeof MetricGrid> = {
     title: 'Organisms/MetricGrid',
     component: MetricGrid,
@@ -51,3 +58,69 @@ export const TwoColumns: Story = {
             </MetricGrid>`,
     }),
 };
+
+// A caller with a variable number of metrics writes `v-for`, which hands the
+// grid a single Fragment holding the whole run rather than one vnode per tile.
+// Counting the slot's vnodes therefore read three tiles as one and padded the
+// row with three fillers — a 3/4-full grid drawn as a 1/4-full one.
+export const TilesFromVFor: Story = {
+    render: () => ({
+        components: { MetricGrid, Metric },
+        setup: () => ({ metrics: ref([
+            { label: 'Calls (30d)', value: '12,408' },
+            { label: 'Documents', value: '1,902' },
+            { label: 'Seats', value: '8' },
+        ]) }),
+        template: `
+            <MetricGrid class="max-w-xl">
+                <Metric
+                    v-for="metric in metrics"
+                    :key="metric.label"
+                    :label="metric.label"
+                    :value="metric.value"
+                />
+            </MetricGrid>`,
+    }),
+    play: async ({ canvasElement }) => {
+        await expect(fillerCount(canvasElement)).toBe(1);
+    },
+};
+
+// A tile behind `v-if` leaves a Comment placeholder in the slot when it is
+// false, so the row counted four tiles while three rendered — and the filler
+// the gap needed was never drawn. The count also has to survive the toggle:
+// it is read per render rather than cached from mount.
+export const TileCountChangingAfterMount: Story = {
+    render: () => ({
+        components: { MetricGrid, Metric },
+        setup: () => ({ showFourth: ref(false) }),
+        template: `
+            <div class="max-w-xl">
+                <button
+                    class="mb-3 text-sm underline"
+                    @click="showFourth = !showFourth"
+                >{{ showFourth ? 'Hide seats' : 'Show seats' }}</button>
+                <MetricGrid>
+                    <Metric label="Calls (30d)" value="12,408" />
+                    <Metric label="Documents" value="1,902" />
+                    <Metric label="Instances" value="3" />
+                    <Metric
+                        v-if="showFourth"
+                        label="Seats"
+                        value="8"
+                    />
+                </MetricGrid>
+            </div>`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(fillerCount(canvasElement)).toBe(1);
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Show seats' }));
+        await waitFor(() => expect(fillerCount(canvasElement)).toBe(0));
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Hide seats' }));
+        await waitFor(() => expect(fillerCount(canvasElement)).toBe(1));
+    },
+};
diff --git a/src/components/organisms/MetricGrid.vue b/src/components/organisms/MetricGrid.vue
index 9846125..ddabd98 100644
--- a/src/components/organisms/MetricGrid.vue
+++ b/src/components/organisms/MetricGrid.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useSlots } from 'vue';
+import { Comment, computed, Fragment, Text, useSlots, type VNode } from 'vue';
 
 const props = withDefaults(defineProps<{
     columns?: 1 | 2 | 3 | 4;
@@ -9,23 +9,50 @@ const props = withDefaults(defineProps<{
 
 const slots = useSlots();
 
+// A slot's vnode list is not a tile list. `v-for` collapses its whole run into
+// a single Fragment, `v-if` leaves a Comment placeholder behind when it is
+// false, and whitespace between children arrives as empty Text — so counting
+// the array counts the caller's *syntax* rather than the caller's tiles. Both
+// of the shapes a real caller writes were miscounted: three tiles from a
+// `v-for` read as one, and three tiles with a fourth behind `v-if` read as
+// four. Flatten fragments, drop the placeholders, and count what renders.
+function countTiles(nodes: VNode[]): number {
+    return nodes.reduce((total, node) => {
+        if (node.type === Fragment) {
+            return total + countTiles((node.children ?? []) as VNode[]);
+        }
+
+        if (node.type === Comment || (node.type === Text && String(node.children).trim() === '')) {
+            return total;
+        }
+
+        return total + 1;
+    }, 0);
+}
+
 // A gapped grid of Metric tiles. The hairline gap (gap-px on bg-line) gives the
 // tiles their dividers. When the tile count doesn't divide evenly into
 // `columns`, the trailing grid cells have no Metric to fill them, so the
 // container's gap background (bg-line) shows through as a stray solid block.
-// Pad the row out with blank, same-background filler tiles instead. Computed
+// Pad the row out with blank, same-background filler tiles instead. Counted
 // against `columns` (not the responsive `sm:` breakpoint's smaller count) so
 // the total is a multiple of both — e.g. a 4-column total is always also a
 // clean multiple of the 2-column mobile layout.
-const fillerCount = computed(() => {
-    const tileCount = (slots.default?.() ?? []).length;
+//
+// A function called from the template, deliberately NOT a `computed`: the
+// object `useSlots()` returns is built once and mutated in place, so it is not
+// a reactive dependency and a computed over it caches the tile count from
+// mount. Reading it in the render re-counts whenever the caller re-renders,
+// which is the only moment the tiles can have changed.
+function fillerCount(): number {
+    const tileCount = countTiles(slots.default?.() ?? []);
 
     if (tileCount === 0 || props.columns === 1) {
         return 0;
     }
 
     return (props.columns - (tileCount % props.columns)) % props.columns;
-});
+}
 
 const gridClass = computed(() => {
     if (props.columns === 1) {
@@ -51,7 +78,7 @@ const gridClass = computed(() => {
   >
     <slot />
     <div
-      v-for="n in fillerCount"
+      v-for="n in fillerCount()"
       :key="`filler-${n}`"
       class="bg-surface"
       aria-hidden="true"
diff --git a/src/components/organisms/Table.vue b/src/components/organisms/Table.vue
index 64fdc18..3347b63 100644
--- a/src/components/organisms/Table.vue
+++ b/src/components/organisms/Table.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import { useSlots } from 'vue';
-
 // Semantic data table for true multi-column data grids. For simple stacked
 // lists prefer ListRow. Slots: `head` (a series of <Th>), default (body <TableRow>s).
-const slots = useSlots();
 </script>
 
 <template>
   <div class="overflow-x-auto">
     <table class="w-full text-left text-sm">
-      <thead v-if="slots.head">
+      <thead v-if="$slots.head">
         <tr
           class="border-b border-line text-2xs uppercase tracking-wider text-dim [&>th]:px-4 [&>th]:py-2.5 [&>th]:font-medium"
         >