@erclx/canon 5.25.0 → 5.27.0

package/src/canvas/client/inspector/align-grid.tsx

@@ -0,0 +1,162 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { useRef, useState } from 'preact/hooks'
+
+/** The value each third of an axis writes, start to end as the axis runs. */
+const POSITIONS = ['flex-start', 'center', 'flex-end'] as const
+
+const ROWS = ['top', 'middle', 'bottom'] as const
+const COLUMNS = ['left', 'center', 'right'] as const
+
+/**
+ * Computed values that read as one of the three positions. A container left
+ * at its defaults packs from the start, and stretched children do too, so
+ * both show the start cell without stating it.
+ */
+const READS: Readonly<Record<string, number>> = {
+  normal: 0,
+  stretch: 0,
+  'flex-start': 0,
+  start: 0,
+  'self-start': 0,
+  left: 0,
+  center: 1,
+  'flex-end': 2,
+  end: 2,
+  'self-end': 2,
+  right: 2,
+}
+
+/** Values a container takes without stating a position, which a pick pins. */
+const IMPLIED = new Set(['normal', 'stretch'])
+
+export interface Alignment {
+  readonly justifyContent: string
+  readonly alignItems: string
+}
+
+interface AlignGridProps {
+  /** The container's computed `flex-direction`, which decides the axes. */
+  readonly direction: string
+  readonly justifyContent: string
+  readonly alignItems: string
+  readonly isBusy: boolean
+  readonly onPick: (alignment: Alignment) => void
+}
+
+function isRow(direction: string): boolean {
+  return !direction.startsWith('column')
+}
+
+/**
+ * The cell, as row then column on screen, that a container's alignment puts
+ * its children in. A reversed main axis runs from the far edge, so its start
+ * is the right or the bottom.
+ */
+function cellOf(
+  direction: string,
+  justifyContent: string,
+  alignItems: string,
+): readonly [number, number] | undefined {
+  const main = READS[justifyContent.trim()]
+  const cross = READS[alignItems.trim()]
+  if (main === undefined || cross === undefined) return undefined
+  const along = direction.endsWith('reverse') ? 2 - main : main
+  return isRow(direction) ? [cross, along] : [along, cross]
+}
+
+function alignmentOf(
+  direction: string,
+  row: number,
+  column: number,
+): Alignment {
+  const [main, cross] = isRow(direction) ? [column, row] : [row, column]
+  const along = direction.endsWith('reverse') ? 2 - main : main
+  return {
+    justifyContent: POSITIONS[along],
+    alignItems: POSITIONS[cross],
+  }
+}
+
+const KEY_STEPS: Readonly<Record<string, readonly [number, number]>> = {
+  ArrowUp: [-1, 0],
+  ArrowDown: [1, 0],
+  ArrowLeft: [0, -1],
+  ArrowRight: [0, 1],
+}
+
+/**
+ * Nine cells placing a flex container's children, one radio group. The
+ * arrow keys move focus inside the grid and stop at its edges, and a press
+ * or Enter or Space picks, since each pick writes the frame twice.
+ */
+export function AlignGrid({
+  direction,
+  justifyContent,
+  alignItems,
+  isBusy,
+  onPick,
+}: AlignGridProps): JSX.Element {
+  const checked = cellOf(direction, justifyContent, alignItems)
+  const isImplied =
+    IMPLIED.has(justifyContent.trim()) || IMPLIED.has(alignItems.trim())
+  const [focus, setFocus] = useState<readonly [number, number]>(
+    checked ?? [0, 0],
+  )
+  const cells = useRef<(HTMLButtonElement | null)[]>([])
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    const step = KEY_STEPS[event.key]
+    if (!step) return
+    event.preventDefault()
+    const next = [
+      Math.min(2, Math.max(0, focus[0] + step[0])),
+      Math.min(2, Math.max(0, focus[1] + step[1])),
+    ] as const
+    setFocus(next)
+    cells.current[next[0] * 3 + next[1]]?.focus()
+  }
+
+  return (
+    <div
+      class="align-grid"
+      role="radiogroup"
+      aria-label="Alignment"
+      onKeyDown={handleKeyDown}
+    >
+      {ROWS.map((rowName, row) =>
+        COLUMNS.map((columnName, column) => {
+          const isChecked = checked?.[0] === row && checked[1] === column
+          const isFocusable = focus[0] === row && focus[1] === column
+          const name =
+            rowName === 'middle' && columnName === 'center'
+              ? 'center'
+              : `${rowName} ${columnName}`
+          return (
+            <button
+              key={name}
+              ref={(node) => {
+                cells.current[row * 3 + column] = node
+              }}
+              type="button"
+              class="align-cell"
+              role="radio"
+              aria-label={name}
+              aria-checked={isChecked}
+              tabIndex={isFocusable ? 0 : -1}
+              disabled={isBusy}
+              onFocus={() => setFocus([row, column])}
+              onClick={() => {
+                if (!isChecked || isImplied) {
+                  onPick(alignmentOf(direction, row, column))
+                }
+              }}
+            >
+              <span class="align-dot" aria-hidden="true" />
+            </button>
+          )
+        }),
+      )}
+    </div>
+  )
+}

package/src/canvas/client/inspector/color-field.tsx

@@ -0,0 +1,398 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { useLayoutEffect, useRef, useState } from 'preact/hooks'
+import type { ScrubSession } from '@/canvas/client/inspector/field'
+import {
+  ColorInputs,
+  currentOpacity,
+} from '@/canvas/client/inspector/color-inputs'
+import {
+  ColorPicker,
+  isPickerHeld,
+  releasePicker,
+} from '@/canvas/client/inspector/color-picker'
+import {
+  composeColor,
+  type ParsedColor,
+  readHex,
+} from '@/canvas/client/inspector/values'
+
+interface ColorFieldProps {
+  /** The full word, which names the hex input for assistive technology. */
+  readonly label: string
+  /** What the element holds, or undefined for a form the picker cannot read. */
+  readonly color: ParsedColor | undefined
+  /** The value as written, shown when `color` is undefined. */
+  readonly text: string
+  /** The element's own inline value, empty where none stands. */
+  readonly inline: string
+  /** The color the browser paints, which fills the swatch. */
+  readonly painted: string
+  /** The color tokens in the order the token sheet sorts them. */
+  readonly tokens: readonly string[]
+  /** The color a token paints in the frame, read when the list opens. */
+  readonly paint: (name: string) => string
+  /** The frame, element, and property, so a reload reopens the right picker. */
+  readonly owner: string
+  readonly isRaw: boolean
+  readonly isBusy: boolean
+  /** Opens a session previewing into the frame, where the element takes one. */
+  readonly preview?: () => ScrubSession
+  readonly onCommit: (value: string) => void
+}
+
+/**
+ * The accessible name of the row control that last wrote a value, so it takes
+ * focus back each time the frame reloads. A saved edit remounts the inspector,
+ * once for the edit and again when the file watcher reports the write, and each
+ * remount replaces the control that held focus and drops it to the page. It
+ * holds until focus lands anywhere else.
+ */
+let refocus: string | undefined
+
+function swatchLabel(label: string): string {
+  return `${label} picker`
+}
+
+function tokensLabel(label: string): string {
+  return `${label} tokens`
+}
+
+function eyedropperLabel(label: string): string {
+  return `${label} eyedropper`
+}
+
+if (typeof document !== 'undefined') {
+  document.addEventListener('focusin', (event) => {
+    if (refocus === undefined) return
+    const target = event.target
+    const name =
+      target instanceof Element ? target.getAttribute('aria-label') : null
+    if (name !== refocus) refocus = undefined
+  })
+}
+
+/** The screen sampler, where the browser ships one. */
+function eyeDropper(): (new () => EyeDropperSampler) | undefined {
+  return typeof window === 'undefined' ? undefined : window.EyeDropper
+}
+
+type Open = 'picker' | 'tokens' | undefined
+
+const GAP = 8
+
+/**
+ * The left edge of the scrolling panel holding the row, so a popover clears
+ * the panel's padding rather than overlapping it. The row's own edge stands in
+ * where no ancestor scrolls.
+ */
+function panelLeft(row: HTMLElement): number {
+  for (let node = row.parentElement; node; node = node.parentElement) {
+    const overflow = getComputedStyle(node).overflowY
+    if (overflow === 'auto' || overflow === 'scroll') {
+      return node.getBoundingClientRect().left
+    }
+  }
+  return row.getBoundingClientRect().left
+}
+
+/**
+ * Places a popover beside the row, to the left of the panel, and holds it
+ * inside the window. The panel scrolls and clips, so the popover sits in the
+ * top layer where the browser has one and at fixed coordinates either way.
+ */
+function place(popover: HTMLElement, row: HTMLElement): void {
+  if (
+    typeof popover.showPopover === 'function' &&
+    !popover.matches(':popover-open')
+  ) {
+    popover.showPopover()
+  }
+  const box = popover.getBoundingClientRect()
+  const anchor = row.getBoundingClientRect()
+  const width = document.documentElement.clientWidth || window.innerWidth
+  const height = document.documentElement.clientHeight || window.innerHeight
+  const before = panelLeft(row) - GAP - box.width
+  const left =
+    before >= GAP
+      ? before
+      : Math.max(GAP, Math.min(anchor.right + GAP, width - box.width - GAP))
+  const top = Math.max(GAP, Math.min(anchor.top, height - box.height - GAP))
+  popover.style.left = `${left}px`
+  popover.style.top = `${top}px`
+}
+
+/**
+ * One color property: a swatch opening the picker, the hex, the opacity, a
+ * tokens icon opening the project's color tokens, and an eyedropper where the
+ * browser has one. A token keeps following the theme and a literal does not,
+ * so the tokens sit one press from the row.
+ */
+export function ColorField({
+  label,
+  color,
+  text,
+  inline,
+  painted,
+  tokens,
+  paint,
+  owner,
+  isRaw,
+  isBusy,
+  preview,
+  onCommit,
+}: ColorFieldProps): JSX.Element {
+  const [open, setOpen] = useState<Open>(() =>
+    isPickerHeld(owner) ? 'picker' : undefined,
+  )
+  const root = useRef<HTMLDivElement>(null)
+  const row = useRef<HTMLDivElement>(null)
+  const swatch = useRef<HTMLButtonElement>(null)
+  const tokenButton = useRef<HTMLButtonElement>(null)
+  const list = useRef<HTMLUListElement>(null)
+  const dialog = useRef<HTMLDivElement>(null)
+  const picked = color?.kind === 'token' ? tokens.indexOf(color.name) : -1
+  const [active, setActive] = useState(Math.max(0, picked))
+  const isNone = color?.kind === 'none'
+
+  /*
+   * Focus moves in the commit rather than after paint, so a key typed straight
+   * after the one that opened the list reaches it, not the button.
+   */
+  useLayoutEffect(() => {
+    if (!open || !dialog.current || !row.current) return
+    place(dialog.current, row.current)
+    if (open === 'tokens') (list.current ?? dialog.current).focus()
+  }, [open])
+
+  useLayoutEffect(() => {
+    if (refocus === undefined) return
+    root.current
+      ?.querySelector<HTMLElement>(`[aria-label="${refocus}"]`)
+      ?.focus()
+  }, [label])
+
+  const close = () => {
+    const trigger = open === 'tokens' ? tokenButton : swatch
+    releasePicker()
+    setOpen(undefined)
+    trigger.current?.focus()
+  }
+
+  const toggle = (next: Exclude<Open, undefined>) => {
+    releasePicker()
+    setActive(Math.max(0, picked))
+    setOpen(open === next ? undefined : next)
+  }
+
+  const pick = (name: string) => {
+    if (color?.kind === 'token' && color.name === name) {
+      close()
+      return
+    }
+    close()
+    refocus = tokensLabel(label)
+    onCommit(
+      composeColor({ kind: 'token', name, opacity: currentOpacity(color) }),
+    )
+  }
+
+  const Sampler = eyeDropper()
+  const sample = async (sampler: new () => EyeDropperSampler) => {
+    let picked: string
+    try {
+      picked = (await new sampler().open()).sRGBHex
+    } catch {
+      /* The operator dismissed the sampler, which writes nothing. */
+      return
+    }
+    const hex = readHex(picked)
+    if (!hex) return
+    refocus = eyedropperLabel(label)
+    onCommit(
+      composeColor({
+        kind: 'hex',
+        hex: hex.hex,
+        opacity: currentOpacity(color),
+      }),
+    )
+  }
+
+  const id = `color-${label.replace(/\W+/g, '-')}`
+
+  return (
+    <div
+      ref={root}
+      class="color-field is-wide"
+      onFocusOut={(event) => {
+        const field = event.currentTarget
+        /*
+         * Read once focus has settled. A reload removes the field while it
+         * holds focus, and a picker held across that reload must stay open.
+         */
+        setTimeout(() => {
+          if (!field.isConnected) return
+          if (field.contains(document.activeElement)) return
+          releasePicker()
+          setOpen(undefined)
+        }, 0)
+      }}
+    >
+      <div ref={row} class="fill-row">
+        <div class="glyph-field">
+          <button
+            ref={swatch}
+            class={isNone ? 'swatch is-none' : 'swatch'}
+            type="button"
+            aria-label={swatchLabel(label)}
+            aria-haspopup="dialog"
+            aria-expanded={open === 'picker'}
+            title={label}
+            disabled={isBusy}
+            onClick={() => toggle('picker')}
+          >
+            <span
+              class="swatch-paint"
+              style={isNone ? undefined : { '--paint': painted }}
+            />
+          </button>
+          <ColorInputs
+            hexLabel={label}
+            opacityLabel={`${label} opacity`}
+            color={color}
+            text={text}
+            isBusy={isBusy}
+            onCommit={onCommit}
+          />
+        </div>
+        <button
+          ref={tokenButton}
+          class="color-icon"
+          type="button"
+          aria-label={tokensLabel(label)}
+          aria-haspopup="dialog"
+          aria-expanded={open === 'tokens'}
+          title="Pick a color token"
+          disabled={isBusy}
+          onClick={() => toggle('tokens')}
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <circle cx="5" cy="5" r="2.25" />
+            <circle cx="11" cy="5" r="2.25" />
+            <circle cx="5" cy="11" r="2.25" />
+            <circle cx="11" cy="11" r="2.25" />
+          </svg>
+        </button>
+        {Sampler ? (
+          <button
+            class="color-icon"
+            type="button"
+            aria-label={eyedropperLabel(label)}
+            title="Pick a color from the screen"
+            disabled={isBusy}
+            onClick={() => void sample(Sampler)}
+          >
+            <svg viewBox="0 0 16 16" aria-hidden="true">
+              <path d="M10.5 2.5a1.4 1.4 0 0 1 2 0l1 1a1.4 1.4 0 0 1 0 2L12 7l.5.5-1 1-4-4 1-1L9 4zM7.5 5.5l3 3-5 5H2.5v-3z" />
+            </svg>
+          </button>
+        ) : null}
+        {isRaw ? (
+          <span
+            class="raw"
+            title="Set as a raw value, so it will not follow the theme. Pick a token to fix it"
+          >
+            raw
+          </span>
+        ) : null}
+      </div>
+      {open ? (
+        <div
+          ref={dialog}
+          class={
+            open === 'picker' ? 'color-popover' : 'color-popover is-tokens'
+          }
+          popover="manual"
+          role="dialog"
+          aria-label={
+            open === 'picker' ? `${label} color` : `${label} token list`
+          }
+          tabIndex={-1}
+          onKeyDown={(event) => {
+            if (event.key !== 'Escape') return
+            event.preventDefault()
+            /* A blur would commit what was typed, so put it back first. */
+            if (event.target instanceof HTMLInputElement) {
+              event.target.value = event.target.defaultValue
+            }
+            close()
+          }}
+        >
+          {open === 'picker' ? (
+            <ColorPicker
+              owner={owner}
+              color={color}
+              text={text}
+              inline={inline}
+              painted={painted}
+              begin={preview}
+              isBusy={isBusy}
+              onCommit={onCommit}
+            />
+          ) : tokens.length > 0 ? (
+            <ul
+              ref={list}
+              class="token-list"
+              role="listbox"
+              aria-label="Tokens"
+              tabIndex={0}
+              aria-activedescendant={`${id}-${active}`}
+              onKeyDown={(event) => {
+                const last = tokens.length - 1
+                const moves: Record<string, number> = {
+                  ArrowDown: Math.min(last, active + 1),
+                  ArrowUp: Math.max(0, active - 1),
+                  Home: 0,
+                  End: last,
+                }
+                if (event.key in moves) {
+                  event.preventDefault()
+                  setActive(moves[event.key] ?? active)
+                } else if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  const name = tokens[active]
+                  if (name) pick(name)
+                }
+              }}
+            >
+              {tokens.map((name, index) => (
+                <li
+                  key={name}
+                  id={`${id}-${index}`}
+                  class={
+                    index === active ? 'token-option is-active' : 'token-option'
+                  }
+                  role="option"
+                  aria-selected={index === picked}
+                  title={name}
+                  onClick={() => pick(name)}
+                >
+                  <span
+                    class="swatch-paint"
+                    aria-hidden="true"
+                    style={{ '--paint': paint(name) }}
+                  />
+                  <span class="token-name">{name}</span>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p class="empty">
+              No color tokens resolve. Add them to the token sheet
+            </p>
+          )}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/canvas/client/inspector/color-inputs.tsx

@@ -0,0 +1,139 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import {
+  composeColor,
+  type ParsedColor,
+  readHex,
+  readOpacity,
+} from '@/canvas/client/inspector/values'
+
+function shownHex(color: ParsedColor | undefined, text: string): string {
+  if (!color) return text
+  if (color.kind === 'none') return ''
+  return color.kind === 'token' ? color.name : color.hex
+}
+
+function shownOpacity(color: ParsedColor | undefined): string {
+  return color && color.kind !== 'none' ? String(color.opacity) : ''
+}
+
+export function currentOpacity(color: ParsedColor | undefined): number {
+  return color && color.kind !== 'none' ? color.opacity : 100
+}
+
+/**
+ * What a typed hex writes. A token name typed whole picks the token, and any
+ * other text goes through as written, which the panel then marks raw.
+ */
+function fromTyped(typed: string, opacity: number): string {
+  const hex = readHex(typed)
+  if (hex) {
+    return composeColor({
+      kind: 'hex',
+      hex: hex.hex,
+      opacity: hex.opacity ?? opacity,
+    })
+  }
+  if (/^--[\w-]+$/.test(typed)) {
+    return composeColor({ kind: 'token', name: typed, opacity })
+  }
+  return typed
+}
+
+export interface ColorInputsProps {
+  readonly hexLabel: string
+  readonly opacityLabel: string
+  readonly color: ParsedColor | undefined
+  readonly text: string
+  readonly isBusy: boolean
+  /**
+   * Holds the inputs read-only rather than disabled while busy, for a
+   * popover that closes once focus leaves it and a disabled input drops focus.
+   */
+  readonly keepsFocus?: boolean
+  readonly onCommit: (value: string) => void
+}
+
+/**
+ * The hex and the opacity. Each commits on change and posts nothing when the
+ * value is what it started at, or an opacity outside 0 to 100.
+ */
+export function ColorInputs({
+  hexLabel,
+  opacityLabel,
+  color,
+  text,
+  isBusy,
+  keepsFocus = false,
+  onCommit,
+}: ColorInputsProps): JSX.Element {
+  const hex = shownHex(color, text)
+  const opacity = shownOpacity(color)
+  const isDisabled = isBusy && !keepsFocus
+  const isReadOnly = isBusy && keepsFocus
+  return (
+    <>
+      <input
+        class={
+          color === undefined
+            ? 'glyph-field-input is-text'
+            : color.kind === 'token'
+              ? 'glyph-field-input is-token'
+              : 'glyph-field-input'
+        }
+        type="text"
+        aria-label={hexLabel}
+        title={hex}
+        defaultValue={hex}
+        placeholder="None"
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+        spellcheck={false}
+        onChange={(event) => {
+          const typed = event.currentTarget.value.trim()
+          if (isBusy) {
+            event.currentTarget.value = hex
+            return
+          }
+          if (typed === '' || typed === hex) return
+          onCommit(fromTyped(typed, currentOpacity(color)))
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') event.currentTarget.value = hex
+        }}
+      />
+      <input
+        class="color-opacity"
+        type="text"
+        inputMode="numeric"
+        aria-label={opacityLabel}
+        defaultValue={opacity}
+        disabled={isDisabled || !color || color.kind === 'none'}
+        readOnly={isReadOnly}
+        spellcheck={false}
+        onChange={(event) => {
+          const percent = readOpacity(event.currentTarget.value)
+          if (
+            isBusy ||
+            percent === undefined ||
+            !color ||
+            color.kind === 'none' ||
+            percent === color.opacity
+          ) {
+            event.currentTarget.value = opacity
+            return
+          }
+          onCommit(composeColor({ ...color, opacity: percent }))
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') event.currentTarget.value = opacity
+        }}
+      />
+      {opacity ? (
+        <span class="color-percent" aria-hidden="true">
+          %
+        </span>
+      ) : null}
+    </>
+  )
+}