@erclx/canon 5.28.0 → 5.30.0

package/src/pr/evidence.ts

@@ -57,6 +57,10 @@ export interface EvidenceItem {
   readonly stem: string
   /** True when `path` did not exist at the comparison's base commit. */
   readonly added: boolean
+  /** Pixel width of the head image, read from its PNG header. Absent when unread. */
+  readonly width?: number
+  /** Pixel width of the base image, absent for an added case or an unread header. */
+  readonly baseWidth?: number
 }
 
 export interface EvidenceState {
@@ -140,12 +144,33 @@ function rawUrl(repo: string, sha: string, path: string): string {
 }
 
 /**
- * The pixel width every screenshot asks for. GitHub sizes a comment table to
- * its content and clamps an image to its cell, so a width past any comment
- * fills the cell, where `width="100%"` leaves a narrow screenshot narrow.
+ * The most pixels a screenshot asks for. GitHub sizes a comment table to its
+ * content and clamps an image to its cell, so a width past any comment fills
+ * the cell, where `width="100%"` leaves a narrow screenshot narrow. An image
+ * asks for the smaller of its own width and this ceiling, so a small crop
+ * shows at its true size and is never scaled up. An image whose width was not
+ * read asks for the ceiling.
  */
 const IMAGE_WIDTH = 1000
 
+const PNG_SIGNATURE = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]
+
+/** Bytes of a PNG that reach the end of IHDR's width field. */
+export const PNG_HEADER_BYTES = 24
+
+/**
+ * The pixel width in a PNG's IHDR chunk, or undefined for bytes that are not
+ * a PNG with a header or that carry a zero width.
+ */
+export function readPngWidth(bytes: Uint8Array): number | undefined {
+  if (bytes.length < PNG_HEADER_BYTES) return undefined
+  if (PNG_SIGNATURE.some((byte, index) => bytes[index] !== byte)) {
+    return undefined
+  }
+  const width = new DataView(bytes.buffer, bytes.byteOffset).getUint32(16)
+  return width > 0 ? width : undefined
+}
+
 /** A table cell and an attribute value share one escape, since a stem is a path segment placed in both. */
 function escapeCell(text: string): string {
   return text
@@ -156,8 +181,9 @@ function escapeCell(text: string): string {
     .replaceAll('|', '&#124;')
 }
 
-function evidenceImage(url: string, alt: string): string {
-  return `<img src="${url}" width="${IMAGE_WIDTH}" alt="${alt}">`
+function evidenceImage(url: string, alt: string, width?: number): string {
+  const shown = Math.min(width ?? IMAGE_WIDTH, IMAGE_WIDTH)
+  return `<img src="${url}" width="${shown}" alt="${alt}">`
 }
 
 const EVIDENCE_IMAGE = String.raw`(?:!\[\]\([^)]*\)|<img [^>]*>)`
@@ -232,8 +258,16 @@ export function renderEvidenceBody(
       const stem = escapeCell(item.stem)
       const before = item.added
         ? '*(new)*'
-        : evidenceImage(rawUrl(repo, base, item.path), `${stem} base`)
-      const after = evidenceImage(rawUrl(repo, head, item.path), `${stem} head`)
+        : evidenceImage(
+            rawUrl(repo, base, item.path),
+            `${stem} base`,
+            item.baseWidth,
+          )
+      const after = evidenceImage(
+        rawUrl(repo, head, item.path),
+        `${stem} head`,
+        item.width,
+      )
       return hasBase
         ? `| ${stem} | ${before} | ${after} |`
         : `| ${stem} | ${after} |`

package/src/roots/project.ts

@@ -72,7 +72,7 @@ export function findCheckoutMismatch(startDir: string): string | undefined {
  * The warning line every verb that answers from `PROJECT_ROOT` emits when the
  * caller's cwd sits inside a second checkout, or `undefined` when it does not.
  *
- * It returns the string rather than logging it so this module keeps no `@/ui`
+ * It returns the string rather than logging it so this module keeps no `@/cli/ui`
  * dependency and the wording is unit-testable on its own. The wording names
  * both roots and no subcommand: the four chokepoints that carry it stand under
  * eight-plus verbs each, so a per-verb suffix would cost a parameter at every

package/src/sandbox/headless/run.ts

@@ -37,7 +37,7 @@ import {
   logStep,
   logWarn,
   outro,
-} from '@/ui'
+} from '@/cli/ui'
 
 /**
  * The flags and budget every run takes, each overridable through its

package/src/sandbox/provision.ts

@@ -30,7 +30,7 @@ import {
   outro,
   palette,
   select,
-} from '@/ui'
+} from '@/cli/ui'
 
 /**
  * Provisions one scenario into the sandbox tree, and resets or cleans that tree.

package/src/sandbox/scenario.ts

@@ -11,7 +11,7 @@ import {
 } from 'node:fs'
 import { createRequire } from 'node:module'
 import { dirname, join, relative } from 'node:path'
-import { logError, logInfo, logStep, logWarn, palette, select } from '@/ui'
+import { logError, logInfo, logStep, logWarn, palette, select } from '@/cli/ui'
 
 /**
  * The TypeScript form of a sandbox scenario: `sandbox/<category>/<command>.ts`,

package/src/serve/report.ts

@@ -4,7 +4,7 @@ import {
   type ServeOutcome,
   type ServeStarted,
 } from '@/serve/static'
-import { intro, logError, logInfo, logStep, logWarn, outro } from '@/ui'
+import { intro, logError, logInfo, logStep, logWarn, outro } from '@/cli/ui'
 
 /**
  * The relative path where it stays inside the working directory, and the

package/src/sync/engine.ts

@@ -28,7 +28,7 @@ import {
   outro,
   palette,
   select,
-} from '@/ui'
+} from '@/cli/ui'
 import { compareVersions, parseVersion } from '@/version/compare'
 import { readInstalled, UNKNOWN_LABEL } from '@/version/installed'
 

package/src/sync/git.ts

@@ -2,7 +2,7 @@ import { basename } from 'node:path'
 import { execa } from 'execa'
 import { gitEnv } from '@/git/env'
 import type { SyncDomain } from '@/sync/target'
-import { pipeOutput } from '@/ui'
+import { pipeOutput } from '@/cli/ui'
 
 const FILE_LIST_MAX = 3
 

package/src/sync/workflow.ts

@@ -22,7 +22,7 @@ import {
   palette,
   pipeOutput,
   select,
-} from '@/ui'
+} from '@/cli/ui'
 
 const PROTECTED_BRANCHES: readonly string[] = ['main', 'master']
 

package/src/targets/validate.ts

@@ -1,7 +1,7 @@
 import { statSync } from 'node:fs'
 import { resolve } from 'node:path'
 import { checkoutMismatchWarning } from '@/roots/project'
-import { logError, logWarn, outro } from '@/ui'
+import { logError, logWarn, outro } from '@/cli/ui'
 
 export function isDirectory(path: string): boolean {
   try {

package/src/teach/nav.ts

@@ -1,4 +1,4 @@
-import { existsSync, readFileSync } from 'node:fs'
+import { existsSync } from 'node:fs'
 import { readdir, readFile, rm } from 'node:fs/promises'
 import { join, posix, relative } from 'node:path'
 import {
@@ -6,10 +6,10 @@ import {
   TEACH_STYLESHEET_COMPONENTS,
 } from '@/design/components'
 import { buildDesignCss } from '@/design/css'
-import { FAVICON_COLORS, faviconLink, renderFavicon } from '@/design/favicon'
+import { brandFavicon } from '@/design/brand-favicon'
+import { faviconLink } from '@/design/favicon'
 import { stripFrontmatter } from '@/markdown/frontmatter'
 import { parseFrontmatter, readField } from '@/indexes/frontmatter'
-import { PROJECT_ROOT } from '@/roots/project'
 import { compileScript } from '@/teach/browser/compile'
 import { dismiss } from '@/teach/browser/dismiss'
 import { focusLine } from '@/teach/browser/focus-line'
@@ -39,8 +39,6 @@ import {
 } from '@/teach/workspace'
 import { writeIfChanged } from '@/teach/write-if-changed'
 
-const BRAND_MARK = 'assets/brand/mark.svg'
-
 /**
  * The link `teach-workspace` once had a session write by hand into every page.
  * A lesson keeps whatever sits outside its marked regions, so the old icon
@@ -68,14 +66,9 @@ function dropHandWrittenHead(html: string): string {
   )
 }
 
-/**
- * Built from the brand mark and the favicon's own pair, the same two inputs
- * `web/public/favicon.svg` is generated from, so every teach page carries the
- * icon the landing page does rather than a copy of its own.
- */
+/** Every teach page carries the icon the landing page does rather than a copy of its own. */
 function teachFavicon(): string {
-  const mark = readFileSync(join(PROJECT_ROOT, BRAND_MARK), 'utf8')
-  return faviconLink(renderFavicon(mark, FAVICON_COLORS))
+  return faviconLink(brandFavicon())
 }
 
 /**

package/src/tooling/inject.ts

@@ -27,7 +27,7 @@ import {
   SUBFOLDER_SPELL_CONFIG,
   subfolderSpellConfig,
 } from '@/tooling/subfolder'
-import { logAdd, logRemove, logStep, logWarn } from '@/ui'
+import { logAdd, logRemove, logStep, logWarn } from '@/cli/ui'
 
 export async function injectConfigs(
   chain: readonly Manifest[],

package/src/tooling/verify-stack.ts

@@ -2,7 +2,7 @@ import { existsSync, mkdirSync, readFileSync, rmSync } from 'node:fs'
 import { join } from 'node:path'
 import { execa, type Options } from 'execa'
 import { isStackExcluded, loadManifest } from '@/tooling/manifest'
-import { intro, logError, logInfo, logStep, logWarn, outro } from '@/ui'
+import { intro, logError, logInfo, logStep, logWarn, outro } from '@/cli/ui'
 
 const SCREENSHOT_TIMEOUT_MS = 60_000
 const TAIL_LINES = 20