@colletdev/core 0.1.3 → 0.1.5

package/custom-elements.json

@@ -2903,6 +2903,14 @@
               "default": "false",
               "fieldName": "show_prev_next"
             },
+            {
+              "name": "variant",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "variant"
+            },
             {
               "name": "prev-label",
               "type": {
@@ -2919,6 +2927,14 @@
               "default": "\"\"",
               "fieldName": "next_label"
             },
+            {
+              "name": "load-more-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "load_more_label"
+            },
             {
               "name": "page-size-options",
               "type": {

package/generated/index.js

@@ -23,7 +23,7 @@
 import { initWasm, loadSharedStyles, loadInlineSharedStyles, loadMotionStyles, loadInlineMotionStyles, injectTokensToHead, injectFoucPrevention, CxElement, CxFormElement } from '../src/runtime.js';
 
 // Package version — used for CDN fallback URL
-const PKG_VERSION = '0.1.3';
+const PKG_VERSION = '0.1.4';
 
 // ─── Lazy WASM + CSS ───
 // WASM glue and CSS strings are NOT imported at module level.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colletdev/core",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Rust/WASM Custom Elements — 48 production-grade UI components",
   "type": "module",
   "main": "generated/index.js",
@@ -40,8 +40,18 @@
     "wasm/",
     "custom-elements.json"
   ],
+  "bin": {
+    "collet-purge": "src/purge.mjs"
+  },
   "customElements": "custom-elements.json",
-  "keywords": ["web-components", "custom-elements", "rust", "wasm", "ui", "design-system"],
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "rust",
+    "wasm",
+    "ui",
+    "design-system"
+  ],
   "author": "Dan",
   "license": "MIT",
   "sideEffects": false,

package/src/elements/chat_input.js

@@ -20,10 +20,11 @@ export function defineCxChatInput(wasmFn, baseClass) {
       if (!this._isInitialized) {
         this._markInitialized();
 
-        // Input event delegation for cx-input
+        // Input event delegation for cx-input + multiline detection
         this._shadow.addEventListener('input', (e) => {
           if (e.target.tagName === 'TEXTAREA') {
             this._emit('cx-input', { value: e.target.value });
+            this.#detectMultiline(e.target);
           }
         });
 
@@ -56,6 +57,33 @@ export function defineCxChatInput(wasmFn, baseClass) {
       super.connectedCallback();
     }
 
+    // ── Multiline Detection ──
+    // Toggles `data-multiline` on the container when textarea exceeds one row.
+    // CSS drives the pill→rounded morph via `data-[multiline]:rounded-2xl` and
+    // `group-data-[multiline]:` selectors on child elements.
+    #detectMultiline(textarea) {
+      const container = textarea.closest('[data-chat-input]');
+      if (!container) return;
+
+      // Store baseline height on first measure (single-line height).
+      if (!textarea._baseH) {
+        textarea._baseH = textarea.scrollHeight;
+      }
+
+      const hasNewline = textarea.value.includes('\n');
+      const hasOverflow = textarea._baseH ? textarea.scrollHeight > textarea._baseH + 2 : false;
+      const isMulti = hasNewline || hasOverflow;
+      const current = container.hasAttribute('data-multiline');
+
+      if (isMulti !== current) {
+        if (isMulti) {
+          container.setAttribute('data-multiline', '');
+        } else {
+          container.removeAttribute('data-multiline');
+        }
+      }
+    }
+
     // ── Public imperative API ──
     focus() {
       const el = this._shadow.querySelector('textarea');
@@ -64,9 +92,25 @@ export function defineCxChatInput(wasmFn, baseClass) {
 
     _doRender() {
       try {
+        // Preserve textarea value across re-renders (innerHTML replacement).
+        const prevTextarea = this._shadow.querySelector('textarea');
+        const savedValue = prevTextarea?.value || '';
+
         this._props.slotted = true;
         const result = wasmFn(this._props);
         this._injectHtml(result);
+
+        // Restore textarea value and re-measure multiline state.
+        const textarea = this._shadow.querySelector('textarea');
+        if (textarea && savedValue) {
+          textarea.value = savedValue;
+          requestAnimationFrame(() => this.#detectMultiline(textarea));
+        } else if (textarea) {
+          // First render: measure baseline height.
+          requestAnimationFrame(() => {
+            textarea._baseH = textarea.scrollHeight;
+          });
+        }
       } catch (e) {
         console.error('[cx-chat-input]', e);
       }

package/src/elements/pagination.d.ts

@@ -10,8 +10,10 @@ export interface CxPaginationAttributes {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     showInfo?: boolean;
     showPrevNext?: boolean;
+    variant?: string;
     prevLabel?: string;
     nextLabel?: string;
+    loadMoreLabel?: string;
     pageSizeOptions?: string;
 }
 

package/src/elements/pagination.js

@@ -3,7 +3,7 @@
 
 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 observedAttributes = ['id', 'current-page', 'page-size', 'total-items', 'label', 'size', 'show-info', 'show-prev-next', 'variant', 'prev-label', 'next-label', 'load-more-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';

package/src/purge.mjs

@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+// collet-purge — Clear stale WASM, CSS, and Vite cache artifacts after upgrading.
+//
+// Usage:
+//   npx @colletdev/core purge       # clear caches and stale artifacts
+//   npx collet-purge                # same thing
+//
+// What it clears:
+//   1. Vite dep cache (.vite/)           — forces re-optimization with new WASM
+//   2. Vite build cache (node_modules/.vite/) — stale pre-bundled modules
+//   3. Copied WASM in public/            — replaced by fresh binary from package
+//   4. Old @collet/ scope packages       — if migrating from @collet to @colletdev
+//
+// This is safe to run at any time — Vite rebuilds its cache on next dev start.
+
+import { existsSync, rmSync, readdirSync } from 'node:fs';
+import { resolve, join } from 'node:path';
+
+const CWD = process.cwd();
+let cleared = 0;
+
+function rm(path, label) {
+  if (existsSync(path)) {
+    rmSync(path, { recursive: true, force: true });
+    console.log(`  Cleared: ${label}`);
+    cleared++;
+  }
+}
+
+console.log('');
+console.log('Collet Purge — clearing stale artifacts');
+console.log('─'.repeat(45));
+
+// 1. Vite dep optimization cache
+rm(resolve(CWD, 'node_modules/.vite'), 'node_modules/.vite/ (Vite dep cache)');
+
+// 2. Vite build cache in project root
+rm(resolve(CWD, '.vite'), '.vite/ (Vite build cache)');
+
+// 3. Stale WASM binary copied to public/
+rm(resolve(CWD, 'public/wasm_api_bg.wasm'), 'public/wasm_api_bg.wasm (stale WASM copy)');
+
+// 4. Old @collet/ scope packages (pre-rename)
+const oldScopeDir = resolve(CWD, 'node_modules/@collet');
+if (existsSync(oldScopeDir)) {
+  try {
+    const entries = readdirSync(oldScopeDir);
+    if (entries.length > 0) {
+      rm(oldScopeDir, '@collet/ (old scope — migrate to @colletdev/)');
+    }
+  } catch { /* permission error — skip */ }
+}
+
+// 5. Framework-specific caches
+rm(resolve(CWD, '.next/cache'), '.next/cache/ (Next.js build cache)');
+rm(resolve(CWD, '.nuxt'), '.nuxt/ (Nuxt build cache)');
+rm(resolve(CWD, '.svelte-kit'), '.svelte-kit/ (SvelteKit build cache)');
+rm(resolve(CWD, '.angular/cache'), '.angular/cache/ (Angular build cache)');
+
+console.log('');
+if (cleared === 0) {
+  console.log('Nothing to clear — caches are clean.');
+} else {
+  console.log(`Cleared ${cleared} stale artifact${cleared > 1 ? 's' : ''}.`);
+  console.log('Run your dev server to rebuild fresh caches.');
+}
+console.log('');

package/src/runtime.js

@@ -231,6 +231,12 @@ const compatSheet = createSyncSheet([
   // Scoped to [data-check] so it doesn't break "hidden data-[open]:block" on dropdowns.
   '[data-check].hidden { display: none !important; }',
   '',
+  // Tailwind v4 press/scale compat: MicroInteraction::press() generates
+  // `transition-transform active:scale-[0.97]`. TW4 uses the individual CSS
+  // `scale` property (not `transform: scale(...)`). `transition: transform`
+  // won't animate it. This rule overrides the transition to target `scale`.
+  '.transition-transform { transition-property: scale !important; }',
+  '',
   // Ensure border-box in shadow DOM (Tailwind preflight may not load first)
   '*, *::before, *::after { box-sizing: border-box; }',
   '',

package/src/server.js

@@ -114,7 +114,11 @@ export async function createRenderer(options = {}) {
    * @returns {{ html: string, sprites: string, a11y: object }}
    */
   function renderToString(component, config) {
-    const result = cx_render(component, config);
+    // Always enable slot mode so shadow HTML includes <slot> elements.
+    // Without this, slot-based components (text, card, dialog, drawer, etc.)
+    // render empty containers because content comes from light DOM children,
+    // not the config object.
+    const result = cx_render(component, { ...config, slotted: true });
     return result;
   }
 
@@ -135,7 +139,7 @@ export async function createRenderer(options = {}) {
    * @returns {string} Full HTML string ready for insertion into a document
    */
   function renderDSD(component, config, children = '') {
-    const result = cx_render(component, config);
+    const result = cx_render(component, { ...config, slotted: true });
     const tag = `cx-${component.replace(/_/g, '-')}`;
     const attrs = propsToAttributes(config);
     const styles = stylesheetBlock();
@@ -156,7 +160,7 @@ export async function createRenderer(options = {}) {
    * @returns {string} `<template shadowrootmode="open">...</template>`
    */
   function renderDSDFragment(component, config) {
-    const result = cx_render(component, config);
+    const result = cx_render(component, { ...config, slotted: true });
     const styles = stylesheetBlock();
     const shadow = `${styles}${result.sprites}${result.html}`;
     return `<template shadowrootmode="open">${shadow}</template>`;