@erclx/canon 5.24.0 → 5.26.0

package/src/canvas/client/inspector.tsx

@@ -1,6 +1,19 @@
 /** @jsxImportSource preact */
 import type { JSX } from 'preact'
 import { addressOf, elementAt, excerpt, isRawText } from '@/canvas/address'
+import { ColorField } from '@/canvas/client/inspector/color-field'
+import {
+  Field,
+  ReadOnlyField,
+  type Scrub,
+} from '@/canvas/client/inspector/field'
+import { Section } from '@/canvas/client/inspector/section'
+import {
+  clampScrub,
+  displayValue,
+  parseColor,
+  toCssValue,
+} from '@/canvas/client/inspector/values'
 import {
   currentPage,
   editElement,
@@ -16,8 +29,7 @@ import {
   tokens,
   writeError,
 } from '@/canvas/client/state'
-
-const FIELDS = ['x', 'y', 'width', 'height'] as const
+import '@/canvas/client/inspector/fields.css'
 
 /** Elements the parser never gives content, so they hold no text to edit. */
 const VOID = new Set([
@@ -37,44 +49,38 @@ const VOID = new Set([
 ])
 
 interface StyleField {
+  /** The full word, which names the field. */
   readonly label: string
+  readonly glyph: string
   readonly property: string
-  readonly isColor?: boolean
+  readonly isWide?: boolean
+  readonly placeholder?: string
 }
 
 /**
- * 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.
+ * The basic set, grouped as the panel lists it. The writer refuses any
+ * property outside it, so these lists 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' },
+const SIZE_FIELDS: readonly StyleField[] = [
+  { label: 'width', glyph: 'W', property: 'width' },
+  { label: 'height', glyph: 'H', property: 'height' },
 ]
 
-interface Row {
-  readonly name: string
-  readonly value: string
-}
+const FLEX_FIELDS: readonly StyleField[] = [
+  { label: 'direction', glyph: 'Dir', property: 'flex-direction' },
+  { label: 'gap', glyph: 'Gap', property: 'gap', placeholder: '0' },
+  { label: 'padding', glyph: 'Pad', property: 'padding', isWide: true },
+]
 
-/** Where the element sits in its frame, which the panel shows and never edits. */
-function positionRows(element: Element): Row[] {
-  const rect = element.getBoundingClientRect()
-  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)) },
-    ...(font ? [{ name: 'font', value: font }] : []),
-  ]
-}
+const TYPE_FIELDS: readonly StyleField[] = [
+  { label: 'size', glyph: 'Size', property: 'font-size' },
+  { label: 'weight', glyph: 'Wt', property: 'font-weight' },
+]
+
+const FILL_FIELDS = [
+  { label: 'color', property: 'color' },
+  { label: 'background', property: 'background-color' },
+] as const
 
 function inlineValue(element: Element, property: string): string {
   return 'style' in element
@@ -118,8 +124,10 @@ function isRawInline(element: Element, property: string): boolean {
  * an edit starts from what the operator sees.
  */
 function currentValue(element: Element, property: string): string {
-  const inline = inlineValue(element, property)
-  if (inline) return inline
+  return inlineValue(element, property) || computedValue(element, property)
+}
+
+function computedValue(element: Element, property: string): string {
   return (
     element.ownerDocument.defaultView
       ?.getComputedStyle(element)
@@ -127,6 +135,19 @@ function currentValue(element: Element, property: string): string {
   )
 }
 
+/**
+ * The color a token paints in the frame, read off a probe rather than the
+ * token's text, since a token's value may itself be a `var()` or a mix.
+ */
+function tokenPaint(doc: Document, name: string): string {
+  const probe = doc.createElement('span')
+  probe.style.setProperty('color', `var(${name})`)
+  ;(doc.body ?? doc.documentElement).append(probe)
+  const painted = computedValue(probe, 'color')
+  probe.remove()
+  return painted
+}
+
 function holdsTextAlone(element: Element): boolean {
   const tag = element.tagName.toLowerCase()
   return element.children.length === 0 && !VOID.has(tag) && !isRawText(tag)
@@ -137,71 +158,6 @@ function elementName(element: Element): string {
   return [tag, ...element.classList].join('.')
 }
 
-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,
@@ -219,65 +175,119 @@ function ElementFields({
   const commit = (property: string) => (value: string) => {
     if (address) void editElement(frameRef, key, address, property, value)
   }
-  const isTextOnly = holdsTextAlone(node)
+  const rect = node.getBoundingClientRect()
+  const font = currentValue(node, 'font-family')
   const text = node.textContent ?? ''
+  const colorTokens =
+    tokens.value?.groups
+      ?.find((group) => group.kind === 'color')
+      ?.tokens.map((token) => token.name) ?? []
+
+  /**
+   * Previews into the frame's own inline style and writes through the same
+   * edit as typing. A reload mid-drag replaces the document, so a release
+   * against one no longer on screen posts nothing.
+   */
+  const scrubOf = (property: string): Scrub => ({
+    clamp: (value) => clampScrub(property, value),
+    begin: () => {
+      const original = inlineValue(node, property)
+      const style = (node as HTMLElement).style
+      return {
+        preview: (shown) =>
+          style.setProperty(property, toCssValue(property, shown)),
+        restore: () =>
+          original
+            ? style.setProperty(property, original)
+            : style.removeProperty(property),
+        commit: (shown) => {
+          if (frameDocuments.value.get(key) !== doc || !node.isConnected) return
+          commit(property)(toCssValue(property, shown))
+        },
+      }
+    },
+  })
+
+  const styleField = (field: StyleField): JSX.Element => (
+    <Field
+      key={field.property}
+      label={field.label}
+      glyph={field.glyph}
+      initial={displayValue(field.property, currentValue(node, field.property))}
+      isBusy={isBusy}
+      isWide={field.isWide}
+      placeholder={field.placeholder}
+      onCommit={(typed) =>
+        commit(field.property)(toCssValue(field.property, typed))
+      }
+      scrub={'style' in node ? scrubOf(field.property) : undefined}
+    />
+  )
 
   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}
+    <>
+      <Section title="Layout">
+        <ReadOnlyField
+          label="x"
+          glyph="X"
+          value={String(Math.round(rect.left))}
+        />
+        <ReadOnlyField
+          label="y"
+          glyph="Y"
+          value={String(Math.round(rect.top))}
+        />
+        {SIZE_FIELDS.map(styleField)}
+      </Section>
+      <Section title="Flex">{FLEX_FIELDS.map(styleField)}</Section>
+      <Section title="Typography">
+        {TYPE_FIELDS.map(styleField)}
+        {font ? (
+          <ReadOnlyField label="font" glyph="Font" value={font} isWide />
+        ) : null}
+      </Section>
+      <Section title="Fill">
+        {FILL_FIELDS.map((field) => {
+          const painted = computedValue(node, field.property)
+          const inline = inlineValue(node, field.property)
+          /*
+           * An inline value the picker cannot read stays as written. Reading
+           * the computed color in its place would show a token-following
+           * value as a literal, and an opacity edit would freeze it.
+           */
+          return (
+            <ColorField
+              key={field.property}
+              label={field.label}
+              color={parseColor(inline || painted)}
+              text={inline || painted}
+              painted={painted}
+              tokens={colorTokens}
+              paint={(name) => tokenPaint(doc, name)}
+              isRaw={isRawInline(node, field.property)}
               isBusy={isBusy}
-              onCommit={commit('text')}
+              onCommit={commit(field.property)}
             />
-          ) : (
-            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 && isRawInline(node, field.property) ? (
-                <span
-                  class="raw"
-                  title="Set as a raw value, so it will not follow the theme. Pick a token to fix it"
-                >
-                  raw
-                </span>
-              ) : null}
-              {field.isColor ? (
-                <TokenPicker
-                  label={field.label}
-                  initial={initial}
-                  isBusy={isBusy}
-                  onCommit={commit(field.property)}
-                />
-              ) : null}
-            </dd>
-          </div>
-        )
-      })}
-    </dl>
+          )
+        })}
+      </Section>
+      <Section title="Text">
+        {holdsTextAlone(node) ? (
+          <Field
+            label="text"
+            glyph="T"
+            initial={text}
+            isBusy={isBusy}
+            isWide
+            onCommit={commit('text')}
+          />
+        ) : (
+          <p class="text-excerpt is-wide" title={excerpt(text)}>
+            {excerpt(text)}
+          </p>
+        )}
+      </Section>
+    </>
   )
 }
 
@@ -342,14 +352,20 @@ export function Inspector(): JSX.Element {
             <p class="detail" title={frame.name}>
               {frame.name}
             </p>
-            <dl class="box">
-              {FIELDS.map((field) => (
-                <div key={field} class="box-row">
-                  <dt>{field}</dt>
-                  <dd>{frame[field]}</dd>
-                </div>
-              ))}
-            </dl>
+            <div class="field-grid">
+              <ReadOnlyField label="x" glyph="X" value={String(frame.x)} />
+              <ReadOnlyField label="y" glyph="Y" value={String(frame.y)} />
+              <ReadOnlyField
+                label="width"
+                glyph="W"
+                value={String(frame.width)}
+              />
+              <ReadOnlyField
+                label="height"
+                glyph="H"
+                value={String(frame.height)}
+              />
+            </div>
           </>
         ) : (
           <p class="empty">Select a frame to see its box</p>

package/src/canvas/client/shell.css

@@ -320,29 +320,6 @@ code {
   outline-offset: 6px;
 }
 
-.box {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-xs) var(--space-md);
-  margin: var(--space-xs) 0 0;
-}
-
-.box-row {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--space-sm);
-}
-
-.box dt {
-  color: var(--color-muted);
-}
-
-.box dd {
-  margin: 0;
-  color: var(--color-text);
-  font-variant-numeric: tabular-nums;
-}
-
 .toolbar {
   position: absolute;
   right: var(--space-md);
@@ -436,84 +413,6 @@ code {
   white-space: nowrap;
 }
 
-/* One property a row, since a computed color or font stack outgrows a half. */
-.styles {
-  grid-template-columns: 1fr;
-}
-
-.styles dd {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.styles .box-row {
-  align-items: center;
-}
-
-.styles dt {
-  flex: none;
-  width: 4.5rem;
-}
-
-.styles dd {
-  flex: 1;
-}
-
-.field-cell {
-  display: flex;
-  gap: var(--space-xs);
-}
-
-.field,
-.token-picker {
-  min-width: 0;
-  min-height: 24px;
-  padding: 2px var(--space-xs);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-action);
-  background: var(--color-surface);
-  color: var(--color-text);
-  font: inherit;
-  font-variant-numeric: tabular-nums;
-}
-
-.field {
-  flex: 1;
-  width: 100%;
-}
-
-.token-picker {
-  flex: none;
-  width: 4.5rem;
-  cursor: pointer;
-}
-
-.raw {
-  flex: none;
-  align-self: center;
-  color: var(--color-text-secondary);
-  cursor: help;
-}
-
-.field:hover,
-.token-picker:hover {
-  border-color: var(--color-muted);
-}
-
-.field:disabled,
-.token-picker:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.saved {
-  margin-left: var(--space-sm);
-  color: var(--color-success);
-  font-weight: 400;
-}
-
 .tabs {
   display: flex;
   gap: 2px;

package/src/capture/render.ts

@@ -2,9 +2,13 @@ import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
 import { basename, dirname } from 'node:path'
 import { pathToFileURL } from 'node:url'
 import { chromium } from 'playwright-core'
-import type { Browser, Page } from 'playwright-core'
+import type { Browser, Locator, Page } from 'playwright-core'
 import type { CaptureSource } from '@/capture/sources'
-import { primaryFontFamily, resolveCaptureSources } from '@/capture/sources'
+import {
+  isGenericFamily,
+  resolveCaptureSources,
+  textFamilies,
+} from '@/capture/sources'
 import { formatStamp, hashSource, stampPath } from '@/capture/stamp'
 
 /**
@@ -97,15 +101,22 @@ async function captureOne(
     }
 
     await page.evaluate(() => document.fonts.ready.then(() => undefined))
-    const family = primaryFontFamily(
-      await element.evaluate((node) => getComputedStyle(node).fontFamily),
-    )
-    if (family && !(await resolvesFont(page, family))) {
+    const declarations = await renderedTextFamilies(element)
+    const generic = declarations.find(isGenericFamily)
+    if (generic !== undefined) {
       return failed(
         source,
-        `${family} is not installed, so the capture would rewrap against a fallback`,
+        `${generic.split(',')[0]?.trim()} is a generic family that resolves differently per machine, so name a real font`,
       )
     }
+    for (const family of textFamilies(declarations)) {
+      if (!(await resolvesFont(page, family))) {
+        return failed(
+          source,
+          `${family} is not installed, so the capture would rewrap against a fallback`,
+        )
+      }
+    }
 
     mkdirSync(dirname(source.pngPath), { recursive: true })
     const png = await element.screenshot({ omitBackground: true })
@@ -170,6 +181,33 @@ function failed(source: CaptureSource, reason: string): CaptureResult {
   return { status: 'failed', source: sourceIdentifier(source), reason }
 }
 
+/**
+ * The computed families of the captured element and of each element under it
+ * holding a non-blank text node of its own that draws a box, which is the text
+ * the screenshot shows. Testing the text node's box rather than the element's
+ * keeps out `<style>`, `<script>`, `<title>`, and anything hidden, whose
+ * computed family is the browser default and would refuse every source that
+ * styles a descendant rather than the root, and keeps in text directly inside a
+ * `display: contents` element, which draws no box of its own.
+ *
+ * Returns nothing when no element holds text, since a font cannot rewrap text
+ * that is not there, so a container of iframes skips the probe.
+ */
+async function renderedTextFamilies(element: Locator): Promise<string[]> {
+  return element.evaluate((root) => {
+    const range = document.createRange()
+    const holdsText = (node: Element): boolean =>
+      [...node.childNodes].some((child) => {
+        if (child.nodeType !== Node.TEXT_NODE) return false
+        if ((child.textContent ?? '').trim() === '') return false
+        range.selectNodeContents(child)
+        return range.getClientRects().length > 0
+      })
+    const texts = [root, ...root.querySelectorAll('*')].filter(holdsText)
+    return texts.map((node) => getComputedStyle(node).fontFamily)
+  })
+}
+
 /**
  * Compares the family's text metrics against a family that cannot exist. Equal
  * widths mean the browser fell through to its default for both, which is the

package/src/capture/sources.ts

@@ -66,3 +66,46 @@ export function primaryFontFamily(declaration: string): string {
   const first = declaration.split(',')[0]?.trim() ?? ''
   return first.replace(/^['"]|['"]$/g, '')
 }
+
+/**
+ * The CSS generic family keywords. A generic names no font, so each machine
+ * maps it to whatever it has, and a capture measured against one cannot
+ * reproduce on another.
+ */
+export const GENERIC_FAMILIES: ReadonlySet<string> = new Set([
+  'serif',
+  'sans-serif',
+  'monospace',
+  'cursive',
+  'fantasy',
+  'system-ui',
+  'ui-serif',
+  'ui-sans-serif',
+  'ui-monospace',
+  'ui-rounded',
+  'math',
+  'emoji',
+  'fangsong',
+])
+
+/**
+ * Whether the first family of a computed `font-family` is a generic keyword.
+ * Takes the raw declaration rather than `primaryFontFamily`'s result, since
+ * quoting is what separates the keyword from a family that happens to share its
+ * name, and the stripped form has lost it. Keywords match case-insensitively.
+ */
+export function isGenericFamily(declaration: string): boolean {
+  const first = declaration.split(',')[0]?.trim() ?? ''
+  return GENERIC_FAMILIES.has(first.toLowerCase())
+}
+
+/**
+ * Reduces the computed `font-family` of each rendered text element to the
+ * distinct families a capture has to prove resolved, in document order, so a
+ * frame that sets its font on any ancestor of its text is checked against the
+ * face the text actually draws in.
+ */
+export function textFamilies(declarations: readonly string[]): string[] {
+  const families = declarations.map(primaryFontFamily).filter(Boolean)
+  return [...new Set(families)]
+}

package/src/census/count.ts

@@ -1,6 +1,6 @@
 import { readFile } from 'node:fs/promises'
 import { extname, join } from 'node:path'
-import { isBinary } from '@/binary'
+import { isBinary } from '@/sweep/binary'
 import { listRepositoryFiles } from '@/git-files'
 
 export type CensusRefusal = 'no-git'

package/src/claude/cases/misc.ts

@@ -27,6 +27,11 @@ export const MISC_CASES: readonly SkillCase[] = [
       "I found two sites whose look I want us to draw from. Put them side by side and let's settle which one the design should follow before anyone writes a token.",
     expect: 'sketch-design',
   },
+  {
+    prompt:
+      'Draw the signup screen as a frame on the canvas, then restyle the element I just selected there.',
+    expect: 'canvas',
+  },
   {
     prompt: 'Fire up the dev server the way this project documents it.',
     expect: 'project-commands',

package/src/claude/cases/workflow.ts

@@ -26,7 +26,7 @@ export const WORKFLOW_CASES: readonly SkillCase[] = [
   },
   {
     prompt: 'Draw me a diagram of how the pieces of this system connect.',
-    expect: 'draft-diagram',
+    expect: 'draft-figure',
   },
   {
     prompt:
@@ -146,6 +146,11 @@ export const WORKFLOW_CASES: readonly SkillCase[] = [
       'Which of our docs have gone stale, grown too long, or ended up in the wrong file?',
     expect: 'document-health',
   },
+  {
+    prompt:
+      'Are our requirements and architecture docs still true, and when were they last reviewed?',
+    expect: 'document-health',
+  },
   {
     prompt: 'Open a new entry on the task board for this piece of work.',
     expect: 'task-board',