@estiva-app/ui 0.46.0 → 0.48.0

package/src/BlockNodes.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { AttachmentCard } from './AttachmentCard'
+import { InlineChip } from './InlineChip'
+import { richTextClassName } from './RichText'
+import { AttachmentNode, BlockId, ReferenceNode, UnknownBlock, type AttachmentViewProps, type ReferenceViewProps } from './BlockNodes'
+
+/**
+ * The nodes an editor of a block document adds to StarterKit: an id on every
+ * block, a block it cannot edit kept whole, a reference and a file. The app
+ * draws the reference and the file with its own views.
+ */
+const meta = {
+  title: 'Primitives/BlockNodes',
+  parameters: { layout: 'padded' },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/** What an app hands `ReferenceNode`: here a chip with a fixed label. */
+function Chip({ uri }: ReferenceViewProps) {
+  return <InlineChip data-uri={uri}>Item one</InlineChip>
+}
+
+/** What an app hands `AttachmentNode`: here the package's card. */
+function File({ attrs }: AttachmentViewProps) {
+  return <AttachmentCard name={String(attrs.filename ?? 'File')} size={Number(attrs.size ?? 0)} contentType={String(attrs.m ?? '')} />
+}
+
+/*
+  The editor's own JSON, as `@estiva-app/protocol`'s `toEditorDocument` hands
+  it over: an id on each block, and an unknown block carrying its text.
+*/
+const DOCUMENT = {
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      attrs: { blockId: 'b1' },
+      content: [
+        { type: 'text', text: 'A paragraph, with a reference in it: ' },
+        { type: 'reference', attrs: { uri: 'nostr:naddr1example', marks: [] } },
+      ],
+    },
+    {
+      type: 'unknownBlock',
+      attrs: { blockId: 'b2', source: { type: 'widget', id: 'b2' }, text: 'A block this editor has no design for, kept as it is.' },
+    },
+    { type: 'attachment', attrs: { blockId: 'b3', url: '', m: 'application/pdf', x: '', size: 20480, filename: 'Label.pdf' } },
+    { type: 'paragraph', attrs: { blockId: 'b4' }, content: [{ type: 'text', text: 'Type here: every block keeps its id.' }] },
+  ],
+}
+
+function WithAnEditor({ views }: { views: boolean }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      BlockId,
+      UnknownBlock,
+      ReferenceNode.configure({ view: views ? Chip : null }),
+      AttachmentNode.configure({ view: views ? File : null }),
+    ],
+    content: DOCUMENT,
+    editorProps: { attributes: { class: richTextClassName('default', 'outline-none'), 'aria-label': 'Text' } },
+  })
+  return <EditorContent editor={editor} className="max-w-[560px]" />
+}
+
+/** A reference and a file drawn by the app's views, and a block kept whole. */
+export const Default: Story = {
+  render: () => <WithAnEditor views />,
+}
+
+/** No views given: the reference is its URI and the file its name, as text. */
+export const WithoutViews: Story = {
+  render: () => <WithAnEditor views={false} />,
+}

package/src/BlockNodes.test.tsx

@@ -0,0 +1,117 @@
+// @vitest-environment jsdom
+/**
+ * The block nodes (MAN-9, moved from Ship's `editorSchema.tsx`): what the
+ * editor must hand back unchanged for a save to keep every anchored comment.
+ *
+ * The JSON loaded here is what `@estiva-app/protocol`'s `toEditorDocument`
+ * produces, and what `getJSON()` returns is what its `fromEditorDocument`
+ * reads — so each test is a load, an edit or none, and a read back.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { render, screen, cleanup } from '@testing-library/react'
+import { Editor } from '@tiptap/core'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { AttachmentNode, BlockId, ReferenceNode, UnknownBlock, type ReferenceViewProps } from './BlockNodes'
+
+const EXTENSIONS = [StarterKit, BlockId, UnknownBlock, ReferenceNode, AttachmentNode]
+
+const SOURCE = { type: 'widget', id: 'w1', content: [{ type: 'text', text: 'kept' }] }
+const FILE = { url: '/media/f.png', m: 'image/png', x: 'f'.repeat(64), size: 4096 }
+
+const DOCUMENT = {
+  type: 'doc',
+  content: [
+    { type: 'heading', attrs: { level: 1, blockId: 'h1' }, content: [{ type: 'text', text: 'Title' }] },
+    {
+      type: 'paragraph',
+      attrs: { blockId: 'p1' },
+      content: [
+        { type: 'text', text: 'see ' },
+        { type: 'reference', attrs: { uri: 'nostr:naddr1example', marks: ['bold'] } },
+      ],
+    },
+    { type: 'unknownBlock', attrs: { blockId: 'w1', source: SOURCE, text: 'kept' } },
+    { type: 'attachment', attrs: { blockId: 'a1', ...FILE, filename: 'shot.png' } },
+    { type: 'bulletList', attrs: { blockId: 'l1' }, content: [{ type: 'listItem', attrs: { blockId: 'i1' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'one' }] }] }] },
+  ],
+}
+
+type Json = { type: string; attrs?: Record<string, unknown>; content?: Json[] }
+
+let editor: Editor | undefined
+afterEach(() => {
+  editor?.destroy()
+  editor = undefined
+  cleanup()
+})
+
+describe('what the editor hands back', () => {
+  it('keeps every block id through a load and a read', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: DOCUMENT })
+    const back = editor.getJSON() as Json
+    expect(back.content?.map((n) => n.attrs?.blockId)).toEqual(['h1', 'p1', 'w1', 'a1', 'l1'])
+    expect(back.content?.[4].content?.[0].attrs?.blockId).toBe('i1')
+  })
+
+  it('keeps a block id when its text is typed into', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: DOCUMENT })
+    // The end of the heading's text: 1 opens the heading, 5 characters of "Title".
+    editor.chain().setTextSelection(6).insertContent(', edited').run()
+    const heading = (editor.getJSON() as Json).content?.[0]
+    expect(heading?.attrs?.blockId).toBe('h1')
+    expect(JSON.stringify(heading)).toContain('Title, edited')
+  })
+
+  it('carries an unknown block whole, source and all', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: DOCUMENT })
+    const kept = (editor.getJSON() as Json).content?.[2]
+    expect(kept?.type).toBe('unknownBlock')
+    expect(kept?.attrs?.source).toEqual(SOURCE)
+  })
+
+  it('keeps a reference an atom, with its uri and the marks it carries', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: DOCUMENT })
+    const reference = (editor.getJSON() as Json).content?.[1].content?.[1]
+    expect(reference).toEqual({ type: 'reference', attrs: { uri: 'nostr:naddr1example', marks: ['bold'] } })
+  })
+
+  it('keeps every imeta field on a file, which ProseMirror drops when undeclared', () => {
+    const rich = { ...FILE, dim: '800x600', thumb: '/media/f.thumb.jpg', alt: 'a picture', filename: 'shot.png' }
+    editor = new Editor({ extensions: EXTENSIONS, content: { type: 'doc', content: [{ type: 'attachment', attrs: { blockId: 'a1', ...rich } }] } })
+    expect((editor.getJSON() as Json).content?.[0].attrs).toEqual({ blockId: 'a1', ...rich })
+  })
+})
+
+describe('what it draws', () => {
+  function WithAnEditor({ view }: { view: ((props: ReferenceViewProps) => React.ReactNode) | null }) {
+    const e = useEditor({
+      extensions: [StarterKit, BlockId, UnknownBlock, ReferenceNode.configure({ view }), AttachmentNode],
+      content: DOCUMENT,
+    })
+    return <EditorContent editor={e} />
+  }
+
+  it('draws a reference with the view it is given', async () => {
+    render(<WithAnEditor view={({ uri }) => <span data-testid="chip">{uri}</span>} />)
+    expect((await screen.findByTestId('chip')).textContent).toBe('nostr:naddr1example')
+  })
+
+  it('draws a reference as its uri without a view', async () => {
+    const { container } = render(<WithAnEditor view={null} />)
+    await screen.findByText('Title')
+    expect(container.querySelector('[data-reference]')?.textContent).toBe('nostr:naddr1example')
+  })
+
+  it('draws an unknown block as its text, addressed by its id', async () => {
+    const { container } = render(<WithAnEditor view={null} />)
+    expect((await screen.findByText('kept')).closest('[data-block-id]')?.getAttribute('data-block-id')).toBe('w1')
+    expect(container.querySelector('[data-block-type="widget"]')).not.toBeNull()
+  })
+
+  it('puts data-block-id on each block, as RichText does', async () => {
+    const { container } = render(<WithAnEditor view={null} />)
+    await screen.findByText('Title')
+    expect(container.querySelector('h1')?.getAttribute('data-block-id')).toBe('h1')
+  })
+})

package/src/BlockNodes.tsx

@@ -0,0 +1,242 @@
+import type { ComponentType } from 'react'
+import { Extension, Node } from '@tiptap/core'
+import { NodeViewWrapper, ReactNodeViewRenderer, type ReactNodeViewProps } from '@tiptap/react'
+
+/*
+ * The four nodes an editor of a block document needs that a stock schema does
+ * not have (SPEC §13.3) — moved here from Ship's `editorSchema.tsx` (RIC-14,
+ * SHI-2) when Peek became the second editor of the same documents (MAN-9).
+ *
+ * They are one half of a pair. The other half is `@estiva-app/protocol`'s
+ * `toEditorDocument` / `fromEditorDocument`, which turn a stored document into
+ * the JSON these nodes read and back: the node names (`unknownBlock`,
+ * `reference`, `attachment`) and the `blockId` attribute are that translation's,
+ * and must not drift from it. This package does not import protocol, as
+ * `RichText` does not: the translation hands over everything a view draws.
+ *
+ * Everything else a document can contain is already a ProseMirror node of the
+ * same name — StarterKit's and TableKit's — which is why this file is short.
+ */
+
+/**
+ * The block types §13.3 puts an id on, as the editor's node names —
+ * protocol's `EDITOR_BLOCK_TYPES`, less `unknownBlock`, which declares its own.
+ */
+const BLOCK_TYPES = [
+  'paragraph',
+  'heading',
+  'bulletList',
+  'orderedList',
+  'listItem',
+  'blockquote',
+  'codeBlock',
+  'horizontalRule',
+  // A table and everything inside it (UIG-18): a row or a cell whose id was
+  // re-minted on each save would detach any comment anchored to it.
+  'table',
+  'tableRow',
+  'tableHeader',
+  'tableCell',
+  // Without this an attachment's id is re-minted on every save, and every
+  // comment anchored to it stops resolving.
+  'attachment',
+]
+
+/**
+ * `id` on every block, carried as the `blockId` attribute.
+ *
+ * A global attribute rather than one per node type, because §13.3 puts an id
+ * on **every** block and a type that quietly lacked one would mint a fresh id
+ * on every save — detaching each anchored comment on it (RFC 0.4 §6) with
+ * nothing on screen to say so.
+ *
+ * Rendered as `data-block-id`, which is what `RichText` already emits, so the
+ * reading and the editing surface address a block the same way.
+ */
+export const BlockId = Extension.create({
+  name: 'blockId',
+  addGlobalAttributes() {
+    return [
+      {
+        types: BLOCK_TYPES,
+        attributes: {
+          blockId: {
+            default: null,
+            parseHTML: (element: HTMLElement) => element.getAttribute('data-block-id'),
+            renderHTML: (attributes: Record<string, unknown>) =>
+              attributes.blockId ? { 'data-block-id': String(attributes.blockId) } : {},
+          },
+        },
+      },
+    ]
+  },
+})
+
+/** What a reference's view is handed: the `nostr:` URI it stands for. */
+export interface ReferenceViewProps {
+  uri: string
+}
+
+export interface ReferenceNodeOptions {
+  /**
+   * Draws the reference as the thing it points at — the app's own chip, which
+   * knows how to resolve it. Without one, the URI is drawn as text.
+   */
+  view: ComponentType<ReferenceViewProps> | null
+}
+
+/**
+ * A `nostr:` reference, drawn as the thing it points at — SPEC §13.1.
+ *
+ * An **atom**: it has no editable interior, because its text is the URI and
+ * nobody edits half a `naddr`. Selecting it selects the whole reference, which
+ * is also how deleting one works. `marks` carries the run's other marks, so a
+ * bold reference comes back bold.
+ */
+export const ReferenceNode = Node.create<ReferenceNodeOptions>({
+  name: 'reference',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: false,
+  addOptions() {
+    return { view: null }
+  },
+  addAttributes() {
+    return {
+      uri: { default: '' },
+      marks: { default: [] as string[] },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'span[data-reference]' }]
+  },
+  renderHTML({ node }) {
+    // A copy to the clipboard as HTML, and the whole drawing when no view is given.
+    return ['span', { 'data-reference': String(node.attrs.uri) }, String(node.attrs.uri)]
+  },
+  addNodeView() {
+    const View = this.options.view
+    if (!View) return null
+    return ReactNodeViewRenderer(({ node }: ReactNodeViewProps) => (
+      <NodeViewWrapper as="span" className="inline">
+        <View uri={String(node.attrs.uri ?? '')} />
+      </NodeViewWrapper>
+    ))
+  },
+})
+
+/**
+ * A block this editor has no design for, kept whole.
+ *
+ * §13.3: a reader MUST render an unknown block's inline text and MUST NOT drop
+ * it silently. **An editor is the dangerous case** — ProseMirror discards a
+ * node its schema does not know, and the save after that would delete somebody
+ * else's block with no error anywhere on the way. So the block's own JSON
+ * rides in `source`, and protocol's `fromEditorDocument` hands it back
+ * untouched; `text` is its inline text, worked out by `toEditorDocument`.
+ *
+ * Not editable, deliberately: an affordance that lets a person change
+ * something they cannot see is worse than one that says the content is there
+ * and belongs to another surface.
+ */
+export const UnknownBlock = Node.create({
+  name: 'unknownBlock',
+  group: 'block',
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return {
+      blockId: { default: null },
+      source: { default: null },
+      text: { default: '' },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'div[data-unknown-block]' }]
+  },
+  renderHTML({ node }) {
+    return ['div', { 'data-unknown-block': String(node.attrs.blockId ?? '') }, String(node.attrs.text ?? '')]
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(UnknownBlockView)
+  },
+})
+
+function UnknownBlockView({ node }: ReactNodeViewProps) {
+  const source = node.attrs.source as { id?: string; type?: string } | null
+  const text = String(node.attrs.text ?? '')
+  return (
+    <NodeViewWrapper
+      data-block-id={source?.id}
+      data-block-type={source?.type}
+      className="rounded-md border border-border-default bg-bg-inset px-2 py-1 text-text-secondary"
+    >
+      {text || `A ${source?.type ?? 'block'} this app cannot edit yet.`}
+    </NodeViewWrapper>
+  )
+}
+
+/** What an attachment's view is handed: the block's `imeta` fields. */
+export interface AttachmentViewProps {
+  attrs: Record<string, unknown>
+}
+
+export interface AttachmentNodeOptions {
+  /** Draws the file — the app's own attachment card. Without one, its name is drawn as text. */
+  view: ComponentType<AttachmentViewProps> | null
+}
+
+/**
+ * A file placed in a document — SPEC §13.3's `attachment` block (SHI-2).
+ *
+ * An atom: the file is the block, there is nothing inside it to edit, and a
+ * caret that could sit "inside" an image is a way to produce documents no
+ * reader has a rule for. Selectable and deletable, so removing one is Backspace
+ * like anything else.
+ *
+ * Its attributes are the `imeta` fields exactly, because that is what §13.3
+ * specifies. Each is declared, and that is not boilerplate: ProseMirror **drops
+ * an attribute its schema does not name**, so an undeclared `thumb` would
+ * survive the editor and vanish on save — the silent deletion `UnknownBlock`
+ * exists to prevent.
+ */
+export const AttachmentNode = Node.create<AttachmentNodeOptions>({
+  name: 'attachment',
+  group: 'block',
+  atom: true,
+  selectable: true,
+  draggable: false,
+  addOptions() {
+    return { view: null }
+  },
+  addAttributes() {
+    return {
+      url: { default: '' },
+      m: { default: '' },
+      x: { default: '' },
+      size: { default: 0 },
+      dim: { default: null },
+      thumb: { default: null },
+      alt: { default: null },
+      filename: { default: null },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'div[data-attachment-block]' }]
+  },
+  renderHTML({ node }) {
+    // A copy to the clipboard, and the whole drawing when no view is given.
+    return ['div', { 'data-attachment-block': String(node.attrs.x ?? '') }, String(node.attrs.filename ?? 'attachment')]
+  },
+  addNodeView() {
+    const View = this.options.view
+    if (!View) return null
+    return ReactNodeViewRenderer(({ node }: ReactNodeViewProps) => (
+      <NodeViewWrapper className="my-2">
+        <View attrs={node.attrs} />
+      </NodeViewWrapper>
+    ))
+  },
+})

package/src/editor.ts

@@ -9,3 +9,13 @@
  */
 export { KeptSelection, SelectionToolbar, normalizeHref, type MarkId, type SelectionToolbarProps } from './SelectionToolbar'
 export { suggestionPopup, isSuggestionActive, isSuggestionOpen, type SuggestionPopupOptions } from './suggestionPopup'
+export {
+  BlockId,
+  UnknownBlock,
+  ReferenceNode,
+  AttachmentNode,
+  type ReferenceNodeOptions,
+  type ReferenceViewProps,
+  type AttachmentNodeOptions,
+  type AttachmentViewProps,
+} from './BlockNodes'

package/src/gates/app-checks.ts

@@ -56,6 +56,7 @@ export const APP_TICKET_TITLES: Record<string, string> = {
   'UIG-28': 'Close the two holes in the token contract — arbitrary values, and inline style',
   'UIG-30': 'RichText — one component that draws a message\'s text, for both apps',
   'UIG-32': 'Peek and Ship take their gate pieces from the package',
+  'UIG-33': 'Link — a whole row that is one link',
   'UIG-37': 'The gates refuse a TypeScript eslint-disable comment — know the rule names, rules off',
   'UIG-42': "What the gate can't see yet — a box around a part, a screen drawn by hand, two blind spots in the token check",
 }

package/src/gates/gates.test.ts

@@ -4,6 +4,7 @@ import { join } from 'node:path'
 import { pathToFileURL } from 'node:url'
 import { ESLint, type Linter } from 'eslint'
 import { afterAll, describe, expect, it } from 'vitest'
+import { appChecks } from './app-checks'
 import { countCommitted, hookRuns, skippedFolders, skipsListed } from './ci'
 import { writeGateCount } from './count'
 import { gateConfig, gateLint } from './gate-config'
@@ -425,4 +426,25 @@ describe('gates:status', () => {
     expect(out).toContain('Tickets shipish owns (1):')
     expect(out).toContain('✅  UIG-4')
   })
+
+  // UIG-26, Katerina's ruling of 30 September: eight open tickets moved to the next phase, and the close runs.
+  it('shows a ticket moved to the next phase, still checks it, and the aggregate does not wait for it', async () => {
+    const checks = (later: string) => `export default (h) => ({ repo: 'estiva-ui', siblings: [],\n  all: [\n    { ref: 'UIG-1', owner: 'estiva-ui', title: 'Count' },\n    { ref: 'UIG-26', owner: 'estiva-ui', aggregate: true, title: 'Close' },\n    { ref: 'UIG-39', owner: 'estiva-ui', title: 'Later'${later} },\n  ],\n  tickets: [\n    { ref: 'UIG-1', owner: true, checks: [{ what: 'counted', run: () => h.PASS('yes') }] },\n    { ref: 'UIG-26', owner: true, checks: [] },\n    { ref: 'UIG-39', owner: true, checks: [{ what: 'written', run: () => h.FAIL('not yet') }] },\n  ] })\n`
+    const moved = await runStatus({ root: app('status-later', { 'scripts/gates-checks.mjs': checks(", later: 'Katerina, 30 September: the next phase'") }), detail: true })
+    expect(moved).toContain('⏭  UIG-39')
+    expect(moved).toContain('Katerina, 30 September: the next phase')
+    expect(moved).toContain('✗ estiva-ui  written — not yet')
+    expect(moved).toContain('✅  UIG-26')
+    expect(moved).toContain('1 of 1 done; 1 moved to the next phase')
+    expect(moved).toContain('⏭ 1 next phase')
+    const waiting = await runStatus({ root: app('status-waiting', { 'scripts/gates-checks.mjs': checks('') }) })
+    expect(waiting).toContain('⬜  UIG-26')
+    expect(waiting).not.toContain('next phase')
+  })
+
+  // A made app's UIG-33 row printed with no title (UIG-26): every row the package checks in an app has one.
+  it('gives every ticket an app checks a title', () => {
+    const tickets = appChecks(helpers(app('titles', {})), { page: 'src/pages/HomePage.tsx' })
+    expect(tickets.filter((t) => !t.title).map((t) => t.ref)).toEqual([])
+  })
 })

package/src/gates/status.ts

@@ -101,6 +101,8 @@ export interface TicketListEntry {
   title: string
   parts?: string[]
   aggregate?: boolean
+  /** Moved to the next phase, and by whose ruling: still checked, shown ⏭, and not waited for by the aggregate. */
+  later?: string
 }
 export interface GateSpec {
   repo: string
@@ -119,6 +121,7 @@ interface Row {
   checks: (CheckResult & { repo: string; what: string })[]
   status?: string
   aggregate?: boolean
+  later?: string
 }
 interface Report {
   schema: 1
@@ -199,9 +202,11 @@ export function helpers(ROOT: string): GateHelpers {
 
     async contract(appDir) {
       try {
-        const { buildAppRegistry, contractProblems, CONTRACT_KINDS } = await import('../registry/index')
+        const { buildAppRegistry, contractProblems, nameableParts, CONTRACT_KINDS } = await import('../registry/index')
         const registry = buildAppRegistry({ root: abs(appDir) })
-        const problems = contractProblems(registry, abs(appDir))
+        // The package's catalogue, beside its package.json: a page may name its parts too, as in CI.
+        const pkg = createRequire(import.meta.url)('../../registry.json') as Parameters<typeof nameableParts>[1]
+        const problems = contractProblems(registry, abs(appDir), nameableParts(registry, pkg))
         const owed = registry.entries.filter((entry) => (CONTRACT_KINDS as readonly string[]).includes(entry.app?.class ?? '')).length
         if (problems.length) return FAIL(`${problems.length} of ${owed}; the first: ${problems[0]}`)
         return PASS(`all ${owed} reusable parts keep the usage-page contract and are drawn somewhere`)
@@ -445,7 +450,7 @@ export function helpers(ROOT: string): GateHelpers {
 
 // ── running the checks ─────────────────────────────────────────────────────
 
-const STATUS: Record<string, string> = { done: '✅', started: '🚧', none: '⬜', unknown: '❔' }
+const STATUS: Record<string, string> = { done: '✅', started: '🚧', none: '⬜', unknown: '❔', later: '⏭' }
 
 function statusOf(checks: CheckResult[]) {
   const n = (r: CheckResult['result']) => checks.filter((c) => c.result === r).length
@@ -553,6 +558,7 @@ function printRows(rows: Row[], { showOwner, detail }: { showOwner: boolean; det
     const pass = r.checks.filter((c) => c.result === 'pass').length
     const count = r.checks.length ? `${pass} of ${r.checks.length}` : 'no checks here'
     lines.push(`${STATUS[r.status ?? 'unknown']}  ${pad(r.ref, 7)} ${pad(r.title ?? '', width)}  ${showOwner ? pad(r.ownerRepo ?? '', 10) : ''}${count}`)
+    if (r.later) lines.push(`        ${r.later}`)
     if (detail || r.status === 'started' || r.status === 'unknown') {
       for (const c of r.checks) {
         const mark = { pass: '✓', part: '½', fail: '✗', unknown: '?' }[c.result]
@@ -565,7 +571,8 @@ function printRows(rows: Row[], { showOwner, detail }: { showOwner: boolean; det
 
 function summary(rows: Row[]) {
   const n = (s: string) => rows.filter((r) => r.status === s).length
-  return `${STATUS.done} ${n('done')} done · ${STATUS.started} ${n('started')} started · ${STATUS.none} ${n('none')} not started · ${STATUS.unknown} ${n('unknown')} could not check`
+  const later = n('later') ? ` · ${STATUS.later} ${n('later')} next phase` : ''
+  return `${STATUS.done} ${n('done')} done · ${STATUS.started} ${n('started')} started · ${STATUS.none} ${n('none')} not started · ${STATUS.unknown} ${n('unknown')} could not check${later}`
 }
 
 export interface StatusOptions {
@@ -667,13 +674,17 @@ export async function runStatus({ root = process.cwd(), app = '.', json = false,
     for (const f of found.filter((f) => f.missing)) {
       if ((t.parts ?? []).includes(f.name) || t.owner === f.name) checks.push({ repo: f.name, what: `${f.name}'s part`, result: 'unknown', detail: f.note })
     }
-    return { ref: t.ref, title: t.title, ownerRepo: t.owner, checks, aggregate: t.aggregate }
+    return { ref: t.ref, title: t.title, ownerRepo: t.owner, checks, aggregate: t.aggregate, later: t.later }
   })
-  for (const row of rows) row.status = statusOf(row.checks)
+  // A ticket moved to the next phase is still checked (--detail shows how far it is), but it
+  // reads ⏭ whatever its checks say, and the aggregate does not wait for it.
+  for (const row of rows) row.status = row.later ? 'later' : statusOf(row.checks)
   for (const row of rows.filter((r) => r.aggregate)) {
-    const others = rows.filter((r) => r !== row)
+    const others = rows.filter((r) => r !== row && !r.later)
     const done = others.filter((r) => r.status === 'done').length
-    row.checks.push({ repo: 'all', what: 'every other ticket is done', ...(done === others.length ? PASS(`${done} of ${others.length} done`) : FAIL(`${done} of ${others.length} done`)) })
+    const moved = rows.filter((r) => r.later).length
+    const said = `${done} of ${others.length} done${moved ? `; ${moved} moved to the next phase` : ''}`
+    row.checks.push({ repo: 'all', what: 'every other ticket of this phase is done', ...(done === others.length ? PASS(said) : FAIL(said)) })
     row.status = statusOf(row.checks)
   }
 

package/src/registry/cli.ts

@@ -36,7 +36,7 @@ import { existsSync, mkdirSync, mkdtempSync, readFileSync, writeFileSync } from
 import { tmpdir } from 'node:os'
 import { basename, dirname, join, relative, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { CONTRACT_KINDS, contractProblems, linkProblems, nameProblems } from './contract'
+import { CONTRACT_KINDS, contractProblems, linkProblems, nameableParts, nameProblems } from './contract'
 import { findInRegistries, formatFindings } from './find'
 import { behindBy, findSiblings, workspaceOf } from './siblings'
 import { loaderPath, loaderProblem, loaderText, repositoryOf, settingsPath, settingsWithSearch } from './skill'
@@ -280,7 +280,7 @@ async function main(): Promise<number> {
         // The usage-page contract and the story links (UIG-19): the one copy, run by every app's `gate` job.
         // A When not may name a part of the package or of this app (B8).
         const pkg = readPackageRegistry()
-        const known = new Set([...pkg.entries, ...registry.entries].map((e) => e.name))
+        const known = nameableParts(registry, pkg)
         const broken = contractProblems(registry, root, known)
         if (broken.length) {
           process.stderr.write(`${broken.length === 1 ? 'a part breaks' : `${broken.length} parts break`} the usage-page contract:\n  ${broken.join('\n  ')}\n`)

package/src/registry/contract.test.ts

@@ -13,12 +13,14 @@
  *   used to call drawn nowhere;
  * - a Windows checkout, read with CRLF.
  */
-import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
 import { tmpdir } from 'node:os'
 import { dirname, join } from 'node:path'
 import { afterAll, describe, expect, it } from 'vitest'
 import { buildAppRegistry } from './app'
-import { contractProblems, hasSeenIn, linkProblems, nameProblems, pageProblem, whenNotProblem } from './contract'
+import { helpers } from '../gates/status'
+import { contractProblems, hasSeenIn, linkProblems, nameableParts, nameProblems, pageProblem, whenNotProblem } from './contract'
+import type { Registry } from './schema'
 
 const made: string[] = []
 afterAll(() => {
@@ -128,6 +130,20 @@ describe('an app against the contract', () => {
     expect(contractProblems(buildAppRegistry({ root: dir, repo: 'fixture' }), dir)).toEqual([])
   })
 
+  // UIG-26: gates:status knew only the app's own parts, and read six of Peek's pages as broken that CI passed.
+  it('lets a page name a package part, in estiva-ui check and in gates:status alike', async () => {
+    const dir = app({
+      'src/Badge.tsx': part('Badge'),
+      'src/Badge.mdx': PAGE.replace('No alternative: a count has only this badge.', 'A framed column is `Panel`.'),
+      'src/Badge.stories.tsx': "import { Badge } from './Badge'\nconst meta = { title: 'Parts/Badge', component: Badge }\nexport default meta\nexport const Default = {}\n",
+    })
+    const registry = buildAppRegistry({ root: dir, repo: 'fixture' })
+    expect(contractProblems(registry, dir)).toEqual([expect.stringContaining('"When not" names no other part')])
+    const pkg = JSON.parse(readFileSync(join(process.cwd(), 'registry.json'), 'utf8')) as Registry
+    expect(contractProblems(registry, dir, nameableParts(registry, pkg))).toEqual([])
+    expect(await helpers(dir).contract('.')).toMatchObject({ result: 'pass' })
+  })
+
   it('names a reusable part with no page, and the file to write', () => {
     const dir = app({ 'src/Badge.tsx': part('Badge') })
     expect(contractProblems(buildAppRegistry({ root: dir, repo: 'fixture' }), dir)).toEqual([

package/src/registry/contract.ts

@@ -81,6 +81,16 @@ export function linkProblems(registry: Registry, ids: ReadonlySet<string>): stri
   return problems
 }
 
+/**
+ * The parts an app's page may name under When and When not: the package's and
+ * the app's own (B8). The one copy: `estiva-ui check` and `gates:status` both
+ * read it, so they cannot disagree. Status once knew the app's parts only, and
+ * read six of Peek's pages as broken that CI passed (UIG-26).
+ */
+export function nameableParts(app: Registry, pkg: Registry): Set<string> {
+  return new Set([...pkg.entries, ...app.entries].map((e) => e.name))
+}
+
 /**
  * Every way an app's catalogue breaks the contract, one line each, naming the
  * part, its file and what to do. Empty when it keeps it.

package/src/registry/index.ts

@@ -12,7 +12,7 @@
  */
 export { buildRegistry, readIndexExports, serializeRegistry, type BuildOptions } from './build'
 export { buildAppRegistry, type AppBuildOptions } from './app'
-export { CONTRACT_KINDS, NO_ALTERNATIVE, PAGE_SECTIONS, contractProblems, hasSeenIn, linkProblems, namedParts, pageProblem, whenNotProblem } from './contract'
+export { CONTRACT_KINDS, NO_ALTERNATIVE, PAGE_SECTIONS, contractProblems, hasSeenIn, linkProblems, nameableParts, namedParts, pageProblem, whenNotProblem } from './contract'
 export { docsLink, findInRegistries, findInRegistry, formatFindings, type Finding } from './find'
 export {
   CLASSES,