@repzo/widget-react-native 1.0.0

package/src/ui/screens/pre-chat/PreChatForm.tsx

@@ -0,0 +1,221 @@
+/**
+ * Pre-chat form — collects visitor info before the first message.
+ * Port of `client/src/widget/components/PreChatForm.tsx`.
+ */
+
+import { useCallback, useRef, useState } from 'react';
+import { Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+
+import { formatLabel } from '../../../i18n';
+import { GradientBackground } from '../../components/Gradient';
+import { ChevronIcon } from '../../components/icons';
+import { globalStyles } from '../../styles/global';
+import { contrastingTextColor, mixHex, palette, withAlpha } from '../../styles/theme';
+import { forwardDirection } from '../../utils/rtl';
+import { styles } from './PreChatForm.styles';
+import type { PreChatFormProps } from './PreChatForm.types';
+
+/** Breathing room kept under a focused field when it is scrolled into view. */
+const FIELD_GUTTER = 16;
+
+export function PreChatForm({
+  fields,
+  color,
+  labels,
+  onSubmit,
+  onSkip,
+  onClose,
+}: PreChatFormProps) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const scrollRef = useRef<ScrollView>(null);
+  const scrollOffset = useRef(0);
+  const viewportHeight = useRef(0);
+  const fieldRefs = useRef<Record<string, View | null>>({});
+  const focusedField = useRef<string | null>(null);
+
+  // The keyboard shortens the form instead of scrolling it, so a field low in
+  // the list ends up behind it. Once the viewport has shrunk, lift the focused
+  // field back above the fold. Both edges are measured the same way, so the
+  // offset a modal adds to either cancels out, and RN folds the scroll position
+  // into the field's own measurement.
+  const revealFocusedField = useCallback(() => {
+    const name = focusedField.current;
+    const field = name ? fieldRefs.current[name] : null;
+    const viewport = scrollRef.current?.getNativeScrollRef();
+    if (!field || !viewport) return;
+
+    viewport.measureInWindow((_vx, viewportY, _vw, height) => {
+      field.measureInWindow((_fx, fieldY, _fw, fieldHeight) => {
+        const hidden = fieldY + fieldHeight + FIELD_GUTTER - (viewportY + height);
+        if (hidden <= 0) return;
+        scrollRef.current?.scrollTo({ y: scrollOffset.current + hidden, animated: false });
+      });
+    });
+  }, []);
+
+  const handleViewportLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { height } = event.nativeEvent.layout;
+      const shrank = viewportHeight.current - height > 1;
+      viewportHeight.current = height;
+      if (shrank) revealFocusedField();
+    },
+    [revealFocusedField]
+  );
+
+  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    scrollOffset.current = event.nativeEvent.contentOffset.y;
+  }, []);
+
+  const hasRequired = fields.some((field) => field.required);
+
+  const handleSubmit = () => {
+    const nextErrors: Record<string, string> = {};
+    for (const field of fields) {
+      const value = values[field.name]?.trim() || '';
+      if (field.required && !value) {
+        nextErrors[field.name] = formatLabel(labels.fieldRequired, { field: field.label });
+      }
+      if (field.type === 'email' && value && !value.includes('@')) {
+        nextErrors[field.name] = labels.invalidEmail;
+      }
+    }
+
+    if (Object.keys(nextErrors).length > 0) {
+      setErrors(nextErrors);
+      return;
+    }
+    onSubmit(values);
+  };
+
+  const headerTextColor = contrastingTextColor(color);
+
+  return (
+    <View style={globalStyles.screen}>
+      {/* The shared panel header used to sit here with nothing in it; the
+          form's own title fills that space instead. */}
+      <GradientBackground colors={[color, mixHex(color, '#000000', 0.16)]} style={styles.header}>
+        <View style={styles.headerCopy}>
+          <Text style={[styles.headerTitle, { color: headerTextColor }]}>{labels.title}</Text>
+          <Text
+            style={[styles.headerSubtitle, { color: withAlpha(headerTextColor, 0.75) }]}
+            numberOfLines={2}>
+            {labels.subtitle}
+          </Text>
+        </View>
+        <Pressable
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel={labels.close}
+          hitSlop={12}
+          style={({ pressed }) => [
+            globalStyles.iconButton,
+            { backgroundColor: withAlpha(headerTextColor, 0.16) },
+            pressed && globalStyles.pressed,
+          ]}>
+          <ChevronIcon size={20} direction="down" color={headerTextColor} />
+        </Pressable>
+      </GradientBackground>
+
+      <ScrollView
+        ref={scrollRef}
+        style={globalStyles.fill}
+        contentContainerStyle={styles.content}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag"
+        onLayout={handleViewportLayout}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}>
+        <View style={globalStyles.fill}>
+          {fields.map((field) => (
+            <View
+              key={field.name}
+              ref={(node) => {
+                fieldRefs.current[field.name] = node;
+              }}
+              collapsable={false}
+              style={styles.field}>
+              <Text style={styles.label}>
+                {field.label}
+                {field.required ? <Text style={styles.required}> *</Text> : null}
+              </Text>
+
+              {field.type === 'select' ? (
+                <View style={styles.options}>
+                  {(field.options ?? []).map((option) => {
+                    const selected = values[field.name] === option;
+                    return (
+                      <Pressable
+                        key={option}
+                        onPress={() =>
+                          setValues((current) => ({ ...current, [field.name]: option }))
+                        }
+                        accessibilityRole="button"
+                        accessibilityState={{ selected }}
+                        style={[
+                          styles.option,
+                          selected && { borderColor: color, backgroundColor: palette.surface },
+                        ]}>
+                        <Text style={[styles.optionLabel, selected && { color }]}>{option}</Text>
+                        {selected ? (
+                          <ChevronIcon size={14} direction={forwardDirection()} color={color} />
+                        ) : null}
+                      </Pressable>
+                    );
+                  })}
+                </View>
+              ) : (
+                <TextInput
+                  value={values[field.name] || ''}
+                  onChangeText={(text) =>
+                    setValues((current) => ({ ...current, [field.name]: text }))
+                  }
+                  placeholder={field.label}
+                  placeholderTextColor={palette.textSubtle}
+                  keyboardType={
+                    field.type === 'email'
+                      ? 'email-address'
+                      : field.type === 'phone'
+                        ? 'phone-pad'
+                        : 'default'
+                  }
+                  autoCapitalize={field.type === 'email' ? 'none' : 'sentences'}
+                  autoCorrect={field.type !== 'email'}
+                  onFocus={() => {
+                    focusedField.current = field.name;
+                    revealFocusedField();
+                  }}
+                  onBlur={() => {
+                    if (focusedField.current === field.name) focusedField.current = null;
+                  }}
+                  style={[styles.input, errors[field.name] ? styles.inputError : null]}
+                />
+              )}
+
+              {errors[field.name] ? (
+                <Text style={styles.errorText}>{errors[field.name]}</Text>
+              ) : null}
+            </View>
+          ))}
+        </View>
+
+        <View style={styles.actions}>
+          {!hasRequired ? (
+            <Pressable onPress={onSkip} accessibilityRole="button" style={styles.skipButton}>
+              <Text style={styles.skipLabel}>{labels.skip}</Text>
+            </Pressable>
+          ) : null}
+          <Pressable
+            onPress={handleSubmit}
+            accessibilityRole="button"
+            style={[styles.submitButton, { backgroundColor: color }]}>
+            <Text style={styles.submitLabel}>{labels.submit}</Text>
+          </Pressable>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}

package/src/ui/screens/pre-chat/PreChatForm.types.ts

@@ -0,0 +1,22 @@
+/** Props and label bundle for the pre-chat form. */
+
+import type { PreChatField } from '../../../types';
+
+export interface PreChatFormLabels {
+  title: string;
+  subtitle: string;
+  skip: string;
+  submit: string;
+  close: string;
+  fieldRequired: string;
+  invalidEmail: string;
+}
+
+export interface PreChatFormProps {
+  fields: PreChatField[];
+  color: string;
+  labels: PreChatFormLabels;
+  onSubmit: (data: Record<string, string>) => void;
+  onSkip: () => void;
+  onClose: () => void;
+}

package/src/ui/styles/global.ts

@@ -0,0 +1,50 @@
+/**
+ * Style rules shared by more than one screen or component, so a fingertip-sized
+ * icon button or a hairline divider is written once and looks the same
+ * everywhere. Screens layer their own sheet on top:
+ * `style={[globalStyles.divider, styles.inset]}`.
+ *
+ * Only rules that are identical at every call site belong here. A style that is
+ * "almost the same" stays with its screen: hoisting it would either fork it
+ * into variants or quietly change one screen to match another.
+ */
+
+import { StyleSheet } from 'react-native';
+
+import { palette, radius } from './theme';
+
+export const globalStyles = StyleSheet.create({
+  /** Full-height white surface every screen starts from. */
+  screen: {
+    flex: 1,
+    backgroundColor: palette.white,
+  },
+  /** Grows to take whatever space its parent has left. */
+  fill: {
+    flex: 1,
+  },
+  /** Round icon target in a header bar, sized for a fingertip. */
+  iconButton: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  /** Pressed feedback for icon buttons and text links. */
+  pressed: {
+    opacity: 0.6,
+  },
+  /** Hairline between list rows; the caller adds the start inset. */
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: palette.borderSoft,
+  },
+  /** Bordered white card that lists and previews sit in. */
+  card: {
+    borderRadius: radius.lg,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    backgroundColor: palette.white,
+  },
+});

package/src/ui/styles/theme.ts

@@ -0,0 +1,155 @@
+/**
+ * Maps the widget's `GET /config` theming fields onto React Native styles.
+ *
+ * The palette mirrors the web widget so a workspace looks the same on both
+ * surfaces; type scales are nudged up because 13px body copy is unreadable on
+ * a phone (minimum readable body size is 15–16px).
+ */
+
+import type { WidgetConfig } from '../../types';
+
+export const palette = {
+  white: '#ffffff',
+  ink: '#1a1a1a',
+  text: '#111827',
+  textMuted: '#6b7280',
+  textSubtle: '#9ca3af',
+  textFaint: '#b0b0b0',
+  border: '#e5e7eb',
+  borderSoft: '#f3f4f6',
+  surface: '#f9fafb',
+  surfaceAlt: '#f3f4f6',
+  danger: '#ef4444',
+  warningBg: '#fef3c7',
+  warningBorder: '#fde68a',
+  warningText: '#92400e',
+  warningIcon: '#d97706',
+  online: '#22c55e',
+  disabled: '#d1d5db',
+} as const;
+
+export const radius = {
+  sm: 8,
+  md: 10,
+  lg: 12,
+  xl: 14,
+  pill: 999,
+} as const;
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  xxl: 24,
+} as const;
+
+/** Mobile type scale — one step larger than the web widget's. */
+export const fontSize = {
+  micro: 10,
+  caption: 12,
+  meta: 13,
+  body: 15,
+  input: 16,
+  title: 17,
+  heading: 22,
+  display: 28,
+} as const;
+
+export interface WidgetTheme {
+  primaryColor: string;
+  position: 'left' | 'right';
+  isOnline: boolean;
+  /** Only set when the widget is outside business hours and has a message. */
+  offlineMessage?: string;
+  startConversationLabel: string;
+  replyTimeLabel: string;
+  allowNewConversations: boolean;
+  showPreviousConversations: boolean;
+  attachmentsEnabled: boolean;
+  preChatEnabled: boolean;
+}
+
+export const DEFAULT_PRIMARY_COLOR = '#0d9488';
+
+/**
+ * `override` supplies a translation for the active locale when one exists.
+ * Without it the workspace's single-language config fields are used, which is
+ * correct for the default locale and wrong for every other one.
+ */
+// Copy the dashboard owns — the greeting, the card labels — is rendered
+// exactly as the workspace typed it. Translating it is the dashboard's job.
+export function buildTheme(config: WidgetConfig | null): WidgetTheme {
+  return {
+    primaryColor: config?.primaryColor || DEFAULT_PRIMARY_COLOR,
+    position: config?.position || 'right',
+    isOnline: config?.isOnline ?? true,
+    offlineMessage:
+      config && !config.isOnline && config.businessHoursEnabled && config.offlineMessage
+        ? config.offlineMessage
+        : undefined,
+    startConversationLabel: config?.startConversationLabel || 'Send us a message',
+    replyTimeLabel: config?.replyTimeLabel || 'We usually reply within a few minutes',
+    allowNewConversations: config?.allowNewConversations ?? true,
+    showPreviousConversations: config?.showPreviousConversations ?? true,
+    attachmentsEnabled: config?.attachmentsEnabled ?? true,
+    preChatEnabled: config?.preChatEnabled ?? false,
+  };
+}
+
+/** `#rrggbb` → `rgba(r, g, b, alpha)`; passes non-hex colors straight through. */
+export function withAlpha(color: string, alpha: number): string {
+  const rgb = hexToRgb(color);
+  if (!rgb) return color;
+  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
+}
+
+export function hexToRgb(color: string): [number, number, number] | null {
+  const match = /^#?([a-f\d]{3}|[a-f\d]{6})$/i.exec(color.trim());
+  if (!match) return null;
+  let hex = match[1] as string;
+  if (hex.length === 3) {
+    hex = hex
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
+  const value = parseInt(hex, 16);
+  return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
+}
+
+/** Linear blend between two hex colors, used to fake gradients without a native lib. */
+export function mixHex(from: string, to: string, ratio: number): string {
+  const a = hexToRgb(from);
+  const b = hexToRgb(to);
+  if (!a || !b) return from;
+  const channel = (index: number) => Math.round(a[index] + (b[index] - a[index]) * ratio);
+  return `rgb(${channel(0)}, ${channel(1)}, ${channel(2)})`;
+}
+
+/** Pick readable foreground text for an arbitrary brand color. */
+export function contrastingTextColor(background: string): string {
+  const rgb = hexToRgb(background);
+  if (!rgb) return palette.white;
+  const [r, g, b] = rgb;
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.7 ? palette.ink : palette.white;
+}
+
+export const shadows = {
+  card: {
+    shadowColor: '#0f172a',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.08,
+    shadowRadius: 14,
+    elevation: 3,
+  },
+  floating: {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 6,
+  },
+} as const;

package/src/ui/utils/conversations.ts

@@ -0,0 +1,122 @@
+/**
+ * Conversation selectors and formatting shared by the Home and Messages
+ * spaces, so the two can never disagree about ordering or wording.
+ * Pure and free of React so they stay trivial to test.
+ */
+
+import { formatLabel } from '../../i18n';
+import type { Conversation } from '../../types';
+
+export interface TeamAgent {
+  name: string | null;
+  avatar: string | null;
+}
+
+const conversationTime = (conversation: Conversation): number => {
+  const parsed = Date.parse(conversation.lastMessageAt || conversation.createdAt || '');
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+
+/**
+ * Newest first. The store patches a conversation in place when a message
+ * arrives and never reorders the array, so position is not recency — every
+ * surface that lists conversations has to sort for itself.
+ */
+export function sortByRecency(conversations: Conversation[]): Conversation[] {
+  return [...conversations].sort((a, b) => conversationTime(b) - conversationTime(a));
+}
+
+export function pickRecentConversations(conversations: Conversation[], limit = 2): Conversation[] {
+  return sortByRecency(conversations).slice(0, limit);
+}
+
+/** Distinct agents the visitor has spoken to, most recent conversation first. */
+export function pickTeamAgents(conversations: Conversation[], limit = 3): TeamAgent[] {
+  const seen = new Set<string>();
+  const agents: TeamAgent[] = [];
+
+  for (const conversation of sortByRecency(conversations)) {
+    const name = conversation.agentName?.trim();
+    if (!name) continue;
+    const key = name.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    agents.push({ name, avatar: conversation.agentAvatar });
+    if (agents.length >= limit) break;
+  }
+
+  return agents;
+}
+
+/** Every unit is a translated template, so `2h` can become `منذ ساعتين`. */
+export interface RelativeTimeLabels {
+  justNow: string;
+  minutes: string;
+  hours: string;
+  days: string;
+  months: string;
+  years: string;
+}
+
+export function formatRelativeTime(dateStr: string, labels: RelativeTimeLabels): string {
+  const date = new Date(dateStr);
+  const diffMs = Date.now() - date.getTime();
+  const diffMin = Math.floor(diffMs / 60000);
+
+  if (diffMin < 1) return labels.justNow;
+  if (diffMin < 60) return formatLabel(labels.minutes, { count: diffMin });
+  const diffHrs = Math.floor(diffMin / 60);
+  if (diffHrs < 24) return formatLabel(labels.hours, { count: diffHrs });
+  const diffDays = Math.floor(diffHrs / 24);
+  if (diffDays < 30) return formatLabel(labels.days, { count: diffDays });
+  const diffMonths = Math.floor(diffDays / 30);
+  if (diffMonths < 12) return formatLabel(labels.months, { count: diffMonths });
+  return formatLabel(labels.years, { count: Math.floor(diffDays / 365) });
+}
+
+const startOfDay = (date: Date): number =>
+  new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+
+export function isSameDay(a: string, b: string): boolean {
+  return startOfDay(new Date(a)) === startOfDay(new Date(b));
+}
+
+/**
+ * Clock time beside a message. Intl ships with Hermes but is guarded anyway —
+ * a missing implementation should not blank out every timestamp in the thread.
+ */
+export function formatClockTime(dateStr: string, locale: string): string {
+  const date = new Date(dateStr);
+  if (Number.isNaN(date.getTime())) return '';
+  try {
+    return new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' }).format(date);
+  } catch {
+    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+  }
+}
+
+/** "Today", "Yesterday", then a real date once it is older than that. */
+export function formatDayLabel(
+  dateStr: string,
+  locale: string,
+  labels: { today: string; yesterday: string }
+): string {
+  const date = new Date(dateStr);
+  if (Number.isNaN(date.getTime())) return '';
+
+  const today = startOfDay(new Date());
+  const day = startOfDay(date);
+  if (day === today) return labels.today;
+  if (today - day === 86400000) return labels.yesterday;
+
+  const sameYear = date.getFullYear() === new Date().getFullYear();
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      day: 'numeric',
+      month: 'short',
+      ...(sameYear ? {} : { year: 'numeric' }),
+    }).format(date);
+  } catch {
+    return date.toDateString();
+  }
+}

package/src/ui/utils/html.ts

@@ -0,0 +1,58 @@
+/**
+ * HTML → text helpers. The CRM stores message bodies as HTML and campaign
+ * payloads as rich text; React Native has no DOMParser, so these are the
+ * regex equivalents of the web widget's `stripHtml` / `htmlToText`.
+ */
+
+const ENTITIES: Record<string, string> = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&#39;': "'",
+  '&apos;': "'",
+  '&nbsp;': ' ',
+};
+
+function decodeEntities(text: string): string {
+  return text
+    .replace(/&(amp|lt|gt|quot|#39|apos|nbsp);/g, (match) => ENTITIES[match] ?? match)
+    .replace(/&#(\d+);/g, (_match, code) => String.fromCharCode(Number(code)));
+}
+
+/** Block-level tags become newlines so paragraphs survive the strip. */
+export function stripHtml(html: string): string {
+  if (!html) return '';
+  return decodeEntities(
+    html
+      .replace(/<br\s*\/?>/gi, '\n')
+      .replace(/<\/(p|div|li|h[1-6]|blockquote|tr)>/gi, '\n')
+      .replace(/<li[^>]*>/gi, '• ')
+      .replace(/<[^>]+>/g, '')
+  )
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+}
+
+/** Single-line flattening used for campaign cards and list snippets. */
+export function htmlToText(html: string): string {
+  if (!html) return '';
+  const spaced = html
+    .replace(/<\/(p|div|li|h[1-6]|blockquote)>/gi, ' $&')
+    .replace(/<br\s*\/?>/gi, ' ');
+  return renderFallbackTokens(
+    decodeEntities(spaced.replace(/<[^>]+>/g, ' '))
+      .replace(/\s+/g, ' ')
+      .trim()
+  );
+}
+
+/** Unresolved merge tags would otherwise leak `{{ contact.firstName }}` to visitors. */
+function renderFallbackTokens(text: string): string {
+  return text
+    .replace(/\{\{\s*contact\.firstName\s*\}\}/g, 'there')
+    .replace(/\{\{\s*contact\.fullName\s*\}\}/g, 'there')
+    .replace(/\{\{\s*contact\.[^}]+\s*\}\}/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}

package/src/ui/utils/native-gradient.ts

@@ -0,0 +1,60 @@
+/**
+ * A real gradient when the host app happens to ship one, stacked bands when it
+ * does not.
+ *
+ * Stacked bands can only ever approximate a ramp: each strip is a solid fill,
+ * and once the strips are thin enough to hide the colour steps their heights
+ * start landing on fractional pixels, which shows up as faint seams. A native
+ * gradient has neither problem, so we use one where it exists — the same
+ * "borrow it from the host" approach as `safe-area.ts` and `storage.ts`.
+ *
+ * Resolution happens once at module load so component identity stays stable
+ * across renders.
+ */
+
+import type { ComponentType, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface NativeGradientProps {
+  colors: string[];
+  /** Stop positions in 0..1, matching `colors` one for one. */
+  locations?: number[];
+  start?: { x: number; y: number };
+  end?: { x: number; y: number };
+  style?: StyleProp<ViewStyle>;
+  pointerEvents?: 'none' | 'auto' | 'box-none' | 'box-only';
+  children?: ReactNode;
+}
+
+let nativeGradient: ComponentType<NativeGradientProps> | null = null;
+
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const mod = require('react-native-linear-gradient');
+  const component = mod?.default ?? mod?.LinearGradient;
+  if (component) nativeGradient = component as ComponentType<NativeGradientProps>;
+} catch {
+  nativeGradient = null;
+}
+
+/** Null when the host installed no gradient library; callers fall back to bands. */
+export function getNativeGradient(): ComponentType<NativeGradientProps> | null {
+  return nativeGradient;
+}
+
+/** Top-to-bottom. The only direction the band fallback can draw. */
+export const VERTICAL = {
+  start: { x: 0.5, y: 0 },
+  end: { x: 0.5, y: 1 },
+} as const;
+
+/**
+ * Top-left to bottom-right, the same way round in every language. A brand
+ * ramp is a visual, not a sentence, so it does not mirror with the reading
+ * direction. Needs a native gradient: stacked bands are horizontal strips and
+ * can only ever run top to bottom.
+ */
+export const DIAGONAL = {
+  start: { x: 0, y: 0 },
+  end: { x: 1, y: 1 },
+} as const;