@servlyadmin/runtime-core 0.1.6 → 0.1.8

package/dist/index.cjs

@@ -20,6 +20,167 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/tailwind.ts
+var tailwind_exports = {};
+__export(tailwind_exports, {
+  DEFAULT_SERVLY_TAILWIND_CONFIG: () => DEFAULT_SERVLY_TAILWIND_CONFIG,
+  addCustomStyles: () => addCustomStyles,
+  default: () => tailwind_default,
+  getTailwind: () => getTailwind,
+  initServlyTailwind: () => initServlyTailwind,
+  injectTailwind: () => injectTailwind,
+  isTailwindLoaded: () => isTailwindLoaded,
+  removeCustomStyles: () => removeCustomStyles,
+  removeTailwind: () => removeTailwind,
+  updateTailwindConfig: () => updateTailwindConfig
+});
+function injectTailwind(config = {}) {
+  return new Promise((resolve, reject) => {
+    if (tailwindInjected && tailwindScript) {
+      resolve();
+      return;
+    }
+    if (typeof document === "undefined") {
+      resolve();
+      return;
+    }
+    if (window.tailwind) {
+      tailwindInjected = true;
+      config.onReady?.();
+      resolve();
+      return;
+    }
+    const {
+      cdnUrl = DEFAULT_TAILWIND_CDN,
+      config: tailwindConfig,
+      plugins = [],
+      usePlayCdn = false,
+      onReady,
+      onError
+    } = config;
+    const script = document.createElement("script");
+    script.src = usePlayCdn ? `${cdnUrl}?plugins=forms,typography,aspect-ratio` : cdnUrl;
+    script.async = true;
+    script.onload = () => {
+      tailwindInjected = true;
+      tailwindScript = script;
+      if (tailwindConfig && window.tailwind) {
+        window.tailwind.config = tailwindConfig;
+      }
+      onReady?.();
+      resolve();
+    };
+    script.onerror = (event) => {
+      const error = new Error(`Failed to load Tailwind CSS from ${cdnUrl}`);
+      onError?.(error);
+      reject(error);
+    };
+    document.head.appendChild(script);
+  });
+}
+function removeTailwind() {
+  if (tailwindScript && tailwindScript.parentNode) {
+    tailwindScript.parentNode.removeChild(tailwindScript);
+    tailwindScript = null;
+    tailwindInjected = false;
+    delete window.tailwind;
+  }
+}
+function isTailwindLoaded() {
+  return tailwindInjected || !!window.tailwind;
+}
+function getTailwind() {
+  return window.tailwind;
+}
+function updateTailwindConfig(config) {
+  if (window.tailwind) {
+    window.tailwind.config = {
+      ...window.tailwind.config,
+      ...config
+    };
+  }
+}
+function addCustomStyles(css, id) {
+  if (typeof document === "undefined") {
+    throw new Error("addCustomStyles can only be used in browser environment");
+  }
+  const styleId = id || `servly-custom-styles-${Date.now()}`;
+  let existingStyle = document.getElementById(styleId);
+  if (existingStyle) {
+    existingStyle.textContent = css;
+    return existingStyle;
+  }
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = css;
+  document.head.appendChild(style);
+  return style;
+}
+function removeCustomStyles(id) {
+  if (typeof document === "undefined") return;
+  const style = document.getElementById(id);
+  if (style && style.parentNode) {
+    style.parentNode.removeChild(style);
+  }
+}
+async function initServlyTailwind(customConfig) {
+  const config = customConfig ? { ...DEFAULT_SERVLY_TAILWIND_CONFIG, ...customConfig } : DEFAULT_SERVLY_TAILWIND_CONFIG;
+  await injectTailwind({
+    config,
+    usePlayCdn: true
+  });
+}
+var DEFAULT_TAILWIND_CDN, tailwindInjected, tailwindScript, DEFAULT_SERVLY_TAILWIND_CONFIG, tailwind_default;
+var init_tailwind = __esm({
+  "src/tailwind.ts"() {
+    "use strict";
+    DEFAULT_TAILWIND_CDN = "https://cdn.tailwindcss.com";
+    tailwindInjected = false;
+    tailwindScript = null;
+    DEFAULT_SERVLY_TAILWIND_CONFIG = {
+      theme: {
+        extend: {
+          // Add any Servly-specific theme extensions here
+        }
+      },
+      // Safelist common dynamic classes
+      safelist: [
+        // Spacing
+        { pattern: /^(p|m|gap)-/ },
+        // Sizing
+        { pattern: /^(w|h|min-w|min-h|max-w|max-h)-/ },
+        // Flexbox
+        { pattern: /^(flex|justify|items|self)-/ },
+        // Grid
+        { pattern: /^(grid|col|row)-/ },
+        // Colors
+        { pattern: /^(bg|text|border|ring)-/ },
+        // Typography
+        { pattern: /^(font|text|leading|tracking)-/ },
+        // Borders
+        { pattern: /^(rounded|border)-/ },
+        // Effects
+        { pattern: /^(shadow|opacity|blur)-/ },
+        // Transforms
+        { pattern: /^(scale|rotate|translate|skew)-/ },
+        // Transitions
+        { pattern: /^(transition|duration|ease|delay)-/ }
+      ]
+    };
+    tailwind_default = {
+      injectTailwind,
+      removeTailwind,
+      isTailwindLoaded,
+      getTailwind,
+      updateTailwindConfig,
+      addCustomStyles,
+      removeCustomStyles,
+      initServlyTailwind,
+      DEFAULT_SERVLY_TAILWIND_CONFIG
+    };
+  }
+});
+
 // src/registry.ts
 var registry_exports = {};
 __export(registry_exports, {
@@ -214,9 +375,16 @@ __export(index_exports, {
   AnalyticsCollector: () => AnalyticsCollector,
   DEFAULT_CACHE_CONFIG: () => DEFAULT_CACHE_CONFIG,
   DEFAULT_RETRY_CONFIG: () => DEFAULT_RETRY_CONFIG,
+  DEFAULT_SERVLY_TAILWIND_CONFIG: () => DEFAULT_SERVLY_TAILWIND_CONFIG,
+  EVENT_HANDLERS: () => EVENT_HANDLERS,
+  EventSystem: () => EventSystem,
   LongTaskObserver: () => LongTaskObserver,
   MemorySampler: () => MemorySampler,
+  OverrideSystem: () => OverrideSystem,
   SessionManager: () => SessionManager,
+  StateManager: () => StateManager,
+  addClass: () => addClass,
+  addCustomStyles: () => addCustomStyles,
   analytics: () => analytics,
   applyStyles: () => applyStyles,
   batchFetchComponents: () => batchFetchComponents,
@@ -230,13 +398,20 @@ __export(index_exports, {
   clearMemoryCache: () => clearMemoryCache,
   clearStyles: () => clearStyles,
   collectAllDependencies: () => collectAllDependencies,
+  collectAllViewDependencies: () => collectAllViewDependencies,
   compareVersions: () => compareVersions,
   configureAnalytics: () => configureAnalytics,
   createRegistry: () => createRegistry,
+  createServlyRenderer: () => createServlyRenderer,
+  createViewsMap: () => createViewsMap,
+  deepMerge: () => deepMerge,
+  deleteValueByPath: () => deleteValueByPath,
   detectCircularDependencies: () => detectCircularDependencies,
   extractBindingKeys: () => extractBindingKeys,
   extractDependencies: () => extractDependencies,
   extractDependenciesFromCode: () => extractDependenciesFromCode,
+  extractOverrideDependencies: () => extractOverrideDependencies,
+  extractReferencedViewIds: () => extractReferencedViewIds,
   fetchComponent: () => fetchComponent,
   fetchComponentWithDependencies: () => fetchComponentWithDependencies,
   formatStyleValue: () => formatStyleValue,
@@ -244,25 +419,52 @@ __export(index_exports, {
   generateTestCases: () => generateTestCases,
   getAnalytics: () => getAnalytics,
   getCacheKey: () => getCacheKey,
+  getCleanupOverrides: () => getCleanupOverrides,
   getDependencyTree: () => getDependencyTree,
+  getEventSystem: () => getEventSystem,
   getFromCache: () => getFromCache,
+  getLocalStorage: () => getLocalStorage,
   getLongTaskObserver: () => getLongTaskObserver,
   getMemoryCacheSize: () => getMemoryCacheSize,
   getMemorySampler: () => getMemorySampler,
+  getMountOverrides: () => getMountOverrides,
+  getOverrideSystem: () => getOverrideSystem,
   getRegistryUrl: () => getRegistryUrl,
   getSessionManager: () => getSessionManager,
+  getSessionStorage: () => getSessionStorage,
+  getTailwind: () => getTailwind,
+  getUrlInfo: () => getUrlInfo,
+  getValueByPath: () => getValueByPath,
+  goBack: () => goBack,
+  goForward: () => goForward,
+  hasClass: () => hasClass,
+  hasDependencyOverrides: () => hasDependencyOverrides,
+  hasOverrides: () => hasOverrides,
   hasTemplateSyntax: () => hasTemplateSyntax,
+  initServlyTailwind: () => initServlyTailwind,
+  injectTailwind: () => injectTailwind,
   invalidateCache: () => invalidateCache,
   isComponentAvailable: () => isComponentAvailable,
+  isTailwindLoaded: () => isTailwindLoaded,
   isValidSpecifier: () => isValidSpecifier,
+  navigateTo: () => navigateTo,
   parseVersion: () => parseVersion,
   prefetchComponents: () => prefetchComponents,
   processStyles: () => processStyles,
+  removeClass: () => removeClass,
+  removeCustomStyles: () => removeCustomStyles,
+  removeLocalStorage: () => removeLocalStorage,
+  removeSessionStorage: () => removeSessionStorage,
+  removeTailwind: () => removeTailwind,
   render: () => render,
   renderDynamicList: () => renderDynamicList,
+  renderInShadow: () => renderInShadow,
+  renderNode: () => renderNode,
   resetAnalytics: () => resetAnalytics,
+  resetEventSystem: () => resetEventSystem,
   resetLongTaskObserver: () => resetLongTaskObserver,
   resetMemorySampler: () => resetMemorySampler,
+  resetOverrideSystem: () => resetOverrideSystem,
   resetSessionManager: () => resetSessionManager,
   resolveBindingPath: () => resolveBindingPath,
   resolveTemplate: () => resolveTemplate,
@@ -273,8 +475,15 @@ __export(index_exports, {
   runTestCase: () => runTestCase,
   satisfiesVersion: () => satisfiesVersion,
   setInCache: () => setInCache,
+  setLocalStorage: () => setLocalStorage,
   setRegistryUrl: () => setRegistryUrl,
+  setSessionStorage: () => setSessionStorage,
+  setValueByPath: () => setValueByPath,
+  toDomEventName: () => toDomEventName,
+  toReactEventName: () => toReactEventName,
+  toggleClass: () => toggleClass,
   updateStyles: () => updateStyles,
+  updateTailwindConfig: () => updateTailwindConfig,
   validateAssertion: () => validateAssertion,
   validateProps: () => validateProps
 });
@@ -799,16 +1008,95 @@ var BINDING_SOURCES = [
   "input",
   "currentItem",
   "localStore",
+  "localStorage",
+  "sessionStorage",
   "config",
   "element",
   "self",
   "params",
-  "query"
+  "query",
+  "window",
+  "bindings",
+  "binding",
+  "boundInputs",
+  "parent"
 ];
 var TEMPLATE_REGEX = /\{\{([^}]+)\}\}/g;
 function hasTemplateSyntax(value) {
   return typeof value === "string" && value.includes("{{") && value.includes("}}");
 }
+function getLocalStorageValue(key) {
+  if (typeof localStorage === "undefined") return void 0;
+  try {
+    const stored = localStorage.getItem(key);
+    if (stored === null) return void 0;
+    try {
+      return JSON.parse(stored);
+    } catch {
+      return stored;
+    }
+  } catch {
+    return void 0;
+  }
+}
+function getSessionStorageValue(key) {
+  if (typeof sessionStorage === "undefined") return void 0;
+  try {
+    const stored = sessionStorage.getItem(key);
+    if (stored === null) return void 0;
+    try {
+      return JSON.parse(stored);
+    } catch {
+      return stored;
+    }
+  } catch {
+    return void 0;
+  }
+}
+function getWindowInfo() {
+  if (typeof window === "undefined") return {};
+  const searchParams = {};
+  try {
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    urlSearchParams.forEach((value, key) => {
+      searchParams[key] = value;
+    });
+  } catch {
+  }
+  return {
+    href: window.location.href,
+    pathname: window.location.pathname,
+    search: window.location.search,
+    hash: window.location.hash,
+    origin: window.location.origin,
+    protocol: window.location.protocol,
+    host: window.location.host,
+    hostname: window.location.hostname,
+    port: window.location.port,
+    searchParams,
+    params: searchParams,
+    innerWidth: window.innerWidth,
+    innerHeight: window.innerHeight,
+    screenWidth: window.screen?.width,
+    screenHeight: window.screen?.height
+  };
+}
+function navigatePath(obj, parts) {
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === void 0) return void 0;
+    const arrayMatch = part.match(/^(\w+)\[(\d+)\]$/);
+    if (arrayMatch) {
+      const [, propName, indexStr] = arrayMatch;
+      current = current[propName];
+      if (!Array.isArray(current)) return void 0;
+      current = current[parseInt(indexStr, 10)];
+    } else {
+      current = current[part];
+    }
+  }
+  return current;
+}
 function resolveBindingPath(path, context) {
   const trimmed = path.trim();
   const parts = trimmed.split(".");
@@ -816,17 +1104,70 @@ function resolveBindingPath(path, context) {
     return void 0;
   }
   const prefix = parts[0].toLowerCase();
+  if (prefix === "localstore" || prefix === "localstorage") {
+    if (parts.length === 1) {
+      const all = {};
+      if (typeof localStorage !== "undefined") {
+        for (let i = 0; i < localStorage.length; i++) {
+          const key2 = localStorage.key(i);
+          if (key2) {
+            all[key2] = getLocalStorageValue(key2);
+          }
+        }
+      }
+      return all;
+    }
+    const key = parts[1];
+    const value = getLocalStorageValue(key);
+    if (parts.length === 2) return value;
+    return navigatePath(value, parts.slice(2));
+  }
+  if (prefix === "sessionstorage") {
+    if (parts.length === 1) {
+      const all = {};
+      if (typeof sessionStorage !== "undefined") {
+        for (let i = 0; i < sessionStorage.length; i++) {
+          const key2 = sessionStorage.key(i);
+          if (key2) {
+            all[key2] = getSessionStorageValue(key2);
+          }
+        }
+      }
+      return all;
+    }
+    const key = parts[1];
+    const value = getSessionStorageValue(key);
+    if (parts.length === 2) return value;
+    return navigatePath(value, parts.slice(2));
+  }
+  if (prefix === "window" || prefix === "url") {
+    const windowInfo = getWindowInfo();
+    if (parts.length === 1) return windowInfo;
+    return navigatePath(windowInfo, parts.slice(1));
+  }
+  if (prefix === "params" || prefix === "query") {
+    const windowInfo = getWindowInfo();
+    const params = windowInfo.searchParams || {};
+    if (parts.length === 1) return params;
+    return navigatePath(params, parts.slice(1));
+  }
   let source;
   let startIndex = 0;
-  if (prefix === "props" || prefix === "input") {
+  if (prefix === "props" || prefix === "input" || prefix === "bindings" || prefix === "binding" || prefix === "boundinputs" || prefix === "parent") {
     source = context.props;
     startIndex = 1;
   } else if (prefix === "state" || prefix === "appstate") {
     source = context.state;
     startIndex = 1;
-  } else if (prefix === "context") {
+  } else if (prefix === "context" || prefix === "config") {
     source = context.context;
     startIndex = 1;
+  } else if (prefix === "currentitem") {
+    source = context.props;
+    startIndex = 0;
+  } else if (prefix === "self" || prefix === "element") {
+    source = context.state;
+    startIndex = 1;
   } else if (BINDING_SOURCES.includes(prefix)) {
     source = context.props;
     startIndex = 1;
@@ -837,41 +1178,49 @@ function resolveBindingPath(path, context) {
   if (!source) {
     return void 0;
   }
-  let value = source;
-  for (let i = startIndex; i < parts.length; i++) {
-    if (value === null || value === void 0) {
-      return void 0;
-    }
-    value = value[parts[i]];
-  }
-  return value;
+  return navigatePath(source, parts.slice(startIndex));
 }
 function resolveExpression(expression, context) {
   const trimmed = expression.trim();
-  const defaultMatch = trimmed.match(/^(.+?)\|\|(.+)$/);
-  if (defaultMatch) {
-    const mainValue = resolveExpression(defaultMatch[1].trim(), context);
-    if (mainValue !== void 0 && mainValue !== null && mainValue !== "") {
-      return mainValue;
-    }
-    const defaultVal = defaultMatch[2].trim();
-    if (defaultVal.startsWith('"') && defaultVal.endsWith('"') || defaultVal.startsWith("'") && defaultVal.endsWith("'")) {
-      return defaultVal.slice(1, -1);
-    }
-    if (!isNaN(Number(defaultVal))) {
-      return Number(defaultVal);
+  const comparisonOperators = ["===", "!==", "==", "!=", ">=", "<=", ">", "<"];
+  for (const op of comparisonOperators) {
+    if (trimmed.includes(op)) {
+      const [left, right] = trimmed.split(op, 2);
+      const leftVal = resolveExpressionValue(left.trim(), context);
+      const rightVal = resolveExpressionValue(right.trim(), context);
+      switch (op) {
+        case "===":
+          return leftVal === rightVal;
+        case "!==":
+          return leftVal !== rightVal;
+        case "==":
+          return leftVal == rightVal;
+        case "!=":
+          return leftVal != rightVal;
+        case ">":
+          return leftVal > rightVal;
+        case "<":
+          return leftVal < rightVal;
+        case ">=":
+          return leftVal >= rightVal;
+        case "<=":
+          return leftVal <= rightVal;
+      }
     }
-    if (defaultVal === "true") return true;
-    if (defaultVal === "false") return false;
-    return resolveExpression(defaultVal, context);
   }
-  const ternaryMatch = trimmed.match(/^(.+?)\s*\?\s*(.+?)\s*:\s*(.+)$/);
-  if (ternaryMatch) {
-    const condition = resolveExpression(ternaryMatch[1].trim(), context);
-    if (condition) {
-      return resolveTernaryValue(ternaryMatch[2].trim(), context);
+  if (trimmed.startsWith("!") && !trimmed.startsWith("!=")) {
+    const innerValue = resolveExpression(trimmed.slice(1).trim(), context);
+    return !innerValue;
+  }
+  if (trimmed.includes("||")) {
+    const parts = trimmed.split("||");
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i].trim();
+      const value = resolveExpressionValue(part, context);
+      if (value || i === parts.length - 1) {
+        return value;
+      }
     }
-    return resolveTernaryValue(ternaryMatch[3].trim(), context);
   }
   if (trimmed.includes("&&")) {
     const parts = trimmed.split("&&");
@@ -881,6 +1230,28 @@ function resolveExpression(expression, context) {
     }
     return resolveExpression(parts[parts.length - 1].trim(), context);
   }
+  const ternaryMatch = trimmed.match(/^(.+?)\s*\?\s*(.+?)\s*:\s*(.+)$/);
+  if (ternaryMatch) {
+    const condition = resolveExpression(ternaryMatch[1].trim(), context);
+    if (condition) {
+      return resolveTernaryValue(ternaryMatch[2].trim(), context);
+    }
+    return resolveTernaryValue(ternaryMatch[3].trim(), context);
+  }
+  return resolveExpressionValue(trimmed, context);
+}
+function resolveExpressionValue(value, context) {
+  const trimmed = value.trim();
+  if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'")) {
+    return trimmed.slice(1, -1);
+  }
+  if (!isNaN(Number(trimmed)) && trimmed !== "") {
+    return Number(trimmed);
+  }
+  if (trimmed === "true") return true;
+  if (trimmed === "false") return false;
+  if (trimmed === "null") return null;
+  if (trimmed === "undefined") return void 0;
   return resolveBindingPath(trimmed, context);
 }
 function resolveTernaryValue(value, context) {
@@ -912,7 +1283,7 @@ function resolveTemplate(template, context, componentId) {
       }
       return String(value);
     }
-    return template.replace(TEMPLATE_REGEX, (match, expression) => {
+    return template.replace(TEMPLATE_REGEX, (_match, expression) => {
       const value = resolveExpression(expression, context);
       if (value === void 0 || value === null) {
         return "";
@@ -1342,131 +1713,1180 @@ function resetLongTaskObserver() {
   longTaskObserverInstance = null;
 }
 
-// src/renderer.ts
-var COMPONENT_TO_TAG = {
-  container: "div",
-  text: "span",
-  button: "button",
-  input: "input",
-  image: "img",
-  link: "a",
-  form: "form",
-  label: "label",
-  textarea: "textarea",
-  select: "select",
-  option: "option",
-  list: "ul",
-  listItem: "li",
-  heading: "h1",
-  paragraph: "p",
-  section: "section",
-  article: "article",
-  header: "header",
-  footer: "footer",
-  nav: "nav",
-  aside: "aside",
-  main: "main",
-  span: "span",
-  div: "div"
-};
-var SELF_CLOSING_TAGS = /* @__PURE__ */ new Set([
-  "input",
-  "img",
-  "br",
-  "hr",
-  "area",
-  "base",
-  "col",
-  "embed",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-]);
-function getElementTag(element) {
-  const config = element.configuration;
-  if (config?.tag) {
-    return config.tag;
+// src/stateManager.ts
+var StateManager = class {
+  constructor(config = {}) {
+    this.state = {};
+    this.listeners = /* @__PURE__ */ new Set();
+    this.config = config;
+    this.state = config.initialState || {};
+    if (config.persistToLocalStorage && typeof localStorage !== "undefined") {
+      this.loadFromLocalStorage();
+    }
+    if (config.onStateChange) {
+      this.listeners.add(config.onStateChange);
+    }
   }
-  if (element.componentId && COMPONENT_TO_TAG[element.componentId]) {
-    return COMPONENT_TO_TAG[element.componentId];
+  /**
+   * Get value by path from state
+   */
+  get(path) {
+    return getValueByPath(this.state, path);
   }
-  if (element.isGroup) {
-    return "div";
+  /**
+   * Get the entire state object
+   */
+  getState() {
+    return { ...this.state };
   }
-  return "div";
-}
-function isSelfClosing(tag) {
-  return SELF_CLOSING_TAGS.has(tag.toLowerCase());
-}
-function buildTree(elements) {
-  const tree = /* @__PURE__ */ new Map();
-  for (const element of elements) {
-    const parentId = element.parent || null;
-    if (!tree.has(parentId)) {
-      tree.set(parentId, []);
-    }
-    tree.get(parentId).push(element);
+  /**
+   * Set a value in state
+   */
+  set(key, value, elementId) {
+    const previousValue = this.get(key);
+    setValueByPath(this.state, key, value);
+    this.notifyChange({
+      key,
+      value,
+      previousValue,
+      operation: "set",
+      elementId,
+      timestamp: Date.now()
+    });
   }
-  return tree;
-}
-function getTextContent(element, context) {
-  const config = element.configuration;
-  if (config?.dynamicText) {
-    return resolveTemplate(config.dynamicText, context);
+  /**
+   * Merge an object into state at the given path
+   */
+  merge(key, value, deep = false, elementId) {
+    const previousValue = this.get(key);
+    const currentValue = previousValue || {};
+    const newValue = deep ? deepMerge(currentValue, value) : { ...currentValue, ...value };
+    setValueByPath(this.state, key, newValue);
+    this.notifyChange({
+      key,
+      value: newValue,
+      previousValue,
+      operation: "merge",
+      elementId,
+      timestamp: Date.now()
+    });
   }
-  if (config?.text) {
-    if (hasTemplateSyntax(config.text)) {
-      return resolveTemplate(config.text, context);
-    }
-    return config.text;
+  /**
+   * Delete a key from state
+   */
+  delete(key, elementId) {
+    const previousValue = this.get(key);
+    deleteValueByPath(this.state, key);
+    this.notifyChange({
+      key,
+      value: void 0,
+      previousValue,
+      operation: "delete",
+      elementId,
+      timestamp: Date.now()
+    });
   }
-  return "";
-}
-function applyAttributes(domElement, element, context) {
-  const config = element.configuration || {};
-  const attributeMap = [
-    { key: "id", attr: "id" },
-    { key: "src", dynamicKey: "dynamicSrc", attr: "src" },
-    { key: "alt", attr: "alt" },
-    { key: "href", dynamicKey: "dynamicHref", attr: "href" },
-    { key: "target", attr: "target" },
-    { key: "placeholder", attr: "placeholder" },
-    { key: "type", attr: "type" },
-    { key: "name", attr: "name" },
-    { key: "value", dynamicKey: "dynamicValue", attr: "value" }
-  ];
-  for (const { key, dynamicKey, attr } of attributeMap) {
-    const dynamicValue = dynamicKey ? config[dynamicKey] : void 0;
-    if (dynamicValue !== void 0 && dynamicValue !== null && dynamicValue !== "") {
-      const resolved = resolveTemplate(String(dynamicValue), context);
-      if (resolved) {
-        domElement.setAttribute(attr, resolved);
+  /**
+   * Append to an array in state
+   */
+  append(key, value, elementId) {
+    const previousValue = this.get(key);
+    const currentArray = Array.isArray(previousValue) ? [...previousValue] : [];
+    currentArray.push(value);
+    setValueByPath(this.state, key, currentArray);
+    this.notifyChange({
+      key,
+      value: currentArray,
+      previousValue,
+      operation: "append",
+      elementId,
+      timestamp: Date.now()
+    });
+  }
+  /**
+   * Prepend to an array in state
+   */
+  prepend(key, value, elementId) {
+    const previousValue = this.get(key);
+    const currentArray = Array.isArray(previousValue) ? [...previousValue] : [];
+    currentArray.unshift(value);
+    setValueByPath(this.state, key, currentArray);
+    this.notifyChange({
+      key,
+      value: currentArray,
+      previousValue,
+      operation: "prepend",
+      elementId,
+      timestamp: Date.now()
+    });
+  }
+  /**
+   * Toggle a boolean value in state
+   */
+  toggle(key, elementId) {
+    const previousValue = this.get(key);
+    const newValue = !previousValue;
+    setValueByPath(this.state, key, newValue);
+    this.notifyChange({
+      key,
+      value: newValue,
+      previousValue,
+      operation: "toggle",
+      elementId,
+      timestamp: Date.now()
+    });
+  }
+  /**
+   * Subscribe to state changes
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  /**
+   * Notify all listeners of a state change
+   */
+  notifyChange(event) {
+    if (this.config.persistToLocalStorage) {
+      this.saveToLocalStorage();
+    }
+    for (const listener of this.listeners) {
+      try {
+        listener(event);
+      } catch (error) {
+        console.error("State change listener error:", error);
       }
-      continue;
     }
-    const staticValue = config[key];
-    if (staticValue !== void 0 && staticValue !== null && staticValue !== "") {
-      const resolved = hasTemplateSyntax(String(staticValue)) ? resolveTemplate(String(staticValue), context) : String(staticValue);
-      if (resolved) {
-        domElement.setAttribute(attr, resolved);
+  }
+  /**
+   * Load state from localStorage
+   */
+  loadFromLocalStorage() {
+    try {
+      const prefix = this.config.localStoragePrefix || "servly_state_";
+      const stored = localStorage.getItem(`${prefix}state`);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        this.state = { ...this.state, ...parsed };
       }
+    } catch (error) {
+      console.warn("Failed to load state from localStorage:", error);
     }
   }
-  if (config.disabled) domElement.setAttribute("disabled", "");
-  if (config.required) domElement.setAttribute("required", "");
-  if (config.readOnly) domElement.setAttribute("readonly", "");
-  for (const [key, value] of Object.entries(config)) {
-    if (key.startsWith("data-") && value !== void 0) {
-      const resolved = hasTemplateSyntax(String(value)) ? resolveTemplate(String(value), context) : String(value);
-      domElement.setAttribute(key, resolved);
+  /**
+   * Save state to localStorage
+   */
+  saveToLocalStorage() {
+    try {
+      const prefix = this.config.localStoragePrefix || "servly_state_";
+      localStorage.setItem(`${prefix}state`, JSON.stringify(this.state));
+    } catch (error) {
+      console.warn("Failed to save state to localStorage:", error);
     }
   }
-  for (const [key, value] of Object.entries(config)) {
-    if (key.startsWith("aria-") && value !== void 0) {
-      const resolved = hasTemplateSyntax(String(value)) ? resolveTemplate(String(value), context) : String(value);
+  /**
+   * Clear all state
+   */
+  clear() {
+    const previousState = { ...this.state };
+    this.state = {};
+    if (this.config.persistToLocalStorage) {
+      try {
+        const prefix = this.config.localStoragePrefix || "servly_state_";
+        localStorage.removeItem(`${prefix}state`);
+      } catch (error) {
+        console.warn("Failed to clear localStorage:", error);
+      }
+    }
+    this.notifyChange({
+      key: "",
+      value: {},
+      previousValue: previousState,
+      operation: "delete",
+      timestamp: Date.now()
+    });
+  }
+};
+function getValueByPath(obj, path) {
+  if (!obj || !path) return void 0;
+  const parts = path.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === void 0) return void 0;
+    const arrayMatch = part.match(/^(\w+)\[(\d+)\]$/);
+    if (arrayMatch) {
+      const [, propName, indexStr] = arrayMatch;
+      current = current[propName];
+      if (!Array.isArray(current)) return void 0;
+      current = current[parseInt(indexStr, 10)];
+    } else {
+      current = current[part];
+    }
+  }
+  return current;
+}
+function setValueByPath(obj, path, value) {
+  if (!obj || !path) return;
+  const parts = path.split(".");
+  let current = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i];
+    const arrayMatch2 = part.match(/^(\w+)\[(\d+)\]$/);
+    if (arrayMatch2) {
+      const [, propName, indexStr] = arrayMatch2;
+      if (!current[propName]) current[propName] = [];
+      const index = parseInt(indexStr, 10);
+      if (!current[propName][index]) current[propName][index] = {};
+      current = current[propName][index];
+    } else {
+      if (!current[part]) current[part] = {};
+      current = current[part];
+    }
+  }
+  const lastPart = parts[parts.length - 1];
+  const arrayMatch = lastPart.match(/^(\w+)\[(\d+)\]$/);
+  if (arrayMatch) {
+    const [, propName, indexStr] = arrayMatch;
+    if (!current[propName]) current[propName] = [];
+    current[propName][parseInt(indexStr, 10)] = value;
+  } else {
+    current[lastPart] = value;
+  }
+}
+function deleteValueByPath(obj, path) {
+  if (!obj || !path) return;
+  const parts = path.split(".");
+  let current = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i];
+    if (current[part] === void 0) return;
+    current = current[part];
+  }
+  const lastPart = parts[parts.length - 1];
+  delete current[lastPart];
+}
+function deepMerge(target, source) {
+  if (!source) return target;
+  if (!target) return source;
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key]) && target[key] && typeof target[key] === "object" && !Array.isArray(target[key])) {
+      result[key] = deepMerge(target[key], source[key]);
+    } else {
+      result[key] = source[key];
+    }
+  }
+  return result;
+}
+function addClass(currentClasses, classToAdd) {
+  const classes = currentClasses.split(/\s+/).filter(Boolean);
+  if (!classes.includes(classToAdd)) {
+    classes.push(classToAdd);
+  }
+  return classes.join(" ");
+}
+function removeClass(currentClasses, classToRemove) {
+  return currentClasses.split(/\s+/).filter((cls) => cls && cls !== classToRemove).join(" ");
+}
+function toggleClass(currentClasses, classToToggle) {
+  const classes = currentClasses.split(/\s+/).filter(Boolean);
+  const index = classes.indexOf(classToToggle);
+  if (index > -1) {
+    classes.splice(index, 1);
+  } else {
+    classes.push(classToToggle);
+  }
+  return classes.join(" ");
+}
+function hasClass(currentClasses, classToCheck) {
+  return currentClasses.split(/\s+/).includes(classToCheck);
+}
+function getLocalStorage(key, defaultValue) {
+  if (typeof localStorage === "undefined") return defaultValue;
+  try {
+    const stored = localStorage.getItem(key);
+    if (stored === null) return defaultValue;
+    return JSON.parse(stored);
+  } catch {
+    return localStorage.getItem(key) ?? defaultValue;
+  }
+}
+function setLocalStorage(key, value) {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch (error) {
+    console.warn("Failed to set localStorage:", error);
+  }
+}
+function removeLocalStorage(key) {
+  if (typeof localStorage === "undefined") return;
+  localStorage.removeItem(key);
+}
+function getSessionStorage(key, defaultValue) {
+  if (typeof sessionStorage === "undefined") return defaultValue;
+  try {
+    const stored = sessionStorage.getItem(key);
+    if (stored === null) return defaultValue;
+    return JSON.parse(stored);
+  } catch {
+    return sessionStorage.getItem(key) ?? defaultValue;
+  }
+}
+function setSessionStorage(key, value) {
+  if (typeof sessionStorage === "undefined") return;
+  try {
+    sessionStorage.setItem(key, JSON.stringify(value));
+  } catch (error) {
+    console.warn("Failed to set sessionStorage:", error);
+  }
+}
+function removeSessionStorage(key) {
+  if (typeof sessionStorage === "undefined") return;
+  sessionStorage.removeItem(key);
+}
+function navigateTo(url, options = {}) {
+  if (typeof window === "undefined") return;
+  const { replace = false, state, newTab = false } = options;
+  if (newTab) {
+    window.open(url, "_blank");
+    return;
+  }
+  if (url.startsWith("http://") || url.startsWith("https://")) {
+    if (replace) {
+      window.location.replace(url);
+    } else {
+      window.location.href = url;
+    }
+    return;
+  }
+  if (url.startsWith("#")) {
+    window.location.hash = url;
+    return;
+  }
+  if (replace) {
+    window.history.replaceState(state, "", url);
+  } else {
+    window.history.pushState(state, "", url);
+  }
+  window.dispatchEvent(new PopStateEvent("popstate", { state }));
+}
+function goBack() {
+  if (typeof window === "undefined") return;
+  window.history.back();
+}
+function goForward() {
+  if (typeof window === "undefined") return;
+  window.history.forward();
+}
+function getUrlInfo() {
+  if (typeof window === "undefined") {
+    return {
+      href: "",
+      pathname: "",
+      search: "",
+      hash: "",
+      searchParams: {}
+    };
+  }
+  const searchParams = {};
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  urlSearchParams.forEach((value, key) => {
+    searchParams[key] = value;
+  });
+  return {
+    href: window.location.href,
+    pathname: window.location.pathname,
+    search: window.location.search,
+    hash: window.location.hash,
+    searchParams
+  };
+}
+
+// src/eventSystem.ts
+var builtInPlugins = {
+  /**
+   * Set state value
+   * Mirrors: state-setState from actions.ts
+   */
+  "state-setState": (action, ctx) => {
+    const { stateConfig } = action.config || {};
+    if (!stateConfig || !ctx.stateManager) return;
+    const config = typeof stateConfig === "string" ? JSON.parse(stateConfig) : stateConfig;
+    const { key, value, operation = "set" } = config;
+    if (!key) return;
+    switch (operation) {
+      case "set":
+        ctx.stateManager.set(key, value, ctx.elementId);
+        break;
+      case "merge":
+        ctx.stateManager.merge(key, value, false, ctx.elementId);
+        break;
+      case "deepMerge":
+        ctx.stateManager.merge(key, value, true, ctx.elementId);
+        break;
+      case "toggle":
+        ctx.stateManager.toggle(key, ctx.elementId);
+        break;
+      case "append":
+        ctx.stateManager.append(key, value, ctx.elementId);
+        break;
+      case "prepend":
+        ctx.stateManager.prepend(key, value, ctx.elementId);
+        break;
+      case "delete":
+        ctx.stateManager.delete(key, ctx.elementId);
+        break;
+      case "increment":
+        const currentVal = ctx.stateManager.get(key) || 0;
+        ctx.stateManager.set(key, currentVal + (value || 1), ctx.elementId);
+        break;
+      case "decrement":
+        const currVal = ctx.stateManager.get(key) || 0;
+        ctx.stateManager.set(key, currVal - (value || 1), ctx.elementId);
+        break;
+    }
+    return { success: true, key, operation };
+  },
+  /**
+   * Navigate to URL
+   * Mirrors: navigateTo from actions.ts
+   */
+  "navigateTo": (action, ctx) => {
+    const { url, replace, newTab, state } = action.config || {};
+    if (!url) return;
+    navigateTo(url, { replace, newTab, state });
+    return { success: true, url };
+  },
+  /**
+   * Set localStorage value
+   */
+  "localStorage-set": (action, ctx) => {
+    const { key, value } = action.config || {};
+    if (!key) return;
+    setLocalStorage(key, value);
+    return { success: true, key };
+  },
+  /**
+   * Get localStorage value
+   */
+  "localStorage-get": (action, ctx) => {
+    const { key, defaultValue } = action.config || {};
+    if (!key) return defaultValue;
+    return getLocalStorage(key, defaultValue);
+  },
+  /**
+   * Remove localStorage value
+   */
+  "localStorage-remove": (action, ctx) => {
+    const { key } = action.config || {};
+    if (!key) return;
+    if (typeof localStorage !== "undefined") {
+      localStorage.removeItem(key);
+    }
+    return { success: true, key };
+  },
+  /**
+   * Set sessionStorage value
+   */
+  "sessionStorage-set": (action, ctx) => {
+    const { key, value } = action.config || {};
+    if (!key) return;
+    setSessionStorage(key, value);
+    return { success: true, key };
+  },
+  /**
+   * Get sessionStorage value
+   */
+  "sessionStorage-get": (action, ctx) => {
+    const { key, defaultValue } = action.config || {};
+    if (!key) return defaultValue;
+    return getSessionStorage(key, defaultValue);
+  },
+  /**
+   * Console log (for debugging)
+   */
+  "console-log": (action, ctx) => {
+    const { message, data } = action.config || {};
+    console.log("[Servly]", message, data);
+    return { success: true };
+  },
+  /**
+   * Show alert
+   */
+  "alert": (action, ctx) => {
+    const { message } = action.config || {};
+    if (typeof alert !== "undefined") {
+      alert(message);
+    }
+    return { success: true };
+  },
+  /**
+   * Copy to clipboard
+   */
+  "clipboard-copy": async (action, ctx) => {
+    const { text } = action.config || {};
+    if (!text || typeof navigator === "undefined") return { success: false };
+    try {
+      await navigator.clipboard.writeText(text);
+      return { success: true };
+    } catch (error) {
+      return { success: false, error };
+    }
+  },
+  /**
+   * Scroll to element
+   */
+  "scrollTo": (action, ctx) => {
+    const { selector, behavior = "smooth", block = "start" } = action.config || {};
+    if (!selector || typeof document === "undefined") return;
+    const element = document.querySelector(selector);
+    if (element) {
+      element.scrollIntoView({ behavior, block });
+      return { success: true };
+    }
+    return { success: false, error: "Element not found" };
+  },
+  /**
+   * Focus element
+   */
+  "focus": (action, ctx) => {
+    const { selector } = action.config || {};
+    if (!selector || typeof document === "undefined") return;
+    const element = document.querySelector(selector);
+    if (element && typeof element.focus === "function") {
+      element.focus();
+      return { success: true };
+    }
+    return { success: false, error: "Element not found" };
+  },
+  /**
+   * Blur element
+   */
+  "blur": (action, ctx) => {
+    const { selector } = action.config || {};
+    if (!selector || typeof document === "undefined") return;
+    const element = document.querySelector(selector);
+    if (element && typeof element.blur === "function") {
+      element.blur();
+      return { success: true };
+    }
+    return { success: false, error: "Element not found" };
+  },
+  /**
+   * Add class to element
+   */
+  "addClass": (action, ctx) => {
+    const { selector, className } = action.config || {};
+    if (!selector || !className || typeof document === "undefined") return;
+    const element = document.querySelector(selector);
+    if (element) {
+      element.classList.add(className);
+      return { success: true };
+    }
+    return { success: false, error: "Element not found" };
+  },
+  /**
+   * Remove class from element
+   */
+  "removeClass": (action, ctx) => {
+    const { selector, className } = action.config || {};
+    if (!selector || !className || typeof document === "undefined") return;
+    const element = document.querySelector(selector);
+    if (element) {
+      element.classList.remove(className);
+      return { success: true };
+    }
+    return { success: false, error: "Element not found" };
+  },
+  /**
+   * Toggle class on element
+   */
+  "toggleClass": (action, ctx) => {
+    const { selector, className } = action.config || {};
+    if (!selector || !className || typeof document === "undefined") return;
+    const element = document.querySelector(selector);
+    if (element) {
+      element.classList.toggle(className);
+      return { success: true };
+    }
+    return { success: false, error: "Element not found" };
+  },
+  /**
+   * Set element attribute
+   */
+  "setAttribute": (action, ctx) => {
+    const { selector, attribute, value } = action.config || {};
+    if (!selector || !attribute || typeof document === "undefined") return;
+    const element = document.querySelector(selector);
+    if (element) {
+      element.setAttribute(attribute, value);
+      return { success: true };
+    }
+    return { success: false, error: "Element not found" };
+  },
+  /**
+   * Remove element attribute
+   */
+  "removeAttribute": (action, ctx) => {
+    const { selector, attribute } = action.config || {};
+    if (!selector || !attribute || typeof document === "undefined") return;
+    const element = document.querySelector(selector);
+    if (element) {
+      element.removeAttribute(attribute);
+      return { success: true };
+    }
+    return { success: false, error: "Element not found" };
+  },
+  /**
+   * Dispatch custom event
+   */
+  "dispatchEvent": (action, ctx) => {
+    const { selector, eventName, detail } = action.config || {};
+    if (!eventName || typeof document === "undefined") return;
+    const target = selector ? document.querySelector(selector) : document;
+    if (target) {
+      const event = new CustomEvent(eventName, { detail, bubbles: true });
+      target.dispatchEvent(event);
+      return { success: true };
+    }
+    return { success: false, error: "Target not found" };
+  },
+  /**
+   * Delay execution
+   */
+  "delay": async (action, ctx) => {
+    const { ms = 0 } = action.config || {};
+    await new Promise((resolve) => setTimeout(resolve, ms));
+    return { success: true };
+  },
+  /**
+   * Conditional execution
+   */
+  "condition": (action, ctx) => {
+    const { condition, thenActions, elseActions } = action.config || {};
+    return { condition, thenActions, elseActions };
+  }
+};
+var EventSystem = class {
+  constructor(config = {}) {
+    this.debounceTimers = /* @__PURE__ */ new Map();
+    this.throttleTimers = /* @__PURE__ */ new Map();
+    this.config = config;
+    this.pluginExecutors = {
+      ...builtInPlugins,
+      ...config.pluginExecutors
+    };
+  }
+  /**
+   * Register a custom plugin executor
+   */
+  registerPlugin(key, executor) {
+    this.pluginExecutors[key] = executor;
+  }
+  /**
+   * Create an event handler from Servly plugin format
+   */
+  createHandler(elementId, handlerConfig, context, options = {}) {
+    return (event) => {
+      if (handlerConfig.preventDefault || options.preventDefault) {
+        event.preventDefault();
+      }
+      if (handlerConfig.stopPropagation || options.stopPropagation) {
+        event.stopPropagation();
+      }
+      if (this.config.onEvent) {
+        this.config.onEvent(event.type, elementId, event);
+      }
+      if (handlerConfig.plugins && handlerConfig.plugins.length > 0) {
+        this.executePlugins(handlerConfig.plugins, {
+          event,
+          elementId,
+          context,
+          stateManager: this.config.stateManager
+        });
+      }
+    };
+  }
+  /**
+   * Execute a sequence of plugin actions
+   */
+  async executePlugins(plugins, eventContext) {
+    const results = [];
+    for (const action of plugins) {
+      try {
+        const executor = this.pluginExecutors[action.key];
+        if (executor) {
+          const result = await executor(action, eventContext);
+          results.push(result);
+          if (this.config.onPluginExecute) {
+            this.config.onPluginExecute(action, result);
+          }
+        } else {
+          console.warn(`[EventSystem] Unknown plugin: ${action.key}`);
+          results.push({ error: `Unknown plugin: ${action.key}` });
+        }
+      } catch (error) {
+        console.error(`[EventSystem] Plugin error (${action.key}):`, error);
+        results.push({ error });
+      }
+    }
+    return results;
+  }
+  /**
+   * Create a debounced event handler
+   */
+  createDebouncedHandler(elementId, handler, delay) {
+    const key = `${elementId}-debounce`;
+    return (event) => {
+      const existingTimer = this.debounceTimers.get(key);
+      if (existingTimer) {
+        clearTimeout(existingTimer);
+      }
+      const timer = setTimeout(() => {
+        handler(event);
+        this.debounceTimers.delete(key);
+      }, delay);
+      this.debounceTimers.set(key, timer);
+    };
+  }
+  /**
+   * Create a throttled event handler
+   */
+  createThrottledHandler(elementId, handler, delay) {
+    const key = `${elementId}-throttle`;
+    return (event) => {
+      if (this.throttleTimers.get(key)) {
+        return;
+      }
+      handler(event);
+      this.throttleTimers.set(key, true);
+      setTimeout(() => {
+        this.throttleTimers.delete(key);
+      }, delay);
+    };
+  }
+  /**
+   * Clean up all timers
+   */
+  destroy() {
+    for (const timer of this.debounceTimers.values()) {
+      clearTimeout(timer);
+    }
+    this.debounceTimers.clear();
+    this.throttleTimers.clear();
+  }
+};
+var EVENT_HANDLERS = {
+  onClick: "click",
+  onDoubleClick: "dblclick",
+  onMouseDown: "mousedown",
+  onMouseUp: "mouseup",
+  onMouseEnter: "mouseenter",
+  onMouseLeave: "mouseleave",
+  onMouseMove: "mousemove",
+  onMouseOver: "mouseover",
+  onMouseOut: "mouseout",
+  onKeyDown: "keydown",
+  onKeyUp: "keyup",
+  onKeyPress: "keypress",
+  onFocus: "focus",
+  onBlur: "blur",
+  onChange: "change",
+  onInput: "input",
+  onSubmit: "submit",
+  onReset: "reset",
+  onScroll: "scroll",
+  onWheel: "wheel",
+  onDragStart: "dragstart",
+  onDrag: "drag",
+  onDragEnd: "dragend",
+  onDragEnter: "dragenter",
+  onDragLeave: "dragleave",
+  onDragOver: "dragover",
+  onDrop: "drop",
+  onTouchStart: "touchstart",
+  onTouchMove: "touchmove",
+  onTouchEnd: "touchend",
+  onTouchCancel: "touchcancel",
+  onContextMenu: "contextmenu",
+  onCopy: "copy",
+  onCut: "cut",
+  onPaste: "paste",
+  onLoad: "load",
+  onError: "error",
+  onAnimationStart: "animationstart",
+  onAnimationEnd: "animationend",
+  onAnimationIteration: "animationiteration",
+  onTransitionEnd: "transitionend"
+};
+function toDomEventName(reactEventName) {
+  return EVENT_HANDLERS[reactEventName] || reactEventName.replace(/^on/, "").toLowerCase();
+}
+function toReactEventName(domEventName) {
+  const entry = Object.entries(EVENT_HANDLERS).find(([, dom]) => dom === domEventName);
+  return entry ? entry[0] : `on${domEventName.charAt(0).toUpperCase()}${domEventName.slice(1)}`;
+}
+var defaultEventSystem = null;
+function getEventSystem(config) {
+  if (!defaultEventSystem || config) {
+    defaultEventSystem = new EventSystem(config);
+  }
+  return defaultEventSystem;
+}
+function resetEventSystem() {
+  if (defaultEventSystem) {
+    defaultEventSystem.destroy();
+    defaultEventSystem = null;
+  }
+}
+
+// src/overrides.ts
+var OverrideSystem = class {
+  constructor(config = {}) {
+    this.elementStates = /* @__PURE__ */ new Map();
+    this.watchIntervals = /* @__PURE__ */ new Map();
+    this.config = config;
+  }
+  /**
+   * Get overrides from an element
+   */
+  getOverrides(element) {
+    const rawOverrides = element.configuration?._overrides_;
+    if (!rawOverrides) return [];
+    if (Array.isArray(rawOverrides)) {
+      return rawOverrides.filter((o) => o && typeof o === "object");
+    }
+    if (typeof rawOverrides === "object") {
+      console.warn("[OverrideSystem] Legacy object override format detected, ignoring");
+      return [];
+    }
+    return [];
+  }
+  /**
+   * Initialize overrides for an element (called on mount)
+   */
+  async initializeElement(element, context) {
+    const elementId = element.i;
+    const overrides = this.getOverrides(element);
+    if (overrides.length === 0) return;
+    const state = {
+      previousValues: /* @__PURE__ */ new Map(),
+      initialized: false,
+      abortController: new AbortController()
+    };
+    this.elementStates.set(elementId, state);
+    const mountOverrides = overrides.filter((o) => !o.isCleanUp);
+    overrides.forEach((override, index) => {
+      if (override.isCleanUp) return;
+      if (!override.dependencies || override.dependencies.length === 0) return;
+      const initialValues = override.dependencies.map(
+        (dep) => resolveTemplate(dep, context)
+      );
+      state.previousValues.set(index, initialValues);
+    });
+    await this.processOverrides(elementId, mountOverrides, context, "onMount");
+    state.initialized = true;
+  }
+  /**
+   * Check and process dependency changes for an element
+   */
+  async checkDependencies(element, context) {
+    const elementId = element.i;
+    const overrides = this.getOverrides(element);
+    const state = this.elementStates.get(elementId);
+    if (!state || !state.initialized) return;
+    const overridesToTrigger = [];
+    overrides.forEach((override, index) => {
+      if (override.isCleanUp) return;
+      if (!override.dependencies || override.dependencies.length === 0) return;
+      const currentValues = override.dependencies.map(
+        (dep) => resolveTemplate(dep, context)
+      );
+      const previousValues = state.previousValues.get(index) || [];
+      let hasChanged = false;
+      if (previousValues.length !== currentValues.length) {
+        hasChanged = true;
+      } else {
+        for (let i = 0; i < currentValues.length; i++) {
+          if (JSON.stringify(previousValues[i]) !== JSON.stringify(currentValues[i])) {
+            hasChanged = true;
+            break;
+          }
+        }
+      }
+      if (hasChanged) {
+        overridesToTrigger.push(override);
+        state.previousValues.set(index, currentValues);
+        if (this.config.onDependencyChange) {
+          this.config.onDependencyChange(elementId, override.dependencies, currentValues);
+        }
+      }
+    });
+    if (overridesToTrigger.length > 0) {
+      await this.processOverrides(elementId, overridesToTrigger, context, "onDependencyChange");
+    }
+  }
+  /**
+   * Cleanup overrides for an element (called on unmount)
+   */
+  async cleanupElement(element, context) {
+    const elementId = element.i;
+    const overrides = this.getOverrides(element);
+    const state = this.elementStates.get(elementId);
+    if (state?.abortController) {
+      state.abortController.abort();
+    }
+    this.stopWatching(elementId);
+    const cleanupOverrides = overrides.filter((o) => o.isCleanUp);
+    if (cleanupOverrides.length > 0) {
+      await this.processOverrides(elementId, cleanupOverrides, context, "onUnmount");
+    }
+    this.elementStates.delete(elementId);
+  }
+  /**
+   * Process a list of overrides
+   */
+  async processOverrides(elementId, overrides, context, eventType) {
+    if (!overrides || overrides.length === 0) return;
+    const validOverrides = overrides.filter((o) => o.plugins && o.plugins.length > 0);
+    if (validOverrides.length === 0) return;
+    const results = await Promise.allSettled(
+      validOverrides.map(async (override) => {
+        if (this.config.onOverrideTrigger) {
+          this.config.onOverrideTrigger(elementId, override, eventType);
+        }
+        if (this.config.eventSystem && override.plugins) {
+          const eventContext = {
+            event: new CustomEvent(eventType),
+            elementId,
+            context,
+            stateManager: this.config.stateManager
+          };
+          return this.config.eventSystem.executePlugins(override.plugins, eventContext);
+        }
+        return null;
+      })
+    );
+    results.forEach((result, index) => {
+      if (result.status === "rejected") {
+        console.error(`[OverrideSystem] Override ${index} failed:`, result.reason);
+      }
+    });
+  }
+  /**
+   * Start watching an element for dependency changes
+   */
+  startWatching(element, context, intervalMs = 100) {
+    const elementId = element.i;
+    this.stopWatching(elementId);
+    const overrides = this.getOverrides(element);
+    const hasDependencies = overrides.some(
+      (o) => !o.isCleanUp && o.dependencies && o.dependencies.length > 0
+    );
+    if (!hasDependencies) return;
+    const interval = setInterval(() => {
+      this.checkDependencies(element, context);
+    }, intervalMs);
+    this.watchIntervals.set(elementId, interval);
+  }
+  /**
+   * Stop watching an element
+   */
+  stopWatching(elementId) {
+    const interval = this.watchIntervals.get(elementId);
+    if (interval) {
+      clearInterval(interval);
+      this.watchIntervals.delete(elementId);
+    }
+  }
+  /**
+   * Destroy the override system
+   */
+  destroy() {
+    for (const interval of this.watchIntervals.values()) {
+      clearInterval(interval);
+    }
+    this.watchIntervals.clear();
+    for (const state of this.elementStates.values()) {
+      if (state.abortController) {
+        state.abortController.abort();
+      }
+    }
+    this.elementStates.clear();
+  }
+};
+function extractOverrideDependencies(element) {
+  const overrides = element.configuration?._overrides_;
+  if (!Array.isArray(overrides)) return [];
+  const dependencies = [];
+  for (const override of overrides) {
+    if (override?.dependencies && Array.isArray(override.dependencies)) {
+      dependencies.push(...override.dependencies);
+    }
+  }
+  return [...new Set(dependencies)];
+}
+function hasOverrides(element) {
+  const overrides = element.configuration?._overrides_;
+  return Array.isArray(overrides) && overrides.length > 0;
+}
+function hasDependencyOverrides(element) {
+  const overrides = element.configuration?._overrides_;
+  if (!Array.isArray(overrides)) return false;
+  return overrides.some(
+    (o) => !o?.isCleanUp && o?.dependencies && o.dependencies.length > 0
+  );
+}
+function getMountOverrides(element) {
+  const overrides = element.configuration?._overrides_;
+  if (!Array.isArray(overrides)) return [];
+  return overrides.filter((o) => o && !o.isCleanUp);
+}
+function getCleanupOverrides(element) {
+  const overrides = element.configuration?._overrides_;
+  if (!Array.isArray(overrides)) return [];
+  return overrides.filter((o) => o && o.isCleanUp);
+}
+var defaultOverrideSystem = null;
+function getOverrideSystem(config) {
+  if (!defaultOverrideSystem || config) {
+    defaultOverrideSystem = new OverrideSystem(config);
+  }
+  return defaultOverrideSystem;
+}
+function resetOverrideSystem() {
+  if (defaultOverrideSystem) {
+    defaultOverrideSystem.destroy();
+    defaultOverrideSystem = null;
+  }
+}
+
+// src/renderer.ts
+var COMPONENT_TO_TAG = {
+  container: "div",
+  text: "span",
+  button: "button",
+  input: "input",
+  image: "img",
+  link: "a",
+  form: "form",
+  label: "label",
+  textarea: "textarea",
+  select: "select",
+  option: "option",
+  list: "ul",
+  listItem: "li",
+  heading: "h1",
+  paragraph: "p",
+  section: "section",
+  article: "article",
+  header: "header",
+  footer: "footer",
+  nav: "nav",
+  aside: "aside",
+  main: "main",
+  span: "span",
+  div: "div"
+};
+var SELF_CLOSING_TAGS = /* @__PURE__ */ new Set([
+  "input",
+  "img",
+  "br",
+  "hr",
+  "area",
+  "base",
+  "col",
+  "embed",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function getElementTag(element) {
+  const config = element.configuration;
+  if (config?.tag) {
+    return config.tag;
+  }
+  if (element.componentId && COMPONENT_TO_TAG[element.componentId]) {
+    return COMPONENT_TO_TAG[element.componentId];
+  }
+  if (element.isGroup) {
+    return "div";
+  }
+  return "div";
+}
+function isSelfClosing(tag) {
+  return SELF_CLOSING_TAGS.has(tag.toLowerCase());
+}
+function buildTree(elements) {
+  const tree = /* @__PURE__ */ new Map();
+  for (const element of elements) {
+    const parentId = element.parent || null;
+    if (!tree.has(parentId)) {
+      tree.set(parentId, []);
+    }
+    tree.get(parentId).push(element);
+  }
+  return tree;
+}
+function getTextContent(element, context) {
+  const config = element.configuration;
+  if (config?.dynamicText) {
+    return resolveTemplate(config.dynamicText, context);
+  }
+  if (config?.text) {
+    if (hasTemplateSyntax(config.text)) {
+      return resolveTemplate(config.text, context);
+    }
+    return config.text;
+  }
+  return "";
+}
+function applyAttributes(domElement, element, context) {
+  const config = element.configuration || {};
+  const attributeMap = [
+    { key: "id", attr: "id" },
+    { key: "src", dynamicKey: "dynamicSrc", attr: "src" },
+    { key: "alt", attr: "alt" },
+    { key: "href", dynamicKey: "dynamicHref", attr: "href" },
+    { key: "target", attr: "target" },
+    { key: "placeholder", attr: "placeholder" },
+    { key: "type", attr: "type" },
+    { key: "name", attr: "name" },
+    { key: "value", dynamicKey: "dynamicValue", attr: "value" }
+  ];
+  for (const { key, dynamicKey, attr } of attributeMap) {
+    const dynamicValue = dynamicKey ? config[dynamicKey] : void 0;
+    if (dynamicValue !== void 0 && dynamicValue !== null && dynamicValue !== "") {
+      const resolved = resolveTemplate(String(dynamicValue), context);
+      if (resolved) {
+        domElement.setAttribute(attr, resolved);
+      }
+      continue;
+    }
+    const staticValue = config[key];
+    if (staticValue !== void 0 && staticValue !== null && staticValue !== "") {
+      const resolved = hasTemplateSyntax(String(staticValue)) ? resolveTemplate(String(staticValue), context) : String(staticValue);
+      if (resolved) {
+        domElement.setAttribute(attr, resolved);
+      }
+    }
+  }
+  if (config.disabled) domElement.setAttribute("disabled", "");
+  if (config.required) domElement.setAttribute("required", "");
+  if (config.readOnly) domElement.setAttribute("readonly", "");
+  for (const [key, value] of Object.entries(config)) {
+    if (key.startsWith("data-") && value !== void 0) {
+      const resolved = hasTemplateSyntax(String(value)) ? resolveTemplate(String(value), context) : String(value);
+      domElement.setAttribute(key, resolved);
+    }
+  }
+  for (const [key, value] of Object.entries(config)) {
+    if (key.startsWith("aria-") && value !== void 0) {
+      const resolved = hasTemplateSyntax(String(value)) ? resolveTemplate(String(value), context) : String(value);
       domElement.setAttribute(key, resolved);
     }
   }
@@ -1491,7 +2911,7 @@ function resolveFunctionBinding(binding, context) {
   }
   return void 0;
 }
-function attachEventHandlers(domElement, element, eventHandlers, context, elementState, isRootElement = false) {
+function attachEventHandlers(domElement, element, eventHandlers, context, elementState, isRootElement = false, state) {
   const elementId = element.i;
   if (eventHandlers && eventHandlers[elementId]) {
     const handlers = eventHandlers[elementId];
@@ -1501,6 +2921,28 @@ function attachEventHandlers(domElement, element, eventHandlers, context, elemen
       domElement.addEventListener(domEventName, handler);
     }
   }
+  const config = element.configuration || {};
+  for (const eventPropName of Object.keys(EVENT_HANDLERS)) {
+    const handlerConfig = config[eventPropName];
+    if (handlerConfig && handlerConfig.plugins && handlerConfig.plugins.length > 0) {
+      const domEventName = toDomEventName(eventPropName);
+      if (!elementState.eventListeners.has(domEventName)) {
+        if (state?.eventSystem) {
+          const handler = state.eventSystem.createHandler(elementId, handlerConfig, context);
+          elementState.eventListeners.set(domEventName, handler);
+          domElement.addEventListener(domEventName, handler);
+        } else {
+          const handler = (e) => {
+            if (handlerConfig.preventDefault) e.preventDefault();
+            if (handlerConfig.stopPropagation) e.stopPropagation();
+            console.log(`[Servly] Event ${eventPropName} triggered on ${elementId}`, handlerConfig.plugins);
+          };
+          elementState.eventListeners.set(domEventName, handler);
+          domElement.addEventListener(domEventName, handler);
+        }
+      }
+    }
+  }
   const bindings = element.configuration?.bindings?.inputs;
   if (bindings) {
     for (const [propName, binding] of Object.entries(bindings)) {
@@ -1535,10 +2977,16 @@ function detachEventHandlers(elementState) {
   }
   elementState.eventListeners.clear();
 }
-function createElement(element, context, eventHandlers, isRootElement = false) {
+function createElement(element, context, eventHandlers, isRootElement = false, state) {
   const tag = getElementTag(element);
   const domElement = document.createElement(tag);
   domElement.setAttribute("data-servly-id", element.i);
+  const slotName = element.slotName || element.configuration?.slotName;
+  if (element.componentId === "slot" || slotName) {
+    const name = slotName || element.i;
+    domElement.setAttribute("data-slot", name);
+    domElement.setAttribute("data-servly-slot", "true");
+  }
   const styles = buildElementStyles(element, context);
   applyStyles(domElement, styles);
   const className = buildClassName(element, context);
@@ -1561,7 +3009,7 @@ function createElement(element, context, eventHandlers, isRootElement = false) {
     textContent,
     eventListeners: /* @__PURE__ */ new Map()
   };
-  attachEventHandlers(domElement, element, eventHandlers, context, elementState, isRootElement);
+  attachEventHandlers(domElement, element, eventHandlers, context, elementState, isRootElement, state);
   return elementState;
 }
 var globalRenderingStack = /* @__PURE__ */ new Set();
@@ -1622,8 +3070,81 @@ function renderComponentRef(element, container, context, state) {
     globalRenderingStack.delete(refId);
   }
 }
+function extractViewId(binding) {
+  if (!binding) return null;
+  if (typeof binding === "string") return binding;
+  if (binding.source === "static" && typeof binding.value === "string") return binding.value;
+  if (binding.source === "node" && binding.binding?.viewId) return binding.binding.viewId;
+  if (binding.source === "view" && typeof binding.value === "string") return binding.value;
+  if (binding.viewId) return binding.viewId;
+  if (binding.type === "view" && binding.viewId) return binding.viewId;
+  return null;
+}
+function resolveComponentViewInputs(bindings, context, parentInputs) {
+  if (!bindings) return {};
+  const resolved = {};
+  for (const [key, binding] of Object.entries(bindings)) {
+    if (!binding) continue;
+    const source = (binding.source || "").toLowerCase();
+    switch (source) {
+      case "static":
+      case "value":
+      case "constant":
+        resolved[key] = binding.value;
+        break;
+      case "state":
+        if (binding.path && context.state) {
+          resolved[key] = getValueByPath2(context.state, binding.path);
+        }
+        break;
+      case "props":
+      case "parent":
+      case "input":
+        if (binding.path) {
+          const source2 = parentInputs || context.props;
+          const resolvedValue = getValueByPath2(source2, binding.path);
+          if (resolvedValue !== void 0) {
+            resolved[key] = resolvedValue;
+          } else {
+            resolved[key] = binding.value;
+          }
+        } else {
+          resolved[key] = binding.value;
+        }
+        break;
+      case "node":
+        if (binding.binding?.viewId) {
+          resolved[key] = binding.binding.viewId;
+        } else if (binding.binding) {
+          resolved[key] = binding.binding;
+        } else {
+          resolved[key] = binding.value;
+        }
+        break;
+      default:
+        resolved[key] = binding.value;
+    }
+  }
+  return resolved;
+}
+function getValueByPath2(obj, path) {
+  if (!obj || !path) return void 0;
+  const parts = path.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === void 0) return void 0;
+    current = current[part];
+  }
+  return current;
+}
 function renderElement(element, tree, context, eventHandlers, elementStates, state, isRootElement = false) {
-  const elementState = createElement(element, context, eventHandlers, isRootElement);
+  if (element.isComponentView) {
+    return renderComponentViewElement(element, tree, context, eventHandlers, elementStates, state, isRootElement);
+  }
+  if (element.componentId === "slot") {
+    return renderSlotElement(element, tree, context, eventHandlers, elementStates, state, isRootElement);
+  }
+  const elementState = createElement(element, context, eventHandlers, isRootElement, state);
   elementStates.set(element.i, elementState);
   const config = element.configuration;
   if (config?.componentViewRef) {
@@ -1640,8 +3161,147 @@ function renderElement(element, tree, context, eventHandlers, elementStates, sta
   }
   return elementState.domElement;
 }
+function renderComponentViewElement(element, tree, context, eventHandlers, elementStates, state, isRootElement) {
+  const componentViewId = `${element.componentId}-${element.i}`;
+  if (globalRenderingStack.has(componentViewId)) {
+    const placeholder = document.createElement("div");
+    placeholder.className = "border-2 border-red-500 border-dashed p-4 bg-red-50";
+    placeholder.innerHTML = `<p class="text-red-600 text-sm">Recursive component: ${element.componentId}</p>`;
+    return placeholder;
+  }
+  let viewLayout;
+  if (state.views?.has(element.componentId)) {
+    const view = state.views.get(element.componentId);
+    viewLayout = view?.layout;
+  }
+  if (!viewLayout && state.componentRegistry) {
+    const component = state.componentRegistry.get(element.componentId);
+    if (component) {
+      viewLayout = component.layout;
+    }
+  }
+  if (!viewLayout) {
+    const placeholder = document.createElement("div");
+    placeholder.className = "border-2 border-yellow-500 border-dashed p-4 bg-yellow-50";
+    placeholder.innerHTML = `<p class="text-yellow-600 text-sm">Component not found: ${element.componentId}</p>`;
+    return placeholder;
+  }
+  const bindings = element.configuration?.bindings?.inputs || {};
+  const resolvedInputs = resolveComponentViewInputs(bindings, context, context.props);
+  const componentContext = {
+    props: { ...context.props, ...resolvedInputs },
+    state: context.state,
+    context: context.context
+  };
+  globalRenderingStack.add(componentViewId);
+  try {
+    const wrapper = document.createElement("div");
+    wrapper.id = element.i;
+    wrapper.className = "contents";
+    const viewTree = buildTree(viewLayout);
+    const viewRoots = viewLayout.filter((el) => !el.parent || el.parent === null);
+    const nestedState = {
+      ...state,
+      elements: viewLayout,
+      context: componentContext,
+      elementStates: /* @__PURE__ */ new Map(),
+      rootElement: null,
+      renderingStack: new Set(state.renderingStack)
+    };
+    nestedState.renderingStack.add(componentViewId);
+    for (const root of viewRoots) {
+      const rootElement = renderElement(
+        root,
+        viewTree,
+        componentContext,
+        eventHandlers,
+        nestedState.elementStates,
+        nestedState,
+        true
+      );
+      wrapper.appendChild(rootElement);
+    }
+    const elementState = {
+      element,
+      domElement: wrapper,
+      styles: {},
+      className: "contents",
+      textContent: "",
+      eventListeners: /* @__PURE__ */ new Map()
+    };
+    elementStates.set(element.i, elementState);
+    return wrapper;
+  } finally {
+    globalRenderingStack.delete(componentViewId);
+  }
+}
+function renderSlotElement(element, tree, context, eventHandlers, elementStates, state, isRootElement) {
+  const elementState = createElement(element, context, eventHandlers, isRootElement, state);
+  elementStates.set(element.i, elementState);
+  const bindings = element.configuration?.bindings?.inputs || {};
+  let childViewId = extractViewId(bindings.child) || extractViewId(bindings.children) || extractViewId(bindings.content);
+  if (!childViewId && context.props) {
+    childViewId = extractViewId(context.props.child) || extractViewId(context.props.children) || extractViewId(context.props.content);
+  }
+  if (childViewId && typeof childViewId === "string") {
+    let viewLayout;
+    if (state.views?.has(childViewId)) {
+      const view = state.views.get(childViewId);
+      viewLayout = view?.layout;
+    }
+    if (!viewLayout && state.componentRegistry) {
+      const component = state.componentRegistry.get(childViewId);
+      if (component) {
+        viewLayout = component.layout;
+      }
+    }
+    if (viewLayout) {
+      const viewTree = buildTree(viewLayout);
+      const viewRoots = viewLayout.filter((el) => !el.parent || el.parent === null);
+      const nestedState = {
+        ...state,
+        elements: viewLayout,
+        elementStates: /* @__PURE__ */ new Map(),
+        rootElement: null
+      };
+      for (const root of viewRoots) {
+        const rootElement = renderElement(
+          root,
+          viewTree,
+          context,
+          eventHandlers,
+          nestedState.elementStates,
+          nestedState,
+          false
+        );
+        elementState.domElement.appendChild(rootElement);
+      }
+      return elementState.domElement;
+    }
+  }
+  const children = tree.get(element.i) || [];
+  for (const child of children) {
+    const childElement = renderElement(child, tree, context, eventHandlers, elementStates, state, false);
+    elementState.domElement.appendChild(childElement);
+  }
+  return elementState.domElement;
+}
 function render(options) {
-  const { container, elements, context, eventHandlers, componentRegistry, onDependencyNeeded } = options;
+  const {
+    container,
+    elements,
+    context,
+    eventHandlers,
+    componentRegistry,
+    onDependencyNeeded,
+    views,
+    enableStateManager,
+    initialState,
+    onStateChange,
+    pluginExecutors,
+    onNavigate,
+    onApiCall
+  } = options;
   const startTime = performance.now();
   const memorySampler = getMemorySampler();
   const longTaskObserver = getLongTaskObserver();
@@ -1650,6 +3310,29 @@ function render(options) {
   const rootElements = elements.filter((el) => !el.parent || el.parent === null);
   const componentId = rootElements[0]?.componentId || "unknown";
   const version = "latest";
+  let stateManager;
+  if (enableStateManager) {
+    stateManager = new StateManager({
+      initialState: initialState || context.state,
+      onStateChange: onStateChange ? (event) => onStateChange({
+        key: event.key,
+        value: event.value,
+        previousValue: event.previousValue
+      }) : void 0
+    });
+  }
+  const eventSystem = new EventSystem({
+    stateManager,
+    pluginExecutors,
+    onNavigate,
+    onApiCall
+  });
+  const overrideSystem = new OverrideSystem({
+    eventSystem,
+    stateManager
+  });
+  const hasAnyOverrides = elements.some((el) => hasOverrides(el));
+  const hasAnyDependencyOverrides = elements.some((el) => hasDependencyOverrides(el));
   try {
     const tree = buildTree(elements);
     const state = {
@@ -1661,7 +3344,12 @@ function render(options) {
       rootElement: null,
       componentRegistry,
       onDependencyNeeded,
-      renderingStack: /* @__PURE__ */ new Set()
+      renderingStack: /* @__PURE__ */ new Set(),
+      views,
+      eventSystem,
+      stateManager,
+      overrideSystem,
+      enableOverrides: hasAnyOverrides
     };
     container.innerHTML = "";
     if (rootElements.length === 0) {
@@ -1699,6 +3387,16 @@ function render(options) {
       state.rootElement = wrapper;
       container.appendChild(wrapper);
     }
+    if (hasAnyOverrides && overrideSystem) {
+      for (const element of elements) {
+        if (hasOverrides(element)) {
+          overrideSystem.initializeElement(element, context);
+          if (hasDependencyOverrides(element)) {
+            overrideSystem.startWatching(element, context);
+          }
+        }
+      }
+    }
     const duration = performance.now() - startTime;
     const memoryAfter = memorySampler.sample();
     const longTasks = longTaskObserver.stop();
@@ -1717,6 +3415,7 @@ function render(options) {
     };
   } catch (error) {
     longTaskObserver.stop();
+    overrideSystem.destroy();
     analytics.trackError(componentId, version, error, {
       errorType: "render"
     });
@@ -1747,12 +3446,23 @@ function update(state, newContext) {
   }
 }
 function destroy(state) {
+  if (state.overrideSystem && state.enableOverrides) {
+    for (const element of state.elements) {
+      if (hasOverrides(element)) {
+        state.overrideSystem.cleanupElement(element, state.context);
+      }
+    }
+    state.overrideSystem.destroy();
+  }
   for (const elementState of state.elementStates.values()) {
     detachEventHandlers(elementState);
     if (elementState.nestedRender) {
       elementState.nestedRender.destroy();
     }
   }
+  if (state.eventSystem) {
+    state.eventSystem.destroy();
+  }
   state.elementStates.clear();
   if (state.rootElement && state.rootElement.parentNode) {
     state.rootElement.parentNode.removeChild(state.rootElement);
@@ -1819,6 +3529,200 @@ function renderDynamicList(options) {
   }
   return results;
 }
+function renderNode(options) {
+  const {
+    container,
+    elements,
+    nodeId,
+    context,
+    includeChildren = true,
+    eventHandlers,
+    componentRegistry,
+    views
+  } = options;
+  const targetNode = elements.find((el) => el.i === nodeId);
+  if (!targetNode) {
+    console.error(`renderNode: Node not found: ${nodeId}`);
+    return null;
+  }
+  if (!includeChildren) {
+    const singleElementLayout = [targetNode];
+    return render({
+      container,
+      elements: singleElementLayout,
+      context,
+      eventHandlers,
+      componentRegistry,
+      views
+    });
+  }
+  const descendantIds = /* @__PURE__ */ new Set();
+  const collectDescendants = (parentId) => {
+    for (const el of elements) {
+      if (el.parent === parentId) {
+        descendantIds.add(el.i);
+        collectDescendants(el.i);
+      }
+    }
+  };
+  descendantIds.add(nodeId);
+  collectDescendants(nodeId);
+  const nodeElements = elements.filter((el) => descendantIds.has(el.i));
+  const rootedElements = nodeElements.map(
+    (el) => el.i === nodeId ? { ...el, parent: null } : el
+  );
+  return render({
+    container,
+    elements: rootedElements,
+    context,
+    eventHandlers,
+    componentRegistry,
+    views
+  });
+}
+function renderInShadow(options) {
+  const { container, mode = "open", styles, injectTailwind: shouldInjectTailwind, ...renderOptions } = options;
+  const shadowRoot = container.attachShadow({ mode });
+  const innerContainer = document.createElement("div");
+  innerContainer.className = "servly-shadow-container";
+  shadowRoot.appendChild(innerContainer);
+  if (styles) {
+    const styleEl = document.createElement("style");
+    styleEl.textContent = styles;
+    shadowRoot.insertBefore(styleEl, innerContainer);
+  }
+  if (shouldInjectTailwind) {
+    const tailwindLink = document.createElement("link");
+    tailwindLink.rel = "stylesheet";
+    tailwindLink.href = "https://cdn.tailwindcss.com";
+    shadowRoot.insertBefore(tailwindLink, innerContainer);
+  }
+  const result = render({
+    ...renderOptions,
+    container: innerContainer
+  });
+  return {
+    ...result,
+    shadowRoot
+  };
+}
+async function createServlyRenderer(options) {
+  const {
+    container: containerOption,
+    injectTailwind: shouldInjectTailwind = true,
+    tailwindConfig,
+    initialState,
+    onStateChange,
+    onNavigate
+  } = options;
+  let container;
+  if (typeof containerOption === "string") {
+    const el = document.querySelector(containerOption);
+    if (!el) {
+      throw new Error(`Container not found: ${containerOption}`);
+    }
+    container = el;
+  } else {
+    container = containerOption;
+  }
+  if (shouldInjectTailwind) {
+    const { initServlyTailwind: initServlyTailwind2 } = await Promise.resolve().then(() => (init_tailwind(), tailwind_exports));
+    await initServlyTailwind2(tailwindConfig);
+  }
+  const activeRenders = [];
+  return {
+    render: (elements, context = { props: {} }) => {
+      const result = render({
+        container,
+        elements,
+        context,
+        enableStateManager: true,
+        initialState,
+        onStateChange,
+        onNavigate
+      });
+      activeRenders.push(result);
+      return result;
+    },
+    renderNode: (elements, nodeId, context = { props: {} }) => {
+      const result = renderNode({
+        container,
+        elements,
+        nodeId,
+        context
+      });
+      if (result) {
+        activeRenders.push(result);
+      }
+      return result;
+    },
+    renderDynamicList,
+    destroy: () => {
+      for (const result of activeRenders) {
+        result.destroy();
+      }
+      activeRenders.length = 0;
+      container.innerHTML = "";
+    }
+  };
+}
+function createViewsMap(views) {
+  const viewsMap = /* @__PURE__ */ new Map();
+  for (const view of views) {
+    const id = view.id || view._id;
+    if (id && view.layout) {
+      viewsMap.set(id, {
+        id,
+        layout: view.layout,
+        props: view.props
+      });
+    }
+  }
+  return viewsMap;
+}
+function extractReferencedViewIds(elements) {
+  const viewIds = /* @__PURE__ */ new Set();
+  for (const element of elements) {
+    if (element.isComponentView && element.componentId) {
+      viewIds.add(element.componentId);
+    }
+    if (element.configuration?.componentViewRef) {
+      viewIds.add(element.configuration.componentViewRef);
+    }
+    const bindings = element.configuration?.bindings?.inputs;
+    if (bindings) {
+      for (const binding of Object.values(bindings)) {
+        if (binding && typeof binding === "object") {
+          if (binding.source === "node" && binding.binding?.viewId) {
+            viewIds.add(binding.binding.viewId);
+          }
+          if (binding.viewId) {
+            viewIds.add(binding.viewId);
+          }
+        }
+      }
+    }
+  }
+  return Array.from(viewIds);
+}
+function collectAllViewDependencies(views, startViewId) {
+  const collected = /* @__PURE__ */ new Set();
+  const toProcess = [startViewId];
+  while (toProcess.length > 0) {
+    const viewId = toProcess.pop();
+    if (collected.has(viewId)) continue;
+    collected.add(viewId);
+    const view = views.get(viewId);
+    if (!view) continue;
+    const referencedIds = extractReferencedViewIds(view.layout);
+    for (const refId of referencedIds) {
+      if (!collected.has(refId)) {
+        toProcess.push(refId);
+      }
+    }
+  }
+  return collected;
+}
 
 // src/cache.ts
 var DEFAULT_CACHE_CONFIG = {
@@ -2093,6 +3997,18 @@ function calculateBackoffDelay(retryCount, config) {
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
+function buildViewsMap(views) {
+  if (!views || views.length === 0) return void 0;
+  const viewsMap = /* @__PURE__ */ new Map();
+  for (const view of views) {
+    viewsMap.set(view.id, {
+      id: view.id,
+      layout: view.layout,
+      props: view.props
+    });
+  }
+  return viewsMap;
+}
 async function resolveVersionFromApi(id, specifier, apiKey) {
   if (/^\d+\.\d+\.\d+$/.test(specifier)) {
     return specifier;
@@ -2122,7 +4038,7 @@ async function resolveVersionFromApi(id, specifier, apiKey) {
     return "latest";
   }
 }
-async function fetchFromRegistry(id, version, apiKey, includeBundle) {
+async function fetchFromRegistry(id, version, apiKey, includeBundle, includeViews) {
   const baseUrl = getRegistryUrl();
   const headers = {
     "Content-Type": "application/json"
@@ -2141,6 +4057,9 @@ async function fetchFromRegistry(id, version, apiKey, includeBundle) {
   if (includeBundle) {
     url += (url.includes("?") ? "&" : "?") + "bundle=true";
   }
+  if (includeViews) {
+    url += (url.includes("?") ? "&" : "?") + "includeViews=true";
+  }
   const response = await fetch(url, { headers });
   if (!response.ok) {
     if (response.status === 404) {
@@ -2174,7 +4093,9 @@ async function fetchComponent(id, options = {}) {
     forceRefresh = false,
     signal,
     bundleStrategy = "eager",
-    includeBundle = true
+    includeBundle = true,
+    includeViews = true
+    // Default to true - fetch all views needed
   } = options;
   const fullRetryConfig = {
     ...DEFAULT_RETRY_CONFIG,
@@ -2188,6 +4109,7 @@ async function fetchComponent(id, options = {}) {
       if (cached.bundle) {
         registry = buildRegistryFromBundle(cached);
       }
+      const views = buildViewsMap(cached.views);
       const duration = performance.now() - startTime;
       analytics.trackFetch(id, cached.version, duration, true, {
         cacheHit: true,
@@ -2197,7 +4119,8 @@ async function fetchComponent(id, options = {}) {
         data: cached,
         fromCache: true,
         version: cached.version,
-        registry
+        registry,
+        views
       };
     }
   }
@@ -2209,11 +4132,13 @@ async function fetchComponent(id, options = {}) {
       if (cached.bundle) {
         registry = buildRegistryFromBundle(cached);
       }
+      const views = buildViewsMap(cached.views);
       return {
         data: cached,
         fromCache: true,
         version: resolvedVersion,
-        registry
+        registry,
+        views
       };
     }
   }
@@ -2224,7 +4149,7 @@ async function fetchComponent(id, options = {}) {
       throw new Error("Fetch aborted");
     }
     try {
-      const data = await fetchFromRegistry(id, resolvedVersion, apiKey, shouldIncludeBundle);
+      const data = await fetchFromRegistry(id, resolvedVersion, apiKey, shouldIncludeBundle, includeViews);
       setInCache(id, resolvedVersion, data, cacheStrategy, cacheConfig);
       if (version !== resolvedVersion) {
         setInCache(id, version, data, cacheStrategy, cacheConfig);
@@ -2239,6 +4164,7 @@ async function fetchComponent(id, options = {}) {
           version: entry.resolved || entry.version
         }));
       }
+      const views = buildViewsMap(data.views);
       const duration = performance.now() - startTime;
       analytics.trackFetch(id, resolvedVersion, duration, false, {
         cacheHit: false,
@@ -2250,7 +4176,8 @@ async function fetchComponent(id, options = {}) {
         fromCache: false,
         version: resolvedVersion,
         registry,
-        pendingDependencies
+        pendingDependencies,
+        views
       };
     } catch (error) {
       lastError = error instanceof Error ? error : new Error(String(error));
@@ -2621,13 +4548,13 @@ function validateAssertion(container, assertion) {
           message: `Element "${assertion.selector}" not found`
         };
       }
-      const hasClass = elements[0].classList.contains(assertion.expected);
+      const hasClass2 = elements[0].classList.contains(assertion.expected);
       return {
         assertion,
-        passed: hasClass,
+        passed: hasClass2,
         actual: Array.from(elements[0].classList),
         expected: assertion.expected,
-        message: hasClass ? `Element has class "${assertion.expected}"` : `Element does not have class "${assertion.expected}"`
+        message: hasClass2 ? `Element has class "${assertion.expected}"` : `Element does not have class "${assertion.expected}"`
       };
     case "style":
       if (elements.length === 0) {
@@ -2747,14 +4674,22 @@ function getSampleValue(def) {
 
 // src/index.ts
 init_registry();
+init_tailwind();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnalyticsCollector,
   DEFAULT_CACHE_CONFIG,
   DEFAULT_RETRY_CONFIG,
+  DEFAULT_SERVLY_TAILWIND_CONFIG,
+  EVENT_HANDLERS,
+  EventSystem,
   LongTaskObserver,
   MemorySampler,
+  OverrideSystem,
   SessionManager,
+  StateManager,
+  addClass,
+  addCustomStyles,
   analytics,
   applyStyles,
   batchFetchComponents,
@@ -2768,13 +4703,20 @@ init_registry();
   clearMemoryCache,
   clearStyles,
   collectAllDependencies,
+  collectAllViewDependencies,
   compareVersions,
   configureAnalytics,
   createRegistry,
+  createServlyRenderer,
+  createViewsMap,
+  deepMerge,
+  deleteValueByPath,
   detectCircularDependencies,
   extractBindingKeys,
   extractDependencies,
   extractDependenciesFromCode,
+  extractOverrideDependencies,
+  extractReferencedViewIds,
   fetchComponent,
   fetchComponentWithDependencies,
   formatStyleValue,
@@ -2782,25 +4724,52 @@ init_registry();
   generateTestCases,
   getAnalytics,
   getCacheKey,
+  getCleanupOverrides,
   getDependencyTree,
+  getEventSystem,
   getFromCache,
+  getLocalStorage,
   getLongTaskObserver,
   getMemoryCacheSize,
   getMemorySampler,
+  getMountOverrides,
+  getOverrideSystem,
   getRegistryUrl,
   getSessionManager,
+  getSessionStorage,
+  getTailwind,
+  getUrlInfo,
+  getValueByPath,
+  goBack,
+  goForward,
+  hasClass,
+  hasDependencyOverrides,
+  hasOverrides,
   hasTemplateSyntax,
+  initServlyTailwind,
+  injectTailwind,
   invalidateCache,
   isComponentAvailable,
+  isTailwindLoaded,
   isValidSpecifier,
+  navigateTo,
   parseVersion,
   prefetchComponents,
   processStyles,
+  removeClass,
+  removeCustomStyles,
+  removeLocalStorage,
+  removeSessionStorage,
+  removeTailwind,
   render,
   renderDynamicList,
+  renderInShadow,
+  renderNode,
   resetAnalytics,
+  resetEventSystem,
   resetLongTaskObserver,
   resetMemorySampler,
+  resetOverrideSystem,
   resetSessionManager,
   resolveBindingPath,
   resolveTemplate,
@@ -2811,8 +4780,15 @@ init_registry();
   runTestCase,
   satisfiesVersion,
   setInCache,
+  setLocalStorage,
   setRegistryUrl,
+  setSessionStorage,
+  setValueByPath,
+  toDomEventName,
+  toReactEventName,
+  toggleClass,
   updateStyles,
+  updateTailwindConfig,
   validateAssertion,
   validateProps
 });