@erclx/canon 5.53.0 → 5.54.0

package/src/canvas/editing.ts

@@ -1,203 +0,0 @@
-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/fit.ts

@@ -1,238 +0,0 @@
-import {
-  type Box,
-  type ContentRefused,
-  readPage,
-  resizeFrame,
-} from '@/canvas/content'
-import {
-  type CaptureDeps,
-  resolveCaptureTargets,
-  type ServeRefused,
-  serveCanvas,
-} from '@/canvas/capture'
-import { resolveFrameTokens, servedFamilies } from '@/canvas/tokens'
-
-/** What the capture browser read off one frame at its box width. */
-export interface Measured {
-  readonly page: string
-  readonly frame: string
-  readonly box: Box
-  readonly contentHeight: number
-  readonly contentWidth: number
-  /**
-   * The lowest edge of any element in the body moved when the viewport
-   * height changed, so a viewport unit is sizing something and the content
-   * measure is not the height a viewer draws.
-   */
-  readonly viewportBound: boolean
-  /** The first family of the body text, unquoted. */
-  readonly family: string
-}
-
-export interface FitRow {
-  readonly page: string
-  readonly frame: string
-  /** The box height now. */
-  readonly height: number
-  /** The content's height, which is what the box should be. */
-  readonly fitted: number
-  /** The content is wider than the box, which fit reports and never widens. */
-  readonly wide: boolean
-  /** The first family is not one the canvas serves, so the height may not hold. */
-  readonly font: boolean
-  /**
-   * The document height depends on the viewport, as a height in `vh` does, so
-   * the content measure is not the height a viewer draws and nothing is written.
-   */
-  readonly viewport: boolean
-  readonly family: string
-}
-
-/**
- * Turns measurements into rows. The box width is the frame's declared render
- * width, so an overflow in it is a finding and never a resize. `served` is the
- * set of families the served sheet carries a face for.
- *
- * A frame whose elements moved with the viewport height is sized by a unit
- * such as `vh`, so the row keeps its height and reports `viewport`. Scroll
- * height cannot show it alone, since a single `100vh` section reads as short
- * content drawn in a taller viewport.
- */
-export function planFit(
-  measured: readonly Measured[],
-  served: ReadonlySet<string>,
-): FitRow[] {
-  return measured.map((item) => {
-    const content = Math.max(1, Math.ceil(item.contentHeight))
-    const viewport = item.viewportBound
-    return {
-      page: item.page,
-      frame: item.frame,
-      height: item.box.height,
-      fitted: viewport ? item.box.height : content,
-      wide: item.contentWidth > item.box.width,
-      font: !served.has(item.family),
-      viewport,
-      family: item.family,
-    }
-  })
-}
-
-/** Whether a row asks anything of the operator or the session. */
-export function isOwed(row: FitRow): boolean {
-  return row.fitted !== row.height || row.wide || row.font || row.viewport
-}
-
-export type FitOutcome =
-  | {
-      readonly ok: true
-      readonly rows: readonly FitRow[]
-      /** Whether heights were written, which is false under a check. */
-      readonly written: boolean
-    }
-  | ContentRefused
-  | ServeRefused
-
-export interface FitDeps extends Pick<CaptureDeps, 'start'> {
-  /** What a test stands in for, which the command never passes. */
-  readonly measure?: (targets: readonly MeasureTarget[]) => Promise<Measured[]>
-}
-
-export interface MeasureTarget {
-  readonly page: string
-  readonly frame: string
-  readonly url: string
-  readonly box: Box
-}
-
-/**
- * Loads each frame at its box width through the served address, which is what
- * injects the tokens and the faces, and reads the document once fonts and the
- * load event have settled, the moment a capture waits for. The content is read
- * at a one pixel tall viewport, since a document shorter than the viewport
- * reports the viewport and a frame could then never shrink. The lowest element
- * edge is then read at the box height and at twice it, and an edge that moved
- * is a height set in viewport units.
- */
-async function measureInBrowser(
-  targets: readonly MeasureTarget[],
-): Promise<Measured[]> {
-  const { chromium } = await import('playwright-core')
-  const browser = await chromium.launch()
-  try {
-    const measured: Measured[] = []
-    for (const target of targets) {
-      const page = await browser.newPage({
-        viewport: { width: target.box.width, height: 1 },
-      })
-      try {
-        await page.goto(target.url, { waitUntil: 'load' })
-        const read = await page.evaluate(async () => {
-          await document.fonts.ready
-          const root = document.documentElement
-          const family = getComputedStyle(document.body).fontFamily
-          return {
-            contentHeight: root.scrollHeight,
-            contentWidth: root.scrollWidth,
-            family,
-          }
-        })
-        const lowestEdge = () =>
-          page.evaluate(() => {
-            let bottom = 0
-            for (const element of document.body.querySelectorAll('*')) {
-              bottom = Math.max(
-                bottom,
-                element.getBoundingClientRect().bottom + window.scrollY,
-              )
-            }
-            return Math.ceil(bottom)
-          })
-        const heights = [target.box.height, target.box.height * 2]
-        const edges: number[] = []
-        for (const height of heights) {
-          await page.setViewportSize({ width: target.box.width, height })
-          edges.push(await lowestEdge())
-        }
-        measured.push({
-          page: target.page,
-          frame: target.frame,
-          box: target.box,
-          contentHeight: read.contentHeight,
-          contentWidth: read.contentWidth,
-          viewportBound: edges[0] !== edges[1],
-          family: firstFamily(read.family),
-        })
-      } finally {
-        await page.close()
-      }
-    }
-    return measured
-  } finally {
-    await browser.close()
-  }
-}
-
-/** The first entry of a computed `font-family` list, without its quotes. */
-export function firstFamily(list: string): string {
-  const first = list.split(',')[0] ?? ''
-  return first.trim().replace(/^["']|["']$/g, '')
-}
-
-/**
- * Measures the frames `spec` names and, unless `write` is false, sets each
- * box's height to its content through `resizeFrame`, the writer the operator's
- * drags share. Serves the canvas for the call, so it needs no running board.
- */
-export async function fitCanvas(
-  root: string,
-  spec: string,
-  write: boolean,
-  deps: FitDeps = {},
-): Promise<FitOutcome> {
-  const early = resolveCaptureTargets(root, spec, '')
-  if (!early.ok) return early
-
-  const served = await serveCanvas(root, deps.start, async (base) => {
-    const resolved = resolveCaptureTargets(root, spec, base)
-    if (!resolved.ok) return resolved
-    const frames = readPage(root, resolved.targets[0]?.page ?? '')?.frames ?? []
-
-    const targets: MeasureTarget[] = []
-    for (const item of resolved.targets) {
-      const frame = frames.find((candidate) => candidate.name === item.frame)
-      if (!frame) continue
-      targets.push({
-        page: item.page,
-        frame: item.frame,
-        url: item.url,
-        box: {
-          x: frame.x,
-          y: frame.y,
-          width: frame.width,
-          height: frame.height,
-        },
-      })
-    }
-    const measure = deps.measure ?? measureInBrowser
-    return { ok: true as const, targets, measured: await measure(targets) }
-  })
-  if (!served.ok) return served
-
-  const rows = planFit(
-    served.measured,
-    servedFamilies(resolveFrameTokens(root).css),
-  )
-  if (!write) return { ok: true, rows, written: false }
-
-  for (const row of rows.filter((item) => item.fitted !== item.height)) {
-    const target = served.targets.find((item) => item.frame === row.frame)
-    if (!target) continue
-    const outcome = resizeFrame(root, row.page, row.frame, {
-      ...target.box,
-      height: row.fitted,
-    })
-    if (!outcome.ok) return outcome
-  }
-  return { ok: true, rows, written: true }
-}

package/src/canvas/global.d.ts

@@ -1,15 +0,0 @@
-/**
- * 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/history.ts

@@ -1,116 +0,0 @@
-import type { Box } from '@/canvas/content'
-
-/**
- * The operator's shell edits, held by one `canon canvas serve` process. Only
- * the server's write routes record here, so an edit made through a file or a
- * CLI verb never enters it. An entry carries the state it replaced and the
- * state it wrote, and applying it checks the second is still there.
- */
-
-/** What an element entry restores: the raw style attribute, and raw inner content for a text edit. */
-export interface ElementState {
-  readonly style: string | undefined
-  readonly inner?: string
-}
-
-export interface ElementEntry {
-  readonly kind: 'element'
-  readonly page: string
-  readonly frame: string
-  readonly index: number
-  readonly tag: string
-  /** How many elements the file held, which an insert or removal ahead of the target changes. */
-  readonly count: number
-  readonly before: ElementState
-  readonly after: ElementState
-  /** Edits a control posts as one gesture share this, and merge into one entry. */
-  readonly step?: string
-}
-
-export interface BoxEntry {
-  readonly kind: 'box'
-  readonly page: string
-  readonly frame: string
-  /** Undefined when the layout held no box, so the reader placed the frame. */
-  readonly before: Box | undefined
-  readonly after: Box
-}
-
-export type HistoryEntry = ElementEntry | BoxEntry
-
-export type Direction = 'undo' | 'redo'
-
-/**
- * `dropped` means the target changed since the entry was recorded, so the
- * entry is discarded unwritten. `busy` leaves it in place to try again.
- */
-export type ApplyResult = 'applied' | 'dropped' | 'busy'
-
-export type HistoryOutcome = ApplyResult | 'empty'
-
-export interface HistoryFlags {
-  readonly canUndo: boolean
-  readonly canRedo: boolean
-}
-
-export const HISTORY_CAP = 100
-
-function isSameTarget(a: ElementEntry, b: ElementEntry): boolean {
-  return (
-    a.page === b.page &&
-    a.frame === b.frame &&
-    a.index === b.index &&
-    a.tag === b.tag
-  )
-}
-
-export class History {
-  private readonly undone: HistoryEntry[] = []
-  private readonly done: HistoryEntry[] = []
-
-  constructor(private readonly cap = HISTORY_CAP) {}
-
-  record(entry: HistoryEntry): void {
-    this.undone.length = 0
-    const last = this.done.at(-1)
-    if (
-      entry.kind === 'element' &&
-      entry.step !== undefined &&
-      last?.kind === 'element' &&
-      last.step === entry.step &&
-      isSameTarget(last, entry)
-    ) {
-      this.done[this.done.length - 1] = { ...last, after: entry.after }
-      return
-    }
-    this.done.push(entry)
-    if (this.done.length > this.cap) this.done.shift()
-  }
-
-  undo(apply: (entry: HistoryEntry, direction: Direction) => ApplyResult) {
-    return this.move(this.done, this.undone, 'undo', apply)
-  }
-
-  redo(apply: (entry: HistoryEntry, direction: Direction) => ApplyResult) {
-    return this.move(this.undone, this.done, 'redo', apply)
-  }
-
-  flags(): HistoryFlags {
-    return { canUndo: this.done.length > 0, canRedo: this.undone.length > 0 }
-  }
-
-  private move(
-    from: HistoryEntry[],
-    to: HistoryEntry[],
-    direction: Direction,
-    apply: (entry: HistoryEntry, direction: Direction) => ApplyResult,
-  ): HistoryOutcome {
-    const entry = from.at(-1)
-    if (!entry) return 'empty'
-    const result = apply(entry, direction)
-    if (result === 'busy') return result
-    from.pop()
-    if (result === 'applied') to.push(entry)
-    return result
-  }
-}

package/src/canvas/index.html

@@ -1,20 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Canvas</title>
-    <!--
-      Bun's bundler resolves every href and src here at start. A root-relative
-      route the server answers, such as /api/icon.svg, fails with "Could not
-      resolve" and leaves / serving an empty 200, so main.tsx points the icon
-      at it on load.
-    -->
-    <link rel="icon" href="data:," />
-    <link rel="stylesheet" href="./client/shell.css" />
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="./client/main.tsx"></script>
-  </body>
-</html>