@erclx/canon 5.23.0 → 5.25.0

package/src/canvas/client/shell.css

@@ -320,29 +320,6 @@ code {
   outline-offset: 6px;
 }
 
-.box {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-xs) var(--space-md);
-  margin: var(--space-xs) 0 0;
-}
-
-.box-row {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--space-sm);
-}
-
-.box dt {
-  color: var(--color-muted);
-}
-
-.box dd {
-  margin: 0;
-  color: var(--color-text);
-  font-variant-numeric: tabular-nums;
-}
-
 .toolbar {
   position: absolute;
   right: var(--space-md);
@@ -436,77 +413,6 @@ code {
   white-space: nowrap;
 }
 
-/* One property a row, since a computed color or font stack outgrows a half. */
-.styles {
-  grid-template-columns: 1fr;
-}
-
-.styles dd {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.styles .box-row {
-  align-items: center;
-}
-
-.styles dt {
-  flex: none;
-  width: 4.5rem;
-}
-
-.styles dd {
-  flex: 1;
-}
-
-.field-cell {
-  display: flex;
-  gap: var(--space-xs);
-}
-
-.field,
-.token-picker {
-  min-width: 0;
-  min-height: 24px;
-  padding: 2px var(--space-xs);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-action);
-  background: var(--color-surface);
-  color: var(--color-text);
-  font: inherit;
-  font-variant-numeric: tabular-nums;
-}
-
-.field {
-  flex: 1;
-  width: 100%;
-}
-
-.token-picker {
-  flex: none;
-  width: 4.5rem;
-  cursor: pointer;
-}
-
-.field:hover,
-.token-picker:hover {
-  border-color: var(--color-muted);
-}
-
-.field:disabled,
-.token-picker:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.saved {
-  margin-left: var(--space-sm);
-  color: var(--color-success);
-  font-weight: 400;
-}
-
 .tabs {
   display: flex;
   gap: 2px;

package/src/canvas/tokens.ts

@@ -138,7 +138,15 @@ export function resolveFrameTokens(
   options: TokenOptions = {},
 ): FrameTokens {
   if (options.isOwnCheckout ?? isOwnCheckout(root)) {
-    return { source: 'toolkit', css: buildDesignCss() }
+    /*
+     * 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.
+     */
+    return {
+      source: 'toolkit',
+      css: buildDesignCss(undefined, { embedFonts: true }),
+    }
   }
 
   const files = installedFiles(root)

package/src/claude/cases/misc.ts

@@ -27,6 +27,11 @@ export const MISC_CASES: readonly SkillCase[] = [
       "I found two sites whose look I want us to draw from. Put them side by side and let's settle which one the design should follow before anyone writes a token.",
     expect: 'sketch-design',
   },
+  {
+    prompt:
+      'Draw the signup screen as a frame on the canvas, then restyle the element I just selected there.',
+    expect: 'canvas',
+  },
   {
     prompt: 'Fire up the dev server the way this project documents it.',
     expect: 'project-commands',

package/src/claude/cases/workflow.ts

@@ -26,7 +26,7 @@ export const WORKFLOW_CASES: readonly SkillCase[] = [
   },
   {
     prompt: 'Draw me a diagram of how the pieces of this system connect.',
-    expect: 'draft-diagram',
+    expect: 'draft-figure',
   },
   {
     prompt:

package/src/claude/seeds.ts

@@ -20,7 +20,6 @@ const HOOKS = 'hooks'
 export const SUBDIRS: readonly string[] = [
   HOOKS,
   'context',
-  'diagrams',
   'memory',
   'tasks',
   'wireframes',

package/src/commands/canvas.ts

@@ -20,6 +20,7 @@ import {
   STYLE_PROPERTIES,
 } from '@/canvas/edit'
 import { CANVAS_PORT, startCanvas } from '@/canvas/server'
+import { PROJECT_ROOT } from '@/project-root'
 import { resolveFrameTokens } from '@/canvas/tokens'
 import { displayPath, parsePort, waitForInterrupt } from '@/serve/report'
 import {
@@ -49,9 +50,35 @@ interface Refused {
     | 'no-root'
     | 'no-server'
     | 'capture-failed'
+    | 'missing-client-deps'
   readonly detail: string
 }
 
+const CLIENT_DEPS = ['preact', '@preact/signals'] as const
+
+/**
+ * Refuses when the shell's client packages do not resolve from `from`, since
+ * the bundler then answers `/` with an empty page rather than an error. The
+ * caller passes the package root the binary runs from, never the served
+ * project's, so a global install serving a target finds its own copies.
+ */
+export function missingClientDeps(from: string): Refused | undefined {
+  const missing = CLIENT_DEPS.filter((name) => {
+    try {
+      Bun.resolveSync(name, from)
+      return false
+    } catch {
+      return true
+    }
+  })
+  if (missing.length === 0) return undefined
+  return {
+    ok: false,
+    reason: 'missing-client-deps',
+    detail: `${missing.join(', ')} not installed in ${from}, so the canvas shell cannot load. Run bun install there`,
+  }
+}
+
 type RootOutcome = { readonly ok: true; readonly root: string } | Refused
 
 /**
@@ -637,6 +664,8 @@ async function runServe(
     return refuseServe(resolved.reason, resolved.detail, emitJson)
   }
   const { root } = resolved
+  const missing = missingClientDeps(PROJECT_ROOT)
+  if (missing) return refuseServe(missing.reason, missing.detail, emitJson)
   /*
    * Imported here rather than at the top, so a command module the test runner
    * loads never asks it for an HTML module it cannot parse.

package/src/commands/design.ts

@@ -6,30 +6,22 @@ import {
   DESIGN_INSTALL_DIR,
   DESIGN_PROJECT_SUBDIR,
 } from '@/design/adapter'
-import { generateBoard } from '@/design/board'
 import { buildDesignCss } from '@/design/css'
 import { HAND_DRAWN_FONT_FACES } from '@/design/fonts'
 import { renderDesignDoc } from '@/design/render'
 import { DESIGN_BASE_CSS, DESIGN_DOCUMENT, regenDesign } from '@/design/regen'
-import {
-  checkoutMismatchWarning,
-  isOwnCheckout,
-  PROJECT_ROOT,
-} from '@/project-root'
+import { checkoutMismatchWarning, PROJECT_ROOT } from '@/project-root'
 import { creationRel, SCRATCH } from '@/record-root'
 import { surfaceDir } from '@/surface-root'
 import { recordStamp, runDomainSync } from '@/sync/engine'
 import { resolveTarget } from '@/target'
 import { intro, logAdd, logError, logInfo, logWarn, outro, palette } from '@/ui'
-import { mainWorktreeRoot } from '@/worktree'
 
 export function register(program: Command): void {
   const design = program
     .command('design')
     .helpOption('-h, --help', 'Show this help message')
-    .description(
-      'Design system commands (regen, css, render, board, install, sync)',
-    )
+    .description('Design system commands (regen, css, render, install, sync)')
 
   design
     .command('regen')
@@ -145,60 +137,6 @@ export function register(program: Command): void {
       )
     })
 
-  design
-    .command('board')
-    .helpOption('-h, --help', 'Show this help message')
-    .description(
-      'Generate the design board, an index over a project’s design surfaces',
-    )
-    .option(
-      '-o, --out <path>',
-      'Output directory',
-      creationRel(process.cwd(), SCRATCH, 'render', 'board'),
-    )
-    .option('--root <path>', 'Project root, defaulting to the main worktree')
-    .addHelpText(
-      'after',
-      [
-        '',
-        'Reads its sources from --root, defaulting to the main worktree of',
-        'whatever project the caller stands in, and writes a static page',
-        'set, never installed or synced. The surfaces panel’s landing-page',
-        'half and the whole components panel render only when that root is',
-        'this toolkit’s own checkout. Open the result with canon serve <out>.',
-        '',
-      ].join('\n'),
-    )
-    .action(async (opts: { out: string; root?: string }) => {
-      const outDir = resolve(process.cwd(), opts.out)
-      const root = opts.root
-        ? resolve(process.cwd(), opts.root)
-        : await mainWorktreeRoot()
-      const isToolkitCheckout = isOwnCheckout(root)
-      const { GREEN, GREY, NC, RED, WHITE } = palette(process.stderr)
-      const mismatch = checkoutMismatchWarning(process.cwd())
-      process.stderr.write(
-        `${GREY}┌${NC}\n${GREY}│${NC} ${WHITE}Generate design board${NC}\n`,
-      )
-      if (mismatch !== undefined) logWarn(mismatch)
-      const result = generateBoard(
-        root,
-        outDir,
-        process.cwd(),
-        isToolkitCheckout,
-      )
-      if (!result.ok) {
-        process.stderr.write(
-          `${GREY}│${NC} ${RED}✗${NC} ${result.detail}\n${GREY}└${NC}\n`,
-        )
-        process.exitCode = 1
-        return
-      }
-      process.stderr.write(
-        `${GREY}│${NC} ${GREEN}✓${NC} ${relative(process.cwd(), result.indexPath)}\n${GREY}│${NC}   Open with: canon serve ${relative(process.cwd(), result.outDir)}\n${GREY}└${NC}\n`,
-      )
-    })
-
   design
     .command('install')
     .description('Install the base stylesheet into a project')