Color picker

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-color-picker> is the SAME shared custom element React and Vue consume.
     Defaults to the brand ramp; override with swatches="#hex|#hex". size = small|default|large,
     disabled greys the control. The swatch matching value is ringed + checked. Emits a composed `change`. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/icons.js';          // <aha-icon> — the selected-swatch check glyph
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-color-picker.js';   // registers <aha-color-picker>
</script>

<aha-color-picker id="pick" value="#6A1EBB" size="default"></aha-color-picker>
<aha-color-picker value="#FF4081" size="small"></aha-color-picker>
<aha-color-picker value="#20E8B5" size="large"></aha-color-picker>
<aha-color-picker value="#6A1EBB" disabled></aha-color-picker>
<aha-color-picker value="#0FB5C4" swatches="#0FB5C4|#6A1EBB|#FF4081|#1A1A1A"></aha-color-picker>

<script>
  // Plain DOM — no framework. Read e.detail.value off the composed CustomEvent.
  document.getElementById('pick').addEventListener('change', (e) => {
    console.log('colour:', e.detail.value);
  });
</script>

import '@ahaslides-product/design/icons';            // <aha-icon> — the selected-swatch check glyph
import '@ahaslides-product/design/aha-color-picker';   // registers <aha-color-picker>
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper; React 19 can use <aha-color-picker> directly.
function AhaColorPicker({ value, swatches, size, disabled, onChange }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    if (value) el.value = value;
    const h = (e) => onChange?.(e.detail.value);   // composed CustomEvent
    el.addEventListener('change', h);
    return () => el.removeEventListener('change', h);
  });
  return <aha-color-picker ref={ref} swatches={swatches} size={size} disabled={disabled || undefined} />;
}

// usage
<AhaColorPicker value={colour} size="large" onChange={setColour} />

// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/icons';            // <aha-icon> — the selected-swatch check glyph
import '@ahaslides-product/design/aha-color-picker';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<script setup>
import { ref } from 'vue';
const colour = ref('#6A1EBB');
</script>

<template>
  <aha-color-picker
    :value.prop="colour"
    size="large"
    @change="colour = $event.detail.value"
  />
</template>