@erclx/canon 5.26.0 → 5.28.0

package/src/canvas/edit.ts

@@ -27,15 +27,46 @@ export const STYLE_PROPERTIES = [
   'background-color',
   'font-size',
   'font-weight',
+  'font-family',
+  'line-height',
+  'letter-spacing',
+  'text-align',
   'width',
   'height',
   'padding',
   'gap',
+  'display',
   'flex-direction',
+  'justify-content',
+  'align-items',
+  'flex-wrap',
+  'opacity',
+  'border-radius',
+  'border-top-left-radius',
+  'border-top-right-radius',
+  'border-bottom-right-radius',
+  'border-bottom-left-radius',
 ] as const
 
 export type StyleProperty = (typeof STYLE_PROPERTIES)[number]
 
+/**
+ * The longhands a shorthand write drops, so a later longhand in the attribute
+ * does not keep overriding the value just set. A longhand write leaves its
+ * shorthand alone, since the longhand comes later and already wins.
+ */
+const SHORTHAND_LONGHANDS: Readonly<
+  Partial<Record<StyleProperty, readonly string[]>>
+> = {
+  'border-radius': [
+    'border-top-left-radius',
+    'border-top-right-radius',
+    'border-bottom-right-radius',
+    'border-bottom-left-radius',
+  ],
+  padding: ['padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
+}
+
 export type EditProperty = StyleProperty | 'text'
 
 export interface EditChange {
@@ -106,10 +137,13 @@ function checkChange(change: EditChange): EditRefused | undefined {
   return undefined
 }
 
+const CHARACTER_REFERENCE = /&(?:#\d+|#x[0-9a-f]+|[a-z][a-z0-9]*);/iy
+
 /**
  * Splits a style attribute at each semicolon outside parentheses and quotes,
  * keeping every segment's own spacing so an untouched one is written back as
- * it was.
+ * it was. The rewriter hands the attribute over undecoded and writes a quote
+ * back as `&quot;`, so a character reference's own semicolon never splits.
  */
 function declarations(style: string): string[] {
   const segments: string[] = []
@@ -118,7 +152,10 @@ function declarations(style: string): string[] {
   let start = 0
   for (let at = 0; at < style.length; at += 1) {
     const char = style[at]
-    if (quote) {
+    CHARACTER_REFERENCE.lastIndex = at
+    if (char === '&' && CHARACTER_REFERENCE.test(style)) {
+      at = CHARACTER_REFERENCE.lastIndex - 1
+    } else if (quote) {
       if (char === quote) quote = undefined
     } else if (char === '"' || char === "'") quote = char
     else if (char === '(') depth += 1
@@ -139,15 +176,18 @@ function propertyOf(segment: string): string {
 /**
  * Sets one property in a style attribute, or drops it on an empty value. The
  * first declaration of it is replaced in place and any later one dropped, so
- * nothing further in the attribute overrides the edit. Undefined means no
- * style is left.
+ * nothing further in the attribute overrides the edit. A shorthand also drops
+ * its longhands. Undefined means no style is left.
  */
 export function setDeclaration(
   style: string,
   property: StyleProperty,
   value: string,
 ): string | undefined {
-  const segments = declarations(style)
+  const longhands = SHORTHAND_LONGHANDS[property] ?? []
+  const segments = declarations(style).filter(
+    (segment) => !longhands.includes(propertyOf(segment)),
+  )
   const matches = segments.filter((segment) => propertyOf(segment) === property)
   const declaration = `${property}: ${value.trim()}`
 
@@ -164,7 +204,10 @@ export function setDeclaration(
       return [`${lead}${declaration}`]
     })
   } else {
-    const kept = style.replace(/[\s;]*$/, '')
+    const kept = segments
+      .join(';')
+      .replace(/^[\s;]+/, '')
+      .replace(/[\s;]*$/, '')
     return kept === '' ? declaration : `${kept}; ${declaration}`
   }
 

package/src/canvas/editing.ts

@@ -0,0 +1,203 @@
+import { existsSync, readFileSync, renameSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import {
+  type ContentRefused,
+  canvasDir,
+  isValidName,
+  readPage,
+  TEMP_SUFFIX,
+  withFileLock,
+} from '@/canvas/content'
+
+/**
+ * Which frames a session says it is editing, beside `selection.json`. The
+ * server cannot see a write until it lands, so the mark is a record a session
+ * writes rather than something inferred, and it gates no edit.
+ */
+export const EDITING_FILE = 'editing.json'
+
+/**
+ * How long a mark lives unrenewed. A session that crashes or compacts never
+ * clears its mark, so this is how long a dead one can mislead the operator.
+ */
+export const EDITING_TTL_MS = 5 * 60_000
+
+export interface EditingMark {
+  readonly page: string
+  readonly frame: string
+  readonly by: string
+  readonly since: string
+  readonly until: string
+}
+
+type Stored = Omit<EditingMark, 'page' | 'frame'>
+
+export type MarkOutcome =
+  | { readonly ok: true; readonly mark: EditingMark }
+  | ContentRefused
+
+export type ClearOutcome =
+  | { readonly ok: true; readonly cleared: boolean }
+  | ContentRefused
+
+function recordPath(root: string): string {
+  return join(canvasDir(root), EDITING_FILE)
+}
+
+function isStored(value: unknown): value is Stored {
+  if (typeof value !== 'object' || value === null) return false
+  const { by, since, until } = value as Record<string, unknown>
+  return (
+    typeof by === 'string' &&
+    typeof since === 'string' &&
+    typeof until === 'string' &&
+    !Number.isNaN(Date.parse(until))
+  )
+}
+
+/** Every well-formed entry, with a malformed file read as holding none. */
+function readStored(root: string): Map<string, Stored> {
+  const entries = new Map<string, Stored>()
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(readFileSync(recordPath(root), 'utf8'))
+  } catch {
+    return entries
+  }
+  if (typeof parsed !== 'object' || parsed === null) return entries
+  for (const [key, value] of Object.entries(parsed)) {
+    if (isStored(value)) entries.set(key, value)
+  }
+  return entries
+}
+
+function toMark(key: string, stored: Stored): EditingMark | undefined {
+  const [page, frame, ...rest] = key.split('/')
+  if (!page || !frame || rest.length > 0) return undefined
+  return { page, frame, ...stored }
+}
+
+/** A mark still inside its expiry, on a frame still on disk. */
+function isLive(root: string, mark: EditingMark, now: Date): boolean {
+  if (Date.parse(mark.until) <= now.getTime()) return false
+  return (
+    readPage(root, mark.page)?.frames.some(
+      (candidate) => candidate.name === mark.frame,
+    ) ?? false
+  )
+}
+
+function liveMarks(
+  root: string,
+  entries: ReadonlyMap<string, Stored>,
+  now: Date,
+): EditingMark[] {
+  return [...entries]
+    .flatMap(([key, stored]) => toMark(key, stored) ?? [])
+    .filter((mark) => isLive(root, mark, now))
+    .sort((a, b) =>
+      `${a.page}/${a.frame}`.localeCompare(`${b.page}/${b.frame}`),
+    )
+}
+
+/**
+ * Replaces the record through a rename, keeping only live marks, so the file
+ * never grows with marks nobody cleared. The caller holds the lock, which is
+ * what keeps two sessions marking at once from dropping each other's key.
+ */
+function writeMarks(root: string, marks: readonly EditingMark[]): void {
+  const record = Object.fromEntries(
+    marks.map(({ page, frame, ...stored }) => [`${page}/${frame}`, stored]),
+  )
+  const target = recordPath(root)
+  const temp = `${target}.${process.pid}${TEMP_SUFFIX}`
+  writeFileSync(temp, `${JSON.stringify(record, null, 2)}\n`)
+  renameSync(temp, target)
+}
+
+export function markEditing(
+  root: string,
+  page: string,
+  frame: string,
+  by: string,
+  now: Date,
+): MarkOutcome {
+  if (!isValidName(page) || !isValidName(frame)) {
+    return {
+      ok: false,
+      reason: 'invalid-name',
+      detail: `${page}/${frame} is not a valid frame`,
+    }
+  }
+  const onPage = readPage(root, page)
+  if (!onPage) {
+    return {
+      ok: false,
+      reason: 'no-page',
+      detail: `page ${page} does not exist`,
+    }
+  }
+  if (!onPage.frames.some((candidate) => candidate.name === frame)) {
+    return {
+      ok: false,
+      reason: 'no-frame',
+      detail: `frame ${frame} does not exist on ${page}`,
+    }
+  }
+
+  const mark: EditingMark = {
+    page,
+    frame,
+    by,
+    since: now.toISOString(),
+    until: new Date(now.getTime() + EDITING_TTL_MS).toISOString(),
+  }
+  return withFileLock(recordPath(root), (): MarkOutcome => {
+    const entries = readStored(root)
+    entries.set(`${page}/${frame}`, {
+      by,
+      since: mark.since,
+      until: mark.until,
+    })
+    writeMarks(root, liveMarks(root, entries, now))
+    return { ok: true, mark }
+  })
+}
+
+/**
+ * Drops one frame's mark. Clearing a frame that holds none succeeds and writes
+ * nothing, so a session clearing defensively never fails, and a frame removed
+ * while marked still clears.
+ */
+export function clearEditing(
+  root: string,
+  page: string,
+  frame: string,
+): ClearOutcome {
+  if (!isValidName(page) || !isValidName(frame)) {
+    return {
+      ok: false,
+      reason: 'invalid-name',
+      detail: `${page}/${frame} is not a valid frame`,
+    }
+  }
+  if (!existsSync(recordPath(root))) return { ok: true, cleared: false }
+
+  return withFileLock(recordPath(root), (): ClearOutcome => {
+    const entries = readStored(root)
+    if (!entries.delete(`${page}/${frame}`)) return { ok: true, cleared: false }
+    writeMarks(
+      root,
+      [...entries].flatMap(([key, stored]) => toMark(key, stored) ?? []),
+    )
+    return { ok: true, cleared: true }
+  })
+}
+
+/**
+ * The live marks, sorted by frame. A mark past its expiry or on a frame since
+ * removed reads as absent with no write, so a reader never gets a dead name.
+ */
+export function readEditing(root: string, now: Date): EditingMark[] {
+  return liveMarks(root, readStored(root), now)
+}

package/src/canvas/global.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The screen color sampler, which only Chromium ships. TypeScript's DOM
+ * library carries no type for it, so a window without it reads as undefined.
+ */
+interface EyeDropperResult {
+  readonly sRGBHex: string
+}
+
+interface EyeDropperSampler {
+  open(options?: { readonly signal?: AbortSignal }): Promise<EyeDropperResult>
+}
+
+interface Window {
+  readonly EyeDropper?: new () => EyeDropperSampler
+}

package/src/canvas/server.ts

@@ -1,7 +1,9 @@
 import { type FSWatcher, mkdirSync, watch } from 'node:fs'
 import {
+  countElements,
   type ElementAddress,
   HASH_ATTRIBUTE,
+  IMPLIED_ATTRIBUTE,
   TOKENS_ATTRIBUTE,
 } from '@/canvas/address'
 import {
@@ -12,10 +14,12 @@ import {
   LOCK_SUFFIX,
   moveFrame,
   readSelection,
+  resizeFrame,
   TEMP_SUFFIX,
   writeSelection,
 } from '@/canvas/content'
 import { type EditRefused, editFrame } from '@/canvas/edit'
+import { readEditing } from '@/canvas/editing'
 import {
   resolveFrameTokens,
   type TokenOptions,
@@ -90,24 +94,125 @@ function styleElement(css: string, hash: string | undefined): string {
   return `<style ${TOKENS_ATTRIBUTE}${stamp}>${css.replaceAll('</style', '<\\/style')}</style>`
 }
 
+/** The wrappers a browser builds whether or not the file states them. */
+const WRAPPERS = new Set(['html', 'head', 'body'])
+
+/** Which of the document wrappers the file states, counted as the address counts. */
+function statedWrappers(html: string): Set<string> {
+  const stated = new Set<string>()
+  countElements(new HTMLRewriter(), (element) => {
+    const tag = element.tagName.toLowerCase()
+    if (WRAPPERS.has(tag)) stated.add(tag)
+    return undefined
+  }).transform(html)
+  return stated
+}
+
+/** Prepends markup inside the first element a selector matches. */
+function prependFirst(html: string, selector: string, markup: string): string {
+  let isDone = false
+  return new HTMLRewriter()
+    .on(selector, {
+      element(element) {
+        if (isDone) return
+        isDone = true
+        element.prepend(markup, { html: true })
+      },
+    })
+    .transform(html)
+}
+
+/**
+ * What a browser parses into the head it builds ahead of a fragment's first
+ * content. A comment or whitespace among them stays in that head too.
+ */
+const HEAD_CONTENT = new Set([
+  'base',
+  'link',
+  'meta',
+  'noscript',
+  'script',
+  'style',
+  'template',
+  'title',
+])
+
+/**
+ * Opens a marked body where the browser would build its own: ahead of the
+ * first element or text outside the head content a file leads with, or at the
+ * end when the file holds nothing else.
+ */
+function openBodyBeforeContent(html: string, marker: string): string {
+  let isOpen = false
+  let headDepth = 0
+  const open = (target: HTMLRewriterTypes.Element | HTMLRewriterTypes.Text) => {
+    isOpen = true
+    target.before(marker, { html: true })
+  }
+  return new HTMLRewriter()
+    .on('*', {
+      element(element) {
+        if (isOpen || headDepth > 0) return
+        const tag = element.tagName.toLowerCase()
+        if (tag === 'html') return
+        if (!HEAD_CONTENT.has(tag)) {
+          open(element)
+          return
+        }
+        if (!element.canHaveContent || element.selfClosing) return
+        headDepth += 1
+        element.onEndTag(() => {
+          headDepth -= 1
+        })
+      },
+    })
+    .onDocument({
+      text(chunk) {
+        if (!isOpen && headDepth === 0 && chunk.text.trim() !== '') open(chunk)
+      },
+      end(end) {
+        if (!isOpen) end.append(marker, { html: true })
+      },
+    })
+    .transform(html)
+}
+
 /**
  * Puts the tokens first in the head, so a stylesheet the frame links itself
- * still wins the cascade. A frame with no head gets the element right after
- * its doctype, which a browser hoists into the head it builds. A hash stamps
- * the element even when no tokens resolve, since the shell sends it back with
- * an element pick.
+ * still wins the cascade. A hash stamps the element even when no tokens
+ * resolve, since the shell sends it back with an element pick.
+ *
+ * A wrapper the file leaves out is written in marked, since the browser would
+ * build it anyway and the shell's count would run past the file's. An `html`
+ * goes right after the doctype, which keeps the frame out of quirks mode. A
+ * marked `head` is left open, so the head content a fragment leads with parses
+ * into it the way it would into the head a browser builds, and a file stating
+ * neither `head` nor `body` gets a marked body opened where that content ends.
+ * A file stating a `head` but no `body` is left to the browser.
  */
 export function injectTokens(html: string, css: string, hash?: string): string {
   if (css === '' && hash === undefined) return html
-  const element = styleElement(css, hash)
-  const head = html.match(/<head(?:\s[^>]*)?>/i)
-  if (head?.index === undefined) {
-    /* Ahead of a doctype the element would drop the frame into quirks mode. */
-    const doctype = html.match(/^\s*<!doctype[^>]*>/i)?.[0] ?? ''
-    return `${doctype}${element}${html.slice(doctype.length)}`
+  const style = styleElement(css, hash)
+  const stated = statedWrappers(html)
+  const isHeadStated = stated.has('head')
+  const withBody =
+    isHeadStated || stated.has('body')
+      ? html
+      : openBodyBeforeContent(html, `<body ${IMPLIED_ATTRIBUTE}>`)
+  if (isHeadStated) {
+    const withHead = prependFirst(withBody, 'head', style)
+    return stated.has('html') ? withHead : markedHtml(withHead, '')
   }
-  const at = head.index + head[0].length
-  return `${html.slice(0, at)}${element}${html.slice(at)}`
+  const head = `<head ${IMPLIED_ATTRIBUTE}>${style}`
+  return stated.has('html')
+    ? prependFirst(withBody, 'html', head)
+    : markedHtml(withBody, head)
+}
+
+/** Writes a marked `html` and what follows it right after the doctype. */
+function markedHtml(html: string, lead: string): string {
+  const doctype = html.match(/^\s*<!doctype[^>]*>/i)?.[0] ?? ''
+  return `${doctype}<html ${IMPLIED_ATTRIBUTE}>${lead}${html.slice(doctype.length)}`
 }
 
 /**
@@ -348,6 +453,11 @@ export function startCanvas(
         hostname: SERVE_HOST,
         port,
         development: false,
+        /*
+         * Production mode turns port reuse on, so a second canvas would bind
+         * beside one already listening rather than walk past it.
+         */
+        reusePort: false,
         /* The change stream stays open for as long as the shell does. */
         idleTimeout: 0,
         routes: {
@@ -374,6 +484,9 @@ export function startCanvas(
                   },
                 }),
               },
+              editing: readEditing(root, new Date()).map(
+                ({ page, frame, by, until }) => ({ page, frame, by, until }),
+              ),
             })
           }),
           '/api/frames/move': {
@@ -396,6 +509,30 @@ export function startCanvas(
               }),
             ),
           },
+          '/api/frames/resize': {
+            POST: guarded(
+              mutation((body) => {
+                if (
+                  !isRecord(body) ||
+                  typeof body.page !== 'string' ||
+                  typeof body.frame !== 'string' ||
+                  typeof body.x !== 'number' ||
+                  typeof body.y !== 'number' ||
+                  typeof body.width !== 'number' ||
+                  typeof body.height !== 'number'
+                ) {
+                  return badBody('send page, frame, x, y, width, and height')
+                }
+                const outcome = resizeFrame(root, body.page, body.frame, {
+                  x: body.x,
+                  y: body.y,
+                  width: body.width,
+                  height: body.height,
+                })
+                return outcome.ok ? json(outcome) : refusal(outcome)
+              }),
+            ),
+          },
           '/api/frames/edit': {
             POST: guarded(
               mutation((body) => {

package/src/canvas/tokens.ts

@@ -1,8 +1,19 @@
-import { existsSync, readdirSync, readFileSync } from 'node:fs'
+import { existsSync, readFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { DESIGN_INSTALL_DIR, DESIGN_PROJECT_SUBDIR } from '@/design/adapter'
-import { buildDesignCss } from '@/design/css'
-import { isOwnCheckout } from '@/project-root'
+import { buildDesignCss, fontFaceBlock } from '@/design/css'
+import {
+  FONT_FACES,
+  HAND_DRAWN_FONT_FACES,
+  type FontFace,
+} from '@/design/fonts'
+import {
+  type DroppedFace,
+  inlineProjectFaces,
+  namedFamilies,
+  projectSheets,
+} from '@/design/project-fonts'
+import { isOwnCheckout } from '@/roots/project'
 
 /**
  * The stylesheet injected into every frame, so a frame drawn with
@@ -17,6 +28,8 @@ export type FrameTokens =
       readonly css: string
       /** Relative to the root, in the order the stylesheet concatenates them. */
       readonly files: readonly string[]
+      /** Project faces left out of the sheet, present only when one was. */
+      readonly dropped?: readonly DroppedFace[]
     }
   | { readonly source: 'none'; readonly css: ''; readonly notice: string }
 
@@ -113,19 +126,44 @@ export function tokenGroups(css: string): TokenGroup[] {
 
 /** The installed files in cascade order: the base first, then each override. */
 function installedFiles(root: string): string[] {
-  const files: string[] = []
   const base = join(DESIGN_INSTALL_DIR, BASE_FILE)
-  if (existsSync(join(root, base))) files.push(base)
+  return [
+    ...(existsSync(join(root, base)) ? [base] : []),
+    ...projectSheets(root),
+  ]
+}
+
+/**
+ * The vendored faces the installed sheets name and no project rule already
+ * declares, so a target renders the base's families on a machine that never
+ * installed them, and a project face of the same family wins outright.
+ */
+function toolkitFaces(css: string, declared: ReadonlySet<string>): FontFace[] {
+  const named = namedFamilies(css)
+  return [...FONT_FACES, ...HAND_DRAWN_FONT_FACES].filter(
+    (face) => named.has(face.family) && !declared.has(face.family),
+  )
+}
 
+/**
+ * A project sheet with its local `url()`s inlined, since a frame is served
+ * from the content folder and cannot reach a path under `.claude/design/`.
+ */
+function installedSheets(root: string, files: readonly string[]) {
   const projectDir = join(DESIGN_INSTALL_DIR, DESIGN_PROJECT_SUBDIR)
-  if (existsSync(join(root, projectDir))) {
-    const overrides = readdirSync(join(root, projectDir))
-      .filter((name) => name.endsWith('.css'))
-      .sort((a, b) => a.localeCompare(b))
-      .map((name) => join(projectDir, name))
-    files.push(...overrides)
-  }
-  return files
+  const dropped: DroppedFace[] = []
+  const declared = new Set<string>()
+  const css = files
+    .map((file) => {
+      const raw = readFileSync(join(root, file), 'utf8')
+      if (!file.startsWith(projectDir)) return `/* ${file} */\n${raw}`
+      const inlined = inlineProjectFaces(root, file, raw)
+      dropped.push(...inlined.dropped)
+      for (const family of inlined.declared) declared.add(family)
+      return `/* ${file} */\n${inlined.css}`
+    })
+    .join('\n')
+  return { css, dropped, declared }
 }
 
 /**
@@ -141,7 +179,7 @@ export function resolveFrameTokens(
     /*
      * Faces embedded, since the type tokens name `Geist Variable` and a
      * machine with only static Geist installed renders every frame in the
-     * fallback. An installed base owns its fonts, so that branch gets none.
+     * fallback.
      */
     return {
       source: 'toolkit',
@@ -151,10 +189,14 @@ export function resolveFrameTokens(
 
   const files = installedFiles(root)
   if (files.length > 0) {
-    const css = files
-      .map((file) => `/* ${file} */\n${readFileSync(join(root, file), 'utf8')}`)
-      .join('\n')
-    return { source: 'installed', css, files }
+    const { css, dropped, declared } = installedSheets(root, files)
+    const faces = toolkitFaces(css, declared)
+    return {
+      source: 'installed',
+      css: faces.length > 0 ? `${fontFaceBlock(faces)}\n${css}` : css,
+      files,
+      ...(dropped.length > 0 && { dropped }),
+    }
   }
 
   return { source: 'none', css: '', notice: NONE_NOTICE }

package/src/census/count.ts

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

package/src/claude/seeds.ts

@@ -1,10 +1,10 @@
 import { existsSync } from 'node:fs'
 import { chmod, mkdir, readFile, writeFile } from 'node:fs/promises'
 import { dirname, join, relative } from 'node:path'
-import { copyPreservingMode } from '@/copy'
-import { creationRel, isRecordEntry } from '@/record-root'
+import { copyPreservingMode } from '@/sync/copy'
+import { creationRel, isRecordEntry } from '@/roots/record'
 import { rewritesOnInstall, stripSeedMarker } from '@/tooling/seed-marker'
-import { SURFACE_ENTRIES, surfaceDir } from '@/surface-root'
+import { SURFACE_ENTRIES, surfaceDir } from '@/roots/surface'
 
 const SEEDS_DIR = join('tooling', 'claude', 'seeds')
 const CLAUDE_DIR = '.claude'