@open-mercato/ui 0.7.0 → 0.7.1-develop.7102.1.b41f7e3e51

package/src/backend/__tests__/DataTable.cappedPagination.test.tsx

@@ -0,0 +1,122 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import { DataTable } from '../DataTable'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
+}))
+
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false }),
+}))
+
+/**
+ * The capped-count feature's risky half lives in the pager: `Pagination` decides
+ * from `totalIsCapped` plus a `hasNextPage` that `DataTable` derives from the
+ * rendered row count whether a row past the cap is reachable at all. The unit
+ * tests on the primitive pin its own logic; these pin the wiring between a
+ * capped list payload and that primitive, which is where a regression would
+ * silently strand data while every other test stayed green.
+ *
+ * Derived from the manual UI QA on #5228: 31 rows behind a reported total of 3.
+ */
+type Row = { id: string; name: string }
+
+const columns: ColumnDef<Row>[] = [{ accessorKey: 'name', header: 'Name' }]
+
+const PAGE_SIZE = 20
+
+function rows(count: number, offset = 0): Row[] {
+  return Array.from({ length: count }, (_, i) => ({
+    id: `row-${offset + i + 1}`,
+    name: `Row ${offset + i + 1}`,
+  }))
+}
+
+function renderTable(pagination: Record<string, unknown>, data: Row[]) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0, retry: false } } })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <I18nProvider locale="en" dict={{}}>
+        <DataTable columns={columns as any} data={data} pagination={pagination as any} />
+      </I18nProvider>
+    </QueryClientProvider>,
+  )
+}
+
+const info = () => document.querySelector('[data-slot="pagination-info"]')?.textContent ?? ''
+const next = () => document.querySelector('[data-slot="pagination-next"]') as HTMLButtonElement | null
+const last = () => document.querySelector('[data-slot="pagination-last"]')
+
+describe('DataTable pagination with a capped total', () => {
+  // The floor must read as a floor. A capped list showing "of 3 results" would
+  // state a number the server explicitly refused to vouch for.
+  it('renders the total as a floor and hides the jump-to-last control', () => {
+    renderTable(
+      { page: 1, pageSize: PAGE_SIZE, total: 3, totalPages: 1, totalIsCapped: true, onPageChange: jest.fn() },
+      rows(PAGE_SIZE),
+    )
+    expect(info()).toBe('Showing 1 to 20 of 3+ results')
+    // The jump would land on the floor's last page while presenting itself as
+    // the end of the data, which is precisely the lie this feature must avoid.
+    expect(last()).toBeNull()
+  })
+
+  // This is the assertion that would have caught an unfixed clamp: with a
+  // floor-derived page count of 1, a naive pager disables Next on page 1 and
+  // every row past the cap becomes unreachable.
+  it('keeps Next live past the floor while the page comes back full', () => {
+    const onPageChange = jest.fn()
+    renderTable(
+      { page: 1, pageSize: PAGE_SIZE, total: 3, totalPages: 1, totalIsCapped: true, onPageChange },
+      rows(PAGE_SIZE),
+    )
+    const button = next()
+    expect(button?.disabled).toBe(false)
+    fireEvent.click(button!)
+    expect(onPageChange).toHaveBeenCalledWith(2)
+  })
+
+  // Deep-linking past the floor must not bounce the user back, and the range
+  // label has to describe the rows actually on screen rather than the floor.
+  it('serves a page past the floor without snapping back, and retires Next on a short page', () => {
+    const onPageChange = jest.fn()
+    renderTable(
+      { page: 2, pageSize: PAGE_SIZE, total: 3, totalPages: 1, totalIsCapped: true, onPageChange },
+      rows(11, PAGE_SIZE),
+    )
+    expect(info()).toBe('Showing 21 to 31 of 3+ results')
+    expect(within(document.body).getByText('Row 31')).toBeInTheDocument()
+    // Short page ⇒ nothing beyond it, so Next retires here rather than at the floor.
+    expect(next()?.disabled).toBe(true)
+    expect(onPageChange).not.toHaveBeenCalled()
+  })
+
+  // Capping is conditional: below the cap the server sends no flag, and the
+  // table must be byte-identical to its pre-feature behaviour.
+  it('leaves an uncapped list unchanged — exact total, jump-to-last offered', () => {
+    renderTable(
+      { page: 1, pageSize: PAGE_SIZE, total: 31, totalPages: 2, onPageChange: jest.fn() },
+      rows(PAGE_SIZE),
+    )
+    expect(info()).toBe('Showing 1 to 20 of 31 results')
+    expect(last()).not.toBeNull()
+    expect(next()?.disabled).toBe(false)
+  })
+
+  // The exact-multiple false positive: short-page detection cannot distinguish
+  // "a full last page" from "more to come", so Next survives one page too far.
+  // The label must not then claim a row it is not showing.
+  it('claims no range when a capped page comes back empty', () => {
+    renderTable(
+      { page: 3, pageSize: PAGE_SIZE, total: 3, totalPages: 1, totalIsCapped: true, onPageChange: jest.fn() },
+      [],
+    )
+    expect(info()).toBe('No further results past 3')
+    expect(next()?.disabled).toBe(true)
+  })
+})

package/src/backend/__tests__/DataTable.headerWrap.test.tsx

@@ -0,0 +1,111 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { DataTable } from '../DataTable'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { render } from '@testing-library/react'
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
+}))
+
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false }),
+}))
+
+type Row = { id: string; title: string }
+
+const tokensOf = (el: Element | null): string[] =>
+  (el?.getAttribute('class') ?? '').split(/\s+/).filter(Boolean)
+
+// The header used to be a single non-wrapping `sm:flex-row` line. A title
+// sitting next to a long action group (Create + Export + Refresh + injected
+// toolbar buttons) had nothing but `min-w-0` holding it, so it collapsed to a
+// sliver while the action buttons — which wrap on their own — spilled onto a
+// second line and rendered over it. The row now wraps as a unit, the title
+// keeps a 12rem floor, and the actions stay right-aligned in either layout.
+describe('DataTable header row wrapping', () => {
+  function renderHeaderTable() {
+    const columns: ColumnDef<Row>[] = [{ accessorKey: 'title', header: 'Title' }]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    const result = render(
+      <QueryClientProvider client={queryClient}>
+        <I18nProvider locale="en" dict={{}}>
+          <DataTable
+            title="Documents"
+            actions={<button type="button">Create document</button>}
+            columns={columns}
+            data={[{ id: '1', title: 'Solar rollout' }]}
+          />
+        </I18nProvider>
+      </QueryClientProvider>,
+    )
+    return { ...result, queryClient }
+  }
+
+  function headerParts(container: HTMLElement) {
+    const headerContent = Array.from(container.querySelectorAll('div')).find((el) =>
+      tokensOf(el).includes('sm:flex-row'),
+    ) ?? null
+    return {
+      headerContent,
+      titleSlot: headerContent?.firstElementChild ?? null,
+      actionsSlot: headerContent?.lastElementChild ?? null,
+    }
+  }
+
+  it('lets the header row wrap instead of crushing the title', () => {
+    const { container, queryClient } = renderHeaderTable()
+    try {
+      const { headerContent } = headerParts(container)
+      expect(headerContent).not.toBeNull()
+      expect(tokensOf(headerContent)).toEqual(
+        expect.arrayContaining([
+          'flex',
+          'flex-col',
+          'gap-2',
+          'sm:flex-row',
+          'sm:flex-wrap',
+          'sm:items-center',
+          'sm:justify-between',
+        ]),
+      )
+    } finally {
+      queryClient.clear()
+    }
+  })
+
+  it('gives the title a wrap threshold instead of an unbounded shrink', () => {
+    const { container, queryClient } = renderHeaderTable()
+    try {
+      const { titleSlot } = headerParts(container)
+      expect(titleSlot?.textContent).toContain('Documents')
+      expect(tokensOf(titleSlot)).toEqual(
+        expect.arrayContaining(['flex-1', 'min-w-0', 'sm:basis-48']),
+      )
+    } finally {
+      queryClient.clear()
+    }
+  })
+
+  it('keeps the actions right-aligned once the row has wrapped', () => {
+    const { container, queryClient } = renderHeaderTable()
+    try {
+      const { actionsSlot } = headerParts(container)
+      expect(actionsSlot?.textContent).toContain('Create document')
+      expect(tokensOf(actionsSlot)).toEqual(
+        expect.arrayContaining([
+          'flex',
+          'flex-wrap',
+          'items-center',
+          'gap-2',
+          'sm:ml-auto',
+          'sm:justify-end',
+        ]),
+      )
+    } finally {
+      queryClient.clear()
+    }
+  })
+})

package/src/backend/__tests__/DataTable.render.test.tsx

@@ -128,4 +128,41 @@ describe('DataTable SSR render', () => {
       queryClient.clear()
     }
   })
+
+  it('forwards the click event to onRowClick, and skips it when clicking the actions cell', () => {
+    const columns: ColumnDef<Row>[] = [
+      { accessorKey: 'name', header: 'Name' },
+    ]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    let capturedRowTagName: string | null = null
+    const onRowClick = jest.fn((_row: Row, event: React.MouseEvent<HTMLTableRowElement>) => {
+      capturedRowTagName = event.currentTarget.tagName
+    })
+    try {
+      render(
+        <QueryClientProvider client={queryClient}>
+          <I18nProvider locale="en" dict={{}}>
+            <DataTable
+              columns={columns}
+              data={[{ id: '1', name: 'Ada' }]}
+              onRowClick={onRowClick}
+              rowActions={() => <button type="button">Edit</button>}
+            />
+          </I18nProvider>
+        </QueryClientProvider>,
+      )
+
+      fireEvent.click(screen.getByText('Ada'))
+      expect(onRowClick).toHaveBeenCalledTimes(1)
+      const [row, event] = onRowClick.mock.calls[0]
+      expect(row).toEqual({ id: '1', name: 'Ada' })
+      expect(event.type).toBe('click')
+      expect(capturedRowTagName).toBe('TR')
+
+      fireEvent.click(screen.getByText('Edit'))
+      expect(onRowClick).toHaveBeenCalledTimes(1)
+    } finally {
+      queryClient.clear()
+    }
+  })
 })

package/src/backend/__tests__/NotesSection.test.tsx

@@ -7,6 +7,33 @@ import { NotesSection, type NotesDataAdapter } from '../detail/NotesSection'
 import { dismissRecordConflict, getRecordConflictForTest } from '../conflicts'
 import { OPTIMISTIC_LOCK_CONFLICT_CODE } from '@open-mercato/shared/lib/crud/optimistic-lock-headers'
 
+const createDataAdapter = (): NotesDataAdapter => ({
+  list: jest.fn(async () => [
+    {
+      id: 'note-1',
+      body: 'Existing note',
+      createdAt: '2026-04-10T08:00:00.000Z',
+      authorName: 'Ada Lovelace',
+    },
+  ]),
+  create: jest.fn(async () => ({ id: 'note-2' })),
+  update: jest.fn(async () => undefined),
+  delete: jest.fn(async () => undefined),
+})
+
+const baseProps = (dataAdapter: NotesDataAdapter) => ({
+  entityId: 'person-1',
+  emptyLabel: '—',
+  viewerUserId: 'user-1',
+  viewerName: 'Ada Lovelace',
+  addActionLabel: 'Add note',
+  emptyState: {
+    title: 'No notes yet',
+    actionLabel: 'Add note',
+  },
+  dataAdapter,
+})
+
 describe('NotesSection', () => {
   beforeEach(() => {
     dismissRecordConflict()
@@ -171,6 +198,68 @@ describe('NotesSection', () => {
     })
   })
 
+  it('renders the markdown toggle and appearance controls by default', async () => {
+    const { container } = renderWithProviders(<NotesSection {...baseProps(createDataAdapter())} />)
+
+    await screen.findByText('Existing note')
+    expect(container.querySelectorAll('svg.lucide-palette').length).toBe(1)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add note' }))
+
+    await waitFor(() => {
+      expect(container.querySelector('button[aria-pressed]')).not.toBeNull()
+    })
+    expect(screen.getByRole('button', { name: 'Customize appearance' })).toBeTruthy()
+    expect(screen.queryByTestId('markdown-field')).toBeNull()
+  })
+
+  it('keeps the rich editor active and hides the toggle when forceMarkdown is set', async () => {
+    const { container } = renderWithProviders(
+      <NotesSection {...baseProps(createDataAdapter())} forceMarkdown />,
+    )
+
+    await screen.findByText('Existing note')
+    fireEvent.click(screen.getByRole('button', { name: 'Add note' }))
+
+    await waitFor(() => {
+      expect(screen.getByTestId('markdown-field')).toBeTruthy()
+    })
+    expect(container.querySelector('button[aria-pressed]')).toBeNull()
+  })
+
+  it('hides the toggle but honors the seeded preference when hideMarkdownToggle is set', async () => {
+    const { container } = renderWithProviders(
+      <NotesSection
+        {...baseProps(createDataAdapter())}
+        hideMarkdownToggle
+        readMarkdownPreference={() => true}
+      />,
+    )
+
+    await screen.findByText('Existing note')
+    fireEvent.click(screen.getByRole('button', { name: 'Add note' }))
+
+    await waitFor(() => {
+      expect(screen.getByTestId('markdown-field')).toBeTruthy()
+    })
+    expect(container.querySelector('button[aria-pressed]')).toBeNull()
+  })
+
+  it('removes every appearance affordance when disableAppearance is set', async () => {
+    const { container } = renderWithProviders(
+      <NotesSection {...baseProps(createDataAdapter())} disableAppearance />,
+    )
+
+    await screen.findByText('Existing note')
+    fireEvent.click(screen.getByRole('button', { name: 'Add note' }))
+
+    await waitFor(() => {
+      expect(container.querySelector('button[aria-pressed]')).not.toBeNull()
+    })
+    expect(screen.queryByRole('button', { name: 'Customize appearance' })).toBeNull()
+    expect(container.querySelectorAll('svg.lucide-palette').length).toBe(0)
+  })
+
   it('surfaces the unified conflict bar when a write fails with a 409', async () => {
     const conflict = {
       status: 409,

package/src/backend/__tests__/useRegisteredComponent.identity.test.tsx

@@ -0,0 +1,305 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { z } from 'zod'
+import {
+  registerComponent,
+  registerComponentOverrides,
+} from '@open-mercato/shared/modules/widgets/component-registry'
+import type { ComponentOverride } from '@open-mercato/shared/modules/widgets/component-registry'
+import { ComponentOverrideProvider, useOverrideUserFeatures } from '../injection/ComponentOverrideProvider'
+import { useRegisteredComponent } from '../injection/useRegisteredComponent'
+
+jest.mock('../utils/apiCall', () => ({
+  apiCall: jest.fn(async () => ({ ok: true, result: { granted: ['acme.override'] } })),
+}))
+
+type FieldProps = { label?: string }
+
+const mounts = { count: 0 }
+
+function StatefulField({ label }: FieldProps) {
+  React.useEffect(() => {
+    mounts.count += 1
+  }, [])
+  return (
+    <label>
+      {label ?? 'field'}
+      <input data-testid="field" defaultValue="" />
+    </label>
+  )
+}
+
+function FeaturesProbe() {
+  const features = useOverrideUserFeatures()
+  return <span data-testid="features">{features.join(',')}</span>
+}
+
+function typeIntoField(value: string) {
+  fireEvent.change(screen.getByTestId('field'), { target: { value } })
+}
+
+describe('useRegisteredComponent identity', () => {
+  beforeEach(() => {
+    mounts.count = 0
+    registerComponentOverrides([])
+  })
+
+  afterEach(() => {
+    registerComponentOverrides([])
+  })
+
+  it('keeps the subtree mounted when override user features resolve after first paint', async () => {
+    const componentId = 'test.identity.features'
+    registerComponent({ id: componentId, component: StatefulField, metadata: { module: 'test' } })
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    // The override targets a different component, so the resolution result for
+    // `componentId` is identical before and after the feature grant arrives.
+    const overrides: ComponentOverride[] = [
+      {
+        target: { componentId: 'test.identity.other' },
+        priority: 10,
+        features: ['acme.override'],
+        metadata: { module: 'test' },
+        propsTransform: (props: unknown) => props,
+      } as ComponentOverride,
+    ]
+
+    render(
+      <ComponentOverrideProvider overrides={overrides}>
+        <FeaturesProbe />
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    typeIntoField('admin@acme.com')
+    expect(mounts.count).toBe(1)
+
+    await waitFor(() => expect(screen.getByTestId('features')).toHaveTextContent('acme.override'))
+
+    expect(mounts.count).toBe(1)
+    expect(screen.getByTestId('field')).toHaveValue('admin@acme.com')
+  })
+
+  it('keeps the subtree mounted when overrides are registered late', async () => {
+    const componentId = 'test.identity.late'
+    registerComponent({ id: componentId, component: StatefulField, metadata: { module: 'test' } })
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    const lateOverrides: ComponentOverride[] = [
+      {
+        target: { componentId: 'test.identity.late.other' },
+        priority: 10,
+        metadata: { module: 'test' },
+        propsTransform: (props: unknown) => props,
+      } as ComponentOverride,
+    ]
+
+    const { rerender } = render(
+      <ComponentOverrideProvider overrides={[]}>
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    typeIntoField('typed before the registry settled')
+    expect(mounts.count).toBe(1)
+
+    await act(async () => {
+      rerender(
+        <ComponentOverrideProvider overrides={lateOverrides}>
+          <Consumer />
+        </ComponentOverrideProvider>,
+      )
+    })
+
+    expect(mounts.count).toBe(1)
+    expect(screen.getByTestId('field')).toHaveValue('typed before the registry settled')
+  })
+
+  it('keeps a wrapper-wrapped subtree mounted across override re-registrations', async () => {
+    const componentId = 'test.identity.wrapped'
+    registerComponent({ id: componentId, component: StatefulField, metadata: { module: 'test' } })
+
+    const wrapper = (Original: React.ComponentType<FieldProps>) => {
+      const Wrapped = (props: FieldProps) => (
+        <div data-testid="wrapped">
+          <Original {...props} />
+        </div>
+      )
+      Wrapped.displayName = 'Wrapped'
+      return Wrapped
+    }
+
+    const buildOverrides = (): ComponentOverride[] => [
+      { target: { componentId }, priority: 10, metadata: { module: 'test' }, wrapper } as unknown as ComponentOverride,
+    ]
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    const { rerender } = render(
+      <ComponentOverrideProvider overrides={buildOverrides()}>
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    expect(screen.getByTestId('wrapped')).toBeInTheDocument()
+    typeIntoField('typed inside a wrapped section')
+    expect(mounts.count).toBe(1)
+
+    // A new array with the same wrapper function — what a provider re-render looks like.
+    await act(async () => {
+      rerender(
+        <ComponentOverrideProvider overrides={buildOverrides()}>
+          <Consumer />
+        </ComponentOverrideProvider>,
+      )
+    })
+
+    expect(mounts.count).toBe(1)
+    expect(screen.getByTestId('field')).toHaveValue('typed inside a wrapped section')
+  })
+
+  it('composes a wrapper at most once per (wrapper, wrapped component) pair', async () => {
+    // The user-visible consequence is covered by the test above; this one pins the
+    // cache's own contract, so that dropping the memoization fails loudly and the
+    // purity requirement documented on the `wrapper` override member stays executable.
+    const componentId = 'test.identity.wrapper-composition'
+    const Base = (props: FieldProps) => <StatefulField {...props} />
+    Base.displayName = 'Base'
+    registerComponent({ id: componentId, component: Base, metadata: { module: 'test' } })
+
+    let compositions = 0
+    const wrapper = (Original: React.ComponentType<FieldProps>) => {
+      compositions += 1
+      const Wrapped = (props: FieldProps) => (
+        <div data-testid="wrapped">
+          <Original {...props} />
+        </div>
+      )
+      Wrapped.displayName = 'Wrapped'
+      return Wrapped
+    }
+
+    const buildOverrides = (): ComponentOverride[] => [
+      { target: { componentId }, priority: 10, metadata: { module: 'test' }, wrapper } as unknown as ComponentOverride,
+    ]
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    const { rerender } = render(
+      <ComponentOverrideProvider overrides={buildOverrides()}>
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    expect(screen.getByTestId('wrapped')).toBeInTheDocument()
+    expect(compositions).toBe(1)
+
+    for (let pass = 0; pass < 2; pass += 1) {
+      await act(async () => {
+        rerender(
+          <ComponentOverrideProvider overrides={buildOverrides()}>
+            <Consumer />
+          </ComponentOverrideProvider>,
+        )
+      })
+    }
+
+    expect(compositions).toBe(1)
+    expect(mounts.count).toBe(1)
+  })
+
+  it('still applies a replacement that becomes active after the first render', async () => {
+    const componentId = 'test.identity.replacement'
+    const Original = () => <span data-testid="rendered">original</span>
+    const Replacement = () => <span data-testid="rendered">replacement</span>
+    registerComponent({ id: componentId, component: Original, metadata: { module: 'test' } })
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    const lateOverrides: ComponentOverride[] = [
+      {
+        target: { componentId },
+        priority: 100,
+        metadata: { module: 'test' },
+        replacement: Replacement,
+        propsSchema: z.object({}).passthrough(),
+      } as unknown as ComponentOverride,
+    ]
+
+    const { rerender } = render(
+      <ComponentOverrideProvider overrides={[]}>
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+    expect(screen.getByTestId('rendered')).toHaveTextContent('original')
+
+    await act(async () => {
+      rerender(
+        <ComponentOverrideProvider overrides={lateOverrides}>
+          <Consumer />
+        </ComponentOverrideProvider>,
+      )
+    })
+
+    expect(screen.getByTestId('rendered')).toHaveTextContent('replacement')
+  })
+
+  it('cannot save a subtree whose host re-creates the fallback on every render', () => {
+    const componentId = 'test.identity.inline-fallback'
+
+    function Consumer({ label }: { label: string }) {
+      // A fallback declared inside the host's render body is a new function on
+      // every render, and with no component registered under this id it *is*
+      // the component being rendered. The hook keeps its own identity stable,
+      // but it cannot make the caller's fallback stable — React sees a new
+      // element type below and must remount. Hosts that care about the state
+      // under an unregistered id have to hoist the fallback out of render.
+      const Fallback = (props: FieldProps) => <StatefulField {...props} />
+      const Resolved = useRegisteredComponent<FieldProps>(componentId, Fallback)
+      return <Resolved label={label} />
+    }
+
+    const { rerender } = render(<Consumer label="first" />)
+    typeIntoField('typed against an inline fallback')
+    expect(mounts.count).toBe(1)
+
+    rerender(<Consumer label="second" />)
+
+    expect(mounts.count).toBe(2)
+  })
+
+  it('remounts when the host asks for a different component id', () => {
+    function Consumer({ componentId }: { componentId: string }) {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId, StatefulField)
+      return <Resolved />
+    }
+
+    const { rerender } = render(<Consumer componentId="test.identity.provider-a" />)
+    typeIntoField('provider a input')
+    expect(mounts.count).toBe(1)
+
+    rerender(<Consumer componentId="test.identity.provider-b" />)
+
+    expect(mounts.count).toBe(2)
+    expect(screen.getByTestId('field')).toHaveValue('')
+  })
+})