@erclx/canon 5.29.0 → 5.30.0

package/claude/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "canon",
   "description": "Runs your agent's work and keeps its code good, on one setup for every repo.",
-  "version": "5.29.0",
+  "version": "5.30.0",
   "author": {
     "name": "Eric Le",
     "url": "https://github.com/erclx"

package/package.json

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

package/src/canvas/client/main.tsx

@@ -51,6 +51,15 @@ chrome.rel = 'stylesheet'
 chrome.href = '/api/chrome.css'
 document.head.prepend(chrome)
 
+/*
+ * The page declares an empty icon so the browser never asks for /favicon.ico,
+ * since the bundler cannot resolve a route the server answers, and this points
+ * it at the brand icon once the shell loads.
+ */
+document
+  .querySelector('link[rel="icon"]')
+  ?.setAttribute('href', '/api/icon.svg')
+
 const events = new EventSource('/api/events')
 events.addEventListener('message', (message) => {
   void applyChange(JSON.parse(message.data) as ChangeEvent)

package/src/canvas/server.ts

@@ -34,6 +34,7 @@ import {
   tokenGroups,
 } from '@/canvas/tokens'
 import { buildDesignCss } from '@/design/css'
+import { brandFavicon } from '@/design/brand-favicon'
 import {
   bindFirstFree,
   PORT_ATTEMPTS,
@@ -713,6 +714,12 @@ export function startCanvas(
                 },
               }),
           ),
+          '/api/icon.svg': guarded(
+            () =>
+              new Response(brandFavicon(), {
+                headers: { 'content-type': 'image/svg+xml' },
+              }),
+          ),
           '/api/events': guarded(() => changes.open()),
         },
         fetch: guarded((request) => {

package/src/design/brand-favicon.ts

@@ -0,0 +1,18 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { FAVICON_COLORS, renderFavicon } from '@/design/favicon'
+import { PROJECT_ROOT } from '@/roots/project'
+
+const BRAND_MARK = 'assets/brand/mark.svg'
+
+/**
+ * The brand icon, built from the mark and the favicon's own pair, the same two
+ * inputs `web/public/favicon.svg` is generated from. Every surface that shows
+ * the icon reads it here rather than keeping a copy that drifts from the mark.
+ * It sits apart from `favicon.ts` because the card build imports that module
+ * through an `@` alias pointed at `web/src`, so it must import nothing.
+ */
+export function brandFavicon(): string {
+  const mark = readFileSync(join(PROJECT_ROOT, BRAND_MARK), 'utf8')
+  return renderFavicon(mark, FAVICON_COLORS)
+}

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())
 }
 
 /**