@erclx/canon 5.16.0 → 5.18.0

package/src/canvas/client/pages-panel.tsx

@@ -1,12 +1,15 @@
 /** @jsxImportSource preact */
 import type { JSX } from 'preact'
 import { Layers } from '@/canvas/client/layers'
+import { ThemePanel } from '@/canvas/client/theme-panel'
 import type { Frame } from '@/canvas/content'
 import {
   currentPage,
   expandedFrames,
   frameKey,
   isLoaded,
+  type LeftTab,
+  leftTab,
   loadError,
   pages,
   selectedFrame,
@@ -127,6 +130,48 @@ function FrameList({ onFocusFrame }: PagesPanelProps): JSX.Element | null {
   )
 }
 
+const TABS: readonly { readonly id: LeftTab; readonly label: string }[] = [
+  { id: 'pages', label: 'Pages' },
+  { id: 'theme', label: 'Theme' },
+]
+
+/** Two tabs, so the arrow keys move between them and wrap. */
+function Tabs(): JSX.Element {
+  const select = (at: number) => {
+    const tab = TABS[(at + TABS.length) % TABS.length]
+    if (!tab) return
+    leftTab.value = tab.id
+    document.getElementById(`tab-${tab.id}`)?.focus()
+  }
+  return (
+    <div class="tabs" role="tablist" aria-label="Left panel">
+      {TABS.map((tab, at) => {
+        const isSelected = leftTab.value === tab.id
+        return (
+          <button
+            key={tab.id}
+            id={`tab-${tab.id}`}
+            type="button"
+            role="tab"
+            class="tab"
+            aria-selected={isSelected}
+            tabIndex={isSelected ? 0 : -1}
+            onClick={() => {
+              leftTab.value = tab.id
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'ArrowRight') select(at + 1)
+              if (event.key === 'ArrowLeft') select(at - 1)
+            }}
+          >
+            {tab.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
 export function PagesPanel(props: PagesPanelProps): JSX.Element {
   return (
     <nav class="panel panel-left" aria-label="Pages and frames">
@@ -140,8 +185,14 @@ export function PagesPanel(props: PagesPanelProps): JSX.Element {
         </p>
       ) : !isLoaded.value ? (
         <p class="empty">Loading</p>
+      ) : leftTab.value === 'theme' ? (
+        <>
+          <Tabs />
+          <ThemePanel />
+        </>
       ) : (
         <>
+          <Tabs />
           <h2 class="section-label">Pages</h2>
           <PageList />
           {currentPage.value ? (

package/src/canvas/client/shell.css

@@ -39,7 +39,7 @@ code {
 
 .shell {
   display: grid;
-  grid-template-columns: 15rem minmax(0, 1fr) 13rem;
+  grid-template-columns: 15rem minmax(0, 1fr) 16rem;
   height: 100%;
 }
 
@@ -447,3 +447,128 @@ code {
   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;
+  margin-top: var(--space-sm);
+  padding: 2px;
+  border-radius: var(--radius-action);
+  background: var(--color-surface);
+}
+
+.tab {
+  flex: 1;
+  min-height: 24px;
+  border: 0;
+  border-radius: var(--radius-action);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font: inherit;
+  cursor: pointer;
+}
+
+.tab:hover {
+  color: var(--color-text);
+}
+
+.tab[aria-selected='true'] {
+  background: var(--color-chrome);
+  color: var(--color-text);
+}
+
+.tokens {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.token {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  min-height: 24px;
+  padding: 0 var(--space-sm);
+}
+
+.token .row-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.token-value {
+  max-width: 45%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.swatch {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+}

package/src/canvas/client/state.ts

@@ -1,6 +1,7 @@
 import { computed, signal } from '@preact/signals'
 import type { ElementAddress } from '@/canvas/address'
 import type { Frame, Page } from '@/canvas/content'
+import type { TokenGroup } from '@/canvas/tokens'
 
 /**
  * Everything the panels read. Type imports only from outside `client/`, since
@@ -15,6 +16,17 @@ export interface TokenSource {
   readonly source: 'toolkit' | 'installed' | 'none'
   readonly files?: readonly string[]
   readonly notice?: string
+  /** What the stylesheet defines, which the token picker and Theme tab list. */
+  readonly groups?: readonly TokenGroup[]
+}
+
+export type LeftTab = 'pages' | 'theme'
+
+/** One property change to the selected element, as the inspector posts it. */
+export interface PendingEdit {
+  readonly key: string
+  readonly index: number
+  readonly property: string
 }
 
 export interface FrameRef {
@@ -98,6 +110,26 @@ export const draggingFrame = signal<string | undefined>(undefined)
 /** Why the last write to the canvas failed, until the next one succeeds. */
 export const writeError = signal<string | undefined>(undefined)
 
+export const leftTab = signal<LeftTab>('pages')
+
+/** The edit in flight, which holds its field until the server answers. */
+export const pendingEdit = signal<PendingEdit | undefined>(undefined)
+
+/** The edit that last landed, for a moment after it does. */
+export const savedEdit = signal<PendingEdit | undefined>(undefined)
+
+const SAVED_MS = 2500
+
+/** Why the last edit wrote nothing, until the next one lands. */
+export const editRefusal = signal<string | undefined>(undefined)
+
+/**
+ * The hash an edit answered by frame key, until that frame reloads. A second
+ * edit sent before the reload is made from the file the first one wrote, not
+ * from the document still on screen.
+ */
+export const editedHashes = signal<ReadonlyMap<string, string>>(new Map())
+
 export const currentPage = computed<Page | undefined>(() => {
   const all = pages.value
   return all.find((page) => page.name === selectedPage.value) ?? all[0]
@@ -142,6 +174,17 @@ export function registerFrameDocument(key: string, doc: Document): void {
   const next = new Map(frameDocuments.value)
   next.set(key, doc)
   frameDocuments.value = next
+  if (editedHashes.value.has(key)) {
+    const hashes = new Map(editedHashes.value)
+    hashes.delete(key)
+    editedHashes.value = hashes
+  }
+}
+
+function reloadFrame(key: string): void {
+  const next = new Map(frameVersions.value)
+  next.set(key, (next.get(key) ?? 0) + 1)
+  frameVersions.value = next
 }
 
 export function toggleLayers(key: string): void {
@@ -181,10 +224,7 @@ export async function applyChange(
   fetchImpl: typeof fetch = fetch,
 ): Promise<void> {
   if (change.file.endsWith('.html')) {
-    const key = `${change.page}/${change.file}`
-    const next = new Map(frameVersions.value)
-    next.set(key, (next.get(key) ?? 0) + 1)
-    frameVersions.value = next
+    reloadFrame(`${change.page}/${change.file}`)
   }
   await loadPages(fetchImpl)
 }
@@ -267,6 +307,77 @@ export async function selectElement(
   await write('/api/selection', { ...ref, element: address }, fetchImpl)
 }
 
+/** What a refused edit tells the operator, by the server's reason. */
+const EDIT_NOTICES: Readonly<Record<string, string | undefined>> = {
+  'stale-address':
+    'The frame changed before this edit arrived, so nothing was saved. It reloads with the file as it stands now. Make the edit again there.',
+  'address-mismatch':
+    'Could not save, since the browser and the file count the elements of this frame differently.',
+  'not-text-only':
+    'Could not save the text, since this element holds other elements.',
+}
+
+/**
+ * Posts one property change to the element the address names. A refusal
+ * says why and reloads the frame, so a pending value never sits over a file
+ * that moved under it.
+ */
+export async function editElement(
+  ref: FrameRef,
+  key: string,
+  address: ElementAddress,
+  property: string,
+  value: string,
+  fetchImpl: typeof fetch = fetch,
+): Promise<void> {
+  const hash = editedHashes.value.get(key) ?? address.hash
+  pendingEdit.value = { key, index: address.index, property }
+  try {
+    const response = await fetchImpl('/api/frames/edit', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        ...ref,
+        element: { ...address, hash },
+        property,
+        value,
+      }),
+    })
+    const body: unknown = await response.json().catch(() => undefined)
+    const record =
+      typeof body === 'object' && body !== null
+        ? (body as Record<string, unknown>)
+        : {}
+    if (!response.ok) {
+      const reason = typeof record.reason === 'string' ? record.reason : ''
+      const detail = typeof record.detail === 'string' ? record.detail : ''
+      editRefusal.value =
+        EDIT_NOTICES[reason] ??
+        (reason === 'invalid-edit'
+          ? `Could not save that value (${detail}).`
+          : `Could not save (status ${response.status}). Check canon canvas serve is still running.`)
+      reloadFrame(key)
+      await loadPages(fetchImpl)
+      return
+    }
+    editRefusal.value = undefined
+    const saved = pendingEdit.value
+    savedEdit.value = saved
+    setTimeout(() => {
+      if (savedEdit.value === saved) savedEdit.value = undefined
+    }, SAVED_MS)
+    if (typeof record.hash === 'string') {
+      const hashes = new Map(editedHashes.value)
+      hashes.set(key, record.hash)
+      editedHashes.value = hashes
+    }
+  } catch (error) {
+    editRefusal.value = `Could not save (${error instanceof Error ? error.message : 'unknown'}). Check canon canvas serve is still running.`
+  } finally {
+    pendingEdit.value = undefined
+  }
+}
+
 /**
  * Moves a frame on the surface without writing, which a drag calls on every
  * pointer move. The next reread replaces it with what the layout holds.
@@ -369,4 +480,9 @@ export function resetState(): void {
   expandedFrames.value = new Set()
   draggingFrame.value = undefined
   writeError.value = undefined
+  leftTab.value = 'pages'
+  pendingEdit.value = undefined
+  savedEdit.value = undefined
+  editRefusal.value = undefined
+  editedHashes.value = new Map()
 }

package/src/canvas/client/theme-panel.tsx

@@ -0,0 +1,55 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { tokens } from '@/canvas/client/state'
+import type { Token, TokenKind } from '@/canvas/tokens'
+
+const KIND_LABEL: Record<TokenKind, string> = {
+  color: 'Color',
+  spacing: 'Spacing',
+  radius: 'Radius',
+  'font-family': 'Font family',
+  'font-size': 'Font size',
+  other: 'Other',
+}
+
+/**
+ * A swatch paints the value in the chrome's document, where the frame's own
+ * custom properties are not defined, so a value still naming one shows none.
+ */
+function Swatch({ token }: { readonly token: Token }): JSX.Element | null {
+  const paint = token.resolved ?? token.value
+  if (paint.includes('var(')) return null
+  return (
+    <span class="swatch" aria-hidden="true" style={{ background: paint }} />
+  )
+}
+
+/** Read-only: the frames' tokens are edited in their stylesheet, not here. */
+export function ThemePanel(): JSX.Element {
+  const groups = tokens.value?.groups ?? []
+  return (
+    <section aria-label="Theme">
+      {groups.length === 0 ? (
+        <p class="empty">
+          No tokens resolve for this project, so there is nothing to list.{' '}
+          {tokens.value?.notice ?? ''}
+        </p>
+      ) : (
+        groups.map((group) => (
+          <div key={group.kind}>
+            <h2 class="section-label">{KIND_LABEL[group.kind]}</h2>
+            <ul class="tokens" aria-label={`${KIND_LABEL[group.kind]} tokens`}>
+              {group.tokens.map((token) => (
+                <li key={token.name} class="token" title={token.value}>
+                  {group.kind === 'color' ? <Swatch token={token} /> : null}
+                  <span class="row-label">{token.name}</span>
+                  <span class="row-meta token-value">{token.value}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))
+      )}
+    </section>
+  )
+}

package/src/canvas/content.ts

@@ -12,7 +12,7 @@ import {
   unlinkSync,
   writeFileSync,
 } from 'node:fs'
-import { join } from 'node:path'
+import { basename, join } from 'node:path'
 import {
   type ElementAddress,
   resolveAddress,
@@ -200,7 +200,18 @@ function sleep(ms: number): void {
  * found it.
  */
 function withLayoutLock(dir: string, run: () => FrameOutcome): FrameOutcome {
-  const lock = join(dir, `${LAYOUT_FILE}${LOCK_SUFFIX}`)
+  return withFileLock(join(dir, LAYOUT_FILE), run)
+}
+
+/**
+ * The same lock over any one file under the canvas folder, which a frame
+ * writer takes so its hash check and its write cannot straddle another's.
+ */
+export function withFileLock<T>(
+  target: string,
+  run: () => T,
+): T | ContentRefused {
+  const lock = `${target}${LOCK_SUFFIX}`
   const deadline = Date.now() + LOCK_WAIT_MS
   for (;;) {
     try {
@@ -214,7 +225,7 @@ function withLayoutLock(dir: string, run: () => FrameOutcome): FrameOutcome {
         continue
       }
       if (Date.now() >= deadline) {
-        return refuse('busy', `${LAYOUT_FILE} is being written, try again`)
+        return refuse('busy', `${basename(target)} is being written, try again`)
       }
       sleep(LOCK_POLL_MS)
     }