@erclx/canon 5.24.0 → 5.26.0

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

@@ -0,0 +1,368 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { useLayoutEffect, useRef, useState } from 'preact/hooks'
+import {
+  composeColor,
+  type ParsedColor,
+  readHex,
+  readOpacity,
+} 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 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 picker opens. */
+  readonly paint: (name: string) => string
+  readonly isRaw: boolean
+  readonly isBusy: boolean
+  readonly onCommit: (value: string) => void
+}
+
+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) : ''
+}
+
+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
+}
+
+interface ColorInputsProps {
+  readonly hexLabel: string
+  readonly opacityLabel: string
+  readonly color: ParsedColor | undefined
+  readonly text: string
+  readonly isBusy: 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.
+ */
+function ColorInputs({
+  hexLabel,
+  opacityLabel,
+  color,
+  text,
+  isBusy,
+  onCommit,
+}: ColorInputsProps): JSX.Element {
+  const hex = shownHex(color, text)
+  const opacity = shownOpacity(color)
+  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={isBusy}
+        spellcheck={false}
+        onChange={(event) => {
+          const typed = event.currentTarget.value.trim()
+          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={isBusy || !color || color.kind === 'none'}
+        spellcheck={false}
+        onChange={(event) => {
+          const percent = readOpacity(event.currentTarget.value)
+          if (
+            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}
+    </>
+  )
+}
+
+/**
+ * The swatch whose picker 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
+ * swatch 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`
+}
+
+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 !== swatchLabel(refocus)) refocus = undefined
+  })
+}
+
+/**
+ * One color property: a swatch opening the picker, the hex, and the opacity.
+ * The picker lists the project's color tokens ahead of any raw value, since a
+ * token keeps following the theme and a literal does not.
+ */
+export function ColorField({
+  label,
+  color,
+  text,
+  painted,
+  tokens,
+  paint,
+  isRaw,
+  isBusy,
+  onCommit,
+}: ColorFieldProps): JSX.Element {
+  const [isOpen, setOpen] = useState(false)
+  const swatch = 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 picker reaches the list, not the swatch.
+   */
+  useLayoutEffect(() => {
+    if (!isOpen) return
+    const target =
+      list.current ??
+      dialog.current?.querySelector<HTMLInputElement>('input') ??
+      null
+    target?.focus()
+  }, [isOpen])
+
+  useLayoutEffect(() => {
+    if (refocus === label) swatch.current?.focus()
+  }, [label])
+
+  const close = () => {
+    setOpen(false)
+    swatch.current?.focus()
+  }
+
+  /* Writes from inside the picker, whose swatch keeps focus across the reload. */
+  const commitFromPicker = (value: string) => {
+    close()
+    refocus = label
+    onCommit(value)
+  }
+
+  const pick = (name: string) => {
+    if (color?.kind === 'token' && color.name === name) {
+      close()
+      return
+    }
+    commitFromPicker(
+      composeColor({ kind: 'token', name, opacity: currentOpacity(color) }),
+    )
+  }
+
+  const id = `color-${label.replace(/\W+/g, '-')}`
+
+  return (
+    <div
+      class="color-field is-wide"
+      onFocusOut={(event) => {
+        const next = event.relatedTarget
+        if (!(next instanceof Node) || !event.currentTarget.contains(next)) {
+          setOpen(false)
+        }
+      }}
+    >
+      <div 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={isOpen}
+            title={label}
+            disabled={isBusy}
+            onClick={() => {
+              setActive(Math.max(0, picked))
+              setOpen(!isOpen)
+            }}
+          >
+            <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>
+        {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>
+      {isOpen ? (
+        <div
+          ref={dialog}
+          class="color-picker"
+          role="dialog"
+          aria-label={`${label} colors`}
+          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()
+          }}
+        >
+          {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 class="glyph-field">
+            <span class="glyph" aria-hidden="true">
+              #
+            </span>
+            <ColorInputs
+              hexLabel="hex"
+              opacityLabel="opacity"
+              color={color}
+              text={text}
+              isBusy={isBusy}
+              onCommit={commitFromPicker}
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,200 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { useRef } from 'preact/hooks'
+import { scrubStep } from '@/canvas/client/inspector/values'
+
+/**
+ * One drag of a number field's glyph. Each call takes the value as the field
+ * shows it. Only `commit` writes, so a drag posts one edit at most.
+ */
+export interface ScrubSession {
+  readonly preview: (value: string) => void
+  readonly restore: () => void
+  readonly commit: (value: string) => void
+}
+
+/**
+ * Opens a session at press, so what `restore` returns to is read before any
+ * preview, however often the panel renders during the drag.
+ */
+export interface Scrub {
+  readonly begin: () => ScrubSession
+  /** Holds a scrubbed number inside what the property accepts. */
+  readonly clamp: (value: number) => number
+}
+
+interface FieldProps {
+  /** The full word, which names the input for assistive technology. */
+  readonly label: string
+  /** The short mark drawn inside the field, hidden from assistive technology. */
+  readonly glyph: string
+  readonly initial: string
+  readonly isBusy: boolean
+  readonly isWide?: boolean
+  readonly placeholder?: string
+  readonly onCommit: (value: string) => void
+  /** Makes the glyph a drag handle. Typing stays the keyboard path. */
+  readonly scrub?: Scrub
+}
+
+const NUMBER = /^-?\d*\.?\d+$/
+
+interface Drag {
+  readonly pointerId: number
+  /** What the input held at press, which a cancel puts back. */
+  readonly typed: string
+  /** The number the drag started from, an empty field's placeholder included. */
+  readonly start: string
+  readonly session: ScrubSession
+  lastX: number
+  value: number
+}
+
+function fieldClass(isWide: boolean | undefined, modifier?: string): string {
+  return ['glyph-field', isWide ? 'is-wide' : '', modifier ?? '']
+    .filter(Boolean)
+    .join(' ')
+}
+
+/**
+ * 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.
+ */
+export function Field({
+  label,
+  glyph,
+  initial,
+  isBusy,
+  isWide,
+  placeholder,
+  onCommit,
+  scrub,
+}: FieldProps): JSX.Element {
+  const input = useRef<HTMLInputElement>(null)
+  const handle = useRef<HTMLSpanElement>(null)
+  const drag = useRef<Drag | null>(null)
+
+  const end = (pointerId: number): Drag | undefined => {
+    const held = drag.current
+    if (!held || held.pointerId !== pointerId) return undefined
+    drag.current = null
+    return held
+  }
+
+  /* An empty field scrubs from the number its placeholder shows. */
+  const scrubFrom = (value: string): string =>
+    value.trim() || placeholder?.trim() || ''
+  const isScrubbable = scrub !== undefined && NUMBER.test(scrubFrom(initial))
+
+  const handlers = isScrubbable
+    ? {
+        onPointerDown: (event: PointerEvent) => {
+          const typed = input.current?.value ?? ''
+          const start = scrubFrom(typed)
+          if (isBusy || !NUMBER.test(start)) return
+          event.preventDefault()
+          /*
+           * Capture keeps the release coming here when the pointer leaves the
+           * glyph, the panel, or crosses into a frame's own document.
+           */
+          try {
+            handle.current?.setPointerCapture(event.pointerId)
+          } catch {
+            /* A pointer the browser no longer tracks ends on cancel instead. */
+          }
+          drag.current = {
+            pointerId: event.pointerId,
+            typed,
+            start,
+            session: scrub.begin(),
+            lastX: event.clientX,
+            value: Number(start),
+          }
+        },
+        onPointerMove: (event: PointerEvent) => {
+          const held = drag.current
+          if (!held || held.pointerId !== event.pointerId) return
+          const moved = event.clientX - held.lastX
+          held.lastX = event.clientX
+          held.value = scrub.clamp(
+            Math.round((held.value + moved * scrubStep(event.shiftKey)) * 10) /
+              10,
+          )
+          const shown = String(held.value)
+          if (input.current) input.current.value = shown
+          held.session.preview(shown)
+        },
+        onPointerUp: (event: PointerEvent) => {
+          const held = end(event.pointerId)
+          if (!held) return
+          const shown = String(held.value)
+          if (shown === held.start) held.session.restore()
+          else held.session.commit(shown)
+        },
+        onPointerCancel: (event: PointerEvent) => {
+          const held = end(event.pointerId)
+          if (!held) return
+          if (input.current) input.current.value = held.typed
+          held.session.restore()
+        },
+      }
+    : {}
+
+  return (
+    <div class={fieldClass(isWide)}>
+      <span
+        ref={handle}
+        class={isScrubbable ? 'glyph is-scrub' : 'glyph'}
+        aria-hidden="true"
+        title={label}
+        {...handlers}
+      >
+        {glyph}
+      </span>
+      <input
+        ref={input}
+        class="glyph-field-input"
+        type="text"
+        aria-label={label}
+        title={initial}
+        defaultValue={initial}
+        placeholder={placeholder}
+        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
+        }}
+      />
+    </div>
+  )
+}
+
+interface ReadOnlyFieldProps {
+  readonly label: string
+  readonly glyph: string
+  readonly value: string
+  readonly isWide?: boolean
+}
+
+/** A value the panel shows and nothing here writes, drawn like a field. */
+export function ReadOnlyField({
+  label,
+  glyph,
+  value,
+  isWide,
+}: ReadOnlyFieldProps): JSX.Element {
+  return (
+    <div class={fieldClass(isWide, 'is-readonly')}>
+      <span class="glyph" aria-hidden="true" title={label}>
+        {glyph}
+      </span>
+      <output class="glyph-field-input" aria-label={label} title={value}>
+        {value}
+      </output>
+    </div>
+  )
+}