@mnstry/atelier 0.2.0-alpha.5 → 0.2.0-alpha.8

package/src/ui/presentation/browser.mjs

@@ -0,0 +1,278 @@
+import { resizeRequest, keyboardResize, editValueError, deliveryMessage } from './state.mjs'
+import { assertPresentation } from './contract.mjs'
+import { renderPresentation } from './web.mjs'
+
+const bindings = new WeakMap()
+
+// Scoped widget behavior only. No document/global keyboard listener, transport,
+// storage, command catalog or business transition is installed.
+export function bindPresentation(root, model, { onRequest } = {}) {
+  assertPresentation(model)
+  if (!root || root.dataset.apRoot !== model.id || model.schema !== 'atelier.presentation/v1' || model.version !== '1.0.0') throw new TypeError('root/model binding mismatch')
+  if (bindings.has(root)) throw new TypeError('presentation already bound')
+  let snapshot = structuredClone(model)
+  let nodes = new Map(snapshot.nodes.map(node => [node.id, node]))
+  let panes = new Map(snapshot.panes.map(pane => [pane.id, pane]))
+  let output = root.querySelector('[data-ap-delivery]')
+  let dialog = root.querySelector('[data-ap-confirm]')
+  const pending = new Map()
+  const drafts = new Map()
+  const listeners = []
+  let disposed = false, confirmation = null, opener = null, drag = null, composing = false
+  let queuedUpdate = null, updateRevision = 0
+  const listen = (target, event, handler, capture = false) => {
+    if (!target) return
+    target.addEventListener(event, handler, capture)
+    listeners.push(() => target.removeEventListener(event, handler, capture))
+  }
+  const say = text => { if (!disposed && output) output.textContent = text }
+  const validateDraft = (control, node) => {
+    const error = editValueError(control.value)
+    control.setCustomValidity(error ?? '')
+    const message = root.querySelector('[data-ap-edit-error="' + node.id + '"]')
+    if (message) { message.textContent = error ?? ''; message.hidden = !error }
+    if (error || node.error) control.setAttribute('aria-invalid', 'true')
+    else control.removeAttribute('aria-invalid')
+    const descriptions = [node.error ? snapshot.id + ':node:' + node.id + ':error' : '', error ? control.id + ':limit' : ''].filter(Boolean)
+    if (descriptions.length) control.setAttribute('aria-describedby', descriptions.join(' '))
+    else control.removeAttribute('aria-describedby')
+    return error
+  }
+  const syncBusy = () => {
+    for (const control of root.querySelectorAll('button,input,textarea')) {
+      const id = control.dataset.apAction ?? control.dataset.apSelect ?? control.dataset.apMove ?? control.dataset.apStep ?? control.dataset.apResize ?? control.dataset.apEdit
+      if (!disposed && pending.has(id)) control.setAttribute('aria-busy', 'true')
+      else control.removeAttribute('aria-busy')
+    }
+  }
+  const restoreFocus = () => {
+    if (opener?.isConnected) opener.focus()
+    else root.querySelector('[data-ap-pane]')?.focus()
+    opener = null
+  }
+  const close = () => {
+    confirmation = null
+    if (dialog?.open) dialog.close()
+    restoreFocus()
+  }
+  const send = async (request, control) => {
+    if (disposed || typeof onRequest !== 'function') return
+    if (queuedUpdate && request.kind !== 'edit') { say('Workspace update is waiting for text composition. No request sent.'); return }
+    if (pending.has(request.id) && request.kind !== 'edit') { say(deliveryMessage('suppressed')); return }
+    // Edits reach the host synchronously, including while earlier delivery is
+    // pending. A re-render/unmount cannot erase an undelivered coalesced draft.
+    pending.set(request.id, (pending.get(request.id) ?? 0) + 1)
+    syncBusy()
+    // Native disabled would eject keyboard focus. Pending is guarded above.
+    say(deliveryMessage('sending'))
+    let outcome = 'delivered'
+    try {
+      await onRequest(Object.freeze({ schema: 'atelier.presentation-request/v1', version: '1.0.0', presentationId: snapshot.id, status: 'proposed', executionAuthority: false, ...request }))
+    } catch {
+      outcome = 'failed'
+    } finally {
+      const remaining = pending.get(request.id) - 1
+      if (remaining) pending.set(request.id, remaining)
+      else pending.delete(request.id)
+      if (!disposed) { syncBusy(); say(deliveryMessage(outcome, [...pending.values()].reduce((sum, count) => sum + count, 0))) }
+    }
+  }
+  const requestResize = (paneId, value, control) => {
+    const pane = panes.get(paneId)
+    if (!pane?.width) return
+    const next = resizeRequest(pane.width, value)
+    // Geometry remains host-owned. The slider is a request, not optimistic state.
+    const slider = root.querySelector('[data-ap-resize="' + paneId + '"]')
+    if (slider) slider.value = pane.width.value
+    if (next !== pane.width.value) void send({ kind: 'resize', id: paneId, value: next }, control)
+  }
+  const move = (nodeId, itemId, position, control) => {
+    const node = nodes.get(nodeId), from = node?.items?.findIndex(item => item.id === itemId)
+    if (node?.type !== 'sequence' || !node.reorderable || from < 0 || !Number.isInteger(position) || position < 0 || position >= node.items.length || position === from) return
+    void send({ kind: 'move', id: nodeId, itemId, position }, control)
+  }
+  listen(root, 'click', event => {
+    const control = event.target.closest?.('button')
+    if (!control || !root.contains(control) || control.disabled) return
+    if (queuedUpdate) { say('Workspace update is waiting for text composition. No request sent.'); return }
+    const actionId = control.dataset.apAction
+    if (actionId) {
+      const node = nodes.get(actionId)
+      if (node?.type !== 'action' || node.disabled || pending.has(node.id)) return
+      if (node.confirmation) {
+        if (!dialog || typeof dialog.showModal !== 'function') { say('Confirmation is unavailable in this host. No request sent.'); return }
+        confirmation = node
+        opener = control
+        root.querySelector('[data-ap-confirm-title]').textContent = node.confirmation.title
+        root.querySelector('[data-ap-confirm-description]').textContent = node.confirmation.description
+        root.querySelector('[data-ap-cancel]').textContent = node.confirmation.cancelLabel
+        root.querySelector('[data-ap-confirm-action]').textContent = node.confirmation.confirmLabel
+        dialog.showModal()
+        root.querySelector('[data-ap-cancel]').focus()
+      } else void send({ kind: 'action', id: node.id, actionRef: node.actionRef }, control)
+    } else if (control.hasAttribute('data-ap-cancel')) close()
+    else if (control.hasAttribute('data-ap-confirm-action') && confirmation) {
+      const node = confirmation, source = opener
+      close()
+      void send({ kind: 'action', id: node.id, actionRef: node.actionRef, presentationConfirmed: true }, source)
+    } else if (control.dataset.apSelect) {
+      const node = nodes.get(control.dataset.apSelect), item = node?.items?.find(item => item.id === control.dataset.apItem)
+      if (item) void send({ kind: 'selection', id: node.id, itemId: item.id }, control)
+    } else if (control.dataset.apMove) {
+      move(control.dataset.apMove, control.dataset.apItem, Number(control.dataset.apPosition), control)
+    } else if (control.dataset.apStep) {
+      const pane = panes.get(control.dataset.apStep), delta = Number(control.dataset.apDelta)
+      if (pane?.width && [-1, 1].includes(delta)) requestResize(pane.id, pane.width.value + delta, control)
+    }
+  })
+  listen(root, 'dragstart', event => {
+    const item = event.target.closest?.('[data-ap-drag]'), node = nodes.get(item?.dataset.apDrag)
+    if (!item || !root.contains(item) || !node?.reorderable || typeof onRequest !== 'function') { event.preventDefault(); return }
+    drag = { id: node.id, itemId: item.dataset.apItem }
+    item.dataset.apDragging = 'true'
+    event.dataTransfer?.setData('text/plain', item.dataset.apItem)
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+  })
+  const endDrag = () => { drag = null; root.querySelectorAll('[data-ap-dragging]').forEach(item => item.removeAttribute('data-ap-dragging')) }
+  listen(root, 'dragover', event => { if (drag && event.target.closest?.('[data-ap-drag]')?.dataset.apDrag === drag.id) event.preventDefault() })
+  listen(root, 'drop', event => {
+    const item = event.target.closest?.('[data-ap-drag]')
+    if (drag && item?.dataset.apDrag === drag.id) {
+      event.preventDefault()
+      move(drag.id, drag.itemId, nodes.get(drag.id).items.findIndex(x => x.id === item.dataset.apItem))
+    }
+    endDrag()
+  })
+  listen(root, 'dragend', endDrag)
+  listen(root, 'change', event => {
+    const control = event.target
+    if (control.dataset.apResize) {
+      const value = Number(control.value)
+      if (Number.isFinite(value)) requestResize(control.dataset.apResize, value, control)
+    }
+  })
+  listen(root, 'keydown', event => {
+    const control = event.target, pane = panes.get(control.dataset.apResize)
+    if (!pane?.width || control.disabled || event.altKey || event.ctrlKey || event.metaKey) return
+    const next = keyboardResize(pane.width, event.key, snapshot.direction)
+    if (next !== null) { event.preventDefault(); requestResize(pane.id, next, control) }
+  })
+  const edit = event => {
+    const control = event.target, node = nodes.get(control.dataset.apEdit)
+    if (node && ['field', 'editor'].includes(node.type) && !node.disabled) {
+      drafts.set(node.id, control.value)
+      if (event.isComposing || composing) return
+      // A newer host model may have removed/disabled this control or explicitly
+      // reset its draft while the old DOM was still composing. Do not send it.
+      const nextNode = queuedUpdate?.model.nodes.find(next => next.id === node.id)
+      if (queuedUpdate && (!nextNode || nextNode.disabled || nextNode.type !== node.type || nextNode.input !== node.input || queuedUpdate.options.discardDrafts)) return
+      const error = validateDraft(control, node)
+      if (error) { say(error); return }
+      void send({ kind: 'edit', id: node.id, value: control.value })
+    }
+  }
+  listen(root, 'input', edit)
+  listen(root, 'compositionstart', () => { composing = true })
+  listen(root, 'compositionend', event => {
+    composing = false
+    const queued = queuedUpdate, revision = updateRevision
+    edit(event)
+    // A synchronous host callback may already have supplied a newer model.
+    // Never overwrite it with the model queued before the final composed edit.
+    if (queued && !disposed && revision === updateRevision) update(queued.model, queued.options)
+  })
+  listen(root, 'cancel', event => { if (event.target === dialog) { event.preventDefault(); close() } }, true)
+  // This dialog contains exactly two controls. Keep Tab inside its local scope;
+  // no command shortcuts or document-level focus bridge are registered.
+  listen(root, 'keydown', event => {
+    if (event.key !== 'Tab' || !dialog?.open || !dialog.contains(event.target)) return
+    const first = dialog.querySelector('[data-ap-cancel]')
+    const last = dialog.querySelector('[data-ap-confirm-action]')
+    if (event.shiftKey && root.ownerDocument.activeElement === first) { event.preventDefault(); last.focus() }
+    else if (!event.shiftKey && root.ownerDocument.activeElement === last) { event.preventDefault(); first.focus() }
+  })
+  listen(root, 'close', event => { if (event.target === dialog) { confirmation = null; if (opener) restoreFocus() } }, true)
+  if (typeof onRequest !== 'function') {
+    for (const control of root.querySelectorAll('button,input,textarea')) {
+      const previous = control.disabled
+      control.disabled = true
+      listeners.push(() => { control.disabled = previous })
+    }
+    say('Read-only view. No host request handler is connected.')
+  }
+  const dispose = () => {
+    if (disposed) return
+    if (dialog?.open) close()
+    disposed = true
+    queuedUpdate = null
+    composing = false
+    endDrag()
+    drafts.clear()
+    syncBusy()
+    for (const remove of listeners.reverse()) remove()
+    bindings.delete(root)
+  }
+  const update = (nextModel, { discardDrafts = false, tokenOverrides = {} } = {}) => {
+    assertPresentation(nextModel)
+    if (disposed || nextModel.id !== snapshot.id) throw new TypeError('update requires the same live presentation identity')
+    const rendered = renderPresentation(nextModel, { tokenOverrides })
+    updateRevision++
+    if (composing) {
+      queuedUpdate = { model: structuredClone(nextModel), options: { discardDrafts, tokenOverrides: structuredClone(tokenOverrides) } }
+      if (dialog?.open) close()
+      endDrag()
+      return api
+    }
+    queuedUpdate = null
+    const template = root.ownerDocument.createElement('template')
+    template.innerHTML = rendered
+    const next = template.content.querySelector('[data-ap-root]')
+    if (dialog?.open) close()
+    endDrag()
+    const focused = root.ownerDocument.activeElement
+    const keys = ['id', 'data-ap-select', 'data-ap-item', 'data-ap-move', 'data-ap-position', 'data-ap-step', 'data-ap-delta', 'href']
+    const identity = focused && root.contains(focused) ? keys.map(key => [key, focused.getAttribute(key)]) : null
+    const selection = focused && 'selectionStart' in focused ? [focused.selectionStart, focused.selectionEnd, focused.selectionDirection] : null
+    if (discardDrafts) drafts.clear()
+    const previousNodes = nodes
+    snapshot = structuredClone(nextModel)
+    nodes = new Map(snapshot.nodes.map(node => [node.id, node]))
+    panes = new Map(snapshot.panes.map(pane => [pane.id, pane]))
+    for (const [id, value] of drafts) if (!nodes.has(id) || nodes.get(id).type !== previousNodes.get(id)?.type || nodes.get(id).input !== previousNodes.get(id)?.input || nodes.get(id).value === value) drafts.delete(id)
+    // Email/number inputs have no public selection API. Retain the focused
+    // control's internal caret when the host refreshes the same field; copy
+    // validated presentation attributes and avoid a redundant value write.
+    if (focused?.dataset.apEdit && root.contains(focused) && ['email', 'number'].includes(focused.type)) {
+      const replacement = next.querySelector('[data-ap-edit="' + focused.dataset.apEdit + '"]')
+      if (replacement?.tagName === focused.tagName && replacement.type === focused.type) {
+        const value = drafts.get(focused.dataset.apEdit) ?? replacement.value
+        for (const attr of [...focused.attributes]) if (!replacement.hasAttribute(attr.name)) focused.removeAttribute(attr.name)
+        for (const attr of replacement.attributes) if (focused.getAttribute(attr.name) !== attr.value) focused.setAttribute(attr.name, attr.value)
+        if (focused.value !== value) focused.value = value
+        replacement.replaceWith(focused)
+      }
+    }
+    root.replaceChildren(...next.childNodes)
+    for (const attr of next.attributes) root.setAttribute(attr.name, attr.value)
+    output = root.querySelector('[data-ap-delivery]')
+    dialog = root.querySelector('[data-ap-confirm]')
+    for (const control of root.querySelectorAll('[data-ap-edit]')) {
+      if (drafts.has(control.dataset.apEdit) && control.value !== drafts.get(control.dataset.apEdit)) control.value = drafts.get(control.dataset.apEdit)
+      const error = validateDraft(control, nodes.get(control.dataset.apEdit))
+      if (error) say(error)
+    }
+    if (typeof onRequest !== 'function') for (const control of root.querySelectorAll('button,input,textarea')) control.disabled = true
+    syncBusy()
+    if (identity) {
+      const target = [...root.querySelectorAll('button,input,textarea,a,[tabindex]')].find(element => identity.every(([key, value]) => element.getAttribute(key) === value))
+      if (target && !target.disabled) {
+        target.focus({ preventScroll: true })
+        if (selection && selection[0] !== null && typeof target.setSelectionRange === 'function' && ['text', 'search', 'textarea'].includes(target.type)) target.setSelectionRange(...selection)
+      } else root.querySelector('[data-ap-pane]')?.focus({ preventScroll: true })
+    }
+    return api
+  }
+  bindings.set(root, dispose)
+  const api = Object.freeze({ dispose, update, get isComposing() { return composing }, get hasPendingUpdate() { return queuedUpdate !== null } })
+  return api
+}

package/src/ui/presentation/contract.mjs

@@ -0,0 +1,116 @@
+import { presentationSchema, paneSchema } from './schema.generated.mjs'
+import { matchesPresentationSchema } from './schema-check.mjs'
+import { canonicalize } from '../../attestation/jcs.mjs'
+
+export const PRESENTATION_VERSION = '1.0.0'
+export const PRESENTATION_SCHEMA = 'atelier.presentation/v1'
+export const PRESENTATION_BYTE_LIMIT = 1048576
+const validateModel = value => matchesPresentationSchema(presentationSchema, value)
+const validatePaneSchema = value => matchesPresentationSchema(paneSchema, value)
+
+function jsonData(value) {
+  const queue = [[value, 0]]
+  let count = 0
+  let stringBytes = 0
+  const size = value => {
+    if (value.length > PRESENTATION_BYTE_LIMIT) return false
+    stringBytes += new TextEncoder().encode(JSON.stringify(value)).length
+    return stringBytes <= PRESENTATION_BYTE_LIMIT
+  }
+  while (queue.length) {
+    const [item, depth] = queue.pop()
+    if (++count > 20000 || depth > 12) return false
+    if (typeof item === 'string') { if (!size(item)) return false; continue }
+    if (item === null || typeof item === 'boolean') continue
+    if (typeof item === 'number' && Number.isFinite(item)) continue
+    if (typeof item !== 'object') return false
+    if (!Array.isArray(item) && Object.getPrototypeOf(item) !== Object.prototype && Object.getPrototypeOf(item) !== null) return false
+    for (const [key, d] of Object.entries(Object.getOwnPropertyDescriptors(item))) {
+      if (!Object.hasOwn(d, 'value')) return false
+      if (!Array.isArray(item) && !size(key)) return false
+      queue.push([d.value, depth + 1])
+    }
+  }
+  // Count punctuation, escaping and numeric encodings using the same canonical
+  // representation emitted by serializePresentation. No getters remain here.
+  try { return new TextEncoder().encode(canonicalize(value)).length <= PRESENTATION_BYTE_LIMIT }
+  catch { return false }
+}
+
+export function safeReference(value, { asset = false } = {}) {
+  if (typeof value !== 'string' || /[\u0000-\u0020\\<>]/u.test(value)) return false
+  if (!value.startsWith('/') && !(value.startsWith('#') && !asset)) return false
+  if (value.startsWith('//') || /%2f|%5c|%00/i.test(value)) return false
+  return true
+}
+
+function widthErrors(pane) {
+  return pane.width && (pane.width.min > pane.width.max || pane.width.value < pane.width.min || pane.width.value > pane.width.max)
+    ? ['pane width must satisfy min <= value <= max'] : []
+}
+
+export function validatePanePresentation(value) {
+  if (!jsonData(value)) return ['pane must be bounded plain JSON']
+  if (!validatePaneSchema(value)) return ['invalid pane shape']
+  return widthErrors(value)
+}
+
+export function validatePresentation(value) {
+  if (!jsonData(value)) return ['presentation must be bounded plain JSON']
+  if (!validateModel(value)) return ['invalid presentation shape or version']
+  const errors = []
+  const ids = new Set()
+  for (const entry of [...value.panes, ...value.nodes, ...value.navigation]) {
+    if (ids.has(entry.id)) errors.push('duplicate presentation identity')
+    ids.add(entry.id)
+  }
+  const nodes = new Map(value.nodes.map(node => [node.id, node]))
+  const panes = new Set(value.panes.map(pane => pane.id))
+  const mounted = new Set()
+  for (const pane of value.panes) {
+    errors.push(...widthErrors(pane))
+    for (const ref of pane.blocks) {
+      if (!nodes.has(ref)) errors.push('unknown pane block')
+      if (mounted.has(ref)) errors.push('block mounted more than once')
+      mounted.add(ref)
+    }
+  }
+  if (value.panes.filter(p => p.role === 'primary').length !== 1) errors.push('exactly one primary pane required')
+  for (const nav of value.navigation) if (!panes.has(nav.target)) errors.push('unknown navigation target')
+  for (const node of value.nodes) {
+    if (node.type === 'action' && node.disabled && !node.reason) errors.push('disabled action needs visible reason')
+    if (node.type === 'media' && !safeReference(node.src, { asset: true })) errors.push('media source must be a local path')
+    if (node.items) {
+      const localIds = new Set()
+      for (const item of node.items) {
+        if (localIds.has(item.id)) errors.push('duplicate item identity')
+        localIds.add(item.id)
+        if (item.href && !safeReference(item.href)) errors.push('link must be a local path or fragment')
+      }
+      for (const edge of node.edges ?? []) if (!localIds.has(edge.from) || !localIds.has(edge.to)) errors.push('unknown graph endpoint')
+    }
+    for (const ref of node.actions ?? []) {
+      if (nodes.get(ref)?.type !== 'action') errors.push('unknown action reference')
+      if (mounted.has(ref)) errors.push('action mounted more than once')
+      mounted.add(ref)
+    }
+  }
+  for (const id of nodes.keys()) if (!mounted.has(id)) errors.push('unmounted node')
+  return errors
+}
+
+export function assertPresentation(value) {
+  const errors = validatePresentation(value)
+  if (errors.length) throw new TypeError(errors.join('; '))
+  return value
+}
+
+export function serializePresentation(value) {
+  assertPresentation(value)
+  return canonicalize(value)
+}
+
+export function parsePresentation(serialized) {
+  if (typeof serialized !== 'string' || new TextEncoder().encode(serialized).length > PRESENTATION_BYTE_LIMIT) throw new TypeError('presentation byte limit')
+  return assertPresentation(JSON.parse(serialized))
+}

package/src/ui/presentation/index.mjs

@@ -0,0 +1,7 @@
+// Opt-in library surface: importing the root CLI does not install a presenter.
+export { PRESENTATION_SCHEMA, PRESENTATION_VERSION, PRESENTATION_BYTE_LIMIT, validatePresentation, assertPresentation, validatePanePresentation, parsePresentation, serializePresentation } from './contract.mjs'
+export { tokenContract, resolveTokens, tokenVariables, contrastRatio } from './tokens.mjs'
+export { presentationState, resizeRequest, keyboardResize, EDIT_CODE_POINT_LIMIT, editValueError } from './state.mjs'
+export { renderPresentation, renderPresentationDocument, renderReadOnlyDocument } from './web.mjs'
+export { presentationStyles } from './styles.mjs'
+export { comparePresentationProofs } from './proof.mjs'

package/src/ui/presentation/native.mjs

@@ -0,0 +1,153 @@
+import { assertPresentation } from './contract.mjs'
+import { resolveTokens } from './tokens.mjs'
+import { editValueError, deliveryMessage, toneLabel } from './state.mjs'
+
+// Inject the consumer's existing React/native (or Tamagui native) primitives.
+// The root imports no framework and installs no host/window/global driver.
+export function createNativePresentation({ React, View, Text, Pressable, TextInput, ScrollView, Image }) {
+  if (![React?.createElement, React?.useState, React?.useRef, React?.useEffect].every(x => typeof x === 'function') ||
+      [View, Text, Pressable, TextInput, ScrollView, Image].some(x => !x)) throw new TypeError('native primitive bindings required')
+  const h = React.createElement
+  return function NativePresentation({ model, onRequest, confirm, resolveAsset, tokenOverrides = {}, containerWidth = 320 }) {
+    assertPresentation(model)
+    if (!Number.isFinite(containerWidth) || containerWidth <= 0) throw new TypeError('container width required')
+    const tokens = resolveTokens(model.theme, tokenOverrides)
+    const totalWeight = model.panes.reduce((sum, pane) => sum + (pane.width?.value ?? 50), 0)
+    const paneSpace = containerWidth - tokens.spacing.large * (model.panes.length + 1)
+    const [delivery, setDelivery] = React.useState('')
+    const [, refreshPending] = React.useState(0)
+    const active = React.useRef(true)
+    const pending = React.useRef(new Map())
+    const drafts = React.useRef(new Map())
+    const current = React.useRef({ model, onRequest, confirm })
+    const generation = React.useRef(0)
+    const signature = JSON.stringify(model)
+    // Only committed model changes revoke pending confirmation. Inline callback
+    // identities routinely change when a host opens its confirmation dialog.
+    const useCommitEffect = React.useLayoutEffect ?? React.useEffect
+    useCommitEffect(() => {
+      if (current.current.signature !== signature) generation.current++
+      current.current = { signature, model, onRequest, confirm }
+    }, [signature, onRequest, confirm])
+    for (const [id, value] of drafts.current) if (!model.nodes.some(node => node.id === id && node.value !== value)) drafts.current.delete(id)
+    const confirmations = React.useRef(new Set())
+    React.useEffect(() => { active.current = true; return () => { active.current = false } }, [])
+    const request = async event => {
+      const host = current.current
+      if (typeof host.onRequest !== 'function' || !active.current) return
+      if (pending.current.has(event.id) && event.kind !== 'edit') { setDelivery(deliveryMessage('suppressed')); return }
+      pending.current.set(event.id, (pending.current.get(event.id) ?? 0) + 1)
+      refreshPending(value => value + 1)
+      setDelivery(deliveryMessage('sending'))
+      let outcome = 'delivered'
+      try {
+        await host.onRequest(Object.freeze({ schema: 'atelier.presentation-request/v1', version: '1.0.0', presentationId: host.model.id, status: 'proposed', executionAuthority: false, ...event }))
+      } catch {
+        // Settlement belongs to the request, not the confirmation/model generation.
+        outcome = 'failed'
+      } finally {
+        const remaining = pending.current.get(event.id) - 1
+        if (remaining) pending.current.set(event.id, remaining)
+        else pending.current.delete(event.id)
+        if (active.current) { refreshPending(value => value + 1); setDelivery(deliveryMessage(outcome, [...pending.current.values()].reduce((sum, count) => sum + count, 0))) }
+      }
+    }
+    const style = { color: tokens.color.text, fontFamily: tokens.typography.family, fontSize: tokens.typography.body, lineHeight: tokens.typography.body * tokens.typography.lineHeight }
+    const text = (value, props = {}) => h(Text, { ...props, allowFontScaling: true, style: [style, props.style] }, value)
+    const button = (label, props = {}) => h(Pressable, {
+      accessibilityRole: 'button', accessibilityLabel: label,
+      ...props,
+      style: ({ pressed }) => [ { minHeight: tokens.density.target, minWidth: tokens.density.target, padding: tokens.spacing.medium, borderWidth: tokens.border.width, borderColor: tokens.color.border, borderRadius: tokens.border.radius, backgroundColor: pressed && !props.disabled ? tokens.color.selected : tokens.color.panel, opacity: props.disabled ? tokens.state.disabledOpacity : 1 }, props.style ],
+    }, text(label))
+    const nodes = new Map(model.nodes.map(node => [node.id, node]))
+    const action = node => button(node.label, {
+      key: node.id, disabled: node.disabled || typeof onRequest !== 'function' || pending.current.has(node.id),
+      accessibilityState: { disabled: node.disabled || typeof onRequest !== 'function' || pending.current.has(node.id), busy: pending.current.has(node.id) },
+      accessibilityHint: node.reason,
+      onPress: async () => {
+        if (node.disabled || typeof onRequest !== 'function' || confirmations.current.has(node.id) || pending.current.has(node.id)) return
+        if (node.confirmation) {
+          const confirmCurrent = current.current.confirm
+          if (typeof confirmCurrent !== 'function') { setDelivery('Confirmation is unavailable in this host. No request sent.'); return }
+          let accepted = false
+          const started = generation.current
+          confirmations.current.add(node.id)
+          try { accepted = await confirmCurrent(Object.freeze({ ...node.confirmation, initialFocus: 'cancel', restoreFocus: true })) === true } catch { accepted = false }
+          finally { confirmations.current.delete(node.id) }
+          if (!active.current) return
+          if (started !== generation.current || typeof current.current.onRequest !== 'function' || typeof current.current.confirm !== 'function') {
+            setDelivery('Confirmation is no longer current. No request sent.'); return
+          }
+          if (!accepted) { setDelivery('Confirmation cancelled. No request sent.'); return }
+        }
+        await request({ kind: 'action', id: node.id, actionRef: node.actionRef, ...(node.confirmation ? { presentationConfirmed: true } : {}) })
+      },
+    })
+    const renderNode = node => {
+      let body = []
+      if (node.type === 'action') return h(View, { key: node.id }, action(node), node.reason ? text(node.reason) : null)
+      if (node.tone && toneLabel(node.tone)) body.push(text(toneLabel(node.tone), { style: { fontWeight: '600' } }))
+      if (node.text !== undefined) body.push(text(node.text))
+      if (node.type === 'field' || node.type === 'editor') {
+        const draft = drafts.current.get(node.id) ?? node.value
+        const draftError = editValueError(draft)
+        body.push(h(TextInput, { accessibilityLabel: node.label + (node.required ? ' (required)' : ''), value: draft, editable: !node.disabled && typeof onRequest === 'function',
+          multiline: node.type === 'editor', allowFontScaling: true,
+          inputMode: node.input === 'email' ? 'email' : node.input === 'number' ? 'decimal' : 'text',
+          returnKeyType: node.input === 'search' ? 'search' : 'default',
+          accessibilityState: { disabled: node.disabled || typeof onRequest !== 'function' },
+          style: { ...style, minHeight: tokens.density.target, padding: tokens.spacing.medium, borderWidth: node.error || draftError ? 2 : 1, borderColor: node.error || draftError ? tokens.color.danger : tokens.color.border },
+          onChangeText: value => {
+            // Editing is host-controlled; never claim persistence from this callback.
+            if (node.disabled || typeof onRequest !== 'function') return
+            drafts.current.set(node.id, value)
+            refreshPending(version => version + 1)
+            const error = editValueError(value)
+            if (error) { setDelivery(error); return }
+            void request({ kind: 'edit', id: node.id, value })
+          } }))
+        if (draftError) body.push(text(draftError, { accessibilityLiveRegion: 'polite' }))
+        if (node.error) body.push(text(node.error, { accessibilityLiveRegion: 'polite' }))
+      }
+      if (node.type === 'diff') body.push(text(node.beforeLabel), text(node.before), text(node.afterLabel), text(node.after))
+      if (node.type === 'media') {
+        const source = resolveAsset?.(node.src)
+        body.push(source ? h(Image, { source, accessible: true, accessibilityLabel: node.alt, style: { width: '100%', height: 180, resizeMode: 'contain' } }) : text('Media unavailable in this host: ' + node.alt))
+        if (node.caption) body.push(text(node.caption))
+      }
+      for (const [index, item] of (node.items ?? []).entries()) {
+        body.push(button(item.label, { key: item.id, disabled: typeof onRequest !== 'function',
+          accessibilityState: { selected: item.selected, disabled: typeof onRequest !== 'function' },
+          onPress: () => request(item.href ? { kind: 'navigation', id: node.id, itemId: item.id, href: item.href } : { kind: 'selection', id: node.id, itemId: item.id }),
+          style: item.selected ? { backgroundColor: tokens.color.selected } : {},
+        }))
+        if (item.detail) body.push(text(item.detail))
+        if (node.reorderable) body.push(h(View, { key: item.id + ':move', style: { flexDirection: 'row', flexWrap: 'wrap', gap: tokens.spacing.medium } },
+          ...[-1, 1].map(delta => button('Move ' + item.label + (delta === -1 ? ' earlier' : ' later'), {
+            key: String(delta), disabled: typeof onRequest !== 'function' || index + delta < 0 || index + delta >= node.items.length,
+            onPress: () => { if (index + delta >= 0 && index + delta < node.items.length) return request({ kind: 'move', id: node.id, itemId: item.id, position: index + delta }) },
+          }))))
+      }
+      const labels = new Map((node.items ?? []).map(item => [item.id, item.label]))
+      for (const edge of node.edges ?? []) body.push(text(labels.get(edge.from) + ' — ' + edge.label + ' — ' + labels.get(edge.to)))
+      for (const detail of node.details ?? []) body.push(text(detail.label + ': ' + detail.value))
+      for (const ref of node.actions ?? []) {
+        body.push(action(nodes.get(ref)))
+        if (nodes.get(ref).reason) body.push(text(nodes.get(ref).reason))
+      }
+      return h(View, { key: node.id, style: { gap: tokens.spacing.medium, marginBottom: tokens.spacing.section } },
+        text(node.label, { accessibilityRole: 'header', style: { fontSize: tokens.typography.heading } }), ...body)
+    }
+    return h(ScrollView, { style: { backgroundColor: tokens.color.page, direction: model.direction }, contentContainerStyle: { padding: tokens.spacing.large, gap: tokens.spacing.large }, keyboardShouldPersistTaps: 'handled' },
+      text(model.title, { accessibilityRole: 'header', style: { fontSize: tokens.typography.heading } }),
+      h(View, { style: { flexDirection: 'row', flexWrap: 'wrap', gap: tokens.spacing.medium } }, ...model.navigation.map(item => button(item.label, { key: item.id, disabled: typeof onRequest !== 'function', onPress: () => request({ kind: 'navigation', id: item.id, paneId: item.target }) }))),
+      h(View, { style: { flexDirection: containerWidth <= tokens.layout.narrow ? 'column' : 'row', flexWrap: 'wrap', gap: tokens.spacing.large } },
+        ...model.panes.map(pane => h(View, { key: pane.id, accessibilityLabel: pane.label, style: { flexGrow: containerWidth <= tokens.layout.narrow ? 0 : pane.width?.value ?? 50, flexShrink: 1, flexBasis: containerWidth <= tokens.layout.narrow ? 'auto' : Math.max(tokens.layout.paneMin, paneSpace * (pane.width?.value ?? 50) / totalWeight), minWidth: 0, maxWidth: '100%', padding: tokens.density[model.density], backgroundColor: tokens.color.panel, borderWidth: tokens.border.width, borderColor: tokens.color.border, borderRadius: tokens.border.radius } },
+          text(pane.label, { accessibilityRole: 'header', style: { fontSize: tokens.typography.heading } }),
+          pane.width && containerWidth > tokens.layout.narrow ? h(View, { style: { flexDirection: 'row', flexWrap: 'wrap', gap: tokens.spacing.medium } },
+            button('Decrease width of ' + pane.label, { disabled: typeof onRequest !== 'function' || pane.width.value <= pane.width.min, onPress: () => request({ kind: 'resize', id: pane.id, value: Math.max(pane.width.min, pane.width.value - 1) }) }),
+            button('Increase width of ' + pane.label, { disabled: typeof onRequest !== 'function' || pane.width.value >= pane.width.max, onPress: () => request({ kind: 'resize', id: pane.id, value: Math.min(pane.width.max, pane.width.value + 1) }) })) : null,
+          ...pane.blocks.map(id => renderNode(nodes.get(id)))))),
+      text(delivery || (typeof onRequest === 'function' ? 'Host-connected presentation.' : 'Read-only presentation.'), { accessibilityLiveRegion: 'polite' }))
+  }
+}

package/src/ui/presentation/proof.mjs

@@ -0,0 +1,57 @@
+import { canonicalize } from '../../attestation/jcs.mjs'
+
+const text = value => typeof value === 'string' && value.length > 0 && value.length <= 256
+const positive = value => Number.isFinite(value) && value > 0 && value <= 16384
+const closed = (value, keys) => value !== null && typeof value === 'object' && !Array.isArray(value) &&
+  Object.keys(value).length === keys.length && keys.every(key => Object.hasOwn(value, key))
+const list = (values, predicate) => Array.isArray(values) && values.length > 0 && values.length <= 256 && new Set(values).size === values.length && values.every(predicate)
+function plain(value, seen = new Set(), depth = 0) {
+  if (depth > 10 || seen.size > 10000) return false
+  if (value === null || ['string', 'boolean'].includes(typeof value)) return typeof value !== 'string' || value.length <= 4096
+  if (typeof value === 'number') return Number.isFinite(value)
+  if (typeof value !== 'object' || seen.has(value) || (!Array.isArray(value) && Object.getPrototypeOf(value) !== Object.prototype)) return false
+  seen.add(value)
+  return Object.values(Object.getOwnPropertyDescriptors(value)).every(d => Object.hasOwn(d, 'value') && plain(d.value, seen, depth + 1))
+}
+function environmentValid(env) {
+  return closed(env, ['platform', 'release', 'architecture', 'locale', 'timezone', 'scale', 'font', 'motion', 'viewports', 'themes', 'densities']) &&
+    [env.platform, env.release, env.architecture, env.locale, env.timezone, env.font].every(text) && positive(env.scale) && ['reduce', 'no-preference'].includes(env.motion) &&
+    list(env.viewports, positive) && list(env.themes, x => ['light', 'dark'].includes(x)) && list(env.densities, x => ['comfortable', 'compact'].includes(x))
+}
+function conditionsValid(c, env) {
+  return closed(c, ['width', 'height', 'theme', 'density', 'motion', 'font', 'locale', 'scale']) &&
+    positive(c.width) && positive(c.height) && env.viewports.includes(c.width) && env.themes.includes(c.theme) && env.densities.includes(c.density) &&
+    c.motion === env.motion && c.font === env.font && c.locale === env.locale && c.scale === env.scale
+}
+
+// Comparison is deliberately not baseline acceptance or release authorization.
+export function comparePresentationProofs(baseline, candidate) {
+  const digest = value => typeof value === 'string' && /^[a-f0-9]{64}$/.test(value)
+  const valid = proof => plain(proof) && closed(proof, ['schema', 'status', 'sourceHead', 'sourceDirty', 'sourceDigest', 'runnerDigest', 'fixtureDigest', 'environment', 'scope', 'nativeDeviceAccepted', 'adopterAccepted', 'visualBaselineAccepted', 'runs']) &&
+    proof.schema === 'atelier.presentation-browser-proof/v3' && proof.status === 'passed' && proof.sourceDirty === false &&
+    /^[a-f0-9]{40}$/.test(proof.sourceHead ?? '') && digest(proof.sourceDigest) && digest(proof.fixtureDigest) && digest(proof.runnerDigest) &&
+    proof.scope === 'synthetic-local-browser' && proof.nativeDeviceAccepted === false && proof.adopterAccepted === false && proof.visualBaselineAccepted === false &&
+    environmentValid(proof.environment) && Array.isArray(proof.runs) && proof.runs.length > 0 && proof.runs.length <= 3 &&
+    proof.runs.every(run => closed(run, ['browser', 'version', 'status', 'checks', 'screenshots'])) &&
+    new Set(proof.runs.map(run => run.browser)).size === proof.runs.length &&
+    proof.runs.every(run => ['chromium', 'firefox', 'webkit'].includes(run.browser) && run.status === 'passed' &&
+      text(run.version) && list(run.checks, x => text(x) && /^[a-z0-9:-]+$/.test(x)) &&
+      Array.isArray(run.screenshots) && run.screenshots.length > 0 && run.screenshots.length <= 256 &&
+      run.screenshots.every(frame => closed(frame, ['file', 'sha256', 'capture', 'conditions']) &&
+        closed(frame.capture, ['width', 'height', 'scrollWidth', 'scrollHeight']) &&
+        Object.values(frame.capture).every(n => Number.isSafeInteger(n) && positive(n)) &&
+        frame.capture.width === frame.capture.scrollWidth * frame.conditions.scale &&
+        frame.capture.height === frame.capture.scrollHeight * frame.conditions.scale) &&
+      new Set(run.screenshots.map(frame => frame.file)).size === run.screenshots.length &&
+      run.screenshots.every(frame => /^[a-z0-9-]+\.png$/.test(frame.file) && digest(frame.sha256) && conditionsValid(frame.conditions, proof.environment)))
+  const result = (status, reason, changedFrames = []) => Object.freeze({ status, reason, changedFrames, baselineApprovalVerified: false, executionAuthority: false })
+  try { if (!valid(baseline) || !valid(candidate)) return result('incomparable', 'Both complete proof envelopes and their byte digests are required.') }
+  catch { return result('incomparable', 'Malformed proof data.') }
+  const dimensions = proof => ({ environment: proof.environment, fixtureDigest: proof.fixtureDigest, runnerDigest: proof.runnerDigest,
+    runs: proof.runs.map(run => ({ browser: run.browser, version: run.version, checks: [...run.checks].sort(), frames: run.screenshots.map(({ file, conditions }) => ({ file, conditions })).sort((a, b) => a.file.localeCompare(b.file)) })).sort((a, b) => a.browser.localeCompare(b.browser)) })
+  if (canonicalize(dimensions(baseline)) !== canonicalize(dimensions(candidate))) return result('incomparable', 'Fixture, environment, engine or coverage changed; recapture and obtain an explicit baseline disposition.')
+  const previous = new Map(baseline.runs.flatMap(run => run.screenshots.map(frame => [run.browser + ':' + frame.file, frame.sha256])))
+  const changed = candidate.runs.flatMap(run => run.screenshots.filter(frame => previous.get(run.browser + ':' + frame.file) !== frame.sha256).map(frame => run.browser + ':' + frame.file))
+  return changed.length ? result('review-required', 'Retain the before/after images and explain each change; never auto-accept a new baseline.', changed)
+    : result('unchanged', 'Pixel digests match at equal recorded coverage. Owner acceptance and nonvisual gates remain separate.')
+}