@erclx/canon 5.23.0 → 5.25.0

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

@@ -0,0 +1,151 @@
+/*
+ * The inspector's own rules. Every value reads a chrome token, the same set
+ * shell.css reads. Each field's glyph sits inside its box, so two fields share
+ * a row without a label column eating the width.
+ */
+
+.inspector-section {
+  margin-top: var(--space-sm);
+}
+
+.inspector-section-head {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+}
+
+.inspector-section-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: var(--type-label-size);
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.inspector-section-action {
+  flex: none;
+  display: flex;
+  justify-content: flex-end;
+  min-width: 24px;
+}
+
+.field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-xs);
+  margin-top: var(--space-xs);
+}
+
+.glyph-field {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  min-height: 24px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-action);
+  background: var(--color-surface);
+}
+
+.glyph-field:hover {
+  border-color: var(--color-muted);
+}
+
+.glyph-field.is-readonly {
+  background: transparent;
+}
+
+.glyph-field.is-readonly:hover {
+  border-color: var(--color-border);
+}
+
+.is-wide {
+  grid-column: 1 / -1;
+}
+
+.glyph {
+  flex: none;
+  min-width: 1.75rem;
+  padding: 0 var(--space-xs);
+  color: var(--color-muted);
+  text-align: center;
+  user-select: none;
+}
+
+/* A number field's glyph scrubs its value, so a drag must not pan or scroll. */
+.glyph.is-scrub {
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.glyph-field-input {
+  flex: 1;
+  min-width: 0;
+  padding: 2px var(--space-xs) 2px 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.glyph-field-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.fill-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  min-width: 0;
+}
+
+.fill-row .glyph-field {
+  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);
+  cursor: help;
+}
+
+.text-excerpt {
+  margin: var(--space-xs) 0 0;
+  color: var(--color-text-body);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.saved {
+  margin-left: var(--space-sm);
+  color: var(--color-success);
+  font-weight: 400;
+}

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

@@ -0,0 +1,27 @@
+/** @jsxImportSource preact */
+import { type ComponentChildren, type JSX, toChildArray } from 'preact'
+
+interface SectionProps {
+  readonly title: string
+  /** Sits in a fixed lane right of the title, so adding one never moves it. */
+  readonly action?: ComponentChildren
+  readonly children?: ComponentChildren
+}
+
+/** A titled group of fields. With no fields it renders its header alone. */
+export function Section({
+  title,
+  action,
+  children,
+}: SectionProps): JSX.Element {
+  const fields = toChildArray(children)
+  return (
+    <section class="inspector-section">
+      <header class="inspector-section-head">
+        <h3 class="inspector-section-title">{title}</h3>
+        <span class="inspector-section-action">{action}</span>
+      </header>
+      {fields.length > 0 ? <div class="field-grid">{fields}</div> : null}
+    </section>
+  )
+}

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

@@ -0,0 +1,60 @@
+/**
+ * How the inspector reads a computed value and writes a typed one back. A
+ * field shows the formatted form, and only a value the operator changed goes
+ * back through `toCssValue`, so rounding never writes a value nobody typed.
+ */
+
+/** Properties whose bare numbers are pixel lengths. */
+const LENGTHS = new Set(['width', 'height', 'padding', 'gap', 'font-size'])
+
+const PX = /^(-?\d*\.?\d+)px$/
+
+function formatPx(token: string): string {
+  const match = token.match(PX)
+  if (!match) return token
+  const value = Number(match[1])
+  return String(
+    Math.abs(value) < 10 ? Math.round(value * 10) / 10 : Math.round(value),
+  )
+}
+
+/** A color that paints nothing, which the panel reads as no fill. */
+export function isNoFill(value: string): boolean {
+  const normalized = value.trim().toLowerCase().replace(/\s+/g, '')
+  return normalized === 'transparent' || normalized === 'rgba(0,0,0,0)'
+}
+
+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 (value === 'auto') return 'Auto'
+  if (value === 'normal') return 'Normal'
+  return value.split(/\s+/).map(formatPx).join(' ')
+}
+
+export function toCssValue(property: string, typed: string): string {
+  const value = typed.trim()
+  if (value === 'Auto' || value === 'Normal') return value.toLowerCase()
+  if (!LENGTHS.has(property)) return value
+  return value
+    .split(/\s+/)
+    .map((token) => (/^-?\d*\.?\d+$/.test(token) ? `${token}px` : token))
+    .join(' ')
+}
+
+/**
+ * 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
+ * weight past 1000 would reach the file and the browser would drop it there.
+ */
+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)
+  return value
+}
+
+/** 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,6 +1,17 @@
 /** @jsxImportSource preact */
 import type { JSX } from 'preact'
 import { addressOf, elementAt, excerpt, isRawText } from '@/canvas/address'
+import {
+  Field,
+  ReadOnlyField,
+  type Scrub,
+} from '@/canvas/client/inspector/field'
+import { Section } from '@/canvas/client/inspector/section'
+import {
+  clampScrub,
+  displayValue,
+  toCssValue,
+} from '@/canvas/client/inspector/values'
 import {
   currentPage,
   editElement,
@@ -16,8 +27,7 @@ import {
   tokens,
   writeError,
 } from '@/canvas/client/state'
-
-const FIELDS = ['x', 'y', 'width', 'height'] as const
+import '@/canvas/client/inspector/fields.css'
 
 /** Elements the parser never gives content, so they hold no text to edit. */
 const VOID = new Set([
@@ -37,43 +47,79 @@ const VOID = new Set([
 ])
 
 interface StyleField {
+  /** The full word, which names the field. */
   readonly label: string
+  readonly glyph: string
   readonly property: string
-  readonly isColor?: boolean
+  readonly isWide?: boolean
+  readonly placeholder?: string
 }
 
 /**
- * The basic set, in the order the panel lists it. The writer refuses any
- * property outside it, so this list and the writer's have to agree.
+ * The basic set, grouped as the panel lists it. The writer refuses any
+ * property outside it, so these lists and the writer's have to agree.
  */
-const STYLE_FIELDS: readonly StyleField[] = [
-  { label: 'color', property: 'color', isColor: true },
-  { label: 'background', property: 'background-color', isColor: true },
-  { label: 'size', property: 'font-size' },
-  { label: 'weight', property: 'font-weight' },
-  { label: 'width', property: 'width' },
-  { label: 'height', property: 'height' },
-  { label: 'padding', property: 'padding' },
-  { label: 'gap', property: 'gap' },
-  { label: 'direction', property: 'flex-direction' },
+const SIZE_FIELDS: readonly StyleField[] = [
+  { label: 'width', glyph: 'W', property: 'width' },
+  { label: 'height', glyph: 'H', property: 'height' },
+]
+
+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' },
+]
+
+const FILL_FIELDS: readonly StyleField[] = [
+  { label: 'color', glyph: 'Fg', property: 'color' },
+  {
+    label: 'background',
+    glyph: 'Bg',
+    property: 'background-color',
+    placeholder: 'None',
+  },
 ]
 
-interface Row {
-  readonly name: string
-  readonly value: string
+function inlineValue(element: Element, property: string): string {
+  return 'style' in element
+    ? (element as HTMLElement).style.getPropertyValue(property)
+    : ''
+}
+
+/** Values that defer to something else, so they follow the theme as it does. */
+const DEFERRING = new Set([
+  'currentcolor',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'revert-layer',
+])
+
+/**
+ * A color that stays put when the theme changes: one naming no token anywhere
+ * in it and deferring to nothing, so `color-mix()` over a `var()` is not raw.
+ */
+export function isRawValue(value: string): boolean {
+  const normalized = value.trim().toLowerCase()
+  return (
+    normalized !== '' &&
+    !normalized.includes('var(') &&
+    !DEFERRING.has(normalized)
+  )
 }
 
-/** Where the element sits in its frame, which the panel shows and never edits. */
-function positionRows(element: Element): Row[] {
-  const rect = element.getBoundingClientRect()
-  const font = element.ownerDocument.defaultView
-    ?.getComputedStyle(element)
-    .getPropertyValue('font-family')
-  return [
-    { name: 'x', value: String(Math.round(rect.left)) },
-    { name: 'y', value: String(Math.round(rect.top)) },
-    ...(font ? [{ name: 'font', value: font }] : []),
-  ]
+/**
+ * Inherited and stylesheet values are not the element's own, so only an
+ * inline value counts.
+ */
+function isRawInline(element: Element, property: string): boolean {
+  return isRawValue(inlineValue(element, property))
 }
 
 /**
@@ -81,10 +127,7 @@ function positionRows(element: Element): Row[] {
  * an edit starts from what the operator sees.
  */
 function currentValue(element: Element, property: string): string {
-  const inline =
-    'style' in element
-      ? (element as HTMLElement).style.getPropertyValue(property)
-      : ''
+  const inline = inlineValue(element, property)
   if (inline) return inline
   return (
     element.ownerDocument.defaultView
@@ -103,44 +146,19 @@ function elementName(element: Element): string {
   return [tag, ...element.classList].join('.')
 }
 
-interface FieldProps {
+interface TokenPickerProps {
   readonly label: string
   readonly initial: string
   readonly isBusy: boolean
   readonly onCommit: (value: string) => void
 }
 
-/**
- * Commits on change, which a text input fires on Enter or on leaving it, and
- * sends nothing when the value is what it started at. Escape puts it back.
- */
-function Field({ label, initial, isBusy, onCommit }: FieldProps): JSX.Element {
-  return (
-    <input
-      class="field"
-      type="text"
-      aria-label={label}
-      title={initial}
-      defaultValue={initial}
-      disabled={isBusy}
-      spellcheck={false}
-      onChange={(event) => {
-        const value = event.currentTarget.value.trim()
-        if (value !== initial.trim()) onCommit(value)
-      }}
-      onKeyDown={(event) => {
-        if (event.key === 'Escape') event.currentTarget.value = initial
-      }}
-    />
-  )
-}
-
 function TokenPicker({
   label,
   initial,
   isBusy,
   onCommit,
-}: FieldProps): JSX.Element | null {
+}: TokenPickerProps): JSX.Element | null {
   const colors =
     tokens.value?.groups?.find((group) => group.kind === 'color')?.tokens ?? []
   if (colors.length === 0) return null
@@ -185,57 +203,114 @@ function ElementFields({
   const commit = (property: string) => (value: string) => {
     if (address) void editElement(frameRef, key, address, property, value)
   }
-  const isTextOnly = holdsTextAlone(node)
+  const rect = node.getBoundingClientRect()
+  const font = currentValue(node, 'font-family')
   const text = node.textContent ?? ''
 
+  /**
+   * 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 => ({
+    clamp: (value) => clampScrub(property, value),
+    begin: () => {
+      const original = inlineValue(node, property)
+      const style = (node as HTMLElement).style
+      return {
+        preview: (shown) =>
+          style.setProperty(property, toCssValue(property, shown)),
+        restore: () =>
+          original
+            ? style.setProperty(property, original)
+            : style.removeProperty(property),
+        commit: (shown) => {
+          if (frameDocuments.value.get(key) !== doc || !node.isConnected) return
+          commit(property)(toCssValue(property, shown))
+        },
+      }
+    },
+  })
+
+  const styleField = (field: StyleField): JSX.Element => (
+    <Field
+      key={field.property}
+      label={field.label}
+      glyph={field.glyph}
+      initial={displayValue(field.property, currentValue(node, field.property))}
+      isBusy={isBusy}
+      isWide={field.isWide}
+      placeholder={field.placeholder}
+      onCommit={(typed) =>
+        commit(field.property)(toCssValue(field.property, typed))
+      }
+      scrub={'style' in node ? scrubOf(field.property) : undefined}
+    />
+  )
+
   return (
-    <dl class="box styles">
-      {positionRows(node).map((row) => (
-        <div key={row.name} class="box-row">
-          <dt>{row.name}</dt>
-          <dd title={row.value}>{row.value}</dd>
-        </div>
-      ))}
-      <div class="box-row">
-        <dt>text</dt>
-        <dd title={excerpt(text)}>
-          {isTextOnly ? (
-            <Field
-              label="text"
-              initial={text}
-              isBusy={isBusy}
-              onCommit={commit('text')}
-            />
-          ) : (
-            excerpt(text)
-          )}
-        </dd>
-      </div>
-      {STYLE_FIELDS.map((field) => {
-        const initial = currentValue(node, field.property)
-        return (
-          <div key={field.property} class="box-row">
-            <dt>{field.label}</dt>
-            <dd class="field-cell">
-              <Field
+    <>
+      <Section title="Layout">
+        <ReadOnlyField
+          label="x"
+          glyph="X"
+          value={String(Math.round(rect.left))}
+        />
+        <ReadOnlyField
+          label="y"
+          glyph="Y"
+          value={String(Math.round(rect.top))}
+        />
+        {SIZE_FIELDS.map(styleField)}
+      </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 />
+        ) : null}
+      </Section>
+      <Section title="Fill">
+        {FILL_FIELDS.map((field) => {
+          const initial = currentValue(node, field.property)
+          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)}
               />
-              {field.isColor ? (
-                <TokenPicker
-                  label={field.label}
-                  initial={initial}
-                  isBusy={isBusy}
-                  onCommit={commit(field.property)}
-                />
-              ) : null}
-            </dd>
-          </div>
-        )
-      })}
-    </dl>
+            </div>
+          )
+        })}
+      </Section>
+      <Section title="Text">
+        {holdsTextAlone(node) ? (
+          <Field
+            label="text"
+            glyph="T"
+            initial={text}
+            isBusy={isBusy}
+            isWide
+            onCommit={commit('text')}
+          />
+        ) : (
+          <p class="text-excerpt is-wide" title={excerpt(text)}>
+            {excerpt(text)}
+          </p>
+        )}
+      </Section>
+    </>
   )
 }
 
@@ -300,14 +375,20 @@ export function Inspector(): JSX.Element {
             <p class="detail" title={frame.name}>
               {frame.name}
             </p>
-            <dl class="box">
-              {FIELDS.map((field) => (
-                <div key={field} class="box-row">
-                  <dt>{field}</dt>
-                  <dd>{frame[field]}</dd>
-                </div>
-              ))}
-            </dl>
+            <div class="field-grid">
+              <ReadOnlyField label="x" glyph="X" value={String(frame.x)} />
+              <ReadOnlyField label="y" glyph="Y" value={String(frame.y)} />
+              <ReadOnlyField
+                label="width"
+                glyph="W"
+                value={String(frame.width)}
+              />
+              <ReadOnlyField
+                label="height"
+                glyph="H"
+                value={String(frame.height)}
+              />
+            </div>
           </>
         ) : (
           <p class="empty">Select a frame to see its box</p>