npm - @erclx/canon - Versions diffs - 4.34.1 → 4.36.0 - Mend

@erclx/canon 4.34.1 → 4.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/claude/.claude-plugin/plugin.json +1 -1
package/claude/skills/claude-teach/SKILL.md +1 -0
package/package.json +1 -1
package/scripts/core/regen-hero.sh +9 -0
package/src/design/render.ts +11 -0
package/src/design/tokens.ts +1 -1
package/src/slides/layouts.ts +81 -0

package/claude/.claude-plugin/plugin.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "canon",
   "description": "Automated governance, versioning, and discovery tools for Claude Code.",
-  "version": "4.34.1",
+  "version": "4.36.0",
   "author": {
     "name": "Eric Le",
     "url": "https://github.com/erclx"

package/claude/skills/claude-teach/SKILL.md CHANGED Viewed

@@ -18,6 +18,7 @@ The shape of the workspace is fixed by `${CLAUDE_SKILL_DIR}/../../standards/teac
 - Write nothing outside the workspace folder, apart from the one handoff file Step 6 names. A durable page stays in `reference/` and is copied out by the skill that owns the destination, never by this one.
 - Do not open a second workspace on a subject one already covers. Resume that one.
 - Never promote a lesson. It is generated markup carrying a quiz and a learner, and no request makes it promotable.
+- Carry the toolkit's favicon on every page this skill writes, index and lesson alike, in the `<head>` verbatim: `<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 80 80'%3E%3Cpath d='M34,20 L15,28 L15,72 L34,80 Z M66,20 L85,28 L85,72 L66,80 Z' fill='rgb(224,114,75)' /%3E%3Crect x='44' y='15' width='12' height='70' rx='2' fill='rgb(224,114,75)' /%3E%3C/svg%3E" />`
 ## Step 0: let the CLI resolve the workspace root

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@erclx/canon",
   "type": "module",
-  "version": "4.34.1",
+  "version": "4.36.0",
   "description": "Infrastructure and quality tooling for developer workflows",
   "license": "MIT",
   "bin": {

package/scripts/core/regen-hero.sh CHANGED Viewed

@@ -151,6 +151,14 @@ if (!MARK_SVG) {
   process.exit(1)
 }
+const accentMatch = tokenCss.match(/--color-accent:\s*(#[0-9a-fA-F]{3,8})/)
+if (!accentMatch) {
+  console.error("regen-hero: token css carries no --color-accent value, refusing to write a colorless favicon")
+  process.exit(1)
+}
+const faviconSvg = MARK_SVG.replace(/<!--[\s\S]*?-->/, "").trim().replaceAll("currentColor", accentMatch[1])
+const FAVICON = `data:image/svg+xml,${encodeURIComponent(faviconSvg)}`
 const escape = (value) =>
   value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
@@ -329,6 +337,7 @@ const values = {
   TOOLING_STACK_COUNT: String(toolingStacks.length),
   COMMAND_COUNT: String(commandCount),
   MARK_SVG,
+  FAVICON,
   SKILL_ENTRIES: markup(featured(skills, FEATURED_SKILLS)),
   RULE_ENTRIES: entries(deliveredRules),
   STANDARD_ENTRIES: entries(standards),

package/src/design/render.ts CHANGED Viewed

@@ -9,6 +9,16 @@ export interface RenderResult {
   cssPath: string
 }
+/**
+ * The same path data as `assets/brand/mark.svg`, colored via `colorValue`
+ * since a data URI has no CSS context to resolve `currentColor` against and
+ * this page renders on the light chrome `previewChrome()` sets up.
+ */
+const FAVICON_COLOR = colorValue('light-accent') ?? '#a4471c'
+const FAVICON_HREF = `data:image/svg+xml,${encodeURIComponent(
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 10 80 80"><path d="M34,20 L15,28 L15,72 L34,80 Z M66,20 L85,28 L85,72 L66,80 Z" fill="${FAVICON_COLOR}" /><rect x="44" y="15" width="12" height="70" rx="2" fill="${FAVICON_COLOR}" /></svg>`,
+)}`
 export function renderDesignDoc(
   sourcePath: string,
   outDir: string,
@@ -190,6 +200,7 @@ function buildHtml(doc: DesignDoc): string {
 <html lang="en">
 <head>
 <meta charset="utf-8">
+<link rel="icon" href="${FAVICON_HREF}">
 <title>Design tokens</title>
 <link rel="stylesheet" href="design.css">
 <style>

package/src/design/tokens.ts CHANGED Viewed

@@ -307,7 +307,7 @@ export const TOKENS: DesignTokens = {
     'Motion is not used. No transition, animation, or keyframe declaration appears on any rendered surface, and the capture pipeline screenshots a static frame.',
   iconography:
-    'No icon library is installed. `assets/brand/mark.svg` is the one authored icon, embedded inline in the hero topbar, and the surfaces otherwise draw literal glyph characters: `│ ├ ✓ ! ✗ + - ◆ ◇ ❯` for the terminal framing.',
+    "No icon library is installed. `assets/brand/mark.svg` is the one authored icon, embedded inline in the hero topbar, and the surfaces otherwise draw literal glyph characters: `│ ├ ✓ ! ✗ + - ◆ ◇ ❯` for the terminal framing. The same mark also ships as a favicon on every rendered surface, as three independently-maintained copies that track different accents by design rather than by drift: `regen-hero.sh` derives one from the live SVG colored with whatever `--color-accent` (`#e0724b`) the fetched token CSS carries, `src/design/render.ts` carries the path data as a hardcoded literal colored via `colorValue('light-accent')` (`#a4471c`), since a data URI has no CSS context and that page renders on light chrome, and `claude-teach`'s `SKILL.md` names one in prose colored `rgb(224,114,75)`, the same value as the dark accent written as decimal rather than hex to clear the shipped-references gate's commit-sha check. Unifying the three or repairing the one that looks drifted would break the fit each was chosen for.",
 }
 /** A role's value, or `undefined` where the record declares no such role. */

package/src/slides/layouts.ts CHANGED Viewed

@@ -30,6 +30,11 @@ export const LAYOUTS: LayoutInfo[] = [
   { name: 'stat-callout', description: 'Row of large stats with captions' },
   { name: 'grid', description: 'Two-by-two cards, each a term and detail' },
   { name: 'quote', description: 'Large pull quote with attribution' },
+  {
+    name: 'freeform',
+    description:
+      'Explicit shapes at a declared position and size, for a figure the other layouts cannot draw',
+  },
 ]
 const LAYOUT_NAMES = new Set(LAYOUTS.map((layout) => layout.name))
@@ -55,6 +60,7 @@ const RENDERERS: Record<
   'stat-callout': renderStatCallout,
   grid: renderGrid,
   quote: renderQuote,
+  freeform: renderFreeform,
 }
 export function renderDeckSlide(
@@ -346,6 +352,81 @@ function renderQuote(s: PptxSlide, slide: Slide, theme: Theme): void {
   }
 }
+const SHAPE_KEYS = new Set(['x', 'y', 'w', 'h', 'color'])
+const COLOR_ROLES: (keyof Theme)[] = [
+  'background',
+  'surface',
+  'ink',
+  'muted',
+  'accent',
+]
+function renderFreeform(s: PptxSlide, slide: Slide, theme: Theme): void {
+  addTitle(s, slide.title, theme)
+  for (const line of slide.content) {
+    if (!line.trim().startsWith('-')) throw malformedShape(slide.title, line)
+    renderShapeLine(s, line, slide.title, theme)
+  }
+}
+function malformedShape(title: string, line: string): Error {
+  return new Error(
+    `Malformed freeform shape on slide "${title}": ${line.trim()}`,
+  )
+}
+function renderShapeLine(
+  s: PptxSlide,
+  line: string,
+  title: string,
+  theme: Theme,
+): void {
+  const stripped = line.replace(/^\s*-\s*/, '')
+  const colonIndex = stripped.indexOf(':')
+  const head = (
+    colonIndex === -1 ? stripped : stripped.slice(0, colonIndex)
+  ).trim()
+  const text = colonIndex === -1 ? '' : stripped.slice(colonIndex + 1).trim()
+  const tokens = head.split(/\s+/).filter(Boolean)
+  const kind = tokens.shift()
+  if (kind !== 'text' && kind !== 'rect') throw malformedShape(title, line)
+  if (kind === 'text' && colonIndex === -1) throw malformedShape(title, line)
+  const attrs: Record<string, string> = {}
+  for (const token of tokens) {
+    const match = token.match(/^(\w+)=(.+)$/)
+    if (!match) throw malformedShape(title, line)
+    if (!SHAPE_KEYS.has(match[1])) throw malformedShape(title, line)
+    attrs[match[1]] = match[2]
+  }
+  const x = Number(attrs.x)
+  const y = Number(attrs.y)
+  const w = Number(attrs.w)
+  const h = Number(attrs.h)
+  if (![x, y, w, h].every(Number.isFinite)) throw malformedShape(title, line)
+  const role = attrs.color as keyof Theme
+  if (!COLOR_ROLES.includes(role)) throw malformedShape(title, line)
+  const color = theme[role]
+  if (kind === 'text') {
+    s.addText(clean(text), {
+      x,
+      y,
+      w,
+      h,
+      fontFace: FONTS.body,
+      fontSize: TYPE.body,
+      color,
+      valign: 'top',
+    })
+  } else {
+    s.addShape('rect', { x, y, w, h, fill: { color } })
+  }
+}
 function addTitle(s: PptxSlide, title: string, theme: Theme): void {
   if (!title) return
   s.addText(clean(title), {