@erclx/canon 5.15.0 → 5.16.0

package/src/canvas/client/app.tsx

@@ -1,6 +1,7 @@
 /** @jsxImportSource preact */
 import type { JSX } from 'preact'
 import { useRef } from 'preact/hooks'
+import { Inspector } from '@/canvas/client/inspector'
 import { PagesPanel } from '@/canvas/client/pages-panel'
 import { currentPage, focusFrame, tokens } from '@/canvas/client/state'
 import { Surface } from '@/canvas/client/surface'
@@ -77,6 +78,7 @@ export function App(): JSX.Element {
       />
       <Surface viewportRef={viewportRef} />
       <aside class="panel panel-right" aria-label="Details">
+        <Inspector />
         <PageDetails />
         <TokenDetails />
       </aside>

package/src/canvas/client/inspector.tsx

@@ -0,0 +1,121 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { elementAt } from '@/canvas/address'
+import {
+  currentPage,
+  frameDocuments,
+  frameKey,
+  selectedElement,
+  selectedFrame,
+  writeError,
+} from '@/canvas/client/state'
+
+const FIELDS = ['x', 'y', 'width', 'height'] as const
+
+interface Row {
+  readonly name: string
+  readonly value: string
+}
+
+/**
+ * The computed values the browser settled on, which is what the operator sees
+ * rather than what any one stylesheet states.
+ */
+function styleRows(element: Element): Row[] {
+  const rect = element.getBoundingClientRect()
+  const view = element.ownerDocument.defaultView
+  const style = view?.getComputedStyle(element)
+  const rows: Row[] = [
+    { name: 'x', value: String(Math.round(rect.left)) },
+    { name: 'y', value: String(Math.round(rect.top)) },
+    { name: 'width', value: String(Math.round(rect.width)) },
+    { name: 'height', value: String(Math.round(rect.height)) },
+  ]
+  if (!style) return rows
+  return [
+    ...rows,
+    { name: 'color', value: style.color },
+    { name: 'background', value: style.backgroundColor },
+    { name: 'font', value: style.fontFamily },
+    { name: 'size', value: style.fontSize },
+    { name: 'weight', value: style.fontWeight },
+  ]
+}
+
+function elementName(element: Element): string {
+  const tag = element.tagName.toLowerCase()
+  return [tag, ...element.classList].join('.')
+}
+
+/** Read-only in this slice, since editing an element is the edit slice's work. */
+function ElementDetails(): JSX.Element | null {
+  const picked = selectedElement.value
+  const page = currentPage.value
+  if (!picked || !page) return null
+  const { frame, element } = picked
+  const doc = frameDocuments.value.get(frameKey(page.name, frame))
+  const node = doc && !element.stale ? elementAt(doc, element) : undefined
+
+  return (
+    <section aria-label="Element">
+      <h2 class="section-label">Element</h2>
+      {element.stale ? (
+        <p class="notice">
+          The frame changed since this element was picked, so its index may name
+          another element now. Pick it again.
+        </p>
+      ) : node ? (
+        <>
+          <p class="detail" title={elementName(node)}>
+            {elementName(node)}
+          </p>
+          <dl class="box styles">
+            {styleRows(node).map((row) => (
+              <div key={row.name} class="box-row">
+                <dt>{row.name}</dt>
+                <dd title={row.value}>{row.value}</dd>
+              </div>
+            ))}
+          </dl>
+        </>
+      ) : (
+        <p class="empty">Loading the frame to read this element</p>
+      )}
+    </section>
+  )
+}
+
+/** Read-only in this slice, since editing a box is the edit slice's work. */
+export function Inspector(): JSX.Element {
+  const frame = selectedFrame.value
+  return (
+    <>
+      <section aria-label="Frame">
+        <h2 class="section-label">Frame</h2>
+        {frame ? (
+          <>
+            <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>
+          </>
+        ) : (
+          <p class="empty">Select a frame to see its box</p>
+        )}
+        {writeError.value ? (
+          <p class="notice" role="alert">
+            {writeError.value}
+          </p>
+        ) : null}
+      </section>
+      <ElementDetails />
+    </>
+  )
+}

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/pages-panel.tsx

@@ -1,13 +1,19 @@
 /** @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'
 
@@ -76,19 +82,47 @@ function FrameList({ onFocusFrame }: PagesPanelProps): JSX.Element | null {
   }
   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>
-      ))}
+      {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>
   )
 }

package/src/canvas/client/shell.css

@@ -119,7 +119,8 @@ code {
   background: var(--color-border);
 }
 
-.row[aria-current='page'] {
+.row[aria-current='page'],
+.row[aria-current='true'] {
   background: var(--color-surface);
   color: var(--color-text);
   box-shadow: inset 2px 0 0 var(--color-accent);
@@ -275,6 +276,73 @@ code {
   border-radius: 2px;
 }
 
+/* The frame's handle, since a press inside the frame picks an element. */
+.frame-label {
+  cursor: move;
+  touch-action: none;
+}
+
+.frame[data-dragging='true'] .frame-label {
+  cursor: grabbing;
+}
+
+.frame-body {
+  position: relative;
+}
+
+/* Inset by the iframe border, so a box lines up with the element it marks. */
+.element-outline {
+  position: absolute;
+  translate: 1px 1px;
+  pointer-events: none;
+}
+
+.element-outline[data-outline='hover'] {
+  outline: calc(1px * var(--outline-scale, 1)) dashed var(--color-accent);
+}
+
+.element-outline[data-outline='selected'] {
+  outline: calc(2px * var(--outline-scale, 1)) solid var(--color-accent);
+}
+
+/* Above its neighbors, so a frame dragged over another stays whole. */
+.frame[data-selected='true'] {
+  z-index: 1;
+}
+
+.frame[data-selected='true'] iframe {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.frame:focus-visible {
+  outline: 2px solid var(--color-accent);
+  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);
@@ -317,3 +385,65 @@ code {
     border-bottom: 1px solid var(--color-border);
   }
 }
+
+.frame-row {
+  display: flex;
+  align-items: center;
+}
+
+.frame-row .row {
+  flex: 1;
+  min-width: 0;
+}
+
+.disclosure {
+  flex: none;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-action);
+  background: none;
+  color: var(--color-muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+.disclosure:hover {
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.layers {
+  margin: 0;
+  padding: 0 0 0 var(--space-sm);
+  list-style: none;
+}
+
+.layers-root {
+  padding-left: var(--space-lg);
+}
+
+.layer {
+  min-height: 24px;
+}
+
+.row-meta.layer-text {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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;
+}