@erclx/canon 5.14.1 → 5.16.0

package/src/canvas/client/layers.tsx

@@ -0,0 +1,118 @@
+/** @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

@@ -0,0 +1,62 @@
+/** @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)
+
+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

@@ -0,0 +1,157 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { Layers } from '@/canvas/client/layers'
+import type { Frame } from '@/canvas/content'
+import {
+  currentPage,
+  expandedFrames,
+  frameKey,
+  isLoaded,
+  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>
+  )
+}
+
+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>
+  )
+}