Image dropzone

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-image-dropzone> is the SAME shared custom element React and Vue consume — here in its native
     form. Theming comes only from the --aha-* tokens in tokens.css. It EMITS intents
     (add/change/edit/delete) — the host runs the upload/crop modals; this field owns none. -->
<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/aha-image-dropzone.js';   // registers <aha-image-dropzone>
</script>

<div style="max-width:420px">
  <aha-image-dropzone id="bg" state="empty" label="Add background image"></aha-image-dropzone>
</div>

<script type="module">
  const el = document.getElementById('bg');
  // The host owns the flow: on `add`, open your uploader, flip to loading, then filled + src.
  el.addEventListener('add', () => {
    el.state = 'loading';
    setTimeout(() => { el.src = 'https://picsum.photos/640/240'; el.state = 'filled'; }, 900);
  });
  el.addEventListener('delete', () => { el.removeAttribute('src'); el.state = 'empty'; });
</script>

import '@ahaslides-product/design/aha-image-dropzone'; // registers <aha-image-dropzone>
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper; React 19 can use <aha-image-dropzone> directly.
// It emits intents; the host owns the modals — drive state/src from your upload flow.
function AhaImageDropzone({ state, src, label, disabled, onAdd, onChange, onEdit, onDelete }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const map = { add: onAdd, change: onChange, edit: onEdit, delete: onDelete };
    const on = Object.entries(map).map(([k, fn]) => { const h = () => fn?.(); el.addEventListener(k, h); return [k, h]; });
    return () => on.forEach(([k, h]) => el.removeEventListener(k, h));
  }, [onAdd, onChange, onEdit, onDelete]);
  return (
    <aha-image-dropzone
      ref={ref}
      state={state || 'empty'}
      {...(src ? { src } : {})}
      {...(label ? { label } : {})}
      {...(disabled ? { disabled: '' } : {})}
    />
  );
}

// usage — the host runs the uploader and flips state
<AhaImageDropzone
  state={bg ? 'filled' : 'empty'}
  src={bg}
  label="Add background image"
  onAdd={openUploader}
  onDelete={() => setBg(null)}
/>

// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/aha-image-dropzone';   // registers <aha-image-dropzone>
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<script setup>
import { ref } from 'vue';
const bg = ref(null);
const state = ref('empty');
function onAdd() { state.value = 'loading'; upload().then((url) => { bg.value = url; state.value = 'filled'; }); }
function onDelete() { bg.value = null; state.value = 'empty'; }
</script>

<template>
  <!-- emits intents; the host owns the upload/crop modals -->
  <aha-image-dropzone
    :state="state"
    :src="bg || undefined"
    label="Add background image"
    @add="onAdd"
    @edit="openCropper"
    @delete="onDelete"
  />
</template>