@erclx/canon 5.26.0 → 5.28.0

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

@@ -128,10 +128,164 @@
   font-weight: 400;
 }
 
+/* An icon in a section's header lane or beside a field, square at row height. */
+.section-icon {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-action);
+  background: transparent;
+  color: var(--color-muted);
+  cursor: pointer;
+}
+
+.section-icon:hover,
+.section-icon[aria-pressed='true'] {
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.section-icon:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.section-icon svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* The alignment grid on the left, the direction and wrap stacked beside it. */
+.flex-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-xs);
+  align-items: start;
+}
+
+.flex-layout-side {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  min-width: 0;
+}
+
+.flex-layout-side .glyph-field {
+  flex: 1;
+}
+
+.align-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 24px);
+  padding: 2px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-action);
+  background: var(--color-surface);
+}
+
+.align-cell {
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-action);
+  background: transparent;
+  color: var(--color-muted);
+  cursor: pointer;
+}
+
+.align-cell:hover {
+  color: var(--color-text);
+}
+
+.align-cell:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.align-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.align-cell[aria-checked='true'] {
+  color: var(--color-accent);
+}
+
+.align-cell[aria-checked='true'] .align-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+}
+
+/*
+ * A size's mode menu trails its number. The select is transparent over the
+ * chevron, so the platform's own list opens and the field keeps one height.
+ */
+.size-mode {
+  position: relative;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 22px;
+  border-radius: var(--radius-action);
+  color: var(--color-muted);
+}
+
+.size-mode:hover,
+.size-mode:focus-within {
+  color: var(--color-text);
+  background: var(--color-chrome);
+}
+
+.size-mode-select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.size-mode-select:disabled {
+  cursor: not-allowed;
+}
+
+.size-mode:has(.size-mode-select:disabled) {
+  opacity: 0.5;
+}
+
+/* The select is invisible, so the project ring draws on the lane holding it. */
+.size-mode:has(.size-mode-select:focus-visible) {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 0;
+}
+
+.size-mode-chevron {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+
 /*
  * 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.
+ * opacity right-aligned, with the tokens and the eyedropper trailing the row.
  */
 .color-field {
   min-width: 0;
@@ -246,15 +400,218 @@
   user-select: none;
 }
 
-.color-picker {
+/*
+ * The picker and the token list float beside the panel, in the top layer
+ * where the browser has one. The panel scrolls and clips, so neither sits in
+ * its flow. The script places each at fixed coordinates inside the window, and
+ * the caps below hold a window too small for the whole picker.
+ */
+.color-popover {
+  position: fixed;
+  inset: auto;
+  z-index: 10;
+  max-width: calc(100vw - 16px);
+  max-height: calc(100vh - 16px);
+  margin: 0;
+  padding: var(--space-sm);
+  overflow: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-panel);
+  background: var(--color-chrome);
+  color: var(--color-text);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
+}
+
+.color-popover.is-tokens {
+  width: 14rem;
+  padding: var(--space-xs);
+}
+
+.picker {
+  --picker-hue: red;
+  --picker-solid: transparent;
+  display: grid;
+  grid-template-columns: 14rem 14px 14px 13rem;
+  gap: var(--space-sm);
+  align-items: stretch;
+}
+
+/*
+ * The area draws white to the hue left to right, then black over it bottom
+ * to top, so a point reads as saturation across and brightness up.
+ */
+.picker-area {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: var(--radius-action);
+  background:
+    linear-gradient(to top, #000, transparent),
+    linear-gradient(to right, #fff, var(--picker-hue));
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.picker-thumb {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.picker-slider {
+  appearance: none;
+  width: 14px;
+  height: 100%;
+  margin: 0;
+  border-radius: var(--radius-action);
+  writing-mode: vertical-lr;
+  cursor: pointer;
+}
+
+/* Hue runs red at the top through the wheel and back to red at the foot. */
+.picker-hue {
+  background: linear-gradient(
+    to bottom,
+    #f00,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00
+  );
+}
+
+/* Alpha runs opaque at the top to clear at the foot, over a checker. */
+.picker-alpha {
+  direction: rtl;
+  background-image:
+    linear-gradient(to bottom, var(--picker-solid), transparent),
+    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,
+    8px 8px,
+    8px 8px,
+    8px 8px,
+    8px 8px;
+  background-position:
+    0 0,
+    0 0,
+    0 4px,
+    4px -4px,
+    -4px 0;
+}
+
+.picker-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 14px;
+  height: 6px;
+  border: 2px solid #fff;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5);
+}
+
+.picker-slider::-moz-range-thumb {
+  width: 10px;
+  height: 2px;
+  border: 2px solid #fff;
+  border-radius: 2px;
+  background: transparent;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5);
+}
+
+.picker-side {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
-  margin-top: var(--space-xs);
-  padding: var(--space-xs);
+  min-width: 0;
+}
+
+.picker-compare {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  height: 3.5rem;
+  overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-action);
-  background: var(--color-chrome);
+}
+
+/* Each half paints over the checker, so an alpha below full reads as one. */
+.picker-previous,
+.picker-new {
+  --paint: transparent;
+  padding: 0;
+  border: 0;
+  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,
+    8px 8px,
+    8px 8px,
+    8px 8px,
+    8px 8px;
+  background-position:
+    0 0,
+    0 0,
+    0 4px,
+    4px -4px,
+    -4px 0;
+}
+
+.picker-previous {
+  cursor: pointer;
+}
+
+.picker-compare-labels {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
+.picker-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  overflow: hidden;
+  border-radius: var(--radius-action);
+}
+
+.picker-channel {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  min-width: 0;
+}
+
+.picker-number {
+  min-width: 0;
+  min-height: 24px;
+  padding: 2px var(--space-xs);
+  border: 0;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+.picker-letter {
+  color: var(--color-muted);
+  font-size: 0.75em;
+  text-align: center;
+  user-select: none;
 }
 
 .token-list {
@@ -290,3 +647,113 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* A trailing icon on the color row, square at the row's height. */
+.color-icon {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-action);
+  background: transparent;
+  color: var(--color-muted);
+  cursor: pointer;
+}
+
+.color-icon:hover,
+.color-icon[aria-expanded='true'] {
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.color-icon:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.color-icon svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+/*
+ * A value picked from a fixed list. The native select draws its value as the
+ * field's text and the chevron sits over its right edge, so the platform list
+ * opens on press and the field keeps the height of every other one.
+ */
+.glyph-field.is-select {
+  position: relative;
+}
+
+.glyph-select {
+  appearance: none;
+  padding-right: 22px;
+  cursor: pointer;
+}
+
+.select-chevron {
+  position: absolute;
+  right: 6px;
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: var(--color-muted);
+  stroke-width: 1.5;
+  pointer-events: none;
+}
+
+/* A raw marker inside a field sits before its menu, clear of the value. */
+.glyph-field .raw {
+  padding: 0 2px 0 var(--space-xs);
+}
+
+/* Mutually exclusive choices for one value, drawn as one field split evenly. */
+.segmented {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 2px;
+  min-height: 24px;
+  padding: 1px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-action);
+  background: var(--color-surface);
+}
+
+.segment {
+  display: grid;
+  place-items: center;
+  min-height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-action);
+  background: transparent;
+  color: var(--color-muted);
+  cursor: pointer;
+}
+
+.segment:hover {
+  color: var(--color-text);
+}
+
+.segment[aria-pressed='true'] {
+  background: var(--color-chrome);
+  color: var(--color-text);
+}
+
+.segment:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.segment svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+}

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

@@ -0,0 +1,69 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { Field, type Scrub } from '@/canvas/client/inspector/field'
+
+/** The modes a size takes besides a number, by the name the field shows. */
+const MODES = ['Fill', 'Fit'] as const
+
+interface SizeFieldProps {
+  readonly label: string
+  readonly glyph: string
+  /** The value as the panel shows it, a mode name or a number. */
+  readonly initial: string
+  readonly isBusy: boolean
+  /** Takes a typed number or a picked mode name, each as shown. */
+  readonly onCommit: (value: string) => void
+  readonly scrub?: Scrub
+}
+
+/**
+ * A size that takes a number or a mode. The chevron is a native select, so
+ * its list opens above the panel's clipping and answers the keyboard as the
+ * platform does, and typing a number replaces the mode.
+ */
+export function SizeField({
+  label,
+  glyph,
+  initial,
+  isBusy,
+  onCommit,
+  scrub,
+}: SizeFieldProps): JSX.Element {
+  const mode = (MODES as readonly string[]).includes(initial) ? initial : ''
+  return (
+    <Field
+      label={label}
+      glyph={glyph}
+      initial={initial}
+      isBusy={isBusy}
+      onCommit={onCommit}
+      scrub={scrub}
+      trailing={
+        <span class="size-mode">
+          <select
+            class="size-mode-select"
+            aria-label={`${label} mode`}
+            value={mode}
+            disabled={isBusy}
+            onChange={(event) => {
+              const picked = event.currentTarget.value
+              if (picked && picked !== mode) onCommit(picked)
+            }}
+          >
+            <option value="" disabled hidden>
+              Fixed
+            </option>
+            {MODES.map((name) => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </select>
+          <svg class="size-mode-chevron" viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M4.5 6.5 8 10l3.5-3.5" />
+          </svg>
+        </span>
+      }
+    />
+  )
+}

package/src/canvas/client/inspector/token-select.tsx

@@ -0,0 +1,109 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { Field, type Scrub } from '@/canvas/client/inspector/field'
+
+/** The menu entry that hands the value back to the field for typing. */
+const RAW = ''
+
+interface TokenSelectProps {
+  readonly label: string
+  readonly glyph: string
+  /** The value as the panel shows it, a token's name where one stands. */
+  readonly initial: string
+  /** One token group's names, in the order the token sheet sorts them. */
+  readonly tokens: readonly string[]
+  /** The token the element names, where it names one. */
+  readonly token?: string
+  readonly isRaw: boolean
+  readonly isBusy: boolean
+  readonly isWide?: boolean
+  readonly placeholder?: string
+  /** Takes a typed value as typed. */
+  readonly onCommit: (value: string) => void
+  /** Takes the name of a token picked from the menu or typed whole. */
+  readonly onPick: (name: string) => void
+  readonly scrub?: Scrub
+}
+
+/**
+ * A value that takes a token or a typed literal. The menu lists the group's
+ * tokens first and a raw value last, which returns focus to the field, so a
+ * token is one pick away and a literal is still one keystroke. A group with no
+ * tokens leaves the field alone, with no menu and no raw marker.
+ */
+export function TokenSelect({
+  label,
+  glyph,
+  initial,
+  tokens,
+  token,
+  isRaw,
+  isBusy,
+  isWide,
+  placeholder,
+  onCommit,
+  onPick,
+  scrub,
+}: TokenSelectProps): JSX.Element {
+  const hasTokens = tokens.length > 0
+  return (
+    <Field
+      label={label}
+      glyph={glyph}
+      initial={initial}
+      isBusy={isBusy}
+      isWide={isWide}
+      placeholder={placeholder}
+      onCommit={(typed) => {
+        if (tokens.includes(typed)) onPick(typed)
+        else onCommit(typed)
+      }}
+      scrub={scrub}
+      trailing={
+        hasTokens ? (
+          <>
+            {isRaw ? (
+              <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}
+            <span class="size-mode">
+              <select
+                class="size-mode-select"
+                aria-label={`${label} tokens`}
+                value={token ?? RAW}
+                disabled={isBusy}
+                onChange={(event) => {
+                  const picked = event.currentTarget.value
+                  if (picked === RAW) {
+                    event.currentTarget
+                      .closest('.glyph-field')
+                      ?.querySelector<HTMLInputElement>('.glyph-field-input')
+                      ?.focus()
+                  } else if (picked !== token) onPick(picked)
+                }}
+              >
+                {tokens.map((name) => (
+                  <option key={name} value={name}>
+                    {name}
+                  </option>
+                ))}
+                <option value={RAW}>Raw value</option>
+              </select>
+              <svg
+                class="size-mode-chevron"
+                viewBox="0 0 16 16"
+                aria-hidden="true"
+              >
+                <path d="M4.5 6.5 8 10l3.5-3.5" />
+              </svg>
+            </span>
+          </>
+        ) : null
+      }
+    />
+  )
+}