@adia-ai/web-components 0.4.5 → 0.4.7

package/components/tree/tree.js

@@ -1,253 +1,18 @@
 /**
- * <tree-ui> — Collapsible tree with nested items.
+ * `<tree-ui>` — auto-registers the tag on import.
  *
- * Structure:
- *   <tree-ui>
- *     <tree-item-ui text="Page" icon="file">
- *       <tree-item-ui text="Header" icon="layout"></tree-item-ui>
- *       <tree-item-ui text="Hero" icon="image">
- *         <tree-item-ui text="Title" icon="text-aa"></tree-item-ui>
- *         <tree-item-ui text="CTA" icon="cursor-click"></tree-item-ui>
- *       </tree-item-ui>
- *       <tree-item-ui text="Footer" icon="layout"></tree-item-ui>
- *     </tree-item-ui>
- *   </tree-ui>
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * tree-ui is the root container. tree-item-ui handles nesting, collapse, selection.
+ *   import { UITree, UITreeItem } from '@adia-ai/web-components/components/tree/class';
  *
- * Events:
- *   tree-select — fired on tree-ui when an item is selected (detail: { item, text, value })
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
+import { defineIfFree } from '../../core/register.js';
+import { UITree, UITreeItem } from './class.js';
 
-class UITree extends UIElement {
-  static template = () => null;
-
-  connected() {
-    this.setAttribute('role', 'tree');
-    this.addEventListener('click', this.#onClick);
-    this.addEventListener('keydown', this.#onKey);
-  }
-
-  get selectedItem() {
-    return this.querySelector('tree-item-ui[selected]');
-  }
-
-  select(item) {
-    const prev = this.selectedItem;
-    if (prev && prev !== item) prev.removeAttribute('selected');
-    item.setAttribute('selected', '');
-    this.dispatchEvent(new CustomEvent('tree-select', {
-      bubbles: true,
-      detail: { item, text: item.text, value: item.value },
-    }));
-  }
-
-  #onClick = (e) => {
-    const item = e.target.closest('tree-item-ui');
-    if (!item || !this.contains(item)) return;
-
-    // Ignore clicks on action buttons inside the row
-    if (e.target.closest('[slot="actions"] *')) return;
-
-    const row = item.querySelector(':scope > [slot="row"]');
-    if (!row || !(e.target === row || row.contains(e.target))) return;
-
-    // Single click: select + toggle if has children
-    this.select(item);
-    if (item.hasChildren) {
-      item.open = !item.open;
-    }
-  };
-
-  #onKey = (e) => {
-    const item = e.target.closest('tree-item-ui');
-    if (!item) return;
-
-    switch (e.key) {
-      case 'ArrowRight':
-        e.preventDefault();
-        if (item.hasChildren && !item.open) {
-          item.open = true;
-        } else {
-          const first = item.querySelector(':scope > tree-item-ui');
-          if (first) first.querySelector('[slot="row"]')?.focus();
-        }
-        break;
-
-      case 'ArrowLeft':
-        e.preventDefault();
-        if (item.hasChildren && item.open) {
-          item.open = false;
-        } else {
-          const parent = item.parentElement?.closest('tree-item-ui');
-          if (parent) parent.querySelector(':scope > [slot="row"]')?.focus();
-        }
-        break;
-
-      case 'ArrowDown': {
-        e.preventDefault();
-        const next = this.#nextVisible(item);
-        if (next) next.querySelector(':scope > [slot="row"]')?.focus();
-        break;
-      }
-
-      case 'ArrowUp': {
-        e.preventDefault();
-        const prev = this.#prevVisible(item);
-        if (prev) prev.querySelector(':scope > [slot="row"]')?.focus();
-        break;
-      }
-
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        this.select(item);
-        break;
-    }
-  };
-
-  #nextVisible(item) {
-    // If has visible children, go into first child
-    if (item.open && item.hasChildren) {
-      return item.querySelector(':scope > tree-item-ui');
-    }
-    // Otherwise find next sibling or parent's next sibling
-    let current = item;
-    while (current) {
-      const next = current.nextElementSibling;
-      if (next && next.matches('tree-item-ui')) return next;
-      current = current.parentElement?.closest('tree-item-ui');
-    }
-    return null;
-  }
-
-  #prevVisible(item) {
-    const prev = item.previousElementSibling;
-    if (prev && prev.matches('tree-item-ui')) {
-      // Go to last visible descendant of previous sibling
-      let last = prev;
-      while (last.open && last.hasChildren) {
-        const children = last.querySelectorAll(':scope > tree-item-ui');
-        last = children[children.length - 1];
-      }
-      return last;
-    }
-    // Go to parent
-    const parent = item.parentElement?.closest('tree-item-ui');
-    return parent || null;
-  }
-
-  disconnected() {
-    this.removeEventListener('click', this.#onClick);
-    this.removeEventListener('keydown', this.#onKey);
-  }
-}
-customElements.define('tree-ui', UITree);
-
-
-/**
- * <tree-item-ui> — A single node in the tree.
- *
- * Attributes:
- *   text     — display label
- *   icon     — icon name (optional, rendered via icon-ui)
- *   value    — value for selection events
- *   open     — boolean, expanded state (has children only)
- *   selected — boolean, selected state
- *
- * Slots:
- *   row      — the clickable row [chevron][icon][text][actions]
- *   chevron  — collapse toggle indicator
- *   actions  — right-aligned action icons (eye, lock, etc.)
- *   children — nested tree-item-ns (auto-detected)
- */
-class UITreeItem extends UIElement {
-  static properties = {
-    text:     { type: String,  default: '', reflect: true },
-    icon:     { type: String,  default: '', reflect: true },
-    value:    { type: String,  default: '', reflect: true },
-    open:     { type: Boolean, default: false, reflect: true },
-    selected: { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  get hasChildren() {
-    return this.querySelector(':scope > tree-item-ui') !== null;
-  }
-
-  get depth() {
-    let d = 0;
-    let el = this.parentElement;
-    while (el) {
-      if (el.matches('tree-item-ui')) d++;
-      el = el.parentElement;
-    }
-    return d;
-  }
-
-  connected() {
-    this.setAttribute('role', 'treeitem');
-
-    if (!this.querySelector(':scope > [slot="row"]')) {
-      this.#stamp();
-    }
-  }
-
-  #stamp() {
-    const row = document.createElement('div');
-    row.setAttribute('slot', 'row');
-    row.setAttribute('tabindex', '0');
-
-    // Chevron
-    const chevron = document.createElement('icon-ui');
-    chevron.setAttribute('slot', 'chevron');
-    chevron.setAttribute('name', 'caret-right');
-    row.appendChild(chevron);
-
-    // Icon
-    if (this.icon) {
-      const iconEl = document.createElement('icon-ui');
-      iconEl.setAttribute('name', this.icon);
-      iconEl.setAttribute('slot', 'icon');
-      row.appendChild(iconEl);
-    }
-
-    // Text
-    const textEl = document.createElement('span');
-    textEl.setAttribute('slot', 'text');
-    textEl.textContent = this.text;
-    row.appendChild(textEl);
-
-    // Actions slot placeholder
-    const actions = document.createElement('span');
-    actions.setAttribute('slot', 'actions');
-    row.appendChild(actions);
-
-    this.prepend(row);
-  }
-
-  render() {
-    const row = this.querySelector(':scope > [slot="row"]');
-    if (!row) return;
-
-    // Update depth-based indent
-    row.style.paddingInlineStart = `${this.depth * 16 + 4}px`;
-
-    // Update aria
-    if (this.hasChildren) {
-      this.setAttribute('aria-expanded', String(this.open));
-    } else {
-      this.removeAttribute('aria-expanded');
-    }
-
-    // Update text
-    const textEl = row.querySelector('[slot="text"]');
-    if (textEl && this.text) textEl.textContent = this.text;
-  }
-}
-customElements.define('tree-item-ui', UITreeItem);
+defineIfFree('tree-ui', UITree);
+defineIfFree('tree-item-ui', UITreeItem);
 
 export { UITree, UITreeItem };

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.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `<upload-ui>` — File upload dropzone + picker.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/upload
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface UploadChangeEventDetail {
+  /** Form value — comma-joined filenames (FormData carries the actual files). */
+  value: string;
+  /** Selected files as a FileList. */
+  files: FileList | File[];
+}
+export type UploadChangeEvent = CustomEvent<UploadChangeEventDetail>;
+
+export class UIUpload extends UIFormElement {
+  /** Files currently selected. */
+  readonly files: FileList | File[];
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIUpload, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: UploadChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

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 };