@erclx/canon 5.26.0 → 5.28.0

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

@@ -4,10 +4,33 @@
  * 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', 'height', 'padding', 'gap', 'font-size'])
+const LENGTHS = new Set([
+  'width',
+  'height',
+  'padding',
+  'gap',
+  'font-size',
+  'border-radius',
+  'border-top-left-radius',
+  'border-top-right-radius',
+  'border-bottom-right-radius',
+  'border-bottom-left-radius',
+])
+
+/** Properties a size mode writes, each mode by the name the field shows. */
+const SIZES = new Set(['width', 'height'])
+const SIZE_MODES: Readonly<Record<string, string>> = {
+  Fill: '100%',
+  Fit: 'fit-content',
+}
 
 const PX = /^(-?\d*\.?\d+)px$/
+const EM = /^(-?\d*\.?\d+)em$/
+const NUMBER = /^-?\d*\.?\d+$/
 
 function formatPx(token: string): string {
   const match = token.match(PX)
@@ -27,7 +50,20 @@ 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)}%`
+  if (SIZES.has(property)) {
+    const mode = Object.keys(SIZE_MODES).find(
+      (name) => SIZE_MODES[name] === value,
+    )
+    if (mode) return mode
+  }
   if (value === 'auto') return 'Auto'
   if (value === 'normal') return 'Normal'
   return value.split(/\s+/).map(formatPx).join(' ')
@@ -35,14 +71,34 @@ 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 (!LENGTHS.has(property)) return value
+  if (SIZES.has(property) && SIZE_MODES[value]) return SIZE_MODES[value]
+  if (!LENGTHS.has(property) && !SIGNED_LENGTHS.has(property)) return value
   return value
     .split(/\s+/)
     .map((token) => (/^-?\d*\.?\d+$/.test(token) ? `${token}px` : token))
     .join(' ')
 }
 
+/** A typed opacity percent as the fraction CSS takes, refused outside 0 to 100. */
+export function opacityToCss(typed: string): string | undefined {
+  const percent = readOpacity(typed)
+  return percent === undefined ? undefined : String(percent / 100)
+}
+
+/**
+ * The radius all four corners share, read in the order the longhands run,
+ * or undefined where any corner differs and the panel shows each one.
+ */
+export function sharedRadius(corners: readonly string[]): string | undefined {
+  const [first] = corners
+  return corners.every((corner) => corner === first) ? first : undefined
+}
+
 /**
  * Holds a scrubbed number inside what the property accepts. The writer takes
  * any declaration that does not break the rule, so a negative length or a
@@ -50,10 +106,68 @@ export function toCssValue(property: string, typed: string): string {
  */
 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

@@ -1,18 +1,30 @@
 /** @jsxImportSource preact */
 import type { JSX } from 'preact'
+import { useState } from 'preact/hooks'
 import { addressOf, elementAt, excerpt, isRawText } from '@/canvas/address'
+import { AlignGrid } from '@/canvas/client/inspector/align-grid'
 import { ColorField } from '@/canvas/client/inspector/color-field'
 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,
@@ -29,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. */
@@ -66,17 +79,67 @@ const SIZE_FIELDS: readonly StyleField[] = [
   { label: 'height', glyph: 'H', property: 'height' },
 ]
 
+const DIRECTION_FIELD: StyleField = {
+  label: 'direction',
+  glyph: 'Dir',
+  property: 'flex-direction',
+}
+
 const FLEX_FIELDS: readonly StyleField[] = [
-  { label: 'direction', glyph: 'Dir', property: 'flex-direction' },
   { label: 'gap', glyph: 'Gap', property: 'gap', placeholder: '0' },
-  { label: 'padding', glyph: 'Pad', property: 'padding', isWide: true },
 ]
 
-const TYPE_FIELDS: readonly StyleField[] = [
-  { label: 'size', glyph: 'Size', property: 'font-size' },
-  { label: 'weight', glyph: 'Wt', property: 'font-weight' },
+/** Padding applies to any box, so it sits in Layout rather than Flex. */
+const PADDING_FIELD: StyleField = {
+  label: 'padding',
+  glyph: 'Pad',
+  property: 'padding',
+  isWide: true,
+}
+
+/** The corners in the order the radius shorthand lists them. */
+const CORNER_FIELDS: readonly StyleField[] = [
+  { label: 'top left radius', glyph: 'TL', property: 'border-top-left-radius' },
+  {
+    label: 'top right radius',
+    glyph: 'TR',
+    property: 'border-top-right-radius',
+  },
+  {
+    label: 'bottom right radius',
+    glyph: 'BR',
+    property: 'border-bottom-right-radius',
+  },
+  {
+    label: 'bottom left radius',
+    glyph: 'BL',
+    property: 'border-bottom-left-radius',
+  },
+]
+
+const FLEX_DISPLAYS = new Set(['flex', 'inline-flex'])
+const GRID_DISPLAYS = new Set(['grid', 'inline-grid'])
+
+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' },
@@ -175,21 +238,55 @@ function ElementFields({
   const commit = (property: string) => (value: string) => {
     if (address) void editElement(frameRef, key, address, property, value)
   }
+  /*
+   * 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.
+   */
+  const commitAll = async (
+    changes: readonly (readonly [string, string])[],
+  ): Promise<void> => {
+    let current = address
+    for (const [property, value] of changes) {
+      if (!current) return
+      const written = await editElement(frameRef, key, current, property, value)
+      if (!written) return
+      if (written.hash) current = { ...current, hash: written.hash }
+    }
+  }
+  const corners = CORNER_FIELDS.map((field) =>
+    currentValue(node, field.property).trim(),
+  )
+  const radius = sharedRadius(corners)
+  const [isPerCorner, setPerCorner] = useState(radius === undefined)
+  const display = computedValue(node, 'display').trim()
+  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
@@ -237,15 +334,209 @@ function ElementFields({
           glyph="Y"
           value={String(Math.round(rect.top))}
         />
-        {SIZE_FIELDS.map(styleField)}
+        {SIZE_FIELDS.map((field) => (
+          <SizeField
+            key={field.property}
+            label={field.label}
+            glyph={field.glyph}
+            initial={displayValue(
+              field.property,
+              currentValue(node, field.property),
+            )}
+            isBusy={isBusy}
+            onCommit={(typed) =>
+              commit(field.property)(toCssValue(field.property, typed))
+            }
+            scrub={'style' in node ? scrubOf(field.property) : undefined}
+          />
+        ))}
+        {styleField(PADDING_FIELD)}
       </Section>
-      <Section title="Flex">{FLEX_FIELDS.map(styleField)}</Section>
-      <Section title="Typography">
-        {TYPE_FIELDS.map(styleField)}
-        {font ? (
-          <ReadOnlyField label="font" glyph="Font" value={font} isWide />
+      <Section
+        title="Flex"
+        action={
+          isFlex || GRID_DISPLAYS.has(display) ? null : (
+            <button
+              type="button"
+              class="section-icon"
+              aria-label="Add flex layout"
+              title="Add flex layout"
+              disabled={isBusy}
+              onClick={() => commit('display')('flex')}
+            >
+              <svg viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M8 3.5v9M3.5 8h9" />
+              </svg>
+            </button>
+          )
+        }
+      >
+        {isFlex ? (
+          <>
+            <div class="flex-layout is-wide">
+              <AlignGrid
+                direction={computedValue(node, 'flex-direction').trim()}
+                justifyContent={computedValue(node, 'justify-content')}
+                alignItems={computedValue(node, 'align-items')}
+                isBusy={isBusy}
+                onPick={(alignment) =>
+                  void commitAll([
+                    ['justify-content', alignment.justifyContent],
+                    ['align-items', alignment.alignItems],
+                  ])
+                }
+              />
+              <div class="flex-layout-side">
+                {styleField(DIRECTION_FIELD)}
+                <button
+                  type="button"
+                  class="section-icon"
+                  aria-label="Wrap"
+                  title="Wrap"
+                  aria-pressed={isWrapped}
+                  disabled={isBusy}
+                  onClick={() =>
+                    commit('flex-wrap')(isWrapped ? 'nowrap' : 'wrap')
+                  }
+                >
+                  <svg viewBox="0 0 16 16" aria-hidden="true">
+                    <path d="M2.5 4.5h9a2.5 2.5 0 0 1 0 5h-6M7.5 7.5l-2 2 2 2M2.5 12.5h1" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+            {FLEX_FIELDS.map(styleField)}
+          </>
         ) : null}
       </Section>
+      <Section
+        title="Appearance"
+        action={
+          <button
+            type="button"
+            class="section-icon"
+            aria-label="Per-corner radius"
+            title="Per-corner radius"
+            aria-pressed={isPerCorner}
+            onClick={() => setPerCorner(!isPerCorner)}
+          >
+            <svg viewBox="0 0 16 16" aria-hidden="true">
+              <path d="M3 6.5V5a2 2 0 0 1 2-2h1.5M9.5 3H11a2 2 0 0 1 2 2v1.5M13 9.5V11a2 2 0 0 1-2 2H9.5M6.5 13H5a2 2 0 0 1-2-2V9.5" />
+            </svg>
+          </button>
+        }
+      >
+        <Field
+          label="opacity"
+          glyph="Op"
+          initial={displayValue('opacity', computedValue(node, 'opacity'))}
+          isBusy={isBusy}
+          isWide={isPerCorner}
+          onCommit={(typed) => {
+            const value = opacityToCss(typed)
+            if (value !== undefined) commit('opacity')(value)
+          }}
+        />
+        {isPerCorner ? (
+          CORNER_FIELDS.map(styleField)
+        ) : (
+          <Field
+            label="radius"
+            glyph="R"
+            initial={displayValue('border-radius', radius ?? '')}
+            isBusy={isBusy}
+            placeholder="0"
+            onCommit={(typed) =>
+              commit('border-radius')(toCssValue('border-radius', typed))
+            }
+            scrub={'style' in node ? scrubOf('border-radius') : undefined}
+          />
+        )}
+      </Section>
+      <Section title="Typography">
+        <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) => {
           const painted = computedValue(node, field.property)
@@ -261,11 +552,16 @@ function ElementFields({
               label={field.label}
               color={parseColor(inline || painted)}
               text={inline || painted}
+              inline={inline}
               painted={painted}
+              owner={`${key}:${address?.index ?? -1}:${field.property}`}
               tokens={colorTokens}
               paint={(name) => tokenPaint(doc, name)}
               isRaw={isRawInline(node, field.property)}
               isBusy={isBusy}
+              preview={
+                'style' in node ? scrubOf(field.property).begin : undefined
+              }
               onCommit={commit(field.property)}
             />
           )

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()]
+}