@erclx/canon 5.17.0 → 5.19.0

package/src/canvas/address.ts

@@ -90,6 +90,58 @@ interface Collected {
   text: string
 }
 
+/**
+ * Called on each element the address counts, with its index. What it returns
+ * runs at the element's end tag, since a second `onEndTag` on one element
+ * replaces the first rather than adding to it.
+ */
+export type ElementVisitor = (
+  element: HTMLRewriterTypes.Element,
+  index: number,
+) => (() => void) | undefined
+
+/**
+ * Registers the one counting rule both the reader and the edit writer follow,
+ * so an index means the same element to each.
+ */
+export function countElements(
+  rewriter: HTMLRewriter,
+  visit: ElementVisitor,
+): HTMLRewriter {
+  let count = 0
+  /* A template's content is a fragment `querySelectorAll` never reaches. */
+  let templateDepth = 0
+
+  return rewriter.on('*', {
+    element(element) {
+      const tag = element.tagName.toLowerCase()
+      if (templateDepth > 0) {
+        if (tag === 'template') {
+          templateDepth += 1
+          element.onEndTag(() => {
+            templateDepth -= 1
+          })
+        }
+        return
+      }
+      const end = visit(element, count)
+      count += 1
+      if (!element.canHaveContent || element.selfClosing) return
+      const isTemplate = tag === 'template'
+      if (isTemplate) templateDepth += 1
+      element.onEndTag(() => {
+        if (isTemplate) templateDepth -= 1
+        end?.()
+      })
+    },
+  })
+}
+
+/** Whether an element's content is raw text rather than parsed markup. */
+export function isRawText(tag: string): boolean {
+  return RAW_TEXT.has(tag)
+}
+
 /**
  * Every element the file states, in document order. Text is gathered into
  * each open element, which an element closed only by implication keeps open to
@@ -99,8 +151,6 @@ export function sourceElements(html: string): SourceElement[] {
   const elements: Collected[] = []
   const open: number[] = []
   let rawDepth = 0
-  /* A template's content is a fragment `querySelectorAll` never reaches. */
-  let templateDepth = 0
 
   const appendText = (text: string) => {
     for (const index of open) {
@@ -111,44 +161,28 @@ export function sourceElements(html: string): SourceElement[] {
     }
   }
 
-  new HTMLRewriter()
-    .on('*', {
-      element(element) {
-        const tag = element.tagName.toLowerCase()
-        if (templateDepth > 0) {
-          if (tag === 'template') {
-            templateDepth += 1
-            element.onEndTag(() => {
-              templateDepth -= 1
-            })
-          }
-          return
-        }
-        const index = elements.length
-        /* A tag boundary separates words the way a rendered block would. */
-        appendText(' ')
-        elements.push({
-          tag,
-          classes: (element.getAttribute('class') ?? '')
-            .split(/\s+/)
-            .filter(Boolean),
-          text: '',
-        })
-        if (!element.canHaveContent || element.selfClosing) return
-        const isRaw = RAW_TEXT.has(tag)
-        const isTemplate = tag === 'template'
-        open.push(index)
-        if (isRaw) rawDepth += 1
-        if (isTemplate) templateDepth += 1
-        element.onEndTag(() => {
-          const at = open.lastIndexOf(index)
-          if (at !== -1) open.splice(at, 1)
-          if (isRaw) rawDepth -= 1
-          if (isTemplate) templateDepth -= 1
-          appendText(' ')
-        })
-      },
+  countElements(new HTMLRewriter(), (element, index) => {
+    const tag = element.tagName.toLowerCase()
+    /* A tag boundary separates words the way a rendered block would. */
+    appendText(' ')
+    elements.push({
+      tag,
+      classes: (element.getAttribute('class') ?? '')
+        .split(/\s+/)
+        .filter(Boolean),
+      text: '',
     })
+    if (!element.canHaveContent || element.selfClosing) return undefined
+    const isRaw = isRawText(tag)
+    open.push(index)
+    if (isRaw) rawDepth += 1
+    return () => {
+      const at = open.lastIndexOf(index)
+      if (at !== -1) open.splice(at, 1)
+      if (isRaw) rawDepth -= 1
+      appendText(' ')
+    }
+  })
     .onDocument({
       text(chunk) {
         if (rawDepth === 0) appendText(chunk.text)

package/src/canvas/client/inspector.tsx

@@ -1,82 +1,286 @@
 /** @jsxImportSource preact */
 import type { JSX } from 'preact'
-import { elementAt } from '@/canvas/address'
+import { addressOf, elementAt, excerpt, isRawText } from '@/canvas/address'
 import {
   currentPage,
+  editElement,
+  editRefusal,
+  type FrameRef,
   frameDocuments,
   frameKey,
+  frameVersions,
+  pendingEdit,
+  savedEdit,
   selectedElement,
   selectedFrame,
+  tokens,
   writeError,
 } from '@/canvas/client/state'
 
 const FIELDS = ['x', 'y', 'width', 'height'] as const
 
+/** Elements the parser never gives content, so they hold no text to edit. */
+const VOID = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'source',
+  'track',
+  'wbr',
+])
+
+interface StyleField {
+  readonly label: string
+  readonly property: string
+  readonly isColor?: boolean
+}
+
+/**
+ * The basic set, in the order the panel lists it. The writer refuses any
+ * property outside it, so this list and the writer's have to agree.
+ */
+const STYLE_FIELDS: readonly StyleField[] = [
+  { label: 'color', property: 'color', isColor: true },
+  { label: 'background', property: 'background-color', isColor: true },
+  { label: 'size', property: 'font-size' },
+  { label: 'weight', property: 'font-weight' },
+  { label: 'width', property: 'width' },
+  { label: 'height', property: 'height' },
+  { label: 'padding', property: 'padding' },
+  { label: 'gap', property: 'gap' },
+  { label: 'direction', property: 'flex-direction' },
+]
+
 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[] {
+/** Where the element sits in its frame, which the panel shows and never edits. */
+function positionRows(element: Element): Row[] {
   const rect = element.getBoundingClientRect()
-  const view = element.ownerDocument.defaultView
-  const style = view?.getComputedStyle(element)
-  const rows: Row[] = [
+  const font = element.ownerDocument.defaultView
+    ?.getComputedStyle(element)
+    .getPropertyValue('font-family')
+  return [
     { 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 },
+    ...(font ? [{ name: 'font', value: font }] : []),
   ]
 }
 
+/**
+ * What the element states inline, else the value the browser settled on, so
+ * an edit starts from what the operator sees.
+ */
+function currentValue(element: Element, property: string): string {
+  const inline =
+    'style' in element
+      ? (element as HTMLElement).style.getPropertyValue(property)
+      : ''
+  if (inline) return inline
+  return (
+    element.ownerDocument.defaultView
+      ?.getComputedStyle(element)
+      .getPropertyValue(property) ?? ''
+  )
+}
+
+function holdsTextAlone(element: Element): boolean {
+  const tag = element.tagName.toLowerCase()
+  return element.children.length === 0 && !VOID.has(tag) && !isRawText(tag)
+}
+
 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. */
+interface FieldProps {
+  readonly label: string
+  readonly initial: string
+  readonly isBusy: boolean
+  readonly onCommit: (value: string) => void
+}
+
+/**
+ * Commits on change, which a text input fires on Enter or on leaving it, and
+ * sends nothing when the value is what it started at. Escape puts it back.
+ */
+function Field({ label, initial, isBusy, onCommit }: FieldProps): JSX.Element {
+  return (
+    <input
+      class="field"
+      type="text"
+      aria-label={label}
+      title={initial}
+      defaultValue={initial}
+      disabled={isBusy}
+      spellcheck={false}
+      onChange={(event) => {
+        const value = event.currentTarget.value.trim()
+        if (value !== initial.trim()) onCommit(value)
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Escape') event.currentTarget.value = initial
+      }}
+    />
+  )
+}
+
+function TokenPicker({
+  label,
+  initial,
+  isBusy,
+  onCommit,
+}: FieldProps): JSX.Element | null {
+  const colors =
+    tokens.value?.groups?.find((group) => group.kind === 'color')?.tokens ?? []
+  if (colors.length === 0) return null
+  return (
+    <select
+      class="token-picker"
+      aria-label={`${label} token`}
+      title="Pick a project token"
+      value={
+        colors.some((token) => initial === `var(${token.name})`) ? initial : ''
+      }
+      disabled={isBusy}
+      onChange={(event) => {
+        const { value } = event.currentTarget
+        if (value !== '' && value !== initial) onCommit(value)
+      }}
+    >
+      <option value="">Token</option>
+      {colors.map((token) => (
+        <option key={token.name} value={`var(${token.name})`}>
+          {token.name}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+function ElementFields({
+  node,
+  doc,
+  frameRef,
+  frameKey: key,
+}: {
+  readonly node: Element
+  readonly doc: Document
+  readonly frameRef: FrameRef
+  readonly frameKey: string
+}): JSX.Element {
+  const address = addressOf(doc, node)
+  const pending = pendingEdit.value
+  const isBusy = pending?.key === key && pending.index === address?.index
+  const commit = (property: string) => (value: string) => {
+    if (address) void editElement(frameRef, key, address, property, value)
+  }
+  const isTextOnly = holdsTextAlone(node)
+  const text = node.textContent ?? ''
+
+  return (
+    <dl class="box styles">
+      {positionRows(node).map((row) => (
+        <div key={row.name} class="box-row">
+          <dt>{row.name}</dt>
+          <dd title={row.value}>{row.value}</dd>
+        </div>
+      ))}
+      <div class="box-row">
+        <dt>text</dt>
+        <dd title={excerpt(text)}>
+          {isTextOnly ? (
+            <Field
+              label="text"
+              initial={text}
+              isBusy={isBusy}
+              onCommit={commit('text')}
+            />
+          ) : (
+            excerpt(text)
+          )}
+        </dd>
+      </div>
+      {STYLE_FIELDS.map((field) => {
+        const initial = currentValue(node, field.property)
+        return (
+          <div key={field.property} class="box-row">
+            <dt>{field.label}</dt>
+            <dd class="field-cell">
+              <Field
+                label={field.label}
+                initial={initial}
+                isBusy={isBusy}
+                onCommit={commit(field.property)}
+              />
+              {field.isColor ? (
+                <TokenPicker
+                  label={field.label}
+                  initial={initial}
+                  isBusy={isBusy}
+                  onCommit={commit(field.property)}
+                />
+              ) : null}
+            </dd>
+          </div>
+        )
+      })}
+    </dl>
+  )
+}
+
 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 key = frameKey(page.name, frame)
+  const doc = frameDocuments.value.get(key)
   const node = doc && !element.stale ? elementAt(doc, element) : undefined
+  const saved = savedEdit.value
+  const isSaved = saved?.key === key && saved.index === element.index
 
   return (
     <section aria-label="Element">
-      <h2 class="section-label">Element</h2>
+      <h2 class="section-label">
+        Element
+        {isSaved ? (
+          <span class="saved" role="status">
+            Saved
+          </span>
+        ) : null}
+      </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 ? (
+      ) : doc && 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>
+          {/*
+           * Keyed by the frame's version and the element, so a reload drops
+           * any value typed against the document it replaced.
+           */}
+          <ElementFields
+            key={`${frameVersions.value.get(key) ?? 0}:${element.index}`}
+            node={node}
+            doc={doc}
+            frameRef={{ page: page.name, frame: frame.name }}
+            frameKey={key}
+          />
         </>
       ) : (
         <p class="empty">Loading the frame to read this element</p>
@@ -85,7 +289,6 @@ function ElementDetails(): JSX.Element | null {
   )
 }
 
-/** 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 (
@@ -116,6 +319,11 @@ export function Inspector(): JSX.Element {
         ) : null}
       </section>
       <ElementDetails />
+      {editRefusal.value ? (
+        <p class="notice" role="alert">
+          {editRefusal.value}
+        </p>
+      ) : null}
     </>
   )
 }

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;
+}