@nexxtmove/ui 2.2.0 → 2.3.0

package/src/components/editor/molecules/EditorColor/gradientClass.ts

@@ -0,0 +1,225 @@
+/**
+ * The class contract of a gradient background, as NexxtEditorColor writes it:
+ * one string of space-separated Tailwind classes in a fixed order --
+ *
+ *   type → from → from-position → via → via-position → to → to-position
+ *
+ * such as `'bg-linear-135 from-[#7f56d9] via-theme-main via-40% to-[#432e73cc]'`.
+ * Equal gradients therefore give equal strings, so a consumer can deduplicate
+ * undo steps. Hexes are written in lower case and an opaque `ff` pair is left
+ * out; a position is only written when it differs from Tailwind's default (0 %
+ * for `from`, 50 % for `via`, 100 % for `to`). No `var()` and no free
+ * `bg-[linear-gradient(…)]` is ever written.
+ */
+
+import { COLOR_ROLES, isHex } from './colorClass'
+import type { EditorColorRole } from './colorClass'
+import { buildGradientCss } from '../../../organisms/ColorPicker/gradient'
+
+/** A linear gradient: `bg-linear-<0–359>`, followed by its stops. */
+export type EditorColorLinearGradientValue = `bg-linear-${number} ${string}`
+
+/**
+ * A radial gradient: `bg-radial` when its centre is the middle, or
+ * `bg-radial-[at_<x>%_<y>%]`, followed by its stops.
+ */
+export type EditorColorRadialGradientValue = `bg-radial ${string}` | `bg-radial-[at_${string}`
+
+/** A gradient background as the class string of the contract above. */
+export type EditorColorGradientValue =
+  EditorColorLinearGradientValue | EditorColorRadialGradientValue
+
+/** The colour of a stop: a literal hex in normal form, or a theme role (always opaque). */
+export type GradientClassColor = { hex: `#${string}` } | { role: EditorColorRole }
+
+/** One stop of a parsed gradient class: its colour and its position. */
+export interface GradientClassStop {
+  color: GradientClassColor
+  /** Whole percentage, 0–100. */
+  position: number
+}
+
+/** The kind of gradient: `bg-linear-*` or `bg-radial`/`bg-radial-[at_…]`. */
+export type GradientClassType = 'linear' | 'radial'
+
+/**
+ * A gradient class string, parsed: its type with the angle or the centre, and
+ * two or three stops in order of position (from, optional via, to).
+ */
+export type GradientClass =
+  | {
+      type: 'linear'
+      /** Whole degrees, 0–359. */
+      angle: number
+      stops: GradientClassStop[]
+    }
+  | {
+      type: 'radial'
+      /** Centre, in whole percentages from the left (0–100). */
+      x: number
+      /** Centre, in whole percentages from the top (0–100). */
+      y: number
+      stops: GradientClassStop[]
+    }
+
+const STOP_PREFIXES = ['from', 'via', 'to'] as const
+type StopPrefix = (typeof STOP_PREFIXES)[number]
+
+/** Tailwind's registered defaults; a position equal to it is not written. */
+const DEFAULT_POSITIONS: Record<StopPrefix, number> = { from: 0, via: 50, to: 100 }
+
+// Whole numbers without leading zeros, so every number has exactly one spelling.
+const INTEGER = '(0|[1-9]\\d{0,2})'
+const LINEAR = new RegExp(`^bg-linear-${INTEGER}$`)
+const RADIAL_AT = new RegExp(`^bg-radial-\\[at_${INTEGER}%_${INTEGER}%\\]$`)
+const STOP_HEX = /^(from|via|to)-\[(#[0-9A-Fa-f]{6}(?:[0-9A-Fa-f]{2})?)\]$/
+const STOP_ROLE = new RegExp(`^(from|via|to)-theme-(${COLOR_ROLES.join('|')})$`)
+const STOP_POSITION = new RegExp(`^(from|via|to)-${INTEGER}%$`)
+
+const isStopPrefix = (value: string | undefined): value is StopPrefix =>
+  STOP_PREFIXES.some((prefix) => prefix === value)
+
+/**
+ * A hex in the one spelling the contract writes: lower case, and without an
+ * opaque `ff` pair (`#AABBCCFF` → `#aabbcc`).
+ */
+export const normalizeGradientHex = (hex: `#${string}`): `#${string}` => {
+  const lower = hex.toLowerCase()
+  const normal = lower.length === 9 && lower.endsWith('ff') ? lower.slice(0, 7) : lower
+  return isHex(normal) ? normal : hex
+}
+
+/**
+ * Reads a gradient class string, or returns `null` when it does not follow the
+ * contract: no type, no `from` or `to`, an unknown role or token, a value out
+ * of range, a class given twice, or stops whose positions run backwards (the
+ * contract always writes them in order). The order of the classes themselves
+ * is not checked. The result is in normal form, so serializing it gives the
+ * contract's spelling back.
+ */
+export const parseGradientClass = (value: string | undefined): GradientClass | null => {
+  if (!value) return null
+
+  let type: { type: 'linear'; angle: number } | { type: 'radial'; x: number; y: number } | null =
+    null
+  const colors: Partial<Record<StopPrefix, GradientClassColor>> = {}
+  const positions: Partial<Record<StopPrefix, number>> = {}
+
+  for (const token of value.trim().split(/\s+/)) {
+    const linear = LINEAR.exec(token)
+    const radialAt = RADIAL_AT.exec(token)
+    const hex = STOP_HEX.exec(token)
+    const role = STOP_ROLE.exec(token)
+    const position = STOP_POSITION.exec(token)
+
+    if (linear || radialAt || token === 'bg-radial') {
+      if (type) return null
+      if (linear) {
+        const angle = Number(linear[1])
+        if (angle > 359) return null
+        type = { type: 'linear', angle }
+      } else {
+        const x = radialAt ? Number(radialAt[1]) : 50
+        const y = radialAt ? Number(radialAt[2]) : 50
+        if (x > 100 || y > 100) return null
+        type = { type: 'radial', x, y }
+      }
+    } else if (hex || role) {
+      const prefix = (hex ?? role)?.[1]
+      if (!isStopPrefix(prefix) || colors[prefix]) return null
+      const captured = hex?.[2]
+      const stopRole = COLOR_ROLES.find((candidate) => candidate === role?.[2])
+      if (captured && isHex(captured)) colors[prefix] = { hex: normalizeGradientHex(captured) }
+      else if (stopRole) colors[prefix] = { role: stopRole }
+      else return null
+    } else if (position) {
+      const prefix = position[1]
+      const percent = Number(position[2])
+      if (!isStopPrefix(prefix) || positions[prefix] !== undefined || percent > 100) return null
+      positions[prefix] = percent
+    } else {
+      return null
+    }
+  }
+
+  if (!type || !colors.from || !colors.to) return null
+  if (positions.via !== undefined && !colors.via) return null
+
+  const stops = STOP_PREFIXES.flatMap((prefix) => {
+    const color = colors[prefix]
+    return color ? [{ color, position: positions[prefix] ?? DEFAULT_POSITIONS[prefix] }] : []
+  })
+
+  if (stops.some((stop, index) => index > 0 && stop.position < (stops[index - 1]?.position ?? 0)))
+    return null
+
+  return { ...type, stops }
+}
+
+const colorClass = (prefix: StopPrefix, color: GradientClassColor) =>
+  'hex' in color
+    ? `${prefix}-[${normalizeGradientHex(color.hex)}]`
+    : `${prefix}-theme-${color.role}`
+
+/**
+ * Writes a gradient in the contract's form. The stops are written in the order
+ * given, which must be their order on position: the first is `from`, the last
+ * `to`, and a third in between is `via`. Positions are rounded and clamped to
+ * 0–100, the angle to a whole 0–359 and the centre to whole percentages.
+ */
+export const serializeGradientClass = (gradient: GradientClass): EditorColorGradientValue => {
+  const { stops } = gradient
+  const prefixes: StopPrefix[] = stops.length === 3 ? ['from', 'via', 'to'] : ['from', 'to']
+  const percent = (value: number) => Math.min(100, Math.max(0, Math.round(value)))
+
+  const stopClasses = prefixes.flatMap((prefix, index) => {
+    const stop = index === prefixes.length - 1 ? stops[stops.length - 1] : stops[index]
+    if (!stop) return []
+    const position = percent(stop.position)
+    const color = colorClass(prefix, stop.color)
+    return position === DEFAULT_POSITIONS[prefix] ? [color] : [color, `${prefix}-${position}%`]
+  })
+  const rest = stopClasses.join(' ')
+
+  if (gradient.type === 'linear') {
+    const angle = ((Math.round(gradient.angle) % 360) + 360) % 360
+    return `bg-linear-${angle} ${rest}`
+  }
+
+  const x = percent(gradient.x)
+  const y = percent(gradient.y)
+  return x === 50 && y === 50 ? `bg-radial ${rest}` : `bg-radial-[at_${x}%_${y}%] ${rest}`
+}
+
+/**
+ * Whether a value reads as a gradient at all -- its first class is a gradient
+ * type -- even when the rest of it does not follow the contract. Such a value
+ * opens the picker in its gradient mode, with the placeholder in the trigger.
+ */
+export const looksLikeGradientClass = (value: string | undefined) =>
+  !!value && /^bg-(?:linear-|radial(?:\s|-\[|$))/.test(value.trim())
+
+/**
+ * A parsed gradient class as a CSS `background-image`, for drawing it as an
+ * inline style: `linear-gradient(<angle>deg in oklab, …)`,
+ * `radial-gradient(at <x>% <y>% in oklab, …)`, or for a centred radial
+ * gradient `radial-gradient(in oklab, …)`. Always interpolated in oklab -- the
+ * same as the picker's preview -- and with every position written, 0, 50 and
+ * 100 included. Angle and positions are those of the Tailwind class, so a
+ * linear gradient renders exactly as `bg-linear-*` does. A hex stays a hex
+ * (eight digits with alpha); a role (`'main'`, `'accent'`, …) is resolved by
+ * `resolveRole`, for example to `var(--color-theme-main)`. Pure: no DOM, safe on the server.
+ */
+export const gradientClassToCss = (
+  gradient: GradientClass,
+  resolveRole: (role: EditorColorRole) => string,
+): string =>
+  buildGradientCss(
+    gradient.type === 'linear'
+      ? { type: 'linear', angle: gradient.angle }
+      : { type: 'radial', centerX: gradient.x, centerY: gradient.y },
+    gradient.stops.map(({ color, position }) => ({
+      color: 'hex' in color ? color.hex : resolveRole(color.role),
+      position,
+    })),
+  )

package/src/components/molecules/ToggleGroup/ToggleGroup.vue

@@ -185,7 +185,9 @@ onMounted(async () => {
         aria-hidden="true"
         class="absolute inset-y-1 left-0 rounded-lg bg-white"
         :class="
-          ready ? 'transition-transform duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]' : ''
+          ready
+            ? 'transition-transform duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)] motion-reduce:transition-none'
+            : ''
         "
         :style="sliderStyle"
       />
@@ -242,7 +244,9 @@ onMounted(async () => {
         aria-hidden="true"
         class="pointer-events-none absolute inset-0 z-20 flex gap-1 p-1"
         :class="[
-          ready ? 'transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]' : '',
+          ready
+            ? 'transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)] motion-reduce:transition-none'
+            : '',
           { 'flex-wrap': !equalWidth },
         ]"
         :style="{ clipPath }"