@erclx/canon 5.24.0 → 5.25.0

package/src/canvas/client/inspector.tsx

@@ -1,6 +1,17 @@
 /** @jsxImportSource preact */
 import type { JSX } from 'preact'
 import { addressOf, elementAt, excerpt, isRawText } from '@/canvas/address'
+import {
+  Field,
+  ReadOnlyField,
+  type Scrub,
+} from '@/canvas/client/inspector/field'
+import { Section } from '@/canvas/client/inspector/section'
+import {
+  clampScrub,
+  displayValue,
+  toCssValue,
+} from '@/canvas/client/inspector/values'
 import {
   currentPage,
   editElement,
@@ -16,8 +27,7 @@ import {
   tokens,
   writeError,
 } from '@/canvas/client/state'
-
-const FIELDS = ['x', 'y', 'width', 'height'] as const
+import '@/canvas/client/inspector/fields.css'
 
 /** Elements the parser never gives content, so they hold no text to edit. */
 const VOID = new Set([
@@ -37,44 +47,43 @@ const VOID = new Set([
 ])
 
 interface StyleField {
+  /** The full word, which names the field. */
   readonly label: string
+  readonly glyph: string
   readonly property: string
-  readonly isColor?: boolean
+  readonly isWide?: boolean
+  readonly placeholder?: string
 }
 
 /**
- * The basic set, in the order the panel lists it. The writer refuses any
- * property outside it, so this list and the writer's have to agree.
+ * The basic set, grouped as the panel lists it. The writer refuses any
+ * property outside it, so these lists and the writer's have to agree.
  */
-const STYLE_FIELDS: readonly StyleField[] = [
-  { label: 'color', property: 'color', isColor: true },
-  { label: 'background', property: 'background-color', isColor: true },
-  { label: 'size', property: 'font-size' },
-  { label: 'weight', property: 'font-weight' },
-  { label: 'width', property: 'width' },
-  { label: 'height', property: 'height' },
-  { label: 'padding', property: 'padding' },
-  { label: 'gap', property: 'gap' },
-  { label: 'direction', property: 'flex-direction' },
+const SIZE_FIELDS: readonly StyleField[] = [
+  { label: 'width', glyph: 'W', property: 'width' },
+  { label: 'height', glyph: 'H', property: 'height' },
 ]
 
-interface Row {
-  readonly name: string
-  readonly value: string
-}
+const FLEX_FIELDS: readonly StyleField[] = [
+  { label: 'direction', glyph: 'Dir', property: 'flex-direction' },
+  { label: 'gap', glyph: 'Gap', property: 'gap', placeholder: '0' },
+  { label: 'padding', glyph: 'Pad', property: 'padding', isWide: true },
+]
 
-/** Where the element sits in its frame, which the panel shows and never edits. */
-function positionRows(element: Element): Row[] {
-  const rect = element.getBoundingClientRect()
-  const font = element.ownerDocument.defaultView
-    ?.getComputedStyle(element)
-    .getPropertyValue('font-family')
-  return [
-    { name: 'x', value: String(Math.round(rect.left)) },
-    { name: 'y', value: String(Math.round(rect.top)) },
-    ...(font ? [{ name: 'font', value: font }] : []),
-  ]
-}
+const TYPE_FIELDS: readonly StyleField[] = [
+  { label: 'size', glyph: 'Size', property: 'font-size' },
+  { label: 'weight', glyph: 'Wt', property: 'font-weight' },
+]
+
+const FILL_FIELDS: readonly StyleField[] = [
+  { label: 'color', glyph: 'Fg', property: 'color' },
+  {
+    label: 'background',
+    glyph: 'Bg',
+    property: 'background-color',
+    placeholder: 'None',
+  },
+]
 
 function inlineValue(element: Element, property: string): string {
   return 'style' in element
@@ -137,44 +146,19 @@ function elementName(element: Element): string {
   return [tag, ...element.classList].join('.')
 }
 
-interface FieldProps {
+interface TokenPickerProps {
   readonly label: string
   readonly initial: string
   readonly isBusy: boolean
   readonly onCommit: (value: string) => void
 }
 
-/**
- * Commits on change, which a text input fires on Enter or on leaving it, and
- * sends nothing when the value is what it started at. Escape puts it back.
- */
-function Field({ label, initial, isBusy, onCommit }: FieldProps): JSX.Element {
-  return (
-    <input
-      class="field"
-      type="text"
-      aria-label={label}
-      title={initial}
-      defaultValue={initial}
-      disabled={isBusy}
-      spellcheck={false}
-      onChange={(event) => {
-        const value = event.currentTarget.value.trim()
-        if (value !== initial.trim()) onCommit(value)
-      }}
-      onKeyDown={(event) => {
-        if (event.key === 'Escape') event.currentTarget.value = initial
-      }}
-    />
-  )
-}
-
 function TokenPicker({
   label,
   initial,
   isBusy,
   onCommit,
-}: FieldProps): JSX.Element | null {
+}: TokenPickerProps): JSX.Element | null {
   const colors =
     tokens.value?.groups?.find((group) => group.kind === 'color')?.tokens ?? []
   if (colors.length === 0) return null
@@ -219,45 +203,80 @@ function ElementFields({
   const commit = (property: string) => (value: string) => {
     if (address) void editElement(frameRef, key, address, property, value)
   }
-  const isTextOnly = holdsTextAlone(node)
+  const rect = node.getBoundingClientRect()
+  const font = currentValue(node, 'font-family')
   const text = node.textContent ?? ''
 
+  /**
+   * Previews into the frame's own inline style and writes through the same
+   * edit as typing. A reload mid-drag replaces the document, so a release
+   * against one no longer on screen posts nothing.
+   */
+  const scrubOf = (property: string): Scrub => ({
+    clamp: (value) => clampScrub(property, value),
+    begin: () => {
+      const original = inlineValue(node, property)
+      const style = (node as HTMLElement).style
+      return {
+        preview: (shown) =>
+          style.setProperty(property, toCssValue(property, shown)),
+        restore: () =>
+          original
+            ? style.setProperty(property, original)
+            : style.removeProperty(property),
+        commit: (shown) => {
+          if (frameDocuments.value.get(key) !== doc || !node.isConnected) return
+          commit(property)(toCssValue(property, shown))
+        },
+      }
+    },
+  })
+
+  const styleField = (field: StyleField): JSX.Element => (
+    <Field
+      key={field.property}
+      label={field.label}
+      glyph={field.glyph}
+      initial={displayValue(field.property, currentValue(node, field.property))}
+      isBusy={isBusy}
+      isWide={field.isWide}
+      placeholder={field.placeholder}
+      onCommit={(typed) =>
+        commit(field.property)(toCssValue(field.property, typed))
+      }
+      scrub={'style' in node ? scrubOf(field.property) : undefined}
+    />
+  )
+
   return (
-    <dl class="box styles">
-      {positionRows(node).map((row) => (
-        <div key={row.name} class="box-row">
-          <dt>{row.name}</dt>
-          <dd title={row.value}>{row.value}</dd>
-        </div>
-      ))}
-      <div class="box-row">
-        <dt>text</dt>
-        <dd title={excerpt(text)}>
-          {isTextOnly ? (
-            <Field
-              label="text"
-              initial={text}
-              isBusy={isBusy}
-              onCommit={commit('text')}
-            />
-          ) : (
-            excerpt(text)
-          )}
-        </dd>
-      </div>
-      {STYLE_FIELDS.map((field) => {
-        const initial = currentValue(node, field.property)
-        return (
-          <div key={field.property} class="box-row">
-            <dt>{field.label}</dt>
-            <dd class="field-cell">
-              <Field
-                label={field.label}
-                initial={initial}
-                isBusy={isBusy}
-                onCommit={commit(field.property)}
-              />
-              {field.isColor && isRawInline(node, field.property) ? (
+    <>
+      <Section title="Layout">
+        <ReadOnlyField
+          label="x"
+          glyph="X"
+          value={String(Math.round(rect.left))}
+        />
+        <ReadOnlyField
+          label="y"
+          glyph="Y"
+          value={String(Math.round(rect.top))}
+        />
+        {SIZE_FIELDS.map(styleField)}
+      </Section>
+      <Section title="Flex">{FLEX_FIELDS.map(styleField)}</Section>
+      <Section title="Typography">
+        {TYPE_FIELDS.map(styleField)}
+        {font ? (
+          <ReadOnlyField label="font" glyph="Font" value={font} isWide />
+        ) : null}
+      </Section>
+      <Section title="Fill">
+        {FILL_FIELDS.map((field) => {
+          const initial = currentValue(node, field.property)
+          return (
+            <div key={field.property} class="fill-row is-wide">
+              {styleField(field)}
+              {isRawInline(node, field.property) ? (
                 <span
                   class="raw"
                   title="Set as a raw value, so it will not follow the theme. Pick a token to fix it"
@@ -265,19 +284,33 @@ function ElementFields({
                   raw
                 </span>
               ) : null}
-              {field.isColor ? (
-                <TokenPicker
-                  label={field.label}
-                  initial={initial}
-                  isBusy={isBusy}
-                  onCommit={commit(field.property)}
-                />
-              ) : null}
-            </dd>
-          </div>
-        )
-      })}
-    </dl>
+              <TokenPicker
+                label={field.label}
+                initial={initial}
+                isBusy={isBusy}
+                onCommit={commit(field.property)}
+              />
+            </div>
+          )
+        })}
+      </Section>
+      <Section title="Text">
+        {holdsTextAlone(node) ? (
+          <Field
+            label="text"
+            glyph="T"
+            initial={text}
+            isBusy={isBusy}
+            isWide
+            onCommit={commit('text')}
+          />
+        ) : (
+          <p class="text-excerpt is-wide" title={excerpt(text)}>
+            {excerpt(text)}
+          </p>
+        )}
+      </Section>
+    </>
   )
 }
 
@@ -342,14 +375,20 @@ export function Inspector(): JSX.Element {
             <p class="detail" title={frame.name}>
               {frame.name}
             </p>
-            <dl class="box">
-              {FIELDS.map((field) => (
-                <div key={field} class="box-row">
-                  <dt>{field}</dt>
-                  <dd>{frame[field]}</dd>
-                </div>
-              ))}
-            </dl>
+            <div class="field-grid">
+              <ReadOnlyField label="x" glyph="X" value={String(frame.x)} />
+              <ReadOnlyField label="y" glyph="Y" value={String(frame.y)} />
+              <ReadOnlyField
+                label="width"
+                glyph="W"
+                value={String(frame.width)}
+              />
+              <ReadOnlyField
+                label="height"
+                glyph="H"
+                value={String(frame.height)}
+              />
+            </div>
           </>
         ) : (
           <p class="empty">Select a frame to see its box</p>

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,84 +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;
-}
-
-.raw {
-  flex: none;
-  align-self: center;
-  color: var(--color-text-secondary);
-  cursor: help;
-}
-
-.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/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/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')