@colletdev/core 0.1.3

package/src/elements/fab.js

@@ -0,0 +1,36 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/fab.rs
+
+export function defineCxFab(wasmFn, baseClass) {
+  class CxFab extends baseClass {
+    static observedAttributes = ['icon', 'label', 'aria-label', 'variant', 'intent', 'shape', 'size', 'disabled', 'has-popup', 'expanded', 'controls'];
+    static _booleanAttrs = new Set(['disabled', 'has-popup', 'expanded']);
+    static _hostDisplay = 'inline-flex';
+
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+    // Delegate click from inner element to Custom Event
+    this._shadow.addEventListener('click', (e) => {
+      if (!this.hasAttribute('disabled')) {
+        this._emit('cx-click', { originalEvent: e });
+      }
+    });
+      }
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-fab]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-fab', CxFab);
+  return CxFab;
+}

package/src/elements/file_upload.d.ts

@@ -0,0 +1,26 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/file_upload.rs
+
+export interface CxFileUploadAttributes {
+    id?: string;
+    label?: string;
+    mode?: 'inline' | 'overlay';
+    variant?: 'outline' | 'filled' | 'subtle';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    multiple?: boolean;
+    accept?: string;
+    maxSize?: number;
+    heading?: string;
+    browseText?: string;
+    hint?: string;
+    capture?: string;
+    preview?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-file-upload': HTMLElement & CxFileUploadAttributes;
+  }
+}

package/src/elements/file_upload.js

@@ -0,0 +1,59 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/file_upload.rs
+
+export function defineCxFileUpload(wasmFn, baseClass) {
+  class CxFileUpload extends baseClass {
+    static observedAttributes = ['id', 'label', 'mode', 'variant', 'shape', 'size', 'disabled', 'multiple', 'accept', 'heading', 'browse-text', 'hint', 'capture', 'preview'];
+    static _booleanAttrs = new Set(['disabled', 'multiple', 'preview']);
+    static _hostDisplay = 'block';
+
+  set max_size(v) { this._setProp('max_size', v); }
+  get max_size() { return this._props.max_size; }
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // Delegate change events from the hidden file input → cx-change on the host
+        shadow.addEventListener('change', (e) => {
+          const input = e.target.closest('input[type="file"]');
+          if (input && input.files) {
+            const files = Array.from(input.files).map(f => ({
+              name: f.name,
+              size: f.size,
+              type: f.type,
+            }));
+            this._emit('cx-change', { files });
+          }
+        });
+
+        // Delegate click on zone or browse button → open file picker
+        shadow.addEventListener('click', (e) => {
+          if (this.hasAttribute('disabled')) return;
+          const input = shadow.querySelector('input[type="file"]');
+          if (!input) return;
+          // Don't re-trigger if clicking the input itself
+          if (e.target === input) return;
+          // Don't trigger if clicking file list dismiss buttons
+          if (e.target.closest('[data-file-remove]')) return;
+          if (e.target.closest('[data-file-upload-list]')) return;
+          input.click();
+        });
+      }
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-file-upload]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-file-upload', CxFileUpload);
+  return CxFileUpload;
+}

package/src/elements/listbox.d.ts

@@ -0,0 +1,19 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/listbox.rs
+
+export interface CxListboxAttributes {
+    id?: string;
+    label?: string;
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    selectionMode?: string;
+    selected?: string;
+    items?: string;
+    groups?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-listbox': HTMLElement & CxListboxAttributes;
+  }
+}

package/src/elements/listbox.js

@@ -0,0 +1,250 @@
+// Custom behavior for <cx-listbox> — option selection + keyboard navigation.
+//
+// The Rust component renders:
+//   <div role="listbox"> — the container
+//     <div role="option" data-value="..." aria-selected="..."> — each option
+//       <span class="truncate">Label</span>
+//       <span data-check class="hidden|inline-flex">✓</span>
+//
+// This Custom Element wires up:
+//   - Click option to select/deselect
+//   - Keyboard navigation (ArrowUp/Down, Home/End, Enter/Space)
+//   - Single and multiple selection modes
+//   - cx-change event emission with selected value(s)
+//
+// Source: crates/wasm-api/src/listbox.rs
+
+let _sheet;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync([
+      '[role="option"][data-focused] {',
+      '  background-color: var(--color-secondary);',
+      '}',
+      '[role="option"]:not([aria-disabled="true"]):hover {',
+      '  background-color: var(--color-secondary);',
+      '  cursor: pointer;',
+      '}',
+    ].join('\n'));
+  }
+  return _sheet;
+}
+
+export function defineCxListbox(wasmFn, baseClass) {
+  class CxListbox extends baseClass {
+    static observedAttributes = ['id', 'label', 'shape', 'size', 'selection-mode', 'selected', 'items', 'groups'];
+    static _booleanAttrs = new Set([]);
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        const sheet = getSheet();
+        if (!shadow.adoptedStyleSheets.includes(sheet)) {
+          shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
+        }
+
+        // ── Click handler ──
+        shadow.addEventListener('click', (e) => {
+          const option = e.target.closest('[role="option"]');
+          if (option && !option.hasAttribute('aria-disabled')) {
+            this.#selectOption(option);
+          }
+        });
+
+        // ── Keyboard handler ──
+        shadow.addEventListener('keydown', (e) => this.#handleKey(e));
+
+        // Forward focus events from inner interactive elements
+        shadow.addEventListener('focusin', (e) => {
+          this._emit('cx-focus', { relatedTarget: e.relatedTarget });
+        });
+        shadow.addEventListener('focusout', (e) => {
+          this._emit('cx-blur', { relatedTarget: e.relatedTarget });
+        });
+
+        // Forward keyboard events from inner interactive elements
+        shadow.addEventListener('keydown', (e) => {
+          this._emit('cx-keydown', { key: e.key, code: e.code, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+        });
+        shadow.addEventListener('keyup', (e) => {
+          this._emit('cx-keyup', { key: e.key, code: e.code, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+        });
+      } // end _isInitialized guard
+      super.connectedCallback();
+    }
+
+    #getListbox() {
+      return this._shadow.querySelector('[role="listbox"]');
+    }
+
+    #getVisibleOptions() {
+      return Array.from(
+        this._shadow.querySelectorAll(
+          '[role="option"]:not([aria-disabled="true"]):not([hidden])'
+        )
+      );
+    }
+
+    #getMode() {
+      return this._props.selection_mode || 'single';
+    }
+
+    // ── Keyboard navigation ──
+
+    #handleKey(e) {
+      const listbox = this.#getListbox();
+      if (!listbox) return;
+
+      // Only handle if focus is inside the listbox
+      if (!listbox.contains(e.target) && e.target !== listbox) return;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          this.#focusNext();
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          this.#focusPrev();
+          break;
+        case 'Home':
+          e.preventDefault();
+          this.#focusFirst();
+          break;
+        case 'End':
+          e.preventDefault();
+          this.#focusLast();
+          break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          const active = this.#getActiveOption();
+          if (active) this.#selectOption(active);
+          break;
+      }
+    }
+
+    // ── Focus management (roving tabindex) ──
+
+    #clearFocused() {
+      this._shadow.querySelectorAll('[role="option"][data-focused]')
+        .forEach(o => {
+          o.removeAttribute('data-focused');
+          o.setAttribute('tabindex', '-1');
+        });
+    }
+
+    #setActive(option) {
+      this.#clearFocused();
+      if (option) {
+        option.setAttribute('data-focused', '');
+        option.setAttribute('tabindex', '0');
+        option.focus();
+      }
+    }
+
+    #getActiveOption() {
+      return this._shadow.querySelector('[role="option"][data-focused]');
+    }
+
+    #focusFirst() {
+      const opts = this.#getVisibleOptions();
+      if (opts.length) this.#setActive(opts[0]);
+    }
+
+    #focusLast() {
+      const opts = this.#getVisibleOptions();
+      if (opts.length) this.#setActive(opts[opts.length - 1]);
+    }
+
+    #focusNext() {
+      const opts = this.#getVisibleOptions();
+      if (!opts.length) return;
+      const active = this.#getActiveOption();
+      const idx = active ? opts.indexOf(active) : -1;
+      this.#setActive(opts[(idx + 1) % opts.length]);
+    }
+
+    #focusPrev() {
+      const opts = this.#getVisibleOptions();
+      if (!opts.length) return;
+      const active = this.#getActiveOption();
+      const idx = active ? opts.indexOf(active) : 0;
+      this.#setActive(opts[(idx - 1 + opts.length) % opts.length]);
+    }
+
+    // ── Option selection ──
+
+    #selectOption(option) {
+      const value = option.getAttribute('data-value') || '';
+      const mode = this.#getMode();
+
+      if (mode === 'single') {
+        // Single: replace selection
+        this._shadow.querySelectorAll('[role="option"]').forEach(o => {
+          const isThis = o === option;
+          o.setAttribute('aria-selected', String(isThis));
+          o.setAttribute('data-selected', String(isThis));
+          const check = o.querySelector('[data-check]');
+          if (check) {
+            if (isThis) check.classList.remove('hidden');
+            else check.classList.add('hidden');
+          }
+        });
+
+        // Sync host prop — single source of truth for WASM re-renders.
+        this._props.selected = value;
+
+        this._emit('cx-change', { value });
+      } else {
+        // Multiple: toggle
+        const wasSelected = option.getAttribute('aria-selected') === 'true';
+        const nowSelected = !wasSelected;
+
+        option.setAttribute('aria-selected', String(nowSelected));
+        option.setAttribute('data-selected', String(nowSelected));
+        const check = option.querySelector('[data-check]');
+        if (check) {
+          if (nowSelected) check.classList.remove('hidden');
+          else check.classList.add('hidden');
+        }
+
+        // Collect all selected
+        const selected = [];
+        this._shadow.querySelectorAll('[role="option"][aria-selected="true"]')
+          .forEach(o => selected.push(o.getAttribute('data-value') || ''));
+
+        // Sync host prop — single source of truth for WASM re-renders.
+        this._props.selected = selected.join(',');
+
+        this._emit('cx-change', { value: selected });
+      }
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        const sheet = getSheet();
+        if (!this._shadow.adoptedStyleSheets.includes(sheet)) {
+          this._shadow.adoptedStyleSheets = [...this._shadow.adoptedStyleSheets, sheet];
+        }
+
+        // Make listbox focusable
+        const listbox = this.#getListbox();
+        if (listbox && !listbox.hasAttribute('tabindex')) {
+          listbox.setAttribute('tabindex', '0');
+        }
+      } catch (e) {
+        console.error('[cx-listbox]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-listbox', CxListbox);
+  return CxListbox;
+}

package/src/elements/menu.d.ts

@@ -0,0 +1,20 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/menu.rs
+
+export interface CxMenuAttributes {
+    id?: string;
+    triggerLabel: string;
+    entries?: string;
+    variant?: 'filled' | 'outline' | 'ghost';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    width?: 'auto' | 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    icon?: string;
+    disabled?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-menu': HTMLElement & CxMenuAttributes;
+  }
+}

package/src/elements/menu.js

@@ -0,0 +1,224 @@
+// Custom behavior for <cx-menu> — dropdown open/close, keyboard nav, item click.
+// Mirrors static/_behaviors/menu.js but operates inside shadow DOM.
+// Source: crates/wasm-api/src/menu.rs
+
+export function defineCxMenu(wasmFn, baseClass) {
+  class CxMenu extends baseClass {
+    static observedAttributes = ['id', 'trigger-label', 'entries', 'variant', 'shape', 'width', 'size', 'icon', 'disabled'];
+    static _booleanAttrs = new Set(['disabled']);
+    static _hostDisplay = 'inline-flex';
+
+    #outsideClick = null;
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+      // Click delegation
+      shadow.addEventListener('click', (e) => {
+        // Trigger button: toggle menu
+        const trigger = e.target.closest('[data-floating-trigger]');
+        if (trigger) {
+          if (this.#isOpen()) {
+            this.#closeMenu();
+          } else {
+            this.#openMenu();
+          }
+          return;
+        }
+
+        // Menu item click (regular menuitem): close and emit
+        const mi = e.target.closest('[role="menuitem"]');
+        if (mi && !mi.hasAttribute('aria-disabled')) {
+          const id = mi.getAttribute('data-item-id') || mi.textContent.trim();
+          this._emit('cx-action', { id });
+          this.#closeMenu();
+          return;
+        }
+
+        // Checkbox/radio items: toggle state but don't close
+        const mci = e.target.closest('[role="menuitemcheckbox"],[role="menuitemradio"]');
+        if (mci && !mci.hasAttribute('aria-disabled')) {
+          const checked = mci.getAttribute('aria-checked') === 'true';
+          const nowChecked = !checked;
+          mci.setAttribute('aria-checked', String(nowChecked));
+
+          // For radio items: deselect siblings in same group
+          if (mci.getAttribute('role') === 'menuitemradio' && nowChecked) {
+            const group = mci.closest('[role="group"]');
+            if (group) {
+              group.querySelectorAll('[role="menuitemradio"]').forEach(r => {
+                if (r !== mci) r.setAttribute('aria-checked', 'false');
+              });
+            }
+          }
+
+          // Sync checked item IDs to _props for re-render survival.
+          // Store as comma-separated list of checked data-item-ids.
+          const panel = shadow.querySelector('[data-menu]');
+          if (panel) {
+            const checkedIds = [];
+            panel.querySelectorAll('[role="menuitemcheckbox"][aria-checked="true"],[role="menuitemradio"][aria-checked="true"]')
+              .forEach(el => checkedIds.push(el.getAttribute('data-item-id') || ''));
+            this._props._checked_items = checkedIds.join(',');
+          }
+
+          this._emit('cx-change', {
+            id: mci.getAttribute('data-item-id') || mci.textContent.trim(),
+            checked: nowChecked,
+          });
+        }
+      });
+
+      // Keyboard navigation
+      shadow.addEventListener('keydown', (e) => {
+        const menuitem = e.target.closest('[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]');
+
+        // Escape: close menu
+        if (e.key === 'Escape' && this.#isOpen()) {
+          e.preventDefault();
+          this.#closeMenu();
+          return;
+        }
+
+        // Arrow keys on trigger
+        if (e.target.closest('[data-floating-trigger]') && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) {
+          if (!this.#isOpen()) {
+            e.preventDefault();
+            this.#openMenu();
+            return;
+          }
+        }
+
+        if (!menuitem) return;
+
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {
+          e.preventDefault();
+          const panel = shadow.querySelector('[data-menu]');
+          if (!panel) return;
+          const all = Array.from(panel.querySelectorAll(
+            '[role="menuitem"]:not([aria-disabled]),[role="menuitemcheckbox"]:not([aria-disabled]),[role="menuitemradio"]:not([aria-disabled])'
+          ));
+          const ci = all.indexOf(menuitem);
+          if (ci === -1) return;
+          let ni = ci;
+          if (e.key === 'ArrowDown') ni = (ci + 1) % all.length;
+          else if (e.key === 'ArrowUp') ni = (ci - 1 + all.length) % all.length;
+          else if (e.key === 'Home') ni = 0;
+          else if (e.key === 'End') ni = all.length - 1;
+          all[ni].focus();
+          return;
+        }
+
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          menuitem.click();
+        }
+      });
+
+      // Close on outside click — use mousedown to fire before click
+      this.#outsideClick = (e) => {
+        if (this.#isOpen() && !this.contains(e.target) && !this._shadow.contains(e.target)) {
+          this.#closeMenu();
+        }
+      };
+      document.addEventListener('mousedown', this.#outsideClick);
+
+        // Forward keyboard events from inner interactive elements
+        shadow.addEventListener('keydown', (e) => {
+          this._emit('cx-keydown', { key: e.key, code: e.code, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+        });
+        shadow.addEventListener('keyup', (e) => {
+          this._emit('cx-keyup', { key: e.key, code: e.code, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+        });
+      } // end _isInitialized guard
+
+      super.connectedCallback();
+    }
+
+    disconnectedCallback() {
+      if (this.#outsideClick) {
+        document.removeEventListener('mousedown', this.#outsideClick);
+      }
+      super.disconnectedCallback();
+    }
+
+    // ── State via DOM (single source of truth) ──
+
+    #isOpen() {
+      const trigger = this._shadow.querySelector('[data-floating-trigger]');
+      return trigger ? trigger.getAttribute('aria-expanded') === 'true' : false;
+    }
+
+    #openMenu() {
+      const panel = this._shadow.querySelector('[data-menu]');
+      const trigger = this._shadow.querySelector('[data-floating-trigger]');
+      if (!panel || !trigger) return;
+
+      // Position with fixed coordinates — escapes overflow:auto/scroll clipping.
+      this._positionFloatingFixed(trigger, panel, { matchWidth: true });
+
+      panel.setAttribute('data-open', '');
+      panel.classList.remove('hidden');
+      panel.style.display = 'block';
+      panel.style.pointerEvents = 'auto';
+      panel.style.opacity = '1';
+      trigger.setAttribute('aria-expanded', 'true');
+
+      // Focus first non-disabled item
+      requestAnimationFrame(() => {
+        const first = panel.querySelector(
+          '[role="menuitem"]:not([aria-disabled]),[role="menuitemcheckbox"]:not([aria-disabled]),[role="menuitemradio"]:not([aria-disabled])'
+        );
+        if (first) first.focus();
+      });
+    }
+
+    #closeMenu() {
+      const panel = this._shadow.querySelector('[data-menu]');
+      const trigger = this._shadow.querySelector('[data-floating-trigger]');
+      if (panel) {
+        panel.removeAttribute('data-open');
+        panel.classList.add('hidden');
+        panel.style.display = '';
+        panel.style.pointerEvents = '';
+        panel.style.opacity = '';
+        this._resetFloatingFixed(panel);
+      }
+      if (trigger) {
+        trigger.setAttribute('aria-expanded', 'false');
+        trigger.focus();
+      }
+    }
+
+    // ── Public imperative API ──
+    open() { this.#openMenu(); }
+    close() { this.#closeMenu(); }
+
+    _doRender() {
+      try {
+        const wasOpen = this.#isOpen();
+        // Save checked item IDs before re-render
+        const checkedIds = this._props._checked_items || '';
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+        if (wasOpen) this.#openMenu();
+        // Restore checkbox/radio checked states after re-render
+        if (checkedIds) {
+          const ids = checkedIds.split(',').filter(Boolean);
+          const shadow = this._shadow;
+          shadow.querySelectorAll('[role="menuitemcheckbox"],[role="menuitemradio"]').forEach(el => {
+            const id = el.getAttribute('data-item-id') || '';
+            if (ids.includes(id)) el.setAttribute('aria-checked', 'true');
+          });
+        }
+      } catch (e) {
+        console.error('[cx-menu]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-menu', CxMenu);
+  return CxMenu;
+}

package/src/elements/message_bubble.d.ts

@@ -0,0 +1,23 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/message_bubble.rs
+
+export interface CxMessageBubbleAttributes {
+    id?: string;
+    role?: 'user' | 'assistant';
+    variant?: 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded';
+    alignment?: 'auto' | 'start' | 'end';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    content?: string;
+    htmlContent?: string;
+    senderName?: string;
+    timestamp?: string;
+    border?: string;
+    animated?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-message-bubble': HTMLElement & CxMessageBubbleAttributes;
+  }
+}

package/src/elements/message_bubble.js

@@ -0,0 +1,29 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/message_bubble.rs
+
+export function defineCxMessageBubble(wasmFn, baseClass) {
+  class CxMessageBubble extends baseClass {
+    static observedAttributes = ['id', 'role', 'variant', 'shape', 'alignment', 'size', 'html-content', 'sender-name', 'timestamp', 'border', 'animated'];
+    static _booleanAttrs = new Set(['animated']);
+    static _focusable = false;
+    static _hostDisplay = 'block';
+
+
+    connectedCallback() {
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        this._props.slotted = true;
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-message-bubble]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-message-bubble', CxMessageBubble);
+  return CxMessageBubble;
+}