@erclx/canon 5.25.0 → 5.27.0

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

@@ -5,7 +5,25 @@
  */
 
 /** 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$/
 
@@ -28,6 +46,14 @@ export function displayValue(property: string, raw: string): string {
   const value = raw.trim()
   if (property === 'gap' && (value === '' || value === 'normal')) return ''
   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(' ')
@@ -36,6 +62,7 @@ export function displayValue(property: string, raw: string): string {
 export function toCssValue(property: string, typed: string): string {
   const value = typed.trim()
   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
   return value
     .split(/\s+/)
@@ -43,6 +70,21 @@ export function toCssValue(property: string, typed: string): string {
     .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
@@ -58,3 +100,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)}`
+}

package/src/canvas/client/inspector.tsx

@@ -1,15 +1,22 @@
 /** @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,
 } from '@/canvas/client/inspector/field'
 import { Section } from '@/canvas/client/inspector/section'
+import { SizeField } from '@/canvas/client/inspector/size-field'
 import {
   clampScrub,
   displayValue,
+  opacityToCss,
+  parseColor,
+  sharedRadius,
   toCssValue,
 } from '@/canvas/client/inspector/values'
 import {
@@ -64,26 +71,56 @@ 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 },
 ]
 
+/** 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 TYPE_FIELDS: readonly StyleField[] = [
   { label: 'size', glyph: 'Size', property: 'font-size' },
   { label: 'weight', glyph: 'Wt', property: 'font-weight' },
 ]
 
-const FILL_FIELDS: readonly StyleField[] = [
-  { label: 'color', glyph: 'Fg', property: 'color' },
-  {
-    label: 'background',
-    glyph: 'Bg',
-    property: 'background-color',
-    placeholder: 'None',
-  },
-]
+const FILL_FIELDS = [
+  { label: 'color', property: 'color' },
+  { label: 'background', property: 'background-color' },
+] as const
 
 function inlineValue(element: Element, property: string): string {
   return 'style' in element
@@ -127,8 +164,10 @@ function isRawInline(element: Element, property: string): boolean {
  * an edit starts from what the operator sees.
  */
 function currentValue(element: Element, property: string): string {
-  const inline = inlineValue(element, property)
-  if (inline) return inline
+  return inlineValue(element, property) || computedValue(element, property)
+}
+
+function computedValue(element: Element, property: string): string {
   return (
     element.ownerDocument.defaultView
       ?.getComputedStyle(element)
@@ -136,6 +175,19 @@ function currentValue(element: Element, property: string): string {
   )
 }
 
+/**
+ * The color a token paints in the frame, read off a probe rather than the
+ * token's text, since a token's value may itself be a `var()` or a mix.
+ */
+function tokenPaint(doc: Document, name: string): string {
+  const probe = doc.createElement('span')
+  probe.style.setProperty('color', `var(${name})`)
+  ;(doc.body ?? doc.documentElement).append(probe)
+  const painted = computedValue(probe, 'color')
+  probe.remove()
+  return painted
+}
+
 function holdsTextAlone(element: Element): boolean {
   const tag = element.tagName.toLowerCase()
   return element.children.length === 0 && !VOID.has(tag) && !isRawText(tag)
@@ -146,46 +198,6 @@ function elementName(element: Element): string {
   return [tag, ...element.classList].join('.')
 }
 
-interface TokenPickerProps {
-  readonly label: string
-  readonly initial: string
-  readonly isBusy: boolean
-  readonly onCommit: (value: string) => void
-}
-
-function TokenPicker({
-  label,
-  initial,
-  isBusy,
-  onCommit,
-}: TokenPickerProps): JSX.Element | null {
-  const colors =
-    tokens.value?.groups?.find((group) => group.kind === 'color')?.tokens ?? []
-  if (colors.length === 0) return null
-  return (
-    <select
-      class="token-picker"
-      aria-label={`${label} token`}
-      title="Pick a project token"
-      value={
-        colors.some((token) => initial === `var(${token.name})`) ? initial : ''
-      }
-      disabled={isBusy}
-      onChange={(event) => {
-        const { value } = event.currentTarget
-        if (value !== '' && value !== initial) onCommit(value)
-      }}
-    >
-      <option value="">Token</option>
-      {colors.map((token) => (
-        <option key={token.name} value={`var(${token.name})`}>
-          {token.name}
-        </option>
-      ))}
-    </select>
-  )
-}
-
 function ElementFields({
   node,
   doc,
@@ -203,9 +215,38 @@ 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 =
+    tokens.value?.groups
+      ?.find((group) => group.kind === 'color')
+      ?.tokens.map((token) => token.name) ?? []
 
   /**
    * Previews into the frame's own inline style and writes through the same
@@ -261,9 +302,125 @@ 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"
+        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="Flex">{FLEX_FIELDS.map(styleField)}</Section>
       <Section title="Typography">
         {TYPE_FIELDS.map(styleField)}
         {font ? (
@@ -272,25 +429,31 @@ function ElementFields({
       </Section>
       <Section title="Fill">
         {FILL_FIELDS.map((field) => {
-          const initial = currentValue(node, field.property)
+          const painted = computedValue(node, field.property)
+          const inline = inlineValue(node, field.property)
+          /*
+           * An inline value the picker cannot read stays as written. Reading
+           * the computed color in its place would show a token-following
+           * value as a literal, and an opacity edit would freeze it.
+           */
           return (
-            <div key={field.property} class="fill-row is-wide">
-              {styleField(field)}
-              {isRawInline(node, field.property) ? (
-                <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}
-              <TokenPicker
-                label={field.label}
-                initial={initial}
-                isBusy={isBusy}
-                onCommit={commit(field.property)}
-              />
-            </div>
+            <ColorField
+              key={field.property}
+              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)}
+            />
           )
         })}
       </Section>