@adia-ai/web-components 0.0.1

package/components/upload/upload.css

@@ -0,0 +1,115 @@
+@scope (upload-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --upload-gap:              var(--a-space-2);
+    --upload-radius:           var(--a-radius-md);
+    --upload-font:             var(--a-ui-size);
+    --upload-border:           var(--a-border-subtle);
+    --upload-border-hover:     var(--a-accent);
+    --upload-border-dragover:  var(--a-accent-bg);
+    --upload-bg-dragover:      var(--a-accent-muted);
+    --upload-fg:               var(--a-fg-subtle);
+    --upload-fg-hover:         var(--a-accent);
+    --upload-label-fg:         var(--a-fg);
+    --upload-label-weight:     var(--a-weight-medium);
+    --upload-label-size:       var(--a-label-size);
+    --upload-hint-fg:          var(--a-fg-muted);
+    --upload-hint-size:        var(--a-ui-sm);
+    --upload-bg-disabled:      var(--a-ui-bg-disabled);
+    --upload-fg-disabled:      var(--a-ui-text-disabled);
+    --upload-border-disabled:  var(--a-ui-border-disabled);
+
+    /* ── Spacing ── */
+    --upload-dropzone-pad:     var(--a-space-6);
+
+    /* ── Transitions ── */
+    --upload-duration:         var(--a-duration-fast);
+    --upload-easing:           var(--a-easing);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--upload-gap);
+    font-size: var(--upload-font);
+  }
+
+  /* Label via ::before */
+  :scope::before {
+    content: attr(label);
+    font-size: var(--upload-label-size);
+    font-weight: var(--upload-label-weight);
+    color: var(--upload-label-fg);
+  }
+  :scope:not([label])::before,
+  :scope[label=""]::before {
+    display: none;
+  }
+
+  /* Dropzone */
+  [data-dropzone] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--upload-dropzone-pad);
+    border: 2px dashed var(--upload-border);
+    border-radius: var(--upload-radius);
+    color: var(--upload-fg);
+    font-size: var(--upload-font);
+    text-align: center;
+    cursor: pointer;
+    transition:
+      border-color var(--upload-duration) var(--upload-easing),
+      background var(--upload-duration) var(--upload-easing),
+      color var(--upload-duration) var(--upload-easing);
+  }
+  [data-dropzone]:hover {
+    border-color: var(--upload-border-hover);
+    color: var(--upload-fg-hover);
+  }
+  [data-dropzone]:focus-visible {
+    outline: 2px solid var(--upload-border-hover);
+    outline-offset: 2px;
+  }
+  [data-dropzone][data-dragover] {
+    border-color: var(--upload-border-dragover);
+    background: var(--upload-bg-dragover);
+  }
+
+  /* Hint via ::after on span */
+  span[hint]::after {
+    content: attr(hint);
+    font-size: var(--upload-hint-size);
+    color: var(--upload-hint-fg);
+  }
+  span[hint=""]::after {
+    display: none;
+  }
+  span:not([hint])::after {
+    display: none;
+  }
+
+  /* File list */
+  [data-filelist] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--upload-gap);
+    font-size: var(--upload-font);
+  }
+  [data-filelist]:empty {
+    display: none;
+  }
+
+  /* Disabled */
+  :scope[disabled] {
+    pointer-events: none;
+    color: var(--upload-fg-disabled);
+  }
+  :scope[disabled] [data-dropzone] {
+    background: var(--upload-bg-disabled);
+    border-color: var(--upload-border-disabled);
+    color: var(--upload-fg-disabled);
+    cursor: not-allowed;
+  }
+}

package/components/upload/upload.js

@@ -0,0 +1,189 @@
+/**
+ * <upload-ui> — File upload with drag-and-drop.
+ * Uses showOpenFilePicker (modern) with <input type="file"> fallback.
+ * Form-associated via AdiaFormElement + ElementInternals.
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+
+class AdiaUpload extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.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 Event('change', { bubbles: true }));
+    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', AdiaUpload);
+
+export { AdiaUpload };

package/components/upload/upload.yaml

@@ -0,0 +1,302 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaUpload
+tag: upload-ui
+component: Upload
+category: input
+version: 1
+description: File upload with drag-and-drop. Uses showOpenFilePicker with input[type=file] fallback.
+  Form-associated.
+props:
+  name:
+    description: Form field name
+    type: string
+    default: ""
+  required:
+    description: Marks as required
+    type: boolean
+    default: false
+    reflect: true
+  accept:
+    description: Accepted file types (e.g. image/*,.pdf)
+    type: string
+    default: ""
+  disabled:
+    description: Disables interaction
+    type: boolean
+    default: false
+    reflect: true
+  hint:
+    description: Help text below the dropzone
+    type: string
+    default: ""
+  label:
+    description: Label text above the dropzone
+    type: string
+    default: ""
+  multiple:
+    description: Allows selecting multiple files
+    type: boolean
+    default: false
+  value:
+    description: Current value
+    type: string
+    default: ""
+events:
+  change:
+    description: Fired when files are selected via click or drag-and-drop
+slots:
+  dropzone:
+    description: Click/drop target area
+  filelist:
+    description: List of selected file names
+  hint:
+    description: Help text below the dropzone
+  input:
+    description: Hidden native file input
+  label:
+    description: Label element above the dropzone
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: data-import
+    description: Data import wizard with file upload, progress tracking, and action buttons.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Import Data"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "col"
+          ]
+        },
+        {
+          "id": "col",
+          "component": "Column",
+          "children": [
+            "upload",
+            "prog",
+            "actions"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "upload",
+          "component": "Upload",
+          "accept": ".csv,.xlsx",
+          "label": "Drop files here"
+        },
+        {
+          "id": "prog",
+          "component": "Progress",
+          "value": 0,
+          "max": 100
+        },
+        {
+          "id": "actions",
+          "component": "Row",
+          "children": [
+            "cancel",
+            "start"
+          ],
+          "gap": "2"
+        },
+        {
+          "id": "cancel",
+          "component": "Button",
+          "text": "Cancel",
+          "variant": "outline"
+        },
+        {
+          "id": "start",
+          "component": "Button",
+          "text": "Import",
+          "variant": "primary"
+        }
+      ]
+  - name: file-upload-form
+    description: Card with upload component, file list area, and submit button.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title",
+            "desc"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Upload Files",
+          "variant": "section"
+        },
+        {
+          "id": "desc",
+          "component": "Text",
+          "slot": "description",
+          "variant": "caption",
+          "textContent": "Drag and drop or browse to upload"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "content"
+          ]
+        },
+        {
+          "id": "content",
+          "component": "Column",
+          "children": [
+            "uploader",
+            "file-list"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "uploader",
+          "component": "Upload",
+          "accept": "*/*",
+          "multiple": true
+        },
+        {
+          "id": "file-list",
+          "component": "Column",
+          "children": [
+            "file-list-label"
+          ],
+          "gap": "2"
+        },
+        {
+          "id": "file-list-label",
+          "component": "Text",
+          "variant": "caption",
+          "textContent": "No files selected"
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "ftr-actions"
+          ]
+        },
+        {
+          "id": "ftr-actions",
+          "component": "Row",
+          "children": [
+            "cancel-btn",
+            "submit-btn"
+          ]
+        },
+        {
+          "id": "cancel-btn",
+          "component": "Button",
+          "text": "Cancel",
+          "variant": "ghost"
+        },
+        {
+          "id": "submit-btn",
+          "component": "Button",
+          "text": "Upload",
+          "variant": "primary"
+        }
+      ]
+keywords:
+  - upload
+  - attach
+  - dropzone
+  - drag
+  - import
+  - transfer
+  - file-manager
+  - files
+synonyms:
+  attach:
+    - file
+    - upload
+    - image
+  drag:
+    - file
+    - upload
+    - import
+    - kanban
+  dropzone:
+    - file
+    - upload
+    - image
+    - import
+  file-manager:
+    - data
+    - table
+    - file
+    - upload
+  files:
+    - data
+    - table
+    - file
+    - upload
+  import:
+    - data
+    - import
+    - file
+    - upload
+    - table
+  transfer:
+    - data
+    - import
+    - upload
+  upload:
+    - file
+    - upload
+    - image
+    - import
+    - data
+related:
+  - progress
+  - button
+  - grid
+  - image
+  - input