@erclx/canon 5.14.1 → 5.15.0

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

@@ -0,0 +1,123 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import type { Frame } from '@/canvas/content'
+import {
+  currentPage,
+  isLoaded,
+  loadError,
+  pages,
+  selectedPage,
+  theme,
+  toggleTheme,
+} from '@/canvas/client/state'
+
+export interface PagesPanelProps {
+  /** Brings a frame into view on the surface. */
+  readonly onFocusFrame: (frame: Frame) => void
+}
+
+function ThemeToggle(): JSX.Element {
+  const next = theme.value === 'dark' ? 'light' : 'dark'
+  return (
+    <button
+      type="button"
+      class="icon-button"
+      aria-label={`Switch to ${next} theme`}
+      title={`Switch to ${next} theme`}
+      onClick={toggleTheme}
+    >
+      <span aria-hidden="true">{theme.value === 'dark' ? '☾' : '☀'}</span>
+    </button>
+  )
+}
+
+function PageList(): JSX.Element {
+  if (pages.value.length === 0) {
+    return (
+      <p class="empty">
+        No pages yet. Run <code>canon canvas page add &lt;name&gt;</code> to add
+        one.
+      </p>
+    )
+  }
+  const current = currentPage.value?.name
+  return (
+    <ul class="list" aria-label="Pages">
+      {pages.value.map((page) => (
+        <li key={page.name}>
+          <button
+            type="button"
+            class="row"
+            aria-current={page.name === current ? 'page' : undefined}
+            title={page.name}
+            onClick={() => {
+              selectedPage.value = page.name
+            }}
+          >
+            <span class="row-label">{page.name}</span>
+            <span class="row-meta">{page.frames.length}</span>
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function FrameList({ onFocusFrame }: PagesPanelProps): JSX.Element | null {
+  const page = currentPage.value
+  if (!page) return null
+  if (page.frames.length === 0) {
+    return (
+      <p class="empty">
+        No frames on this page. Run{' '}
+        <code>canon canvas frame add {page.name} &lt;name&gt;</code> to add one.
+      </p>
+    )
+  }
+  return (
+    <ul class="list" aria-label="Frames">
+      {page.frames.map((frame) => (
+        <li key={frame.name}>
+          <button
+            type="button"
+            class="row"
+            title={frame.name}
+            onClick={() => onFocusFrame(frame)}
+          >
+            <span class="row-label">{frame.name}</span>
+            <span class="row-meta">{frame.width}</span>
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export function PagesPanel(props: PagesPanelProps): JSX.Element {
+  return (
+    <nav class="panel panel-left" aria-label="Pages and frames">
+      <header class="panel-head">
+        <span class="brand">Canvas</span>
+        <ThemeToggle />
+      </header>
+      {loadError.value ? (
+        <p class="empty" role="alert">
+          {loadError.value}
+        </p>
+      ) : !isLoaded.value ? (
+        <p class="empty">Loading</p>
+      ) : (
+        <>
+          <h2 class="section-label">Pages</h2>
+          <PageList />
+          {currentPage.value ? (
+            <>
+              <h2 class="section-label">Frames</h2>
+              <FrameList {...props} />
+            </>
+          ) : null}
+        </>
+      )}
+    </nav>
+  )
+}

package/src/canvas/client/shell.css

@@ -0,0 +1,319 @@
+/*
+ * The canvas chrome. Every value reads a custom property from this toolkit's
+ * own token module, served at /api/chrome.css, which maps dark onto :root and
+ * light onto [data-theme='light']. A frame reads the project's tokens inside
+ * its own iframe, so the two sets of names never meet.
+ */
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  background: var(--color-background);
+  color: var(--color-text);
+  font-family: var(--type-body-family);
+  font-size: var(--type-label-size);
+  line-height: var(--type-label-lh);
+}
+
+#app {
+  height: 100%;
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+code {
+  font-family: var(--type-code-family);
+  font-size: var(--type-code-size);
+}
+
+.shell {
+  display: grid;
+  grid-template-columns: 15rem minmax(0, 1fr) 13rem;
+  height: 100%;
+}
+
+.panel {
+  overflow-y: auto;
+  padding: var(--space-md);
+  background: var(--color-chrome);
+  min-width: 0;
+}
+
+.panel-left {
+  border-right: 1px solid var(--color-border);
+}
+
+.panel-right {
+  border-left: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-md);
+}
+
+.brand {
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.section-label {
+  margin: var(--space-md) 0 var(--space-xs);
+  font-size: var(--type-label-size);
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+.panel-right .section-label {
+  margin-top: 0;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-sm);
+  width: 100%;
+  min-height: 28px;
+  padding: var(--space-xs) var(--space-sm);
+  border: 0;
+  border-radius: var(--radius-action);
+  background: transparent;
+  color: var(--color-text-body);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.row:hover {
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.row:active {
+  background: var(--color-border);
+}
+
+.row[aria-current='page'] {
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: inset 2px 0 0 var(--color-accent);
+}
+
+.row-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row-meta {
+  flex-shrink: 0;
+  color: var(--color-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.empty,
+.notice {
+  margin: var(--space-xs) 0;
+  color: var(--color-text-secondary);
+}
+
+.notice {
+  border-left: 2px solid var(--color-accent);
+  padding-left: var(--space-sm);
+}
+
+.detail {
+  margin: 0;
+  color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-meta {
+  margin: 0;
+  color: var(--color-muted);
+}
+
+.files {
+  list-style: none;
+  margin: var(--space-xs) 0 0;
+  padding: 0;
+}
+
+.files li {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-body);
+}
+
+.icon-button,
+.text-button {
+  min-width: 28px;
+  min-height: 28px;
+  padding: 0 var(--space-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-action);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.icon-button:hover,
+.text-button:hover {
+  border-color: var(--color-text-secondary);
+}
+
+.icon-button:active,
+.text-button:active {
+  background: var(--color-border);
+}
+
+.surface {
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--color-background);
+}
+
+.viewport {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  cursor: grab;
+  touch-action: none;
+}
+
+.viewport:active {
+  cursor: grabbing;
+}
+
+.plane {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+}
+
+.frame {
+  position: absolute;
+  margin: 0;
+  cursor: default;
+}
+
+.frame-label {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding-bottom: var(--space-sm);
+  font-size: 1.5rem;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+
+.frame-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-text);
+}
+
+.frame-size {
+  color: var(--color-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.frame-theme {
+  margin-left: auto;
+  padding: 2px var(--space-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  font: inherit;
+  cursor: pointer;
+}
+
+.frame-theme:hover {
+  color: var(--color-text);
+}
+
+.frame iframe {
+  display: block;
+  border: 1px solid var(--color-border);
+  border-radius: 2px;
+}
+
+.toolbar {
+  position: absolute;
+  right: var(--space-md);
+  bottom: var(--space-md);
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-panel);
+  background: var(--color-chrome);
+}
+
+.zoom {
+  min-width: 3.5rem;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-secondary);
+}
+
+@media (max-width: 900px) {
+  .shell {
+    grid-template-columns: 12rem minmax(0, 1fr);
+  }
+
+  .panel-right {
+    display: none;
+  }
+}
+
+@media (max-width: 600px) {
+  .shell {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .panel-left {
+    max-height: 40vh;
+    border-right: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+}

package/src/canvas/client/state.ts

@@ -0,0 +1,186 @@
+import { computed, signal } from '@preact/signals'
+import type { Frame, Page } from '@/canvas/content'
+
+/**
+ * Everything the panels read. Type imports only from outside `client/`, since
+ * this runs in the browser and a Node or Bun module would not bundle there.
+ */
+
+export type Theme = 'light' | 'dark'
+
+export interface TokenSource {
+  readonly source: 'toolkit' | 'installed' | 'none'
+  readonly files?: readonly string[]
+  readonly notice?: string
+}
+
+export interface PagesRecord {
+  readonly pages: readonly Page[]
+  readonly tokens: TokenSource
+}
+
+export interface ChangeEvent {
+  readonly page: string
+  readonly file: string
+}
+
+export interface View {
+  readonly x: number
+  readonly y: number
+  readonly zoom: number
+}
+
+export const MIN_ZOOM = 0.05
+export const MAX_ZOOM = 4
+
+export const pages = signal<readonly Page[]>([])
+export const tokens = signal<TokenSource | undefined>(undefined)
+export const isLoaded = signal(false)
+export const loadError = signal<string | undefined>(undefined)
+export const selectedPage = signal<string | undefined>(undefined)
+
+/** Undefined follows the system, which `systemTheme` reports. */
+export const themeChoice = signal<Theme | undefined>(undefined)
+export const systemTheme = signal<Theme>('dark')
+export const theme = computed<Theme>(
+  () => themeChoice.value ?? systemTheme.value,
+)
+
+/** A frame's own theme where the operator switched it, else the chrome's. */
+export const frameThemes = signal<ReadonlyMap<string, Theme>>(new Map())
+
+/** Bumped per frame on a change, so only that frame's document reloads. */
+export const frameVersions = signal<ReadonlyMap<string, number>>(new Map())
+
+export const view = signal<View>({ x: 0, y: 0, zoom: 0.5 })
+
+export const currentPage = computed<Page | undefined>(() => {
+  const all = pages.value
+  return all.find((page) => page.name === selectedPage.value) ?? all[0]
+})
+
+export function frameKey(page: string, frame: Pick<Frame, 'file'>): string {
+  return `${page}/${frame.file}`
+}
+
+export function frameTheme(key: string): Theme {
+  return frameThemes.value.get(key) ?? theme.value
+}
+
+export function toggleTheme(): void {
+  themeChoice.value = theme.value === 'dark' ? 'light' : 'dark'
+}
+
+export function toggleFrameTheme(key: string): void {
+  const next = new Map(frameThemes.value)
+  next.set(key, frameTheme(key) === 'dark' ? 'light' : 'dark')
+  frameThemes.value = next
+}
+
+export function applyRecord(record: PagesRecord): void {
+  pages.value = record.pages
+  tokens.value = record.tokens
+  loadError.value = undefined
+  isLoaded.value = true
+}
+
+export async function loadPages(
+  fetchImpl: typeof fetch = fetch,
+): Promise<void> {
+  try {
+    const response = await fetchImpl('/api/pages')
+    if (!response.ok) throw new Error(`status ${response.status}`)
+    applyRecord((await response.json()) as PagesRecord)
+  } catch (error) {
+    loadError.value = `Could not read the canvas (${error instanceof Error ? error.message : 'unknown'}). Check canon canvas serve is still running.`
+    isLoaded.value = true
+  }
+}
+
+/**
+ * Reloads the one frame whose file changed and rereads the page list, which
+ * picks up an added frame or a moved box. The view is separate state, so
+ * neither resets pan or zoom.
+ */
+export async function applyChange(
+  change: ChangeEvent,
+  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
+  }
+  await loadPages(fetchImpl)
+}
+
+export function clampZoom(zoom: number): number {
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom))
+}
+
+/** Zooms about a point in surface coordinates, keeping that point still. */
+export function zoomAt(factor: number, originX: number, originY: number): void {
+  const current = view.value
+  const zoom = clampZoom(current.zoom * factor)
+  const scale = zoom / current.zoom
+  view.value = {
+    zoom,
+    x: originX - (originX - current.x) * scale,
+    y: originY - (originY - current.y) * scale,
+  }
+}
+
+export function panBy(dx: number, dy: number): void {
+  const current = view.value
+  view.value = { ...current, x: current.x + dx, y: current.y + dy }
+}
+
+/** Fits every frame on the current page into a viewport of the given size. */
+export function fitView(width: number, height: number, padding = 48): void {
+  const frames = currentPage.value?.frames ?? []
+  if (frames.length === 0 || width <= 0 || height <= 0) {
+    view.value = { x: padding, y: padding, zoom: 0.5 }
+    return
+  }
+  const left = Math.min(...frames.map((frame) => frame.x))
+  const top = Math.min(...frames.map((frame) => frame.y))
+  const right = Math.max(...frames.map((frame) => frame.x + frame.width))
+  const bottom = Math.max(...frames.map((frame) => frame.y + frame.height))
+  const zoom = clampZoom(
+    Math.min(
+      (width - padding * 2) / (right - left),
+      (height - padding * 2) / (bottom - top),
+      1,
+    ),
+  )
+  view.value = {
+    zoom,
+    x: padding - left * zoom,
+    y: padding - top * zoom,
+  }
+}
+
+/** Centers one frame in a viewport of the given size at the current zoom. */
+export function focusFrame(frame: Frame, width: number, height: number): void {
+  const { zoom } = view.value
+  view.value = {
+    zoom,
+    x: width / 2 - (frame.x + frame.width / 2) * zoom,
+    y: height / 2 - (frame.y + frame.height / 2) * zoom,
+  }
+}
+
+/** Puts every signal back to its first value. Tests call it between cases. */
+export function resetState(): void {
+  pages.value = []
+  tokens.value = undefined
+  isLoaded.value = false
+  loadError.value = undefined
+  selectedPage.value = undefined
+  themeChoice.value = undefined
+  systemTheme.value = 'dark'
+  frameThemes.value = new Map()
+  frameVersions.value = new Map()
+  view.value = { x: 0, y: 0, zoom: 0.5 }
+}