@charcuterie/ui 3.28.1 → 3.29.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAOH,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAiC,CAAA;AAE9D,OAAO,EACL,aAAa,EACb,wBAAwB,EACxB,0BAA0B,EAC1B,iCAAiC,EACjC,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,iCAAiC,CAAA;AAKxC,OAAO,EACL,6BAA6B,EAC7B,gBAAgB,EAChB,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,sCAAsC,CAAA;AAK7C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAKzC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAE5C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAGzC,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA+B,CAAA;AAK3D,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AASzC,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,EACnB,cAAc,GACf,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAMxD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAElD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAKnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA2C,CAAA;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAKlD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EACL,4BAA4B,EAC5B,yBAAyB,EACzB,uBAAuB,EACvB,4BAA4B,GAC7B,MAAM,wBAAwB,CAAA;AAE/B,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAO3B,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAMlE,OAAO,EACL,2BAA2B,EAC3B,cAAc,GACf,MAAM,gCAAgC,CAAA;AAMvC,OAAO,EACL,OAAO,EACP,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,yBAAyB,EACzB,UAAU,EACV,eAAe,EACf,YAAY,EACZ,SAAS,GACV,MAAM,2BAA2B,CAAA;AAKlC,OAAO,EACL,8BAA8B,EAC9B,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,2CAA2C,CAAA;AAKlD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAK5C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAKlD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAwB,CAAA;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAiC,CAAA;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAKlD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAK/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAKnF,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAKtC,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAqC,CAAA;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AAOtE,OAAO,EACL,WAAW,EACX,eAAe,GAChB,MAAM,mCAAmC,CAAA;AAE1C,OAAO,EACL,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAiC,CAAA;AAK9D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAK7D,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAKzC,OAAO,EAAE,GAAG,EAAE,MAAM,cAAe,CAAA;AAKnC,OAAO,EACL,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,mBAAmB,CAAA;AAO1B,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAKpD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAK5C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAK/C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA+B,CAAA;AAE3D,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,gCAAgC,CAAA;AAKvC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAiC,CAAA;AAK9D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAMxD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAMtC,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA+B,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AACxD,OAAO,EACL,kBAAkB,EAClB,aAAa,GACd,MAAM,oCAAqC,CAAA;AAK5C,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA+B,CAAA;AAK3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAyC,CAAA;AAY1E,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAM5C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAKzC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAKlD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAK5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAEnF,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAO/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAM/C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAO1B,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAKtC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAElD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAKzC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAyB,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AAOpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAuC,CAAA;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAqC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "3.28.1",
+  "version": "3.29.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",

package/src/SearchInput/SearchInput.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta } from "@storybook/addon-docs/blocks";
+import * as Stories from "./SearchInput.stories";
+
+<Meta of={Stories} />
+
+# SearchInput
+
+The search field with a labelled icon button for clearing its value. The app supplies the
+glyph and owns the query. The component owns the field skin, the full control-sized target,
+the native cancel-widget suppression, and focus return after a clear.
+
+Use `Field` for a visible label, or pass `aria-label` when the surrounding layout already
+names the search.
+
+<Canvas of={Stories.Default} />

package/src/SearchInput/SearchInput.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+
+import { controlSizeArgType } from "../argTypes.storyHelpers.ts"
+import {
+  ContainerBoard,
+  StoryCell,
+  StoryGrid,
+  StorySection,
+} from "../board.storyHelpers.tsx"
+import { Field } from "../Field/Field.tsx"
+import { SearchInput } from "./SearchInput.tsx"
+
+const ClearIcon = () => (
+  <svg aria-hidden="true" fill="none" viewBox="0 0 24 24">
+    <path
+      d="m6 6 12 12M18 6 6 18"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth="2"
+    />
+  </svg>
+)
+
+const ControlledSearch = ({
+  size = "md",
+}: {
+  size?: "sm" | "md" | "lg"
+}) => {
+  const [value, setValue] = useState("filter paper")
+
+  return (
+    <Field label="Search inventory">
+      <SearchInput
+        clearIcon={<ClearIcon />}
+        onChange={(event) => setValue(event.target.value)}
+        onClear={() => setValue("")}
+        placeholder="Name or location…"
+        size={size}
+        value={value}
+      />
+    </Field>
+  )
+}
+
+const meta = {
+  title: "Components/Controls/SearchInput",
+  component: SearchInput,
+  parameters: { layout: "padded" },
+  argTypes: { size: controlSizeArgType },
+  args: {
+    clearIcon: <ClearIcon />,
+    onClear: () => undefined,
+    placeholder: "Name or location…",
+    readOnly: true,
+    size: "md",
+    value: "filter paper",
+  },
+} satisfies Meta<typeof SearchInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <ControlledSearch />,
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <StorySection title="The field and its clear button share one density-aware control size.">
+      <StoryGrid columns={3}>
+        {(["sm", "md", "lg"] as const).map((size) => (
+          <StoryCell key={size} label={size}>
+            <ControlledSearch size={size} />
+          </StoryCell>
+        ))}
+      </StoryGrid>
+    </StorySection>
+  ),
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <StoryGrid columns={2}>
+      <StoryCell label="empty">
+        <SearchInput
+          aria-label="Empty search"
+          clearIcon={<ClearIcon />}
+          onClear={() => undefined}
+          value=""
+        />
+      </StoryCell>
+      <StoryCell label="filled">
+        <SearchInput
+          aria-label="Filled search"
+          clearIcon={<ClearIcon />}
+          onClear={() => undefined}
+          readOnly
+          value="filter paper"
+        />
+      </StoryCell>
+      <StoryCell label="disabled">
+        <SearchInput
+          aria-label="Disabled search"
+          clearIcon={<ClearIcon />}
+          disabled
+          onClear={() => undefined}
+          readOnly
+          value="filter paper"
+        />
+      </StoryCell>
+      <StoryCell label="invalid">
+        <SearchInput
+          aria-label="Invalid search"
+          aria-invalid="true"
+          clearIcon={<ClearIcon />}
+          onClear={() => undefined}
+          readOnly
+          value="filter paper"
+        />
+      </StoryCell>
+    </StoryGrid>
+  ),
+}
+
+export const Responsive: Story = {
+  render: () => (
+    <ContainerBoard>
+      <ControlledSearch />
+    </ContainerBoard>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => <ControlledSearch />,
+}

package/src/SearchInput/SearchInput.test.tsx

@@ -0,0 +1,28 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent } from "storybook/test"
+import { test } from "vitest"
+
+import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
+import { mountStory } from "../mountStory.testHelpers.ts"
+import { expectAgentDrivable } from "../testing/index.ts"
+import * as stories from "./SearchInput.stories.tsx"
+
+const { Interactive } = composeStories(stories)
+
+test("the clear affordance is a labelled button and returns focus", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Interactive)
+  const input = expectAgentDrivable(canvas, {
+    name: "Search inventory",
+    role: "searchbox",
+  })
+  const clear = expectAgentDrivable(canvas, {
+    name: "Clear search",
+    role: "button",
+  })
+
+  await userEvent.click(clear)
+  await expect(input).toHaveValue("")
+  await expect(input).toHaveFocus()
+  await expectNoAxeViolations(canvasElement)
+})

package/src/SearchInput/SearchInput.tsx

@@ -0,0 +1,105 @@
+import type { ControlSize } from "@charcuterie/tokens"
+import {
+  type ComponentPropsWithRef,
+  type ReactNode,
+  useRef,
+} from "react"
+
+import { IconButton } from "../IconButton/IconButton.tsx"
+import {
+  DISABLED_CLASS,
+  FOCUS_RING_CLASS,
+} from "../intentStyles.ts"
+import { toClassName } from "../toClassName.ts"
+
+const INPUT_SIZE_CLASS: Record<ControlSize, string> = {
+  sm: "h-(--control-height-sm) ps-(--control-padding-inline-sm) pe-(--control-height-sm) text-sm",
+  md: "h-(--control-height-md) ps-(--control-padding-inline-md) pe-(--control-height-md) text-md",
+  lg: "h-(--control-height-lg) ps-(--control-padding-inline-lg) pe-(--control-height-lg) text-lg",
+}
+
+export type SearchInputProps = Omit<
+  ComponentPropsWithRef<"input">,
+  "size" | "type"
+> & {
+  /** The app-owned glyph inside the clear button. */
+  clearIcon: ReactNode
+  clearLabel?: string
+  /** Override value-derived visibility for an uncontrolled input. */
+  isClearVisible?: boolean
+  onClear: () => void
+  size?: ControlSize
+}
+
+/**
+ * A search field whose clear affordance is a real, labelled icon
+ * button. The native search cancel widget is suppressed because it
+ * is platform-painted, cannot use the token system, and provides a
+ * much smaller pointer target than the control beside it.
+ *
+ * The app supplies the icon and owns the value. `SearchInput` owns
+ * the shape, focus return, accessible button name, and target size.
+ */
+export const SearchInput = ({
+  className,
+  clearIcon,
+  clearLabel = "Clear search",
+  defaultValue,
+  isClearVisible,
+  onClear,
+  ref,
+  size = "md",
+  value,
+  ...inputProps
+}: SearchInputProps): ReactNode => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const hasValue =
+    isClearVisible ??
+    String(value ?? defaultValue ?? "").length > 0
+
+  const setInputRef = (node: HTMLInputElement | null) => {
+    inputRef.current = node
+
+    if (typeof ref === "function") ref(node)
+    else if (ref) ref.current = node
+  }
+
+  return (
+    <span
+      className={toClassName("relative block", className)}
+    >
+      <input
+        {...inputProps}
+        className={toClassName(
+          "w-full min-w-0 appearance-none rounded-md border border-border-default bg-surface-raised text-content-primary transition-colors duration-(--duration-fast) ease-standard placeholder:text-content-muted hover:border-border-strong aria-invalid:border-intent-danger-border [&::-webkit-search-cancel-button]:appearance-none",
+          INPUT_SIZE_CLASS[size],
+          FOCUS_RING_CLASS,
+          DISABLED_CLASS,
+        )}
+        defaultValue={defaultValue}
+        ref={setInputRef}
+        type="search"
+        value={value}
+      />
+
+      {hasValue && !inputProps.disabled ? (
+        <span className="absolute inset-y-0 end-0 flex items-center">
+          <IconButton
+            appearance="ghost"
+            label={clearLabel}
+            onClick={() => {
+              onClear()
+              inputRef.current?.focus()
+            }}
+            onPointerDown={(event) =>
+              event.preventDefault()
+            }
+            size={size}
+          >
+            {clearIcon}
+          </IconButton>
+        </span>
+      ) : null}
+    </span>
+  )
+}

package/src/VirtualizedGrid/ElementGrid.tsx

@@ -0,0 +1,45 @@
+import { useVirtualizer } from "@tanstack/react-virtual"
+import { useCallback } from "react"
+
+import { GridRows } from "./GridRows.tsx"
+import { useScrollMargin } from "./virtualizedGridScroll.ts"
+import type {
+  GridWindowProps,
+  ScrollOwner,
+} from "./virtualizedGridTypes.ts"
+
+export const ElementGrid = <Item,>(
+  props: GridWindowProps<Item> & {
+    scrollOwner: Extract<ScrollOwner, { kind: "element" }>
+  },
+) => {
+  const { gridElement, scrollMargin } = useScrollMargin(
+    props.scrollOwner,
+  )
+
+  const measureRow = useCallback(
+    (element: Element) =>
+      element.getBoundingClientRect().height + props.gap,
+    [props.gap],
+  )
+
+  const rowVirtualizer = useVirtualizer({
+    count: props.rowCount,
+    estimateSize: () => props.itemBlockSize + props.gap,
+    getScrollElement: () => props.scrollOwner.element,
+    measureElement: measureRow,
+    overscan: props.overscanRows,
+    scrollMargin,
+  })
+
+  return (
+    <GridRows
+      {...props}
+      gridElement={gridElement}
+      measureElement={rowVirtualizer.measureElement}
+      scrollMargin={scrollMargin}
+      totalSize={rowVirtualizer.getTotalSize()}
+      virtualRows={rowVirtualizer.getVirtualItems()}
+    />
+  )
+}

package/src/VirtualizedGrid/GridRows.tsx

@@ -0,0 +1,90 @@
+import { getContentMaxInlineSize } from "../AdaptiveGrid/chooseColumns.ts"
+import type { GridRowsProps } from "./virtualizedGridTypes.ts"
+
+/** The shared markup. Only the scroll observer differs between the two owners. */
+export const GridRows = <Item,>({
+  drawnColumns,
+  gap,
+  getItemKey,
+  gridElement,
+  items,
+  label,
+  measureElement,
+  renderItem,
+  scrollMargin,
+  totalSize,
+  virtualRows,
+}: GridRowsProps<Item>) => {
+  const firstRow = virtualRows[0]
+  const lastRow = virtualRows[virtualRows.length - 1]
+
+  // Everything scrolled past, and everything still to come. The two
+  // numbers that stand in for the rows that do not exist.
+  const paddingBlockStart = firstRow?.start ?? 0
+
+  const paddingBlockEnd = lastRow
+    ? Math.max(0, totalSize - lastRow.end)
+    : 0
+
+  return (
+    <ul
+      aria-label={label}
+      className="grid w-full list-none p-0 [&>*]:min-w-0"
+      ref={gridElement}
+      style={{
+        gap: `${gap}px`,
+        gridTemplateColumns: `repeat(${drawnColumns}, minmax(0, 1fr))`,
+        maxInlineSize: getContentMaxInlineSize({
+          columns: drawnColumns,
+        }),
+        // Offset by `scrollMargin` because `start` is measured
+        // from the top of the scroll owner, and this padding is
+        // measured from the top of the grid.
+        paddingBlockEnd: `${paddingBlockEnd}px`,
+        paddingBlockStart: `${Math.max(0, paddingBlockStart - scrollMargin)}px`,
+      }}
+    >
+      {virtualRows.flatMap((row) => {
+        const firstIndex = row.index * drawnColumns
+
+        return items
+          .slice(firstIndex, firstIndex + drawnColumns)
+          .map((item, offset) => {
+            const index = firstIndex + offset
+
+            return (
+              <li
+                aria-posinset={index + 1}
+                aria-setsize={items.length}
+                // `data-index` names the ROW, so it goes on
+                // every cell in it — they all sit in that row
+                // and the attribute is true of all of them.
+                //
+                // Putting it only on the measured cell is the
+                // version that looks tidier and warns on every
+                // resize: the virtualizer keeps a
+                // `ResizeObserver` on whatever it measured and
+                // re-reads the attribute whenever that node
+                // changes size. Let the node stop being the
+                // leading cell — a column count change is all it
+                // takes — and it is still observed, now with no
+                // attribute to resolve.
+                data-index={row.index}
+                key={getItemKey?.(item, index) ?? index}
+                // Measured on the leading cell alone. A CSS grid
+                // stretches every cell to its row's height, so
+                // one is enough — and measuring all of them
+                // would have the virtualizer record the same row
+                // once per column.
+                ref={
+                  offset === 0 ? measureElement : undefined
+                }
+              >
+                {renderItem(item, index)}
+              </li>
+            )
+          })
+      })}
+    </ul>
+  )
+}

package/src/VirtualizedGrid/VirtualizedGrid.mdx

@@ -47,16 +47,17 @@ commitment — every mounted row is measured and the estimate corrected. It stil
 be close, because it is what the scrollbar is sized from before anything has been
 measured. A bad guess makes the bar jump under the thumb on the first scroll.
 
-## It scrolls the page, not a box of its own
+## It follows the page's scroll region
 
-`useWindowVirtualizer`, so the page scrolls the way every other page in the fleet
-scrolls — the header leaves, the scrollbar is the browser's, `Ctrl+End` works. A
-component that grew its own `overflow: auto` well would trap the wheel and strand the
-page header above it.
+The grid never creates a scroll box. It follows the nearest ancestor whose vertical
+overflow is `auto` or `scroll`. Inside `Shell`, that is `Main`, so the header and rail stay
+available while the grid scrolls. A standalone grid falls back to the browser window.
 
-The cost is that the grid has to know how far down the document it starts, which it
-measures in a layout effect and feeds to the virtualizer as `scrollMargin`. Get that
-wrong and every row is offset by the height of the header above it.
+The cost is that the grid has to know how far down its scroll region it starts. It measures
+that offset in a layout effect and feeds it to the virtualizer as `scrollMargin`. Get that
+wrong and every row is offset by the chrome above it.
+
+<Canvas of={VirtualizedGridStories.InShellScrollRegion} />
 
 ## The column rule is inherited, not reimplemented
 

package/src/VirtualizedGrid/VirtualizedGrid.stories.tsx

@@ -3,9 +3,13 @@ import { useState } from "react"
 
 import { getColumnChoices } from "../AdaptiveGrid/chooseColumns.ts"
 import type { BlockSizeResolver } from "../AdaptiveGrid/useAdaptiveColumns.ts"
+import { Button } from "../Button/Button.tsx"
 import { StorySection } from "../board.storyHelpers.tsx"
 import { Card } from "../Card/Card.tsx"
+import { Header } from "../Header/Header.tsx"
+import { Main } from "../Main/Main.tsx"
 import { SegmentedControl } from "../SegmentedControl/SegmentedControl.tsx"
+import { Shell } from "../Shell/Shell.tsx"
 import { VirtualizedGrid } from "./VirtualizedGrid.tsx"
 
 /**
@@ -104,6 +108,28 @@ type Story = StoryObj<typeof meta>
  */
 export const Default: Story = {}
 
+/**
+ * The app-shell contract: `Main` is the one vertical scroll region,
+ * and the grid follows it rather than adding document height.
+ *
+ * This is QueuePilot's Pending shape. It is a separate story because
+ * a standalone grid still follows the browser window and both paths
+ * need a real consumer.
+ */
+export const InShellScrollRegion: Story = {
+  parameters: { layout: "fullscreen" },
+  render: (gridProps) => (
+    <Shell contentWidth="full">
+      <Header heading="Pending" />
+
+      <Main>
+        <Button onClick={() => {}}>Mark all seen</Button>
+        <VirtualizedGrid {...gridProps} />
+      </Main>
+    </Shell>
+  ),
+}
+
 /**
  * The same 2,000 items at three window heights.
  *

package/src/VirtualizedGrid/VirtualizedGrid.test.tsx

@@ -33,7 +33,8 @@ import * as stories from "./VirtualizedGrid.stories.tsx"
  *    on.
  */
 
-const { AllStates, Default } = composeStories(stories)
+const { AllStates, Default, InShellScrollRegion } =
+  composeStories(stories)
 
 const getLists = (canvasElement: HTMLElement) => [
   ...canvasElement.querySelectorAll<HTMLElement>("ul"),
@@ -146,6 +147,64 @@ test("scrolling changes which rows exist", async () => {
   }
 })
 
+test("a grid inside Shell follows Main's one scroll region", async () => {
+  const { canvasElement } = await mountStory(
+    InShellScrollRegion,
+  )
+  const main =
+    canvasElement.querySelector<HTMLElement>("main")
+
+  if (!main) {
+    throw new Error("The shell story has no Main element.")
+  }
+
+  await waitFor(async () => {
+    await expect(
+      getRowIndexes(canvasElement).length,
+    ).toBeGreaterThan(0)
+  })
+
+  await expect(getComputedStyle(main).overflowY).toBe(
+    "auto",
+  )
+  await expect(main.scrollHeight).toBeGreaterThan(
+    main.clientHeight,
+  )
+
+  const before = getRowIndexes(canvasElement)
+
+  main.scrollTop = 6000
+  main.dispatchEvent(new Event("scroll"))
+
+  await waitFor(async () => {
+    await expect(
+      getRowIndexes(canvasElement).some((index) =>
+        before.includes(index),
+      ),
+    ).toBe(false)
+  })
+
+  // The last row must replace the virtual spacer. This is the
+  // reported failure's visible half: the old window observer left
+  // tens of thousands of blank pixels below the first mounted rows
+  // when Main scrolled.
+  main.scrollTop = main.scrollHeight
+  main.dispatchEvent(new Event("scroll"))
+
+  await waitFor(async () => {
+    await expect(
+      getCells(canvasElement).some(
+        (cell) =>
+          cell.getAttribute("aria-posinset") === "2000",
+      ),
+    ).toBe(true)
+  })
+
+  await expect(
+    getList(canvasElement).style.paddingBlockEnd,
+  ).toBe("0px")
+})
+
 test("a screen reader is told the real length", async () => {
   const { canvasElement } = await mountStory(Default)