@erclx/canon 5.53.0 → 5.54.0

package/src/canvas/client/keys.ts

@@ -1,71 +0,0 @@
-/**
- * The canvas key layer: one map from a key event to a surface action, which
- * the surface and every loaded frame document call. It sees only what the
- * surface forwards, so a key typed into a panel field never reaches it.
- */
-
-export type SurfaceAction =
-  | 'tool-move'
-  | 'tool-pan'
-  | 'zoom-in'
-  | 'zoom-out'
-  | 'zoom-fit'
-  | 'pan-hold'
-  | 'pan-release'
-  | 'undo'
-  | 'redo'
-  | 'panels-toggle'
-
-/** The fields of a `KeyboardEvent` the map reads, so a test needs no DOM. */
-export interface KeyInput {
-  readonly type: string
-  readonly key: string
-  readonly code: string
-  readonly shiftKey: boolean
-  readonly ctrlKey: boolean
-  readonly metaKey: boolean
-  readonly altKey: boolean
-}
-
-const PLAIN_KEYS: Readonly<Record<string, SurfaceAction | undefined>> = {
-  v: 'tool-move',
-  h: 'tool-pan',
-  '=': 'zoom-in',
-  '+': 'zoom-in',
-  '-': 'zoom-out',
-  ' ': 'pan-hold',
-}
-
-/**
- * Undo and redo are the one exception to the browser owning a modifier: Ctrl
- * or Cmd with Z, with Shift to redo, and Ctrl with Y. Any other Cmd, Ctrl, or
- * Alt combination is the browser's or the system's, so it returns nothing.
- */
-function historyAction(event: KeyInput): SurfaceAction | undefined {
-  if (event.altKey) return undefined
-  const key = event.key.toLowerCase()
-  if (key === 'z') return event.shiftKey ? 'redo' : 'undo'
-  if (key === 'y' && event.ctrlKey && !event.shiftKey) return 'redo'
-  return undefined
-}
-
-/**
- * Space coming up releases whatever is held with it, or a modifier pressed
- * mid-pan would leave the pan stuck. Shift and the 1 key fits, and the
- * backslash key toggles the panels, by `code`, since the character each
- * gives differs by layout.
- */
-export function surfaceAction(event: KeyInput): SurfaceAction | undefined {
-  if (event.type === 'keyup') {
-    return event.key === ' ' ? 'pan-release' : undefined
-  }
-  if (event.type !== 'keydown') return undefined
-  if (event.ctrlKey || event.metaKey) return historyAction(event)
-  if (event.altKey) return undefined
-  if (event.shiftKey) {
-    if (event.code === 'Digit1') return 'zoom-fit'
-    return event.key === '+' ? 'zoom-in' : undefined
-  }
-  if (event.code === 'Backslash') return 'panels-toggle'
-  return PLAIN_KEYS[event.key.toLowerCase()]
-}

package/src/canvas/client/layers.tsx

@@ -1,118 +0,0 @@
-/** @jsxImportSource preact */
-import type { JSX } from 'preact'
-import { addressOf, documentElements, excerpt } from '@/canvas/address'
-import {
-  type FrameRef,
-  frameDocuments,
-  hoveredElement,
-  selectElement,
-  selection,
-} from '@/canvas/client/state'
-
-/** Elements that never render, so a layer for one points at nothing. */
-const HIDDEN = new Set(['script', 'style', 'template', 'noscript'])
-
-const LABEL_TEXT = 24
-
-export interface LayersProps {
-  readonly frame: FrameRef
-  /** The frame's key, which its loaded document is registered under. */
-  readonly frameKey: string
-}
-
-/** `tag.first-class`, then a short excerpt of a leaf's own text. */
-function layerLabel(element: Element): { name: string; text: string } {
-  const tag = element.tagName.toLowerCase()
-  const first = element.classList[0]
-  const text =
-    element.children.length === 0
-      ? excerpt(element.textContent ?? '').slice(0, LABEL_TEXT)
-      : ''
-  return { name: first ? `${tag}.${first}` : tag, text }
-}
-
-function LayerNode({
-  doc,
-  element,
-  indexes,
-  props,
-}: {
-  readonly doc: Document
-  readonly element: Element
-  readonly indexes: ReadonlyMap<Element, number>
-  readonly props: LayersProps
-}): JSX.Element {
-  const index = indexes.get(element) ?? -1
-  const chosen = selection.value
-  const isCurrent =
-    chosen?.page === props.frame.page &&
-    chosen.frame === props.frame.frame &&
-    chosen.element?.index === index &&
-    !chosen.element.stale
-  const { name, text } = layerLabel(element)
-  const children = [...element.children].filter(
-    (child) => !HIDDEN.has(child.tagName.toLowerCase()),
-  )
-
-  return (
-    <li>
-      <button
-        type="button"
-        class="row layer"
-        title={text ? `${name} ${text}` : name}
-        aria-current={isCurrent ? 'true' : undefined}
-        onClick={() => {
-          const address = addressOf(doc, element)
-          if (address) void selectElement(props.frame, props.frameKey, address)
-        }}
-        onMouseEnter={() => {
-          hoveredElement.value = { key: props.frameKey, index }
-        }}
-        onMouseLeave={() => {
-          hoveredElement.value = undefined
-        }}
-      >
-        <span class="row-label">{name}</span>
-        {text ? <span class="row-meta layer-text">{text}</span> : null}
-      </button>
-      {children.length > 0 ? (
-        <ul class="layers">
-          {children.map((child, at) => (
-            <LayerNode
-              key={at}
-              doc={doc}
-              element={child}
-              indexes={indexes}
-              props={props}
-            />
-          ))}
-        </ul>
-      ) : null}
-    </li>
-  )
-}
-
-/**
- * The element tree of one frame, read from its loaded document, so it shows
- * what the browser built rather than what the file states. Each row selects by
- * the same address a click on the surface records.
- */
-export function Layers(props: LayersProps): JSX.Element {
-  const doc = frameDocuments.value.get(props.frameKey)
-  const label = `Layers of ${props.frame.frame}`
-  if (!doc?.body) {
-    return (
-      <p class="empty" aria-label={label}>
-        Loading layers
-      </p>
-    )
-  }
-  const indexes = new Map(
-    documentElements(doc).map((element, index) => [element, index]),
-  )
-  return (
-    <ul class="layers layers-root" aria-label={label}>
-      <LayerNode doc={doc} element={doc.body} indexes={indexes} props={props} />
-    </ul>
-  )
-}

package/src/canvas/client/main.tsx

@@ -1,71 +0,0 @@
-/** @jsxImportSource preact */
-import { effect } from '@preact/signals'
-import { render } from 'preact'
-import { App } from '@/canvas/client/app'
-import {
-  applyChange,
-  type ChangeEvent,
-  loadPages,
-  systemTheme,
-  theme,
-  themeChoice,
-  type Theme,
-} from '@/canvas/client/state'
-
-const THEME_KEY = 'canon-canvas-theme'
-
-function readStoredTheme(): Theme | undefined {
-  try {
-    const stored = localStorage.getItem(THEME_KEY)
-    return stored === 'light' || stored === 'dark' ? stored : undefined
-  } catch {
-    return undefined
-  }
-}
-
-function storeTheme(value: Theme | undefined): void {
-  try {
-    if (value === undefined) localStorage.removeItem(THEME_KEY)
-    else localStorage.setItem(THEME_KEY, value)
-  } catch {
-    /* A blocked store costs the remembered pick, nothing else. */
-  }
-}
-
-const darkQuery = matchMedia('(prefers-color-scheme: dark)')
-systemTheme.value = darkQuery.matches ? 'dark' : 'light'
-darkQuery.addEventListener('change', (event) => {
-  systemTheme.value = event.matches ? 'dark' : 'light'
-})
-themeChoice.value = readStoredTheme()
-
-effect(() => {
-  document.documentElement.dataset.theme = theme.value
-  document.documentElement.style.colorScheme = theme.value
-})
-effect(() => storeTheme(themeChoice.value))
-
-/* The chrome reads this toolkit's own tokens, served beside the shell. */
-const chrome = document.createElement('link')
-chrome.rel = 'stylesheet'
-chrome.href = '/api/chrome.css'
-document.head.prepend(chrome)
-
-/*
- * The page declares an empty icon so the browser never asks for /favicon.ico,
- * since the bundler cannot resolve a route the server answers, and this points
- * it at the brand icon once the shell loads.
- */
-document
-  .querySelector('link[rel="icon"]')
-  ?.setAttribute('href', '/api/icon.svg')
-
-const events = new EventSource('/api/events')
-events.addEventListener('message', (message) => {
-  void applyChange(JSON.parse(message.data) as ChangeEvent)
-})
-
-void loadPages()
-
-const mount = document.getElementById('app')
-if (mount) render(<App />, mount)

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

@@ -1,212 +0,0 @@
-/** @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,
-  selectedPage,
-  selectFrame,
-  theme,
-  toggleLayers,
-  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) => {
-        const key = frameKey(page.name, frame)
-        const isOpen = expandedFrames.value.has(key)
-        return (
-          <li key={frame.name}>
-            <div class="frame-row">
-              <button
-                type="button"
-                class="disclosure"
-                aria-expanded={isOpen}
-                aria-label={`${isOpen ? 'Hide' : 'Show'} layers of ${frame.name}`}
-                title={`${isOpen ? 'Hide' : 'Show'} layers`}
-                onClick={() => toggleLayers(key)}
-              >
-                <span aria-hidden="true">{isOpen ? '▾' : '▸'}</span>
-              </button>
-              <button
-                type="button"
-                class="row"
-                title={frame.name}
-                aria-current={
-                  frame.name === selectedFrame.value?.name ? 'true' : undefined
-                }
-                onClick={() => {
-                  onFocusFrame(frame)
-                  void selectFrame({ page: page.name, frame: frame.name })
-                }}
-              >
-                <span class="row-label">{frame.name}</span>
-                <span class="row-meta">{frame.width}</span>
-              </button>
-            </div>
-            {isOpen ? (
-              <Layers
-                frame={{ page: page.name, frame: frame.name }}
-                frameKey={key}
-              />
-            ) : null}
-          </li>
-        )
-      })}
-    </ul>
-  )
-}
-
-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
-      id="pages-panel"
-      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>
-      ) : leftTab.value === 'theme' ? (
-        <>
-          <Tabs />
-          <ThemePanel />
-        </>
-      ) : (
-        <>
-          <Tabs />
-          <h2 class="section-label">Pages</h2>
-          <PageList />
-          {currentPage.value ? (
-            <>
-              <h2 class="section-label">Frames</h2>
-              <FrameList {...props} />
-            </>
-          ) : null}
-        </>
-      )}
-    </nav>
-  )
-}

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

@@ -1,90 +0,0 @@
-/** @jsxImportSource preact */
-import type { JSX } from 'preact'
-import { useRef } from 'preact/hooks'
-import {
-  clampPanelWidth,
-  MAX_PANEL_WIDTH,
-  MIN_PANEL_WIDTH,
-  type PanelSide,
-  panelWidths,
-  setPanelWidth,
-} from '@/canvas/client/state'
-
-const KEY_STEP = 16
-const SHIFT_STEP = 64
-
-const NAMES: Readonly<Record<PanelSide, string>> = {
-  left: 'Resize pages panel',
-  right: 'Resize details panel',
-}
-
-/**
- * The drag handle on a panel's inner edge, a focusable separator the arrow
- * keys move as well. It sits outside the surface, so a drag on it never pans,
- * moves a frame, or reaches the undo history.
- */
-export function PanelHandle({
-  side,
-  controls,
-}: {
-  readonly side: PanelSide
-  readonly controls: string
-}): JSX.Element {
-  const drag = useRef<{ x: number; width: number } | undefined>(undefined)
-  const width = panelWidths.value[side]
-  /* Dragging right widens the left panel and narrows the right one. */
-  const sign = side === 'left' ? 1 : -1
-
-  const handlePointerDown = (event: PointerEvent) => {
-    event.preventDefault()
-    drag.current = { x: event.clientX, width }
-    ;(event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId)
-  }
-
-  const handlePointerMove = (event: PointerEvent) => {
-    const start = drag.current
-    if (!start) return
-    setPanelWidth(
-      side,
-      start.width + sign * (event.clientX - start.x),
-      window.innerWidth,
-    )
-  }
-
-  const handlePointerUp = () => {
-    drag.current = undefined
-  }
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    const step = event.shiftKey ? SHIFT_STEP : KEY_STEP
-    const next: Record<string, number | undefined> = {
-      ArrowRight: width + sign * step,
-      ArrowLeft: width - sign * step,
-      Home: MIN_PANEL_WIDTH,
-      End: MAX_PANEL_WIDTH,
-    }
-    const wanted = next[event.key]
-    if (wanted === undefined) return
-    event.preventDefault()
-    setPanelWidth(side, wanted, window.innerWidth)
-  }
-
-  return (
-    <div
-      class={`panel-handle panel-handle-${side}`}
-      role="separator"
-      aria-orientation="vertical"
-      aria-label={NAMES[side]}
-      aria-controls={controls}
-      aria-valuenow={width}
-      aria-valuemin={MIN_PANEL_WIDTH}
-      aria-valuemax={clampPanelWidth(side, MAX_PANEL_WIDTH, window.innerWidth)}
-      tabIndex={0}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      onPointerCancel={handlePointerUp}
-      onKeyDown={handleKeyDown}
-    />
-  )
-}