@constela/runtime 0.12.2 → 0.14.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { CompiledExpression, CompiledAction, CompiledNode, CompiledProgram } from '@constela/compiler';
+import { CompiledExpression, CompiledAction, CompiledNode, CompiledLocalAction, CompiledProgram } from '@constela/compiler';
 
 interface Signal<T> {
     get(): T;
@@ -254,6 +254,20 @@ declare function createConnectionManager(): ConnectionManager;
  * - navigate: Page navigation
  */
 
+/**
+ * Local state store interface for component-level state
+ */
+interface LocalStateStore$1 {
+    get(name: string): unknown;
+    set(name: string, value: unknown): void;
+}
+/**
+ * Extended action type with local action metadata
+ */
+interface ExtendedAction extends CompiledAction {
+    _isLocalAction?: boolean;
+    _localStore?: LocalStateStore$1;
+}
 interface ActionContext {
     state: StateStore;
     actions: Record<string, CompiledAction>;
@@ -261,6 +275,7 @@ interface ActionContext {
     eventPayload?: unknown;
     refs?: Record<string, Element>;
     subscriptions?: (() => void)[];
+    cleanups?: (() => void)[];
     route?: {
         params: Record<string, string>;
         query: Record<string, string>;
@@ -269,7 +284,7 @@ interface ActionContext {
     imports?: Record<string, unknown>;
     connections?: ConnectionManager;
 }
-declare function executeAction(action: CompiledAction, ctx: ActionContext): Promise<void>;
+declare function executeAction(action: CompiledAction | ExtendedAction, ctx: ActionContext): Promise<void>;
 
 /**
  * Renderer - DOM rendering for compiled view nodes
@@ -281,6 +296,14 @@ declare function executeAction(action: CompiledAction, ctx: ActionContext): Prom
  * - each: List rendering with reactive updates
  */
 
+/**
+ * Local state store interface for component-level state
+ */
+interface LocalStateStore {
+    get(name: string): unknown;
+    set(name: string, value: unknown): void;
+    signals: Record<string, Signal<unknown>>;
+}
 interface RenderContext {
     state: StateStore;
     actions: Record<string, CompiledAction>;
@@ -289,6 +312,10 @@ interface RenderContext {
     cleanups?: (() => void)[];
     refs?: Record<string, Element>;
     inSvg?: boolean;
+    localState?: {
+        store: LocalStateStore;
+        actions: Record<string, CompiledLocalAction>;
+    };
 }
 declare function render(node: CompiledNode, ctx: RenderContext): Node;
 

package/dist/index.js

@@ -428,6 +428,18 @@ function evaluate(expr, ctx) {
         return val == null ? "" : String(val);
       }).join("");
     }
+    case "validity": {
+      const element2 = ctx.refs?.[expr.ref];
+      if (!element2) return null;
+      const formElement = element2;
+      if (!formElement.validity) return null;
+      const validity = formElement.validity;
+      const property = expr.property || "valid";
+      if (property === "message") {
+        return formElement.validationMessage || "";
+      }
+      return validity[property] ?? null;
+    }
     default: {
       const _exhaustiveCheck = expr;
       throw new Error(`Unknown expression type: ${JSON.stringify(_exhaustiveCheck)}`);
@@ -590,38 +602,58 @@ function createEvalContext(ctx) {
   };
 }
 async function executeAction(action, ctx) {
+  const extAction = action;
+  const isLocal = extAction._isLocalAction && extAction._localStore;
+  const localStore = extAction._localStore;
+  const delayPromises = [];
   for (const step of action.steps) {
     if (step.do === "set" || step.do === "update" || step.do === "setPath") {
-      executeStepSync(step, ctx);
+      executeStepSync(step, ctx, isLocal ? localStore : void 0);
     } else if (step.do === "if") {
-      await executeIfStep(step, ctx);
+      await executeIfStep(step, ctx, isLocal ? localStore : void 0);
+    } else if (step.do === "delay") {
+      const delayPromise = executeDelayStep(step, ctx);
+      delayPromises.push(delayPromise);
+    } else if (step.do === "interval") {
+      await executeIntervalStep(step, ctx);
     } else {
       await executeStep(step, ctx);
     }
   }
+  if (delayPromises.length > 0) {
+    await Promise.all(delayPromises);
+  }
 }
-function executeStepSync(step, ctx) {
+function executeStepSync(step, ctx, localStore) {
   switch (step.do) {
     case "set":
-      executeSetStepSync(step.target, step.value, ctx);
+      if (localStore) {
+        executeLocalSetStepSync(step.target, step.value, ctx, localStore);
+      } else {
+        executeSetStepSync(step.target, step.value, ctx);
+      }
       break;
     case "update":
-      executeUpdateStepSync(step, ctx);
+      if (localStore) {
+        executeLocalUpdateStepSync(step, ctx, localStore);
+      } else {
+        executeUpdateStepSync(step, ctx);
+      }
       break;
     case "setPath":
       executeSetPathStepSync(step, ctx);
       break;
   }
 }
-async function executeIfStep(step, ctx) {
+async function executeIfStep(step, ctx, localStore) {
   const evalCtx = createEvalContext(ctx);
   const condition = evaluate(step.condition, evalCtx);
   const stepsToExecute = condition ? step.then : step.else || [];
   for (const nestedStep of stepsToExecute) {
     if (nestedStep.do === "set" || nestedStep.do === "update" || nestedStep.do === "setPath") {
-      executeStepSync(nestedStep, ctx);
+      executeStepSync(nestedStep, ctx, localStore);
     } else if (nestedStep.do === "if") {
-      await executeIfStep(nestedStep, ctx);
+      await executeIfStep(nestedStep, ctx, localStore);
     } else {
       await executeStep(nestedStep, ctx);
     }
@@ -718,6 +750,97 @@ function executeUpdateStepSync(step, ctx) {
     }
   }
 }
+function executeLocalSetStepSync(target, value, ctx, localStore) {
+  const evalCtx = createEvalContext(ctx);
+  const newValue = evaluate(value, evalCtx);
+  localStore.set(target, newValue);
+}
+function executeLocalUpdateStepSync(step, ctx, localStore) {
+  const { target, operation, value } = step;
+  const evalCtx = createEvalContext(ctx);
+  const currentValue = localStore.get(target);
+  switch (operation) {
+    case "toggle": {
+      const current = typeof currentValue === "boolean" ? currentValue : false;
+      localStore.set(target, !current);
+      break;
+    }
+    case "increment": {
+      const evalResult = value ? evaluate(value, evalCtx) : 1;
+      const amount = typeof evalResult === "number" ? evalResult : 1;
+      const current = typeof currentValue === "number" ? currentValue : 0;
+      localStore.set(target, current + amount);
+      break;
+    }
+    case "decrement": {
+      const evalResult = value ? evaluate(value, evalCtx) : 1;
+      const amount = typeof evalResult === "number" ? evalResult : 1;
+      const current = typeof currentValue === "number" ? currentValue : 0;
+      localStore.set(target, current - amount);
+      break;
+    }
+    case "push": {
+      const item = value ? evaluate(value, evalCtx) : void 0;
+      const arr = Array.isArray(currentValue) ? currentValue : [];
+      localStore.set(target, [...arr, item]);
+      break;
+    }
+    case "pop": {
+      const arr = Array.isArray(currentValue) ? currentValue : [];
+      localStore.set(target, arr.slice(0, -1));
+      break;
+    }
+    case "remove": {
+      const removeValue = value ? evaluate(value, evalCtx) : void 0;
+      const arr = Array.isArray(currentValue) ? currentValue : [];
+      if (typeof removeValue === "number") {
+        localStore.set(target, arr.filter((_2, i) => i !== removeValue));
+      } else {
+        localStore.set(target, arr.filter((x2) => x2 !== removeValue));
+      }
+      break;
+    }
+    case "merge": {
+      const evalResult = value ? evaluate(value, evalCtx) : {};
+      const mergeValue = typeof evalResult === "object" && evalResult !== null ? evalResult : {};
+      const current = typeof currentValue === "object" && currentValue !== null ? currentValue : {};
+      localStore.set(target, { ...current, ...mergeValue });
+      break;
+    }
+    case "replaceAt": {
+      const idx = step.index ? evaluate(step.index, evalCtx) : 0;
+      const newValue = value ? evaluate(value, evalCtx) : void 0;
+      const arr = Array.isArray(currentValue) ? [...currentValue] : [];
+      if (typeof idx === "number" && idx >= 0 && idx < arr.length) {
+        arr[idx] = newValue;
+      }
+      localStore.set(target, arr);
+      break;
+    }
+    case "insertAt": {
+      const idx = step.index ? evaluate(step.index, evalCtx) : 0;
+      const newValue = value ? evaluate(value, evalCtx) : void 0;
+      const arr = Array.isArray(currentValue) ? [...currentValue] : [];
+      if (typeof idx === "number" && idx >= 0) {
+        arr.splice(idx, 0, newValue);
+      }
+      localStore.set(target, arr);
+      break;
+    }
+    case "splice": {
+      const idx = step.index ? evaluate(step.index, evalCtx) : 0;
+      const delCount = step.deleteCount ? evaluate(step.deleteCount, evalCtx) : 0;
+      const items = value ? evaluate(value, evalCtx) : [];
+      const arr = Array.isArray(currentValue) ? [...currentValue] : [];
+      if (typeof idx === "number" && typeof delCount === "number") {
+        const insertItems = Array.isArray(items) ? items : [];
+        arr.splice(idx, delCount, ...insertItems);
+      }
+      localStore.set(target, arr);
+      break;
+    }
+  }
+}
 function executeSetPathStepSync(step, ctx) {
   const evalCtx = createEvalContext(ctx);
   const pathValue = evaluate(step.path, evalCtx);
@@ -790,6 +913,18 @@ async function executeStep(step, ctx) {
     case "close":
       await executeCloseStep(step, ctx);
       break;
+    case "delay":
+      await executeDelayStep(step, ctx);
+      break;
+    case "interval":
+      await executeIntervalStep(step, ctx);
+      break;
+    case "clearTimer":
+      await executeClearTimerStep(step, ctx);
+      break;
+    case "focus":
+      await executeFocusStep(step, ctx);
+      break;
   }
 }
 async function executeSetStep(target, value, ctx) {
@@ -1156,6 +1291,137 @@ async function executeCloseStep(step, ctx) {
   if (!ctx.connections) return;
   ctx.connections.close(step.connection);
 }
+async function executeDelayStep(step, ctx) {
+  const evalCtx = createEvalContext(ctx);
+  const msValue = evaluate(step.ms, evalCtx);
+  const ms = typeof msValue === "number" ? Math.max(0, msValue) : 0;
+  return new Promise((resolve) => {
+    let resolved = false;
+    const timeoutId = setTimeout(async () => {
+      if (resolved) return;
+      resolved = true;
+      for (const thenStep of step.then) {
+        if (thenStep.do === "set" || thenStep.do === "update" || thenStep.do === "setPath") {
+          executeStepSync(thenStep, ctx);
+        } else if (thenStep.do === "if") {
+          await executeIfStep(thenStep, ctx);
+        } else {
+          await executeStep(thenStep, ctx);
+        }
+      }
+      resolve();
+    }, ms);
+    const numericId = typeof timeoutId === "number" ? timeoutId : Number(timeoutId);
+    if (step.result) {
+      ctx.locals[step.result] = numericId;
+    }
+    if (!ctx.locals["_timerResolvers"]) {
+      ctx.locals["_timerResolvers"] = /* @__PURE__ */ new Map();
+    }
+    ctx.locals["_timerResolvers"].set(numericId, () => {
+      if (!resolved) {
+        resolved = true;
+        clearTimeout(timeoutId);
+        resolve();
+      }
+    });
+    if (ctx.cleanups) {
+      ctx.cleanups.push(() => {
+        if (!resolved) {
+          resolved = true;
+          clearTimeout(timeoutId);
+          resolve();
+        }
+      });
+    }
+  });
+}
+async function executeIntervalStep(step, ctx) {
+  const evalCtx = createEvalContext(ctx);
+  const msValue = evaluate(step.ms, evalCtx);
+  const ms = typeof msValue === "number" ? Math.max(0, msValue) : 0;
+  const intervalId = setInterval(async () => {
+    const action = ctx.actions[step.action];
+    if (action) {
+      await executeAction(action, ctx);
+    }
+  }, ms);
+  const numericId = typeof intervalId === "number" ? intervalId : Number(intervalId);
+  if (step.result) {
+    ctx.locals[step.result] = numericId;
+  }
+  if (ctx.cleanups) {
+    ctx.cleanups.push(() => clearInterval(intervalId));
+  }
+}
+async function executeClearTimerStep(step, ctx) {
+  const evalCtx = createEvalContext(ctx);
+  const timerId = evaluate(step.target, evalCtx);
+  if (timerId == null) {
+    return;
+  }
+  const numericId = typeof timerId === "number" ? timerId : Number(timerId);
+  const timerResolvers = ctx.locals["_timerResolvers"];
+  if (timerResolvers?.has(numericId)) {
+    const resolver = timerResolvers.get(numericId);
+    if (resolver) {
+      resolver();
+    }
+    timerResolvers.delete(numericId);
+  }
+  clearTimeout(timerId);
+  clearInterval(timerId);
+}
+async function executeFocusStep(step, ctx) {
+  const evalCtx = createEvalContext(ctx);
+  const targetValue = evaluate(step.target, evalCtx);
+  let element2;
+  if (targetValue instanceof Element) {
+    element2 = targetValue;
+  } else if (typeof targetValue === "string") {
+    element2 = ctx.refs?.[targetValue];
+  }
+  try {
+    if (!element2) {
+      const refName = typeof targetValue === "string" ? targetValue : "unknown";
+      throw new Error(`Ref "${refName}" not found`);
+    }
+    switch (step.operation) {
+      case "focus":
+        if (typeof element2.focus === "function") {
+          element2.focus();
+        }
+        break;
+      case "blur":
+        if (typeof element2.blur === "function") {
+          element2.blur();
+        }
+        break;
+      case "select":
+        if (typeof element2.select === "function") {
+          element2.select();
+        } else {
+          throw new Error(`Element does not support select operation`);
+        }
+        break;
+    }
+    if (step.onSuccess) {
+      for (const successStep of step.onSuccess) {
+        await executeStep(successStep, ctx);
+      }
+    }
+  } catch (err) {
+    ctx.locals["error"] = {
+      message: err instanceof Error ? err.message : String(err),
+      name: err instanceof Error ? err.name : "Error"
+    };
+    if (step.onError) {
+      for (const errorStep of step.onError) {
+        await executeStep(errorStep, ctx);
+      }
+    }
+  }
+}
 
 // ../../node_modules/.pnpm/marked@17.0.1/node_modules/marked/lib/marked.esm.js
 function L() {
@@ -2589,14 +2855,14 @@ function createDOMPurify() {
     DocumentFragment,
     HTMLTemplateElement,
     Node: Node2,
-    Element,
+    Element: Element2,
     NodeFilter,
     NamedNodeMap = window2.NamedNodeMap || window2.MozNamedAttrMap,
     HTMLFormElement,
     DOMParser,
     trustedTypes
   } = window2;
-  const ElementPrototype = Element.prototype;
+  const ElementPrototype = Element2.prototype;
   const cloneNode = lookupGetter(ElementPrototype, "cloneNode");
   const remove = lookupGetter(ElementPrototype, "remove");
   const getNextSibling = lookupGetter(ElementPrototype, "nextSibling");
@@ -3050,7 +3316,7 @@ function createDOMPurify() {
       _forceRemove(currentNode);
       return true;
     }
-    if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {
+    if (currentNode instanceof Element2 && !_checkValidNamespace(currentNode)) {
       _forceRemove(currentNode);
       return true;
     }
@@ -13146,6 +13412,188 @@ function isSvgTag(tag) {
 function isEventHandler(value) {
   return typeof value === "object" && value !== null && "event" in value && "action" in value;
 }
+function debounce(fn, wait, ctx) {
+  let timeoutId = null;
+  const debouncedFn = (event) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      fn(event);
+    }, wait);
+  };
+  ctx.cleanups?.push(() => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  });
+  return debouncedFn;
+}
+function throttle(fn, wait, ctx) {
+  let lastTime = 0;
+  let timeoutId = null;
+  let lastEvent = null;
+  const throttledFn = (event) => {
+    const now = Date.now();
+    const remaining = wait - (now - lastTime);
+    if (remaining <= 0) {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      lastTime = now;
+      fn(event);
+    } else {
+      lastEvent = event;
+      if (timeoutId === null) {
+        timeoutId = setTimeout(() => {
+          timeoutId = null;
+          lastTime = Date.now();
+          if (lastEvent) {
+            fn(lastEvent);
+            lastEvent = null;
+          }
+        }, remaining);
+      }
+    }
+  };
+  ctx.cleanups?.push(() => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  });
+  return throttledFn;
+}
+function createEventCallback(handler, ctx) {
+  return async (event) => {
+    const action = ctx.actions[handler.action];
+    if (!action) return;
+    const eventLocals = {};
+    const target = event.target;
+    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
+      eventLocals["value"] = target.value;
+      if (target instanceof HTMLInputElement && target.type === "checkbox") {
+        eventLocals["checked"] = target.checked;
+      }
+      if (target instanceof HTMLInputElement && target.type === "file") {
+        eventLocals["files"] = Array.from(target.files || []).map((f) => ({
+          name: f.name,
+          size: f.size,
+          type: f.type,
+          _file: f
+        }));
+      }
+    }
+    if (event instanceof KeyboardEvent) {
+      eventLocals["key"] = event.key;
+      eventLocals["code"] = event.code;
+      eventLocals["ctrlKey"] = event.ctrlKey;
+      eventLocals["shiftKey"] = event.shiftKey;
+      eventLocals["altKey"] = event.altKey;
+      eventLocals["metaKey"] = event.metaKey;
+    }
+    if (event instanceof MouseEvent) {
+      eventLocals["clientX"] = event.clientX;
+      eventLocals["clientY"] = event.clientY;
+      eventLocals["pageX"] = event.pageX;
+      eventLocals["pageY"] = event.pageY;
+      eventLocals["button"] = event.button;
+    }
+    const touchEvent = event;
+    if (touchEvent.touches && touchEvent.changedTouches) {
+      eventLocals["touches"] = Array.from(touchEvent.touches).map((t) => ({
+        clientX: t.clientX,
+        clientY: t.clientY,
+        pageX: t.pageX,
+        pageY: t.pageY
+      }));
+      eventLocals["changedTouches"] = Array.from(touchEvent.changedTouches).map((t) => ({
+        clientX: t.clientX,
+        clientY: t.clientY,
+        pageX: t.pageX,
+        pageY: t.pageY
+      }));
+    }
+    if (handler.event === "scroll" && event.target instanceof Element) {
+      eventLocals["scrollTop"] = event.target.scrollTop;
+      eventLocals["scrollLeft"] = event.target.scrollLeft;
+    }
+    let payload = void 0;
+    if (handler.payload) {
+      payload = evaluatePayload(handler.payload, {
+        state: ctx.state,
+        locals: { ...ctx.locals, ...eventLocals },
+        ...ctx.imports && { imports: ctx.imports }
+      });
+    }
+    const actionCtx = {
+      state: ctx.state,
+      actions: ctx.actions,
+      locals: { ...ctx.locals, ...eventLocals, payload },
+      eventPayload: payload
+    };
+    await executeAction(action, actionCtx);
+  };
+}
+function wrapWithDebounceThrottle(callback, handler, ctx) {
+  if (handler.debounce !== void 0 && handler.debounce >= 0) {
+    return debounce(callback, handler.debounce, ctx);
+  }
+  if (handler.throttle !== void 0 && handler.throttle >= 0) {
+    return throttle(callback, handler.throttle, ctx);
+  }
+  return callback;
+}
+function setupIntersectionObserver(el, handler, ctx) {
+  const options = {};
+  if (handler.options?.threshold !== void 0) {
+    options.threshold = handler.options.threshold;
+  }
+  if (handler.options?.rootMargin !== void 0) {
+    options.rootMargin = handler.options.rootMargin;
+  }
+  let hasTriggered = false;
+  const observer = new IntersectionObserver((entries2) => {
+    for (const entry of entries2) {
+      if (entry.target !== el) continue;
+      if (handler.options?.once && hasTriggered) {
+        continue;
+      }
+      const action = ctx.actions[handler.action];
+      if (!action) continue;
+      const intersectLocals = {
+        isIntersecting: entry.isIntersecting,
+        intersectionRatio: entry.intersectionRatio
+      };
+      let payload = void 0;
+      if (handler.payload) {
+        payload = evaluatePayload(handler.payload, {
+          state: ctx.state,
+          locals: { ...ctx.locals, ...intersectLocals },
+          ...ctx.imports && { imports: ctx.imports }
+        });
+      }
+      const actionCtx = {
+        state: ctx.state,
+        actions: ctx.actions,
+        locals: { ...ctx.locals, ...intersectLocals, payload },
+        eventPayload: payload
+      };
+      executeAction(action, actionCtx);
+      if (handler.options?.once) {
+        hasTriggered = true;
+        observer.unobserve(el);
+      }
+    }
+  }, options);
+  observer.observe(el);
+  ctx.cleanups?.push(() => {
+    observer.disconnect();
+  });
+}
 function render(node, ctx) {
   switch (node.kind) {
     case "element":
@@ -13160,6 +13608,10 @@ function render(node, ctx) {
       return renderMarkdown(node, ctx);
     case "code":
       return renderCode(node, ctx);
+    case "portal":
+      return renderPortal(node, ctx);
+    case "localState":
+      return renderLocalState(node, ctx);
     default:
       throw new Error("Unknown node kind");
   }
@@ -13180,34 +13632,13 @@ function renderElement(node, ctx) {
       if (isEventHandler(propValue)) {
         const handler = propValue;
         const eventName = handler.event;
-        el.addEventListener(eventName, async (event) => {
-          const action = ctx.actions[handler.action];
-          if (action) {
-            const eventLocals = {};
-            const target = event.target;
-            if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
-              eventLocals["value"] = target.value;
-              if (target instanceof HTMLInputElement && target.type === "checkbox") {
-                eventLocals["checked"] = target.checked;
-              }
-            }
-            let payload = void 0;
-            if (handler.payload) {
-              payload = evaluatePayload(handler.payload, {
-                state: ctx.state,
-                locals: { ...ctx.locals, ...eventLocals },
-                ...ctx.imports && { imports: ctx.imports }
-              });
-            }
-            const actionCtx = {
-              state: ctx.state,
-              actions: ctx.actions,
-              locals: { ...ctx.locals, ...eventLocals, payload },
-              eventPayload: payload
-            };
-            await executeAction(action, actionCtx);
-          }
-        });
+        if (eventName === "intersect") {
+          setupIntersectionObserver(el, handler, ctx);
+        } else {
+          const eventCallback = createEventCallback(handler, ctx);
+          const wrappedCallback = wrapWithDebounceThrottle(eventCallback, handler, ctx);
+          el.addEventListener(eventName, wrappedCallback);
+        }
       } else {
         const cleanup = createEffect(() => {
           const value = evaluate(propValue, { state: ctx.state, locals: ctx.locals, ...ctx.imports && { imports: ctx.imports } });
@@ -13547,6 +13978,135 @@ function renderCode(node, ctx) {
   ctx.cleanups?.push(cleanup);
   return container;
 }
+function renderPortal(node, ctx) {
+  let targetElement = null;
+  if (node.target === "body") {
+    targetElement = document.body;
+  } else if (node.target === "head") {
+    targetElement = document.head;
+  } else {
+    targetElement = document.querySelector(node.target);
+  }
+  if (!targetElement) {
+    return document.createComment("portal:target-not-found");
+  }
+  const portalContainer = document.createElement("div");
+  portalContainer.setAttribute("data-portal", "true");
+  portalContainer.style.display = "contents";
+  const portalCleanups = [];
+  const portalCtx = {
+    ...ctx,
+    cleanups: portalCleanups
+  };
+  for (const child of node.children) {
+    const childNode = render(child, portalCtx);
+    portalContainer.appendChild(childNode);
+  }
+  targetElement.appendChild(portalContainer);
+  ctx.cleanups?.push(() => {
+    for (const cleanup of portalCleanups) {
+      cleanup();
+    }
+    if (portalContainer.parentNode) {
+      portalContainer.parentNode.removeChild(portalContainer);
+    }
+  });
+  return document.createComment("portal");
+}
+function createLocalStateStore(stateDefs) {
+  const signals = {};
+  for (const [name, def] of Object.entries(stateDefs)) {
+    signals[name] = createSignal(def.initial);
+  }
+  return {
+    get(name) {
+      return signals[name]?.get();
+    },
+    set(name, value) {
+      signals[name]?.set(value);
+    },
+    signals
+  };
+}
+function createLocalsWithLocalState(baseLocals, localStore) {
+  return new Proxy(baseLocals, {
+    get(target, prop) {
+      if (prop in localStore.signals) {
+        return localStore.get(prop);
+      }
+      return target[prop];
+    },
+    has(target, prop) {
+      if (prop in localStore.signals) return true;
+      return prop in target;
+    },
+    ownKeys(target) {
+      const keys = Reflect.ownKeys(target);
+      for (const key2 of Object.keys(localStore.signals)) {
+        if (!keys.includes(key2)) keys.push(key2);
+      }
+      return keys;
+    },
+    getOwnPropertyDescriptor(target, prop) {
+      if (prop in localStore.signals) {
+        return { enumerable: true, configurable: true };
+      }
+      return Reflect.getOwnPropertyDescriptor(target, prop);
+    }
+  });
+}
+function createStateWithLocalState(globalState, localStore) {
+  return {
+    get(name) {
+      if (name in localStore.signals) {
+        return localStore.get(name);
+      }
+      return globalState.get(name);
+    },
+    set(name, value) {
+      globalState.set(name, value);
+    },
+    setPath(name, path, value) {
+      globalState.setPath(name, path, value);
+    },
+    subscribe(name, fn) {
+      if (name in localStore.signals) {
+        return localStore.signals[name].subscribe(fn);
+      }
+      return globalState.subscribe(name, fn);
+    },
+    getPath(name, path) {
+      return globalState.getPath(name, path);
+    },
+    subscribeToPath(name, path, fn) {
+      return globalState.subscribeToPath(name, path, fn);
+    }
+  };
+}
+function renderLocalState(node, ctx) {
+  const localStore = createLocalStateStore(node.state);
+  const mergedLocals = createLocalsWithLocalState(ctx.locals, localStore);
+  const mergedState = createStateWithLocalState(ctx.state, localStore);
+  const mergedActions = { ...ctx.actions };
+  for (const [name, action] of Object.entries(node.actions)) {
+    mergedActions[name] = {
+      ...action,
+      _isLocalAction: true,
+      _localStore: localStore
+    };
+  }
+  const childCtx = {
+    ...ctx,
+    state: mergedState,
+    locals: mergedLocals,
+    actions: mergedActions,
+    localState: {
+      store: localStore,
+      actions: node.actions
+    }
+  };
+  return render(node.child, childCtx);
+}
 
 // src/app.ts
 function createApp(program, mount) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/runtime",
-  "version": "0.12.2",
+  "version": "0.14.0",
   "description": "Runtime DOM renderer for Constela UI framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,8 +18,8 @@
     "dompurify": "^3.3.1",
     "marked": "^17.0.1",
     "shiki": "^3.20.0",
-    "@constela/compiler": "0.9.1",
-    "@constela/core": "0.9.1"
+    "@constela/compiler": "0.11.0",
+    "@constela/core": "0.11.0"
   },
   "devDependencies": {
     "@types/dompurify": "^3.2.0",
@@ -29,7 +29,7 @@
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "vitest": "^2.0.0",
-    "@constela/server": "5.0.1"
+    "@constela/server": "7.0.0"
   },
   "engines": {
     "node": ">=20.0.0"