@colletdev/core 0.1.3

package/src/elements/message_group.d.ts

@@ -0,0 +1,18 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/message_group.rs
+
+export interface CxMessageGroupAttributes {
+    id?: string;
+    role?: 'user' | 'assistant';
+    alignment?: 'auto' | 'start' | 'end';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    senderName?: string;
+    animated?: boolean;
+    parts?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-message-group': HTMLElement & CxMessageGroupAttributes;
+  }
+}

package/src/elements/message_group.js

@@ -0,0 +1,28 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/message_group.rs
+
+export function defineCxMessageGroup(wasmFn, baseClass) {
+  class CxMessageGroup extends baseClass {
+    static observedAttributes = ['id', 'role', 'alignment', 'size', 'sender-name', 'animated', 'parts'];
+    static _booleanAttrs = new Set(['animated']);
+    static _focusable = false;
+    static _hostDisplay = 'block';
+
+
+    connectedCallback() {
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-message-group]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-message-group', CxMessageGroup);
+  return CxMessageGroup;
+}

package/src/elements/message_part.d.ts

@@ -0,0 +1,35 @@
+// CxMessagePart — typed content blocks with streaming markdown support.
+// Source: crates/wasm-api/src/message_part.rs + custom streaming behavior.
+
+export interface CxMessagePartAttributes {
+  /** Enable streaming mode. When present, WASM rendering is paused. */
+  stream?: boolean;
+}
+
+export interface CxMessagePartElement extends HTMLElement, CxMessagePartAttributes {
+  /**
+   * Initialize the streaming markdown parser.
+   * Clears content and shows a blinking cursor.
+   */
+  startStream(): Promise<void>;
+
+  /**
+   * Feed markdown tokens into the streaming parser.
+   * Tokens are rAF-batched for performance.
+   *
+   * @param text - Markdown token(s) to append
+   */
+  appendTokens(text: string): void;
+
+  /**
+   * End the stream. Flushes remaining tokens, removes cursor,
+   * then runs a final WASM sanitization pass for XSS safety.
+   */
+  endStream(): Promise<void>;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-message-part': CxMessagePartElement;
+  }
+}

package/src/elements/message_part.js

@@ -0,0 +1,153 @@
+// CxMessagePart — Custom Element for typed message content blocks.
+//
+// Extends the auto-generated skeleton with streaming markdown support.
+// When the `stream` attribute is present, the element exposes imperative
+// methods for feeding tokens from an SSE/WebSocket source.
+//
+// Static rendering: set attributes as usual (WASM renders full content).
+// Streaming: call startStream() → appendTokens(text) → endStream().
+
+export function defineCxMessagePart(wasmFn, baseClass) {
+  class CxMessagePart extends baseClass {
+    static observedAttributes = ['stream'];
+    static _booleanAttrs = new Set(['stream']);
+    static _focusable = false;
+
+    #streamState = null;
+
+    connectedCallback() {
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      // Skip WASM render while streaming — the streaming parser owns the DOM.
+      if (this.#streamState) return;
+
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-message-part]', e);
+      }
+    }
+
+    // ─── Streaming API ───
+
+    /**
+     * Initialize the streaming markdown parser.
+     * Clears existing content and shows a blinking cursor.
+     */
+    async startStream() {
+      const smd = await import('../streaming-markdown.js');
+      const shadow = this._shadow;
+
+      // Create a prose container inside shadow DOM.
+      const container = document.createElement('div');
+      container.className = 'cx-prose';
+      shadow.innerHTML = '';
+      shadow.appendChild(container);
+
+      // Create blinking cursor.
+      const cursor = document.createElement('span');
+      cursor.className = 'cx-stream-cursor';
+      cursor.setAttribute('aria-hidden', 'true');
+      shadow.appendChild(cursor);
+
+      // Initialize streaming parser.
+      const renderer = smd.default_renderer(container);
+      const parser = smd.parser(renderer);
+
+      this.#streamState = {
+        parser,
+        smd,
+        buffer: [],
+        accumulated: '',
+        rafId: null,
+        container,
+        cursor,
+      };
+
+      this.setAttribute('aria-busy', 'true');
+    }
+
+    /**
+     * Feed markdown tokens into the streaming parser.
+     * Tokens are rAF-batched for optimal rendering performance.
+     *
+     * @param {string} text - Markdown token(s) to append
+     */
+    appendTokens(text) {
+      const s = this.#streamState;
+      if (!s) return;
+
+      s.buffer.push(text);
+
+      if (!s.rafId) {
+        s.rafId = requestAnimationFrame(() => {
+          if (!this.#streamState) return;
+          const chunk = s.buffer.join('');
+          s.buffer.length = 0;
+          s.accumulated += chunk;
+          s.smd.parser_write(s.parser, chunk);
+          s.rafId = null;
+        });
+      }
+    }
+
+    /**
+     * End the stream. Flushes remaining tokens, removes cursor,
+     * then runs a final WASM sanitization pass for XSS safety.
+     */
+    async endStream() {
+      const s = this.#streamState;
+      if (!s) return;
+
+      // Flush remaining tokens.
+      if (s.rafId) {
+        cancelAnimationFrame(s.rafId);
+        s.rafId = null;
+      }
+      if (s.buffer.length > 0) {
+        const chunk = s.buffer.join('');
+        s.buffer.length = 0;
+        s.accumulated += chunk;
+        s.smd.parser_write(s.parser, chunk);
+      }
+
+      // End streaming parser.
+      s.smd.parser_end(s.parser);
+
+      // Remove cursor.
+      if (s.cursor && s.cursor.parentNode) {
+        s.cursor.remove();
+      }
+
+      // Final sanitization pass through WASM.
+      // The streaming parser renders to DOM directly — this re-renders
+      // through our compile-safe XSS filtering for defense-in-depth.
+      try {
+        const wasm = (await import('../../wasm/wasm_api.js'));
+        if (wasm.cx_render_markdown && s.accumulated) {
+          const safeHtml = wasm.cx_render_markdown(s.accumulated);
+          s.container.innerHTML = '';
+          s.container.innerHTML = safeHtml.replace(/^<div class="cx-prose">/, '').replace(/<\/div>$/, '');
+        }
+      } catch {
+        // WASM sanitization not available — keep streaming output.
+      }
+
+      this.removeAttribute('aria-busy');
+
+      // Dispatch completion event.
+      this.dispatchEvent(new CustomEvent('cx-stream-end', {
+        bubbles: true,
+        composed: true,
+      }));
+
+      this.#streamState = null;
+    }
+  }
+
+  customElements.define('cx-message-part', CxMessagePart);
+  return CxMessagePart;
+}

package/src/elements/pagination.d.ts

@@ -0,0 +1,22 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/pagination.rs
+
+export interface CxPaginationAttributes {
+    id?: string;
+    currentPage: number;
+    pageSize: number;
+    totalItems: number;
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    showInfo?: boolean;
+    showPrevNext?: boolean;
+    prevLabel?: string;
+    nextLabel?: string;
+    pageSizeOptions?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-pagination': HTMLElement & CxPaginationAttributes;
+  }
+}

package/src/elements/pagination.js

@@ -0,0 +1,36 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/pagination.rs
+
+export function defineCxPagination(wasmFn, baseClass) {
+  class CxPagination extends baseClass {
+    static observedAttributes = ['id', 'current-page', 'page-size', 'total-items', 'label', 'size', 'show-info', 'show-prev-next', 'prev-label', 'next-label', 'page-size-options'];
+    static _booleanAttrs = new Set(['show-info', 'show-prev-next']);
+    static _numericAttrs = new Set(['current-page', 'page-size', 'total-items']);
+    static _hostDisplay = 'block';
+
+  set current_page(v) { this._setProp('current_page', v); }
+  get current_page() { return this._props.current_page; }
+
+  set page_size(v) { this._setProp('page_size', v); }
+  get page_size() { return this._props.page_size; }
+
+  set total_items(v) { this._setProp('total_items', v); }
+  get total_items() { return this._props.total_items; }
+
+    connectedCallback() {
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-pagination]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-pagination', CxPagination);
+  return CxPagination;
+}

package/src/elements/popover.d.ts

@@ -0,0 +1,26 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/popover.rs
+
+export interface CxPopoverAttributes {
+    id?: string;
+    triggerLabel: string;
+    content?: string;
+    title?: string;
+    description?: string;
+    width?: 'sm' | 'md' | 'lg' | 'xl' | 'auto';
+    placement?: 'top' | 'bottom';
+    align?: 'start' | 'center' | 'end';
+    arrow?: boolean;
+    closeButton?: boolean;
+    variant?: 'outline' | 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    icon?: string;
+    disabled?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-popover': HTMLElement & CxPopoverAttributes;
+  }
+}

package/src/elements/popover.js

@@ -0,0 +1,191 @@
+// Custom behavior for <cx-popover> — trigger toggle, close on outside/escape.
+//
+// The Rust component renders:
+//   <button data-floating-trigger> — the trigger button
+//   <div data-floating data-popover role="dialog"> — the floating panel
+//
+// This Custom Element wires up:
+//   - Click trigger to toggle panel visibility
+//   - Click close button to dismiss
+//   - Click outside to close
+//   - Escape key to close
+//   - Focus management on open/close
+//
+// Floating panel uses position:fixed (viewport coordinates) to escape
+// scroll container clipping — e.g. when inside <cx-scrollbar>.
+//
+// Source: crates/wasm-api/src/popover.rs
+
+let _sheet;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync([
+      ':host { display: inline-flex; }',
+      // Panel hidden by default — #open() sets position:fixed + coordinates.
+      // The sheet provides base z-index and hidden state only.
+      '[data-floating] {',
+      '  z-index: 50;',
+      '}',
+    ].join('\n'));
+  }
+  return _sheet;
+}
+
+export function defineCxPopover(wasmFn, baseClass) {
+  class CxPopover extends baseClass {
+    static observedAttributes = ['id', 'trigger-label', 'title', 'description', 'width', 'placement', 'align', 'arrow', 'close-button', 'variant', 'shape', 'size', 'icon', 'disabled'];
+    static _booleanAttrs = new Set(['arrow', 'close-button', 'disabled']);
+
+    #outsideClick = null;
+
+    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) => {
+          // Close button
+          if (e.target.closest('[data-popover-close]')) {
+            this.#close();
+            this.#getTrigger()?.focus();
+            return;
+          }
+
+          // Trigger click → toggle
+          const trigger = this.#getTrigger();
+          if (trigger && trigger.contains(e.target) && !this._props.disabled) {
+            this.#toggle();
+          }
+        });
+
+        // ── Keyboard handler ──
+        shadow.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape' && this.#isOpen()) {
+            e.preventDefault();
+            this.#close();
+            this.#getTrigger()?.focus();
+          }
+        });
+
+        // ── Click outside → close ──
+        this.#outsideClick = (e) => {
+          if (this.#isOpen() && !this.contains(e.target) && !this._shadow.contains(e.target)) {
+            this.#close();
+          }
+        };
+        document.addEventListener('mousedown', this.#outsideClick);
+
+        // ── Focus exit → close ──
+        // Must check both light DOM and shadow DOM — Node.contains() doesn't cross shadow boundaries.
+        shadow.addEventListener('focusout', () => {
+          setTimeout(() => {
+            if (this.#isOpen()) {
+              const active = this._shadow.activeElement || document.activeElement;
+              if (!this.contains(active) && !this._shadow.contains(active) && active !== this) {
+                this.#close();
+              }
+            }
+          }, 0);
+        });
+      } // end _isInitialized guard
+      super.connectedCallback();
+    }
+
+    disconnectedCallback() {
+      if (this.#outsideClick) {
+        document.removeEventListener('mousedown', this.#outsideClick);
+        this.#outsideClick = null;
+      }
+      super.disconnectedCallback();
+    }
+
+    #getTrigger() {
+      return this._shadow.querySelector('button[data-floating-trigger]');
+    }
+
+    #getPanel() {
+      return this._shadow.querySelector('[data-popover]');
+    }
+
+    #isOpen() {
+      const panel = this.#getPanel();
+      return panel ? panel.hasAttribute('data-open') : false;
+    }
+
+    #open() {
+      const trigger = this.#getTrigger();
+      const panel = this.#getPanel();
+      if (!trigger || !panel || this.#isOpen()) return;
+
+      // Position with fixed coordinates — escapes overflow:auto/scroll clipping.
+      this._positionFloatingFixed(trigger, panel);
+
+      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');
+
+      // Move focus to first focusable element in panel, or panel itself
+      requestAnimationFrame(() => {
+        const focusable = panel.querySelector(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusable) focusable.focus();
+      });
+    }
+
+    #close() {
+      const trigger = this.#getTrigger();
+      const panel = this.#getPanel();
+      if (!trigger || !panel) return;
+
+      panel.removeAttribute('data-open');
+      panel.classList.add('hidden');
+      panel.style.display = '';
+      panel.style.pointerEvents = '';
+      panel.style.opacity = '';
+      this._resetFloatingFixed(panel);
+      trigger.setAttribute('aria-expanded', 'false');
+    }
+
+    #toggle() {
+      if (this.#isOpen()) this.#close();
+      else this.#open();
+    }
+
+    // ── Public imperative API ──
+    open() { this.#open(); }
+    close() { this.#close(); }
+
+    _doRender() {
+      try {
+        const wasOpen = this.#isOpen();
+
+        this._props.slotted = true;
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        const sheet = getSheet();
+        if (!this._shadow.adoptedStyleSheets.includes(sheet)) {
+          this._shadow.adoptedStyleSheets = [...this._shadow.adoptedStyleSheets, sheet];
+        }
+
+        if (wasOpen) this.#open();
+      } catch (e) {
+        console.error('[cx-popover]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-popover', CxPopover);
+  return CxPopover;
+}

package/src/elements/profile_menu.d.ts

@@ -0,0 +1,20 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/profile_menu.rs
+
+export interface CxProfileMenuAttributes {
+    id?: string;
+    label: string;
+    image?: string;
+    initials?: string;
+    shape?: 'circle' | 'rounded';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    width?: 'auto' | 'sm' | 'md' | 'lg';
+    entries?: string;
+    disabled?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-profile-menu': HTMLElement & CxProfileMenuAttributes;
+  }
+}