@runtypelabs/persona 3.5.2 → 3.7.0

package/src/styles/widget.css

@@ -13,7 +13,7 @@
   --persona-md-table-border-color: var(--persona-border, #e5e7eb);
   --persona-md-table-header-bg: var(--persona-container, #f8fafc);
   --persona-md-hr-color: var(--persona-divider, #e5e7eb);
-  --persona-md-blockquote-border-color: var(--persona-accent, #3b82f6);
+  --persona-md-blockquote-border-color: var(--persona-accent, #0f0f0f);
   --persona-md-blockquote-text-color: var(--persona-muted, #6b7280);
 }
 
@@ -133,19 +133,19 @@
   --persona-md-h6-line-height: 1.5;
 
   /* Markdown Table Variables */
-  --persona-md-table-border-color: #e5e7eb;
-  --persona-md-table-header-bg: #f8fafc;
+  --persona-md-table-border-color: var(--persona-border, #e5e7eb);
+  --persona-md-table-header-bg: var(--persona-container, #f8fafc);
   --persona-md-table-header-weight: 600;
   --persona-md-table-cell-padding: 0.5rem 0.75rem;
   --persona-md-table-border-radius: 0.375rem;
 
   /* Markdown Horizontal Rule Variables */
-  --persona-md-hr-color: #e5e7eb;
+  --persona-md-hr-color: var(--persona-divider, #e5e7eb);
   --persona-md-hr-height: 1px;
   --persona-md-hr-margin: 1rem 0;
 
   /* Markdown Blockquote Variables */
-  --persona-md-blockquote-border-color: #3b82f6;
+  --persona-md-blockquote-border-color: #171717;
   --persona-md-blockquote-border-width: 3px;
   --persona-md-blockquote-padding: 0.5rem 1rem;
   --persona-md-blockquote-margin: 0.5rem 0;
@@ -154,8 +154,8 @@
   --persona-md-blockquote-font-style: italic;
 
   /* Markdown Code Block Variables */
-  --persona-md-code-block-bg: #f3f4f6;
-  --persona-md-code-block-border-color: #e5e7eb;
+  --persona-md-code-block-bg: var(--persona-container, #f3f4f6);
+  --persona-md-code-block-border-color: var(--persona-border, #e5e7eb);
   --persona-md-code-block-text-color: inherit;
   --persona-md-code-block-padding: 0.75rem;
   --persona-md-code-block-border-radius: 0.375rem;
@@ -250,11 +250,11 @@
 }
 
 .persona-text-persona-primary {
-  color: var(--persona-primary, #111827);
+  color: var(--persona-primary, #171717);
 }
 
 .persona-text-persona-call-to-action {
-  color: var(--persona-call-to-action, #ffffff);
+  color: var(--persona-call-to-action, var(--persona-text-inverse, #ffffff));
 }
 
 .persona-text-persona-muted {
@@ -266,11 +266,11 @@
 }
 
 .persona-bg-persona-accent {
-  background-color: var(--persona-accent, #2563eb);
+  background-color: var(--persona-accent, #0f0f0f);
 }
 
 .persona-bg-persona-primary {
-  background-color: var(--persona-primary, #111827);
+  background-color: var(--persona-button-primary-bg, var(--persona-primary, #111827));
 }
 
 .persona-italic {
@@ -533,8 +533,12 @@
   border-color: #f1f5f9;
 }
 
+.persona-border-persona-secondary {
+  border-color: var(--persona-secondary, #7c3aed);
+}
+
 .persona-border-persona-border {
-  border-color: var(--persona-border, #f1f5f9);
+  border-color: var(--persona-border, #e5e7eb);
 }
 
 .persona-border-t {
@@ -1209,7 +1213,7 @@
 }
 
 [data-persona-root] .persona-markdown-bubble a {
-  color: var(--persona-md-link-color, var(--persona-accent, #3b82f6));
+  color: var(--persona-md-link-color, var(--persona-accent, #0f0f0f));
   text-decoration: underline;
 }
 
@@ -1311,7 +1315,7 @@
 }
 
 [data-persona-root] .vanilla-message-assistant-bubble a {
-  color: var(--persona-md-link-color, var(--persona-accent, #3b82f6));
+  color: var(--persona-md-link-color, var(--persona-accent, #0f0f0f));
 }
 
 /* Markdown paragraph styles */
@@ -1791,7 +1795,7 @@
 
 .persona-message-action-btn:focus {
   outline: none;
-  box-shadow: 0 0 0 2px var(--persona-accent, #1d4ed8);
+  box-shadow: 0 0 0 2px var(--persona-accent, #0a0a0a);
 }
 
 .persona-message-action-btn:focus:not(:focus-visible) {
@@ -1799,17 +1803,17 @@
 }
 
 .persona-message-action-btn:focus-visible {
-  box-shadow: 0 0 0 2px var(--persona-accent, #1d4ed8);
+  box-shadow: 0 0 0 2px var(--persona-accent, #0a0a0a);
 }
 
 /* Active state (voted) */
 .persona-message-action-btn.persona-message-action-active {
-  background-color: var(--persona-accent, #1d4ed8);
+  background-color: var(--persona-accent, #0a0a0a);
   color: #ffffff;
 }
 
 .persona-message-action-btn.persona-message-action-active:hover {
-  background-color: var(--persona-accent, #1d4ed8);
+  background-color: var(--persona-accent, #0a0a0a);
   color: #ffffff;
   opacity: 0.9;
 }
@@ -1951,7 +1955,7 @@
 }
 
 .persona-feedback-number-btn:hover {
-  border-color: var(--persona-accent, #1d4ed8);
+  border-color: var(--persona-accent, #0a0a0a);
   background: var(--persona-container, #f3f4f6);
 }
 
@@ -1995,7 +1999,7 @@
 
 .persona-feedback-comment:focus {
   outline: none;
-  border-color: var(--persona-accent, #1d4ed8);
+  border-color: var(--persona-accent, #0a0a0a);
   box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
 }
 
@@ -2031,8 +2035,8 @@
 }
 
 .persona-feedback-btn-submit {
-  background: var(--persona-accent, #1d4ed8);
-  border: 1px solid var(--persona-accent, #1d4ed8);
+  background: var(--persona-accent, #0a0a0a);
+  border: 1px solid var(--persona-accent, #0a0a0a);
   color: #ffffff;
 }
 
@@ -2247,7 +2251,7 @@
 }
 
 [data-persona-root] .persona-icon-btn:focus-visible {
-  outline: 2px solid var(--persona-accent, #3b82f6);
+  outline: 2px solid var(--persona-accent, #171717);
   outline-offset: 2px;
 }
 
@@ -2279,7 +2283,7 @@
 }
 
 [data-persona-root] .persona-label-btn:focus-visible {
-  outline: 2px solid var(--persona-accent, #3b82f6);
+  outline: 2px solid var(--persona-accent, #171717);
   outline-offset: 2px;
 }
 
@@ -2294,7 +2298,7 @@
 }
 
 [data-persona-root] .persona-label-btn--primary {
-  background: var(--persona-primary, #3b82f6);
+  background: var(--persona-primary, #171717);
   color: var(--persona-text-inverse, #ffffff);
   border-color: transparent;
 }
@@ -2316,6 +2320,46 @@
   background: var(--persona-label-btn-hover-bg, var(--persona-container, #f3f4f6));
 }
 
+[data-persona-root] .persona-scroll-to-bottom-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--persona-scroll-to-bottom-gap, 0.5rem);
+  min-height: var(--persona-scroll-to-bottom-size, 40px);
+  border-radius: var(--persona-scroll-to-bottom-radius, var(--persona-radius-full, 9999px));
+  border: 1px solid var(--persona-scroll-to-bottom-border, var(--persona-primary, #111827));
+  background: var(--persona-scroll-to-bottom-bg, var(--persona-button-primary-bg, var(--persona-accent, #0f0f0f)));
+  color: var(--persona-scroll-to-bottom-fg, var(--persona-button-primary-fg, var(--persona-text-inverse, #ffffff)));
+  box-shadow: var(--persona-scroll-to-bottom-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+  font-size: var(--persona-scroll-to-bottom-font-size, 0.875rem);
+  line-height: 1;
+}
+
+[data-persona-root] .persona-scroll-to-bottom-indicator[data-persona-scroll-to-bottom-has-label="true"] {
+  padding: var(--persona-scroll-to-bottom-padding, 0.5rem 0.875rem);
+}
+
+[data-persona-root] .persona-scroll-to-bottom-indicator[data-persona-scroll-to-bottom-has-label="false"] {
+  width: var(--persona-scroll-to-bottom-size, 40px);
+  height: var(--persona-scroll-to-bottom-size, 40px);
+  padding: 0;
+  gap: 0;
+}
+
+[data-persona-root] .persona-scroll-to-bottom-indicator svg {
+  width: var(--persona-scroll-to-bottom-icon-size, 14px);
+  height: var(--persona-scroll-to-bottom-icon-size, 14px);
+}
+
+[data-persona-root] .persona-scroll-to-bottom-indicator:hover {
+  opacity: 0.92;
+}
+
+[data-persona-root] .persona-scroll-to-bottom-indicator:focus-visible {
+  outline: 2px solid var(--persona-accent, #171717);
+  outline-offset: 2px;
+}
+
 /* Toggle group — mutually exclusive button set created by createToggleGroup() */
 [data-persona-root] .persona-toggle-group {
   display: inline-flex;

package/src/theme-editor/color-utils.ts

@@ -0,0 +1,252 @@
+/** Color parsing, normalization, and scale generation utilities (pure functions — no DOM) */
+
+import type { ColorShade } from '../types/theme';
+
+// ─── CSS Value Parsing ──────────────────────────────────────────
+
+interface ParsedCssValue {
+  value: number;
+  unit: 'px' | 'rem';
+}
+
+export function parseCssValue(cssValue: string): ParsedCssValue {
+  const trimmed = cssValue.trim();
+
+  if (trimmed === '9999px') {
+    return { value: 100, unit: 'px' };
+  }
+
+  const match = trimmed.match(/^([\d.]+)(px|rem)$/);
+  if (!match) {
+    const numValue = parseFloat(trimmed);
+    return { value: isNaN(numValue) ? 0 : numValue, unit: 'px' };
+  }
+
+  return { value: parseFloat(match[1]), unit: match[2] as 'px' | 'rem' };
+}
+
+export function formatCssValue(value: number, unit: 'px' | 'rem'): string {
+  if (unit === 'rem') {
+    return `${value}rem`;
+  }
+  return `${value}px`;
+}
+
+export function convertToPx(value: number, unit: 'px' | 'rem'): number {
+  return unit === 'rem' ? value * 16 : value;
+}
+
+export function convertFromPx(pxValue: number, unit: 'px' | 'rem'): number {
+  return unit === 'rem' ? pxValue / 16 : pxValue;
+}
+
+// ─── Color Normalization ────────────────────────────────────────
+
+export function normalizeColorValue(value: string): string {
+  if (!value) return '#000000';
+
+  const trimmed = value.trim().toLowerCase();
+
+  if (trimmed === 'transparent') return 'transparent';
+  if (trimmed.startsWith('rgba') || trimmed.startsWith('rgb')) return trimmed;
+
+  if (trimmed.startsWith('#')) {
+    if (trimmed.length === 4) {
+      return `#${trimmed[1]}${trimmed[1]}${trimmed[2]}${trimmed[2]}${trimmed[3]}${trimmed[3]}`;
+    }
+    return trimmed;
+  }
+
+  return `#${trimmed}`;
+}
+
+export function isValidHex(value: string): boolean {
+  return /^#[0-9A-Fa-f]{6}$/.test(value);
+}
+
+// ─── WCAG Contrast ──────────────────────────────────────────────
+
+/**
+ * Compute WCAG 2.x contrast ratio between two hex colors.
+ * Returns a number ≥ 1 (e.g. 4.5 for AA normal text).
+ */
+export function wcagContrastRatio(hex1: string, hex2: string): number {
+  const luminance = (hex: string): number => {
+    const norm = normalizeColorValue(hex);
+    const channels = [1, 3, 5].map((i) => {
+      const v = parseInt(norm.slice(i, i + 2), 16) / 255;
+      return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2];
+  };
+  const l1 = luminance(hex1);
+  const l2 = luminance(hex2);
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+
+// ─── HSL Conversion ─────────────────────────────────────────────
+
+export function hexToHsl(hex: string): { h: number; s: number; l: number } {
+  const normalized = normalizeColorValue(hex);
+  const r = parseInt(normalized.slice(1, 3), 16) / 255;
+  const g = parseInt(normalized.slice(3, 5), 16) / 255;
+  const b = parseInt(normalized.slice(5, 7), 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+
+  if (max === min) {
+    return { h: 0, s: 0, l };
+  }
+
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+  let h: number;
+  switch (max) {
+    case r:
+      h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+      break;
+    case g:
+      h = ((b - r) / d + 2) / 6;
+      break;
+    default:
+      h = ((r - g) / d + 4) / 6;
+      break;
+  }
+
+  return { h: h * 360, s, l };
+}
+
+export function hslToHex(h: number, s: number, l: number): string {
+  const hue = ((h % 360) + 360) % 360;
+
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = l - c / 2;
+
+  let r: number, g: number, b: number;
+
+  if (hue < 60) {
+    [r, g, b] = [c, x, 0];
+  } else if (hue < 120) {
+    [r, g, b] = [x, c, 0];
+  } else if (hue < 180) {
+    [r, g, b] = [0, c, x];
+  } else if (hue < 240) {
+    [r, g, b] = [0, x, c];
+  } else if (hue < 300) {
+    [r, g, b] = [x, 0, c];
+  } else {
+    [r, g, b] = [c, 0, x];
+  }
+
+  const toHex = (n: number) => {
+    const hex = Math.round((n + m) * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+// ─── Color Scale Generation ─────────────────────────────────────
+
+/**
+ * Generate a full color scale (50-950) from a base color (shade 500).
+ * Uses HSL-based lightness interpolation for natural-looking scales.
+ */
+export function generateColorScale(baseHex: string): ColorShade {
+  const { h, s, l } = hexToHsl(baseHex);
+
+  const lightnessByShade: Record<string, number> = {
+    '50': 0.97,
+    '100': 0.94,
+    '200': 0.87,
+    '300': 0.77,
+    '400': 0.64,
+    '500': l,
+    '600': Math.max(0.05, l - 0.1),
+    '700': Math.max(0.05, l - 0.2),
+    '800': Math.max(0.05, l - 0.28),
+    '900': Math.max(0.05, l - 0.35),
+    '950': Math.max(0.03, l - 0.42),
+  };
+
+  const saturationByShade: Record<string, number> = {
+    '50': Math.min(1, s * 0.85),
+    '100': Math.min(1, s * 0.9),
+    '200': Math.min(1, s * 0.95),
+    '300': s,
+    '400': s,
+    '500': s,
+    '600': Math.min(1, s * 1.05),
+    '700': Math.min(1, s * 1.05),
+    '800': Math.min(1, s * 1.0),
+    '900': Math.min(1, s * 0.95),
+    '950': Math.min(1, s * 0.9),
+  };
+
+  const scale: ColorShade = {};
+  for (const [shade, targetL] of Object.entries(lightnessByShade)) {
+    const targetS = saturationByShade[shade];
+    scale[shade] = hslToHex(h, targetS, targetL);
+  }
+
+  return scale;
+}
+
+// ─── Constants & Helpers ────────────────────────────────────────
+
+export const SHADE_KEYS = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] as const;
+
+export const COLOR_FAMILIES = ['primary', 'secondary', 'accent', 'gray', 'success', 'warning', 'error', 'info'] as const;
+
+export function paletteColorPath(family: string, shade: string): string {
+  return `palette.colors.${family}.${shade}`;
+}
+
+/**
+ * Resolve a theme dot-path to a concrete CSS color string.
+ * Follows token references recursively (palette.*, semantic.*, components.*).
+ */
+export function resolveThemeColorPath(
+  get: (path: string) => unknown,
+  path: string,
+  depth = 0
+): string {
+  if (depth > 5) return '#cbd5e1';
+
+  const raw = get(path);
+  if (typeof raw !== 'string') return '#cbd5e1';
+  if (raw.startsWith('#') || raw.startsWith('rgb') || raw === 'transparent') return raw;
+
+  if (
+    raw.startsWith('palette.') ||
+    raw.startsWith('semantic.') ||
+    raw.startsWith('components.')
+  ) {
+    return resolveThemeColorPath(get, `theme.${raw}`, depth + 1);
+  }
+
+  return '#cbd5e1';
+}
+
+export function tokenRefDisplayName(path: string): string {
+  if (!path.startsWith('palette.') && !path.startsWith('semantic.')) {
+    return path;
+  }
+
+  const parts = path.split('.');
+  if (parts[0] === 'palette' && parts[1] === 'colors') {
+    const family = parts[2];
+    const shade = parts[3];
+    return `${family.charAt(0).toUpperCase() + family.slice(1)} ${shade}`;
+  }
+
+  if (parts[0] === 'semantic') {
+    return parts.slice(1).map(p => p.charAt(0).toUpperCase() + p.slice(1)).join(' ');
+  }
+
+  return parts[parts.length - 1];
+}

package/src/theme-editor/index.ts

@@ -0,0 +1,131 @@
+/** @runtypelabs/persona/theme-editor — Headless theme editor core */
+
+// Types
+export type {
+  FieldType,
+  FieldDef,
+  SectionDef,
+  SectionPreset,
+  TabDef,
+  SubGroupDef,
+  SliderOptions,
+  SelectOption,
+  ColorScaleOptions,
+  TokenRefOptions,
+  RoleTargetKind,
+  RoleTarget,
+  RoleIntensity,
+  RoleAssignmentOptions,
+  ThemeEditorPreset,
+  ConfiguratorSnapshot,
+  ConfigChangeListener,
+  OnChangeCallback,
+} from './types';
+
+// State
+export { ThemeEditorState } from './state';
+
+// Sections
+export {
+  STYLE_SECTIONS,
+  STYLE_SECTIONS_V2,
+  THEME_SECTION,
+  BRAND_PALETTE_SECTION,
+  STATUS_PALETTE_SECTION,
+  INTERFACE_ROLES_SECTION,
+  STATUS_COLORS_SECTION,
+  ADVANCED_TOKENS_SECTION,
+  COLORS_SECTIONS,
+  PALETTE_SECTION,
+  SEMANTIC_COLORS_SECTION,
+  COMPONENTS_SECTIONS,
+  COMPONENT_SHAPE_SECTIONS,
+  COMPONENT_COLOR_SECTIONS,
+  CONFIGURE_SECTIONS,
+  CONFIGURE_SUB_GROUPS,
+  ALL_TABS,
+  scopeSection,
+  findSection,
+} from './sections';
+
+// Presets
+export {
+  BUILT_IN_PRESETS,
+  THEME_EDITOR_PRESETS,
+  getThemeEditorPreset,
+} from './presets';
+
+// Preview renderer
+export { createThemePreview } from './preview';
+export type {
+  ThemePreviewOptions,
+  ThemePreviewHandle,
+  PreviewLifecycleContext,
+  PreviewDevice,
+  PreviewShellMode,
+  CompareMode,
+} from './preview';
+
+// Preview building blocks (for advanced/custom preview renderers)
+export {
+  DEVICE_DIMENSIONS,
+  ZOOM_MIN,
+  ZOOM_MAX,
+  SHELL_STYLE_ID,
+  PREVIEW_STORAGE_ADAPTER,
+  HOME_SUGGESTION_CHIPS,
+  MOCK_BROWSER_CONTENT,
+  MOCK_WORKSPACE_CONTENT,
+  escapeHtml,
+  getShellPalette,
+  buildShellCss,
+  applyShellTheme,
+  buildSrcdoc,
+  createPreviewMessages,
+  applySceneConfig,
+  buildPreviewConfig,
+} from './preview-utils';
+export type {
+  PreviewScene,
+  PreviewShellPalette,
+  PreviewConfigOptions,
+} from './preview-utils';
+
+// Role mappings (Interface Roles editor)
+export {
+  ROLE_INTENSITIES,
+  ROLE_FAMILIES,
+  ROLE_FAMILY_LABELS,
+  ROLE_SURFACES,
+  ROLE_HEADER,
+  ROLE_USER_MESSAGES,
+  ROLE_ASSISTANT_MESSAGES,
+  ROLE_PRIMARY_ACTIONS,
+  ROLE_SCROLL_TO_BOTTOM,
+  ROLE_INPUT,
+  ROLE_LINKS_FOCUS,
+  ROLE_BORDERS,
+  ALL_ROLES,
+  resolveRoleAssignment,
+  detectRoleAssignment,
+} from './role-mappings';
+export type { RoleFamily, DetectedRoleAssignment } from './role-mappings';
+
+// Color utilities
+export {
+  parseCssValue,
+  formatCssValue,
+  convertToPx,
+  convertFromPx,
+  normalizeColorValue,
+  isValidHex,
+  wcagContrastRatio,
+  hexToHsl,
+  hslToHex,
+  generateColorScale,
+  SHADE_KEYS,
+  COLOR_FAMILIES,
+  paletteColorPath,
+  resolveThemeColorPath,
+  tokenRefDisplayName,
+} from './color-utils';