@profpowell/vb-design-system 0.1.0

package/src/web-components/motion-specimen/logic.js

@@ -0,0 +1,146 @@
+/**
+ * motion-specimen: Design token motion scale display
+ *
+ * Shows easing curves with animated preview dots, or durations as bars.
+ * Use `type="easing"` (default), `type="duration"`, or `type="both"`.
+ *
+ * Layout styles are inline so the component works without external CSS.
+ * styles.css only contains keyframes and prefers-reduced-motion overrides.
+ *
+ * @attr {string} type - "easing" (default), "duration", or "both"
+ * @attr {string} tokens - Comma-separated token names (defaults vary by type)
+ * @attr {string} prefix - CSS variable prefix (auto-set from type if omitted)
+ * @attr {string} duration - Animation duration for easing previews (default "1.2s")
+ * @attr {boolean} show-values - Show computed values (default: true)
+ * @attr {string} label - Optional heading label
+ */
+import { registerComponent } from '../../lib/bundle-registry.js';
+import { VBElement } from '../../lib/vb-element.js';
+
+const DEFAULT_EASINGS = '1,2,3,4,5,in-1,in-2,in-3,out-1,out-2,out-3,out-4,out-5,elastic-1,elastic-2,squish-1,squish-2';
+const DEFAULT_DURATIONS = 'instant,fast,normal,slow,slower';
+
+const KEYFRAMES_ID = 'ms-keyframes';
+const KEYFRAMES_CSS = `
+@keyframes ms-slide { from { inset-inline-start: 0 } to { inset-inline-start: calc(100% - 1rem) } }
+@keyframes ms-fill { 0% { transform: scaleX(0) } 60% { transform: scaleX(1) } 100% { transform: scaleX(1); opacity: 0.3 } }
+@media (prefers-reduced-motion: reduce) {
+  motion-specimen .ms-dot { animation: none !important; inset-inline-start: calc(50% - 0.5rem) !important }
+  motion-specimen .ms-bar-fill { animation: none !important; transform: scaleX(0.6) !important; opacity: 0.6 !important }
+}
+`;
+
+function ensureKeyframes() {
+  if (typeof document === 'undefined' || document.getElementById(KEYFRAMES_ID)) return;
+  const style = document.createElement('style');
+  style.id = KEYFRAMES_ID;
+  style.textContent = KEYFRAMES_CSS;
+  document.head.append(style);
+}
+
+const MONO = 'var(--font-mono, monospace)';
+const MUTED = 'var(--color-text-muted, #666)';
+const INTERACTIVE = 'var(--color-interactive, oklch(55% 0.2 260))';
+const SUNKEN = 'var(--color-surface-sunken, #f1f1f1)';
+
+class MotionSpecimen extends VBElement {
+  static observedAttributes = ['type', 'tokens', 'prefix', 'duration', 'show-values', 'label'];
+
+  setup() {
+    ensureKeyframes();
+    this.#render();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected && this.hasAttribute('data-upgraded')) this.#render();
+  }
+
+  #render() {
+    const type = this.getAttribute('type') || 'easing';
+    const previewDuration = this.getAttribute('duration') || '1.2s';
+    const showValues = this.getAttribute('show-values') !== 'false';
+    const label = this.getAttribute('label') || '';
+
+    let html = '';
+    if (label) html += `<p style="font-weight:600;margin:0 0 var(--size-s,0.75rem)">${label}</p>`;
+
+    if (type === 'easing' || type === 'both') {
+      html += this.#renderEasingSection(previewDuration, showValues);
+    }
+    if (type === 'duration' || type === 'both') {
+      if (type === 'both') html += `<div aria-hidden="true" style="block-size:var(--size-m,1rem)"></div>`;
+      html += this.#renderDurationSection(showValues);
+    }
+
+    this.innerHTML = html;
+
+    if (showValues) {
+      requestAnimationFrame(() => this.#fillValues());
+    }
+  }
+
+  #rowStyle() {
+    return `display:grid;grid-template-columns:5rem 1fr auto;align-items:center;gap:var(--size-s,0.75rem);min-block-size:1.75rem`;
+  }
+
+  #nameStyle() {
+    return `font-family:${MONO};font-size:var(--font-size-sm,0.875rem);color:${MUTED};text-align:end`;
+  }
+
+  #valueStyle() {
+    return `font-family:${MONO};font-size:var(--font-size-xs,0.75rem);color:${MUTED};font-variant-numeric:tabular-nums;white-space:nowrap`;
+  }
+
+  #listStyle() {
+    return `list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem)`;
+  }
+
+  #renderEasingSection(previewDuration, showValues) {
+    const names = (this.getAttribute('tokens') || DEFAULT_EASINGS).split(',').map((s) => s.trim());
+    const prefix = this.getAttribute('prefix') || '--ease-';
+    const trackStyle = `position:relative;display:block;block-size:0.5rem;background:${SUNKEN};border-radius:999px`;
+    const dotStyle = `position:absolute;inset-block-start:50%;inset-inline-start:0;inline-size:1rem;block-size:1rem;background:${INTERACTIVE};border-radius:50%;transform:translateY(-50%)`;
+
+    const rows = names.map((name) => {
+      const varName = `${prefix}${name}`;
+      return `<li class="ms-row ms-row-ease" role="listitem" style="${this.#rowStyle()}">
+        <span style="${this.#nameStyle()}">${name}</span>
+        <span style="${trackStyle}" aria-hidden="true">
+          <span class="ms-dot" style="${dotStyle};animation: ms-slide ${previewDuration} var(${varName}) infinite alternate"></span>
+        </span>
+        ${showValues ? `<span class="ms-value" data-var="${varName}" style="${this.#valueStyle()}"></span>` : ''}
+      </li>`;
+    }).join('');
+    return `<ul class="ms-list" role="list" aria-label="Easing scale" style="${this.#listStyle()}">${rows}</ul>`;
+  }
+
+  #renderDurationSection(showValues) {
+    const names = (this.getAttribute('tokens') || DEFAULT_DURATIONS).split(',').map((s) => s.trim());
+    const prefix = this.getAttribute('prefix') || '--duration-';
+    const barStyle = `position:relative;display:block;block-size:0.5rem;background:${SUNKEN};border-radius:999px;overflow:hidden`;
+    const fillStyle = `position:absolute;inset-block:0;inset-inline-start:0;inline-size:100%;background:${INTERACTIVE};transform-origin:left center;animation-name:ms-fill;animation-iteration-count:infinite;animation-timing-function:linear`;
+
+    const rows = names.map((name) => {
+      const varName = `${prefix}${name}`;
+      return `<li class="ms-row ms-row-dur" role="listitem" style="${this.#rowStyle()}">
+        <span style="${this.#nameStyle()}">${name}</span>
+        <span style="${barStyle}" aria-hidden="true">
+          <span class="ms-bar-fill" style="${fillStyle};animation-duration: var(${varName})"></span>
+        </span>
+        ${showValues ? `<span class="ms-value" data-var="${varName}" style="${this.#valueStyle()}"></span>` : ''}
+      </li>`;
+    }).join('');
+    return `<ul class="ms-list" role="list" aria-label="Duration scale" style="${this.#listStyle()}">${rows}</ul>`;
+  }
+
+  #fillValues() {
+    this.querySelectorAll('.ms-value').forEach((el) => {
+      const v = el.getAttribute('data-var');
+      if (!v) return;
+      const computed = getComputedStyle(this).getPropertyValue(v).trim();
+      el.textContent = computed || '—';
+    });
+  }
+}
+
+registerComponent('motion-specimen', MotionSpecimen);

package/src/web-components/motion-specimen/static.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Motion Specimen (Static Fallback)</title>
+</head>
+<body>
+  <h1>Motion Specimen</h1>
+  <noscript><p>This component works best with JavaScript enabled.</p></noscript>
+  <motion-specimen></motion-specimen>
+</body>
+</html>

package/src/web-components/motion-specimen/styles.css

@@ -0,0 +1,29 @@
+/**
+ * motion-specimen: @keyframes and prefers-reduced-motion overrides.
+ * All layout styles are inline in logic.js so the component works without
+ * external CSS. Keyframes must be global to be referenced by animation: in
+ * inline styles.
+ */
+
+@keyframes ms-slide {
+  from { inset-inline-start: 0; }
+  to   { inset-inline-start: calc(100% - 1rem); }
+}
+
+@keyframes ms-fill {
+  0%   { transform: scaleX(0); }
+  60%  { transform: scaleX(1); }
+  100% { transform: scaleX(1); opacity: 0.3; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  motion-specimen .ms-dot {
+    animation: none !important;
+    inset-inline-start: calc(50% - 0.5rem) !important;
+  }
+  motion-specimen .ms-bar-fill {
+    animation: none !important;
+    transform: scaleX(0.6) !important;
+    opacity: 0.6 !important;
+  }
+}

package/src/web-components/palette-generator/_palette-utils.js

@@ -0,0 +1,133 @@
+/**
+ * Palette generation algorithms.
+ * All functions accept HSL values and return arrays of hex colors with names.
+ * Uses hue rotation in HSL space — same principle as the OKLCH harmonics
+ * in color-mix.css but computed in JS for dynamic generation.
+ */
+import { hexToHsl, hslToHex } from '../color-picker/_color-utils.js';
+
+/** Wrap hue to 0-360 range */
+const wrap = (h) => ((h % 360) + 360) % 360;
+
+/**
+ * Complementary: seed + opposite on the color wheel
+ * @param {number} h - Hue 0-360
+ * @param {number} s - Saturation 0-100
+ * @param {number} l - Lightness 0-100
+ * @returns {{ colors: string[], names: string[] }}
+ */
+export function complementary(h, s, l) {
+  return {
+    colors: [hslToHex(h, s, l), hslToHex(wrap(h + 180), s, l)],
+    names: ['Base', 'Complement'],
+  };
+}
+
+/**
+ * Analogous: three adjacent hues at ±30°
+ */
+export function analogous(h, s, l) {
+  return {
+    colors: [
+      hslToHex(wrap(h - 30), s, l),
+      hslToHex(h, s, l),
+      hslToHex(wrap(h + 30), s, l),
+    ],
+    names: ['Analog A', 'Base', 'Analog B'],
+  };
+}
+
+/**
+ * Triadic: three hues evenly spaced at 120°
+ */
+export function triadic(h, s, l) {
+  return {
+    colors: [
+      hslToHex(h, s, l),
+      hslToHex(wrap(h + 120), s, l),
+      hslToHex(wrap(h + 240), s, l),
+    ],
+    names: ['Base', 'Triad A', 'Triad B'],
+  };
+}
+
+/**
+ * Split-complementary: seed + two hues flanking the complement at ±30°
+ */
+export function splitComplementary(h, s, l) {
+  return {
+    colors: [
+      hslToHex(h, s, l),
+      hslToHex(wrap(h + 150), s, l),
+      hslToHex(wrap(h + 210), s, l),
+    ],
+    names: ['Base', 'Split A', 'Split B'],
+  };
+}
+
+/**
+ * Tetradic (square): four hues evenly spaced at 90°
+ */
+export function tetradic(h, s, l) {
+  return {
+    colors: [
+      hslToHex(h, s, l),
+      hslToHex(wrap(h + 90), s, l),
+      hslToHex(wrap(h + 180), s, l),
+      hslToHex(wrap(h + 270), s, l),
+    ],
+    names: ['Base', 'Tetrad A', 'Tetrad B', 'Tetrad C'],
+  };
+}
+
+/**
+ * Monochromatic: 11-step lightness ramp matching the 50-950 token scale.
+ * Preserves hue and adjusts saturation slightly at extremes for natural feel.
+ */
+const MONO_STEPS = [
+  { label: '50',  l: 96 },
+  { label: '100', l: 90 },
+  { label: '200', l: 80 },
+  { label: '300', l: 70 },
+  { label: '400', l: 60 },
+  { label: '500', l: 50 },
+  { label: '600', l: 40 },
+  { label: '700', l: 30 },
+  { label: '800', l: 22 },
+  { label: '900', l: 15 },
+  { label: '950', l: 10 },
+];
+
+export function monochromatic(h, s, _l) {
+  const colors = [];
+  const names = [];
+  for (const step of MONO_STEPS) {
+    // Desaturate slightly at light/dark extremes for a natural scale
+    const satAdj = step.l > 85 || step.l < 20 ? Math.max(s * 0.6, 5) : s;
+    colors.push(hslToHex(h, Math.round(satAdj), step.l));
+    names.push(step.label);
+  }
+  return { colors, names };
+}
+
+/** Algorithm lookup table */
+const algorithms = {
+  complementary,
+  analogous,
+  triadic,
+  'split-complementary': splitComplementary,
+  tetradic,
+  monochromatic,
+};
+
+/**
+ * Generate a palette from a hex seed and harmony name.
+ * @param {string} hex - Seed color as hex string
+ * @param {string} harmony - Algorithm name
+ * @returns {{ colors: string[], names: string[] }}
+ */
+export function generatePalette(hex, harmony) {
+  const { h, s, l } = hexToHsl(hex);
+  const fn = algorithms[harmony] || algorithms.complementary;
+  return fn(h, s, l);
+}

package/src/web-components/palette-generator/api.json

@@ -0,0 +1,79 @@
+{
+  "$schema": "../../../schemas/api.schema.json",
+  "element": "palette-generator",
+  "type": "web-component",
+  "description": "Generate color palettes from a seed color",
+  "attributes": [
+    {
+      "name": "seed",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "string",
+      "description": "Hex seed color (e.g. \"#6366f1\"). Overridden by child input if present"
+    },
+    {
+      "name": "harmony",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "string",
+      "description": "Algorithm: complementary, analogous, triadic, split-complementary, tetradic, monochromatic"
+    },
+    {
+      "name": "include-seed",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "boolean",
+      "description": "Whether the seed appears in the palette (default: true, implicit)"
+    },
+    {
+      "name": "show-export",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "boolean",
+      "description": "Show Copy Hex / Copy CSS toolbar below the palette"
+    },
+    {
+      "name": "layout",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "string",
+      "description": "Inherited: \"inline\" (default), \"grid\", \"list\""
+    },
+    {
+      "name": "size",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "string",
+      "description": "Inherited: \"sm\", \"md\" (default), \"lg\""
+    },
+    {
+      "name": "show-values",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "boolean",
+      "description": "Inherited: always show hex values on swatches"
+    },
+    {
+      "name": "show-names",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "boolean",
+      "description": "Inherited: show name labels"
+    },
+    {
+      "name": "role",
+      "kind": "native",
+      "purpose": "config"
+    }
+  ],
+  "events": [
+    {
+      "name": "color-palette:select"
+    },
+    {
+      "name": "palette-generator:generate"
+    }
+  ],
+  "childAttributes": [],
+  "structure": []
+}

package/src/web-components/palette-generator/logic.js

@@ -0,0 +1,288 @@
+/**
+ * palette-generator: Generate color palettes from a seed color
+ *
+ * Extends color-palette with algorithmic palette generation.
+ * Accepts a seed color (via attribute or child input/color-picker)
+ * and a harmony type to produce harmonious color swatches.
+ *
+ * @attr {string} seed - Hex seed color (e.g. "#6366f1"). Overridden by child input if present
+ * @attr {string} harmony - Algorithm: complementary, analogous, triadic, split-complementary, tetradic, monochromatic
+ * @attr {boolean} include-seed - Whether the seed appears in the palette (default: true, implicit)
+ * @attr {boolean} show-export - Show Copy Hex / Copy CSS toolbar below the palette
+ * @attr {string} layout - Inherited: "inline" (default), "grid", "list"
+ * @attr {string} size - Inherited: "sm", "md" (default), "lg"
+ * @attr {boolean} show-values - Inherited: always show hex values on swatches
+ * @attr {boolean} show-names - Inherited: show name labels
+ *
+ * @fires palette-generator:generate - When palette is computed, detail: { colors, harmony, seed }
+ * @fires color-palette:select - Inherited: when a swatch is clicked
+ *
+ * @example
+ * <palette-generator seed="#6366f1" harmony="triadic" show-values></palette-generator>
+ *
+ * @example Interactive with color-picker
+ * <palette-generator harmony="analogous" show-export>
+ *   <color-picker><input type="color" value="#6366f1"></color-picker>
+ * </palette-generator>
+ */
+import { registerComponent } from '../../lib/bundle-registry.js';
+import { VBElement } from '../../lib/vb-element.js';
+import { copyText } from '../../utils/copy-init.js';
+import { generatePalette } from './_palette-utils.js';
+import { hexToRgb } from '../color-picker/_color-utils.js';
+
+class PaletteGenerator extends VBElement {
+  static observedAttributes = ['seed', 'harmony', 'include-seed', 'show-export',
+    'layout', 'size', 'show-values', 'show-names'];
+
+  /** @type {HTMLElement|null} */
+  #pickerEl = null;
+  /** @type {string} */
+  #currentSeed = '';
+  /** @type {string[]} */
+  #colors = [];
+  /** @type {string[]} */
+  #names = [];
+
+  setup() {
+    // Find child picker — do NOT detach it
+    this.#pickerEl = this.querySelector('color-picker') || this.querySelector('input[type="color"]');
+
+    // Resolve seed
+    this.#currentSeed = this.#resolveSeed();
+    if (!this.#currentSeed) return;
+
+    this.#render();
+    this.#wireInteractive();
+    this.#emitGenerate();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected && this.hasAttribute('data-upgraded')) {
+      this.#currentSeed = this.#resolveSeed();
+      if (this.#currentSeed) this.#render();
+    }
+  }
+
+  /** Extract seed hex from the picker element or seed attribute */
+  #resolveSeed() {
+    if (this.#pickerEl) {
+      const cp = /** @type {any} */ (this.#pickerEl);
+      if (cp.tagName === 'COLOR-PICKER') {
+        // Try upgraded getter first, fall back to inner input
+        const val = cp.value;
+        if (val && val !== '#000000') return val;
+        const input = /** @type {HTMLInputElement | null} */ (cp.querySelector('input[type="color"]'));
+        return input?.value || val || '';
+      }
+      return cp.value || '';
+    }
+    return this.getAttribute('seed') || '';
+  }
+
+  /** Render the full component: picker area + swatches + export toolbar */
+  #render() {
+    const harmony = this.getAttribute('harmony') || 'complementary';
+    const layout = this.getAttribute('layout') || 'inline';
+    const size = this.getAttribute('size') || 'md';
+    const showValues = this.hasAttribute('show-values');
+    const showNames = this.hasAttribute('show-names');
+    const showExport = this.hasAttribute('show-export');
+
+    const { colors, names } = generatePalette(this.#currentSeed, harmony);
+    this.#colors = colors;
+    this.#names = names;
+
+    const sizes = { sm: 48, md: 80, lg: 120 };
+    const px = sizes[size] || 80;
+
+    // Build swatch HTML (same rendering as color-palette)
+    let containerStyle = `display:flex;flex-wrap:wrap;gap:var(--size-xs,0.5rem)`;
+    if (layout === 'grid') {
+      containerStyle = `display:grid;grid-template-columns:repeat(auto-fill,minmax(${px}px,1fr));gap:var(--size-xs,0.5rem)`;
+    } else if (layout === 'list') {
+      containerStyle = `display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)`;
+    }
+
+    const swatches = colors.map((color, i) => {
+      const name = names[i] || '';
+      const contrast = this.#contrastColor(color);
+      const wrapStyle = layout === 'list'
+        ? `display:flex;flex-direction:row;align-items:center;gap:0.75rem`
+        : `display:flex;flex-direction:column;align-items:center;gap:0.25rem;max-inline-size:${px}px`;
+      const boxSize = layout === 'list' ? 36 : px;
+      const formatted = color.length > 12 ? color.slice(0, 12) + '\u2026' : color;
+
+      return `<div class="swatch-wrap" role="listitem" style="${wrapStyle}">
+        <button type="button" class="color-box" data-index="${i}"
+          style="background:${color};color:${contrast};width:${boxSize}px;height:${boxSize}px;border:1px solid oklch(0% 0 0/0.15);border-radius:var(--radius-s,0.25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--font-mono,monospace);position:relative;overflow:hidden;flex-shrink:0"
+          title="Click to copy${name ? ': ' + name : ''}"
+          aria-label="${name || 'Color ' + (i + 1)}: ${color}">
+          <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${showValues ? '1' : '0'};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease">${formatted}</span>
+        </button>
+        ${showNames && name ? `<span style="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${name}</span>` : ''}
+      </div>`;
+    }).join('');
+
+    // Build export toolbar HTML
+    let exportHTML = '';
+    if (showExport) {
+      exportHTML = `<div class="pg-export" role="toolbar" aria-label="Export palette" style="display:flex;gap:0.5rem;margin-block-start:var(--size-xs,0.5rem)">
+        <button type="button" class="pg-copy-hex" style="padding:0.25rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#333);cursor:pointer;font-size:var(--font-size-xs,0.75rem);font-family:inherit">Copy Hex</button>
+        <button type="button" class="pg-copy-css" style="padding:0.25rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#333);cursor:pointer;font-size:var(--font-size-xs,0.75rem);font-family:inherit">Copy CSS</button>
+      </div>`;
+    }
+
+    // Remove everything except the picker, then insert palette + export
+    const pickerEl = this.#pickerEl;
+    for (const child of [...this.children]) {
+      if (child === pickerEl) continue;
+      if (child.classList?.contains('pg-seed-label')) continue;
+      child.remove();
+    }
+
+    // Add a label before the picker (once only — never move the picker)
+    if (pickerEl && !this.querySelector('.pg-seed-label')) {
+      const label = document.createElement('span');
+      label.className = 'pg-seed-label';
+      label.textContent = 'Seed Color';
+      pickerEl.before(label);
+    }
+
+    // Insert palette after picker (or at start if no picker)
+    const paletteDiv = document.createElement('div');
+    paletteDiv.className = `palette ${layout}`;
+    paletteDiv.setAttribute('role', 'list');
+    paletteDiv.setAttribute('aria-label', 'Color palette');
+    paletteDiv.style.cssText = containerStyle;
+    paletteDiv.innerHTML = swatches;
+
+    if (pickerEl) {
+      pickerEl.after(paletteDiv);
+    } else {
+      this.prepend(paletteDiv);
+    }
+
+    // Insert export toolbar
+    if (exportHTML) {
+      const tmp = document.createElement('div');
+      tmp.innerHTML = exportHTML;
+      if (tmp.firstElementChild) this.append(tmp.firstElementChild);
+    }
+
+    // Wire swatch interactions
+    this.#wireSwatches(paletteDiv, colors, names, showValues);
+
+    // Wire export buttons
+    if (showExport) {
+      this.#wireExport();
+    }
+  }
+
+  /** Wire click-to-copy and hover on swatches */
+  #wireSwatches(container, colors, names, showValues) {
+    container.querySelectorAll('.color-box').forEach((el) => {
+      const btn = /** @type {HTMLElement} */ (el);
+      if (!showValues) {
+        btn.addEventListener('pointerenter', () => {
+          const val = /** @type {HTMLElement | null} */ (btn.querySelector('.color-value'));
+          if (val) val.style.opacity = '1';
+        });
+        btn.addEventListener('pointerleave', () => {
+          const val = /** @type {HTMLElement | null} */ (btn.querySelector('.color-value'));
+          if (val) val.style.opacity = '0';
+        });
+      }
+
+      btn.addEventListener('click', () => {
+        const idx = Number(btn.dataset.index);
+        const color = colors[idx];
+        const name = names[idx] || '';
+        copyText(color, { button: btn, announceMessage: 'Color copied' });
+        this.dispatchEvent(new CustomEvent('color-palette:select', {
+          bubbles: true, detail: { color, name, index: idx },
+        }));
+        btn.style.outline = '3px solid currentColor';
+        btn.style.outlineOffset = '2px';
+        setTimeout(() => { btn.style.outline = ''; btn.style.outlineOffset = ''; }, 600);
+      });
+    });
+  }
+
+  /** Wire up interactive picker for live regeneration */
+  #wireInteractive() {
+    const cp = this.#pickerEl;
+    if (!cp) return;
+
+    if (cp.tagName === 'COLOR-PICKER') {
+      this.listen(cp, 'color-picker:change', (e) => {
+        this.#currentSeed = /** @type {CustomEvent} */ (e).detail.hex;
+        this.#render();
+        this.#emitGenerate();
+      });
+    } else {
+      this.listen(cp, 'input', () => {
+        this.#currentSeed = /** @type {any} */ (cp).value;
+        this.#render();
+        this.#emitGenerate();
+      });
+    }
+  }
+
+  /** Wire export toolbar buttons */
+  #wireExport() {
+    const hexBtn = this.querySelector('.pg-copy-hex');
+    const cssBtn = this.querySelector('.pg-copy-css');
+
+    if (hexBtn) {
+      hexBtn.addEventListener('click', () => {
+        copyText(this.#colors.join(', '), {
+          button: /** @type {HTMLElement} */ (hexBtn),
+          announceMessage: 'Hex values copied',
+        });
+      });
+    }
+
+    if (cssBtn) {
+      cssBtn.addEventListener('click', () => {
+        const harmony = this.getAttribute('harmony') || 'complementary';
+        const css = this.#formatCSSExport(harmony);
+        copyText(css, {
+          button: /** @type {HTMLElement} */ (cssBtn),
+          announceMessage: 'CSS variables copied',
+        });
+      });
+    }
+  }
+
+  /** Return black or white depending on perceived lightness */
+  #contrastColor(color) {
+    if (color.startsWith('#')) {
+      const { r, g, b } = hexToRgb(color);
+      const lum = 0.2126 * (r / 255) + 0.7152 * (g / 255) + 0.0722 * (b / 255);
+      return lum > 0.4 ? '#000' : '#fff';
+    }
+    return '#000';
+  }
+
+  /** Format colors as CSS custom properties */
+  #formatCSSExport(harmony) {
+    if (harmony === 'monochromatic') {
+      return this.#colors.map((c, i) => `--color-seed-${this.#names[i] || i + 1}: ${c};`).join('\n');
+    }
+    return this.#colors.map((c, i) => {
+      const name = this.#names[i] ? this.#names[i].toLowerCase().replace(/\s+/g, '-') : `${i + 1}`;
+      return `--palette-${name}: ${c};`;
+    }).join('\n');
+  }
+
+  #emitGenerate() {
+    const harmony = this.getAttribute('harmony') || 'complementary';
+    this.dispatchEvent(new CustomEvent('palette-generator:generate', {
+      bubbles: true,
+      detail: { colors: [...this.#colors], harmony, seed: this.#currentSeed },
+    }));
+  }
+}
+
+registerComponent('palette-generator', PaletteGenerator);