@erclx/canon 5.26.0 → 5.27.0

package/src/canvas/client/inspector/color-space.ts

@@ -0,0 +1,240 @@
+/**
+ * Conversions between the hex the writer takes and the spaces the picker
+ * edits in. Channels are 0 to 255, hues are degrees, and every other component
+ * is 0 to 100. LCH is CIE LCH as CSS `lch()` defines it, and the matrices are
+ * the ones CSS Color 4 publishes in its sample code.
+ */
+
+export interface Rgb {
+  readonly r: number
+  readonly g: number
+  readonly b: number
+}
+
+export interface Hsv {
+  readonly h: number
+  readonly s: number
+  readonly v: number
+}
+
+export interface Hsl {
+  readonly h: number
+  readonly s: number
+  readonly l: number
+}
+
+export interface Lch {
+  readonly l: number
+  readonly c: number
+  readonly h: number
+}
+
+type Vector = readonly [number, number, number]
+type Matrix = readonly [Vector, Vector, Vector]
+
+const LINEAR_SRGB_TO_XYZ: Matrix = [
+  [506752 / 1228815, 87881 / 245763, 12673 / 70218],
+  [87098 / 409605, 175762 / 245763, 12673 / 175545],
+  [7918 / 409605, 87881 / 737289, 1001167 / 1053270],
+]
+
+const XYZ_TO_LINEAR_SRGB: Matrix = [
+  [12831 / 3959, -329 / 214, -1974 / 3959],
+  [-851781 / 878810, 1648619 / 878810, 36519 / 878810],
+  [705 / 12673, -2585 / 12673, 705 / 667],
+]
+
+/** Bradford chromatic adaptation, since sRGB is D65 and `lch()` is D50. */
+const D65_TO_D50: Matrix = [
+  [1.0479297925449969, 0.022946870601609652, -0.05019226628920524],
+  [0.02962780877005599, 0.9904344267538799, -0.017073799063418826],
+  [-0.009243040646204504, 0.015055191490298152, 0.7518742814281371],
+]
+
+const D50_TO_D65: Matrix = [
+  [0.955473421488075, -0.02309845494876471, 0.06325924320057072],
+  [-0.0283697093338637, 1.0099953980813041, 0.021041441191917323],
+  [0.012314014864481998, -0.020507649298898964, 1.330365926242124],
+]
+
+const D50_WHITE: Vector = [0.3457 / 0.3585, 1, (1 - 0.3457 - 0.3585) / 0.3585]
+
+const EPSILON = 216 / 24389
+const KAPPA = 24389 / 27
+
+/** Chroma below this reads as no hue, which rounding noise never reaches. */
+const ACHROMATIC = 0.02
+
+function multiply(matrix: Matrix, vector: Vector): Vector {
+  const [row0, row1, row2] = matrix.map(
+    (row) => row[0] * vector[0] + row[1] * vector[1] + row[2] * vector[2],
+  )
+  return [row0 ?? 0, row1 ?? 0, row2 ?? 0]
+}
+
+function clamp(value: number, low: number, high: number): number {
+  return Math.min(high, Math.max(low, value))
+}
+
+function wrapHue(hue: number): number {
+  return ((hue % 360) + 360) % 360
+}
+
+export function hexToRgb(hex: string): Rgb {
+  return {
+    r: parseInt(hex.slice(0, 2), 16),
+    g: parseInt(hex.slice(2, 4), 16),
+    b: parseInt(hex.slice(4, 6), 16),
+  }
+}
+
+export function rgbToHex({ r, g, b }: Rgb): string {
+  return [r, g, b]
+    .map((part) =>
+      Math.round(clamp(part, 0, 255))
+        .toString(16)
+        .padStart(2, '0'),
+    )
+    .join('')
+}
+
+/**
+ * HSV off RGB. A color with no saturation has no hue of its own, so it takes
+ * the one handed in, which keeps a grey's hue slider where the operator left it.
+ */
+export function rgbToHsv({ r, g, b }: Rgb, hue = 0): Hsv {
+  const max = Math.max(r, g, b)
+  const delta = max - Math.min(r, g, b)
+  return {
+    h: delta === 0 ? hue : hueOf(r, g, b, max, delta),
+    s: max === 0 ? 0 : (delta / max) * 100,
+    v: (max / 255) * 100,
+  }
+}
+
+export function hsvToRgb({ h, s, v }: Hsv): Rgb {
+  const value = (v / 100) * 255
+  const chroma = value * (s / 100)
+  return fromChroma(h, chroma, value - chroma)
+}
+
+/** HSL off RGB, taking the hue handed in when there is no saturation. */
+export function rgbToHsl({ r, g, b }: Rgb, hue = 0): Hsl {
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const delta = max - min
+  const lightness = (max + min) / 2 / 255
+  const saturation =
+    delta === 0 ? 0 : delta / 255 / (1 - Math.abs(2 * lightness - 1))
+  return {
+    h: delta === 0 ? hue : hueOf(r, g, b, max, delta),
+    s: saturation * 100,
+    l: lightness * 100,
+  }
+}
+
+export function hslToRgb({ h, s, l }: Hsl): Rgb {
+  const lightness = l / 100
+  const chroma = (1 - Math.abs(2 * lightness - 1)) * (s / 100) * 255
+  return fromChroma(h, chroma, lightness * 255 - chroma / 2)
+}
+
+function hueOf(
+  r: number,
+  g: number,
+  b: number,
+  max: number,
+  delta: number,
+): number {
+  const sector =
+    max === r
+      ? (g - b) / delta + (g < b ? 6 : 0)
+      : max === g
+        ? (b - r) / delta + 2
+        : (r - g) / delta + 4
+  return sector * 60
+}
+
+function fromChroma(hue: number, chroma: number, base: number): Rgb {
+  const sector = wrapHue(hue) / 60
+  const second = chroma * (1 - Math.abs((sector % 2) - 1))
+  const [r, g, b]: Vector =
+    sector < 1
+      ? [chroma, second, 0]
+      : sector < 2
+        ? [second, chroma, 0]
+        : sector < 3
+          ? [0, chroma, second]
+          : sector < 4
+            ? [0, second, chroma]
+            : sector < 5
+              ? [second, 0, chroma]
+              : [chroma, 0, second]
+  return { r: r + base, g: g + base, b: b + base }
+}
+
+function toLinear(channel: number): number {
+  const value = channel / 255
+  return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4
+}
+
+function fromLinear(value: number): number {
+  const encoded =
+    value <= 0.0031308 ? value * 12.92 : 1.055 * value ** (1 / 2.4) - 0.055
+  return encoded * 255
+}
+
+/** CIE LCH off RGB, taking the hue handed in when there is no chroma. */
+export function rgbToLch({ r, g, b }: Rgb, hue = 0): Lch {
+  const xyz = multiply(
+    D65_TO_D50,
+    multiply(LINEAR_SRGB_TO_XYZ, [toLinear(r), toLinear(g), toLinear(b)]),
+  )
+  const f = (ratio: number): number =>
+    ratio > EPSILON ? Math.cbrt(ratio) : (KAPPA * ratio + 16) / 116
+  const fx = f(xyz[0] / D50_WHITE[0])
+  const fy = f(xyz[1] / D50_WHITE[1])
+  const fz = f(xyz[2] / D50_WHITE[2])
+  const a = 500 * (fx - fy)
+  const bAxis = 200 * (fy - fz)
+  const chroma = Math.sqrt(a * a + bAxis * bAxis)
+  return {
+    l: 116 * fy - 16,
+    c: chroma < ACHROMATIC ? 0 : chroma,
+    h:
+      chroma < ACHROMATIC
+        ? hue
+        : wrapHue((Math.atan2(bAxis, a) * 180) / Math.PI),
+  }
+}
+
+/**
+ * RGB off CIE LCH. A color outside sRGB has no faithful hex, so each channel
+ * clamps and `isClamped` says so, letting the row show the color written.
+ */
+export function lchToRgb({ l, c, h }: Lch): {
+  readonly rgb: Rgb
+  readonly isClamped: boolean
+} {
+  const radians = (h * Math.PI) / 180
+  const fy = (l + 16) / 116
+  const fx = fy + (c * Math.cos(radians)) / 500
+  const fz = fy - (c * Math.sin(radians)) / 200
+  const ratios: Vector = [
+    fx ** 3 > EPSILON ? fx ** 3 : (116 * fx - 16) / KAPPA,
+    l > KAPPA * EPSILON ? fy ** 3 : l / KAPPA,
+    fz ** 3 > EPSILON ? fz ** 3 : (116 * fz - 16) / KAPPA,
+  ]
+  const xyz: Vector = [
+    ratios[0] * D50_WHITE[0],
+    ratios[1] * D50_WHITE[1],
+    ratios[2] * D50_WHITE[2],
+  ]
+  const channels = multiply(XYZ_TO_LINEAR_SRGB, multiply(D50_TO_D65, xyz)).map(
+    fromLinear,
+  )
+  /* Half a step either side rounds into range, so it is not a clamp. */
+  const isClamped = channels.some((part) => part < -0.5 || part > 255.5)
+  const [r, g, b] = channels.map((part) => clamp(part, 0, 255))
+  return { rgb: { r: r ?? 0, g: g ?? 0, b: b ?? 0 }, isClamped }
+}

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

@@ -1,5 +1,5 @@
 /** @jsxImportSource preact */
-import type { JSX } from 'preact'
+import type { ComponentChildren, JSX } from 'preact'
 import { useRef } from 'preact/hooks'
 import { scrubStep } from '@/canvas/client/inspector/values'
 
@@ -35,6 +35,8 @@ interface FieldProps {
   readonly onCommit: (value: string) => void
   /** Makes the glyph a drag handle. Typing stays the keyboard path. */
   readonly scrub?: Scrub
+  /** A control inside the field's box after the value, such as a mode menu. */
+  readonly trailing?: ComponentChildren
 }
 
 const NUMBER = /^-?\d*\.?\d+$/
@@ -69,6 +71,7 @@ export function Field({
   placeholder,
   onCommit,
   scrub,
+  trailing,
 }: FieldProps): JSX.Element {
   const input = useRef<HTMLInputElement>(null)
   const handle = useRef<HTMLSpanElement>(null)
@@ -169,6 +172,7 @@ export function Field({
           if (event.key === 'Escape') event.currentTarget.value = initial
         }}
       />
+      {trailing}
     </div>
   )
 }

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,35 @@
   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;
+}