@adia-ai/web-components 0.4.6 → 0.4.8

package/components/upload/class.js

@@ -0,0 +1,199 @@
+/**
+ * Non-side-effect class export for `<upload-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/upload`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <upload-ui> — File upload with drag-and-drop.
+ * Uses showOpenFilePicker (modern) with <input type="file"> fallback.
+ * Form-associated via UIFormElement + ElementInternals.
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export class UIUpload extends UIFormElement {
+  static properties = {
+    ...UIFormElement.properties,
+    label:    { type: String,  default: '', reflect: true },
+    accept:   { type: String,  default: '', reflect: true },
+    multiple: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #files = [];
+  #dropzoneEl = null;
+
+  connected() {
+    super.connected();
+
+    if (!this.querySelector('[data-dropzone]')) {
+      this.innerHTML = `
+        <div data-dropzone tabindex="0" role="button">Drop files here or click to browse</div>
+        <span hint="${this.hint || ''}"></span>
+        <div data-filelist></div>
+      `;
+    }
+
+    this.#dropzoneEl = this.querySelector('[data-dropzone]');
+    if (this.#dropzoneEl) {
+      this.#dropzoneEl.addEventListener('click', this.#onClickZone);
+      this.#dropzoneEl.addEventListener('keydown', this.#onKeyZone);
+      this.#dropzoneEl.addEventListener('dragover', this.#onDragOver);
+      this.#dropzoneEl.addEventListener('dragleave', this.#onDragLeave);
+      this.#dropzoneEl.addEventListener('drop', this.#onDrop);
+    }
+  }
+
+  render() {
+    const filelist = this.querySelector('[data-filelist]');
+    if (!this.#dropzoneEl || !filelist) return;
+
+    // Update hint attribute
+    const hintEl = this.querySelector('span[hint]');
+    if (hintEl && this.hint) hintEl.setAttribute('hint', this.hint);
+
+    // Render file list
+    filelist.innerHTML = '';
+    for (const f of this.#files) {
+      const span = document.createElement('span');
+      span.textContent = f.name;
+      filelist.appendChild(span);
+    }
+  }
+
+  get files() {
+    return this.#files;
+  }
+
+  // ── File picking ──
+
+  #onClickZone = () => {
+    if (this.disabled) return;
+    this.#pickFiles();
+  };
+
+  #onKeyZone = (e) => {
+    if (this.disabled) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.#pickFiles();
+    }
+  };
+
+  async #pickFiles() {
+    try {
+      if (window.showOpenFilePicker) {
+        const types = this.#parseAcceptTypes();
+        const opts = { multiple: this.multiple };
+        if (types.length) opts.types = types;
+        const handles = await window.showOpenFilePicker(opts);
+        if (!this.isConnected) return;
+        const files = await Promise.all(handles.map(h => h.getFile()));
+        if (!this.isConnected) return;
+        this.#setFiles(files);
+      } else {
+        this.#pickFallback();
+      }
+    } catch (err) {
+      // User cancelled — AbortError is expected
+      if (err.name !== 'AbortError') throw err;
+    }
+  }
+
+  #pickFallback() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    if (this.accept) input.accept = this.accept;
+    if (this.multiple) input.multiple = true;
+    input.style.display = 'none';
+    document.body.appendChild(input);
+    input.addEventListener('change', () => {
+      if (input.files?.length) {
+        this.#setFiles([...input.files]);
+      }
+      input.remove();
+    }, { once: true });
+    // Handle cancel (input removed on blur after a delay)
+    input.addEventListener('cancel', () => input.remove(), { once: true });
+    input.click();
+  }
+
+  /**
+   * Parse the accept attribute into showOpenFilePicker types array.
+   * e.g. "image/*,.pdf" → [{ accept: { "image/*": [], "application/pdf": [".pdf"] } }]
+   */
+  #parseAcceptTypes() {
+    if (!this.accept) return [];
+    const accept = {};
+    for (const part of this.accept.split(',')) {
+      const token = part.trim();
+      if (!token) continue;
+      if (token.startsWith('.')) {
+        // Extension — map to wildcard
+        accept['application/octet-stream'] = accept['application/octet-stream'] || [];
+        accept['application/octet-stream'].push(token);
+      } else {
+        accept[token] = accept[token] || [];
+      }
+    }
+    return Object.keys(accept).length ? [{ accept }] : [];
+  }
+
+  // ── Drag-and-drop ──
+
+  #onDragOver = (e) => {
+    e.preventDefault();
+    this.querySelector('[data-dropzone]')?.setAttribute('data-dragover', '');
+  };
+
+  #onDragLeave = () => {
+    this.querySelector('[data-dropzone]')?.removeAttribute('data-dragover');
+  };
+
+  #onDrop = (e) => {
+    e.preventDefault();
+    this.querySelector('[data-dropzone]')?.removeAttribute('data-dragover');
+    if (this.disabled) return;
+    const dt = e.dataTransfer;
+    if (dt?.files?.length) {
+      this.#setFiles([...dt.files]);
+    }
+  };
+
+  // ── Internal state ──
+
+  #setFiles(fileArray) {
+    this.#files = fileArray;
+
+    // Set form value as FormData
+    const fd = new FormData();
+    for (const f of this.#files) {
+      fd.append(this.name || 'file', f);
+    }
+    this.internals.setFormValue(fd);
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value, files: this.files } }));
+    this.render();
+  }
+
+  disconnected() {
+    super.disconnected();
+    if (this.#dropzoneEl) {
+      this.#dropzoneEl.removeEventListener('click', this.#onClickZone);
+      this.#dropzoneEl.removeEventListener('keydown', this.#onKeyZone);
+      this.#dropzoneEl.removeEventListener('dragover', this.#onDragOver);
+      this.#dropzoneEl.removeEventListener('dragleave', this.#onDragLeave);
+      this.#dropzoneEl.removeEventListener('drop', this.#onDrop);
+    }
+    this.#dropzoneEl = null;
+  }
+}

package/components/upload/upload.a2ui.json

@@ -64,6 +64,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [],
     "events": {
       "change": {
         "description": "Fired when files are selected via click or drag-and-drop"

package/components/upload/upload.js

@@ -1,189 +1,17 @@
 /**
- * <upload-ui> — File upload with drag-and-drop.
- * Uses showOpenFilePicker (modern) with <input type="file"> fallback.
- * Form-associated via UIFormElement + ElementInternals.
+ * `<upload-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIUpload } from '@adia-ai/web-components/components/upload/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIFormElement } from '../../core/form.js';
+import { defineIfFree } from '../../core/register.js';
+import { UIUpload } from './class.js';
 
-class UIUpload extends UIFormElement {
-  static properties = {
-    ...UIFormElement.properties,
-    label:    { type: String,  default: '', reflect: true },
-    accept:   { type: String,  default: '', reflect: true },
-    multiple: { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  #files = [];
-  #dropzoneEl = null;
-
-  connected() {
-    super.connected();
-
-    if (!this.querySelector('[data-dropzone]')) {
-      this.innerHTML = `
-        <div data-dropzone tabindex="0" role="button">Drop files here or click to browse</div>
-        <span hint="${this.hint || ''}"></span>
-        <div data-filelist></div>
-      `;
-    }
-
-    this.#dropzoneEl = this.querySelector('[data-dropzone]');
-    if (this.#dropzoneEl) {
-      this.#dropzoneEl.addEventListener('click', this.#onClickZone);
-      this.#dropzoneEl.addEventListener('keydown', this.#onKeyZone);
-      this.#dropzoneEl.addEventListener('dragover', this.#onDragOver);
-      this.#dropzoneEl.addEventListener('dragleave', this.#onDragLeave);
-      this.#dropzoneEl.addEventListener('drop', this.#onDrop);
-    }
-  }
-
-  render() {
-    const filelist = this.querySelector('[data-filelist]');
-    if (!this.#dropzoneEl || !filelist) return;
-
-    // Update hint attribute
-    const hintEl = this.querySelector('span[hint]');
-    if (hintEl && this.hint) hintEl.setAttribute('hint', this.hint);
-
-    // Render file list
-    filelist.innerHTML = '';
-    for (const f of this.#files) {
-      const span = document.createElement('span');
-      span.textContent = f.name;
-      filelist.appendChild(span);
-    }
-  }
-
-  get files() {
-    return this.#files;
-  }
-
-  // ── File picking ──
-
-  #onClickZone = () => {
-    if (this.disabled) return;
-    this.#pickFiles();
-  };
-
-  #onKeyZone = (e) => {
-    if (this.disabled) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      this.#pickFiles();
-    }
-  };
-
-  async #pickFiles() {
-    try {
-      if (window.showOpenFilePicker) {
-        const types = this.#parseAcceptTypes();
-        const opts = { multiple: this.multiple };
-        if (types.length) opts.types = types;
-        const handles = await window.showOpenFilePicker(opts);
-        if (!this.isConnected) return;
-        const files = await Promise.all(handles.map(h => h.getFile()));
-        if (!this.isConnected) return;
-        this.#setFiles(files);
-      } else {
-        this.#pickFallback();
-      }
-    } catch (err) {
-      // User cancelled — AbortError is expected
-      if (err.name !== 'AbortError') throw err;
-    }
-  }
-
-  #pickFallback() {
-    const input = document.createElement('input');
-    input.type = 'file';
-    if (this.accept) input.accept = this.accept;
-    if (this.multiple) input.multiple = true;
-    input.style.display = 'none';
-    document.body.appendChild(input);
-    input.addEventListener('change', () => {
-      if (input.files?.length) {
-        this.#setFiles([...input.files]);
-      }
-      input.remove();
-    }, { once: true });
-    // Handle cancel (input removed on blur after a delay)
-    input.addEventListener('cancel', () => input.remove(), { once: true });
-    input.click();
-  }
-
-  /**
-   * Parse the accept attribute into showOpenFilePicker types array.
-   * e.g. "image/*,.pdf" → [{ accept: { "image/*": [], "application/pdf": [".pdf"] } }]
-   */
-  #parseAcceptTypes() {
-    if (!this.accept) return [];
-    const accept = {};
-    for (const part of this.accept.split(',')) {
-      const token = part.trim();
-      if (!token) continue;
-      if (token.startsWith('.')) {
-        // Extension — map to wildcard
-        accept['application/octet-stream'] = accept['application/octet-stream'] || [];
-        accept['application/octet-stream'].push(token);
-      } else {
-        accept[token] = accept[token] || [];
-      }
-    }
-    return Object.keys(accept).length ? [{ accept }] : [];
-  }
-
-  // ── Drag-and-drop ──
-
-  #onDragOver = (e) => {
-    e.preventDefault();
-    this.querySelector('[data-dropzone]')?.setAttribute('data-dragover', '');
-  };
-
-  #onDragLeave = () => {
-    this.querySelector('[data-dropzone]')?.removeAttribute('data-dragover');
-  };
-
-  #onDrop = (e) => {
-    e.preventDefault();
-    this.querySelector('[data-dropzone]')?.removeAttribute('data-dragover');
-    if (this.disabled) return;
-    const dt = e.dataTransfer;
-    if (dt?.files?.length) {
-      this.#setFiles([...dt.files]);
-    }
-  };
-
-  // ── Internal state ──
-
-  #setFiles(fileArray) {
-    this.#files = fileArray;
-
-    // Set form value as FormData
-    const fd = new FormData();
-    for (const f of this.#files) {
-      fd.append(this.name || 'file', f);
-    }
-    this.internals.setFormValue(fd);
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value, files: this.files } }));
-    this.render();
-  }
-
-  disconnected() {
-    super.disconnected();
-    if (this.#dropzoneEl) {
-      this.#dropzoneEl.removeEventListener('click', this.#onClickZone);
-      this.#dropzoneEl.removeEventListener('keydown', this.#onKeyZone);
-      this.#dropzoneEl.removeEventListener('dragover', this.#onDragOver);
-      this.#dropzoneEl.removeEventListener('dragleave', this.#onDragLeave);
-      this.#dropzoneEl.removeEventListener('drop', this.#onDrop);
-    }
-    this.#dropzoneEl = null;
-  }
-}
-customElements.define('upload-ui', UIUpload);
+defineIfFree('upload-ui', UIUpload);
 
 export { UIUpload };

package/core/icons-phosphor.js

@@ -0,0 +1,93 @@
+/**
+ * Phosphor icon glob — side-effect module that wires the full
+ * @phosphor-icons/core asset tree (~9000 SVGs × 6 weights) into the
+ * registry exposed by `./icons.js`.
+ *
+ * ## When to import this
+ *
+ *   import '@adia-ai/web-components/core/icons-phosphor';
+ *
+ * Use this only when you want any Phosphor name to resolve without
+ * pre-registering it. The main barrel (`import '@adia-ai/web-components'`)
+ * and the core barrel (`import '@adia-ai/web-components/core'`) already
+ * side-effect-import this file for zero-config users.
+ *
+ * ## What this costs
+ *
+ * `import.meta.glob` with the default lazy mode tells Vite to emit one
+ * code-split chunk per matched file. The full Phosphor set is ~9000 SVGs
+ * (~1500 names × 6 weights), so `vite build` emits ~9000 chunks even if
+ * your app only renders 2 icons. The chunks are HTTP-cacheable, but:
+ *
+ *   - `vite build` graph cost scales with the Phosphor set, not your usage
+ *   - `.vite/deps` cache grows >100 MB during dev
+ *   - Static deploys without incremental upload push tens of thousands of
+ *     tiny files on every deploy
+ *   - Rollup warns "(!) Some chunks are larger than 500 KB"
+ *
+ * For production bundles with size SLOs, skip this side-effect import and
+ * register only the icons you use:
+ *
+ *   import { installIconLoaders } from '@adia-ai/web-components/core/icons';
+ *   installIconLoaders({
+ *     regular: import.meta.glob(
+ *       '/node_modules/@phosphor-icons/core/assets/regular/{caret-right,moon,sun,x}.svg',
+ *       { query: '?raw', import: 'default', eager: true }
+ *     ),
+ *   });
+ *
+ * Brace-list globs are statically analyzed; only the named files are
+ * emitted as chunks (or inlined when `eager: true`).
+ *
+ * ## Vite glob detection
+ *
+ * `import.meta.glob` is a build-time macro — Vite's AST transform replaces
+ * each call with a literal `{ path: loader }` object before the module
+ * reaches the browser. At runtime `import.meta.glob` is undefined, so a
+ * direct call throws. We wrap the assignment in try/catch to handle both:
+ *
+ *   - Vite dev/build → rewritten to literals → try block succeeds
+ *   - Static  serving → actual runtime call throws → catch falls through
+ *     to the manifest fetch below
+ */
+
+import { installIconLoaders } from './icons.js';
+
+let weightModules;
+let hasViteGlob = false;
+try {
+  weightModules = {
+    regular: import.meta.glob('/node_modules/@phosphor-icons/core/assets/regular/*.svg', { query: '?raw', import: 'default' }),
+    thin:    import.meta.glob('/node_modules/@phosphor-icons/core/assets/thin/*.svg',    { query: '?raw', import: 'default' }),
+    light:   import.meta.glob('/node_modules/@phosphor-icons/core/assets/light/*.svg',   { query: '?raw', import: 'default' }),
+    bold:    import.meta.glob('/node_modules/@phosphor-icons/core/assets/bold/*.svg',    { query: '?raw', import: 'default' }),
+    fill:    import.meta.glob('/node_modules/@phosphor-icons/core/assets/fill/*.svg',    { query: '?raw', import: 'default' }),
+    duotone: import.meta.glob('/node_modules/@phosphor-icons/core/assets/duotone/*.svg', { query: '?raw', import: 'default' }),
+  };
+  hasViteGlob = true;
+} catch {
+  /* non-Vite static serving — manifest fetch below handles it */
+}
+
+if (hasViteGlob) {
+  installIconLoaders(weightModules);
+} else {
+  // Non-Vite static serving: fetch the build-time manifest in the
+  // background. No top-level await — module finishes loading immediately;
+  // icons appear once the one-shot manifest fetch resolves.
+  // The specifier is hidden behind a variable so Vite's static analysis
+  // never tries to pre-resolve it in dev (where the file doesn't exist).
+  const manifestSpec = './icons-manifest.js';
+  import(/* @vite-ignore */ manifestSpec).then(({ default: manifest }) => {
+    const modules = Object.fromEntries(Object.entries(manifest).map(([weight, names]) => {
+      const prefix = `/node_modules/@phosphor-icons/core/assets/${weight}/`;
+      const entries = names.map(name => {
+        const path = prefix + name;
+        const loader = () => fetch(path).then(r => r.ok ? r.text() : Promise.reject(new Error(`icon fetch failed: ${path}`)));
+        return [path, loader];
+      });
+      return [weight, Object.fromEntries(entries)];
+    }));
+    installIconLoaders(modules);
+  }).catch(() => { /* manifest missing — registry stays empty; consumers can registerIcon() themselves */ });
+}