@erclx/canon 5.25.0 → 5.27.0

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

@@ -108,44 +108,574 @@
   flex: 1;
 }
 
-.token-picker {
+.raw {
   flex: none;
-  width: 4.5rem;
-  min-height: 24px;
-  padding: 2px var(--space-xs);
+  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;
+}
+
+/* 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);
-  font: inherit;
+}
+
+.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;
 }
 
-.token-picker:hover {
-  border-color: var(--color-muted);
+.size-mode-select:disabled {
+  cursor: not-allowed;
 }
 
-.token-picker:disabled {
+.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, with the tokens and the eyedropper trailing the row.
+ */
+.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;
 }
 
-.raw {
+/*
+ * 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;
+}
+
+/*
+ * 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);
+  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);
+}
+
+/* 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);
-  cursor: help;
+  text-align: center;
 }
 
-.text-excerpt {
-  margin: var(--space-xs) 0 0;
-  color: var(--color-text-body);
+.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 {
+  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;
 }
 
-.saved {
-  margin-left: var(--space-sm);
-  color: var(--color-success);
-  font-weight: 400;
+/* 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;
 }

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