@erclx/canon 5.27.0 → 5.29.0

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

@@ -21,6 +21,8 @@ export interface Scrub {
   readonly begin: () => ScrubSession
   /** Holds a scrubbed number inside what the property accepts. */
   readonly clamp: (value: number) => number
+  /** Scales each pixel's move, for a value whose useful range is small. */
+  readonly step?: number
 }
 
 interface FieldProps {
@@ -120,8 +122,11 @@ export function Field({
           const moved = event.clientX - held.lastX
           held.lastX = event.clientX
           held.value = scrub.clamp(
-            Math.round((held.value + moved * scrubStep(event.shiftKey)) * 10) /
-              10,
+            Math.round(
+              (held.value +
+                moved * scrubStep(event.shiftKey) * (scrub.step ?? 1)) *
+                10,
+            ) / 10,
           )
           const shown = String(held.value)
           if (input.current) input.current.value = shown
@@ -177,6 +182,60 @@ export function Field({
   )
 }
 
+interface SelectFieldProps {
+  readonly label: string
+  readonly glyph: string
+  /** Each option's value, which is also what it shows. */
+  readonly options: readonly string[]
+  readonly value: string
+  readonly isBusy: boolean
+  readonly isWide?: boolean
+  readonly onCommit: (value: string) => void
+}
+
+/**
+ * A value picked from a fixed list, drawn like a field with a chevron. The
+ * select is native, so its list opens above the panel's clipping. A current
+ * value outside the list stays as an option, so it shows rather than blanks.
+ */
+export function SelectField({
+  label,
+  glyph,
+  options,
+  value,
+  isBusy,
+  isWide,
+  onCommit,
+}: SelectFieldProps): JSX.Element {
+  const shown = options.includes(value) ? options : [...options, value]
+  return (
+    <div class={fieldClass(isWide, 'is-select')}>
+      <span class="glyph" aria-hidden="true" title={label}>
+        {glyph}
+      </span>
+      <select
+        class="glyph-field-input glyph-select"
+        aria-label={label}
+        value={value}
+        disabled={isBusy}
+        onChange={(event) => {
+          const picked = event.currentTarget.value
+          if (picked !== value) onCommit(picked)
+        }}
+      >
+        {shown.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+      <svg class="select-chevron" viewBox="0 0 16 16" aria-hidden="true">
+        <path d="M4.5 6.5 8 10l3.5-3.5" />
+      </svg>
+    </div>
+  )
+}
+
 interface ReadOnlyFieldProps {
   readonly label: string
   readonly glyph: string

package/src/canvas/client/inspector/fields.css

@@ -679,3 +679,81 @@
   height: 14px;
   fill: currentColor;
 }
+
+/*
+ * A value picked from a fixed list. The native select draws its value as the
+ * field's text and the chevron sits over its right edge, so the platform list
+ * opens on press and the field keeps the height of every other one.
+ */
+.glyph-field.is-select {
+  position: relative;
+}
+
+.glyph-select {
+  appearance: none;
+  padding-right: 22px;
+  cursor: pointer;
+}
+
+.select-chevron {
+  position: absolute;
+  right: 6px;
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: var(--color-muted);
+  stroke-width: 1.5;
+  pointer-events: none;
+}
+
+/* A raw marker inside a field sits before its menu, clear of the value. */
+.glyph-field .raw {
+  padding: 0 2px 0 var(--space-xs);
+}
+
+/* Mutually exclusive choices for one value, drawn as one field split evenly. */
+.segmented {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 2px;
+  min-height: 24px;
+  padding: 1px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-action);
+  background: var(--color-surface);
+}
+
+.segment {
+  display: grid;
+  place-items: center;
+  min-height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-action);
+  background: transparent;
+  color: var(--color-muted);
+  cursor: pointer;
+}
+
+.segment:hover {
+  color: var(--color-text);
+}
+
+.segment[aria-pressed='true'] {
+  background: var(--color-chrome);
+  color: var(--color-text);
+}
+
+.segment:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.segment svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+}

package/src/canvas/client/inspector/token-select.tsx

@@ -0,0 +1,109 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { Field, type Scrub } from '@/canvas/client/inspector/field'
+
+/** The menu entry that hands the value back to the field for typing. */
+const RAW = ''
+
+interface TokenSelectProps {
+  readonly label: string
+  readonly glyph: string
+  /** The value as the panel shows it, a token's name where one stands. */
+  readonly initial: string
+  /** One token group's names, in the order the token sheet sorts them. */
+  readonly tokens: readonly string[]
+  /** The token the element names, where it names one. */
+  readonly token?: string
+  readonly isRaw: boolean
+  readonly isBusy: boolean
+  readonly isWide?: boolean
+  readonly placeholder?: string
+  /** Takes a typed value as typed. */
+  readonly onCommit: (value: string) => void
+  /** Takes the name of a token picked from the menu or typed whole. */
+  readonly onPick: (name: string) => void
+  readonly scrub?: Scrub
+}
+
+/**
+ * A value that takes a token or a typed literal. The menu lists the group's
+ * tokens first and a raw value last, which returns focus to the field, so a
+ * token is one pick away and a literal is still one keystroke. A group with no
+ * tokens leaves the field alone, with no menu and no raw marker.
+ */
+export function TokenSelect({
+  label,
+  glyph,
+  initial,
+  tokens,
+  token,
+  isRaw,
+  isBusy,
+  isWide,
+  placeholder,
+  onCommit,
+  onPick,
+  scrub,
+}: TokenSelectProps): JSX.Element {
+  const hasTokens = tokens.length > 0
+  return (
+    <Field
+      label={label}
+      glyph={glyph}
+      initial={initial}
+      isBusy={isBusy}
+      isWide={isWide}
+      placeholder={placeholder}
+      onCommit={(typed) => {
+        if (tokens.includes(typed)) onPick(typed)
+        else onCommit(typed)
+      }}
+      scrub={scrub}
+      trailing={
+        hasTokens ? (
+          <>
+            {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}
+            <span class="size-mode">
+              <select
+                class="size-mode-select"
+                aria-label={`${label} tokens`}
+                value={token ?? RAW}
+                disabled={isBusy}
+                onChange={(event) => {
+                  const picked = event.currentTarget.value
+                  if (picked === RAW) {
+                    event.currentTarget
+                      .closest('.glyph-field')
+                      ?.querySelector<HTMLInputElement>('.glyph-field-input')
+                      ?.focus()
+                  } else if (picked !== token) onPick(picked)
+                }}
+              >
+                {tokens.map((name) => (
+                  <option key={name} value={name}>
+                    {name}
+                  </option>
+                ))}
+                <option value={RAW}>Raw value</option>
+              </select>
+              <svg
+                class="size-mode-chevron"
+                viewBox="0 0 16 16"
+                aria-hidden="true"
+              >
+                <path d="M4.5 6.5 8 10l3.5-3.5" />
+              </svg>
+            </span>
+          </>
+        ) : null
+      }
+    />
+  )
+}

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

@@ -4,6 +4,9 @@
  * back through `toCssValue`, so rounding never writes a value nobody typed.
  */
 
+/** A length that runs below zero, so a bare number is pixels and unclamped. */
+const SIGNED_LENGTHS = new Set(['letter-spacing'])
+
 /** Properties whose bare numbers are pixel lengths. */
 const LENGTHS = new Set([
   'width',
@@ -26,6 +29,8 @@ const SIZE_MODES: Readonly<Record<string, string>> = {
 }
 
 const PX = /^(-?\d*\.?\d+)px$/
+const EM = /^(-?\d*\.?\d+)em$/
+const NUMBER = /^-?\d*\.?\d+$/
 
 function formatPx(token: string): string {
   const match = token.match(PX)
@@ -45,6 +50,11 @@ export function isNoFill(value: string): boolean {
 export function displayValue(property: string, raw: string): string {
   const value = raw.trim()
   if (property === 'gap' && (value === '' || value === 'normal')) return ''
+  if (property === 'letter-spacing') {
+    if (value === 'normal') return ''
+    const em = value.match(EM)
+    if (em) return `${Math.round(Number(em[1]) * 1000) / 1000}em`
+  }
   if (property === 'background-color' && isNoFill(value)) return ''
   if (property === 'opacity' && value !== '')
     return `${Math.round(Number(value) * 100)}%`
@@ -61,9 +71,13 @@ export function displayValue(property: string, raw: string): string {
 
 export function toCssValue(property: string, typed: string): string {
   const value = typed.trim()
+  /* A line height has no auto keyword, so the field's Auto is its normal. */
+  if (property === 'line-height' && value.toLowerCase() === 'auto') {
+    return 'normal'
+  }
   if (value === 'Auto' || value === 'Normal') return value.toLowerCase()
   if (SIZES.has(property) && SIZE_MODES[value]) return SIZE_MODES[value]
-  if (!LENGTHS.has(property)) return value
+  if (!LENGTHS.has(property) && !SIGNED_LENGTHS.has(property)) return value
   return value
     .split(/\s+/)
     .map((token) => (/^-?\d*\.?\d+$/.test(token) ? `${token}px` : token))
@@ -92,10 +106,68 @@ export function sharedRadius(corners: readonly string[]): string | undefined {
  */
 export function clampScrub(property: string, value: number): number {
   if (property === 'font-weight') return Math.min(1000, Math.max(1, value))
-  if (LENGTHS.has(property)) return Math.max(0, value)
+  if (LENGTHS.has(property) || property === 'line-height') {
+    return Math.max(0, value)
+  }
+  return value
+}
+
+/**
+ * A line height as the panel shows it: a ratio of the font size, the way a
+ * unitless value writes it. A browser computes a unitless value to pixels, so
+ * a pixel value reads back as its ratio when the font size is in pixels too.
+ */
+export function lineHeightValue(raw: string, fontSize: string): string {
+  const value = raw.trim()
+  if (value === 'normal') return 'Auto'
+  const ratio = (number: number): string =>
+    String(Math.round(number * 100) / 100)
+  if (NUMBER.test(value)) return ratio(Number(value))
+  const height = value.match(PX)
+  const size = fontSize.trim().match(PX)
+  if (height && size && Number(size[1]) > 0) {
+    return ratio(Number(height[1]) / Number(size[1]))
+  }
+  return value
+}
+
+/** The first family of a stack, unquoted, which is the one the field names. */
+export function firstFamily(stack: string): string {
+  const value = stack.trim()
+  if (value.startsWith('var(')) return value
+  const [first = ''] = value.split(',')
+  return first.trim().replace(/^(["'])(.*)\1$/, '$2')
+}
+
+/**
+ * Text alignment by the side it lands on, so the group presses the side the
+ * text paints on. The logical keywords turn on the element's direction.
+ */
+export function textAlignOf(computed: string, direction: string): string {
+  const value = computed.trim()
+  const isRtl = direction.trim() === 'rtl'
+  if (value === 'start') return isRtl ? 'right' : 'left'
+  if (value === 'end') return isRtl ? 'left' : 'right'
   return value
 }
 
+/**
+ * A value as the writer takes it. A whole declaration pasted from a
+ * stylesheet keeps its value alone, since the writer refuses the semicolon.
+ */
+export function declarationValue(property: string, typed: string): string {
+  const value = typed.trim().replace(/;\s*$/, '')
+  const prefix = `${property}:`
+  return value.toLowerCase().startsWith(prefix)
+    ? value.slice(prefix.length).trim()
+    : value
+}
+
+/** The token a value names when it is a bare `var()` and nothing else. */
+export function tokenOf(value: string): string | undefined {
+  return value.trim().match(VAR)?.[1]
+}
+
 /** Units a scrub moves for each pixel the pointer travels. */
 export function scrubStep(isCoarse: boolean): number {
   return isCoarse ? 10 : 1

package/src/canvas/client/inspector.tsx

@@ -8,16 +8,23 @@ import {
   Field,
   ReadOnlyField,
   type Scrub,
+  SelectField,
 } from '@/canvas/client/inspector/field'
 import { Section } from '@/canvas/client/inspector/section'
 import { SizeField } from '@/canvas/client/inspector/size-field'
+import { TokenSelect } from '@/canvas/client/inspector/token-select'
 import {
   clampScrub,
+  declarationValue,
   displayValue,
+  firstFamily,
+  lineHeightValue,
   opacityToCss,
   parseColor,
   sharedRadius,
+  textAlignOf,
   toCssValue,
+  tokenOf,
 } from '@/canvas/client/inspector/values'
 import {
   currentPage,
@@ -27,6 +34,7 @@ import {
   frameDocuments,
   frameKey,
   frameVersions,
+  newStep,
   pendingEdit,
   savedEdit,
   selectedElement,
@@ -34,6 +42,7 @@ import {
   tokens,
   writeError,
 } from '@/canvas/client/state'
+import type { TokenKind } from '@/canvas/tokens'
 import '@/canvas/client/inspector/fields.css'
 
 /** Elements the parser never gives content, so they hold no text to edit. */
@@ -112,11 +121,26 @@ const CORNER_FIELDS: readonly StyleField[] = [
 const FLEX_DISPLAYS = new Set(['flex', 'inline-flex'])
 const GRID_DISPLAYS = new Set(['grid', 'inline-grid'])
 
-const TYPE_FIELDS: readonly StyleField[] = [
-  { label: 'size', glyph: 'Size', property: 'font-size' },
-  { label: 'weight', glyph: 'Wt', property: 'font-weight' },
+const WEIGHTS = ['100', '200', '300', '400', '500', '600', '700', '800', '900']
+
+/** Line height and letter spacing move in tenths, since their range is small. */
+const SPACING_FIELDS: readonly StyleField[] = [
+  { label: 'line height', glyph: 'LH', property: 'line-height' },
+  {
+    label: 'letter spacing',
+    glyph: 'LS',
+    property: 'letter-spacing',
+    placeholder: '0',
+  },
 ]
 
+const TEXT_ALIGNS = [
+  { value: 'left', path: 'M2.5 4h11M2.5 8h7M2.5 12h9' },
+  { value: 'center', path: 'M2.5 4h11M4.5 8h7M3.5 12h9' },
+  { value: 'right', path: 'M2.5 4h11M6.5 8h7M4.5 12h9' },
+  { value: 'justify', path: 'M2.5 4h11M2.5 8h11M2.5 12h11' },
+] as const
+
 const FILL_FIELDS = [
   { label: 'color', property: 'color' },
   { label: 'background', property: 'background-color' },
@@ -217,17 +241,25 @@ function ElementFields({
   }
   /*
    * The writer takes one property an edit, so a control setting two posts
-   * them in turn and stops at the first refusal. Each carries the hash the
-   * last answered with in its own address, since a frame reloading between
-   * the two clears the stored one.
+   * them in turn and stops at the first refusal, under one step so they undo
+   * as one. Each carries the hash the last answered with in its own address,
+   * since a frame reloading between the two clears the stored one.
    */
   const commitAll = async (
     changes: readonly (readonly [string, string])[],
   ): Promise<void> => {
+    const step = newStep()
     let current = address
     for (const [property, value] of changes) {
       if (!current) return
-      const written = await editElement(frameRef, key, current, property, value)
+      const written = await editElement(
+        frameRef,
+        key,
+        current,
+        property,
+        value,
+        step,
+      )
       if (!written) return
       if (written.hash) current = { ...current, hash: written.hash }
     }
@@ -241,20 +273,29 @@ function ElementFields({
   const isFlex = FLEX_DISPLAYS.has(display)
   const isWrapped = computedValue(node, 'flex-wrap').trim() === 'wrap'
   const rect = node.getBoundingClientRect()
-  const font = currentValue(node, 'font-family')
   const text = node.textContent ?? ''
-  const colorTokens =
+  const groupTokens = (kind: TokenKind): readonly string[] =>
     tokens.value?.groups
-      ?.find((group) => group.kind === 'color')
+      ?.find((group) => group.kind === kind)
       ?.tokens.map((token) => token.name) ?? []
+  const colorTokens = groupTokens('color')
+  const family = currentValue(node, 'font-family')
+  const familyToken = tokenOf(family)
+  const size = currentValue(node, 'font-size')
+  const sizeToken = tokenOf(size)
+  const textAlign = textAlignOf(
+    computedValue(node, 'text-align'),
+    computedValue(node, 'direction'),
+  )
 
   /**
    * Previews into the frame's own inline style and writes through the same
    * edit as typing. A reload mid-drag replaces the document, so a release
    * against one no longer on screen posts nothing.
    */
-  const scrubOf = (property: string): Scrub => ({
+  const scrubOf = (property: string, step?: number): Scrub => ({
     clamp: (value) => clampScrub(property, value),
+    step,
     begin: () => {
       const original = inlineValue(node, property)
       const style = (node as HTMLElement).style
@@ -422,10 +463,88 @@ function ElementFields({
         )}
       </Section>
       <Section title="Typography">
-        {TYPE_FIELDS.map(styleField)}
-        {font ? (
-          <ReadOnlyField label="font" glyph="Font" value={font} isWide />
-        ) : null}
+        <TokenSelect
+          label="family"
+          glyph="Aa"
+          initial={familyToken ?? firstFamily(family)}
+          tokens={groupTokens('font-family')}
+          token={familyToken}
+          isRaw={isRawInline(node, 'font-family')}
+          isBusy={isBusy}
+          isWide
+          onCommit={(typed) =>
+            commit('font-family')(declarationValue('font-family', typed))
+          }
+          onPick={(name) => commit('font-family')(`var(${name})`)}
+        />
+        <TokenSelect
+          label="size"
+          glyph="Size"
+          initial={sizeToken ?? displayValue('font-size', size)}
+          tokens={groupTokens('font-size')}
+          token={sizeToken}
+          isRaw={isRawInline(node, 'font-size')}
+          isBusy={isBusy}
+          onCommit={(typed) =>
+            commit('font-size')(toCssValue('font-size', typed))
+          }
+          onPick={(name) => commit('font-size')(`var(${name})`)}
+          scrub={'style' in node ? scrubOf('font-size') : undefined}
+        />
+        <SelectField
+          label="weight"
+          glyph="Wt"
+          options={WEIGHTS}
+          value={currentValue(node, 'font-weight').trim()}
+          isBusy={isBusy}
+          onCommit={commit('font-weight')}
+        />
+        {SPACING_FIELDS.map((field) => (
+          <Field
+            key={field.property}
+            label={field.label}
+            glyph={field.glyph}
+            initial={
+              field.property === 'line-height'
+                ? lineHeightValue(
+                    currentValue(node, 'line-height'),
+                    computedValue(node, 'font-size'),
+                  )
+                : displayValue(
+                    field.property,
+                    currentValue(node, field.property),
+                  )
+            }
+            isBusy={isBusy}
+            placeholder={field.placeholder}
+            onCommit={(typed) =>
+              commit(field.property)(toCssValue(field.property, typed))
+            }
+            scrub={'style' in node ? scrubOf(field.property, 0.1) : undefined}
+          />
+        ))}
+        <div class="segmented is-wide" role="group" aria-label="text alignment">
+          {TEXT_ALIGNS.map((align) => (
+            <button
+              key={align.value}
+              type="button"
+              class="segment"
+              aria-label={`Align ${align.value}`}
+              title={`Align ${align.value}`}
+              aria-pressed={textAlign === align.value}
+              disabled={isBusy}
+              onClick={() => {
+                if (textAlign !== align.value) {
+                  commit('text-align')(align.value)
+                }
+              }}
+            >
+              <svg viewBox="0 0 16 16" aria-hidden="true">
+                <path d={align.path} />
+              </svg>
+            </button>
+          ))}
+        </div>
       </Section>
       <Section title="Fill">
         {FILL_FIELDS.map((field) => {

package/src/canvas/client/keys.ts

@@ -0,0 +1,71 @@
+/**
+ * The canvas key layer: one map from a key event to a surface action, which
+ * the surface and every loaded frame document call. It sees only what the
+ * surface forwards, so a key typed into a panel field never reaches it.
+ */
+
+export type SurfaceAction =
+  | 'tool-move'
+  | 'tool-pan'
+  | 'zoom-in'
+  | 'zoom-out'
+  | 'zoom-fit'
+  | 'pan-hold'
+  | 'pan-release'
+  | 'undo'
+  | 'redo'
+  | 'panels-toggle'
+
+/** The fields of a `KeyboardEvent` the map reads, so a test needs no DOM. */
+export interface KeyInput {
+  readonly type: string
+  readonly key: string
+  readonly code: string
+  readonly shiftKey: boolean
+  readonly ctrlKey: boolean
+  readonly metaKey: boolean
+  readonly altKey: boolean
+}
+
+const PLAIN_KEYS: Readonly<Record<string, SurfaceAction | undefined>> = {
+  v: 'tool-move',
+  h: 'tool-pan',
+  '=': 'zoom-in',
+  '+': 'zoom-in',
+  '-': 'zoom-out',
+  ' ': 'pan-hold',
+}
+
+/**
+ * Undo and redo are the one exception to the browser owning a modifier: Ctrl
+ * or Cmd with Z, with Shift to redo, and Ctrl with Y. Any other Cmd, Ctrl, or
+ * Alt combination is the browser's or the system's, so it returns nothing.
+ */
+function historyAction(event: KeyInput): SurfaceAction | undefined {
+  if (event.altKey) return undefined
+  const key = event.key.toLowerCase()
+  if (key === 'z') return event.shiftKey ? 'redo' : 'undo'
+  if (key === 'y' && event.ctrlKey && !event.shiftKey) return 'redo'
+  return undefined
+}
+
+/**
+ * Space coming up releases whatever is held with it, or a modifier pressed
+ * mid-pan would leave the pan stuck. Shift and the 1 key fits, and the
+ * backslash key toggles the panels, by `code`, since the character each
+ * gives differs by layout.
+ */
+export function surfaceAction(event: KeyInput): SurfaceAction | undefined {
+  if (event.type === 'keyup') {
+    return event.key === ' ' ? 'pan-release' : undefined
+  }
+  if (event.type !== 'keydown') return undefined
+  if (event.ctrlKey || event.metaKey) return historyAction(event)
+  if (event.altKey) return undefined
+  if (event.shiftKey) {
+    if (event.code === 'Digit1') return 'zoom-fit'
+    return event.key === '+' ? 'zoom-in' : undefined
+  }
+  if (event.code === 'Backslash') return 'panels-toggle'
+  return PLAIN_KEYS[event.key.toLowerCase()]
+}

package/src/canvas/client/pages-panel.tsx

@@ -174,7 +174,11 @@ function Tabs(): JSX.Element {
 
 export function PagesPanel(props: PagesPanelProps): JSX.Element {
   return (
-    <nav class="panel panel-left" aria-label="Pages and frames">
+    <nav
+      id="pages-panel"
+      class="panel panel-left"
+      aria-label="Pages and frames"
+    >
       <header class="panel-head">
         <span class="brand">Canvas</span>
         <ThemeToggle />