@erclx/canon 5.24.0 → 5.26.0

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

@@ -0,0 +1,292 @@
+/*
+ * 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;
+}
+
+.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;
+}
+
+/*
+ * A color is one field: a swatch leading in the glyph's lane, the hex, and the
+ * opacity right-aligned. The picker opens in the flow under it, so it can never
+ * reach past the panel's edge or scroll it sideways.
+ */
+.color-field {
+  min-width: 0;
+}
+
+.swatch {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 1.75rem;
+  min-height: 22px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.swatch:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/*
+ * The paint is the top layer over a checker, so an opacity below full reads
+ * as one. `--paint` carries the color, since a background color sits under
+ * every image layer and the checker would cover it.
+ */
+.swatch-paint {
+  --paint: transparent;
+  flex: none;
+  width: 12px;
+  height: 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 2px;
+  background-image:
+    linear-gradient(var(--paint), var(--paint)),
+    linear-gradient(45deg, var(--color-border) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--color-border) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--color-border) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--color-border) 75%);
+  background-size:
+    auto,
+    6px 6px,
+    6px 6px,
+    6px 6px,
+    6px 6px;
+  background-position:
+    0 0,
+    0 0,
+    0 3px,
+    3px -3px,
+    -3px 0;
+}
+
+.swatch:hover .swatch-paint {
+  border-color: var(--color-muted);
+}
+
+/* No fill draws a slash rather than a color. */
+.swatch.is-none .swatch-paint {
+  background-image: linear-gradient(
+    to top right,
+    transparent calc(50% - 1px),
+    var(--color-muted) calc(50% - 1px),
+    var(--color-muted) calc(50% + 1px),
+    transparent calc(50% + 1px)
+  );
+  background-size: auto;
+}
+
+.color-field .glyph-field-input {
+  text-transform: uppercase;
+}
+
+/* Only a hex reads in capitals. A value the picker cannot read stays as written. */
+.color-field .glyph-field-input::placeholder,
+.color-field .glyph-field-input.is-text {
+  text-transform: none;
+}
+
+/* A token name is a name, so it keeps its own case. */
+.color-field .glyph-field-input.is-token {
+  flex: 0 1 auto;
+  margin-right: auto;
+  padding: 0 var(--space-xs);
+  border-radius: var(--radius-action);
+  background: var(--color-background);
+  text-transform: none;
+}
+
+.color-opacity {
+  flex: none;
+  width: 2.25rem;
+  padding: 2px 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.color-opacity:disabled {
+  color: var(--color-muted);
+  cursor: not-allowed;
+}
+
+.color-percent {
+  flex: none;
+  padding-right: var(--space-xs);
+  color: var(--color-muted);
+  user-select: none;
+}
+
+.color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  margin-top: var(--space-xs);
+  padding: var(--space-xs);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-action);
+  background: var(--color-chrome);
+}
+
+.token-list {
+  max-height: 12rem;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.token-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  min-height: 24px;
+  padding: 0 var(--space-xs);
+  border-radius: var(--radius-action);
+  cursor: pointer;
+}
+
+.token-option:hover,
+.token-option.is-active {
+  background: var(--color-surface);
+}
+
+.token-option[aria-selected='true'] .token-name {
+  color: var(--color-accent);
+}
+
+.token-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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,183 @@
+/**
+ * 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
+}
+
+/** 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)}`
+}