@bookklik/senangstart-actions 0.1.0

package/dist/senangstart-actions.min.js

@@ -0,0 +1,9 @@
+var SenangStart=function(){"use strict";const e=["push","pop","shift","unshift","splice","sort","reverse","fill","copyWithin"];let t=!1;const s=new Set;let r=null;function n(t,a,i){return new Proxy(t,{get(t,d){!r||"length"!==d&&isNaN(parseInt(d))||(i.has("__array__")||i.set("__array__",new Set),i.get("__array__").add(r));const l=t[d];return e.includes(d)&&"function"==typeof l?function(...e){const r=Array.prototype[d].apply(t,e);return i.has("__array__")&&i.get("__array__").forEach(e=>{s.add(e)}),c(a),r}:l&&"object"==typeof l?Array.isArray(l)?n(l,a,i):o(l,a,i):l},set:(e,t,r)=>(e[t]===r||(e[t]=r,i.has("__array__")&&i.get("__array__").forEach(e=>{s.add(e)}),c(a)),!0)})}function o(e,t,a){const i=new Proxy(e,{get(e,s){if("__subscribers"===s||"__isReactive"===s)return e[s];r&&(a.has(s)||a.set(s,new Set),a.get(s).add(r));const c=e[s];if("function"==typeof c)return c.bind(i);if(c&&"object"==typeof c){if(Array.isArray(c))return n(c,t,a);if(!c.__isReactive)return o(c,t,a)}return c},set:(e,r,n)=>(e[r]===n||(e[r]=n,a.has(r)&&a.get(r).forEach(e=>{s.add(e)}),c(t)),!0),deleteProperty:(e,r)=>(delete e[r],a.has(r)&&a.get(r).forEach(e=>{s.add(e)}),c(t),!0)});return i}function a(e,t){const s=new Map;let r;return r=Array.isArray(e)?n(e,t,s):o(e,t,s),r.__subscribers=s,r.__isReactive=!0,r}function i(e){r=e;try{e()}finally{r=null}}function c(e){t||(t=!0,queueMicrotask(()=>{t=!1;const r=[...s];s.clear(),r.forEach(e=>{try{i(e)}catch(e){console.error("[SenangStart] Effect error:",e)}}),e&&e()}))}function d(e,t,s){const{data:r,$refs:n,$store:o}=t,a={$data:r,$store:o,$el:s,$my:s,$refs:n,$dispatch:(e,t={})=>{s.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0}))},$watch:(e,t)=>{const s=()=>{const s=r[e];t(s)};r.__subscribers&&(r.__subscribers.has(e)||r.__subscribers.set(e,new Set),r.__subscribers.get(e).add(s))},$nextTick:e=>{queueMicrotask(e)}},i=Object.keys("object"==typeof r&&null!==r?r:{}),c=Object.keys(a);try{const t=new Function(...i,...c,`with(this) { return (${e}); }`);return function(){const e=i.map(e=>r[e]),s=c.map(e=>a[e]);return t.call(r,...e,...s)}}catch(t){return console.error(`[SenangStart] Failed to parse expression: ${e}`,t),()=>{}}}function l(e,t,s){const{data:r,$refs:n,$store:o}=t,a={$data:r,$store:o,$el:s,$my:s,$refs:n,$dispatch:(e,t={})=>{s.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0}))},$watch:(e,t)=>{r.__subscribers&&(r.__subscribers.has(e)||r.__subscribers.set(e,new Set),r.__subscribers.get(e).add(()=>t(r[e])))},$nextTick:e=>{queueMicrotask(e)}},i=Object.keys("object"==typeof r&&null!==r?r:{}),c=Object.keys(a);try{const t=new Function(...i,...c,`with(this) { ${e} }`);return function(){const e=i.map(e=>r[e]),s=c.map(e=>a[e]);return t.call(r,...e,...s)}}catch(t){return console.error(`[SenangStart] Failed to parse expression: ${e}`,t),()=>{}}}const u={"ss-text":(e,t,s)=>{i(()=>{const r=d(t,s,e);e.innerText=r()??""})},"ss-html":(e,t,s)=>{i(()=>{const r=d(t,s,e);e.innerHTML=r()??""})},"ss-show":(e,t,s)=>{const r=e.style.display||"";i(()=>{const n=!!d(t,s,e)();e.hasAttribute("ss-transition")?function(e,t,s){if(t){e.classList.add("ss-enter-from"),e.classList.add("ss-enter-active"),e.style.display=s,requestAnimationFrame(()=>{e.classList.remove("ss-enter-from"),e.classList.add("ss-enter-to")});const t=()=>{e.classList.remove("ss-enter-active","ss-enter-to"),e.removeEventListener("transitionend",t)};e.addEventListener("transitionend",t)}else{e.classList.add("ss-leave-from"),e.classList.add("ss-leave-active"),requestAnimationFrame(()=>{e.classList.remove("ss-leave-from"),e.classList.add("ss-leave-to")});const t=()=>{e.style.display="none",e.classList.remove("ss-leave-active","ss-leave-to"),e.removeEventListener("transitionend",t)};e.addEventListener("transitionend",t)}}(e,n,r):e.style.display=n?r:"none"})},"ss-model":(e,t,s)=>{const{data:r}=s,n="checkbox"===e.type,o="radio"===e.type;e.tagName;i(()=>{const r=d(t,s,e)();n?e.checked=!!r:o?e.checked=e.value===r:e.value=r??""});const a=n||o?"change":"input";e.addEventListener(a,()=>{let s;if(n)s=e.checked;else if(o){if(!e.checked)return;s=e.value}else s=e.value;r[t]=s})},"ss-ref":(e,t,s)=>{s.$refs[t]=e},"ss-init":(e,t,s)=>{l(t,s,e)()},"ss-effect":(e,t,s)=>{i(()=>{l(t,s,e)()})}};function f(e,t,s,r){const n=t.replace("ss-bind:","");i(()=>{const t=d(s,r,e)();"class"===n?"string"==typeof t?e.className=t:"object"==typeof t&&Object.entries(t).forEach(([t,s])=>{e.classList.toggle(t,!!s)}):"style"===n?"string"==typeof t?e.style.cssText=t:"object"==typeof t&&Object.assign(e.style,t):!1===t||null==t?e.removeAttribute(n):!0===t?e.setAttribute(n,""):e.setAttribute(n,t)})}function p(e,t,s,r){const n=t.replace("ss-on:","").split("."),o=n[0],a=n.slice(1),i=l(s,r,e),c=t=>{if(a.includes("prevent")&&t.preventDefault(),a.includes("stop")&&t.stopPropagation(),!a.includes("self")||t.target===e){if(a.includes("once")&&e.removeEventListener(o,c),t instanceof KeyboardEvent){const e=t.key.toLowerCase(),s=["enter","escape","tab","space","up","down","left","right"];if(a.some(e=>s.includes(e))){const t={enter:"enter",escape:"escape",tab:"tab",space:" ",up:"arrowup",down:"arrowdown",left:"arrowleft",right:"arrowright"};if(!a.some(s=>t[s]===e))return}}r.data.$event=t,i(),delete r.data.$event}};a.includes("window")?window.addEventListener(o,c):a.includes("document")?document.addEventListener(o,c):e.addEventListener(o,c)}let h=null;let y={},b={};function m(e,t=null){if(1!==e.nodeType)return;if(e.hasAttribute("ss-ignore"))return;let s=t;if(e.hasAttribute("ss-data")){const t=e.getAttribute("ss-data").trim();let r={};if(t)if(y[t])r=y[t]();else try{r=new Function(`return (${t})`)()}catch(e){console.error("[SenangStart] Failed to parse ss-data:",t,e)}s={data:a(r,()=>{}),$refs:{},$store:b},e.__ssScope=s}if(!s)return void Array.from(e.children).forEach(e=>m(e,null));if("TEMPLATE"===e.tagName&&e.hasAttribute("ss-for"))return void function(e,t,s){const r=t.match(/^\s*(?:\(([^,]+),\s*([^)]+)\)|([^\s]+))\s+in\s+(.+)$/);if(!r)return void console.error("[SenangStart] Invalid ss-for expression:",t);const n=r[1]||r[3],o=r[2]||"index",c=r[4],l=e.parentNode,u=document.createComment(`ss-for: ${t}`);l.insertBefore(u,e),e.remove();let f=[],p="";i(()=>{const t=d(c,s,e)()||[],r=JSON.stringify(t);r!==p&&(p=r,f.forEach(e=>e.remove()),f=[],t.forEach((t,r)=>{const i=e.content.cloneNode(!0),c=Array.from(i.childNodes).filter(e=>1===e.nodeType),d={data:a({...s.data,[n]:t,[o]:r},()=>{}),$refs:s.$refs,$store:s.$store,parentData:s.data};c.forEach(e=>{l.insertBefore(e,u),f.push(e),h&&h(e,d)})}))})}(e,e.getAttribute("ss-for"),s);if("TEMPLATE"===e.tagName&&e.hasAttribute("ss-if"))return void function(e,t,s){const r=e.parentNode,n=document.createComment(`ss-if: ${t}`);r.insertBefore(n,e),e.remove();let o=[];i(()=>{const a=!!d(t,s,e)();if(o.forEach(e=>e.remove()),o=[],a){const t=e.content.cloneNode(!0);Array.from(t.childNodes).filter(e=>1===e.nodeType).forEach(e=>{r.insertBefore(e,n),o.push(e),h&&h(e,s)})}})}(e,e.getAttribute("ss-if"),s);const r=Array.from(e.attributes);for(const t of r){const r=t.name,n=t.value;"ss-data"!==r&&"ss-describe"!==r&&(u[r]?u[r](e,n,s):r.startsWith("ss-bind:")?f(e,r,n,s):r.startsWith("ss-on:")&&p(e,r,n,s))}e.hasAttribute("ss-cloak")&&e.removeAttribute("ss-cloak"),Array.from(e.children).forEach(e=>m(e,s))}function v(){const e=new MutationObserver(e=>{for(const t of e)for(const e of t.addedNodes)if(1===e.nodeType){let t=e,s=null;for(;t.parentElement;)if(t=t.parentElement,t.__ssScope){s=t.__ssScope;break}m(e,s)}});return e.observe(document.body,{childList:!0,subtree:!0}),e}
+/**
+     * SenangStart Actions v0.1.0
+     * Declarative UI framework for humans and AI agents
+     * 
+     * @license MIT
+     * @author Bookklik
+     * @module senangstart-actions
+     */h=m;const _=document.createElement("style");_.textContent="[ss-cloak] { display: none !important; }",document.head.appendChild(_);const g={},$={};y=g,b=$;const E={data(e,t){return"function"!=typeof t?(console.error("[SenangStart] data() requires a factory function"),this):(g[e]=t,this)},store(e,t){return"object"!=typeof t?(console.error("[SenangStart] store() requires an object"),this):($[e]=a(t,()=>{}),this)},init(e=document.body){return m(e,null),this},start(){return"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{this.init(),v()}):(this.init(),v()),this},version:"0.1.0"};return"undefined"!=typeof window&&(window.SenangStart=E),E.start(),E}();

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@bookklik/senangstart-actions",
+  "version": "0.1.0",
+  "description": "Declarative UI framework for humans and AI agents",
+  "main": "dist/senangstart-actions.js",
+  "module": "dist/senangstart-actions.esm.js",
+  "unpkg": "dist/senangstart-actions.min.js",
+  "jsdelivr": "dist/senangstart-actions.min.js",
+  "type": "module",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "npx -y serve .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "keywords": [
+    "javascript",
+    "framework",
+    "reactive",
+    "declarative",
+    "ai-friendly",
+    "lightweight"
+  ],
+  "author": "a-hakim",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bookklik-technologies/senangstart-actions"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@vitest/coverage-v8": "^2.1.0",
+    "jsdom": "^25.0.0",
+    "rollup": "^4.9.0",
+    "vitepress": "^1.5.0",
+    "vitest": "^2.1.0"
+  }
+}

package/src/evaluator.js

@@ -0,0 +1,118 @@
+/**
+ * SenangStart Actions - Expression Evaluator
+ * Safe evaluation of expressions within component scope
+ * 
+ * @module evaluator
+ */
+
+/**
+ * Create a function to evaluate an expression within a component scope
+ */
+export function createEvaluator(expression, scope, element) {
+    const { data, $refs, $store } = scope;
+    
+    // Magic properties
+    const magics = {
+        $data: data,
+        $store: $store,
+        $el: element,
+        $my: element,
+        $refs: $refs,
+        $dispatch: (name, detail = {}) => {
+            element.dispatchEvent(new CustomEvent(name, {
+                detail,
+                bubbles: true,
+                cancelable: true
+            }));
+        },
+        $watch: (prop, callback) => {
+            const watchEffect = () => {
+                const value = data[prop];
+                callback(value);
+            };
+            if (data.__subscribers) {
+                if (!data.__subscribers.has(prop)) {
+                    data.__subscribers.set(prop, new Set());
+                }
+                data.__subscribers.get(prop).add(watchEffect);
+            }
+        },
+        $nextTick: (fn) => {
+            queueMicrotask(fn);
+        }
+    };
+    
+    // Build the function with data properties spread as local variables
+    const dataKeys = Object.keys(typeof data === 'object' && data !== null ? data : {});
+    const magicKeys = Object.keys(magics);
+    
+    try {
+        const fn = new Function(
+            ...dataKeys,
+            ...magicKeys,
+            `with(this) { return (${expression}); }`
+        );
+        
+        return function() {
+            const dataValues = dataKeys.map(k => data[k]);
+            const magicValues = magicKeys.map(k => magics[k]);
+            return fn.call(data, ...dataValues, ...magicValues);
+        };
+    } catch (e) {
+        console.error(`[SenangStart] Failed to parse expression: ${expression}`, e);
+        return () => undefined;
+    }
+}
+
+/**
+ * Create a function to execute a statement (not return value)
+ */
+export function createExecutor(expression, scope, element) {
+    const { data, $refs, $store } = scope;
+    
+    const magics = {
+        $data: data,
+        $store: $store,
+        $el: element,
+        $my: element,
+        $refs: $refs,
+        $dispatch: (name, detail = {}) => {
+            element.dispatchEvent(new CustomEvent(name, {
+                detail,
+                bubbles: true,
+                cancelable: true
+            }));
+        },
+        $watch: (prop, callback) => {
+            if (data.__subscribers) {
+                if (!data.__subscribers.has(prop)) {
+                    data.__subscribers.set(prop, new Set());
+                }
+                data.__subscribers.get(prop).add(() => callback(data[prop]));
+            }
+        },
+        $nextTick: (fn) => {
+            queueMicrotask(fn);
+        }
+    };
+    
+    const dataKeys = Object.keys(typeof data === 'object' && data !== null ? data : {});
+    const magicKeys = Object.keys(magics);
+    
+    try {
+        const fn = new Function(
+            ...dataKeys,
+            ...magicKeys,
+            `with(this) { ${expression} }`
+        );
+        
+        return function() {
+            const dataValues = dataKeys.map(k => data[k]);
+            const magicValues = magicKeys.map(k => magics[k]);
+            return fn.call(data, ...dataValues, ...magicValues);
+        };
+    } catch (e) {
+        console.error(`[SenangStart] Failed to parse expression: ${expression}`, e);
+        return () => {};
+    }
+}

package/src/handlers/attributes.js

@@ -0,0 +1,168 @@
+/**
+ * SenangStart Actions - Attribute Handlers
+ * Handlers for basic ss-* attributes
+ * 
+ * @module handlers/attributes
+ */
+
+import { createEvaluator, createExecutor } from '../evaluator.js';
+import { runEffect } from '../reactive.js';
+
+/**
+ * Handle ss-transition animations
+ */
+export function handleTransition(el, show, originalDisplay) {
+    if (show) {
+        // Enter transition
+        el.classList.add('ss-enter-from');
+        el.classList.add('ss-enter-active');
+        el.style.display = originalDisplay;
+        
+        requestAnimationFrame(() => {
+            el.classList.remove('ss-enter-from');
+            el.classList.add('ss-enter-to');
+        });
+        
+        const onEnd = () => {
+            el.classList.remove('ss-enter-active', 'ss-enter-to');
+            el.removeEventListener('transitionend', onEnd);
+        };
+        el.addEventListener('transitionend', onEnd);
+    } else {
+        // Leave transition
+        el.classList.add('ss-leave-from');
+        el.classList.add('ss-leave-active');
+        
+        requestAnimationFrame(() => {
+            el.classList.remove('ss-leave-from');
+            el.classList.add('ss-leave-to');
+        });
+        
+        const onEnd = () => {
+            el.style.display = 'none';
+            el.classList.remove('ss-leave-active', 'ss-leave-to');
+            el.removeEventListener('transitionend', onEnd);
+        };
+        el.addEventListener('transitionend', onEnd);
+    }
+}
+
+/**
+ * Attribute handlers map
+ */
+export const attributeHandlers = {
+    /**
+     * ss-text: Set element's innerText
+     */
+    'ss-text': (el, expr, scope) => {
+        const update = () => {
+            const evaluator = createEvaluator(expr, scope, el);
+            el.innerText = evaluator() ?? '';
+        };
+        runEffect(update);
+    },
+    
+    /**
+     * ss-html: Set element's innerHTML
+     */
+    'ss-html': (el, expr, scope) => {
+        const update = () => {
+            const evaluator = createEvaluator(expr, scope, el);
+            el.innerHTML = evaluator() ?? '';
+        };
+        runEffect(update);
+    },
+    
+    /**
+     * ss-show: Toggle visibility
+     */
+    'ss-show': (el, expr, scope) => {
+        const originalDisplay = el.style.display || '';
+        
+        const update = () => {
+            const evaluator = createEvaluator(expr, scope, el);
+            const show = !!evaluator();
+            
+            if (el.hasAttribute('ss-transition')) {
+                handleTransition(el, show, originalDisplay);
+            } else {
+                el.style.display = show ? originalDisplay : 'none';
+            }
+        };
+        runEffect(update);
+    },
+    
+    /**
+     * ss-model: Two-way binding for inputs
+     */
+    'ss-model': (el, expr, scope) => {
+        const { data } = scope;
+        
+        // Determine input type
+        const isCheckbox = el.type === 'checkbox';
+        const isRadio = el.type === 'radio';
+        const isSelect = el.tagName === 'SELECT';
+        
+        // Set initial value
+        const setInitialValue = () => {
+            const evaluator = createEvaluator(expr, scope, el);
+            const value = evaluator();
+            
+            if (isCheckbox) {
+                el.checked = !!value;
+            } else if (isRadio) {
+                el.checked = el.value === value;
+            } else if (isSelect) {
+                el.value = value ?? '';
+            } else {
+                el.value = value ?? '';
+            }
+        };
+        
+        runEffect(setInitialValue);
+        
+        // Listen for changes
+        const eventType = isCheckbox || isRadio ? 'change' : 'input';
+        el.addEventListener(eventType, () => {
+            let newValue;
+            
+            if (isCheckbox) {
+                newValue = el.checked;
+            } else if (isRadio) {
+                if (el.checked) newValue = el.value;
+                else return; // Don't update if not checked
+            } else {
+                newValue = el.value;
+            }
+            
+            // Set the value on the data object
+            data[expr] = newValue;
+        });
+    },
+    
+    /**
+     * ss-ref: Register element reference
+     */
+    'ss-ref': (el, name, scope) => {
+        scope.$refs[name] = el;
+    },
+    
+    /**
+     * ss-init: Run initialization code
+     */
+    'ss-init': (el, expr, scope) => {
+        const executor = createExecutor(expr, scope, el);
+        executor();
+    },
+    
+    /**
+     * ss-effect: Run reactive effect
+     */
+    'ss-effect': (el, expr, scope) => {
+        const update = () => {
+            const executor = createExecutor(expr, scope, el);
+            executor();
+        };
+        runEffect(update);
+    }
+};

package/src/handlers/bind.js

@@ -0,0 +1,46 @@
+/**
+ * SenangStart Actions - Bind Handler
+ * Handler for ss-bind:[attr] dynamic attribute binding
+ * 
+ * @module handlers/bind
+ */
+
+import { createEvaluator } from '../evaluator.js';
+import { runEffect } from '../reactive.js';
+
+/**
+ * Handle ss-bind:[attr] dynamically
+ */
+export function handleBind(el, attrName, expr, scope) {
+    const attr = attrName.replace('ss-bind:', '');
+    
+    const update = () => {
+        const evaluator = createEvaluator(expr, scope, el);
+        const value = evaluator();
+        
+        if (attr === 'class') {
+            if (typeof value === 'string') {
+                el.className = value;
+            } else if (typeof value === 'object') {
+                // Object syntax: { 'class-name': condition }
+                Object.entries(value).forEach(([className, condition]) => {
+                    el.classList.toggle(className, !!condition);
+                });
+            }
+        } else if (attr === 'style') {
+            if (typeof value === 'string') {
+                el.style.cssText = value;
+            } else if (typeof value === 'object') {
+                Object.assign(el.style, value);
+            }
+        } else if (value === false || value === null || value === undefined) {
+            el.removeAttribute(attr);
+        } else if (value === true) {
+            el.setAttribute(attr, '');
+        } else {
+            el.setAttribute(attr, value);
+        }
+    };
+    
+    runEffect(update);
+}

package/src/handlers/directives.js

@@ -0,0 +1,119 @@
+/**
+ * SenangStart Actions - Directive Handlers
+ * Handlers for ss-for and ss-if template directives
+ * 
+ * @module handlers/directives
+ */
+
+import { createEvaluator } from '../evaluator.js';
+import { createReactive, runEffect } from '../reactive.js';
+
+// Forward declaration - will be set by walker.js
+let walkFn = null;
+
+/**
+ * Set the walk function reference (to avoid circular imports)
+ */
+export function setWalkFunction(fn) {
+    walkFn = fn;
+}
+
+/**
+ * Handle ss-for directive
+ */
+export function handleFor(templateEl, expr, scope) {
+    // Parse expression: "item in items" or "(item, index) in items"
+    const match = expr.match(/^\s*(?:\(([^,]+),\s*([^)]+)\)|([^\s]+))\s+in\s+(.+)$/);
+    if (!match) {
+        console.error('[SenangStart] Invalid ss-for expression:', expr);
+        return;
+    }
+    
+    const itemName = match[1] || match[3];
+    const indexName = match[2] || 'index';
+    const arrayExpr = match[4];
+    
+    const parent = templateEl.parentNode;
+    const anchor = document.createComment(`ss-for: ${expr}`);
+    parent.insertBefore(anchor, templateEl);
+    templateEl.remove();
+    
+    let currentNodes = [];
+    let lastItemsJSON = '';
+    
+    const update = () => {
+        const evaluator = createEvaluator(arrayExpr, scope, templateEl);
+        const items = evaluator() || [];
+        
+        // Check if items actually changed (shallow comparison)
+        const itemsJSON = JSON.stringify(items);
+        if (itemsJSON === lastItemsJSON) {
+            return; // No change, skip re-render
+        }
+        lastItemsJSON = itemsJSON;
+        
+        // Remove old nodes
+        currentNodes.forEach(node => node.remove());
+        currentNodes = [];
+        
+        // Create new nodes
+        items.forEach((item, index) => {
+            const clone = templateEl.content.cloneNode(true);
+            const nodes = Array.from(clone.childNodes).filter(n => n.nodeType === 1);
+            
+            // Create child scope with item and index - use parent scope's data for non-item properties
+            const itemScope = {
+                data: createReactive({ 
+                    ...scope.data, 
+                    [itemName]: item, 
+                    [indexName]: index 
+                }, () => {}),
+                $refs: scope.$refs,
+                $store: scope.$store,
+                parentData: scope.data // Keep reference to parent data
+            };
+            
+            nodes.forEach(node => {
+                parent.insertBefore(node, anchor);
+                currentNodes.push(node);
+                if (walkFn) walkFn(node, itemScope);
+            });
+        });
+    };
+    
+    runEffect(update);
+}
+
+/**
+ * Handle ss-if directive
+ */
+export function handleIf(templateEl, expr, scope) {
+    const parent = templateEl.parentNode;
+    const anchor = document.createComment(`ss-if: ${expr}`);
+    parent.insertBefore(anchor, templateEl);
+    templateEl.remove();
+    
+    let currentNodes = [];
+    
+    const update = () => {
+        const evaluator = createEvaluator(expr, scope, templateEl);
+        const condition = !!evaluator();
+        
+        // Remove old nodes
+        currentNodes.forEach(node => node.remove());
+        currentNodes = [];
+        
+        if (condition) {
+            const clone = templateEl.content.cloneNode(true);
+            const nodes = Array.from(clone.childNodes).filter(n => n.nodeType === 1);
+            
+            nodes.forEach(node => {
+                parent.insertBefore(node, anchor);
+                currentNodes.push(node);
+                if (walkFn) walkFn(node, scope);
+            });
+        }
+    };
+    
+    runEffect(update);
+}

package/src/handlers/events.js

@@ -0,0 +1,66 @@
+/**
+ * SenangStart Actions - Event Handler
+ * Handler for ss-on:[event] with modifiers
+ * 
+ * @module handlers/events
+ */
+
+import { createExecutor } from '../evaluator.js';
+
+/**
+ * Handle ss-on:[event] dynamically
+ */
+export function handleEvent(el, attrName, expr, scope) {
+    const parts = attrName.replace('ss-on:', '').split('.');
+    const eventName = parts[0];
+    const modifiers = parts.slice(1);
+    
+    const executor = createExecutor(expr, scope, el);
+    
+    const handler = (event) => {
+        // Handle modifiers
+        if (modifiers.includes('prevent')) event.preventDefault();
+        if (modifiers.includes('stop')) event.stopPropagation();
+        if (modifiers.includes('self') && event.target !== el) return;
+        if (modifiers.includes('once')) {
+            el.removeEventListener(eventName, handler);
+        }
+        
+        // For keyboard events, check key modifiers
+        if (event instanceof KeyboardEvent) {
+            const key = event.key.toLowerCase();
+            const keyModifiers = ['enter', 'escape', 'tab', 'space', 'up', 'down', 'left', 'right'];
+            const hasKeyModifier = modifiers.some(m => keyModifiers.includes(m));
+            
+            if (hasKeyModifier) {
+                const keyMap = {
+                    'enter': 'enter',
+                    'escape': 'escape',
+                    'tab': 'tab',
+                    'space': ' ',
+                    'up': 'arrowup',
+                    'down': 'arrowdown',
+                    'left': 'arrowleft',
+                    'right': 'arrowright'
+                };
+                
+                const shouldFire = modifiers.some(m => keyMap[m] === key);
+                if (!shouldFire) return;
+            }
+        }
+        
+        // Execute the expression with $event available
+        scope.data.$event = event;
+        executor();
+        delete scope.data.$event;
+    };
+    
+    // Special window/document events
+    if (modifiers.includes('window')) {
+        window.addEventListener(eventName, handler);
+    } else if (modifiers.includes('document')) {
+        document.addEventListener(eventName, handler);
+    } else {
+        el.addEventListener(eventName, handler);
+    }
+}

package/src/handlers/index.js

@@ -0,0 +1,11 @@
+/**
+ * SenangStart Actions - Handlers Index
+ * Re-exports all handler modules
+ * 
+ * @module handlers
+ */
+
+export { attributeHandlers, handleTransition } from './attributes.js';
+export { handleBind } from './bind.js';
+export { handleEvent } from './events.js';
+export { handleFor, handleIf, setWalkFunction } from './directives.js';