@sprlab/wccompiler 0.7.2 → 0.8.0

package/adapters/angular.js

@@ -0,0 +1,9 @@
+if (typeof document !== 'undefined') {
+  document.addEventListener('wcc:model', (e) => {
+    const { prop, value } = e.detail;
+    e.target.dispatchEvent(new CustomEvent(`${prop}Change`, {
+      detail: value,
+      bubbles: true
+    }));
+  });
+}

package/adapters/vue.js

@@ -0,0 +1,9 @@
+if (typeof document !== 'undefined') {
+  document.addEventListener('wcc:model', (e) => {
+    const { prop, value } = e.detail;
+    e.target.dispatchEvent(new CustomEvent(`update:${prop}`, {
+      detail: value,
+      bubbles: true
+    }));
+  });
+}

package/integrations/angular.js

@@ -30,10 +30,24 @@
  * export class AppModule {}
  * ```
  *
+ * @example Two-way binding with defineModel
+ * ```ts
+ * // The adapter translates wcc:model events to Angular's propNameChange convention.
+ * // Import the integration once in your main.ts or app module:
+ * import '@sprlab/wccompiler/integrations/angular'
+ *
+ * // Then use Angular's banana-in-a-box syntax:
+ * // <wcc-input [(value)]="myValue"></wcc-input>
+ * ```
+ *
  * That's it — one line of config. WCC components work as native custom elements
  * in Angular without any additional wrapper or helper.
  */
 
+// Side-effect: registers document-level wcc:model → propNameChange translation
+// This enables [(propName)] two-way binding on WCC components in Angular templates.
+import '../adapters/angular.js'
+
 /**
  * Configuration instructions for Angular projects using WCC components.
  * This is a documentation-only export — Angular's AOT compiler requires

package/integrations/react.js

@@ -13,9 +13,14 @@
  *   // Form 2: Let the hook create the ref
  *   const ref = useWccEvent('change', (e) => console.log(e.detail))
  *   <wcc-counter ref={ref}></wcc-counter>
+ *
+ *   // Form 3: Two-way binding with defineModel
+ *   const [value, setValue] = useState('')
+ *   const ref = useWccModel('value', value, setValue)
+ *   <wcc-input ref={ref}></wcc-input>
  */
 
-import { useRef, useEffect } from 'react'
+import { useRef, useEffect, useCallback } from 'react'
 
 /**
  * Hook that attaches a CustomEvent listener to a DOM element via ref.
@@ -50,3 +55,62 @@ export function useWccEvent(refOrEventName, eventNameOrHandler, handler) {
   // Only return ref if we created it (Form 2)
   if (!isRefForm) return elementRef
 }
+
+
+/**
+ * Hook for two-way binding with WCC defineModel props.
+ *
+ * Listens for `wcc:model` events on the element and calls the setter
+ * when the matching prop changes internally. Also syncs the React state
+ * to the element's attribute when the value changes externally.
+ *
+ * @param {string} propName - The model prop name (e.g., 'value', 'count')
+ * @param {*} value - Current React state value
+ * @param {(newValue: *) => void} setValue - React state setter
+ * @param {import('react').RefObject<HTMLElement>} [existingRef] - Optional existing ref
+ * @returns {import('react').RefObject<HTMLElement>} Ref to attach to the WCC element
+ *
+ * @example
+ * ```jsx
+ * function App() {
+ *   const [text, setText] = useState('')
+ *   const inputRef = useWccModel('value', text, setText)
+ *   return <wcc-input ref={inputRef}></wcc-input>
+ * }
+ * ```
+ */
+export function useWccModel(propName, value, setValue, existingRef) {
+  const internalRef = useRef(null)
+  const elementRef = existingRef || internalRef
+
+  const setValueRef = useRef(setValue)
+  setValueRef.current = setValue
+
+  // Listen for wcc:model events from the component (child → parent)
+  useEffect(() => {
+    const el = elementRef.current
+    if (!el) return
+
+    const listener = (e) => {
+      if (e.detail && e.detail.prop === propName) {
+        setValueRef.current(e.detail.value)
+      }
+    }
+
+    el.addEventListener('wcc:model', listener)
+    return () => el.removeEventListener('wcc:model', listener)
+  }, [propName])
+
+  // Sync React state to the element's attribute (parent → child)
+  useEffect(() => {
+    const el = elementRef.current
+    if (!el) return
+    if (value != null) {
+      el.setAttribute(propName, String(value))
+    } else {
+      el.removeAttribute(propName)
+    }
+  }, [propName, value])
+
+  return elementRef
+}

package/integrations/vue.js

@@ -1,12 +1,17 @@
 /**
  * Vue Vite plugin for WCC custom elements.
  * Configures isCustomElement to recognize WCC component tags.
+ * Also re-exports the defineModel adapter for v-model support.
  *
  * @module @sprlab/wccompiler/integrations/vue
  */
 
 import vue from '@vitejs/plugin-vue'
 
+// Side-effect: registers document-level wcc:model → update:propName translation
+// This enables v-model:propName on WCC components in Vue templates.
+import '../adapters/vue.js'
+
 /**
  * @typedef {Object} WccVuePluginOptions
  * @property {string} [prefix='wcc-'] - Tag prefix for custom element detection

package/lib/codegen.js

@@ -15,6 +15,7 @@
 
 import { reactiveRuntime } from './reactive-runtime.js';
 import { scopeCSS } from './css-scoper.js';
+import { camelToKebab } from './parser-extractors.js';
 
 /** @import { ParseResult } from './types.js' */
 
@@ -75,7 +76,7 @@ function slotPropRef(source, signalNames, computedNames, propNames) {
  * @param {string|null} [emitsObjectName] — Emits object variable name
  * @returns {string}
  */
-export function transformExpr(expr, signalNames, computedNames, propsObjectName = null, propNames = new Set(), emitsObjectName = null, constantNames = [], methodNames = []) {
+export function transformExpr(expr, signalNames, computedNames, propsObjectName = null, propNames = new Set(), emitsObjectName = null, constantNames = [], methodNames = [], modelVarMap = new Map()) {
   let result = expr;
 
   // Transform emit calls: emitsObjectName( → this._emit(
@@ -111,6 +112,18 @@ export function transformExpr(expr, signalNames, computedNames, propsObjectName
     result = result.replace(bareRe, `this._s_${propName}()`);
   }
 
+  // Transform model signal reads: varName() → this._m_{propName}() (BEFORE regular signals)
+  for (const [varName, propNameVal] of modelVarMap) {
+    if (propsObjectName && varName === propsObjectName) continue;
+    if (emitsObjectName && varName === emitsObjectName) continue;
+    // First: transform varName() calls → this._m_propName()
+    const callRe = new RegExp(`\\b${varName}\\(\\)`, 'g');
+    result = result.replace(callRe, `this._m_${propNameVal}()`);
+    // Then: transform bare varName references (not followed by ( or .set()) → this._m_propName()
+    const bareRe = new RegExp(`\\b(${varName})\\b(?!\\.set\\()(?!\\()`, 'g');
+    result = result.replace(bareRe, `this._m_${propNameVal}()`);
+  }
+
   // Transform computed names first (to avoid partial matches with signals)
   for (const name of computedNames) {
     // Skip propsObjectName and emitsObjectName
@@ -153,7 +166,9 @@ export function transformExpr(expr, signalNames, computedNames, propsObjectName
  *
  * - `emitsObjectName(` → `this._emit(` (emit call)
  * - `props.x` → `this._s_x()` (prop access)
+ * - `varName.set(value)` → `this._modelSet_{propName}(value)` (model signal write)
  * - `x.set(value)` → `this._x(value)` (signal write via setter)
+ * - `varName()` → `this._m_{propName}()` (model signal read)
  * - `x()` → `this._x()` (signal read)
  * - Computed `x()` → `this._c_x()` (computed read)
  *
@@ -164,9 +179,11 @@ export function transformExpr(expr, signalNames, computedNames, propsObjectName
  * @param {Set<string>} [propNames] — Set of prop names
  * @param {string|null} [emitsObjectName] — Emits object variable name
  * @param {string[]} [refVarNames] — Ref variable names from templateRef declarations
+ * @param {string[]} [constantNames] — Constant variable names
+ * @param {Map<string,string>} [modelVarMap] — Map from model varName → propName
  * @returns {string}
  */
-export function transformMethodBody(body, signalNames, computedNames, propsObjectName = null, propNames = new Set(), emitsObjectName = null, refVarNames = [], constantNames = []) {
+export function transformMethodBody(body, signalNames, computedNames, propsObjectName = null, propNames = new Set(), emitsObjectName = null, refVarNames = [], constantNames = [], modelVarMap = new Map()) {
   let result = body;
 
   // 0a. Transform emit calls: emitsObjectName( → this._emit(
@@ -192,6 +209,15 @@ export function transformMethodBody(body, signalNames, computedNames, propsObjec
     result = result.replace(refRe, `this._${name}.value`);
   }
 
+  // 0d. Transform model signal writes: varName.set(expr) → this._modelSet_{propName}(expr)
+  // Must run BEFORE regular signal .set() transforms
+  for (const [varName, propNameVal] of modelVarMap) {
+    if (propsObjectName && varName === propsObjectName) continue;
+    if (emitsObjectName && varName === emitsObjectName) continue;
+    const setRe = new RegExp(`\\b${varName}\\.set\\(`, 'g');
+    result = result.replace(setRe, `this._modelSet_${propNameVal}(`);
+  }
+
   // 1. Transform signal writes: x.set(value) → this._x(value)
   for (const name of signalNames) {
     if (propsObjectName && name === propsObjectName) continue;
@@ -200,6 +226,15 @@ export function transformMethodBody(body, signalNames, computedNames, propsObjec
     result = result.replace(setRe, `this._${name}(`);
   }
 
+  // 1b. Transform model signal reads: varName() → this._m_{propName}()
+  // Must run BEFORE regular signal read transforms
+  for (const [varName, propNameVal] of modelVarMap) {
+    if (propsObjectName && varName === propsObjectName) continue;
+    if (emitsObjectName && varName === emitsObjectName) continue;
+    const readRe = new RegExp(`\\b${varName}\\(\\)`, 'g');
+    result = result.replace(readRe, `this._m_${propNameVal}()`);
+  }
+
   // 2. Transform computed reads: x() → this._c_x()
   for (const name of computedNames) {
     if (propsObjectName && name === propsObjectName) continue;
@@ -327,22 +362,23 @@ export function isStaticForExpr(expr, itemVar, indexVar, propsSet, rootVarNames,
  * @param {Set<string>} propNames
  * @param {string|null} emitsObjectName
  * @param {string[]} constantNames
+ * @param {Map<string,string>} [modelVarMap] — Map from model varName → propName
  * @returns {string}
  */
-export function generateEventHandler(handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames) {
+export function generateEventHandler(handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, modelVarMap = new Map()) {
   if (handler.includes('=>')) {
     // Arrow function expression: (e) => removeItem(item)
     const arrowIdx = handler.indexOf('=>');
     const params = handler.slice(0, arrowIdx).trim();
     let body = handler.slice(arrowIdx + 2).trim();
-    body = transformMethodBody(body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, [], constantNames);
+    body = transformMethodBody(body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, [], constantNames, modelVarMap);
     return `${params} => { ${body}; }`;
   } else if (handler.includes('(')) {
     // Function call expression: removeItem(item)
     const parenIdx = handler.indexOf('(');
     const fnName = handler.slice(0, parenIdx).trim();
     const args = handler.slice(parenIdx + 1, handler.lastIndexOf(')')).trim();
-    const transformedArgs = args ? transformExpr(args, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames) : '';
+    const transformedArgs = args ? transformExpr(args, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap) : '';
     return `(e) => { this._${fnName}(${transformedArgs}); }`;
   } else {
     // Simple method name
@@ -829,6 +865,7 @@ export function generateComponent(parseResult, options = {}) {
     onMountHooks = [],
     onDestroyHooks = [],
     modelBindings = [],
+    modelPropBindings = [],
     attrBindings = [],
     slots = [],
     constantVars = [],
@@ -838,6 +875,7 @@ export function generateComponent(parseResult, options = {}) {
     childComponents = [],
     childImports = [],
     exposeNames = [],
+    modelDefs = [],
   } = parseResult;
 
   const signalNames = signals.map(s => s.name);
@@ -847,6 +885,12 @@ export function generateComponent(parseResult, options = {}) {
   const refVarNames = refs.map(r => r.varName);
   const propNames = new Set(propDefs.map(p => p.name));
 
+  // Build model var name → prop name map for transform functions
+  const modelVarMap = new Map();
+  for (const md of modelDefs) {
+    modelVarMap.set(md.varName, md.name);
+  }
+
   const lines = [];
 
   // ── 0. Source comment ──
@@ -859,7 +903,7 @@ export function generateComponent(parseResult, options = {}) {
     // Tree-shake: only import what this component actually uses
     const usedRuntime = new Set(['__signal']); // always need __signal
     if (computeds.length > 0) usedRuntime.add('__computed');
-    if (effects.length > 0 || bindings.length > 0 || showBindings.length > 0 || modelBindings.length > 0 || attrBindings.length > 0 || ifBlocks.length > 0 || forBlocks.length > 0 || watchers.length > 0 || childComponents.length > 0 || slots.some(s => s.slotProps.length > 0)) usedRuntime.add('__effect');
+    if (effects.length > 0 || bindings.length > 0 || showBindings.length > 0 || modelBindings.length > 0 || modelPropBindings.length > 0 || attrBindings.length > 0 || ifBlocks.length > 0 || forBlocks.length > 0 || watchers.length > 0 || childComponents.length > 0 || slots.some(s => s.slotProps.length > 0)) usedRuntime.add('__effect');
     if (watchers.length > 0) usedRuntime.add('__untrack');
     const imports = [...usedRuntime].join(', ');
     lines.push(`import { ${imports} } from '${options.runtimeImportPath}';`);
@@ -897,10 +941,13 @@ export function generateComponent(parseResult, options = {}) {
   // ── 4. HTMLElement class ──
   lines.push(`class ${className} extends HTMLElement {`);
 
-  // Static observedAttributes (if props exist)
-  if (propDefs.length > 0) {
-    const attrNames = propDefs.map(p => `'${p.attrName}'`).join(', ');
-    lines.push(`  static get observedAttributes() { return [${attrNames}]; }`);
+  // Static observedAttributes (if props or model props exist)
+  const modelAttrNames = modelDefs.map(md => camelToKebab(md.name));
+  if (propDefs.length > 0 || modelDefs.length > 0) {
+    const propAttrNames = propDefs.map(p => `'${p.attrName}'`);
+    const modelAttrEntries = modelAttrNames.map(a => `'${a}'`);
+    const allAttrNames = [...propAttrNames, ...modelAttrEntries].join(', ');
+    lines.push(`  static get observedAttributes() { return [${allAttrNames}]; }`);
     lines.push('');
   }
 
@@ -918,6 +965,11 @@ export function generateComponent(parseResult, options = {}) {
     lines.push(`    this._${s.name} = __signal(${s.value});`);
   }
 
+  // Model signal initialization
+  for (const md of modelDefs) {
+    lines.push(`    this._m_${md.name} = __signal(${md.default});`);
+  }
+
   // Constant initialization
   for (const c of constantVars) {
     lines.push(`    this._const_${c.name} = ${c.value};`);
@@ -925,7 +977,7 @@ export function generateComponent(parseResult, options = {}) {
 
   // Computed initialization
   for (const c of computeds) {
-    const body = transformExpr(c.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+    const body = transformExpr(c.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
     lines.push(`    this._c_${c.name} = __computed(() => ${body});`);
   }
 
@@ -1005,6 +1057,11 @@ export function generateComponent(parseResult, options = {}) {
     lines.push(`    this.${mb.varName} = ${pathExpr(mb.path, '__root')};`);
   }
 
+  // Assign DOM refs for model:propName bindings
+  for (const mpb of modelPropBindings) {
+    lines.push(`    this.${mpb.varName} = ${pathExpr(mpb.path, '__root')};`);
+  }
+
   // Assign DOM refs for slot placeholders
   for (const s of slots) {
     lines.push(`    this.${s.varName} = ${pathExpr(s.path, '__root')};`);
@@ -1107,7 +1164,7 @@ export function generateComponent(parseResult, options = {}) {
         ref = `this._s_${propName}()`;
       } else {
         // Use transformExpr for complex expressions (e.g. items().length, ternary)
-        ref = transformExpr(b.name, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+        ref = transformExpr(b.name, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
       }
       lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      this.${b.varName}.textContent = ${ref} ?? '';`);
@@ -1158,7 +1215,7 @@ export function generateComponent(parseResult, options = {}) {
 
   // User effects
   for (const eff of effects) {
-    const body = transformMethodBody(eff.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+    const body = transformMethodBody(eff.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
     lines.push('    this.__disposers.push(__effect(() => {');
     // Indent each line of the body
     const bodyLines = body.split('\n');
@@ -1171,7 +1228,7 @@ export function generateComponent(parseResult, options = {}) {
   // Watcher effects
   for (let idx = 0; idx < watchers.length; idx++) {
     const w = watchers[idx];
-    const body = transformMethodBody(w.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+    const body = transformMethodBody(w.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
 
     if (w.kind === 'signal') {
       // Determine the signal reference for the watch target
@@ -1186,7 +1243,9 @@ export function generateComponent(parseResult, options = {}) {
       lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      const ${w.newParam} = ${watchRef};`);
       lines.push(`      if (this.__prev_${w.target} !== undefined && this.__prev_${w.target} !== ${w.newParam}) {`);
-      lines.push(`        const ${w.oldParam} = this.__prev_${w.target};`);
+      if (w.oldParam) {
+        lines.push(`        const ${w.oldParam} = this.__prev_${w.target};`);
+      }
       lines.push('        __untrack(() => {');
       const bodyLines = body.split('\n');
       for (const line of bodyLines) {
@@ -1198,12 +1257,14 @@ export function generateComponent(parseResult, options = {}) {
       lines.push('    }));');
     } else {
       // kind === 'getter' — transform the getter expression and use it directly
-      const getterExpr = transformMethodBody(w.target, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+      const getterExpr = transformMethodBody(w.target, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
       const prevName = `__prev_watch${idx}`;
       lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      const ${w.newParam} = ${getterExpr};`);
       lines.push(`      if (this.${prevName} !== undefined && this.${prevName} !== ${w.newParam}) {`);
-      lines.push(`        const ${w.oldParam} = this.${prevName};`);
+      if (w.oldParam) {
+        lines.push(`        const ${w.oldParam} = this.${prevName};`);
+      }
       lines.push('        __untrack(() => {');
       const bodyLines2 = body.split('\n');
       for (const line of bodyLines2) {
@@ -1218,13 +1279,13 @@ export function generateComponent(parseResult, options = {}) {
 
   // Event listeners (with AbortController signal for cleanup)
   for (const e of events) {
-    const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+    const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, modelVarMap);
     lines.push(`    this.${e.varName}.addEventListener('${e.event}', ${handlerExpr}, { signal: this.__ac.signal });`);
   }
 
   // Show effects — one __effect per ShowBinding
   for (const sb of showBindings) {
-    const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+    const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
     lines.push('    this.__disposers.push(__effect(() => {');
     lines.push(`      this.${sb.varName}.style.display = (${expr}) ? '' : 'none';`);
     lines.push('    }));');
@@ -1264,9 +1325,35 @@ export function generateComponent(parseResult, options = {}) {
     }
   }
 
+  // model:propName effects and listeners — bidirectional WCC-to-WCC binding
+  for (const mpb of modelPropBindings) {
+    // Determine the signal read/write expressions
+    // If the signal is a model var, use this._m_propName(); otherwise use this._signalName()
+    const isModelVar = modelVarMap.has(mpb.signal);
+    const readExpr = isModelVar
+      ? `this._m_${modelVarMap.get(mpb.signal)}()`
+      : `this._${mpb.signal}()`;
+    const writeExpr = isModelVar
+      ? `this._m_${modelVarMap.get(mpb.signal)}`
+      : `this._${mpb.signal}`;
+
+    // Reactive parent → child sync: set child's attribute from parent signal
+    const attrName = camelToKebab(mpb.propName);
+    lines.push('    this.__disposers.push(__effect(() => {');
+    lines.push(`      this.${mpb.varName}.setAttribute('${attrName}', ${readExpr} ?? '');`);
+    lines.push('    }));');
+
+    // Child → parent sync: listen for wcc:model on child, update parent signal
+    lines.push(`    this.${mpb.varName}.addEventListener('wcc:model', (e) => {`);
+    lines.push(`      if (e.detail.prop === '${mpb.propName}') {`);
+    lines.push(`        ${writeExpr}(e.detail.value);`);
+    lines.push('      }');
+    lines.push('    }, { signal: this.__ac.signal });');
+  }
+
   // Attr binding effects — one __effect per AttrBinding
   for (const ab of attrBindings) {
-    const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+    const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
     if (ab.kind === 'attr') {
       lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      const __v = ${expr};`);
@@ -1318,10 +1405,10 @@ export function generateComponent(parseResult, options = {}) {
     for (let i = 0; i < ifBlock.branches.length; i++) {
       const branch = ifBlock.branches[i];
       if (branch.type === 'if') {
-        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
         lines.push(`      if (${expr}) { __branch = ${i}; }`);
       } else if (branch.type === 'else-if') {
-        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
         lines.push(`      else if (${expr}) { __branch = ${i}; }`);
       } else {
         // else
@@ -1431,7 +1518,7 @@ export function generateComponent(parseResult, options = {}) {
 
   // Lifecycle: onMount hooks (at the very end of connectedCallback)
   for (const hook of onMountHooks) {
-    const body = transformMethodBody(hook.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+    const body = transformMethodBody(hook.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
     if (hook.async) {
       lines.push('    ;(async () => {');
       const bodyLines = body.split('\n');
@@ -1459,7 +1546,7 @@ export function generateComponent(parseResult, options = {}) {
   lines.push('    this.__disposers.forEach(d => d());');
   if (onDestroyHooks.length > 0) {
     for (const hook of onDestroyHooks) {
-      const body = transformMethodBody(hook.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+      const body = transformMethodBody(hook.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
       if (hook.async) {
         lines.push('    ;(async () => {');
         const bodyLines = body.split('\n');
@@ -1480,8 +1567,8 @@ export function generateComponent(parseResult, options = {}) {
   lines.push('  }');
   lines.push('');
 
-  // attributeChangedCallback (if props exist)
-  if (propDefs.length > 0) {
+  // attributeChangedCallback (if props or model props exist)
+  if (propDefs.length > 0 || modelDefs.length > 0) {
     lines.push('  attributeChangedCallback(name, oldVal, newVal) {');
     for (const p of propDefs) {
       const defaultVal = p.default;
@@ -1503,6 +1590,31 @@ export function generateComponent(parseResult, options = {}) {
 
       lines.push(`    if (name === '${p.attrName}') ${updateExpr};`);
     }
+
+    // Model props — update signal directly (NO event emission)
+    for (let i = 0; i < modelDefs.length; i++) {
+      const md = modelDefs[i];
+      const attrName = modelAttrNames[i];
+      const defaultVal = md.default;
+      let updateExpr;
+
+      if (defaultVal === 'true' || defaultVal === 'false') {
+        // Boolean coercion: attribute presence = true
+        updateExpr = `this._m_${md.name}(newVal != null)`;
+      } else if (/^-?\d+(\.\d+)?$/.test(defaultVal)) {
+        // Number coercion
+        updateExpr = `this._m_${md.name}(newVal != null ? Number(newVal) : ${defaultVal})`;
+      } else if (defaultVal === 'undefined') {
+        // Undefined default — pass through
+        updateExpr = `this._m_${md.name}(newVal)`;
+      } else {
+        // String default — use nullish coalescing
+        updateExpr = `this._m_${md.name}(newVal ?? ${defaultVal})`;
+      }
+
+      lines.push(`    if (name === '${attrName}') ${updateExpr};`);
+    }
+
     lines.push('  }');
     lines.push('');
 
@@ -1512,6 +1624,15 @@ export function generateComponent(parseResult, options = {}) {
       lines.push(`  set ${p.name}(val) { this._s_${p.name}(val); this.setAttribute('${p.attrName}', String(val)); }`);
       lines.push('');
     }
+
+    // Public getters and setters for model props
+    for (let i = 0; i < modelDefs.length; i++) {
+      const md = modelDefs[i];
+      const attrName = modelAttrNames[i];
+      lines.push(`  get ${md.name}() { return this._m_${md.name}(); }`);
+      lines.push(`  set ${md.name}(val) { this._m_${md.name}(val); this.setAttribute('${attrName}', String(val)); }`);
+      lines.push('');
+    }
   }
 
   // _emit method (if emits declared)
@@ -1522,9 +1643,23 @@ export function generateComponent(parseResult, options = {}) {
     lines.push('');
   }
 
+  // _modelSet methods (one per defineModel prop — emits wcc:model on internal write)
+  for (const md of modelDefs) {
+    lines.push(`  _modelSet_${md.name}(newVal) {`);
+    lines.push(`    const oldVal = this._m_${md.name}();`);
+    lines.push(`    this._m_${md.name}(newVal);`);
+    lines.push(`    this.dispatchEvent(new CustomEvent('wcc:model', {`);
+    lines.push(`      detail: { prop: '${md.name}', value: newVal, oldValue: oldVal },`);
+    lines.push(`      bubbles: true,`);
+    lines.push(`      composed: true`);
+    lines.push(`    }));`);
+    lines.push('  }');
+    lines.push('');
+  }
+
   // User methods (prefixed with _)
   for (const m of methods) {
-    const body = transformMethodBody(m.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+    const body = transformMethodBody(m.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
     lines.push(`  _${m.name}(${m.params}) {`);
     const bodyLines = body.split('\n');
     for (const line of bodyLines) {
@@ -1600,7 +1735,7 @@ export function generateComponent(parseResult, options = {}) {
             const propName = b.name.slice(propsObjectName.length + 1);
             ref = `this._s_${propName}()`;
           } else {
-            ref = transformExpr(b.name, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+            ref = transformExpr(b.name, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
           }
           lines.push(`      __effect(() => { ${b.varName}.textContent = ${ref} ?? ''; });`);
         }
@@ -1608,21 +1743,21 @@ export function generateComponent(parseResult, options = {}) {
 
       // Events: generate addEventListener
       for (const e of branch.events) {
-        const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+        const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, modelVarMap);
         lines.push(`      const ${e.varName} = ${pathExpr(e.path, 'node')};`);
         lines.push(`      ${e.varName}.addEventListener('${e.event}', ${handlerExpr});`);
       }
 
       // Show bindings: generate effects
       for (const sb of branch.showBindings) {
-        const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+        const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
         lines.push(`      const ${sb.varName} = ${pathExpr(sb.path, 'node')};`);
         lines.push(`      __effect(() => { ${sb.varName}.style.display = (${expr}) ? '' : 'none'; });`);
       }
 
       // Attr bindings: generate effects
       for (const ab of branch.attrBindings) {
-        const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+        const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
         lines.push(`      const ${ab.varName} = ${pathExpr(ab.path, 'node')};`);
         lines.push(`      __effect(() => {`);
         lines.push(`        const __val = ${expr};`);

package/lib/compiler-browser.js

@@ -69,10 +69,11 @@ function walkTree(rootEl, signalNames, computedNames, propNames = new Set()) {
   const events = [];
   const showBindings = [];
   const modelBindings = [];
+  const modelPropBindings = [];
   const attrBindings = [];
   const slots = [];
   const childComponents = [];
-  let bindIdx = 0, eventIdx = 0, showIdx = 0, modelIdx = 0, attrIdx = 0, slotIdx = 0, childIdx = 0;
+  let bindIdx = 0, eventIdx = 0, showIdx = 0, modelIdx = 0, modelPropIdx = 0, attrIdx = 0, slotIdx = 0, childIdx = 0;
 
   function bindingType(name) {
     if (propNames.has(name)) return 'prop';
@@ -105,7 +106,7 @@ function walkTree(rootEl, signalNames, computedNames, propNames = new Set()) {
       if (tagLower.includes('-') && tagLower !== rootEl.tagName?.toLowerCase()) {
         const propBindings = [];
         for (const attr of Array.from(el.attributes)) {
-          if (attr.name.startsWith('@') || attr.name.startsWith(':') || attr.name.startsWith('bind:')) continue;
+          if (attr.name.startsWith('@') || attr.name.startsWith(':') || attr.name.startsWith('bind:') || attr.name.startsWith('model:')) continue;
           if (['show', 'model', 'if', 'else-if', 'else', 'each', 'ref'].includes(attr.name)) continue;
           const interpMatch = attr.value.match(/^\{\{([\w.]+)\}\}$/);
           if (interpMatch) {
@@ -158,6 +159,24 @@ function walkTree(rootEl, signalNames, computedNames, propNames = new Set()) {
         modelBindings.push({ varName: `__model${modelIdx++}`, signal: signalName, prop, event, coerce, radioValue, path: [...pathParts] });
         el.removeAttribute('model');
       }
+
+      // Detect model:propName="signalName" attributes (for custom element binding)
+      const modelPropAttrsToRemove = [];
+      for (const attr of Array.from(el.attributes)) {
+        if (attr.name.startsWith('model:')) {
+          const propName = attr.name.slice(6);
+          const signal = attr.value;
+          const tag = el.tagName.toLowerCase();
+          if (!tag.includes('-')) {
+            const error = new Error(`model:propName is only valid on custom elements (tag must contain a hyphen)`);
+            error.code = 'MODEL_PROP_INVALID_TARGET';
+            throw error;
+          }
+          modelPropBindings.push({ varName: `__modelProp${modelPropIdx++}`, propName, signal, path: [...pathParts] });
+          modelPropAttrsToRemove.push(attr.name);
+        }
+      }
+      modelPropAttrsToRemove.forEach(a => el.removeAttribute(a));
     }
 
     if (node.nodeType === 3 && /\{\{[\w.]+\}\}/.test(node.textContent)) {
@@ -201,7 +220,7 @@ function walkTree(rootEl, signalNames, computedNames, propNames = new Set()) {
   }
 
   walk(rootEl, []);
-  return { bindings, events, showBindings, modelBindings, attrBindings, slots, childComponents };
+  return { bindings, events, showBindings, modelBindings, modelPropBindings, attrBindings, slots, childComponents };
 }
 
 function recomputeAnchorPath(rootEl, targetNode) {
@@ -486,7 +505,7 @@ export async function compileFromStrings({ script, template, style = '', tag, la
   for (const ib of ifBlocks) ib.anchorPath = recomputeAnchorPath(rootEl, ib._anchorNode);
 
   // 11. Walk tree
-  const { bindings, events, showBindings, modelBindings, attrBindings, slots, childComponents } = walkTree(rootEl, signalNameSet, computedNameSet, propNameSet);
+  const { bindings, events, showBindings, modelBindings, modelPropBindings, attrBindings, slots, childComponents } = walkTree(rootEl, signalNameSet, computedNameSet, propNameSet);
 
   // 12. Detect refs
   const refBindings = detectRefs(rootEl);

package/lib/compiler.js

@@ -33,6 +33,7 @@ import {
   extractRefs,
   extractConstants,
   extractExpose,
+  extractModels,
   validatePropsAssignment,
   validateDuplicateProps,
   validatePropsConflicts,
@@ -158,6 +159,7 @@ async function compileSFC(filePath, config) {
   const refs = extractRefs(sourceForExtraction);
   const constantVars = extractConstants(sourceForExtraction);
   const exposeNames = extractExpose(source);
+  const modelDefs = extractModels(sourceForExtraction);
 
   // 9. Extract props (array form — after type strip, if generic didn't find any)
   const propsFromArray = propsFromGeneric.length > 0 ? [] : extractPropsArray(source);
@@ -197,6 +199,58 @@ async function compileSFC(filePath, config) {
   validateEmitsConflicts(emitsObjectName, signalNameSet, computedNameSet, constantNameSet, propNameSet, propsObjectName, filePath);
   validateUndeclaredEmits(source, emitsObjectName, emitNames, filePath);
 
+  // 14b. Validate defineModel declarations
+  // MODEL_NO_ASSIGNMENT: detect bare defineModel() calls not assigned to a variable
+  const bareModelRe = /\bdefineModel\s*\(/g;
+  const assignedModelRe = /(?:const|let|var)\s+\w+\s*=\s*defineModel\s*\(/g;
+  const bareModelCount = (sourceForExtraction.match(bareModelRe) || []).length;
+  const assignedModelCount = (sourceForExtraction.match(assignedModelRe) || []).length;
+  if (bareModelCount > assignedModelCount) {
+    const error = new Error(`defineModel() must be assigned to a variable`);
+    /** @ts-expect-error — custom error code */
+    error.code = 'MODEL_NO_ASSIGNMENT';
+    throw error;
+  }
+
+  // MODEL_MISSING_NAME: check each extracted model has a name property
+  for (const md of modelDefs) {
+    if (!md.name) {
+      const error = new Error(`defineModel() requires a 'name' property in the options object`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_MISSING_NAME';
+      throw error;
+    }
+  }
+
+  // MODEL_NAME_CONFLICT: check model prop names against signals, computeds, constants, and props
+  for (const md of modelDefs) {
+    if (!md.name) continue;
+    if (signalNameSet.has(md.name)) {
+      const error = new Error(`defineModel prop '${md.name}' conflicts with existing signal '${md.name}'`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_NAME_CONFLICT';
+      throw error;
+    }
+    if (computedNameSet.has(md.name)) {
+      const error = new Error(`defineModel prop '${md.name}' conflicts with existing computed '${md.name}'`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_NAME_CONFLICT';
+      throw error;
+    }
+    if (constantNameSet.has(md.name)) {
+      const error = new Error(`defineModel prop '${md.name}' conflicts with existing constant '${md.name}'`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_NAME_CONFLICT';
+      throw error;
+    }
+    if (propNameSet.has(md.name)) {
+      const error = new Error(`defineModel prop '${md.name}' conflicts with existing prop '${md.name}'`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_NAME_CONFLICT';
+      throw error;
+    }
+  }
+
   // 15. Build initial ParseResult
   /** @type {import('./types.js').ParseResult} */
   const parseResult = {
@@ -223,6 +277,7 @@ async function compileSFC(filePath, config) {
     onMountHooks,
     onDestroyHooks,
     modelBindings: [],
+    modelPropBindings: [],
     attrBindings: [],
     slots: [],
     refs,
@@ -230,6 +285,7 @@ async function compileSFC(filePath, config) {
     childComponents: [],
     childImports: [],
     exposeNames,
+    modelDefs,
   };
 
   // 16. Process template through linkedom → tree-walker → codegen
@@ -237,6 +293,10 @@ async function compileSFC(filePath, config) {
   const rootEl = document.getElementById('__root');
 
   const signalNames = new Set(signals.map(s => s.name));
+  // Add model var names so they are recognized as writable signals in tree-walker
+  for (const md of modelDefs) {
+    signalNames.add(md.varName);
+  }
   const computedNames = new Set(computeds.map(c => c.name));
   const propNamesSet = new Set(propDefs.map(p => p.name));
 
@@ -252,7 +312,7 @@ async function compileSFC(filePath, config) {
     ib.anchorPath = recomputeAnchorPath(rootEl, ib._anchorNode);
   }
 
-  const { bindings, events, showBindings, modelBindings, attrBindings, slots, childComponents } = walkTree(rootEl, signalNames, computedNames, propNamesSet);
+  const { bindings, events, showBindings, modelBindings, modelPropBindings, attrBindings, slots, childComponents } = walkTree(rootEl, signalNames, computedNames, propNamesSet);
 
   const refBindings = detectRefs(rootEl);
 
@@ -300,6 +360,38 @@ async function compileSFC(filePath, config) {
     }
   }
 
+  // 17c. Validate model:propName bindings
+  for (const mpb of modelPropBindings) {
+    const name = mpb.signal;
+    // Check if the referenced variable exists at all
+    const isKnown = signalNames.has(name) || computedNames.has(name) || propNamesSet.has(name) || constantNamesForModel.has(name);
+    if (!isKnown) {
+      const error = new Error(`model:propName references undeclared variable '${name}'`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_PROP_UNKNOWN_VAR';
+      throw error;
+    }
+    // Check if the referenced variable is read-only
+    if (propNamesSet.has(name)) {
+      const error = new Error(`model:propName cannot bind to prop '${name}' (read-only)`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_PROP_READONLY';
+      throw error;
+    }
+    if (computedNames.has(name)) {
+      const error = new Error(`model:propName cannot bind to computed '${name}' (read-only)`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_PROP_READONLY';
+      throw error;
+    }
+    if (constantNamesForModel.has(name)) {
+      const error = new Error(`model:propName cannot bind to constant '${name}' (read-only)`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_PROP_READONLY';
+      throw error;
+    }
+  }
+
   // 18. Resolve child component imports (from main template + if branches + each blocks)
   /** @type {import('./types.js').ChildComponentImport[]} */
   const childImports = [];
@@ -339,6 +431,7 @@ async function compileSFC(filePath, config) {
   parseResult.events = events;
   parseResult.showBindings = showBindings;
   parseResult.modelBindings = modelBindings;
+  parseResult.modelPropBindings = modelPropBindings;
   parseResult.attrBindings = attrBindings;
   parseResult.ifBlocks = ifBlocks;
   parseResult.forBlocks = forBlocks;

package/lib/parser-extractors.js

@@ -596,7 +596,7 @@ export function extractSignals(source) {
 /**
  * Known macro/reactive call patterns that should NOT be treated as constants.
  */
-export const REACTIVE_CALLS = /\b(?:signal|computed|effect|watch|defineProps|defineEmits|defineComponent|templateRef|defineExpose|onMount|onDestroy)\s*[<(]/;
+export const REACTIVE_CALLS = /\b(?:signal|computed|effect|watch|defineProps|defineEmits|defineModel|defineComponent|templateRef|defineExpose|onMount|onDestroy)\s*[<(]/;
 
 /**
  * Extract plain const/let/var declarations that are NOT reactive calls.
@@ -782,10 +782,10 @@ export function extractWatchers(source) {
   while (i < lines.length) {
     const line = lines[i];
 
-    // Form 2 — Getter function: watch(() => expr, (newVal, oldVal) => {
-    const mGetter = line.match(/\bwatch\s*\(\s*\(\)\s*=>\s*(.+?)\s*,\s*\((\w+)\s*,\s*(\w+)\)\s*=>\s*\{/);
-    // Form 1 — Signal direct: watch(identifier, (newVal, oldVal) => {
-    const mSignal = !mGetter ? line.match(/\bwatch\s*\(\s*(\w+)\s*,\s*\((\w+)\s*,\s*(\w+)\)\s*=>\s*\{/) : null;
+    // Form 2 — Getter function: watch(() => expr, (newVal, oldVal) => {  OR  watch(() => expr, (newVal) => {
+    const mGetter = line.match(/\bwatch\s*\(\s*\(\)\s*=>\s*(.+?)\s*,\s*\((\w+)(?:\s*,\s*(\w+))?\)\s*=>\s*\{/);
+    // Form 1 — Signal direct: watch(identifier, (newVal, oldVal) => {  OR  watch(identifier, (newVal) => {
+    const mSignal = !mGetter ? line.match(/\bwatch\s*\(\s*(\w+)\s*,\s*\((\w+)(?:\s*,\s*(\w+))?\)\s*=>\s*\{/) : null;
 
     const m = mGetter || mSignal;
 
@@ -1028,6 +1028,110 @@ export function extractRefs(source) {
   return refs;
 }
 
+// ── defineModel extraction ───────────────────────────────────────────
+
+/**
+ * Extract defineModel() declarations from source.
+ * Pattern: const/let/var varName = defineModel({ name: 'propName', default: value })
+ *          const/let/var varName = defineModel({ name: 'propName', required: true })
+ *
+ * @param {string} source
+ * @returns {{ varName: string, name: string, default: string, required: boolean }[]}
+ */
+export function extractModels(source) {
+  /** @type {{ varName: string, name: string, default: string, required: boolean }[]} */
+  const models = [];
+  const re = /(?:const|let|var)\s+(\w+)\s*=\s*defineModel\(\s*\{/g;
+  let m;
+
+  while ((m = re.exec(source)) !== null) {
+    const varName = m[1];
+    const objStart = m.index + m[0].length - 1; // position of '{'
+
+    // Use depth counting to extract the full object literal
+    let depth = 0;
+    let i = objStart;
+    /** @type {string | null} */
+    let inString = null;
+
+    for (; i < source.length; i++) {
+      const ch = source[i];
+
+      if (inString) {
+        if (ch === '\\') { i++; continue; }
+        if (ch === inString) inString = null;
+        continue;
+      }
+
+      if (ch === '"' || ch === "'" || ch === '`') {
+        inString = ch;
+        continue;
+      }
+
+      if (ch === '{') depth++;
+      if (ch === '}') {
+        depth--;
+        if (depth === 0) { i++; break; }
+      }
+    }
+
+    const objLiteral = source.slice(objStart, i).trim();
+    // Remove outer braces
+    const inner = objLiteral.slice(1, -1).trim();
+
+    // Extract 'name' property
+    const nameMatch = inner.match(/name\s*:\s*['"]([^'"]+)['"]/);
+    const propName = nameMatch ? nameMatch[1] : '';
+
+    // Extract 'default' property using depth counting
+    let defaultValue = 'undefined';
+    const defaultIdx = inner.search(/\bdefault\s*:\s*/);
+    if (defaultIdx !== -1) {
+      const afterDefault = inner.slice(defaultIdx);
+      const colonMatch = afterDefault.match(/^default\s*:\s*/);
+      if (colonMatch) {
+        const valStart = defaultIdx + colonMatch[0].length;
+        let valDepth = 0;
+        let pos = valStart;
+        /** @type {string | null} */
+        let valInString = null;
+
+        for (; pos < inner.length; pos++) {
+          const ch = inner[pos];
+
+          if (valInString) {
+            if (ch === '\\') { pos++; continue; }
+            if (ch === valInString) valInString = null;
+            continue;
+          }
+
+          if (ch === '"' || ch === "'" || ch === '`') {
+            valInString = ch;
+            continue;
+          }
+
+          if (ch === '(' || ch === '[' || ch === '{') valDepth++;
+          if (ch === ')' || ch === ']' || ch === '}') valDepth--;
+
+          if (valDepth === 0 && ch === ',') {
+            break;
+          }
+        }
+
+        defaultValue = inner.slice(valStart, pos).trim();
+      }
+    }
+
+    // Extract 'required' property
+    const requiredMatch = inner.match(/required\s*:\s*true/);
+    const required = !!requiredMatch;
+
+    models.push({ varName, name: propName, default: defaultValue, required });
+  }
+
+  return models;
+}
+
 // ── defineExpose extraction ─────────────────────────────────────────
 
 /**

package/lib/tree-walker.js

@@ -15,7 +15,7 @@
 import { parseHTML } from 'linkedom';
 import { BOOLEAN_ATTRIBUTES } from './types.js';
 
-/** @import { Binding, EventBinding, IfBlock, IfBranch, ShowBinding, AttrBinding, ForBlock, ModelBinding, SlotBinding, SlotProp, RefBinding, ChildComponentBinding, ChildPropBinding } from './types.js' */
+/** @import { Binding, EventBinding, IfBlock, IfBranch, ShowBinding, AttrBinding, ForBlock, ModelBinding, ModelPropBinding, SlotBinding, SlotProp, RefBinding, ChildComponentBinding, ChildPropBinding } from './types.js' */
 
 /**
  * Walk a DOM tree rooted at rootEl, discovering bindings and events.
@@ -24,7 +24,7 @@ import { BOOLEAN_ATTRIBUTES } from './types.js';
  * @param {Set<string>} signalNames — Set of signal variable names
  * @param {Set<string>} computedNames — Set of computed variable names
  * @param {Set<string>} [propNames] — Set of prop names from defineProps
- * @returns {{ bindings: Binding[], events: EventBinding[], showBindings: ShowBinding[], modelBindings: ModelBinding[], attrBindings: AttrBinding[], slots: SlotBinding[], childComponents: ChildComponentBinding[] }}
+ * @returns {{ bindings: Binding[], events: EventBinding[], showBindings: ShowBinding[], modelBindings: ModelBinding[], modelPropBindings: ModelPropBinding[], attrBindings: AttrBinding[], slots: SlotBinding[], childComponents: ChildComponentBinding[] }}
  */
 export function walkTree(rootEl, signalNames, computedNames, propNames = new Set()) {
   /** @type {Binding[]} */
@@ -35,6 +35,8 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
   const showBindings = [];
   /** @type {ModelBinding[]} */
   const modelBindings = [];
+  /** @type {ModelPropBinding[]} */
+  const modelPropBindings = [];
   /** @type {AttrBinding[]} */
   const attrBindings = [];
   /** @type {SlotBinding[]} */
@@ -45,6 +47,7 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
   let eventIdx = 0;
   let showIdx = 0;
   let modelIdx = 0;
+  let modelPropIdx = 0;
   let attrIdx = 0;
   let slotIdx = 0;
   let childIdx = 0;
@@ -121,7 +124,7 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
         const propBindings = [];
         for (const attr of Array.from(el.attributes)) {
           // Skip directive attributes (@event, :bind, show, model, etc.)
-          if (attr.name.startsWith('@') || attr.name.startsWith(':') || attr.name.startsWith('bind:')) continue;
+          if (attr.name.startsWith('@') || attr.name.startsWith(':') || attr.name.startsWith('bind:') || attr.name.startsWith('model:')) continue;
           if (['show', 'model', 'if', 'else-if', 'else', 'each', 'ref'].includes(attr.name)) continue;
 
           // Check for {{interpolation}} in attribute value
@@ -245,6 +248,29 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
         modelBindings.push({ varName, signal: signalName, prop, event, coerce, radioValue, path: [...pathParts] });
         el.removeAttribute('model');
       }
+
+      // Detect model:propName="signalName" attributes (for custom element binding)
+      const modelPropAttrsToRemove = [];
+      for (const attr of Array.from(el.attributes)) {
+        if (attr.name.startsWith('model:')) {
+          const propName = attr.name.slice(6); // after 'model:'
+          const signal = attr.value;
+          const tag = el.tagName.toLowerCase();
+
+          // Validate the element is a custom element (tag contains a hyphen)
+          if (!tag.includes('-')) {
+            const error = new Error(`model:propName is only valid on custom elements (tag must contain a hyphen)`);
+            /** @ts-expect-error — custom error code */
+            error.code = 'MODEL_PROP_INVALID_TARGET';
+            throw error;
+          }
+
+          const varName = `__modelProp${modelPropIdx++}`;
+          modelPropBindings.push({ varName, propName, signal, path: [...pathParts] });
+          modelPropAttrsToRemove.push(attr.name);
+        }
+      }
+      modelPropAttrsToRemove.forEach((a) => el.removeAttribute(a));
     }
 
     // --- Text node with interpolations ---
@@ -317,7 +343,7 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
   }
 
   walk(rootEl, []);
-  return { bindings, events, showBindings, modelBindings, attrBindings, slots, childComponents };
+  return { bindings, events, showBindings, modelBindings, modelPropBindings, attrBindings, slots, childComponents };
 }
 
 // ── Conditional chain processing (if / else-if / else) ──────────────
@@ -363,7 +389,7 @@ function isChainPredecessor(el) {
  * @param {Set<string>} signalNames
  * @param {Set<string>} computedNames
  * @param {Set<string>} propNames
- * @returns {{ bindings: Binding[], events: EventBinding[], showBindings: ShowBinding[], attrBindings: AttrBinding[], modelBindings: ModelBinding[], slots: SlotBinding[], processedHtml: string }}
+ * @returns {{ bindings: Binding[], events: EventBinding[], showBindings: ShowBinding[], attrBindings: AttrBinding[], modelBindings: ModelBinding[], modelPropBindings: ModelPropBinding[], slots: SlotBinding[], processedHtml: string }}
  */
 export function walkBranch(html, signalNames, computedNames, propNames) {
   const { document } = parseHTML(`<div id="__branchRoot">${html}</div>`);
@@ -398,6 +424,7 @@ export function walkBranch(html, signalNames, computedNames, propNames) {
   stripFirstSegment(result.showBindings);
   stripFirstSegment(result.attrBindings);
   stripFirstSegment(result.modelBindings);
+  stripFirstSegment(result.modelPropBindings);
   stripFirstSegment(result.slots);
   stripFirstSegment(result.childComponents);
 
@@ -418,6 +445,7 @@ export function walkBranch(html, signalNames, computedNames, propNames) {
     showBindings: result.showBindings,
     attrBindings: result.attrBindings,
     modelBindings: result.modelBindings,
+    modelPropBindings: result.modelPropBindings,
     slots: result.slots,
     childComponents: result.childComponents,
     forBlocks,

package/lib/types.js

@@ -93,6 +93,7 @@
  * @property {LifecycleHook[]} onMountHooks — Mount lifecycle hooks (empty array if none)
  * @property {LifecycleHook[]} onDestroyHooks — Destroy lifecycle hooks (empty array if none)
  * @property {ModelBinding[]} modelBindings — Model bindings (empty array if none)
+ * @property {ModelPropBinding[]} modelPropBindings — Model prop bindings from model:propName directives (empty array if none)
  * @property {AttrBinding[]} attrBindings — Attribute bindings (empty array if none)
  * @property {SlotBinding[]} slots — Slot bindings (empty array if no slots)
  * @property {RefDeclaration[]} refs — templateRef declarations from script (empty array if none)
@@ -168,6 +169,14 @@
  * @property {string[]} path       — DOM path from root to the element
  */
 
+/**
+ * @typedef {Object} ModelPropBinding
+ * @property {string} varName      — Internal name: '__modelProp0', '__modelProp1', ...
+ * @property {string} propName     — The prop name after 'model:' (e.g., 'value')
+ * @property {string} signal       — Parent signal name (e.g., 'searchText')
+ * @property {string[]} path       — DOM path to the child element
+ */
+
 /**
  * @typedef {Object} RefDeclaration
  * @property {string} varName  — Variable name from script (e.g., 'canvas')

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "exports": {
     ".": "./lib/compiler.js",
     "./integrations/vue": "./integrations/vue.js",
     "./integrations/react": "./integrations/react.js",
-    "./integrations/angular": "./integrations/angular.js"
+    "./integrations/angular": "./integrations/angular.js",
+    "./adapters/vue": "./adapters/vue.js",
+    "./adapters/angular": "./adapters/angular.js"
   },
   "bin": {
     "wcc": "./bin/wcc.js"
@@ -17,6 +19,7 @@
     "lib/*.js",
     "!lib/*.test.js",
     "integrations/",
+    "adapters/",
     "types/",
     "README.md"
   ],