@erclx/canon 5.16.0 → 5.18.0

package/docs/workflow/visual-design-workflow.md

@@ -8,9 +8,9 @@ category: Workflow
 
 Three tiers cover the range from prose-only design docs to a fully graphical design source of truth. Pick one per project based on how UI-heavy the work is, whether stakeholders review visuals, and whether a designer is involved. Tiers stack, so moving up does not invalidate work done at a lower tier.
 
-The tier framework sits alongside [Claude Design](../../wiki/claude/design.md), the one catalog page in this range. Stitch, Excalidraw, and the surrounding MCP and skill ecosystem are named inline below rather than catalogued separately. This page decides when to reach for what.
+The tier framework sits alongside [Claude Design](../../wiki/claude/design.md), the one catalog page in this range. Excalidraw and the surrounding MCP and skill ecosystem are named inline below rather than catalogued separately. This page decides when to reach for what.
 
-Two tools anchor tier 1 and tier 2. Stitch is the agent-addressable default through its MCP server at `stitch.googleapis.com/mcp`, with a free tier of 400 daily credits that covers daily iteration. [Claude Design](../../wiki/claude/design.md), released 2026-04-17 and priced inside Claude subscriptions, is the ceiling tool reserved for codebase extraction and the richly annotated handoff bundle. Each covers a different job, they are not swappable.
+[Claude Design](../../wiki/claude/design.md), released 2026-04-17 and priced inside Claude subscriptions, is the ceiling tool for tier 1 and tier 2. Reserve it for codebase extraction and the richly annotated handoff bundle.
 
 ## Tier 0: prose only
 
@@ -56,21 +56,19 @@ A cell no source anchors ends in `? verify`, and the preview shows that marker b
 
 ASCII and prose stay as source of truth. Add a visual render as a feedback surface for the agent and for human review.
 
-- Stitch via MCP handles agent-driven generation of prototypes and design systems
 - Excalidraw handles agent-driven wireframes when the round-trip canvas loop matters
 - Claude Design joins only when codebase extraction or the annotated handoff bundle is worth the ceiling cost
 
-All three produce derived artifacts, so human edits are review annotations rather than source changes.
+Both produce derived artifacts, so human edits are review annotations rather than source changes.
 
 ### Seed shape
 
-Same as tier 0 with two additions. `WIREFRAMES.md` opts into Excalidraw rendering via a top-of-file marker like `<!-- excalidraw: WIREFRAMES.excalidraw -->`. `DESIGN.md` stays human-maintained, and its content is what the toolkit provisions into Stitch via `create_design_system` when visual generation is needed.
+Same as tier 0 with one addition. `WIREFRAMES.md` opts into Excalidraw rendering via a top-of-file marker like `<!-- excalidraw: WIREFRAMES.excalidraw -->`. `DESIGN.md` stays human-maintained.
 
-Impeccable, if installed, keeps its own root `DESIGN.md` and `PRODUCT.md` in the Stitch DESIGN.md spec format. These are separate files from the toolkit's `canon/DESIGN.md` and are not synced with it. Treat impeccable's pair as its own source of truth for its commands, and the toolkit's `canon/DESIGN.md` as the source other toolkit skills read.
+Impeccable, if installed, keeps its own root `DESIGN.md` and `PRODUCT.md` in its own format. These are separate files from the toolkit's `canon/DESIGN.md` and are not synced with it. Treat impeccable's pair as its own source of truth for its commands, and the toolkit's `canon/DESIGN.md` as the source other toolkit skills read.
 
 ### Tools
 
-- Stitch via MCP at `stitch.googleapis.com/mcp`, Google's Gemini-powered design product. Agent-addressable through `generate_screen_from_text`, `edit_screens`, and `generate_variants`. Default pick for agent-driven visual generation. Free tier of 400 daily credits.
 - Excalidraw canvas server on localhost plus the community [`yctimlin/mcp_excalidraw`](https://github.com/yctimlin/mcp_excalidraw) MCP shim, for projects that need an agent to draw, read back, and revise a canvas. MIT-licensed, plaintext JSON scene format. `describe_scene` and `get_canvas_screenshot` let the agent verify its own layout before claiming it is correct.
 - Playwright MCP ([`microsoft/playwright-mcp`](https://github.com/microsoft/playwright-mcp)) for browser-side verification, driven off the accessibility tree rather than screenshots.
 - Chrome DevTools MCP ([`ChromeDevTools/chrome-devtools-mcp`](https://github.com/ChromeDevTools/chrome-devtools-mcp)) for live frontend debugging: performance traces, network inspection, and DOM and CSS inspection.
@@ -88,17 +86,15 @@ Impeccable, if installed, keeps its own root `DESIGN.md` and `PRODUCT.md` in the
 - Design decisions benefit from visual inspection
 - A single contributor owns both design and implementation
 
-### Stitch vs Excalidraw vs Claude Design in tier 1
+### Excalidraw vs Claude Design in tier 1
 
-The three tools solve non-overlapping halves of the visual companion problem.
-
-Stitch via MCP generates polished prototypes from text and a provisioned design system, scripted from a Claude Code session. Output is human-facing and lives in Stitch. Free daily quota makes it the right pick for frequent iteration.
+The two tools solve non-overlapping halves of the visual companion problem.
 
 Excalidraw gives the agent a canvas it can read back over MCP. Output is agent-facing and persists as a JSON file in the repo. Pick it when Claude Code needs to iterate on wireframes autonomously, not when a human needs polished review artifacts.
 
 Claude Design reads the raw codebase without prose curation and produces a polished handoff bundle with chat history. Weekly quota makes it expensive, so reserve it for the extraction pass or the final handoff moment, not daily iteration.
 
-Most tier 1 projects pick one. Projects with a messy codebase and no curated `DESIGN.md` may want Claude Design once for the initial extraction, then move to Stitch for ongoing work.
+Most tier 1 projects pick one. Projects with a messy codebase and no curated `DESIGN.md` may want Claude Design once for the initial extraction.
 
 ## Tier 2: visual as source of truth
 
@@ -112,7 +108,6 @@ Design happens in a graphical tool. `canon/DESIGN.md` either regenerates from th
 
 - Figma desktop app with the official [Figma Dev Mode MCP](https://www.figma.com/blog/introducing-claude-code-to-figma/) for teams with a dedicated designer already on Figma. Bidirectional sync and Code to Canvas capture of a running Claude Code UI into editable Figma frames.
 - Claude Design with its Claude Code handoff bundle for teams without an existing Figma investment and for solo founders or PMs driving design themselves. One-way handoff, no bidirectional sync. See [Claude Design](../../wiki/claude/design.md).
-- Stitch via MCP as a low-cost complement to either, used for bulk screen generation driven by Claude Code.
 - Playwright and Chrome DevTools MCPs as in tier 1
 
 ### Skills
@@ -132,8 +127,6 @@ Figma wins when a dedicated designer already owns a Figma file, external collabo
 
 Claude Design wins when nobody on the team has a Figma workflow yet and the handoff bundle with chat history is the intended implementation path. Claude Design's handoff is one-way, and its quota limits daily iteration, so it is most useful for the initial extraction pass and the final handoff moment rather than day-to-day design work.
 
-Either of the above pairs cleanly with Stitch via MCP for agent-driven screen generation between the two anchor moments.
-
 ## Decision guide
 
 Four questions. Each yes weighs toward a higher tier.

package/governance/rules/claude/566-output.md

@@ -7,12 +7,10 @@ description: Report file paths correctly for the reading surface and group them
 ## Reporting paths
 
 - After creating or modifying a file, include its path on its own line so the reader can open it. Do not paraphrase paths into prose ("the seeds folder", "your CLAUDE.md").
-- Read `CLAUDE_CODE_ENTRYPOINT` once, at the first response that emits a path, and reuse it for the rest of the session. The surface cannot change mid-session, so a second read only confirms the first.
-- When it reads `claude-desktop`, emit each path as a markdown link carrying the path as its text and an absolute `file://` URI as its target, resolving a relative path against the main project root to build that target. The desktop file tree hides dotted folders, so a bare path into one names a file the reader cannot reach.
-- On every other value, including unset, emit the path bare. A terminal emulator makes it clickable through its own path detection, and link markup defeats that.
-- Both forms govern a path emitted in a response. A path written into a markdown file follows the markdown standard instead, which your toolkit resolves by name, and which backticks a file reference and never repeats it as a link label.
+- Emit a path in the form the surface's own instructions give, such as a markdown link where the harness asks for one, and bare where it gives none. A terminal makes a bare path clickable through its own path detection, and link markup defeats that.
+- That form governs a path emitted in a response. A path written into a markdown file follows the markdown standard instead, which your toolkit resolves by name, and which backticks a file reference and never repeats it as a link label.
 - In a linked worktree (under `.claude/worktrees/<name>/`), emit the absolute path, since the editor is rooted at the main project root and a path relative to the worktree resolves nowhere there. Prefer the form a `PostToolUse` hook hands back after a write where one is installed.
 
 ## Grouping multiple files
 
-- When the response covers multiple files, group paths under headers: `**Created:**`, `**Modified:**`, `**Deleted:**`. Every path under them takes the form the entrypoint selected rather than the first alone. For single-file changes, the path on its own line is enough.
+- When the response covers multiple files, group paths under headers: `**Created:**`, `**Modified:**`, `**Deleted:**`. Every path under them takes that form, not the first alone. For single-file changes, the path on its own line is enough.

package/governance/rules/claude/575-hooks.md

@@ -9,7 +9,7 @@ paths:
 
 ## Reading a payload
 
-- Open a hook that reads a payload with a bounded `IFS= read -r -d '' -t 2 input`, exiting non-zero on an empty payload. An unbounded `cat` blocks forever against a hand run or an open socket, holding the session open with it. A test already checks this per file across both hook trees, but the rule stops the pattern being rediscovered rather than caught only after the fact.
+- Open a hook that reads a payload with a bounded `IFS= read -r -d '' -t 2 input`, exiting non-zero on an empty payload. An unbounded `cat` blocks forever against a hand run or an open socket, holding the session open with it.
 
 ## Silencing output
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@erclx/canon",
   "type": "module",
-  "version": "5.16.0",
+  "version": "5.18.0",
   "description": "Runs your agent's work and keeps its code good, on one setup for every repo.",
   "license": "MIT",
   "bin": {

package/src/audits/catalog.ts

@@ -173,10 +173,17 @@ function architectureCounts(
     typeof record.entryCap === 'number' ? record.entryCap : undefined
 
   const revisitRequired = record.revisitRequired === true
+  const wordCap =
+    typeof record.wordCap === 'number' ? record.wordCap : undefined
+  const riskCap =
+    typeof record.riskCap === 'number' ? record.riskCap : undefined
+  const risksBullets =
+    typeof record.risksBullets === 'number' ? record.risksBullets : undefined
 
   let unverifiable = 0
   let unchecked = 0
   let lackingRevisit = 0
+  let overWords = 0
   for (const raw of decisions) {
     const entry = asObject(raw)
     const claim = entry?.claim
@@ -186,6 +193,13 @@ function architectureCounts(
     if (claim === 'neither') unverifiable += 1
     else if (checks === 0) unchecked += 1
     if (revisitRequired && entry?.revisit !== true) lackingRevisit += 1
+    if (
+      wordCap !== undefined &&
+      typeof entry?.words === 'number' &&
+      entry.words > wordCap
+    ) {
+      overWords += 1
+    }
   }
 
   return {
@@ -201,11 +215,39 @@ function architectureCounts(
     }),
     // Absent on a record stating no revisit clause, for the same reason.
     ...(revisitRequired && { recordMissingRevisit: lackingRevisit }),
+    // Absent on a record stating no word cap or no bullet cap, for the same
+    // reason, and the bullet key absent too on a record with no Risks section.
+    ...(wordCap !== undefined && { recordOverWords: overWords }),
+    ...(riskCap !== undefined &&
+      risksBullets !== undefined && {
+        recordOverRisks: risksBullets > riskCap ? 1 : 0,
+      }),
     recordUnverifiable: unverifiable,
     recordUnchecked: unchecked,
   }
 }
 
+/**
+ * Reads the requirements record's one cap, or nothing when the record is
+ * absent, states no cap, or the run never opened it.
+ *
+ * The key is optional rather than required the way `architecture` is, so a
+ * record from a binary predating it still counts its other findings.
+ */
+function requirementsCounts(
+  root: Record<string, unknown>,
+): Record<string, number> {
+  const record = asObject(root.requirements)
+  if (
+    record === undefined ||
+    typeof record.words !== 'number' ||
+    typeof record.wordCap !== 'number'
+  ) {
+    return {}
+  }
+  return { requirementsOverWords: record.words > record.wordCap ? 1 : 0 }
+}
+
 /**
  * The retained key for each verdict the sweep can return. A record rather than
  * a list, so the compiler fails here when the classifier gains a verdict,
@@ -261,6 +303,7 @@ function contextCounts(record: unknown): Record<string, number> | undefined {
 
   const architecture = architectureCounts(root)
   if (architecture === undefined) return undefined
+  const requirements = requirementsCounts(root)
 
   const counts = allOf({
     unresolvedCitations: lengthOf(asObject(root.citations)?.unresolved),
@@ -271,7 +314,9 @@ function contextCounts(record: unknown): Record<string, number> | undefined {
   })
 
   if (counts === undefined) return undefined
-  return architecture === 'absent' ? counts : { ...counts, ...architecture }
+  return architecture === 'absent'
+    ? { ...counts, ...requirements }
+    : { ...counts, ...architecture, ...requirements }
 }
 
 function markdownCounts(record: unknown): Record<string, number> | undefined {

package/src/canvas/address.ts

@@ -90,6 +90,58 @@ interface Collected {
   text: string
 }
 
+/**
+ * Called on each element the address counts, with its index. What it returns
+ * runs at the element's end tag, since a second `onEndTag` on one element
+ * replaces the first rather than adding to it.
+ */
+export type ElementVisitor = (
+  element: HTMLRewriterTypes.Element,
+  index: number,
+) => (() => void) | undefined
+
+/**
+ * Registers the one counting rule both the reader and the edit writer follow,
+ * so an index means the same element to each.
+ */
+export function countElements(
+  rewriter: HTMLRewriter,
+  visit: ElementVisitor,
+): HTMLRewriter {
+  let count = 0
+  /* A template's content is a fragment `querySelectorAll` never reaches. */
+  let templateDepth = 0
+
+  return rewriter.on('*', {
+    element(element) {
+      const tag = element.tagName.toLowerCase()
+      if (templateDepth > 0) {
+        if (tag === 'template') {
+          templateDepth += 1
+          element.onEndTag(() => {
+            templateDepth -= 1
+          })
+        }
+        return
+      }
+      const end = visit(element, count)
+      count += 1
+      if (!element.canHaveContent || element.selfClosing) return
+      const isTemplate = tag === 'template'
+      if (isTemplate) templateDepth += 1
+      element.onEndTag(() => {
+        if (isTemplate) templateDepth -= 1
+        end?.()
+      })
+    },
+  })
+}
+
+/** Whether an element's content is raw text rather than parsed markup. */
+export function isRawText(tag: string): boolean {
+  return RAW_TEXT.has(tag)
+}
+
 /**
  * Every element the file states, in document order. Text is gathered into
  * each open element, which an element closed only by implication keeps open to
@@ -99,8 +151,6 @@ export function sourceElements(html: string): SourceElement[] {
   const elements: Collected[] = []
   const open: number[] = []
   let rawDepth = 0
-  /* A template's content is a fragment `querySelectorAll` never reaches. */
-  let templateDepth = 0
 
   const appendText = (text: string) => {
     for (const index of open) {
@@ -111,44 +161,28 @@ export function sourceElements(html: string): SourceElement[] {
     }
   }
 
-  new HTMLRewriter()
-    .on('*', {
-      element(element) {
-        const tag = element.tagName.toLowerCase()
-        if (templateDepth > 0) {
-          if (tag === 'template') {
-            templateDepth += 1
-            element.onEndTag(() => {
-              templateDepth -= 1
-            })
-          }
-          return
-        }
-        const index = elements.length
-        /* A tag boundary separates words the way a rendered block would. */
-        appendText(' ')
-        elements.push({
-          tag,
-          classes: (element.getAttribute('class') ?? '')
-            .split(/\s+/)
-            .filter(Boolean),
-          text: '',
-        })
-        if (!element.canHaveContent || element.selfClosing) return
-        const isRaw = RAW_TEXT.has(tag)
-        const isTemplate = tag === 'template'
-        open.push(index)
-        if (isRaw) rawDepth += 1
-        if (isTemplate) templateDepth += 1
-        element.onEndTag(() => {
-          const at = open.lastIndexOf(index)
-          if (at !== -1) open.splice(at, 1)
-          if (isRaw) rawDepth -= 1
-          if (isTemplate) templateDepth -= 1
-          appendText(' ')
-        })
-      },
+  countElements(new HTMLRewriter(), (element, index) => {
+    const tag = element.tagName.toLowerCase()
+    /* A tag boundary separates words the way a rendered block would. */
+    appendText(' ')
+    elements.push({
+      tag,
+      classes: (element.getAttribute('class') ?? '')
+        .split(/\s+/)
+        .filter(Boolean),
+      text: '',
     })
+    if (!element.canHaveContent || element.selfClosing) return undefined
+    const isRaw = isRawText(tag)
+    open.push(index)
+    if (isRaw) rawDepth += 1
+    return () => {
+      const at = open.lastIndexOf(index)
+      if (at !== -1) open.splice(at, 1)
+      if (isRaw) rawDepth -= 1
+      appendText(' ')
+    }
+  })
     .onDocument({
       text(chunk) {
         if (rawDepth === 0) appendText(chunk.text)

package/src/canvas/client/inspector.tsx

@@ -1,82 +1,286 @@
 /** @jsxImportSource preact */
 import type { JSX } from 'preact'
-import { elementAt } from '@/canvas/address'
+import { addressOf, elementAt, excerpt, isRawText } from '@/canvas/address'
 import {
   currentPage,
+  editElement,
+  editRefusal,
+  type FrameRef,
   frameDocuments,
   frameKey,
+  frameVersions,
+  pendingEdit,
+  savedEdit,
   selectedElement,
   selectedFrame,
+  tokens,
   writeError,
 } from '@/canvas/client/state'
 
 const FIELDS = ['x', 'y', 'width', 'height'] as const
 
+/** Elements the parser never gives content, so they hold no text to edit. */
+const VOID = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'source',
+  'track',
+  'wbr',
+])
+
+interface StyleField {
+  readonly label: string
+  readonly property: string
+  readonly isColor?: boolean
+}
+
+/**
+ * The basic set, in the order the panel lists it. The writer refuses any
+ * property outside it, so this list and the writer's have to agree.
+ */
+const STYLE_FIELDS: readonly StyleField[] = [
+  { label: 'color', property: 'color', isColor: true },
+  { label: 'background', property: 'background-color', isColor: true },
+  { label: 'size', property: 'font-size' },
+  { label: 'weight', property: 'font-weight' },
+  { label: 'width', property: 'width' },
+  { label: 'height', property: 'height' },
+  { label: 'padding', property: 'padding' },
+  { label: 'gap', property: 'gap' },
+  { label: 'direction', property: 'flex-direction' },
+]
+
 interface Row {
   readonly name: string
   readonly value: string
 }
 
-/**
- * The computed values the browser settled on, which is what the operator sees
- * rather than what any one stylesheet states.
- */
-function styleRows(element: Element): Row[] {
+/** Where the element sits in its frame, which the panel shows and never edits. */
+function positionRows(element: Element): Row[] {
   const rect = element.getBoundingClientRect()
-  const view = element.ownerDocument.defaultView
-  const style = view?.getComputedStyle(element)
-  const rows: Row[] = [
+  const font = element.ownerDocument.defaultView
+    ?.getComputedStyle(element)
+    .getPropertyValue('font-family')
+  return [
     { name: 'x', value: String(Math.round(rect.left)) },
     { name: 'y', value: String(Math.round(rect.top)) },
-    { name: 'width', value: String(Math.round(rect.width)) },
-    { name: 'height', value: String(Math.round(rect.height)) },
-  ]
-  if (!style) return rows
-  return [
-    ...rows,
-    { name: 'color', value: style.color },
-    { name: 'background', value: style.backgroundColor },
-    { name: 'font', value: style.fontFamily },
-    { name: 'size', value: style.fontSize },
-    { name: 'weight', value: style.fontWeight },
+    ...(font ? [{ name: 'font', value: font }] : []),
   ]
 }
 
+/**
+ * What the element states inline, else the value the browser settled on, so
+ * an edit starts from what the operator sees.
+ */
+function currentValue(element: Element, property: string): string {
+  const inline =
+    'style' in element
+      ? (element as HTMLElement).style.getPropertyValue(property)
+      : ''
+  if (inline) return inline
+  return (
+    element.ownerDocument.defaultView
+      ?.getComputedStyle(element)
+      .getPropertyValue(property) ?? ''
+  )
+}
+
+function holdsTextAlone(element: Element): boolean {
+  const tag = element.tagName.toLowerCase()
+  return element.children.length === 0 && !VOID.has(tag) && !isRawText(tag)
+}
+
 function elementName(element: Element): string {
   const tag = element.tagName.toLowerCase()
   return [tag, ...element.classList].join('.')
 }
 
-/** Read-only in this slice, since editing an element is the edit slice's work. */
+interface FieldProps {
+  readonly label: string
+  readonly initial: string
+  readonly isBusy: boolean
+  readonly onCommit: (value: string) => void
+}
+
+/**
+ * Commits on change, which a text input fires on Enter or on leaving it, and
+ * sends nothing when the value is what it started at. Escape puts it back.
+ */
+function Field({ label, initial, isBusy, onCommit }: FieldProps): JSX.Element {
+  return (
+    <input
+      class="field"
+      type="text"
+      aria-label={label}
+      title={initial}
+      defaultValue={initial}
+      disabled={isBusy}
+      spellcheck={false}
+      onChange={(event) => {
+        const value = event.currentTarget.value.trim()
+        if (value !== initial.trim()) onCommit(value)
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Escape') event.currentTarget.value = initial
+      }}
+    />
+  )
+}
+
+function TokenPicker({
+  label,
+  initial,
+  isBusy,
+  onCommit,
+}: FieldProps): JSX.Element | null {
+  const colors =
+    tokens.value?.groups?.find((group) => group.kind === 'color')?.tokens ?? []
+  if (colors.length === 0) return null
+  return (
+    <select
+      class="token-picker"
+      aria-label={`${label} token`}
+      title="Pick a project token"
+      value={
+        colors.some((token) => initial === `var(${token.name})`) ? initial : ''
+      }
+      disabled={isBusy}
+      onChange={(event) => {
+        const { value } = event.currentTarget
+        if (value !== '' && value !== initial) onCommit(value)
+      }}
+    >
+      <option value="">Token</option>
+      {colors.map((token) => (
+        <option key={token.name} value={`var(${token.name})`}>
+          {token.name}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+function ElementFields({
+  node,
+  doc,
+  frameRef,
+  frameKey: key,
+}: {
+  readonly node: Element
+  readonly doc: Document
+  readonly frameRef: FrameRef
+  readonly frameKey: string
+}): JSX.Element {
+  const address = addressOf(doc, node)
+  const pending = pendingEdit.value
+  const isBusy = pending?.key === key && pending.index === address?.index
+  const commit = (property: string) => (value: string) => {
+    if (address) void editElement(frameRef, key, address, property, value)
+  }
+  const isTextOnly = holdsTextAlone(node)
+  const text = node.textContent ?? ''
+
+  return (
+    <dl class="box styles">
+      {positionRows(node).map((row) => (
+        <div key={row.name} class="box-row">
+          <dt>{row.name}</dt>
+          <dd title={row.value}>{row.value}</dd>
+        </div>
+      ))}
+      <div class="box-row">
+        <dt>text</dt>
+        <dd title={excerpt(text)}>
+          {isTextOnly ? (
+            <Field
+              label="text"
+              initial={text}
+              isBusy={isBusy}
+              onCommit={commit('text')}
+            />
+          ) : (
+            excerpt(text)
+          )}
+        </dd>
+      </div>
+      {STYLE_FIELDS.map((field) => {
+        const initial = currentValue(node, field.property)
+        return (
+          <div key={field.property} class="box-row">
+            <dt>{field.label}</dt>
+            <dd class="field-cell">
+              <Field
+                label={field.label}
+                initial={initial}
+                isBusy={isBusy}
+                onCommit={commit(field.property)}
+              />
+              {field.isColor ? (
+                <TokenPicker
+                  label={field.label}
+                  initial={initial}
+                  isBusy={isBusy}
+                  onCommit={commit(field.property)}
+                />
+              ) : null}
+            </dd>
+          </div>
+        )
+      })}
+    </dl>
+  )
+}
+
 function ElementDetails(): JSX.Element | null {
   const picked = selectedElement.value
   const page = currentPage.value
   if (!picked || !page) return null
   const { frame, element } = picked
-  const doc = frameDocuments.value.get(frameKey(page.name, frame))
+  const key = frameKey(page.name, frame)
+  const doc = frameDocuments.value.get(key)
   const node = doc && !element.stale ? elementAt(doc, element) : undefined
+  const saved = savedEdit.value
+  const isSaved = saved?.key === key && saved.index === element.index
 
   return (
     <section aria-label="Element">
-      <h2 class="section-label">Element</h2>
+      <h2 class="section-label">
+        Element
+        {isSaved ? (
+          <span class="saved" role="status">
+            Saved
+          </span>
+        ) : null}
+      </h2>
       {element.stale ? (
         <p class="notice">
           The frame changed since this element was picked, so its index may name
           another element now. Pick it again.
         </p>
-      ) : node ? (
+      ) : doc && node ? (
         <>
           <p class="detail" title={elementName(node)}>
             {elementName(node)}
           </p>
-          <dl class="box styles">
-            {styleRows(node).map((row) => (
-              <div key={row.name} class="box-row">
-                <dt>{row.name}</dt>
-                <dd title={row.value}>{row.value}</dd>
-              </div>
-            ))}
-          </dl>
+          {/*
+           * Keyed by the frame's version and the element, so a reload drops
+           * any value typed against the document it replaced.
+           */}
+          <ElementFields
+            key={`${frameVersions.value.get(key) ?? 0}:${element.index}`}
+            node={node}
+            doc={doc}
+            frameRef={{ page: page.name, frame: frame.name }}
+            frameKey={key}
+          />
         </>
       ) : (
         <p class="empty">Loading the frame to read this element</p>
@@ -85,7 +289,6 @@ function ElementDetails(): JSX.Element | null {
   )
 }
 
-/** Read-only in this slice, since editing a box is the edit slice's work. */
 export function Inspector(): JSX.Element {
   const frame = selectedFrame.value
   return (
@@ -116,6 +319,11 @@ export function Inspector(): JSX.Element {
         ) : null}
       </section>
       <ElementDetails />
+      {editRefusal.value ? (
+        <p class="notice" role="alert">
+          {editRefusal.value}
+        </p>
+      ) : null}
     </>
   )
 }