@tachui/core 0.7.0-alpha1

package/dist/runtime/dom-bridge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-bridge.cjs","sources":["../../src/runtime/dom-bridge.ts"],"sourcesContent":["/**\n * DOM Rendering Bridge Layer\n *\n * Critical missing piece that connects TachUI components to actual DOM rendering.\n * This bridges the gap between component instances and browser DOM elements.\n */\n\nimport type { ModifiableComponent } from '../modifiers/types'\nimport { createRoot as createReactiveRoot, getOwner } from '../reactive'\nimport { ComponentContextSymbol, createComponentContext, setCurrentComponentContext } from './component-context'\nimport { DOMRenderer } from './renderer'\nimport type { ComponentInstance, DOMNode } from './types'\n\n/**\n * Global DOM renderer instance\n */\nconst globalRenderer = new DOMRenderer()\n\n/**\n * Component mounting registry to track mounted components\n */\nconst mountedComponents = new Map<Element, ComponentInstance>()\nconst componentElements = new Map<ComponentInstance, Element[]>()\n\n/**\n * Track component instances with lifecycle hooks for processing\n */\nconst componentsWithLifecycleHooks = new Set<ComponentInstance>()\n\n/**\n * Register a component that has lifecycle hooks for later processing\n */\nexport function registerComponentWithLifecycleHooks(component: ComponentInstance): void {\n  \n  if ((component as any)._enhancedLifecycle) {\n    componentsWithLifecycleHooks.add(component)\n  }\n}\n\n/**\n * Process pending lifecycle hooks for components that were rendered but not mounted\n */\nfunction processPendingLifecycleHooks(): void {\n  for (const component of componentsWithLifecycleHooks) {\n    const enhancedLifecycle = (component as any)._enhancedLifecycle\n    if (enhancedLifecycle && !component.domReady) {\n      // Find DOM elements associated with this component by searching the DOM\n      const elements = findDOMElementsForComponent(component)\n      if (elements.length > 0) {\n        // Set up DOM tracking\n        component.domElements = new Map()\n        elements.forEach((element, index) => {\n          const key = element.id || `element-${index}`\n          component.domElements!.set(key, element)\n          if (!component.primaryElement) {\n            component.primaryElement = element\n          }\n        })\n        \n        component.domReady = true\n        \n        // Process lifecycle hooks\n        if (enhancedLifecycle.onDOMReady) {\n          console.log('🚀 Processing delayed onDOMReady for component:', component.id)\n          const cleanup = enhancedLifecycle.onDOMReady(\n            component.domElements,\n            component.primaryElement\n          )\n          if (typeof cleanup === 'function') {\n            component.cleanup = component.cleanup || []\n            component.cleanup.push(cleanup)\n          }\n        }\n        \n        if (enhancedLifecycle.onMount) {\n          const cleanup = enhancedLifecycle.onMount()\n          if (typeof cleanup === 'function') {\n            component.cleanup = component.cleanup || []\n            component.cleanup.push(cleanup)\n          }\n        }\n      }\n    }\n  }\n  \n  // Clear the set of processed components\n  componentsWithLifecycleHooks.clear()\n}\n\n/**\n * Find DOM elements associated with a component by searching the DOM\n * This is a fallback method for components that were rendered but not mounted\n */\nfunction findDOMElementsForComponent(component: ComponentInstance): Element[] {\n  // For Image components, look for img elements that match the component's expected structure\n  if (component.id.startsWith('image-')) {\n    const allImages = document.querySelectorAll('img.tachui-image')\n    return Array.from(allImages)\n  }\n  \n  // For other components, this could be expanded with more specific search logic\n  return []\n}\n\n/**\n * Create a reactive root that can mount component trees to DOM.\n * \n * This is the application-level mounting function for TachUI apps.\n * It creates a reactive context and mounts your component tree to the DOM.\n * \n * @param rootFunction - Function that returns the root component of your app\n * \n * @example\n * ```typescript\n * import { mountRoot } from '@tachui/core'\n * import { MyApp } from './MyApp'\n * \n * mountRoot(() => MyApp())\n * ```\n * \n * Note: This requires a DOM element with id=\"app\" to exist.\n */\nexport function mountRoot(rootFunction: () => ComponentInstance): void {\n  createReactiveRoot((dispose) => {\n    // Create root component context for State() to work throughout the entire app\n    const rootContext = createComponentContext('root-app')\n    setCurrentComponentContext(rootContext)\n    \n    // Also store context in reactive owner so State() can find it\n    const owner = getOwner()\n    if (owner) {\n      owner.context.set(ComponentContextSymbol, rootContext)\n    }\n    \n    let component: ComponentInstance\n    \n    try {\n      component = rootFunction()\n\n      // Find app container\n      const container = document.getElementById('app')\n      if (!container) {\n        throw new Error('App container element with id=\"app\" not found')\n      }\n\n      // Mount the component tree to the container\n      mountComponentTree(component, container)\n    } catch (error) {\n      // Reset context on error\n      setCurrentComponentContext(null)\n      if (owner) {\n        owner.context.delete(ComponentContextSymbol)\n      }\n      throw error\n    }\n\n    // Set up cleanup that resets context when the root is disposed\n    const originalDispose = dispose\n    return () => {\n      setCurrentComponentContext(null)\n      if (owner) {\n        owner.context.delete(ComponentContextSymbol)\n      }\n      return originalDispose()\n    }\n  })\n}\n\n/**\n * Mount a component tree to a DOM container\n */\nexport function mountComponentTree(component: ComponentInstance, container: Element, clearContainer: boolean = true): () => void {\n  \n  try {\n    // Clear container only if requested (typically only for root components)\n    if (clearContainer) {\n      container.innerHTML = ''\n    }\n\n    // Render component to DOM nodes\n    const domNodes = component.render()\n    const nodeArray = Array.isArray(domNodes) ? domNodes : [domNodes]\n\n    // Convert DOM nodes to actual DOM elements\n    const elements: Element[] = []\n    for (const node of nodeArray) {\n      const element = globalRenderer.render(node, container)\n\n      if (element instanceof DocumentFragment) {\n        // Handle fragments by adding all child nodes\n        const children = Array.from(element.childNodes)\n        for (const child of children) {\n          if (child instanceof Element) {\n            elements.push(child)\n            container.appendChild(child)\n          }\n        }\n      } else if (element instanceof Element) {\n        elements.push(element)\n        container.appendChild(element)\n      }\n    }\n\n    // ENHANCED: Set up DOM element tracking for lifecycle hooks\n    if (elements.length > 0) {\n      component.domElements = new Map()\n      \n      elements.forEach((element, index) => {\n        const key = element.id || `element-${index}`\n        component.domElements!.set(key, element)\n        \n        // Set primary element (first element with ID or index 0)\n        if (!component.primaryElement) {\n          component.primaryElement = element\n        }\n      })\n      \n      // Mark DOM as ready\n      component.domReady = true\n      \n      // ENHANCED: Trigger onDOMReady with guaranteed DOM elements\n      const enhancedLifecycle = (component as any)._enhancedLifecycle\n      \n      if (enhancedLifecycle?.onDOMReady) {\n        const cleanup = enhancedLifecycle.onDOMReady(\n          component.domElements, \n          component.primaryElement\n        )\n        if (typeof cleanup === 'function') {\n          component.cleanup = component.cleanup || []\n          component.cleanup.push(cleanup)\n        }\n      }\n      \n      // Trigger legacy onMount for backwards compatibility\n      if (enhancedLifecycle?.onMount) {\n        const cleanup = enhancedLifecycle.onMount()\n        if (typeof cleanup === 'function') {\n          component.cleanup = component.cleanup || []\n          component.cleanup.push(cleanup)\n        }\n      }\n    }\n\n    // Apply modifiers if this is a modifiable component\n    if (isModifiableComponent(component)) {\n      for (const element of elements) {\n        applyModifiersToElement(element, component)\n      }\n    }\n\n    // Bind event handlers\n    for (const element of elements) {\n      bindEventHandlers(element, component)\n    }\n\n    // REMOVED: Recursive child mounting - children are rendered as part of parent's render() method\n    // This was causing duplicate mounting where child components were being mounted individually\n    // instead of being rendered as part of their parent's DOM structure\n    const childCleanupFunctions: (() => void)[] = []\n\n    // Register component\n    mountedComponents.set(container, component)\n    componentElements.set(component, elements)\n    component.mounted = true\n\n    // Process any pending lifecycle hooks for components that were rendered but not mounted\n    // Use setTimeout to ensure all DOM rendering is complete\n    setTimeout(() => {\n      processPendingLifecycleHooks()\n    }, 0)\n\n    // Return cleanup function\n    return () => {\n      // Clean up child components first\n      childCleanupFunctions.forEach((cleanup) => cleanup())\n      // Then clean up this component\n      unmountComponentEnhanced(component, container)\n    }\n  } catch (error) {\n    // ENHANCED: Better error handling with DOM context\n    const domError = Object.assign(new Error(), error, {\n      code: 'MOUNT_FAILED',\n      context: 'mountComponentTree',\n    }) as any\n    \n    const enhancedLifecycle = (component as any)._enhancedLifecycle\n    if (enhancedLifecycle?.onDOMError) {\n      enhancedLifecycle.onDOMError(domError, 'mount')\n    } else if (enhancedLifecycle?.onError) {\n      enhancedLifecycle.onError(domError)\n    } else {\n      console.error('Failed to mount component tree:', error)\n    }\n    throw error\n  }\n}\n\n/**\n * Unmount a component from DOM\n */\nexport function unmountComponent(component: ComponentInstance, container: Element): void {\n  const elements = componentElements.get(component)\n  if (elements) {\n    elements.forEach((element) => {\n      if (element.parentNode) {\n        element.parentNode.removeChild(element)\n      }\n    })\n    componentElements.delete(component)\n  }\n\n  mountedComponents.delete(container)\n  component.mounted = false\n\n  // Run cleanup functions\n  if (component.cleanup) {\n    component.cleanup.forEach((cleanup) => cleanup())\n    component.cleanup = []\n  }\n}\n\n/**\n * Enhanced unmount component with lifecycle hooks\n */\nexport function unmountComponentEnhanced(component: ComponentInstance, container: Element): void {\n  try {\n    // Trigger onUnmount lifecycle\n    const enhancedLifecycle = (component as any)._enhancedLifecycle\n    if (enhancedLifecycle?.onUnmount) {\n      enhancedLifecycle.onUnmount()\n    }\n    \n    // Run cleanup functions\n    if (component.cleanup) {\n      component.cleanup.forEach((cleanup) => {\n        try {\n          cleanup()\n        } catch (error) {\n          console.error(`Cleanup error for component ${component.id}:`, error)\n        }\n      })\n      component.cleanup = []\n    }\n    \n    // Remove DOM elements\n    const elements = componentElements.get(component)\n    if (elements) {\n      elements.forEach((element) => {\n        if (element.parentNode) {\n          element.parentNode.removeChild(element)\n        }\n      })\n      componentElements.delete(component)\n    }\n    \n    // Clear enhanced DOM tracking\n    if (component.domElements) {\n      component.domElements.clear()\n    }\n    \n    // Clear references\n    component.primaryElement = undefined\n    component.domReady = false\n    component.mounted = false\n    \n    mountedComponents.delete(container)\n  } catch (error) {\n    const domError = Object.assign(new Error(), error, {\n      code: 'UNMOUNT_FAILED',\n      context: 'unmountComponentEnhanced',\n    }) as any\n    \n    const enhancedLifecycle = (component as any)._enhancedLifecycle\n    if (enhancedLifecycle?.onDOMError) {\n      enhancedLifecycle.onDOMError(domError, 'unmount')\n    } else {\n      console.error('Component unmounting failed:', error)\n    }\n  }\n}\n\n/**\n * Apply modifier chains to DOM elements\n */\nfunction applyModifiersToElement(element: Element, component: ModifiableComponent<any>): void {\n  \n  if (!('modifiers' in component) || !component.modifiers) {\n    return\n  }\n\n  const htmlElement = element as HTMLElement\n  const modifiers = component.modifiers\n\n  // Create a DOMNode wrapper for the HTMLElement to match the modifier interface\n  const domNode: DOMNode = {\n    type: 'element',\n    tag: htmlElement.tagName.toLowerCase(),\n    props: {},\n    element: htmlElement,\n  }\n\n  // Apply each modifier to the DOM element\n  for (const modifier of modifiers) {\n    try {\n      // Each modifier should apply its styles/properties to the element\n      if (modifier && typeof modifier.apply === 'function') {\n        modifier.apply(domNode, {\n          componentId: component.id,\n          componentInstance: component,\n          element: htmlElement,\n          phase: 'creation',\n        })\n      }\n    } catch (error) {\n      console.warn('Failed to apply modifier:', modifier, error)\n    }\n  }\n}\n\n/**\n * Bind component event handlers to DOM events\n */\nfunction bindEventHandlers(element: Element, component: ComponentInstance): void {\n  const htmlElement = element as HTMLElement\n\n  // Handle component-level events from props\n  if (component.props) {\n    const props = component.props\n\n    // Bind common event handlers\n    if (props.onClick && typeof props.onClick === 'function') {\n      htmlElement.addEventListener('click', props.onClick)\n    }\n\n    if (props.onMouseEnter && typeof props.onMouseEnter === 'function') {\n      htmlElement.addEventListener('mouseenter', props.onMouseEnter)\n    }\n\n    if (props.onMouseLeave && typeof props.onMouseLeave === 'function') {\n      htmlElement.addEventListener('mouseleave', props.onMouseLeave)\n    }\n\n    if (props.onFocus && typeof props.onFocus === 'function') {\n      htmlElement.addEventListener('focus', props.onFocus)\n    }\n\n    if (props.onBlur && typeof props.onBlur === 'function') {\n      htmlElement.addEventListener('blur', props.onBlur)\n    }\n  }\n\n  // Handle modifier-based events if this is a modifiable component\n  if (isModifiableComponent(component) && component.modifiers) {\n    for (const modifier of component.modifiers) {\n      if (modifier && 'eventHandlers' in modifier && modifier.eventHandlers) {\n        for (const [eventType, handler] of Object.entries(modifier.eventHandlers)) {\n          if (typeof handler === 'function') {\n            htmlElement.addEventListener(\n              eventType as keyof HTMLElementEventMap,\n              handler as EventListener\n            )\n          }\n        }\n      }\n    }\n  }\n}\n\n/**\n * Type guard to check if component is modifiable\n */\nfunction isModifiableComponent(component: any): component is ModifiableComponent<any> {\n  return (\n    component &&\n    typeof component === 'object' &&\n    ('modifiers' in component || 'modifier' in component)\n  )\n}\n\n/**\n * Recursively mount component children\n */\nexport function mountComponentChildren(\n  children: ComponentInstance[],\n  container: Element\n): (() => void)[] {\n  const cleanupFunctions: (() => void)[] = []\n\n  for (const child of children) {\n    const childCleanup = mountComponentTree(child, container)\n    cleanupFunctions.push(childCleanup)\n  }\n\n  return cleanupFunctions\n}\n\n/**\n * Update a mounted component with new props\n */\nexport function updateComponent(component: ComponentInstance, newProps: any): void {\n  const elements = componentElements.get(component)\n  if (!elements) {\n    console.warn('Attempted to update unmounted component')\n    return\n  }\n\n  // Update props\n  component.prevProps = component.props\n  component.props = { ...component.props, ...newProps }\n\n  // Re-render if needed\n  const container = elements[0]?.parentElement\n  if (container) {\n    unmountComponent(component, container)\n    mountComponentTree(component, container)\n  }\n}\n\n/**\n * Get mounted component from DOM element\n */\nexport function getComponentFromElement(element: Element): ComponentInstance | undefined {\n  let current: Element | null = element\n  while (current) {\n    const component = mountedComponents.get(current)\n    if (component) {\n      return component\n    }\n    current = current.parentElement\n  }\n  return undefined\n}\n\n\n/**\n * Debug utilities for DOM bridge\n */\nexport const DOMBridgeDebug = {\n  getMountedComponents: () => Array.from(mountedComponents.entries()),\n  getComponentElements: (component: ComponentInstance) => componentElements.get(component),\n  isComponentMounted: (component: ComponentInstance) => component.mounted || false,\n\n  /**\n   * Validate that all components are properly mounted\n   */\n  validateMounting(): { valid: boolean; issues: string[] } {\n    const issues: string[] = []\n\n    for (const [container, component] of mountedComponents.entries()) {\n      if (!document.contains(container)) {\n        issues.push(`Container for component ${component.id} is not in DOM`)\n      }\n\n      if (!component.mounted) {\n        issues.push(`Component ${component.id} marked as unmounted but still registered`)\n      }\n\n      const elements = componentElements.get(component)\n      if (!elements || elements.length === 0) {\n        issues.push(`Component ${component.id} has no associated DOM elements`)\n      }\n    }\n\n    return {\n      valid: issues.length === 0,\n      issues,\n    }\n  },\n}\n"],"names":["globalRenderer","DOMRenderer","mountedComponents","componentElements","componentsWithLifecycleHooks","registerComponentWithLifecycleHooks","component","processPendingLifecycleHooks","enhancedLifecycle","elements","findDOMElementsForComponent","element","index","key","cleanup","allImages","mountRoot","rootFunction","createReactiveRoot","dispose","rootContext","createComponentContext","setCurrentComponentContext","owner","getOwner","ComponentContextSymbol","container","mountComponentTree","error","originalDispose","clearContainer","domNodes","nodeArray","node","children","child","isModifiableComponent","applyModifiersToElement","bindEventHandlers","childCleanupFunctions","unmountComponentEnhanced","domError","unmountComponent","htmlElement","modifiers","domNode","modifier","props","eventType","handler","mountComponentChildren","cleanupFunctions","childCleanup","updateComponent","newProps","getComponentFromElement","current","DOMBridgeDebug","issues"],"mappings":"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"}

package/dist/runtime/dom-bridge.d.ts

@@ -0,0 +1,70 @@
+/**
+ * DOM Rendering Bridge Layer
+ *
+ * Critical missing piece that connects TachUI components to actual DOM rendering.
+ * This bridges the gap between component instances and browser DOM elements.
+ */
+import type { ComponentInstance } from './types';
+/**
+ * Register a component that has lifecycle hooks for later processing
+ */
+export declare function registerComponentWithLifecycleHooks(component: ComponentInstance): void;
+/**
+ * Create a reactive root that can mount component trees to DOM.
+ *
+ * This is the application-level mounting function for TachUI apps.
+ * It creates a reactive context and mounts your component tree to the DOM.
+ *
+ * @param rootFunction - Function that returns the root component of your app
+ *
+ * @example
+ * ```typescript
+ * import { mountRoot } from '@tachui/core'
+ * import { MyApp } from './MyApp'
+ *
+ * mountRoot(() => MyApp())
+ * ```
+ *
+ * Note: This requires a DOM element with id="app" to exist.
+ */
+export declare function mountRoot(rootFunction: () => ComponentInstance): void;
+/**
+ * Mount a component tree to a DOM container
+ */
+export declare function mountComponentTree(component: ComponentInstance, container: Element, clearContainer?: boolean): () => void;
+/**
+ * Unmount a component from DOM
+ */
+export declare function unmountComponent(component: ComponentInstance, container: Element): void;
+/**
+ * Enhanced unmount component with lifecycle hooks
+ */
+export declare function unmountComponentEnhanced(component: ComponentInstance, container: Element): void;
+/**
+ * Recursively mount component children
+ */
+export declare function mountComponentChildren(children: ComponentInstance[], container: Element): (() => void)[];
+/**
+ * Update a mounted component with new props
+ */
+export declare function updateComponent(component: ComponentInstance, newProps: any): void;
+/**
+ * Get mounted component from DOM element
+ */
+export declare function getComponentFromElement(element: Element): ComponentInstance | undefined;
+/**
+ * Debug utilities for DOM bridge
+ */
+export declare const DOMBridgeDebug: {
+    getMountedComponents: () => [Element, ComponentInstance<import("./types").ComponentProps>][];
+    getComponentElements: (component: ComponentInstance) => Element[] | undefined;
+    isComponentMounted: (component: ComponentInstance) => boolean;
+    /**
+     * Validate that all components are properly mounted
+     */
+    validateMounting(): {
+        valid: boolean;
+        issues: string[];
+    };
+};
+//# sourceMappingURL=dom-bridge.d.ts.map

package/dist/runtime/dom-bridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-bridge.d.ts","sourceRoot":"","sources":["../../src/runtime/dom-bridge.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,KAAK,EAAE,iBAAiB,EAAW,MAAM,SAAS,CAAA;AAkBzD;;GAEG;AACH,wBAAgB,mCAAmC,CAAC,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAKtF;AAmED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,YAAY,EAAE,MAAM,iBAAiB,GAAG,IAAI,CA4CrE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,GAAE,OAAc,GAAG,MAAM,IAAI,CA6H/H;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,CAmBvF;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,CAuD/F;AAoGD;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,iBAAiB,EAAE,EAC7B,SAAS,EAAE,OAAO,GACjB,CAAC,MAAM,IAAI,CAAC,EAAE,CAShB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,iBAAiB,EAAE,QAAQ,EAAE,GAAG,GAAG,IAAI,CAiBjF;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,OAAO,GAAG,iBAAiB,GAAG,SAAS,CAUvF;AAGD;;GAEG;AACH,eAAO,MAAM,cAAc;;sCAES,iBAAiB;oCACnB,iBAAiB;IAEjD;;OAEG;wBACiB;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;CAuBzD,CAAA"}

package/dist/runtime/dom-bridge.js

@@ -0,0 +1,241 @@
+import "../reactive/cleanup.js";
+import { createRoot as C, getOwner as M } from "../reactive/context.js";
+import "../reactive/unified-scheduler.js";
+import "../reactive/signal.js";
+import "../reactive/scheduler.js";
+import "../reactive/theme.js";
+import { createComponentContext as g, setCurrentComponentContext as m, ComponentContextSymbol as p } from "./component-context.js";
+import { DOMRenderer as L } from "./renderer.js";
+const v = new L(), a = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new Set();
+function $(e) {
+  e._enhancedLifecycle && y.add(e);
+}
+function O() {
+  for (const e of y) {
+    const o = e._enhancedLifecycle;
+    if (o && !e.domReady) {
+      const t = w(e);
+      if (t.length > 0) {
+        if (e.domElements = /* @__PURE__ */ new Map(), t.forEach((n, i) => {
+          const r = n.id || `element-${i}`;
+          e.domElements.set(r, n), e.primaryElement || (e.primaryElement = n);
+        }), e.domReady = !0, o.onDOMReady) {
+          console.log("🚀 Processing delayed onDOMReady for component:", e.id);
+          const n = o.onDOMReady(
+            e.domElements,
+            e.primaryElement
+          );
+          typeof n == "function" && (e.cleanup = e.cleanup || [], e.cleanup.push(n));
+        }
+        if (o.onMount) {
+          const n = o.onMount();
+          typeof n == "function" && (e.cleanup = e.cleanup || [], e.cleanup.push(n));
+        }
+      }
+    }
+  }
+  y.clear();
+}
+function w(e) {
+  if (e.id.startsWith("image-")) {
+    const o = document.querySelectorAll("img.tachui-image");
+    return Array.from(o);
+  }
+  return [];
+}
+function B(e) {
+  C((o) => {
+    const t = g("root-app");
+    m(t);
+    const n = M();
+    n && n.context.set(p, t);
+    let i;
+    try {
+      i = e();
+      const f = document.getElementById("app");
+      if (!f)
+        throw new Error('App container element with id="app" not found');
+      h(i, f);
+    } catch (f) {
+      throw m(null), n && n.context.delete(p), f;
+    }
+    const r = o;
+    return () => (m(null), n && n.context.delete(p), r());
+  });
+}
+function h(e, o, t = !0) {
+  try {
+    t && (o.innerHTML = "");
+    const n = e.render(), i = Array.isArray(n) ? n : [n], r = [];
+    for (const c of i) {
+      const s = v.render(c, o);
+      if (s instanceof DocumentFragment) {
+        const u = Array.from(s.childNodes);
+        for (const d of u)
+          d instanceof Element && (r.push(d), o.appendChild(d));
+      } else s instanceof Element && (r.push(s), o.appendChild(s));
+    }
+    if (r.length > 0) {
+      e.domElements = /* @__PURE__ */ new Map(), r.forEach((s, u) => {
+        const d = s.id || `element-${u}`;
+        e.domElements.set(d, s), e.primaryElement || (e.primaryElement = s);
+      }), e.domReady = !0;
+      const c = e._enhancedLifecycle;
+      if (c?.onDOMReady) {
+        const s = c.onDOMReady(
+          e.domElements,
+          e.primaryElement
+        );
+        typeof s == "function" && (e.cleanup = e.cleanup || [], e.cleanup.push(s));
+      }
+      if (c?.onMount) {
+        const s = c.onMount();
+        typeof s == "function" && (e.cleanup = e.cleanup || [], e.cleanup.push(s));
+      }
+    }
+    if (E(e))
+      for (const c of r)
+        F(c, e);
+    for (const c of r)
+      b(c, e);
+    const f = [];
+    return a.set(o, e), l.set(e, r), e.mounted = !0, setTimeout(() => {
+      O();
+    }, 0), () => {
+      f.forEach((c) => c()), R(e, o);
+    };
+  } catch (n) {
+    const i = Object.assign(new Error(), n, {
+      code: "MOUNT_FAILED",
+      context: "mountComponentTree"
+    }), r = e._enhancedLifecycle;
+    throw r?.onDOMError ? r.onDOMError(i, "mount") : r?.onError ? r.onError(i) : console.error("Failed to mount component tree:", n), n;
+  }
+}
+function D(e, o) {
+  const t = l.get(e);
+  t && (t.forEach((n) => {
+    n.parentNode && n.parentNode.removeChild(n);
+  }), l.delete(e)), a.delete(o), e.mounted = !1, e.cleanup && (e.cleanup.forEach((n) => n()), e.cleanup = []);
+}
+function R(e, o) {
+  try {
+    const t = e._enhancedLifecycle;
+    t?.onUnmount && t.onUnmount(), e.cleanup && (e.cleanup.forEach((i) => {
+      try {
+        i();
+      } catch (r) {
+        console.error(`Cleanup error for component ${e.id}:`, r);
+      }
+    }), e.cleanup = []);
+    const n = l.get(e);
+    n && (n.forEach((i) => {
+      i.parentNode && i.parentNode.removeChild(i);
+    }), l.delete(e)), e.domElements && e.domElements.clear(), e.primaryElement = void 0, e.domReady = !1, e.mounted = !1, a.delete(o);
+  } catch (t) {
+    const n = Object.assign(new Error(), t, {
+      code: "UNMOUNT_FAILED",
+      context: "unmountComponentEnhanced"
+    }), i = e._enhancedLifecycle;
+    i?.onDOMError ? i.onDOMError(n, "unmount") : console.error("Component unmounting failed:", t);
+  }
+}
+function F(e, o) {
+  if (!("modifiers" in o) || !o.modifiers)
+    return;
+  const t = e, n = o.modifiers, i = {
+    type: "element",
+    tag: t.tagName.toLowerCase(),
+    props: {},
+    element: t
+  };
+  for (const r of n)
+    try {
+      r && typeof r.apply == "function" && r.apply(i, {
+        componentId: o.id,
+        componentInstance: o,
+        element: t,
+        phase: "creation"
+      });
+    } catch (f) {
+      console.warn("Failed to apply modifier:", r, f);
+    }
+}
+function b(e, o) {
+  const t = e;
+  if (o.props) {
+    const n = o.props;
+    n.onClick && typeof n.onClick == "function" && t.addEventListener("click", n.onClick), n.onMouseEnter && typeof n.onMouseEnter == "function" && t.addEventListener("mouseenter", n.onMouseEnter), n.onMouseLeave && typeof n.onMouseLeave == "function" && t.addEventListener("mouseleave", n.onMouseLeave), n.onFocus && typeof n.onFocus == "function" && t.addEventListener("focus", n.onFocus), n.onBlur && typeof n.onBlur == "function" && t.addEventListener("blur", n.onBlur);
+  }
+  if (E(o) && o.modifiers) {
+    for (const n of o.modifiers)
+      if (n && "eventHandlers" in n && n.eventHandlers)
+        for (const [i, r] of Object.entries(n.eventHandlers))
+          typeof r == "function" && t.addEventListener(
+            i,
+            r
+          );
+  }
+}
+function E(e) {
+  return e && typeof e == "object" && ("modifiers" in e || "modifier" in e);
+}
+function U(e, o) {
+  const t = [];
+  for (const n of e) {
+    const i = h(n, o);
+    t.push(i);
+  }
+  return t;
+}
+function j(e, o) {
+  const t = l.get(e);
+  if (!t) {
+    console.warn("Attempted to update unmounted component");
+    return;
+  }
+  e.prevProps = e.props, e.props = { ...e.props, ...o };
+  const n = t[0]?.parentElement;
+  n && (D(e, n), h(e, n));
+}
+function P(e) {
+  let o = e;
+  for (; o; ) {
+    const t = a.get(o);
+    if (t)
+      return t;
+    o = o.parentElement;
+  }
+}
+const S = {
+  getMountedComponents: () => Array.from(a.entries()),
+  getComponentElements: (e) => l.get(e),
+  isComponentMounted: (e) => e.mounted || !1,
+  /**
+   * Validate that all components are properly mounted
+   */
+  validateMounting() {
+    const e = [];
+    for (const [o, t] of a.entries()) {
+      document.contains(o) || e.push(`Container for component ${t.id} is not in DOM`), t.mounted || e.push(`Component ${t.id} marked as unmounted but still registered`);
+      const n = l.get(t);
+      (!n || n.length === 0) && e.push(`Component ${t.id} has no associated DOM elements`);
+    }
+    return {
+      valid: e.length === 0,
+      issues: e
+    };
+  }
+};
+export {
+  S as DOMBridgeDebug,
+  P as getComponentFromElement,
+  U as mountComponentChildren,
+  h as mountComponentTree,
+  B as mountRoot,
+  $ as registerComponentWithLifecycleHooks,
+  D as unmountComponent,
+  R as unmountComponentEnhanced,
+  j as updateComponent
+};
+//# sourceMappingURL=dom-bridge.js.map

package/dist/runtime/dom-bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-bridge.js","sources":["../../src/runtime/dom-bridge.ts"],"sourcesContent":["/**\n * DOM Rendering Bridge Layer\n *\n * Critical missing piece that connects TachUI components to actual DOM rendering.\n * This bridges the gap between component instances and browser DOM elements.\n */\n\nimport type { ModifiableComponent } from '../modifiers/types'\nimport { createRoot as createReactiveRoot, getOwner } from '../reactive'\nimport { ComponentContextSymbol, createComponentContext, setCurrentComponentContext } from './component-context'\nimport { DOMRenderer } from './renderer'\nimport type { ComponentInstance, DOMNode } from './types'\n\n/**\n * Global DOM renderer instance\n */\nconst globalRenderer = new DOMRenderer()\n\n/**\n * Component mounting registry to track mounted components\n */\nconst mountedComponents = new Map<Element, ComponentInstance>()\nconst componentElements = new Map<ComponentInstance, Element[]>()\n\n/**\n * Track component instances with lifecycle hooks for processing\n */\nconst componentsWithLifecycleHooks = new Set<ComponentInstance>()\n\n/**\n * Register a component that has lifecycle hooks for later processing\n */\nexport function registerComponentWithLifecycleHooks(component: ComponentInstance): void {\n  \n  if ((component as any)._enhancedLifecycle) {\n    componentsWithLifecycleHooks.add(component)\n  }\n}\n\n/**\n * Process pending lifecycle hooks for components that were rendered but not mounted\n */\nfunction processPendingLifecycleHooks(): void {\n  for (const component of componentsWithLifecycleHooks) {\n    const enhancedLifecycle = (component as any)._enhancedLifecycle\n    if (enhancedLifecycle && !component.domReady) {\n      // Find DOM elements associated with this component by searching the DOM\n      const elements = findDOMElementsForComponent(component)\n      if (elements.length > 0) {\n        // Set up DOM tracking\n        component.domElements = new Map()\n        elements.forEach((element, index) => {\n          const key = element.id || `element-${index}`\n          component.domElements!.set(key, element)\n          if (!component.primaryElement) {\n            component.primaryElement = element\n          }\n        })\n        \n        component.domReady = true\n        \n        // Process lifecycle hooks\n        if (enhancedLifecycle.onDOMReady) {\n          console.log('🚀 Processing delayed onDOMReady for component:', component.id)\n          const cleanup = enhancedLifecycle.onDOMReady(\n            component.domElements,\n            component.primaryElement\n          )\n          if (typeof cleanup === 'function') {\n            component.cleanup = component.cleanup || []\n            component.cleanup.push(cleanup)\n          }\n        }\n        \n        if (enhancedLifecycle.onMount) {\n          const cleanup = enhancedLifecycle.onMount()\n          if (typeof cleanup === 'function') {\n            component.cleanup = component.cleanup || []\n            component.cleanup.push(cleanup)\n          }\n        }\n      }\n    }\n  }\n  \n  // Clear the set of processed components\n  componentsWithLifecycleHooks.clear()\n}\n\n/**\n * Find DOM elements associated with a component by searching the DOM\n * This is a fallback method for components that were rendered but not mounted\n */\nfunction findDOMElementsForComponent(component: ComponentInstance): Element[] {\n  // For Image components, look for img elements that match the component's expected structure\n  if (component.id.startsWith('image-')) {\n    const allImages = document.querySelectorAll('img.tachui-image')\n    return Array.from(allImages)\n  }\n  \n  // For other components, this could be expanded with more specific search logic\n  return []\n}\n\n/**\n * Create a reactive root that can mount component trees to DOM.\n * \n * This is the application-level mounting function for TachUI apps.\n * It creates a reactive context and mounts your component tree to the DOM.\n * \n * @param rootFunction - Function that returns the root component of your app\n * \n * @example\n * ```typescript\n * import { mountRoot } from '@tachui/core'\n * import { MyApp } from './MyApp'\n * \n * mountRoot(() => MyApp())\n * ```\n * \n * Note: This requires a DOM element with id=\"app\" to exist.\n */\nexport function mountRoot(rootFunction: () => ComponentInstance): void {\n  createReactiveRoot((dispose) => {\n    // Create root component context for State() to work throughout the entire app\n    const rootContext = createComponentContext('root-app')\n    setCurrentComponentContext(rootContext)\n    \n    // Also store context in reactive owner so State() can find it\n    const owner = getOwner()\n    if (owner) {\n      owner.context.set(ComponentContextSymbol, rootContext)\n    }\n    \n    let component: ComponentInstance\n    \n    try {\n      component = rootFunction()\n\n      // Find app container\n      const container = document.getElementById('app')\n      if (!container) {\n        throw new Error('App container element with id=\"app\" not found')\n      }\n\n      // Mount the component tree to the container\n      mountComponentTree(component, container)\n    } catch (error) {\n      // Reset context on error\n      setCurrentComponentContext(null)\n      if (owner) {\n        owner.context.delete(ComponentContextSymbol)\n      }\n      throw error\n    }\n\n    // Set up cleanup that resets context when the root is disposed\n    const originalDispose = dispose\n    return () => {\n      setCurrentComponentContext(null)\n      if (owner) {\n        owner.context.delete(ComponentContextSymbol)\n      }\n      return originalDispose()\n    }\n  })\n}\n\n/**\n * Mount a component tree to a DOM container\n */\nexport function mountComponentTree(component: ComponentInstance, container: Element, clearContainer: boolean = true): () => void {\n  \n  try {\n    // Clear container only if requested (typically only for root components)\n    if (clearContainer) {\n      container.innerHTML = ''\n    }\n\n    // Render component to DOM nodes\n    const domNodes = component.render()\n    const nodeArray = Array.isArray(domNodes) ? domNodes : [domNodes]\n\n    // Convert DOM nodes to actual DOM elements\n    const elements: Element[] = []\n    for (const node of nodeArray) {\n      const element = globalRenderer.render(node, container)\n\n      if (element instanceof DocumentFragment) {\n        // Handle fragments by adding all child nodes\n        const children = Array.from(element.childNodes)\n        for (const child of children) {\n          if (child instanceof Element) {\n            elements.push(child)\n            container.appendChild(child)\n          }\n        }\n      } else if (element instanceof Element) {\n        elements.push(element)\n        container.appendChild(element)\n      }\n    }\n\n    // ENHANCED: Set up DOM element tracking for lifecycle hooks\n    if (elements.length > 0) {\n      component.domElements = new Map()\n      \n      elements.forEach((element, index) => {\n        const key = element.id || `element-${index}`\n        component.domElements!.set(key, element)\n        \n        // Set primary element (first element with ID or index 0)\n        if (!component.primaryElement) {\n          component.primaryElement = element\n        }\n      })\n      \n      // Mark DOM as ready\n      component.domReady = true\n      \n      // ENHANCED: Trigger onDOMReady with guaranteed DOM elements\n      const enhancedLifecycle = (component as any)._enhancedLifecycle\n      \n      if (enhancedLifecycle?.onDOMReady) {\n        const cleanup = enhancedLifecycle.onDOMReady(\n          component.domElements, \n          component.primaryElement\n        )\n        if (typeof cleanup === 'function') {\n          component.cleanup = component.cleanup || []\n          component.cleanup.push(cleanup)\n        }\n      }\n      \n      // Trigger legacy onMount for backwards compatibility\n      if (enhancedLifecycle?.onMount) {\n        const cleanup = enhancedLifecycle.onMount()\n        if (typeof cleanup === 'function') {\n          component.cleanup = component.cleanup || []\n          component.cleanup.push(cleanup)\n        }\n      }\n    }\n\n    // Apply modifiers if this is a modifiable component\n    if (isModifiableComponent(component)) {\n      for (const element of elements) {\n        applyModifiersToElement(element, component)\n      }\n    }\n\n    // Bind event handlers\n    for (const element of elements) {\n      bindEventHandlers(element, component)\n    }\n\n    // REMOVED: Recursive child mounting - children are rendered as part of parent's render() method\n    // This was causing duplicate mounting where child components were being mounted individually\n    // instead of being rendered as part of their parent's DOM structure\n    const childCleanupFunctions: (() => void)[] = []\n\n    // Register component\n    mountedComponents.set(container, component)\n    componentElements.set(component, elements)\n    component.mounted = true\n\n    // Process any pending lifecycle hooks for components that were rendered but not mounted\n    // Use setTimeout to ensure all DOM rendering is complete\n    setTimeout(() => {\n      processPendingLifecycleHooks()\n    }, 0)\n\n    // Return cleanup function\n    return () => {\n      // Clean up child components first\n      childCleanupFunctions.forEach((cleanup) => cleanup())\n      // Then clean up this component\n      unmountComponentEnhanced(component, container)\n    }\n  } catch (error) {\n    // ENHANCED: Better error handling with DOM context\n    const domError = Object.assign(new Error(), error, {\n      code: 'MOUNT_FAILED',\n      context: 'mountComponentTree',\n    }) as any\n    \n    const enhancedLifecycle = (component as any)._enhancedLifecycle\n    if (enhancedLifecycle?.onDOMError) {\n      enhancedLifecycle.onDOMError(domError, 'mount')\n    } else if (enhancedLifecycle?.onError) {\n      enhancedLifecycle.onError(domError)\n    } else {\n      console.error('Failed to mount component tree:', error)\n    }\n    throw error\n  }\n}\n\n/**\n * Unmount a component from DOM\n */\nexport function unmountComponent(component: ComponentInstance, container: Element): void {\n  const elements = componentElements.get(component)\n  if (elements) {\n    elements.forEach((element) => {\n      if (element.parentNode) {\n        element.parentNode.removeChild(element)\n      }\n    })\n    componentElements.delete(component)\n  }\n\n  mountedComponents.delete(container)\n  component.mounted = false\n\n  // Run cleanup functions\n  if (component.cleanup) {\n    component.cleanup.forEach((cleanup) => cleanup())\n    component.cleanup = []\n  }\n}\n\n/**\n * Enhanced unmount component with lifecycle hooks\n */\nexport function unmountComponentEnhanced(component: ComponentInstance, container: Element): void {\n  try {\n    // Trigger onUnmount lifecycle\n    const enhancedLifecycle = (component as any)._enhancedLifecycle\n    if (enhancedLifecycle?.onUnmount) {\n      enhancedLifecycle.onUnmount()\n    }\n    \n    // Run cleanup functions\n    if (component.cleanup) {\n      component.cleanup.forEach((cleanup) => {\n        try {\n          cleanup()\n        } catch (error) {\n          console.error(`Cleanup error for component ${component.id}:`, error)\n        }\n      })\n      component.cleanup = []\n    }\n    \n    // Remove DOM elements\n    const elements = componentElements.get(component)\n    if (elements) {\n      elements.forEach((element) => {\n        if (element.parentNode) {\n          element.parentNode.removeChild(element)\n        }\n      })\n      componentElements.delete(component)\n    }\n    \n    // Clear enhanced DOM tracking\n    if (component.domElements) {\n      component.domElements.clear()\n    }\n    \n    // Clear references\n    component.primaryElement = undefined\n    component.domReady = false\n    component.mounted = false\n    \n    mountedComponents.delete(container)\n  } catch (error) {\n    const domError = Object.assign(new Error(), error, {\n      code: 'UNMOUNT_FAILED',\n      context: 'unmountComponentEnhanced',\n    }) as any\n    \n    const enhancedLifecycle = (component as any)._enhancedLifecycle\n    if (enhancedLifecycle?.onDOMError) {\n      enhancedLifecycle.onDOMError(domError, 'unmount')\n    } else {\n      console.error('Component unmounting failed:', error)\n    }\n  }\n}\n\n/**\n * Apply modifier chains to DOM elements\n */\nfunction applyModifiersToElement(element: Element, component: ModifiableComponent<any>): void {\n  \n  if (!('modifiers' in component) || !component.modifiers) {\n    return\n  }\n\n  const htmlElement = element as HTMLElement\n  const modifiers = component.modifiers\n\n  // Create a DOMNode wrapper for the HTMLElement to match the modifier interface\n  const domNode: DOMNode = {\n    type: 'element',\n    tag: htmlElement.tagName.toLowerCase(),\n    props: {},\n    element: htmlElement,\n  }\n\n  // Apply each modifier to the DOM element\n  for (const modifier of modifiers) {\n    try {\n      // Each modifier should apply its styles/properties to the element\n      if (modifier && typeof modifier.apply === 'function') {\n        modifier.apply(domNode, {\n          componentId: component.id,\n          componentInstance: component,\n          element: htmlElement,\n          phase: 'creation',\n        })\n      }\n    } catch (error) {\n      console.warn('Failed to apply modifier:', modifier, error)\n    }\n  }\n}\n\n/**\n * Bind component event handlers to DOM events\n */\nfunction bindEventHandlers(element: Element, component: ComponentInstance): void {\n  const htmlElement = element as HTMLElement\n\n  // Handle component-level events from props\n  if (component.props) {\n    const props = component.props\n\n    // Bind common event handlers\n    if (props.onClick && typeof props.onClick === 'function') {\n      htmlElement.addEventListener('click', props.onClick)\n    }\n\n    if (props.onMouseEnter && typeof props.onMouseEnter === 'function') {\n      htmlElement.addEventListener('mouseenter', props.onMouseEnter)\n    }\n\n    if (props.onMouseLeave && typeof props.onMouseLeave === 'function') {\n      htmlElement.addEventListener('mouseleave', props.onMouseLeave)\n    }\n\n    if (props.onFocus && typeof props.onFocus === 'function') {\n      htmlElement.addEventListener('focus', props.onFocus)\n    }\n\n    if (props.onBlur && typeof props.onBlur === 'function') {\n      htmlElement.addEventListener('blur', props.onBlur)\n    }\n  }\n\n  // Handle modifier-based events if this is a modifiable component\n  if (isModifiableComponent(component) && component.modifiers) {\n    for (const modifier of component.modifiers) {\n      if (modifier && 'eventHandlers' in modifier && modifier.eventHandlers) {\n        for (const [eventType, handler] of Object.entries(modifier.eventHandlers)) {\n          if (typeof handler === 'function') {\n            htmlElement.addEventListener(\n              eventType as keyof HTMLElementEventMap,\n              handler as EventListener\n            )\n          }\n        }\n      }\n    }\n  }\n}\n\n/**\n * Type guard to check if component is modifiable\n */\nfunction isModifiableComponent(component: any): component is ModifiableComponent<any> {\n  return (\n    component &&\n    typeof component === 'object' &&\n    ('modifiers' in component || 'modifier' in component)\n  )\n}\n\n/**\n * Recursively mount component children\n */\nexport function mountComponentChildren(\n  children: ComponentInstance[],\n  container: Element\n): (() => void)[] {\n  const cleanupFunctions: (() => void)[] = []\n\n  for (const child of children) {\n    const childCleanup = mountComponentTree(child, container)\n    cleanupFunctions.push(childCleanup)\n  }\n\n  return cleanupFunctions\n}\n\n/**\n * Update a mounted component with new props\n */\nexport function updateComponent(component: ComponentInstance, newProps: any): void {\n  const elements = componentElements.get(component)\n  if (!elements) {\n    console.warn('Attempted to update unmounted component')\n    return\n  }\n\n  // Update props\n  component.prevProps = component.props\n  component.props = { ...component.props, ...newProps }\n\n  // Re-render if needed\n  const container = elements[0]?.parentElement\n  if (container) {\n    unmountComponent(component, container)\n    mountComponentTree(component, container)\n  }\n}\n\n/**\n * Get mounted component from DOM element\n */\nexport function getComponentFromElement(element: Element): ComponentInstance | undefined {\n  let current: Element | null = element\n  while (current) {\n    const component = mountedComponents.get(current)\n    if (component) {\n      return component\n    }\n    current = current.parentElement\n  }\n  return undefined\n}\n\n\n/**\n * Debug utilities for DOM bridge\n */\nexport const DOMBridgeDebug = {\n  getMountedComponents: () => Array.from(mountedComponents.entries()),\n  getComponentElements: (component: ComponentInstance) => componentElements.get(component),\n  isComponentMounted: (component: ComponentInstance) => component.mounted || false,\n\n  /**\n   * Validate that all components are properly mounted\n   */\n  validateMounting(): { valid: boolean; issues: string[] } {\n    const issues: string[] = []\n\n    for (const [container, component] of mountedComponents.entries()) {\n      if (!document.contains(container)) {\n        issues.push(`Container for component ${component.id} is not in DOM`)\n      }\n\n      if (!component.mounted) {\n        issues.push(`Component ${component.id} marked as unmounted but still registered`)\n      }\n\n      const elements = componentElements.get(component)\n      if (!elements || elements.length === 0) {\n        issues.push(`Component ${component.id} has no associated DOM elements`)\n      }\n    }\n\n    return {\n      valid: issues.length === 0,\n      issues,\n    }\n  },\n}\n"],"names":["globalRenderer","DOMRenderer","mountedComponents","componentElements","componentsWithLifecycleHooks","registerComponentWithLifecycleHooks","component","processPendingLifecycleHooks","enhancedLifecycle","elements","findDOMElementsForComponent","element","index","key","cleanup","allImages","mountRoot","rootFunction","createReactiveRoot","dispose","rootContext","createComponentContext","setCurrentComponentContext","owner","getOwner","ComponentContextSymbol","container","mountComponentTree","error","originalDispose","clearContainer","domNodes","nodeArray","node","children","child","isModifiableComponent","applyModifiersToElement","bindEventHandlers","childCleanupFunctions","unmountComponentEnhanced","domError","unmountComponent","htmlElement","modifiers","domNode","modifier","props","eventType","handler","mountComponentChildren","cleanupFunctions","childCleanup","updateComponent","newProps","getComponentFromElement","current","DOMBridgeDebug","issues"],"mappings":"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"}

package/dist/runtime/element-override.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./development-warnings.cjs"),o=new Set(["div","section","article","aside","nav","main","header","footer","h1","h2","h3","h4","h5","h6","p","span","strong","em","code","pre","blockquote","address","ul","ol","li","dl","dt","dd","button","a","input","textarea","select","form","label","img","video","audio","canvas","svg","picture","source","table","thead","tbody","tfoot","tr","th","td","caption","colgroup","col","fieldset","legend","optgroup","option","datalist","output","progress","meter","details","summary","dialog","abbr","cite","dfn","kbd","mark","q","s","samp","small","sub","sup","time","u","var","body","head","title","base","link","meta","style","script","noscript","embed","iframe","object","param","track","map","area","menu","menuitem"]),c=new Map([["nav",{role:"navigation",applyARIA:!0}],["main",{role:"main",applyARIA:!0}],["article",{role:"article",applyARIA:!0}],["section",{role:"region",applyARIA:!0}],["aside",{role:"complementary",applyARIA:!0}],["header",{role:"banner",applyARIA:!1}],["footer",{role:"contentinfo",applyARIA:!1}],["form",{role:"form",applyARIA:!0}],["search",{role:"search",applyARIA:!0}],["dialog",{role:"dialog",applyARIA:!0}],["button",{role:"button",applyARIA:!1}],["a",{role:"link",applyARIA:!1}]]),u=new Map([["HStack",{warningLevel:"none",idealTags:["nav","header","footer","section","article","aside","main","div"]}],["VStack",{warningLevel:"none",idealTags:["main","section","article","aside","header","footer","div"]}],["ZStack",{warningLevel:"none",idealTags:["article","aside","section","div"]}],["Text",{warningLevel:"none",idealTags:["h1","h2","h3","h4","h5","h6","p","span","strong","em"]}],["Image",{warningLevel:"warning",problematicTags:["figure","picture"]}],["Spacer",{warningLevel:"none"}],["Button",{warningLevel:"warning",problematicTags:["div","span","a"]}],["Link",{warningLevel:"warning",problematicTags:["div","span","button"]}]]);function d(n,i){const e=u.get(n);return e?e.warningLevel==="none"?!1:e.warningLevel==="warning"&&e.problematicTags?e.problematicTags.includes(i):!(e.idealTags&&e.idealTags.includes(i)):!0}class g{static validate(i,e){return o.has(i)?{valid:!0,warnings:this.checkSemanticWarnings(i,e),semanticRole:c.get(i)}:(t.DevelopmentWarnings.errorInvalidTag(i,e),{valid:!1,warning:`Invalid HTML tag '${i}' specified for ${e}. Tag will be used as-is.`,severity:"error"})}static checkSemanticWarnings(i,e){const r=[];if(["button","a","input","select","textarea"].includes(i)&&["HStack","VStack","ZStack"].includes(e)){const a=`Using interactive tag '${i}' on layout component ${e} may cause accessibility issues.`;r.push({message:a,severity:"warning"}),t.DevelopmentWarnings.warnAccessibility(e,i,"Interactive tag on layout component may cause unexpected behavior")}if(i==="li"&&!["VStack","HStack"].includes(e)&&(r.push({message:"<li> tags should typically be used within list structures.",severity:"info"}),t.DevelopmentWarnings.warnProblematicCombination(e,i,"Consider using within <ul> or <ol> structure","info")),["h1","h2","h3","h4","h5","h6"].includes(i)&&["HStack","VStack","ZStack"].includes(e)){const a=`Using heading tag '${i}' on layout component ${e}. Consider using Text component instead.`;r.push({message:a,severity:"info"}),t.DevelopmentWarnings.warnProblematicCombination(e,i,"Heading tags are better suited for Text components","info")}if(["form","fieldset","legend"].includes(i)&&!["VStack","HStack","Form"].includes(e)){const a=`Form tag '${i}' used on ${e}. Ensure proper form semantics.`;r.push({message:a,severity:"info"}),t.DevelopmentWarnings.warnProblematicCombination(e,i,"Form tags require proper semantic context","info")}return r}}let l={autoApplySemanticRoles:!0,warnOnOverrides:process.env.NODE_ENV!=="production",warnOnSemanticIssues:process.env.NODE_ENV!=="production",validateTags:!0,allowInvalidTags:!0};function f(n){l={...l,...n}}function m(){return{...l}}function v(n,i,e){const r=e||i,a=m();let s={valid:!0};return e&&(a.warnOnOverrides&&d(n,e)&&t.DevelopmentWarnings.warnElementOverride(n,i,e),a.validateTags&&(s=g.validate(e,n),!s.valid&&!a.allowInvalidTags))?(t.DevelopmentWarnings.warnProblematicCombination(n,e,`Invalid tag rejected, using default '${i}' instead`,"warning"),{tag:i,validation:s}):{tag:r,validation:s}}function p(n,i){return e=>v(n,i,e)}exports.COMPONENT_ELIGIBILITY=u;exports.ElementTagValidator=g;exports.SEMANTIC_TAG_ROLES=c;exports.VALID_HTML_TAGS=o;exports.configureElementOverrides=f;exports.createElementOverrideValidator=p;exports.getElementOverrideConfig=m;exports.processElementOverride=v;exports.shouldWarnOnOverride=d;
+//# sourceMappingURL=element-override.cjs.map

package/dist/runtime/element-override.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-override.cjs","sources":["../../src/runtime/element-override.ts"],"sourcesContent":["/**\n * Element Override System - Tag Specification Enhancement\n * \n * Enables components to override their default HTML tags for semantic markup,\n * improving SEO and accessibility while preserving all styling and functionality.\n */\n\nimport { DevelopmentWarnings } from './development-warnings'\n\nexport interface ElementOverrideProps {\n  element?: string\n}\n\nexport interface ValidationResult {\n  valid: boolean\n  warnings?: Warning[]\n  severity?: 'error' | 'warning' | 'info'\n  warning?: string\n  semanticRole?: SemanticRoleInfo\n}\n\nexport interface Warning {\n  message: string\n  severity: 'error' | 'warning' | 'info'\n}\n\nexport interface SemanticRoleInfo {\n  role: string\n  applyARIA: boolean\n}\n\nexport interface ElementOverrideConfig {\n  // Accessibility\n  autoApplySemanticRoles: boolean\n  \n  // Development warnings\n  warnOnOverrides: boolean\n  warnOnSemanticIssues: boolean\n  \n  // Validation\n  validateTags: boolean\n  allowInvalidTags: boolean\n}\n\n// Valid HTML tag validation\nexport const VALID_HTML_TAGS = new Set([\n  // Container tags\n  'div', 'section', 'article', 'aside', 'nav', 'main', 'header', 'footer',\n  // Heading tags  \n  'h1', 'h2', 'h3', 'h4', 'h5', 'h6',\n  // Content tags\n  'p', 'span', 'strong', 'em', 'code', 'pre', 'blockquote', 'address',\n  // List tags\n  'ul', 'ol', 'li', 'dl', 'dt', 'dd',\n  // Interactive tags (with warnings)\n  'button', 'a', 'input', 'textarea', 'select', 'form', 'label',\n  // Media tags\n  'img', 'video', 'audio', 'canvas', 'svg', 'picture', 'source',\n  // Table tags\n  'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'caption', 'colgroup', 'col',\n  // Form tags\n  'fieldset', 'legend', 'optgroup', 'option', 'datalist', 'output', 'progress', 'meter',\n  // Interactive content\n  'details', 'summary', 'dialog',\n  // Text semantics\n  'abbr', 'cite', 'dfn', 'kbd', 'mark', 'q', 's', 'samp', 'small', 'sub', 'sup', 'time', 'u', 'var',\n  // Document sections\n  'body', 'head', 'title', 'base', 'link', 'meta', 'style', 'script', 'noscript',\n  // Embedded content\n  'embed', 'iframe', 'object', 'param', 'track', 'map', 'area',\n  // Interactive elements\n  'menu', 'menuitem'\n])\n\nexport const SEMANTIC_TAG_ROLES = new Map<string, SemanticRoleInfo>([\n  ['nav', { role: 'navigation', applyARIA: true }],\n  ['main', { role: 'main', applyARIA: true }],\n  ['article', { role: 'article', applyARIA: true }],\n  ['section', { role: 'region', applyARIA: true }],\n  ['aside', { role: 'complementary', applyARIA: true }],\n  ['header', { role: 'banner', applyARIA: false }], // Context dependent - may not always be page banner\n  ['footer', { role: 'contentinfo', applyARIA: false }], // Context dependent - may not always be page footer\n  ['form', { role: 'form', applyARIA: true }],\n  ['search', { role: 'search', applyARIA: true }],\n  ['dialog', { role: 'dialog', applyARIA: true }],\n  ['button', { role: 'button', applyARIA: false }], // Usually implicit\n  ['a', { role: 'link', applyARIA: false }], // Usually implicit\n])\n\n/**\n * Component Eligibility Matrix - Warning Levels\n * Based on design/Enh-TagSpecification.md Component Eligibility Matrix\n */\nexport const COMPONENT_ELIGIBILITY = new Map<string, { warningLevel: 'none' | 'info' | 'warning', idealTags?: string[], problematicTags?: string[] }>([\n  // Layout Components - Ideal for semantic containers (Warning Level: None)\n  ['HStack', { warningLevel: 'none', idealTags: ['nav', 'header', 'footer', 'section', 'article', 'aside', 'main', 'div'] }],\n  ['VStack', { warningLevel: 'none', idealTags: ['main', 'section', 'article', 'aside', 'header', 'footer', 'div'] }],\n  ['ZStack', { warningLevel: 'none', idealTags: ['article', 'aside', 'section', 'div'] }],\n  \n  // Content Components - Common for specific overrides (Warning Level: None for appropriate tags)\n  ['Text', { warningLevel: 'none', idealTags: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'strong', 'em'] }],\n  ['Image', { warningLevel: 'warning', problematicTags: ['figure', 'picture'] }], // May break functionality\n  ['Spacer', { warningLevel: 'none' }],\n  \n  // Interactive Components - Use with warnings\n  ['Button', { warningLevel: 'warning', problematicTags: ['div', 'span', 'a'] }], // May break accessibility\n  ['Link', { warningLevel: 'warning', problematicTags: ['div', 'span', 'button'] }], // May break navigation\n])\n\n/**\n * Check if an element override should show a warning based on component eligibility matrix\n */\nexport function shouldWarnOnOverride(componentType: string, tag: string): boolean {\n  const eligibility = COMPONENT_ELIGIBILITY.get(componentType)\n  \n  if (!eligibility) {\n    // Unknown component - always warn for safety\n    return true\n  }\n\n  // If component has no warning for any overrides\n  if (eligibility.warningLevel === 'none') {\n    return false\n  }\n\n  // If component warns for specific problematic tags\n  if (eligibility.warningLevel === 'warning' && eligibility.problematicTags) {\n    return eligibility.problematicTags.includes(tag)\n  }\n\n  // If component has ideal tags defined, only warn for non-ideal ones\n  if (eligibility.idealTags && eligibility.idealTags.includes(tag)) {\n    return false\n  }\n\n  // Default to warning for unknown combinations\n  return true\n}\n\n/**\n * The applyARIA flag controls whether the framework automatically adds \n * the corresponding ARIA role attribute to elements with semantic tags.\n * \n * applyARIA: true  - Always add the ARIA role (e.g., <nav> gets role=\"navigation\")\n * applyARIA: false - Don't automatically add ARIA role due to context sensitivity\n * \n * Examples:\n * - <nav> always represents navigation → applyARIA: true\n * - <header> could be page banner OR section header → applyARIA: false  \n * - <footer> could be page footer OR article footer → applyARIA: false\n * \n * When applyARIA is false, developers should manually specify appropriate \n * ARIA roles using the .aria() modifier when semantic meaning is ambiguous.\n */\n\nexport class ElementTagValidator {\n  static validate(tag: string, componentType: string): ValidationResult {\n    if (!VALID_HTML_TAGS.has(tag)) {\n      // Show development warning for invalid tags\n      DevelopmentWarnings.errorInvalidTag(tag, componentType)\n      \n      return {\n        valid: false,\n        warning: `Invalid HTML tag '${tag}' specified for ${componentType}. Tag will be used as-is.`,\n        severity: 'error'\n      }\n    }\n\n    // Check for potentially problematic combinations\n    const warnings = this.checkSemanticWarnings(tag, componentType)\n    \n    return {\n      valid: true,\n      warnings,\n      semanticRole: SEMANTIC_TAG_ROLES.get(tag)\n    }\n  }\n\n  private static checkSemanticWarnings(tag: string, componentType: string): Warning[] {\n    const warnings: Warning[] = []\n\n    // Warn about interactive tags on layout components\n    if (['button', 'a', 'input', 'select', 'textarea'].includes(tag)) {\n      if (['HStack', 'VStack', 'ZStack'].includes(componentType)) {\n        const message = `Using interactive tag '${tag}' on layout component ${componentType} may cause accessibility issues.`\n        warnings.push({ message, severity: 'warning' })\n        DevelopmentWarnings.warnAccessibility(componentType, tag, 'Interactive tag on layout component may cause unexpected behavior')\n      }\n    }\n\n    // Warn about structural violations\n    if (tag === 'li' && !['VStack', 'HStack'].includes(componentType)) {\n      const message = `<li> tags should typically be used within list structures.`\n      warnings.push({ message, severity: 'info' })\n      DevelopmentWarnings.warnProblematicCombination(componentType, tag, 'Consider using within <ul> or <ol> structure', 'info')\n    }\n\n    // Warn about heading tags on layout components\n    if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tag)) {\n      if (['HStack', 'VStack', 'ZStack'].includes(componentType)) {\n        const message = `Using heading tag '${tag}' on layout component ${componentType}. Consider using Text component instead.`\n        warnings.push({ message, severity: 'info' })\n        DevelopmentWarnings.warnProblematicCombination(componentType, tag, 'Heading tags are better suited for Text components', 'info')\n      }\n    }\n\n    // Warn about form tags on non-form components\n    if (['form', 'fieldset', 'legend'].includes(tag)) {\n      if (!['VStack', 'HStack', 'Form'].includes(componentType)) {\n        const message = `Form tag '${tag}' used on ${componentType}. Ensure proper form semantics.`\n        warnings.push({ message, severity: 'info' })\n        DevelopmentWarnings.warnProblematicCombination(componentType, tag, 'Form tags require proper semantic context', 'info')\n      }\n    }\n\n    return warnings\n  }\n}\n\n// Global configuration\nlet globalConfig: ElementOverrideConfig = {\n  autoApplySemanticRoles: true,\n  warnOnOverrides: process.env.NODE_ENV !== 'production',\n  warnOnSemanticIssues: process.env.NODE_ENV !== 'production',\n  validateTags: true,\n  allowInvalidTags: true\n}\n\nexport function configureElementOverrides(config: Partial<ElementOverrideConfig>): void {\n  globalConfig = { ...globalConfig, ...config }\n}\n\nexport function getElementOverrideConfig(): ElementOverrideConfig {\n  return { ...globalConfig }\n}\n\n/**\n * Process element override for a component with validation and warnings\n */\nexport function processElementOverride(\n  componentType: string,\n  defaultTag: string,\n  overrideTag?: string\n): { tag: string; validation: ValidationResult } {\n  const effectiveTag = overrideTag || defaultTag\n  const config = getElementOverrideConfig()\n\n  // Always validate in development, even when validation is disabled\n  let validation: ValidationResult = { valid: true }\n  \n  if (overrideTag) {\n    // Show override warning if enabled and appropriate per component eligibility matrix\n    if (config.warnOnOverrides && shouldWarnOnOverride(componentType, overrideTag)) {\n      DevelopmentWarnings.warnElementOverride(componentType, defaultTag, overrideTag)\n    }\n\n    // Validate tag if enabled\n    if (config.validateTags) {\n      validation = ElementTagValidator.validate(overrideTag, componentType)\n      \n      // If validation fails and we don't allow invalid tags, use default\n      if (!validation.valid && !config.allowInvalidTags) {\n        DevelopmentWarnings.warnProblematicCombination(\n          componentType, \n          overrideTag, \n          `Invalid tag rejected, using default '${defaultTag}' instead`, \n          'warning'\n        )\n        return { tag: defaultTag, validation }\n      }\n    }\n  }\n\n  return { tag: effectiveTag, validation }\n}\n\n/**\n * Create element override validation helper for components\n */\nexport function createElementOverrideValidator(componentType: string, defaultTag: string) {\n  return (overrideTag?: string) => processElementOverride(componentType, defaultTag, overrideTag)\n}"],"names":["VALID_HTML_TAGS","SEMANTIC_TAG_ROLES","COMPONENT_ELIGIBILITY","shouldWarnOnOverride","componentType","tag","eligibility","ElementTagValidator","DevelopmentWarnings","warnings","message","globalConfig","configureElementOverrides","config","getElementOverrideConfig","processElementOverride","defaultTag","overrideTag","effectiveTag","validation","createElementOverrideValidator"],"mappings":"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"}

package/dist/runtime/element-override.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Element Override System - Tag Specification Enhancement
+ *
+ * Enables components to override their default HTML tags for semantic markup,
+ * improving SEO and accessibility while preserving all styling and functionality.
+ */
+export interface ElementOverrideProps {
+    element?: string;
+}
+export interface ValidationResult {
+    valid: boolean;
+    warnings?: Warning[];
+    severity?: 'error' | 'warning' | 'info';
+    warning?: string;
+    semanticRole?: SemanticRoleInfo;
+}
+export interface Warning {
+    message: string;
+    severity: 'error' | 'warning' | 'info';
+}
+export interface SemanticRoleInfo {
+    role: string;
+    applyARIA: boolean;
+}
+export interface ElementOverrideConfig {
+    autoApplySemanticRoles: boolean;
+    warnOnOverrides: boolean;
+    warnOnSemanticIssues: boolean;
+    validateTags: boolean;
+    allowInvalidTags: boolean;
+}
+export declare const VALID_HTML_TAGS: Set<string>;
+export declare const SEMANTIC_TAG_ROLES: Map<string, SemanticRoleInfo>;
+/**
+ * Component Eligibility Matrix - Warning Levels
+ * Based on design/Enh-TagSpecification.md Component Eligibility Matrix
+ */
+export declare const COMPONENT_ELIGIBILITY: Map<string, {
+    warningLevel: "none" | "info" | "warning";
+    idealTags?: string[];
+    problematicTags?: string[];
+}>;
+/**
+ * Check if an element override should show a warning based on component eligibility matrix
+ */
+export declare function shouldWarnOnOverride(componentType: string, tag: string): boolean;
+/**
+ * The applyARIA flag controls whether the framework automatically adds
+ * the corresponding ARIA role attribute to elements with semantic tags.
+ *
+ * applyARIA: true  - Always add the ARIA role (e.g., <nav> gets role="navigation")
+ * applyARIA: false - Don't automatically add ARIA role due to context sensitivity
+ *
+ * Examples:
+ * - <nav> always represents navigation → applyARIA: true
+ * - <header> could be page banner OR section header → applyARIA: false
+ * - <footer> could be page footer OR article footer → applyARIA: false
+ *
+ * When applyARIA is false, developers should manually specify appropriate
+ * ARIA roles using the .aria() modifier when semantic meaning is ambiguous.
+ */
+export declare class ElementTagValidator {
+    static validate(tag: string, componentType: string): ValidationResult;
+    private static checkSemanticWarnings;
+}
+export declare function configureElementOverrides(config: Partial<ElementOverrideConfig>): void;
+export declare function getElementOverrideConfig(): ElementOverrideConfig;
+/**
+ * Process element override for a component with validation and warnings
+ */
+export declare function processElementOverride(componentType: string, defaultTag: string, overrideTag?: string): {
+    tag: string;
+    validation: ValidationResult;
+};
+/**
+ * Create element override validation helper for components
+ */
+export declare function createElementOverrideValidator(componentType: string, defaultTag: string): (overrideTag?: string) => {
+    tag: string;
+    validation: ValidationResult;
+};
+//# sourceMappingURL=element-override.d.ts.map

package/dist/runtime/element-override.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-override.d.ts","sourceRoot":"","sources":["../../src/runtime/element-override.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;IACvC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,gBAAgB,CAAA;CAChC;AAED,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;CACvC;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB;IAEpC,sBAAsB,EAAE,OAAO,CAAA;IAG/B,eAAe,EAAE,OAAO,CAAA;IACxB,oBAAoB,EAAE,OAAO,CAAA;IAG7B,YAAY,EAAE,OAAO,CAAA;IACrB,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAGD,eAAO,MAAM,eAAe,aA2B1B,CAAA;AAEF,eAAO,MAAM,kBAAkB,+BAa7B,CAAA;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB;kBAAmC,MAAM,GAAG,MAAM,GAAG,SAAS;gBAAc,MAAM,EAAE;sBAAoB,MAAM,EAAE;EAchJ,CAAA;AAEF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAyBhF;AAED;;;;;;;;;;;;;;GAcG;AAEH,qBAAa,mBAAmB;IAC9B,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,gBAAgB;IAsBrE,OAAO,CAAC,MAAM,CAAC,qBAAqB;CAuCrC;AAWD,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,OAAO,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAEtF;AAED,wBAAgB,wBAAwB,IAAI,qBAAqB,CAEhE;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,EACrB,UAAU,EAAE,MAAM,EAClB,WAAW,CAAC,EAAE,MAAM,GACnB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,gBAAgB,CAAA;CAAE,CA+B/C;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,IAC9E,cAAc,MAAM;SArCpB,MAAM;gBAAc,gBAAgB;EAsC7C"}