@erclx/canon 5.24.0 → 5.25.0

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

@@ -0,0 +1,200 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { useRef } from 'preact/hooks'
+import { scrubStep } from '@/canvas/client/inspector/values'
+
+/**
+ * One drag of a number field's glyph. Each call takes the value as the field
+ * shows it. Only `commit` writes, so a drag posts one edit at most.
+ */
+export interface ScrubSession {
+  readonly preview: (value: string) => void
+  readonly restore: () => void
+  readonly commit: (value: string) => void
+}
+
+/**
+ * Opens a session at press, so what `restore` returns to is read before any
+ * preview, however often the panel renders during the drag.
+ */
+export interface Scrub {
+  readonly begin: () => ScrubSession
+  /** Holds a scrubbed number inside what the property accepts. */
+  readonly clamp: (value: number) => number
+}
+
+interface FieldProps {
+  /** The full word, which names the input for assistive technology. */
+  readonly label: string
+  /** The short mark drawn inside the field, hidden from assistive technology. */
+  readonly glyph: string
+  readonly initial: string
+  readonly isBusy: boolean
+  readonly isWide?: boolean
+  readonly placeholder?: string
+  readonly onCommit: (value: string) => void
+  /** Makes the glyph a drag handle. Typing stays the keyboard path. */
+  readonly scrub?: Scrub
+}
+
+const NUMBER = /^-?\d*\.?\d+$/
+
+interface Drag {
+  readonly pointerId: number
+  /** What the input held at press, which a cancel puts back. */
+  readonly typed: string
+  /** The number the drag started from, an empty field's placeholder included. */
+  readonly start: string
+  readonly session: ScrubSession
+  lastX: number
+  value: number
+}
+
+function fieldClass(isWide: boolean | undefined, modifier?: string): string {
+  return ['glyph-field', isWide ? 'is-wide' : '', modifier ?? '']
+    .filter(Boolean)
+    .join(' ')
+}
+
+/**
+ * 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.
+ */
+export function Field({
+  label,
+  glyph,
+  initial,
+  isBusy,
+  isWide,
+  placeholder,
+  onCommit,
+  scrub,
+}: FieldProps): JSX.Element {
+  const input = useRef<HTMLInputElement>(null)
+  const handle = useRef<HTMLSpanElement>(null)
+  const drag = useRef<Drag | null>(null)
+
+  const end = (pointerId: number): Drag | undefined => {
+    const held = drag.current
+    if (!held || held.pointerId !== pointerId) return undefined
+    drag.current = null
+    return held
+  }
+
+  /* An empty field scrubs from the number its placeholder shows. */
+  const scrubFrom = (value: string): string =>
+    value.trim() || placeholder?.trim() || ''
+  const isScrubbable = scrub !== undefined && NUMBER.test(scrubFrom(initial))
+
+  const handlers = isScrubbable
+    ? {
+        onPointerDown: (event: PointerEvent) => {
+          const typed = input.current?.value ?? ''
+          const start = scrubFrom(typed)
+          if (isBusy || !NUMBER.test(start)) return
+          event.preventDefault()
+          /*
+           * Capture keeps the release coming here when the pointer leaves the
+           * glyph, the panel, or crosses into a frame's own document.
+           */
+          try {
+            handle.current?.setPointerCapture(event.pointerId)
+          } catch {
+            /* A pointer the browser no longer tracks ends on cancel instead. */
+          }
+          drag.current = {
+            pointerId: event.pointerId,
+            typed,
+            start,
+            session: scrub.begin(),
+            lastX: event.clientX,
+            value: Number(start),
+          }
+        },
+        onPointerMove: (event: PointerEvent) => {
+          const held = drag.current
+          if (!held || held.pointerId !== event.pointerId) return
+          const moved = event.clientX - held.lastX
+          held.lastX = event.clientX
+          held.value = scrub.clamp(
+            Math.round((held.value + moved * scrubStep(event.shiftKey)) * 10) /
+              10,
+          )
+          const shown = String(held.value)
+          if (input.current) input.current.value = shown
+          held.session.preview(shown)
+        },
+        onPointerUp: (event: PointerEvent) => {
+          const held = end(event.pointerId)
+          if (!held) return
+          const shown = String(held.value)
+          if (shown === held.start) held.session.restore()
+          else held.session.commit(shown)
+        },
+        onPointerCancel: (event: PointerEvent) => {
+          const held = end(event.pointerId)
+          if (!held) return
+          if (input.current) input.current.value = held.typed
+          held.session.restore()
+        },
+      }
+    : {}
+
+  return (
+    <div class={fieldClass(isWide)}>
+      <span
+        ref={handle}
+        class={isScrubbable ? 'glyph is-scrub' : 'glyph'}
+        aria-hidden="true"
+        title={label}
+        {...handlers}
+      >
+        {glyph}
+      </span>
+      <input
+        ref={input}
+        class="glyph-field-input"
+        type="text"
+        aria-label={label}
+        title={initial}
+        defaultValue={initial}
+        placeholder={placeholder}
+        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
+        }}
+      />
+    </div>
+  )
+}
+
+interface ReadOnlyFieldProps {
+  readonly label: string
+  readonly glyph: string
+  readonly value: string
+  readonly isWide?: boolean
+}
+
+/** A value the panel shows and nothing here writes, drawn like a field. */
+export function ReadOnlyField({
+  label,
+  glyph,
+  value,
+  isWide,
+}: ReadOnlyFieldProps): JSX.Element {
+  return (
+    <div class={fieldClass(isWide, 'is-readonly')}>
+      <span class="glyph" aria-hidden="true" title={label}>
+        {glyph}
+      </span>
+      <output class="glyph-field-input" aria-label={label} title={value}>
+        {value}
+      </output>
+    </div>
+  )
+}

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
+}