@erclx/canon 5.25.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/fields.css

@@ -108,28 +108,6 @@
   flex: 1;
 }
 
-.token-picker {
-  flex: none;
-  width: 4.5rem;
-  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;
-  cursor: pointer;
-}
-
-.token-picker:hover {
-  border-color: var(--color-muted);
-}
-
-.token-picker:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 .raw {
   flex: none;
   color: var(--color-text-secondary);
@@ -149,3 +127,166 @@
   color: var(--color-success);
   font-weight: 400;
 }
+
+/*
+ * A color is one field: a swatch leading in the glyph's lane, the hex, and the
+ * opacity right-aligned. The picker opens in the flow under it, so it can never
+ * reach past the panel's edge or scroll it sideways.
+ */
+.color-field {
+  min-width: 0;
+}
+
+.swatch {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 1.75rem;
+  min-height: 22px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.swatch:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/*
+ * The paint is the top layer over a checker, so an opacity below full reads
+ * as one. `--paint` carries the color, since a background color sits under
+ * every image layer and the checker would cover it.
+ */
+.swatch-paint {
+  --paint: transparent;
+  flex: none;
+  width: 12px;
+  height: 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 2px;
+  background-image:
+    linear-gradient(var(--paint), var(--paint)),
+    linear-gradient(45deg, var(--color-border) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--color-border) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--color-border) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--color-border) 75%);
+  background-size:
+    auto,
+    6px 6px,
+    6px 6px,
+    6px 6px,
+    6px 6px;
+  background-position:
+    0 0,
+    0 0,
+    0 3px,
+    3px -3px,
+    -3px 0;
+}
+
+.swatch:hover .swatch-paint {
+  border-color: var(--color-muted);
+}
+
+/* No fill draws a slash rather than a color. */
+.swatch.is-none .swatch-paint {
+  background-image: linear-gradient(
+    to top right,
+    transparent calc(50% - 1px),
+    var(--color-muted) calc(50% - 1px),
+    var(--color-muted) calc(50% + 1px),
+    transparent calc(50% + 1px)
+  );
+  background-size: auto;
+}
+
+.color-field .glyph-field-input {
+  text-transform: uppercase;
+}
+
+/* Only a hex reads in capitals. A value the picker cannot read stays as written. */
+.color-field .glyph-field-input::placeholder,
+.color-field .glyph-field-input.is-text {
+  text-transform: none;
+}
+
+/* A token name is a name, so it keeps its own case. */
+.color-field .glyph-field-input.is-token {
+  flex: 0 1 auto;
+  margin-right: auto;
+  padding: 0 var(--space-xs);
+  border-radius: var(--radius-action);
+  background: var(--color-background);
+  text-transform: none;
+}
+
+.color-opacity {
+  flex: none;
+  width: 2.25rem;
+  padding: 2px 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.color-opacity:disabled {
+  color: var(--color-muted);
+  cursor: not-allowed;
+}
+
+.color-percent {
+  flex: none;
+  padding-right: var(--space-xs);
+  color: var(--color-muted);
+  user-select: none;
+}
+
+.color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  margin-top: var(--space-xs);
+  padding: var(--space-xs);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-action);
+  background: var(--color-chrome);
+}
+
+.token-list {
+  max-height: 12rem;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.token-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  min-height: 24px;
+  padding: 0 var(--space-xs);
+  border-radius: var(--radius-action);
+  cursor: pointer;
+}
+
+.token-option:hover,
+.token-option.is-active {
+  background: var(--color-surface);
+}
+
+.token-option[aria-selected='true'] .token-name {
+  color: var(--color-accent);
+}
+
+.token-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/canvas/client/inspector/values.ts

@@ -58,3 +58,126 @@ export function clampScrub(property: string, value: number): number {
 export function scrubStep(isCoarse: boolean): number {
   return isCoarse ? 10 : 1
 }
+
+/** A color the picker can write: a token or a hex, each with an opacity. */
+export type WrittenColor =
+  | {
+      readonly kind: 'token'
+      /** The custom property name as the token sheet gives it. */
+      readonly name: string
+      readonly opacity: number
+    }
+  | { readonly kind: 'hex'; readonly hex: string; readonly opacity: number }
+
+export type ParsedColor = WrittenColor | { readonly kind: 'none' }
+
+const HEX = /^#?([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i
+const RGB =
+  /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/i
+/** What a browser computes `color-mix()` in srgb to, channels 0 to 1. */
+const SRGB =
+  /^color\(\s*srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+%?))?\s*\)$/i
+const VAR = /^var\(\s*(--[\w-]+)\s*\)$/i
+const MIX =
+  /^color-mix\(\s*in\s+srgb\s*,\s*var\(\s*(--[\w-]+)\s*\)\s+([\d.]+)%\s*,\s*transparent\s*\)$/i
+
+function channel(value: number): string {
+  return Math.round(Math.min(255, Math.max(0, value)))
+    .toString(16)
+    .padStart(2, '0')
+}
+
+/**
+ * An alpha as a percent. A value past 1 clamps to full rather than reading as
+ * a 0 to 255 scale, since CSS clamps it the same way when it paints.
+ */
+function alphaPercent(alpha: string | undefined): number {
+  if (alpha === undefined) return 100
+  const fraction = alpha.endsWith('%')
+    ? Number(alpha.slice(0, -1)) / 100
+    : Number(alpha)
+  return Math.round(Math.min(1, Math.max(0, fraction)) * 100)
+}
+
+/** A typed hex in any of its lengths, normalized to six digits. */
+export function readHex(
+  typed: string,
+): { readonly hex: string; readonly opacity?: number } | undefined {
+  const match = typed.trim().match(HEX)
+  if (!match) return undefined
+  const digits = match[1].toLowerCase()
+  const full =
+    digits.length <= 4
+      ? [...digits].map((digit) => digit + digit).join('')
+      : digits
+  const hex = full.slice(0, 6)
+  if (full.length === 6) return { hex }
+  return {
+    hex,
+    opacity: Math.round((parseInt(full.slice(6), 16) / 255) * 100),
+  }
+}
+
+/** A typed opacity percent, refused outside 0 to 100. */
+export function readOpacity(typed: string): number | undefined {
+  const value = typed.trim().replace(/%$/, '')
+  if (!/^-?\d*\.?\d+$/.test(value)) return undefined
+  const percent = Number(value)
+  return percent >= 0 && percent <= 100 ? Math.round(percent) : undefined
+}
+
+/**
+ * Reads a computed or inline color into what the picker shows. A form it does
+ * not know, such as a named color, comes back undefined.
+ */
+export function parseColor(value: string): ParsedColor | undefined {
+  const text = value.trim()
+  if (isNoFill(text)) return { kind: 'none' }
+  const token = text.match(VAR)
+  if (token) return { kind: 'token', name: token[1], opacity: 100 }
+  const mix = text.match(MIX)
+  if (mix) {
+    return {
+      kind: 'token',
+      name: mix[1],
+      opacity: Math.round(Math.min(100, Number(mix[2]))),
+    }
+  }
+  const hex = text.startsWith('#') ? readHex(text) : undefined
+  if (hex) return painted(hex.hex, hex.opacity ?? 100)
+  const rgb = text.match(RGB)
+  if (rgb) {
+    return painted(
+      [rgb[1], rgb[2], rgb[3]].map((part) => channel(Number(part))).join(''),
+      alphaPercent(rgb[4]),
+    )
+  }
+  const srgb = text.match(SRGB)
+  if (!srgb) return undefined
+  return painted(
+    [srgb[1], srgb[2], srgb[3]]
+      .map((part) => channel(Number(part) * 255))
+      .join(''),
+    alphaPercent(srgb[4]),
+  )
+}
+
+/** A color at zero opacity paints nothing, whichever form wrote it. */
+function painted(hex: string, opacity: number): ParsedColor {
+  return opacity === 0 ? { kind: 'none' } : { kind: 'hex', hex, opacity }
+}
+
+/**
+ * The value a pick writes. A token below full opacity mixes with transparent
+ * rather than resolving to a hex, so it keeps following the theme.
+ */
+export function composeColor(color: WrittenColor): string {
+  if (color.kind === 'token') {
+    return color.opacity >= 100
+      ? `var(${color.name})`
+      : `color-mix(in srgb, var(${color.name}) ${color.opacity}%, transparent)`
+  }
+  return color.opacity >= 100
+    ? `#${color.hex}`
+    : `#${color.hex}${channel((color.opacity / 100) * 255)}`
+}