@colletdev/core 0.1.3

package/src/elements/chat_input.d.ts

@@ -0,0 +1,22 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/chat_input.rs
+
+export interface CxChatInputAttributes {
+    id?: string;
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    placeholder?: string;
+    value?: string;
+    disabled?: boolean;
+    maxRows?: number;
+    showActionButton?: boolean;
+    actionLabel?: string;
+    submitLabel?: string;
+    label?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-chat-input': HTMLElement & CxChatInputAttributes;
+  }
+}

package/src/elements/chat_input.js

@@ -0,0 +1,78 @@
+// Custom behavior for <cx-chat-input> — textarea auto-grow, submit, imperative focus.
+//
+// The Rust component renders a textarea inside shadow DOM.
+// This Custom Element adds:
+//   - Public focus() method that delegates to the inner textarea
+//   - Input event delegation for cx-input
+//   - Submit button click delegation
+//
+// Source: crates/wasm-api/src/chat_input.rs
+
+export function defineCxChatInput(wasmFn, baseClass) {
+  class CxChatInput extends baseClass {
+    static observedAttributes = ['id', 'shape', 'size', 'placeholder', 'value', 'disabled', 'show-action-button', 'action-label', 'submit-label', 'label', 'slotted'];
+    static _booleanAttrs = new Set(['disabled', 'show-action-button', 'slotted']);
+
+    set max_rows(v) { this._setProp('max_rows', v); }
+    get max_rows() { return this._props.max_rows; }
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+
+        // Input event delegation for cx-input
+        this._shadow.addEventListener('input', (e) => {
+          if (e.target.tagName === 'TEXTAREA') {
+            this._emit('cx-input', { value: e.target.value });
+          }
+        });
+
+        // Submit button delegation
+        this._shadow.addEventListener('click', (e) => {
+          const btn = e.target.closest('[data-chat-submit]');
+          if (btn) {
+            const textarea = this._shadow.querySelector('textarea');
+            this._emit('cx-input', { value: textarea?.value || '', submit: true });
+          }
+        });
+
+        // Forward focus events from inner interactive elements
+        this._shadow.addEventListener('focusin', (e) => {
+          this._emit('cx-focus', { relatedTarget: e.relatedTarget });
+        });
+        this._shadow.addEventListener('focusout', (e) => {
+          this._emit('cx-blur', { relatedTarget: e.relatedTarget });
+        });
+
+        // Forward keyboard events from inner interactive elements
+        this._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 });
+        });
+        this._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();
+    }
+
+    // ── Public imperative API ──
+    focus() {
+      const el = this._shadow.querySelector('textarea');
+      if (el) el.focus(); else super.focus();
+    }
+
+    _doRender() {
+      try {
+        this._props.slotted = true;
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-chat-input]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-chat-input', CxChatInput);
+  return CxChatInput;
+}

package/src/elements/checkbox.d.ts

@@ -0,0 +1,21 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/checkbox.rs
+
+export interface CxCheckboxAttributes {
+    id?: string;
+    label?: string;
+    shape?: 'sharp' | 'rounded';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    checked?: '' | 'checked' | 'indeterminate';
+    disabled?: boolean;
+    required?: boolean;
+    helperText?: string;
+    error?: string;
+    unlabeled?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-checkbox': HTMLElement & CxCheckboxAttributes;
+  }
+}

package/src/elements/checkbox.js

@@ -0,0 +1,114 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/checkbox.rs
+
+export function defineCxCheckbox(wasmFn, baseClass) {
+  class CxCheckbox extends baseClass {
+    static observedAttributes = ['id', 'label', 'shape', 'size', 'checked', 'disabled', 'required', 'helper-text', 'error', 'unlabeled'];
+    static _booleanAttrs = new Set(['disabled', 'required', 'unlabeled']);
+    static _hostDisplay = 'inline-flex';
+
+    // Override: Rust config expects checked as String ("checked"/"indeterminate"),
+    // but the base class converts boolean HTML attributes to true/false.
+    attributeChangedCallback(name, old, value) {
+      if (name === 'checked') {
+        // Normalize all checked representations to Rust-compatible strings:
+        //   <cx-checkbox checked>              → "" → "checked"
+        //   <cx-checkbox checked="checked">    → "checked"
+        //   <cx-checkbox checked="indeterminate"> → "indeterminate"
+        //   <cx-checkbox checked="true">       → "checked"  (React boolean coercion)
+        //   <cx-checkbox checked="false">      → ""         (React boolean coercion)
+        //   attribute removed                  → null → ""
+        let str;
+        if (value === null || value === 'false') {
+          str = '';
+        } else if (value === '' || value === 'true' || value === 'checked') {
+          str = 'checked';
+        } else {
+          str = value; // "indeterminate" or other
+        }
+        // Skip re-render if the change handler already synced this value.
+        // Without this guard, React's attribute echo after onInput triggers
+        // a full shadow DOM innerHTML replacement that kills the CSS
+        // peer-checked transition mid-animation.
+        if (this._props.checked === str) return;
+        this._props.checked = str;
+        if (this.isConnected) this._scheduleRender();
+        return;
+      }
+      super.attributeChangedCallback(name, old, value);
+    }
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // Checkbox toggle: sync checked state back to props on change.
+        // The Rust component uses CSS-only peer-checked toggle (hidden input +
+        // label), so native click-on-label works. But we need to sync state
+        // back to _props so re-renders don't reset the toggle.
+        // IMPORTANT: Rust config expects checked: String ("checked"/"indeterminate"/""),
+        // NOT a boolean. The attributeChangedCallback may send true/false for
+        // boolean HTML attributes — we normalize here.
+        shadow.addEventListener('change', (e) => {
+          const input = e.target.closest('input[type="checkbox"]');
+          if (input) {
+            this._props.checked = input.checked ? 'checked' : '';
+            this._setFormValue(input.checked ? 'on' : '');
+            this._emit('cx-input', { checked: input.checked });
+            this._emit('cx-change', { checked: input.checked });
+          }
+        });
+
+        // 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();
+    }
+
+    // ── Property: checked (boolean | string) ──
+    // Accepts boolean (true/false) or string ("checked"/"indeterminate"/"")
+    // for programmatic use: el.checked = true
+    set checked(v) {
+      if (typeof v === 'boolean') {
+        this.attributeChangedCallback('checked', null, v ? 'checked' : '');
+      } else {
+        this.attributeChangedCallback('checked', null, v);
+      }
+    }
+    get checked() { return this._props.checked === 'checked'; }
+
+    // ── Public imperative API ──
+    focus() { const el = this._shadow.querySelector('input[type="checkbox"]'); if (el) el.focus(); else super.focus(); }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      // Sync form value after render. Event delegation on shadow root
+      // avoids duplicate listeners (innerHTML replaces old DOM nodes,
+      // but shadow root persists — delegation handles new inputs).
+      const input = this._shadow.querySelector('input, textarea, select');
+      if (input) this._setFormValue(input.value || '');
+      } catch (e) {
+        console.error('[cx-checkbox]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-checkbox', CxCheckbox);
+  return CxCheckbox;
+}

package/src/elements/code_block.d.ts

@@ -0,0 +1,21 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/code_block.rs
+
+export interface CxCodeBlockAttributes {
+    id?: string;
+    content?: string;
+    variant?: string;
+    shape?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    language?: string;
+    filename?: string;
+    lineNumbers?: boolean;
+    copyButton?: boolean;
+    trafficLights?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-code-block': HTMLElement & CxCodeBlockAttributes;
+  }
+}

package/src/elements/code_block.js

@@ -0,0 +1,27 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/code_block.rs
+
+export function defineCxCodeBlock(wasmFn, baseClass) {
+  class CxCodeBlock extends baseClass {
+    static observedAttributes = ['id', 'content', 'variant', 'shape', 'size', 'language', 'filename', 'line-numbers', 'copy-button', 'traffic-lights', 'slotted'];
+    static _booleanAttrs = new Set(['line-numbers', 'copy-button', 'traffic-lights', 'slotted']);
+    static _hostDisplay = 'block';
+
+
+    connectedCallback() {
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-code-block]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-code-block', CxCodeBlock);
+  return CxCodeBlock;
+}

package/src/elements/collapsible.d.ts

@@ -0,0 +1,20 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/collapsible.rs
+
+export interface CxCollapsibleAttributes {
+    id?: string;
+    label?: string;
+    content?: string;
+    triggerHtml?: string;
+    open?: boolean;
+    icon?: string;
+    noIcon?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-collapsible': HTMLElement & CxCollapsibleAttributes;
+  }
+}

package/src/elements/collapsible.js

@@ -0,0 +1,93 @@
+// Custom behavior for <cx-collapsible> — toggle expanded/collapsed state.
+// Mirrors static/_behaviors/collapsible.js but operates inside shadow DOM.
+// Source: crates/wasm-api/src/collapsible.rs
+
+export function defineCxCollapsible(wasmFn, baseClass) {
+  class CxCollapsible extends baseClass {
+    static observedAttributes = ['id', 'label', 'trigger-html', 'open', 'icon', 'no-icon', 'size', 'disabled'];
+    static _booleanAttrs = new Set(['open', 'no-icon', 'disabled']);
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+      // Click: toggle collapsible trigger
+      shadow.addEventListener('click', (e) => {
+        const trigger = e.target.closest('[data-collapsible-trigger]');
+        if (!trigger || trigger.disabled) return;
+
+        const expanded = trigger.getAttribute('aria-expanded') === 'true';
+        const newOpen = !expanded;
+
+        // Mutate shadow DOM directly for smooth CSS animation
+        // (WASM re-render via innerHTML would destroy DOM and kill transition)
+        this.#setOpen(trigger, newOpen);
+
+        // Sync host prop — single source of truth for WASM re-renders.
+        // Direct _props mutation avoids triggering a re-render that would
+        // destroy DOM state and kill the panel animation. External attribute
+        // changes (e.g., React setting open={false}) still trigger WASM
+        // re-render via attributeChangedCallback.
+        this._props.open = newOpen;
+
+        this._emit('cx-change', { open: newOpen });
+      });
+      } // end _isInitialized guard
+
+      super.connectedCallback();
+    }
+
+    // ── Public imperative API ──
+    // These manipulate DOM state directly instead of simulating clicks,
+    // so they do NOT emit cx-change events (the caller already knows).
+    // Each method syncs the host prop to prevent stale state on re-render.
+    open() {
+      const trigger = this._shadow.querySelector('[data-collapsible-trigger]');
+      if (!trigger || trigger.getAttribute('aria-expanded') === 'true') return;
+      this.#setOpen(trigger, true);
+      this._props.open = true;
+    }
+    close() {
+      const trigger = this._shadow.querySelector('[data-collapsible-trigger]');
+      if (!trigger || trigger.getAttribute('aria-expanded') !== 'true') return;
+      this.#setOpen(trigger, false);
+      this._props.open = false;
+    }
+    toggle() {
+      const trigger = this._shadow.querySelector('[data-collapsible-trigger]');
+      if (!trigger) return;
+      const newOpen = trigger.getAttribute('aria-expanded') !== 'true';
+      this.#setOpen(trigger, newOpen);
+      this._props.open = newOpen;
+    }
+
+    #setOpen(trigger, open) {
+      trigger.setAttribute('aria-expanded', String(open));
+      const root = this._shadow.querySelector('[data-collapsible]');
+      const panel = this._shadow.querySelector('[data-collapsible-panel]');
+      if (panel) {
+        if (open) {
+          panel.removeAttribute('data-collapsed');
+          if (root) root.setAttribute('data-state', 'open');
+        } else {
+          panel.setAttribute('data-collapsed', '');
+          if (root) root.setAttribute('data-state', 'closed');
+        }
+      }
+    }
+
+    _doRender() {
+      try {
+        this._props.slotted = true;
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-collapsible]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-collapsible', CxCollapsible);
+  return CxCollapsible;
+}

package/src/elements/date_picker.d.ts

@@ -0,0 +1,30 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/date_picker.rs
+
+export interface CxDatePickerAttributes {
+    id?: string;
+    label: string;
+    variant?: 'outline' | 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    selected?: string;
+    min?: string;
+    max?: string;
+    disabledDates?: string;
+    format?: 'iso' | 'us-short' | 'eu-short' | 'eu-dot';
+    firstDay?: 'monday' | 'sunday';
+    placeholder?: string;
+    helperText?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    name?: string;
+    onChange?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-date-picker': HTMLElement & CxDatePickerAttributes;
+  }
+}