@colletdev/core 0.1.3

package/src/server.d.ts

@@ -0,0 +1,69 @@
+// Collet Server Renderer — Pre-render components to HTML in Node.js.
+
+export interface RenderResult {
+  /** The component HTML fragment (shadow content). */
+  html: string;
+  /** SVG sprite definitions. Empty string if no icons used. */
+  sprites: string;
+  /** Accessibility metadata for the host element. */
+  a11y: {
+    role?: string;
+    focusable: boolean;
+    keyboard_pattern: string;
+    aria: Record<string, string>;
+  };
+}
+
+export interface ServerRenderer {
+  /**
+   * Render a component to its inner HTML.
+   * Returns the shadow content, sprites, and a11y metadata.
+   */
+  renderToString(component: string, config: Record<string, unknown>): RenderResult;
+
+  /**
+   * Render a complete `<cx-{name}>` element with Declarative Shadow DOM.
+   * The browser paints this instantly — no JavaScript needed.
+   *
+   * @param component - Component name (snake_case: 'button', 'text_input')
+   * @param config - Component props
+   * @param children - Optional light DOM content for slot projection
+   */
+  renderDSD(component: string, config: Record<string, unknown>, children?: string): string;
+
+  /**
+   * Render just the `<template shadowrootmode="open">` fragment.
+   * Use when the host element already exists in your HTML.
+   */
+  renderDSDFragment(component: string, config: Record<string, unknown>): string;
+
+  /** Render GFM markdown to sanitized HTML. */
+  renderMarkdown(input: string): string;
+}
+
+export interface CreateRendererOptions {
+  /** Custom path to wasm_api_bg.wasm. Defaults to the bundled WASM. */
+  wasmPath?: string;
+  /** URL for the shared stylesheet in DSD templates. Defaults to '/@colletdev/cx-utilities.css'. */
+  stylesUrl?: string;
+  /** URL for the motion stylesheet in DSD templates. Defaults to '/@colletdev/tokens-shadow.css'. */
+  motionUrl?: string;
+  /** Inline CSS directly into DSD templates instead of using <link>. Best for static site generators. */
+  inlineStyles?: boolean;
+}
+
+/**
+ * Create a server renderer instance.
+ *
+ * Loads the WASM binary synchronously from disk (~5ms one-time cost).
+ * Reuse the returned renderer for all render calls.
+ *
+ * @example
+ * ```ts
+ * import { createRenderer } from '@colletdev/core/server';
+ *
+ * const cx = await createRenderer();
+ * const html = cx.renderDSD('button', { label: 'Click', variant: 'filled' });
+ * ```
+ */
+export function createRenderer(options?: CreateRendererOptions): Promise<ServerRenderer>;

package/src/server.js

@@ -0,0 +1,176 @@
+// Collet Server Renderer — Pre-render components to HTML in Node.js.
+//
+// This module loads the WASM binary synchronously (no fetch, no browser APIs)
+// and exposes renderToString() / renderDSD() for server-side or build-time
+// rendering. The output can be injected as Declarative Shadow DOM so the
+// browser paints components BEFORE any JavaScript executes.
+//
+// Usage:
+//   import { createRenderer } from '@colletdev/core/server';
+//   const { renderToString, renderDSD } = await createRenderer();
+//
+//   // Render component HTML (inner shadow content)
+//   const html = renderToString('button', { label: 'Click', variant: 'filled' });
+//
+//   // Render full Declarative Shadow DOM element
+//   const dsd = renderDSD('button', { label: 'Click', variant: 'filled' });
+//   // → '<cx-button variant="filled" label="Click">
+//   //      <template shadowrootmode="open">
+//   //        <link rel="stylesheet" href="...">
+//   //        <svg>...</svg><button class="...">Click</button>
+//   //      </template>
+//   //    </cx-button>'
+
+import { readFileSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import { UTILITIES_CSS, TOKENS_SHADOW_CSS } from '../generated/styles.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// Resolve paths relative to the package root (src/ → parent)
+const WASM_PATH = join(__dirname, '..', 'wasm', 'wasm_api_bg.wasm');
+
+// ─── Serialization ───
+// Convert a props object to kebab-case HTML attributes.
+// Boolean true → bare attribute, false/null → omitted, rest → quoted value.
+function propsToAttributes(props) {
+  const parts = [];
+  for (const [key, value] of Object.entries(props)) {
+    if (value === false || value === null || value === undefined) continue;
+    const attr = key.replace(/_/g, '-');
+    if (value === true) {
+      parts.push(attr);
+    } else if (typeof value === 'object') {
+      // Arrays/objects → JSON attribute (for items, options, steps, etc.)
+      parts.push(`${attr}='${JSON.stringify(value).replace(/'/g, '&#39;')}'`);
+    } else {
+      parts.push(`${attr}="${String(value).replace(/"/g, '&quot;')}"`);
+    }
+  }
+  return parts.length > 0 ? ' ' + parts.join(' ') : '';
+}
+
+/**
+ * Create a server renderer instance.
+ *
+ * Loads the WASM binary synchronously from disk and returns render functions.
+ * Call this once at startup (or build-time plugin init), then reuse the
+ * returned functions for all render calls — WASM initialization is a one-time
+ * cost (~5ms).
+ *
+ * @param {object} [options]
+ * @param {string} [options.wasmPath] - Custom path to wasm_api_bg.wasm
+ * @param {string} [options.stylesUrl] - URL path for the shared stylesheet <link> in DSD templates.
+ *                                       Defaults to '/@colletdev/cx-utilities.css'.
+ *                                       Set to the URL where cx-utilities.css is served in your app.
+ * @param {string} [options.motionUrl] - URL path for the motion/animation stylesheet <link>.
+ *                                       Defaults to '/@colletdev/tokens-shadow.css'.
+ * @param {boolean} [options.inlineStyles] - When true, inline the CSS directly into each DSD template
+ *                                           instead of using <link> elements. Eliminates the stylesheet
+ *                                           network request at the cost of larger HTML. Best for
+ *                                           static-site generators where HTML is cached.
+ * @returns {Promise<{ renderToString, renderDSD, renderDSDFragment }>}
+ */
+export async function createRenderer(options = {}) {
+  const {
+    wasmPath = WASM_PATH,
+    stylesUrl = '/@colletdev/cx-utilities.css',
+    motionUrl = '/@colletdev/tokens-shadow.css',
+    inlineStyles = false,
+  } = options;
+
+  // Load WASM glue module dynamically (it uses import.meta.url internally
+  // but we bypass that by providing the bytes directly via initSync).
+  const wasmGlue = await import('../wasm/wasm_api.js');
+  const { initSync, cx_render, cx_render_markdown } = wasmGlue;
+
+  // Read WASM binary from disk and initialize synchronously.
+  // initSync uses WebAssembly.Module + WebAssembly.Instance (no fetch).
+  const wasmBytes = readFileSync(wasmPath);
+  initSync({ module: wasmBytes });
+
+  // Use pre-inlined CSS from generated/styles.js (no filesystem reads needed)
+  const inlineCss = inlineStyles ? UTILITIES_CSS + '\n' + TOKENS_SHADOW_CSS : '';
+
+  // Build the stylesheet block that goes inside each DSD template.
+  // Browsers deduplicate <link> parsing across shadow roots pointing to
+  // the same URL — this is a Chrome/Firefox/Safari DSD optimization.
+  function stylesheetBlock() {
+    if (inlineStyles && inlineCss) {
+      return `<style>${inlineCss}</style>`;
+    }
+    return `<link rel="stylesheet" href="${stylesUrl}"><link rel="stylesheet" href="${motionUrl}">`;
+  }
+
+  /**
+   * Render a component to its inner HTML string.
+   *
+   * Returns only the shadow content (no host element, no template wrapper).
+   * Use this when you need raw HTML for custom injection or testing.
+   *
+   * @param {string} component - Component name (snake_case: 'button', 'text_input')
+   * @param {object} config - Component props matching the Rust config struct
+   * @returns {{ html: string, sprites: string, a11y: object }}
+   */
+  function renderToString(component, config) {
+    const result = cx_render(component, config);
+    return result;
+  }
+
+  /**
+   * Render a complete Declarative Shadow DOM element.
+   *
+   * Returns a full `<cx-{name}>` element with a `<template shadowrootmode="open">`
+   * containing the pre-rendered shadow content and stylesheet references.
+   * The browser paints this instantly — no JavaScript needed for first render.
+   *
+   * When the Custom Element class is registered (via init()), the element
+   * "upgrades" and becomes interactive. The DSD shadow root is reused —
+   * no re-creation, no flash.
+   *
+   * @param {string} component - Component name (snake_case: 'button', 'text_input')
+   * @param {object} config - Component props matching the Rust config struct
+   * @param {string} [children] - Light DOM content (projected via <slot>)
+   * @returns {string} Full HTML string ready for insertion into a document
+   */
+  function renderDSD(component, config, children = '') {
+    const result = cx_render(component, config);
+    const tag = `cx-${component.replace(/_/g, '-')}`;
+    const attrs = propsToAttributes(config);
+    const styles = stylesheetBlock();
+    const shadow = `${styles}${result.sprites}${result.html}`;
+
+    return `<${tag}${attrs}><template shadowrootmode="open">${shadow}</template>${children}</${tag}>`;
+  }
+
+  /**
+   * Render just the DSD template fragment (no host element).
+   *
+   * Use this when you already have the host element in your HTML and need
+   * to inject the template as a child. Useful for Vite transformIndexHtml
+   * or framework-specific SSR integrations.
+   *
+   * @param {string} component - Component name (snake_case: 'button', 'text_input')
+   * @param {object} config - Component props matching the Rust config struct
+   * @returns {string} `<template shadowrootmode="open">...</template>`
+   */
+  function renderDSDFragment(component, config) {
+    const result = cx_render(component, config);
+    const styles = stylesheetBlock();
+    const shadow = `${styles}${result.sprites}${result.html}`;
+    return `<template shadowrootmode="open">${shadow}</template>`;
+  }
+
+  /**
+   * Render markdown to sanitized HTML.
+   *
+   * @param {string} input - GFM markdown string
+   * @returns {string} `<div class="cx-prose">...</div>`
+   */
+  function renderMarkdown(input) {
+    return cx_render_markdown(input);
+  }
+
+  return { renderToString, renderDSD, renderDSDFragment, renderMarkdown };
+}

package/src/streaming-markdown.js

@@ -0,0 +1,43 @@
+// streaming-markdown (smd) — vendored from https://github.com/thetarnav/streaming-markdown
+// License: MIT — Copyright (c) thetarnav
+// Version: latest as of 2026-03-09
+// Size: ~3KB gzipped
+//
+// Streaming markdown parser that incrementally adds DOM nodes as tokens arrive.
+// Used by Collet's message-stream behavior module for real-time AI responses.
+//
+// API:
+//   smd.parser(renderer)        — create parser with a renderer
+//   smd.parser_write(parser, s) — write markdown tokens
+//   smd.parser_end(parser)      — end stream, flush remaining
+//   smd.default_renderer(el)    — create default DOM renderer targeting element
+
+var D=2,C=3,h=4,b=5,B=6,U=7,G=8,S=9,x=10,m=11,H=12,K=13,M=14,Q=15,w=16,q=17,W=18,P=19,Y=20,y=21,F=22,$=23,v=24,X=25,j=26,z=27,J=28,V=29,Z=30,p=31;var I=1,k=2,L=4,T=8,f=16;function ee(e){switch(e){case I:return"href";case k:return"src";case L:return"class";case T:return"checked";case f:return"start"}}var ne=e=>{switch(e){case 1:return 3;case 2:return 4;case 3:return 5;case 4:return 6;case 5:return 7;default:return 8}},te=ne;var O=24;function ae(e){let c=new Uint32Array(O);return c[0]=1,{renderer:e,text:"",pending:"",tokens:c,len:0,token:1,fence_end:0,blockquote_idx:0,hr_char:"",hr_chars:0,fence_start:0,spaces:new Uint8Array(O),indent:"",indent_len:0,table_state:0}}function ce(e){e.pending.length>0&&o(e,`
+`)}function a(e){e.text.length!==0&&(e.renderer.add_text(e.renderer.data,e.text),e.text="")}function _(e){e.len-=1,e.token=e.tokens[e.len],e.renderer.end_token(e.renderer.data)}function i(e,c){(e.tokens[e.len]===24||e.tokens[e.len]===23)&&c!==25&&_(e),e.len+=1,e.tokens[e.len]=c,e.token=c,e.renderer.add_token(e.renderer.data,c)}function re(e,c,n){for(;n<=e.len;){if(e.tokens[n]===c)return n;n+=1}return-1}function l(e,c){for(e.fence_start=0;e.len>c;)_(e)}function u(e,c){let n=0;for(let t=0;t<=e.len&&(c-=e.spaces[t],!(c<0));t+=1)switch(e.tokens[t]){case 9:case 10:case 20:case 25:n=t;break}for(;e.len>n;)_(e);return c}function A(e,c){let n=-1,t=-1;for(let s=e.blockquote_idx+1;s<=e.len;s+=1)if(e.tokens[s]===25){if(e.indent_len<e.spaces[s]){t=-1;break}t=s}else e.tokens[s]===c&&(n=s);return t===-1?n===-1?(l(e,e.blockquote_idx),i(e,c),!0):(l(e,n),!1):(l(e,t),i(e,c),!0)}function g(e,c){i(e,25),e.spaces[e.len]=e.indent_len+c,E(e),e.token=103}function E(e){e.indent="",e.indent_len=0,e.pending=""}function N(e){switch(e){case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:return!0;default:return!1}}function ie(e){switch(e){case 32:case 58:case 59:case 41:case 44:case 33:case 46:case 63:case 93:case 10:return!0;default:return!1}}function se(e){return N(e)||ie(e)}function o(e,c){for(let n of c){if(e.token===101){switch(n){case" ":e.indent_len+=1;continue;case"	":e.indent_len+=4;continue}let s=u(e,e.indent_len);e.indent_len=0,e.token=e.tokens[e.len],s>0&&o(e," ".repeat(s))}let t=e.pending+n;switch(e.token){case 21:case 1:case 20:case 24:case 23:switch(e.pending[0]){case void 0:e.pending=n;continue;case" ":e.pending=n,e.indent+=" ",e.indent_len+=1;continue;case"	":e.pending=n,e.indent+="	",e.indent_len+=4;continue;case`
+`:if(e.tokens[e.len]===25&&e.token===21){_(e),E(e),e.pending=n;continue}l(e,e.blockquote_idx),E(e),e.blockquote_idx=0,e.fence_start=0,e.pending=n;continue;case"#":switch(n){case"#":if(e.pending.length<6){e.pending=t;continue}break;case" ":u(e,e.indent_len),i(e,te(e.pending.length)),E(e);continue}break;case">":{let r=re(e,20,e.blockquote_idx+1);r===-1?(l(e,e.blockquote_idx),e.blockquote_idx+=1,e.fence_start=0,i(e,20)):e.blockquote_idx=r,E(e),e.pending=n;continue}case"-":case"*":case"_":if(e.hr_chars===0&&(e.hr_chars=1,e.hr_char=e.pending),e.hr_chars>0){switch(n){case e.hr_char:e.hr_chars+=1,e.pending=t;continue;case" ":e.pending=t;continue;case`
+`:if(e.hr_chars<3)break;u(e,e.indent_len),e.renderer.add_token(e.renderer.data,22),e.renderer.end_token(e.renderer.data),E(e),e.hr_chars=0;continue}e.hr_chars=0}if(e.pending[0]!="_"&&e.pending[1]===" "){A(e,23),g(e,2),o(e,t.slice(2));continue}break;case"`":if(e.pending.length<3){if(n==="`"){e.pending=t,e.fence_start=t.length;continue}e.fence_start=0;break}switch(n){case"`":e.pending.length===e.fence_start?(e.pending=t,e.fence_start=t.length):(i(e,2),E(e),e.fence_start=0,o(e,t));continue;case`
+`:{u(e,e.indent_len),i(e,10),e.pending.length>e.fence_start&&e.renderer.set_attr(e.renderer.data,L,e.pending.slice(e.fence_start)),E(e),e.token=101;continue}default:e.pending=t;continue}case"+":if(n!==" ")break;A(e,23),g(e,2);continue;case"0":case"1":case"2":case"3":case"4":case"5":case"6":case"7":case"8":case"9":if(e.pending[e.pending.length-1]==="."){if(n!==" ")break;A(e,24)&&e.pending!=="1."&&e.renderer.set_attr(e.renderer.data,f,e.pending.slice(0,-1)),g(e,e.pending.length+1);continue}else{let r=n.charCodeAt(0);if(r===46||N(r)){e.pending=t;continue}}break;case"|":l(e,e.blockquote_idx),i(e,27),i(e,28),e.pending="",o(e,n);continue}let s=t;if(e.token===21)e.token=e.tokens[e.len],e.renderer.add_token(e.renderer.data,21),e.renderer.end_token(e.renderer.data);else if(e.indent_len>=4){let r=0;for(;r<4;r+=1)if(e.indent[r]==="	"){r=r+1;break}s=e.indent.slice(r)+t,i(e,9)}else i(e,2);E(e),o(e,s);continue;case 27:if(e.table_state===1)switch(n){case"-":case" ":case"|":case":":e.pending=t;continue;case`
+`:e.table_state=2,e.pending="";continue;default:_(e),e.table_state=0;break}else switch(e.pending){case"|":i(e,28),e.pending="",o(e,n);continue;case`
+`:_(e),e.pending="",e.table_state=0,o(e,n);continue}break;case 28:switch(e.pending){case"":break;case"|":i(e,29),_(e),e.pending="",o(e,n);continue;case`
+`:_(e),e.table_state=Math.min(e.table_state+1,2),e.pending="",o(e,n);continue;default:i(e,29),o(e,n);continue}break;case 29:if(e.pending==="|"){a(e),_(e),e.pending="",o(e,n);continue}break;case 9:switch(t){case`
+    `:case`
+   	`:case`
+  	`:case`
+ 	`:case`
+	`:e.text+=`
+`,e.pending="";continue;case`
+`:case`
+ `:case`
+  `:case`
+   `:e.pending=t;continue;default:e.pending.length!==0?(a(e),_(e),e.pending=n):e.text+=n;continue}case 10:switch(n){case"`":e.pending=t;continue;case`
+`:if(t.length===e.fence_start+e.fence_end+1){a(e),_(e),e.pending="",e.fence_start=0,e.fence_end=0,e.token=101;continue}e.token=101;break;case" ":if(e.pending[0]===`
+`){e.pending=t,e.fence_end+=1;continue}break}e.text+=e.pending,e.pending=n,e.fence_end=1;continue;case 11:switch(n){case"`":t.length===e.fence_start+ +(e.pending[0]===" ")?(a(e),_(e),e.pending="",e.fence_start=0):e.pending=t;continue;case`
+`:e.text+=e.pending,e.pending="",e.token=21,e.blockquote_idx=0,a(e);continue;case" ":e.text+=e.pending,e.pending=n;continue;default:e.text+=t,e.pending="";continue}case 103:switch(e.pending.length){case 0:if(n!=="[")break;e.pending=t;continue;case 1:if(n!==" "&&n!=="x")break;e.pending=t;continue;case 2:if(n!=="]")break;e.pending=t;continue;case 3:if(n!==" ")break;e.renderer.add_token(e.renderer.data,26),e.pending[1]==="x"&&e.renderer.set_attr(e.renderer.data,T,""),e.renderer.end_token(e.renderer.data),e.pending=" ";continue}e.token=e.tokens[e.len],e.pending="",o(e,t);continue;case 14:case 15:{let r="*",d=12;if(e.token===15&&(r="_",d=13),r===e.pending){if(a(e),r===n){_(e),e.pending="";continue}i(e,d),e.pending=n;continue}break}case 12:case 13:{let r="*",d=14;switch(e.token===13&&(r="_",d=15),e.pending){case r:r===n?e.tokens[e.len-1]===d?e.pending=t:(a(e),i(e,d),e.pending=""):(a(e),_(e),e.pending=n);continue;case r+r:let R=e.token;a(e),_(e),_(e),r!==n?(i(e,R),e.pending=n):e.pending="";continue}break}case 16:if(t==="~~"){a(e),_(e),e.pending="";continue}break;case 105:n===`
+`?(a(e),i(e,30),e.pending=""):(e.token=e.tokens[e.len],e.pending[0]==="\u005b"?e.text+="[":e.text+="$$",e.pending="",o(e,n));continue;case 30:if(t==="\\]"||t==="$$"){a(e),_(e),e.pending="";continue}break;case 31:if(t==="\\)"||e.pending[0]==="$"){a(e),_(e),n===")"?e.pending="":e.pending=n;continue}break;case 102:t==="http://"||t==="https://"?(a(e),i(e,18),e.pending=t,e.text=t):"http:/"[e.pending.length]===n||"https:/"[e.pending.length]===n?e.pending=t:(e.token=e.tokens[e.len],o(e,n));continue;case 17:case 19:if(e.pending==="]"){a(e),n==="("?e.pending=t:(_(e),e.pending=n);continue}if(e.pending[0]==="]"&&e.pending[1]==="("){if(n===")"){let r=e.token===17?I:k,d=e.pending.slice(2);e.renderer.set_attr(e.renderer.data,r,d),_(e),e.pending=""}else e.pending+=n;continue}break;case 18:n===" "||n===`
+`||n==="\\"?(e.renderer.set_attr(e.renderer.data,I,e.pending),a(e),_(e),e.pending=n):(e.text+=n,e.pending=t);continue;case 104:if(t.startsWith("<br")){if(t.length===3||n===" "||n==="/"&&(t.length===4||e.pending[e.pending.length-1]===" ")){e.pending=t;continue}if(n===">"){a(e),e.token=e.tokens[e.len],e.renderer.add_token(e.renderer.data,21),e.renderer.end_token(e.renderer.data),e.pending="";continue}}e.token=e.tokens[e.len],e.text+="<",e.pending=e.pending.slice(1),o(e,n);continue}switch(e.pending[0]){case"\\":if(e.token===19||e.token===30||e.token===31)break;switch(n){case"(":a(e),i(e,31),e.pending="";continue;case"[":e.token=105,e.pending=t;continue;case`
+`:e.pending=n;continue;default:let s=n.charCodeAt(0);e.pending="",e.text+=N(s)||s>=65&&s<=90||s>=97&&s<=122?t:n;continue}case`
+`:switch(e.token){case 19:case 30:case 31:break;case 3:case 4:case 5:case 6:case 7:case 8:a(e),l(e,e.blockquote_idx),e.blockquote_idx=0,e.pending=n;continue;default:a(e),e.pending=n,e.token=21,e.blockquote_idx=0;continue}break;case"<":if(e.token!==19&&e.token!==30&&e.token!==31){a(e),e.pending=t,e.token=104;continue}break;case"`":if(e.token===19)break;n==="`"?(e.fence_start+=1,e.pending=t):(e.fence_start+=1,a(e),i(e,11),e.text=n===" "||n===`
+`?"":n,e.pending="");continue;case"_":case"*":{if(e.token===19||e.token===30||e.token===31||e.token===14)break;let s=12,r=14,d=e.pending[0];if(d==="_"&&(s=13,r=15),e.pending.length===1){if(d===n){e.pending=t;continue}if(n!==" "&&n!==`
+`){a(e),i(e,s),e.pending=n;continue}}else{if(d===n){a(e),i(e,r),i(e,s),e.pending="";continue}if(n!==" "&&n!==`
+`){a(e),i(e,r),e.pending=n;continue}}break}case"~":if(e.token!==19&&e.token!==16){if(e.pending==="~"){if(n==="~"){e.pending=t;continue}}else if(n!==" "&&n!==`
+`){a(e),i(e,16),e.pending=n;continue}}break;case"$":if(e.token!==19&&e.token!==16&&e.pending==="$")if(n==="$"){e.token=105,e.pending=t;continue}else{if(se(n.charCodeAt(0)))break;a(e),i(e,31),e.pending=n;continue}break;case"[":if(e.token!==19&&e.token!==17&&e.token!==30&&e.token!==31&&n!=="]"){a(e),i(e,17),e.pending=n;continue}break;case"!":if(e.token!==19&&n==="["){a(e),i(e,19),e.pending="";continue}break;case" ":if(e.pending.length===1&&n===" ")continue;break}if(e.token!==19&&e.token!==17&&e.token!==30&&e.token!==31&&n==="h"&&(e.pending===" "||e.pending==="")){e.text+=e.pending,e.pending=n,e.token=102;continue}e.text+=e.pending,e.pending=n}a(e)}function _e(e){return{add_token:oe,end_token:de,add_text:Ee,set_attr:le,data:{nodes:[e,,,,,],index:0}}}function oe(e,c){let n=e.nodes[e.index],t;switch(c){case 1:return;case 20:t=document.createElement("blockquote");break;case 2:t=document.createElement("p");break;case 21:t=document.createElement("br");break;case 22:t=document.createElement("hr");break;case 3:t=document.createElement("h1");break;case 4:t=document.createElement("h2");break;case 5:t=document.createElement("h3");break;case 6:t=document.createElement("h4");break;case 7:t=document.createElement("h5");break;case 8:t=document.createElement("h6");break;case 12:case 13:t=document.createElement("em");break;case 14:case 15:t=document.createElement("strong");break;case 16:t=document.createElement("s");break;case 11:t=document.createElement("code");break;case 18:case 17:t=document.createElement("a");break;case 19:t=document.createElement("img");break;case 23:t=document.createElement("ul");break;case 24:t=document.createElement("ol");break;case 25:t=document.createElement("li");break;case 26:let s=t=document.createElement("input");s.type="checkbox",s.disabled=!0;break;case 9:case 10:n=n.appendChild(document.createElement("pre")),t=document.createElement("code");break;case 27:t=document.createElement("table");break;case 28:switch(n.children.length){case 0:n=n.appendChild(document.createElement("thead"));break;case 1:n=n.appendChild(document.createElement("tbody"));break;default:n=n.children[1]}t=document.createElement("tr");break;case 29:t=document.createElement(n.parentElement?.tagName==="THEAD"?"th":"td");break;case 30:t=document.createElement("equation-block");break;case 31:t=document.createElement("equation-inline");break}e.nodes[++e.index]=n.appendChild(t)}function de(e){e.index-=1}function Ee(e,c){e.nodes[e.index].appendChild(document.createTextNode(c))}function le(e,c,n){e.nodes[e.index].setAttribute(ee(c),n)}export{Y as BLOCKQUOTE,j as CHECKBOX,T as CHECKED,S as CODE_BLOCK,x as CODE_FENCE,m as CODE_INLINE,Z as EQUATION_BLOCK,p as EQUATION_INLINE,C as HEADING_1,h as HEADING_2,b as HEADING_3,B as HEADING_4,U as HEADING_5,G as HEADING_6,I as HREF,P as IMAGE,H as ITALIC_AST,K as ITALIC_UND,L as LANG,y as LINE_BREAK,q as LINK,X as LIST_ITEM,v as LIST_ORDERED,$ as LIST_UNORDERED,D as PARAGRAPH,W as RAW_URL,F as RULE,k as SRC,f as START,w as STRIKE,M as STRONG_AST,Q as STRONG_UND,z as TABLE,V as TABLE_CELL,J as TABLE_ROW,_e as default_renderer,ae as parser,ce as parser_end,o as parser_write};

package/src/vite-plugin.d.ts

@@ -0,0 +1,46 @@
+// Collet Vite Plugin — WASM MIME, auto-copy, preload hints, and DSD pre-rendering.
+//
+// Usage in vite.config.ts:
+//   import { colletPlugin } from '@colletdev/core/vite-plugin';
+//   export default defineConfig({ plugins: [colletPlugin()] });
+
+export interface ColletPluginOptions {
+  /**
+   * Inject `<link rel="preload">` for the WASM binary.
+   * Starts downloading early, in parallel with script parsing.
+   * @default true
+   */
+  preload?: boolean;
+
+  /**
+   * Pre-render `<cx-*>` elements in static HTML as Declarative Shadow DOM.
+   * Only affects elements present in index.html (not React/Vue runtime renders).
+   * For SSR frameworks, use `@colletdev/core/server` directly.
+   * @default false
+   */
+  prerender?: boolean;
+}
+
+/**
+ * Vite plugin for Collet. Handles:
+ * - WASM MIME type (dev server)
+ * - Auto-copy WASM to public/ (dev)
+ * - WASM + CSS preload hints (build)
+ * - Serves utility CSS for DSD `<link>` refs (dev)
+ * - Optional DSD pre-rendering of static `<cx-*>` elements
+ *
+ * @example
+ * ```ts
+ * import { colletPlugin } from '@colletdev/core/vite-plugin';
+ *
+ * export default defineConfig({
+ *   plugins: [colletPlugin()],
+ * });
+ *
+ * // With DSD pre-rendering:
+ * export default defineConfig({
+ *   plugins: [colletPlugin({ prerender: true })],
+ * });
+ * ```
+ */
+export function colletPlugin(options?: ColletPluginOptions): any;

package/src/vite-plugin.js

@@ -0,0 +1,221 @@
+// Collet Vite Plugin — WASM MIME, auto-copy, preload hints, and DSD pre-rendering.
+//
+// Handles the operational friction of using WASM Custom Elements with Vite:
+//   1. Serves .wasm with correct MIME type (dev server)
+//   2. Copies WASM binary to public/ so Vite can serve it (dev + build)
+//   3. Injects <link rel="preload"> for WASM + CSS (faster init)
+//   4. Serves utility CSS and motion CSS for DSD <link> refs (dev server)
+//   5. Provides DSD pre-rendering for SSR frameworks (transformIndexHtml)
+//
+// Usage in vite.config.ts:
+//   import { colletPlugin } from '@colletdev/core/vite-plugin';
+//   export default defineConfig({ plugins: [colletPlugin()] });
+//
+//   // With options:
+//   colletPlugin({
+//     prerender: true,    // Enable DSD pre-rendering in HTML
+//     preload: true,      // Inject <link rel="preload"> for WASM
+//   })
+
+import { existsSync, copyFileSync, mkdirSync, readFileSync } from 'fs';
+import { dirname, join, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { UTILITIES_CSS, TOKENS_SHADOW_CSS } from '../generated/styles.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PKG_ROOT = join(__dirname, '..');
+
+/**
+ * @param {object} [options]
+ * @param {boolean} [options.preload=true] - Inject <link rel="preload"> for WASM binary and CSS.
+ * @param {boolean} [options.prerender=false] - Pre-render <cx-*> elements in HTML as Declarative Shadow DOM.
+ *                                              Only affects static HTML (transformIndexHtml). For React SSR,
+ *                                              use `@colletdev/core/server` directly in your SSR handler.
+ */
+export function colletPlugin(options = {}) {
+  const {
+    preload = true,
+    prerender = false,
+  } = options;
+
+  // Lazy-initialized server renderer (only when prerender=true)
+  let _renderer = null;
+
+  // Resolved paths (set in configResolved)
+  let publicDir = '';
+  let wasmPublicPath = '/wasm_api_bg.wasm';
+  let utilitiesCssPath = '/@colletdev/cx-utilities.css';
+  let motionCssPath = '/@colletdev/tokens-shadow.css';
+
+  return {
+    name: 'collet',
+
+    // Pre-bundle Collet packages during dev startup so Vite doesn't
+    // re-optimize on every page load. Without this, Vite's dependency
+    // scanner misses the lazy WASM/CSS imports and triggers full-page
+    // reloads when they're first encountered.
+    config() {
+      return {
+        optimizeDeps: {
+          include: ['@colletdev/core'],
+          exclude: ['@colletdev/core/wasm/wasm_api.js'],
+        },
+      };
+    },
+
+    configResolved(config) {
+      publicDir = config.publicDir || resolve(config.root, 'public');
+    },
+
+    // ─── Dev Server Setup ───
+    // 1. Serve .wasm with correct Content-Type
+    // 2. Copy WASM to public/ if missing
+    // 3. Serve CSS assets for DSD <link> refs
+    configureServer(server) {
+      // Copy WASM to public/ if not already there (one-time, idempotent)
+      const wasmSrc = join(PKG_ROOT, 'wasm', 'wasm_api_bg.wasm');
+      const wasmDest = join(publicDir, 'wasm_api_bg.wasm');
+      if (existsSync(wasmSrc) && !existsSync(wasmDest)) {
+        mkdirSync(publicDir, { recursive: true });
+        copyFileSync(wasmSrc, wasmDest);
+        server.config.logger.info('[collet] Copied wasm_api_bg.wasm → public/');
+      }
+
+      server.middlewares.use((req, res, next) => {
+        // WASM MIME type fix (Vite serves .wasm as octet-stream by default)
+        if (req.url?.endsWith('.wasm')) {
+          res.setHeader('Content-Type', 'application/wasm');
+          return next();
+        }
+
+        // Serve utility CSS for DSD <link> references.
+        // In production, the consumer copies these to their static dir.
+        // In dev, we serve them from pre-inlined generated/styles.js.
+        if (req.url === utilitiesCssPath) {
+          res.setHeader('Content-Type', 'text/css');
+          res.end(UTILITIES_CSS);
+          return;
+        }
+        if (req.url === motionCssPath) {
+          res.setHeader('Content-Type', 'text/css');
+          res.end(TOKENS_SHADOW_CSS);
+          return;
+        }
+
+        next();
+      });
+    },
+
+    // ─── Build: Copy WASM to output ───
+    // Ensures the WASM binary is in the build output alongside JS chunks.
+    generateBundle() {
+      const wasmSrc = join(PKG_ROOT, 'wasm', 'wasm_api_bg.wasm');
+      if (existsSync(wasmSrc)) {
+        this.emitFile({
+          type: 'asset',
+          fileName: 'wasm_api_bg.wasm',
+          source: readFileSync(wasmSrc),
+        });
+      }
+    },
+
+    // ─── HTML Transform ───
+    // Inject preload hints and optionally pre-render <cx-*> elements.
+    async transformIndexHtml(html) {
+      const tags = [];
+
+      // Preload hints — start downloading WASM and CSS early, in parallel
+      // with script parsing. This shaves 100-300ms off init() in production.
+      if (preload) {
+        tags.push({
+          tag: 'link',
+          attrs: {
+            rel: 'preload',
+            href: wasmPublicPath,
+            as: 'fetch',
+            crossorigin: 'anonymous',
+          },
+          injectTo: 'head-prepend',
+        });
+      }
+
+      // DSD pre-rendering — scan HTML for <cx-*> elements and inject
+      // <template shadowrootmode="open"> with pre-rendered shadow content.
+      // Only works for elements present in the static HTML (not React/Vue
+      // runtime renders). For SSR frameworks, use @colletdev/core/server.
+      if (prerender) {
+        html = await prerenderDSD(html);
+      }
+
+      return { html, tags };
+    },
+  };
+
+  // ─── DSD Pre-Rendering ───
+  // Parse static HTML for <cx-*> elements, extract attributes, call WASM
+  // renderer, inject DSD templates. This runs at build time — the WASM
+  // binary is a build dependency, not a runtime dependency.
+  async function prerenderDSD(html) {
+    // Lazy-init the renderer (first call only, ~5ms)
+    if (!_renderer) {
+      try {
+        const { createRenderer } = await import('./server.js');
+        _renderer = await createRenderer({
+          stylesUrl: utilitiesCssPath,
+          motionUrl: motionCssPath,
+        });
+      } catch (e) {
+        console.warn(`[collet] DSD pre-rendering unavailable: ${e.message}`);
+        return html;
+      }
+    }
+
+    // Match self-closing and pair <cx-*> tags with attributes.
+    // This is intentionally simple — it handles static HTML from index.html,
+    // not arbitrary nested structures. For complex SSR, use @colletdev/core/server.
+    const CX_TAG_RE = /<(cx-[a-z-]+)((?:\s+[a-z-]+(?:=(?:"[^"]*"|'[^']*'|[^\s>]*))?)*)\s*(?:\/>|>([\s\S]*?)<\/\1>)/gi;
+
+    return html.replace(CX_TAG_RE, (match, tag, attrString, children) => {
+      try {
+        const component = tag.slice(3).replace(/-/g, '_');
+        const config = parseAttributes(attrString);
+        const fragment = _renderer.renderDSDFragment(component, config);
+        const inner = children || '';
+        return `<${tag}${attrString}>${fragment}${inner}</${tag}>`;
+      } catch (e) {
+        // If pre-rendering fails for a component, leave it as-is.
+        // It will render client-side when WASM loads.
+        console.warn(`[collet] DSD pre-render failed for ${tag}: ${e.message}`);
+        return match;
+      }
+    });
+  }
+}
+
+// Parse an HTML attribute string into a config object.
+// Handles: bare attrs (disabled), quoted values, JSON arrays/objects.
+function parseAttributes(attrString) {
+  const config = {};
+  if (!attrString) return config;
+
+  const ATTR_RE = /([a-z][a-z0-9-]*)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/gi;
+  let m;
+  while ((m = ATTR_RE.exec(attrString))) {
+    const key = m[1].replace(/-/g, '_');
+    const raw = m[2] ?? m[3] ?? m[4];
+
+    if (raw === undefined) {
+      // Bare attribute (e.g., disabled, dismissible)
+      config[key] = true;
+    } else if (raw === 'true') {
+      config[key] = true;
+    } else if (raw === 'false') {
+      config[key] = false;
+    } else if (raw.length > 0 && (raw[0] === '[' || raw[0] === '{')) {
+      try { config[key] = JSON.parse(raw); } catch { config[key] = raw; }
+    } else {
+      config[key] = raw;
+    }
+  }
+  return config;
+}

package/wasm/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "wasm-api",
+  "type": "module",
+  "description": "WASM bindings for the Resumable Rust component library",
+  "version": "0.1.0",
+  "files": [
+    "wasm_api_bg.wasm",
+    "wasm_api.js",
+    "wasm_api.d.ts"
+  ],
+  "main": "wasm_api.js",
+  "types": "wasm_api.d.ts",
+  "sideEffects": [
+    "./snippets/*"
+  ]
+}

package/wasm/wasm_api.d.ts

@@ -0,0 +1,72 @@
+/* tslint:disable */
+/* eslint-disable */
+
+/**
+ * Single dispatcher for all component renders.
+ *
+ * Replaces 44 individual `#[wasm_bindgen]` exports with one entry point.
+ * Each wasm-bindgen export generates a `catch_unwind` wrapper (~2 KB each).
+ * By consolidating to a single export, we eliminate 43 redundant wrappers
+ * (~91 KB savings in the final WASM binary).
+ *
+ * JS calls `cx_render("button", { label: "Click" })` instead of
+ * `cx_button({ label: "Click" })`. The generated index.js creates
+ * thin wrapper functions so the DX is unchanged.
+ *
+ * # Errors
+ *
+ * Returns `JsError` if the component name is unknown or the config
+ * can't be deserialized.
+ */
+export function cx_render(component: string, config: any): any;
+
+/**
+ * Render GFM markdown to sanitized HTML.
+ *
+ * Returns a `<div class="cx-prose">...</div>` wrapper containing the
+ * rendered HTML. Raw HTML in the markdown source is escaped (not passed
+ * through), making the output XSS-safe by construction.
+ *
+ * # Example (from JS)
+ *
+ * ```js
+ * const html = cx_render_markdown("**Hello** world");
+ * // → '<div class="cx-prose"><p><strong>Hello</strong> world</p>\n</div>'
+ * ```
+ */
+export function cx_render_markdown(input: string): string;
+
+export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
+
+export interface InitOutput {
+    readonly memory: WebAssembly.Memory;
+    readonly cx_render: (a: number, b: number, c: number, d: number) => void;
+    readonly cx_render_markdown: (a: number, b: number, c: number) => void;
+    readonly __wbindgen_export: (a: number, b: number) => number;
+    readonly __wbindgen_export2: (a: number, b: number, c: number, d: number) => number;
+    readonly __wbindgen_export3: (a: number) => void;
+    readonly __wbindgen_add_to_stack_pointer: (a: number) => number;
+    readonly __wbindgen_export4: (a: number, b: number, c: number) => void;
+}
+
+export type SyncInitInput = BufferSource | WebAssembly.Module;
+
+/**
+ * Instantiates the given `module`, which can either be bytes or
+ * a precompiled `WebAssembly.Module`.
+ *
+ * @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
+ *
+ * @returns {InitOutput}
+ */
+export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
+
+/**
+ * If `module_or_path` is {RequestInfo} or {URL}, makes a request and
+ * for everything else, calls `WebAssembly.instantiate` directly.
+ *
+ * @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
+ *
+ * @returns {Promise<InitOutput>}
+ */
+export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;