@erclx/canon 5.27.0 → 5.28.0

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,
@@ -34,6 +41,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 +120,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' },
@@ -241,20 +264,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 +454,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,54 @@
+/**
+ * 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'
+
+/** 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',
+}
+
+/**
+ * Cmd, Ctrl, and Alt combinations are the browser's or the system's, so any
+ * of them held on a press returns nothing. 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 by `code`, since the character Shift gives on that
+ * key 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 || event.altKey) return undefined
+  if (event.shiftKey) {
+    if (event.code === 'Digit1') return 'zoom-fit'
+    return event.key === '+' ? 'zoom-in' : undefined
+  }
+  return PLAIN_KEYS[event.key.toLowerCase()]
+}

package/src/canvas/client/selection.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource preact */
 import type { JSX } from 'preact'
 import { useRef, useState } from 'preact/hooks'
-import { view } from '@/canvas/client/state'
+import { shownTool, view } from '@/canvas/client/state'
 
 /** Screen pixels a press travels before it reads as a drag and not a click. */
 export const DRAG_THRESHOLD = 3
@@ -97,6 +97,8 @@ export function SelectionOverlay({
 
   const handlePointerDown = (corner: Corner) => (event: PointerEvent) => {
     if (event.button !== 0) return
+    /* A pan drag starting on a handle belongs to the surface behind it. */
+    if (shownTool.value === 'pan') return
     event.preventDefault()
     event.stopPropagation()
     const origin = measure()

package/src/canvas/client/shell.css

@@ -217,6 +217,27 @@ code {
   cursor: grabbing;
 }
 
+/* Inset, so the panels on either side never clip the ring. */
+.surface:focus-visible {
+  outline-offset: -2px;
+}
+
+/*
+ * While panning, a frame takes no pointer, so a drag over one moves the view
+ * rather than picking an element, and the cursor reads the viewport's grab.
+ * The descendants are named too, since a selection handle sets its own
+ * pointer events and would otherwise take the drag as a resize. Nothing in
+ * the viewport starts a text selection while a pan drags across it.
+ */
+.surface[data-tool='pan'] .viewport {
+  user-select: none;
+}
+
+.surface[data-tool='pan'] .frame,
+.surface[data-tool='pan'] .frame * {
+  pointer-events: none;
+}
+
 .plane {
   position: absolute;
   top: 0;
@@ -239,8 +260,9 @@ code {
   align-items: center;
   /*
    * Sized against the zoom, so the label reads at one screen size at any zoom.
-   * A row too short for all three parts wraps the theme switch and then the
-   * size onto lines the clip hides, so the name keeps the row longest.
+   * A row too short for every part wraps the theme switch, then the editing
+   * badge, then the size onto lines the clip hides, so the name keeps the row
+   * longest.
    */
   flex-wrap: wrap;
   align-content: flex-start;
@@ -273,6 +295,40 @@ code {
   font-variant-numeric: tabular-nums;
 }
 
+/*
+ * Ahead of the theme switch, so a row too short for both wraps the switch
+ * first. The editing outline still marks the frame when the badge wraps too.
+ */
+.frame-editing {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(4px * var(--outline-scale, 1));
+  padding: calc(1px * var(--outline-scale, 1))
+    calc(6px * var(--outline-scale, 1));
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--color-success) 16%, transparent);
+  color: var(--color-success);
+  font-weight: 600;
+}
+
+.frame-editing:empty {
+  display: none;
+}
+
+.frame-editing::before {
+  content: '';
+  width: calc(6px * var(--outline-scale, 1));
+  height: calc(6px * var(--outline-scale, 1));
+  border-radius: 50%;
+  background: currentColor;
+}
+
+/* Dashed, so it reads apart from the solid accent of a selection. */
+.frame[data-editing='true'] iframe {
+  outline: calc(2px * var(--outline-scale, 1)) dashed var(--color-success);
+  outline-offset: calc(2px * var(--outline-scale, 1));
+}
+
 .frame-theme {
   margin-left: auto;
   padding: calc(1px * var(--outline-scale, 1))
@@ -425,6 +481,56 @@ code {
   background: var(--color-chrome);
 }
 
+.tools {
+  position: absolute;
+  top: var(--space-md);
+  left: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--space-xs);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-panel);
+  background: var(--color-chrome);
+}
+
+.tool-button {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-action);
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.tool-button svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.3;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.tool-button[data-tool='move'] svg {
+  fill: currentColor;
+}
+
+.tool-button:hover {
+  color: var(--color-text);
+  background: var(--color-surface);
+}
+
+.tool-button[aria-pressed='true'] {
+  color: var(--color-text);
+  background: var(--color-border);
+}
+
 .zoom {
   min-width: 3.5rem;
   text-align: center;