@tachui/core 0.7.0-alpha1

package/dist/components/wrapper.js

@@ -0,0 +1,484 @@
+import "../reactive/cleanup.js";
+import "../reactive/unified-scheduler.js";
+import "../reactive/signal.js";
+import "../reactive/scheduler.js";
+import "../reactive/theme.js";
+import { createModifierBuilder as w } from "../modifiers/builder.js";
+import "../modifiers/core.js";
+import { createModifiableComponent as T } from "../modifiers/registry.js";
+import "../modifiers/responsive/breakpoints.js";
+import "../modifiers/responsive/css-generator.js";
+import "../modifiers/responsive/performance.js";
+import "../modifiers/responsive/dev-tools.js";
+import "../modifiers/effects.js";
+import "../modifiers/elements.js";
+import "../modifiers/basic-sanitizer.js";
+import "../modifiers/as-html-validator.js";
+import "../runtime/component.js";
+import "../runtime/context.js";
+import "../runtime/dev-tools.js";
+import { registerComponentWithLifecycleHooks as x } from "../runtime/dom-bridge.js";
+import "../runtime/error-boundary.js";
+import "../runtime/error-reporting.js";
+import "../runtime/performance.js";
+import { h as A, text as E } from "../runtime/renderer.js";
+import { processElementOverride as R } from "../runtime/element-override.js";
+import "../runtime/semantic-role-manager.js";
+import "../runtime/development-warnings.js";
+import { useLifecycle as P } from "../lifecycle/hooks.js";
+import "../css-classes/css-class-manager.js";
+import { ComponentWithCSSClasses as H } from "../css-classes/component-base.js";
+var $ = Object.defineProperty, D = (t, e, i) => e in t ? $(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, m = (t, e, i) => D(t, typeof e != "symbol" ? e + "" : e, i);
+let M = null;
+const _ = () => {
+  if (!M)
+    try {
+      M = require("../debug").debugManager;
+    } catch {
+      M = {
+        isEnabled: () => !1,
+        logComponent: () => {
+        }
+      };
+    }
+  return M;
+};
+function L(t) {
+  return t && typeof t.concat == "function" && typeof t.toSegment == "function" && typeof t.isConcatenatable == "function";
+}
+function c(t) {
+  const e = T(t), i = w(e), n = {
+    ...e,
+    modifier: i,
+    modifierBuilder: i
+  };
+  return L(t) && (n.concat = function(r) {
+    return t.concat(r);
+  }, n.toSegment = function() {
+    return t.toSegment();
+  }, n.isConcatenatable = function() {
+    return t.isConcatenatable();
+  }), n;
+}
+function mt(t, e = {}) {
+  const { enableModifiers: i = !0 } = e;
+  return (n) => {
+    const r = {
+      type: "component",
+      id: `wrapper-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      props: n,
+      mounted: !1,
+      cleanup: [],
+      render() {
+        const a = t(n);
+        return Array.isArray(a) ? a : [a];
+      }
+    };
+    return c(r);
+  };
+}
+class g {
+  constructor(e, i, n, r = {}) {
+    this.props = e, this.tag = i, this.content = n, this.attributes = r, m(this, "type", "component"), m(this, "id"), m(this, "mounted", !1), m(this, "cleanup", []), this.id = `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  render() {
+    return [A(this.tag, this.attributes, this.content ? E(this.content) : "")];
+  }
+}
+const b = {
+  /**
+   * Create a div element with modifier support
+   */
+  div: (t = {}) => {
+    const e = new g(
+      t,
+      "div",
+      t.children ? String(t.children) : void 0
+    );
+    return c(e);
+  },
+  /**
+   * Create a span element with modifier support
+   */
+  span: (t = {}) => {
+    const e = new g(
+      t,
+      "span",
+      t.children ? String(t.children) : void 0
+    );
+    return c(e);
+  },
+  /**
+   * Create a paragraph element with modifier support
+   */
+  p: (t = {}) => {
+    const e = new g(
+      t,
+      "p",
+      t.children ? String(t.children) : void 0
+    );
+    return c(e);
+  },
+  /**
+   * Create a button element with modifier support
+   *
+   * Note: For enhanced button features (press states, variants, accessibility),
+   * use the main Button component instead.
+   */
+  button: (t = {}) => {
+    const e = new g(
+      t,
+      "button",
+      t.children ? String(t.children) : void 0,
+      {
+        onclick: t.onClick
+      }
+    );
+    return c(e);
+  },
+  /**
+   * Create an input element with modifier support
+   */
+  input: (t = {}) => {
+    const e = new g(t, "input", void 0, {
+      type: t.type || "text",
+      value: t.value || "",
+      placeholder: t.placeholder || "",
+      oninput: (i) => {
+        const n = i.target;
+        t.onChange?.(n.value);
+      }
+    });
+    return c(e);
+  },
+  /**
+   * Create an image element with modifier support
+   *
+   * Note: For enhanced image features (loading states, content modes, progressive loading),
+   * use the main Image component instead.
+   */
+  img: (t) => {
+    const e = new g(t, "img", void 0, {
+      src: t.src,
+      alt: t.alt || "",
+      width: t.width,
+      height: t.height
+    });
+    return c(e);
+  },
+  /**
+   * Create a heading element with modifier support
+   */
+  heading: (t) => (e = {}) => {
+    const i = new g(
+      e,
+      `h${t}`,
+      e.children ? String(e.children) : void 0
+    );
+    return c(i);
+  }
+}, ft = b.heading(1), pt = b.heading(2), ht = b.heading(3), yt = b.heading(4), gt = b.heading(5), vt = b.heading(6);
+class v extends H {
+  constructor(e, i, n = [], r = {}) {
+    super(), this.props = e, this.layoutType = i, this.children = n, this.layoutProps = r, m(this, "type", "component"), m(this, "id"), m(this, "mounted", !1), m(this, "cleanup", []), m(this, "effectiveTag"), m(this, "validationResult"), this.id = `layout-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const a = this.layoutType === "hstack" ? "HStack" : this.layoutType === "vstack" ? "VStack" : "ZStack", h = R(a, "div", this.props.element);
+    this.effectiveTag = h.tag, this.validationResult = h.validation, P(this, {
+      onDOMReady: (C, f) => {
+        this.children.forEach((s, y) => {
+          const o = s._enhancedLifecycle;
+          if (o && o.onDOMReady && !s.domReady)
+            try {
+              if (f) {
+                const u = this.findChildDOMElements(s, f, y);
+                if (u.length > 0) {
+                  s.domElements = /* @__PURE__ */ new Map(), u.forEach((p, S) => {
+                    const d = p.id || `element-${S}`;
+                    s.domElements.set(d, p), s.primaryElement || (s.primaryElement = p);
+                  }), s.domReady = !0;
+                  const l = o.onDOMReady(
+                    s.domElements,
+                    s.primaryElement
+                  );
+                  if (typeof l == "function" && (s.cleanup = s.cleanup || [], s.cleanup.push(l)), o.onMount) {
+                    const p = o.onMount();
+                    typeof p == "function" && (s.cleanup = s.cleanup || [], s.cleanup.push(p));
+                  }
+                }
+              }
+            } catch (u) {
+              console.error(`Error processing lifecycle hooks for child ${s.id}:`, u);
+            }
+        });
+      }
+    }), x(this);
+  }
+  /**
+   * Find DOM elements for a specific child component within the layout container
+   */
+  findChildDOMElements(e, i, n) {
+    if (e.id.startsWith("image-")) {
+      const a = i.querySelectorAll("img.tachui-image");
+      return a[n] ? [a[n]] : Array.from(a);
+    }
+    if (e.id.startsWith("button-")) {
+      const a = i.querySelectorAll("button.tachui-button");
+      return a[n] ? [a[n]] : Array.from(a);
+    }
+    if (e.id.startsWith("text-")) {
+      const a = i.querySelectorAll("span.tachui-text, .tachui-text");
+      return a[n] ? [a[n]] : Array.from(a);
+    }
+    const r = Array.from(i.children);
+    return r[n] ? [r[n]] : r;
+  }
+  render() {
+    const { spacing: e = 0, debugLabel: i } = this.layoutProps, n = this.layoutProps.alignment !== void 0 ? this.layoutProps.alignment : "center", r = _();
+    r.logComponent(this.layoutType.toUpperCase(), i);
+    const a = [`tachui-${this.layoutType}`, ...r.isEnabled() ? ["tachui-debug"] : []], h = this.createClassString(this.props, a);
+    switch (this.layoutType) {
+      case "vstack": {
+        const f = this.children.map((y) => {
+          const o = y.render();
+          return Array.isArray(o) ? o : [o];
+        }).flat();
+        return [{
+          type: "element",
+          tag: this.effectiveTag,
+          props: {
+            className: h,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: e ? `${e}px` : "0",
+              alignItems: n === "leading" ? "flex-start" : n === "trailing" ? "flex-end" : "center"
+            },
+            // Add debug attributes
+            ...r.isEnabled() && {
+              "data-tachui-component": "VStack",
+              ...i && { "data-tachui-label": i }
+            }
+          },
+          children: f,
+          // Add component metadata for semantic role processing
+          componentMetadata: {
+            originalType: "VStack",
+            overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
+            validationResult: this.validationResult
+          }
+        }];
+      }
+      case "hstack": {
+        const f = this.children.map((y) => {
+          const o = y.render();
+          return Array.isArray(o) ? o : [o];
+        }).flat();
+        return [{
+          type: "element",
+          tag: this.effectiveTag,
+          props: {
+            className: h,
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              gap: e ? `${e}px` : "0",
+              alignItems: n === "top" ? "flex-start" : n === "bottom" ? "flex-end" : "center"
+            },
+            // Add debug attributes
+            ...r.isEnabled() && {
+              "data-tachui-component": "HStack",
+              ...i && { "data-tachui-label": i }
+            }
+          },
+          children: f,
+          // Add component metadata for semantic role processing
+          componentMetadata: {
+            originalType: "HStack",
+            overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
+            validationResult: this.validationResult
+          }
+        }];
+      }
+      case "zstack": {
+        let C = -1 / 0, f = null;
+        this.children.forEach((o) => {
+          if ("modifiers" in o && Array.isArray(o.modifiers)) {
+            const u = o.modifiers.find(
+              (l) => l.type === "layout" && l.properties && "layoutPriority" in l.properties && typeof l.properties.layoutPriority == "number"
+            );
+            if (u) {
+              const l = u.properties.layoutPriority;
+              l > C && (C = l, f = o);
+            }
+          }
+        });
+        const s = A("div", {
+          className: h,
+          style: {
+            position: "relative",
+            display: "flex",
+            justifyContent: n.includes("Leading") ? "flex-start" : n.includes("Trailing") ? "flex-end" : "center",
+            alignItems: n.includes("top") ? "flex-start" : n.includes("bottom") ? "flex-end" : "center",
+            // Container sizes to the highest priority child
+            ...f ? {
+              minWidth: "fit-content",
+              minHeight: "fit-content"
+            } : {}
+          },
+          // Add debug attributes
+          ...r.isEnabled() && {
+            "data-tachui-component": "ZStack",
+            ...i && { "data-tachui-label": i }
+          }
+        }), y = this.children.flatMap((o, u) => {
+          const l = o.render(), p = Array.isArray(l) ? l : [l];
+          let S = u;
+          if ("modifiers" in o && Array.isArray(o.modifiers)) {
+            const d = o.modifiers.find(
+              (k) => k.type === "layout" && k.properties && "layoutPriority" in k.properties
+            );
+            d && typeof d.properties.layoutPriority == "number" && (S = d.properties.layoutPriority);
+          }
+          return p.map((d) => {
+            if (d.type === "element") {
+              const k = o === f;
+              return {
+                ...d,
+                props: {
+                  ...d.props,
+                  style: {
+                    ...d.props?.style,
+                    // Highest priority child determines container size
+                    ...k ? {
+                      position: "relative",
+                      zIndex: S
+                    } : {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      zIndex: S
+                    }
+                  }
+                }
+              };
+            }
+            return d;
+          });
+        });
+        return [
+          {
+            type: "element",
+            tag: this.effectiveTag,
+            props: {
+              ...s.props,
+              className: h
+            },
+            children: y,
+            // Add component metadata for semantic role processing
+            componentMetadata: {
+              originalType: "ZStack",
+              overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
+              validationResult: this.validationResult
+            }
+          }
+        ];
+      }
+      default:
+        return [
+          {
+            type: "element",
+            tag: "div",
+            props: {},
+            children: []
+          }
+        ];
+    }
+  }
+}
+const bt = {
+  /**
+   * Vertical stack container (flexbox column)
+   */
+  VStack: (t = {}) => {
+    const { children: e = [], spacing: i = 0, alignment: n = "center" } = t, r = new v(t, "vstack", e, { spacing: i, alignment: n });
+    return c(r);
+  },
+  /**
+   * Horizontal stack container (flexbox row)
+   */
+  HStack: (t = {}) => {
+    const { children: e = [], spacing: i = 0, alignment: n = "center" } = t, r = new v(t, "hstack", e, { spacing: i, alignment: n });
+    return c(r);
+  },
+  /**
+   * Z-index stack container (absolute positioning)
+   */
+  ZStack: (t = {}) => {
+    const { children: e = [], alignment: i = "center" } = t, n = new v(t, "zstack", e, { alignment: i });
+    return c(n);
+  }
+};
+function Ct(t = {}) {
+  const { children: e = [], spacing: i = 0, debugLabel: n } = t, r = t.alignment !== void 0 ? t.alignment : "center", a = new v(t, "vstack", e, { spacing: i, alignment: r, debugLabel: n });
+  return c(a);
+}
+function St(t = {}) {
+  const { children: e = [], spacing: i = 0, debugLabel: n } = t, r = t.alignment !== void 0 ? t.alignment : "center", a = new v(t, "hstack", e, { spacing: i, alignment: r, debugLabel: n });
+  return c(a);
+}
+function kt(t = {}) {
+  const { children: e = [], alignment: i = "center" } = t, n = new v(t, "zstack", e, { alignment: i });
+  return c(n);
+}
+function Mt(t) {
+  return c(t);
+}
+function wt(t) {
+  return class extends t {
+    constructor(e) {
+      super(e), m(this, "_modifiableComponent"), this._modifiableComponent = c(this);
+    }
+    get modifier() {
+      return w(this._modifiableComponent);
+    }
+    get modifiers() {
+      return this._modifiableComponent.modifiers;
+    }
+  };
+}
+function At(t) {
+  return (e) => {
+    const i = {
+      type: "component",
+      id: `factory-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      props: e,
+      mounted: !1,
+      cleanup: [],
+      render() {
+        const n = t(e);
+        return Array.isArray(n) ? n : [n];
+      }
+    };
+    return c(i);
+  };
+}
+export {
+  ft as H1,
+  pt as H2,
+  ht as H3,
+  yt as H4,
+  gt as H5,
+  vt as H6,
+  St as HStack,
+  b as HTML,
+  bt as Layout,
+  Ct as VStack,
+  kt as ZStack,
+  At as createModifiableComponentFactory,
+  mt as createReactiveWrapper,
+  wt as withModifierSupport,
+  c as withModifiers,
+  Mt as wrapComponent
+};
+//# sourceMappingURL=wrapper.js.map

package/dist/components/wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapper.js","sources":["../../src/components/wrapper.ts"],"sourcesContent":["/**\n * Component Wrapper System\n *\n * Provides wrapper functions to enhance regular components with modifier support\n * and integrate them with the TachUI modifier system.\n */\n\nimport { createModifiableComponent, createModifierBuilder } from '../modifiers'\nimport type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'\nimport { h, text } from '../runtime'\nimport type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types'\nimport { useLifecycle } from '../lifecycle/hooks'\nimport { registerComponentWithLifecycleHooks } from '../runtime/dom-bridge'\nimport { \n  processElementOverride, \n  type ElementOverrideProps \n} from '../runtime/element-override'\nimport {\n  ComponentWithCSSClasses,\n  type CSSClassesProps\n} from '../css-classes'\nimport type { Concatenatable } from '../concatenation/types'\n// Lazy import debug manager to avoid circular dependencies\nlet debugManager: any = null\nconst getDebugManager = () => {\n  if (!debugManager) {\n    try {\n      const debugModule = require('../debug')\n      debugManager = debugModule.debugManager\n    } catch {\n      // Debug module not available, create a mock\n      debugManager = {\n        isEnabled: () => false,\n        logComponent: () => {},\n      }\n    }\n  }\n  return debugManager\n}\n\n/**\n * Wrapper options for enhancing components\n */\nexport interface WrapperOptions {\n  enableModifiers?: boolean\n  enableReactivity?: boolean\n  enableErrorBoundary?: boolean\n  enablePerformanceTracking?: boolean\n}\n\n/**\n * Helper function to check if a component implements Concatenatable\n */\nfunction isConcatenatable(component: any): component is Concatenatable {\n  return component && \n         typeof component.concat === 'function' && \n         typeof component.toSegment === 'function' && \n         typeof component.isConcatenatable === 'function'\n}\n\n/**\n * Enhanced component wrapper that adds modifier support and preserves concatenation methods\n */\nexport function withModifiers<P extends ComponentProps>(\n  component: ComponentInstance<P>\n): ModifiableComponent<P> & { modifier: ModifierBuilder<ModifiableComponent<P>> } & (ComponentInstance<P> extends Concatenatable ? Concatenatable : {}) {\n  const modifiableComponent = createModifiableComponent(component)\n  const modifierBuilder = createModifierBuilder(modifiableComponent)\n\n  const result: any = {\n    ...modifiableComponent,\n    modifier: modifierBuilder,\n    modifierBuilder: modifierBuilder,\n  }\n\n  // If the original component supports concatenation, preserve those methods\n  if (isConcatenatable(component)) {\n    result.concat = function(other: any) {\n      return (component as any).concat(other)\n    }\n    result.toSegment = function() {\n      return (component as any).toSegment()\n    }\n    result.isConcatenatable = function() {\n      return (component as any).isConcatenatable()\n    }\n  }\n\n  return result\n}\n\n/**\n * Create a reactive component wrapper with full TachUI features\n */\nexport function createReactiveWrapper<P extends ComponentProps>(\n  renderFn: (props: P) => DOMNode | DOMNode[],\n  options: WrapperOptions = {}\n): (props: P) => ModifiableComponent<P> & { modifier: ModifierBuilder<ModifiableComponent<P>> } {\n  const { enableModifiers = true } = options\n\n  return (props: P) => {\n    // Create a simple component instance that uses the render function\n    const component: ComponentInstance<P> = {\n      type: 'component' as const,\n      id: `wrapper-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,\n      props,\n      mounted: false,\n      cleanup: [],\n      render() {\n        const result = renderFn(props)\n        return Array.isArray(result) ? result : [result]\n      },\n    }\n\n    // Add modifier support if enabled\n    if (enableModifiers) {\n      return withModifiers(component)\n    }\n\n    // Return basic component with minimal wrapper\n    return withModifiers(component)\n  }\n}\n\n/**\n * Simple element component class\n */\nclass ElementComponent implements ComponentInstance<ComponentProps> {\n  public readonly type = 'component' as const\n  public readonly id: string\n  public mounted = false\n  public cleanup: (() => void)[] = []\n\n  constructor(\n    public props: ComponentProps,\n    private tag: string,\n    private content?: string,\n    private attributes: Record<string, any> = {}\n  ) {\n    this.id = `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n  }\n\n  render() {\n    return [h(this.tag, this.attributes, this.content ? text(this.content) : '')]\n  }\n}\n\n/**\n * Simple HTML element wrappers with modifier support\n *\n * These are basic HTML element wrappers for simple use cases.\n * For enhanced SwiftUI-style components with advanced features,\n * use the main component exports (Button, Image, Text, etc.).\n */\nexport const HTML = {\n  /**\n   * Create a div element with modifier support\n   */\n  div: (props: { children?: any } = {}) => {\n    const component = new ElementComponent(\n      props,\n      'div',\n      props.children ? String(props.children) : undefined\n    )\n    return withModifiers(component)\n  },\n\n  /**\n   * Create a span element with modifier support\n   */\n  span: (props: { children?: any } = {}) => {\n    const component = new ElementComponent(\n      props,\n      'span',\n      props.children ? String(props.children) : undefined\n    )\n    return withModifiers(component)\n  },\n\n  /**\n   * Create a paragraph element with modifier support\n   */\n  p: (props: { children?: any } = {}) => {\n    const component = new ElementComponent(\n      props,\n      'p',\n      props.children ? String(props.children) : undefined\n    )\n    return withModifiers(component)\n  },\n\n  /**\n   * Create a button element with modifier support\n   *\n   * Note: For enhanced button features (press states, variants, accessibility),\n   * use the main Button component instead.\n   */\n  button: (props: { children?: any; onClick?: () => void } = {}) => {\n    const component = new ElementComponent(\n      props,\n      'button',\n      props.children ? String(props.children) : undefined,\n      {\n        onclick: props.onClick,\n      }\n    )\n    return withModifiers(component)\n  },\n\n  /**\n   * Create an input element with modifier support\n   */\n  input: (\n    props: {\n      type?: string\n      value?: string\n      placeholder?: string\n      onChange?: (value: string) => void\n    } = {}\n  ) => {\n    const component = new ElementComponent(props, 'input', undefined, {\n      type: props.type || 'text',\n      value: props.value || '',\n      placeholder: props.placeholder || '',\n      oninput: (e: Event) => {\n        const target = e.target as HTMLInputElement\n        props.onChange?.(target.value)\n      },\n    })\n    return withModifiers(component)\n  },\n\n  /**\n   * Create an image element with modifier support\n   *\n   * Note: For enhanced image features (loading states, content modes, progressive loading),\n   * use the main Image component instead.\n   */\n  img: (props: {\n    src: string\n    alt?: string\n    width?: number | string\n    height?: number | string\n  }) => {\n    const component = new ElementComponent(props, 'img', undefined, {\n      src: props.src,\n      alt: props.alt || '',\n      width: props.width,\n      height: props.height,\n    })\n    return withModifiers(component)\n  },\n\n  /**\n   * Create a heading element with modifier support\n   */\n  heading:\n    (level: 1 | 2 | 3 | 4 | 5 | 6) =>\n    (props: { children?: any } = {}) => {\n      const component = new ElementComponent(\n        props,\n        `h${level}`,\n        props.children ? String(props.children) : undefined\n      )\n      return withModifiers(component)\n    },\n}\n\n/**\n * Shorthand for heading elements\n */\nexport const H1 = HTML.heading(1)\nexport const H2 = HTML.heading(2)\nexport const H3 = HTML.heading(3)\nexport const H4 = HTML.heading(4)\nexport const H5 = HTML.heading(5)\nexport const H6 = HTML.heading(6)\n\n/**\n * Layout container component class with element override support\n */\nclass LayoutComponent extends ComponentWithCSSClasses implements ComponentInstance<ComponentProps & ElementOverrideProps & CSSClassesProps> {\n  public readonly type = 'component' as const\n  public readonly id: string\n  public mounted = false\n  public cleanup: (() => void)[] = []\n  private effectiveTag: string\n  private validationResult: any\n\n  constructor(\n    public props: ComponentProps & ElementOverrideProps & CSSClassesProps,\n    private layoutType: 'vstack' | 'hstack' | 'zstack',\n    public children: ComponentInstance[] = [],\n    private layoutProps: any = {}\n  ) {\n    super()\n    this.id = `layout-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n    \n    // Process element override for tag specification enhancement\n    const componentType = this.layoutType === 'hstack' ? 'HStack' : \n                         this.layoutType === 'vstack' ? 'VStack' : 'ZStack'\n    const override = processElementOverride(componentType, 'div', this.props.element)\n    this.effectiveTag = override.tag\n    this.validationResult = override.validation\n\n\n    // Set up lifecycle hooks to process child components\n    useLifecycle(this, {\n      onDOMReady: (_elements, primaryElement) => {\n        // Process lifecycle hooks for child components that have them\n        this.children.forEach((child, index) => {\n          const enhancedLifecycle = (child as any)._enhancedLifecycle\n          \n          if (enhancedLifecycle && enhancedLifecycle.onDOMReady && !child.domReady) {\n            try {\n              // Find DOM elements for this child by searching within our container\n              if (primaryElement) {\n                // For layout components, children are rendered as direct children\n                // Try to find the child's DOM element(s)\n                const childElements = this.findChildDOMElements(child, primaryElement, index)\n                \n                if (childElements.length > 0) {\n                  // Set up DOM tracking for the child\n                  child.domElements = new Map()\n                  childElements.forEach((element, idx) => {\n                    const key = element.id || `element-${idx}`\n                    child.domElements!.set(key, element)\n                    if (!child.primaryElement) {\n                      child.primaryElement = element\n                    }\n                  })\n\n                  child.domReady = true\n\n                  // Call the child's onDOMReady hook\n                  const cleanup = enhancedLifecycle.onDOMReady(\n                    child.domElements,\n                    child.primaryElement\n                  )\n                  if (typeof cleanup === 'function') {\n                    child.cleanup = child.cleanup || []\n                    child.cleanup.push(cleanup)\n                  }\n\n                  // Also call onMount if it exists\n                  if (enhancedLifecycle.onMount) {\n                    const mountCleanup = enhancedLifecycle.onMount()\n                    if (typeof mountCleanup === 'function') {\n                      child.cleanup = child.cleanup || []\n                      child.cleanup.push(mountCleanup)\n                    }\n                  }\n                }\n              }\n            } catch (error) {\n              console.error(`Error processing lifecycle hooks for child ${child.id}:`, error)\n              // Continue processing other children even if one fails\n            }\n          }\n        })\n      }\n    })\n\n    // Register this component for lifecycle processing\n    registerComponentWithLifecycleHooks(this)\n  }\n\n  /**\n   * Find DOM elements for a specific child component within the layout container\n   */\n  private findChildDOMElements(child: ComponentInstance, container: Element, childIndex: number): Element[] {\n    // For Image components, look for img elements with the tachui-image class\n    if (child.id.startsWith('image-')) {\n      const images = container.querySelectorAll('img.tachui-image')\n      // Since we don't have a perfect way to match, we'll use the childIndex as a heuristic\n      if (images[childIndex]) {\n        return [images[childIndex]]\n      }\n      // Fallback: return all images and let the component handle it\n      return Array.from(images)\n    }\n\n    // For Button components, look for button elements with the tachui-button class\n    if (child.id.startsWith('button-')) {\n      const buttons = container.querySelectorAll('button.tachui-button')\n      if (buttons[childIndex]) {\n        return [buttons[childIndex]]\n      }\n      // Fallback: return all buttons and let the component handle it\n      return Array.from(buttons)\n    }\n\n    // For Text components, look for span elements with the tachui-text class\n    if (child.id.startsWith('text-')) {\n      const textElements = container.querySelectorAll('span.tachui-text, .tachui-text')\n      if (textElements[childIndex]) {\n        return [textElements[childIndex]]\n      }\n      return Array.from(textElements)\n    }\n\n    // For other components, try to find any direct children elements\n    // This is a fallback that should work for most components\n    const allChildren = Array.from(container.children)\n    if (allChildren[childIndex]) {\n      return [allChildren[childIndex]]\n    }\n\n    // Final fallback: return all children and let the component handle it\n    return allChildren\n  }\n\n  render() {\n    const { spacing = 0, debugLabel } = this.layoutProps\n    // Explicitly handle alignment to avoid default override\n    const alignment = this.layoutProps.alignment !== undefined ? this.layoutProps.alignment : 'center'\n\n    // Log component for debugging\n    const debug = getDebugManager()\n    debug.logComponent(this.layoutType.toUpperCase(), debugLabel)\n    \n    // Process CSS classes for this component\n    const baseClasses = [`tachui-${this.layoutType}`, ...(debug.isEnabled() ? ['tachui-debug'] : [])]\n    const classString = this.createClassString(this.props, baseClasses)\n\n\n    switch (this.layoutType) {\n      case 'vstack': {\n        // Render children normally but also make them available for DOM bridge processing\n        const vstackRenderedChildren = this.children.map((child) => {\n          const childResult = child.render()\n          const resultArray = Array.isArray(childResult) ? childResult : [childResult]\n          return resultArray\n        })\n        const vstackFlattened = vstackRenderedChildren.flat()\n\n        const element = {\n          type: 'element' as const,\n          tag: this.effectiveTag,\n          props: {\n            className: classString,\n            style: {\n              display: 'flex',\n              flexDirection: 'column',\n              gap: spacing ? `${spacing}px` : '0',\n              alignItems:\n                alignment === 'leading'\n                  ? 'flex-start'\n                  : alignment === 'trailing'\n                    ? 'flex-end'\n                    : 'center',\n            },\n            // Add debug attributes\n            ...(debug.isEnabled() && {\n              'data-tachui-component': 'VStack',\n              ...(debugLabel && { 'data-tachui-label': debugLabel })\n            })\n          },\n          children: vstackFlattened,\n          // Add component metadata for semantic role processing\n          componentMetadata: {\n            originalType: 'VStack',\n            overriddenTo: this.effectiveTag !== 'div' ? this.effectiveTag : undefined,\n            validationResult: this.validationResult\n          }\n        }\n\n        return [element]\n      }\n\n      case 'hstack': {\n        const hstackRenderedChildren = this.children.map((child) => {\n          const childResult = child.render()\n          const resultArray = Array.isArray(childResult) ? childResult : [childResult]\n          return resultArray\n        })\n        const hstackFlattened = hstackRenderedChildren.flat()\n\n        const element = {\n          type: 'element' as const,\n          tag: this.effectiveTag,\n          props: {\n            className: classString,\n            style: {\n              display: 'flex',\n              flexDirection: 'row',\n              gap: spacing ? `${spacing}px` : '0',\n              alignItems:\n                alignment === 'top'\n                  ? 'flex-start'\n                  : alignment === 'bottom'\n                    ? 'flex-end'\n                    : 'center',\n            },\n            // Add debug attributes\n            ...(debug.isEnabled() && {\n              'data-tachui-component': 'HStack',\n              ...(debugLabel && { 'data-tachui-label': debugLabel })\n            })\n          },\n          children: hstackFlattened,\n          // Add component metadata for semantic role processing\n          componentMetadata: {\n            originalType: 'HStack',\n            overriddenTo: this.effectiveTag !== 'div' ? this.effectiveTag : undefined,\n            validationResult: this.validationResult\n          }\n        }\n\n        return [element]\n      }\n\n      case 'zstack': {\n        // Find the highest layoutPriority child to determine container size\n        let maxPriority = -Infinity\n        let highestPriorityChild: ComponentInstance | null = null\n\n        this.children.forEach((child) => {\n          if ('modifiers' in child && Array.isArray(child.modifiers)) {\n            const layoutMod = child.modifiers.find(\n              (m) =>\n                m.type === 'layout' &&\n                m.properties &&\n                'layoutPriority' in m.properties &&\n                typeof m.properties.layoutPriority === 'number'\n            )\n            if (layoutMod) {\n              const priority = layoutMod.properties.layoutPriority as number\n              if (priority > maxPriority) {\n                maxPriority = priority\n                highestPriorityChild = child\n              }\n            }\n          }\n        })\n\n        const container = h('div', {\n          className: classString,\n          style: {\n            position: 'relative',\n            display: 'flex',\n            justifyContent: alignment.includes('Leading')\n              ? 'flex-start'\n              : alignment.includes('Trailing')\n                ? 'flex-end'\n                : 'center',\n            alignItems: alignment.includes('top')\n              ? 'flex-start'\n              : alignment.includes('bottom')\n                ? 'flex-end'\n                : 'center',\n            // Container sizes to the highest priority child\n            ...(highestPriorityChild\n              ? {\n                  minWidth: 'fit-content',\n                  minHeight: 'fit-content',\n                }\n              : {}),\n          },\n          // Add debug attributes\n          ...(debug.isEnabled() && {\n            'data-tachui-component': 'ZStack',\n            ...(debugLabel && { 'data-tachui-label': debugLabel })\n          })\n        })\n\n        // Apply absolute positioning to children for z-stack\n        const renderedChildren = this.children.flatMap((child, index) => {\n          const childNodes = child.render()\n          const nodeArray = Array.isArray(childNodes) ? childNodes : [childNodes]\n\n          // Get layoutPriority from child's modifiers\n          let childPriority = index // Default to index-based z-index\n          if ('modifiers' in child && Array.isArray(child.modifiers)) {\n            const layoutMod = child.modifiers.find(\n              (m) => m.type === 'layout' && m.properties && 'layoutPriority' in m.properties\n            )\n            if (layoutMod && typeof layoutMod.properties.layoutPriority === 'number') {\n              childPriority = layoutMod.properties.layoutPriority\n            }\n          }\n\n          return nodeArray.map((node) => {\n            if (node.type === 'element') {\n              const isHighestPriority = child === highestPriorityChild\n              return {\n                ...node,\n                props: {\n                  ...node.props,\n                  style: {\n                    ...node.props?.style,\n                    // Highest priority child determines container size\n                    ...(isHighestPriority\n                      ? {\n                          position: 'relative',\n                          zIndex: childPriority,\n                        }\n                      : {\n                          position: 'absolute',\n                          top: 0,\n                          left: 0,\n                          right: 0,\n                          bottom: 0,\n                          zIndex: childPriority,\n                        }),\n                  },\n                },\n              }\n            }\n            return node\n          })\n        })\n\n        return [\n          {\n            type: 'element' as const,\n            tag: this.effectiveTag,\n            props: {\n              ...container.props,\n              className: classString\n            },\n            children: renderedChildren,\n            // Add component metadata for semantic role processing\n            componentMetadata: {\n              originalType: 'ZStack',\n              overriddenTo: this.effectiveTag !== 'div' ? this.effectiveTag : undefined,\n              validationResult: this.validationResult\n            }\n          },\n        ]\n      }\n\n      default:\n        return [\n          {\n            type: 'element' as const,\n            tag: 'div',\n            props: {},\n            children: [],\n          },\n        ]\n    }\n  }\n}\n\n/**\n * Layout container components with modifier support\n */\nexport const Layout = {\n  /**\n   * Vertical stack container (flexbox column)\n   */\n  VStack: (\n    props: {\n      children?: ComponentInstance[]\n      spacing?: number\n      alignment?: 'leading' | 'center' | 'trailing'\n    } = {}\n  ) => {\n    const { children = [], spacing = 0, alignment = 'center' } = props\n    const component = new LayoutComponent(props, 'vstack', children, { spacing, alignment })\n    return withModifiers(component)\n  },\n\n  /**\n   * Horizontal stack container (flexbox row)\n   */\n  HStack: (\n    props: {\n      children?: ComponentInstance[]\n      spacing?: number\n      alignment?: 'top' | 'center' | 'bottom'\n    } = {}\n  ) => {\n    const { children = [], spacing = 0, alignment = 'center' } = props\n    const component = new LayoutComponent(props, 'hstack', children, { spacing, alignment })\n    return withModifiers(component)\n  },\n\n  /**\n   * Z-index stack container (absolute positioning)\n   */\n  ZStack: (\n    props: {\n      children?: ComponentInstance[]\n      alignment?:\n        | 'topLeading'\n        | 'top'\n        | 'topTrailing'\n        | 'leading'\n        | 'center'\n        | 'trailing'\n        | 'bottomLeading'\n        | 'bottom'\n        | 'bottomTrailing'\n    } = {}\n  ) => {\n    const { children = [], alignment = 'center' } = props\n    const component = new LayoutComponent(props, 'zstack', children, { alignment })\n    return withModifiers(component)\n  },\n}\n\n/**\n * SwiftUI-aligned direct exports for layout components\n * These provide the same functionality as Layout.VStack, Layout.HStack, Layout.ZStack\n * but with direct component names for better SwiftUI syntax alignment\n */\nexport function VStack(\n  props: {\n    children?: ComponentInstance[]\n    spacing?: number\n    alignment?: 'leading' | 'center' | 'trailing'\n    debugLabel?: string\n    element?: string\n  } = {}\n) {\n  const { children = [], spacing = 0, debugLabel } = props\n  // Explicitly handle alignment to avoid default override\n  const alignment = props.alignment !== undefined ? props.alignment : 'center'\n  const component = new LayoutComponent(props, 'vstack', children, { spacing, alignment, debugLabel })\n  return withModifiers(component)\n}\n\nexport function HStack(\n  props: {\n    children?: ComponentInstance[]\n    spacing?: number\n    alignment?: 'top' | 'center' | 'bottom'\n    debugLabel?: string\n    element?: string\n  } = {}\n) {\n  const { children = [], spacing = 0, debugLabel } = props\n  // Explicitly handle alignment to avoid default override\n  const alignment = props.alignment !== undefined ? props.alignment : 'center'\n  const component = new LayoutComponent(props, 'hstack', children, { spacing, alignment, debugLabel })\n  return withModifiers(component)\n}\n\nexport function ZStack(\n  props: {\n    children?: ComponentInstance[]\n    alignment?:\n      | 'topLeading'\n      | 'top'\n      | 'topTrailing'\n      | 'leading'\n      | 'center'\n      | 'trailing'\n      | 'bottomLeading'\n      | 'bottom'\n      | 'bottomTrailing'\n    element?: string\n  } = {}\n) {\n  const { children = [], alignment = 'center' } = props\n  const component = new LayoutComponent(props, 'zstack', children, { alignment })\n  return withModifiers(component)\n}\n\n/**\n * Simple Text component with modifier support\n */\nexport function Text(content: string | (() => string)) {\n  const component = new ElementComponent(\n    { content },\n    'span',\n    typeof content === 'function' ? content() : content\n  )\n  return withModifiers(component)\n}\n\n/**\n * Utility to wrap any component with modifier support\n */\nexport function wrapComponent<P extends ComponentProps>(\n  component: ComponentInstance<P>\n): ModifiableComponent<P> & { modifier: ModifierBuilder<ModifiableComponent<P>> } {\n  return withModifiers(component)\n}\n\n/**\n * Higher-order component wrapper\n */\nexport function withModifierSupport<P extends ComponentProps>(\n  ComponentClass: new (props: P) => ComponentInstance<P>\n) {\n  return class extends ComponentClass {\n    public _modifiableComponent?: ModifiableComponent<P>\n\n    constructor(props: P) {\n      super(props)\n      this._modifiableComponent = withModifiers(this)\n    }\n\n    get modifier(): ModifierBuilder<ModifiableComponent<P>> {\n      return createModifierBuilder(this._modifiableComponent!)\n    }\n\n    get modifiers() {\n      return this._modifiableComponent!.modifiers\n    }\n  }\n}\n\n/**\n * Factory function for creating modifiable components\n */\nexport function createModifiableComponentFactory<P extends ComponentProps>(\n  renderFn: (props: P) => DOMNode | DOMNode[]\n) {\n  return (props: P) => {\n    // Create a simple component instance that uses the render function\n    const component: ComponentInstance<P> = {\n      type: 'component' as const,\n      id: `factory-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,\n      props,\n      mounted: false,\n      cleanup: [],\n      render() {\n        const result = renderFn(props)\n        return Array.isArray(result) ? result : [result]\n      },\n    }\n    return withModifiers(component)\n  }\n}\n"],"names":["debugManager","getDebugManager","isConcatenatable","component","withModifiers","modifiableComponent","createModifiableComponent","modifierBuilder","createModifierBuilder","result","other","createReactiveWrapper","renderFn","options","enableModifiers","props","ElementComponent","tag","content","attributes","__publicField","h","text","HTML","e","target","level","H1","H2","H3","H4","H5","H6","LayoutComponent","ComponentWithCSSClasses","layoutType","children","layoutProps","componentType","override","processElementOverride","useLifecycle","_elements","primaryElement","child","index","enhancedLifecycle","childElements","element","idx","key","cleanup","mountCleanup","error","registerComponentWithLifecycleHooks","container","childIndex","images","buttons","textElements","allChildren","spacing","debugLabel","alignment","debug","baseClasses","classString","vstackFlattened","childResult","hstackFlattened","maxPriority","highestPriorityChild","layoutMod","m","priority","renderedChildren","childNodes","nodeArray","childPriority","node","isHighestPriority","Layout","VStack","HStack","ZStack","wrapComponent","withModifierSupport","ComponentClass","createModifiableComponentFactory"],"mappings":"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"}

package/dist/concatenation/concatenatable.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./concatenated-component.cjs"),a=Symbol.for("tachui.concat");class s{concat(e){const t=this.toSegment(),r=e.toSegment();return e instanceof n.ConcatenatedComponent?new n.ConcatenatedComponent([t,...e.segments],this.mergeMetadata(e.metadata,e.segments.length+1)):new n.ConcatenatedComponent([t,r],this.createMetadata(2))}isConcatenatable(){return!0}createMetadata(e){return{totalSegments:e,accessibilityRole:this.determineAccessibilityRole(),semanticStructure:this.determineSemanticStructure()}}mergeMetadata(e,t){return{totalSegments:t,accessibilityRole:this.mergeAccessibilityRoles(e.accessibilityRole),semanticStructure:this.mergeSemanticStructures(e.semanticStructure)}}determineAccessibilityRole(){const e=this.constructor.name;return e==="EnhancedText"?"text":e==="EnhancedImage"||e==="EnhancedButton"||e==="EnhancedLink"?"group":"composite"}determineSemanticStructure(){const e=this.constructor.name;return e==="EnhancedText"||e==="EnhancedImage"?"inline":"mixed"}mergeAccessibilityRoles(e){const t=this.determineAccessibilityRole();return t==="text"&&e==="text"?"text":t==="composite"||e==="composite"?"composite":"group"}mergeSemanticStructures(e){const t=this.determineSemanticStructure();return t==="inline"&&e==="inline"?"inline":t==="block"&&e==="block"?"block":"mixed"}}function m(c){const e=c;return e.concat=function(t){const r={id:this.id,component:this,modifiers:this.modifiers||[],render:()=>{const i=this.render();return Array.isArray(i)?i[0]:i}},o=t.toSegment();return t instanceof n.ConcatenatedComponent?new n.ConcatenatedComponent([r,...t.segments],{totalSegments:t.segments.length+1,accessibilityRole:"group",semanticStructure:"mixed"}):new n.ConcatenatedComponent([r,o],{totalSegments:2,accessibilityRole:"group",semanticStructure:"mixed"})},e.toSegment=function(){return{id:this.id,component:this,modifiers:this.modifiers||[],render:()=>{const t=this.render();return Array.isArray(t)?t[0]:t}}},e.isConcatenatable=function(){return!0},e}exports.CONCAT_SYMBOL=a;exports.ConcatenatableBase=s;exports.makeConcatenatable=m;
+//# sourceMappingURL=concatenatable.cjs.map

package/dist/concatenation/concatenatable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"concatenatable.cjs","sources":["../../src/concatenation/concatenatable.ts"],"sourcesContent":["/**\n * Concatenatable Interface Implementation\n * \n * Provides the base implementation for components that support concatenation\n * using the SwiftUI-style + operator syntax.\n */\n\nimport type { ComponentInstance } from '../runtime/types'\nimport type { Concatenatable, ComponentSegment } from './types'\nimport { ConcatenatedComponent } from './concatenated-component'\n\n/**\n * Symbol for concatenation operations - matches the one used in types\n */\nexport const CONCAT_SYMBOL = Symbol.for('tachui.concat')\n\n/**\n * Base implementation for concatenatable functionality\n * This can be mixed into component classes\n */\nexport abstract class ConcatenatableBase<T = any> implements Concatenatable<T> {\n  abstract readonly id: string\n  abstract readonly type: string\n  \n  /**\n   * Concatenate this component with another concatenatable component\n   */\n  concat<U extends Concatenatable<any>>(other: U): ConcatenatedComponent<T | U> {\n    const thisSegment = this.toSegment()\n    const otherSegment = other.toSegment()\n    \n    // If other is already a concatenated component, merge segments\n    if (other instanceof ConcatenatedComponent) {\n      return new ConcatenatedComponent(\n        [thisSegment, ...other.segments],\n        this.mergeMetadata(other.metadata, other.segments.length + 1)\n      )\n    }\n    \n    // Create new concatenated component with both segments\n    return new ConcatenatedComponent(\n      [thisSegment, otherSegment],\n      this.createMetadata(2)\n    )\n  }\n  \n  /**\n   * Convert this component to a segment for concatenation\n   */\n  abstract toSegment(): ComponentSegment\n  \n  /**\n   * Check if this component supports concatenation\n   */\n  isConcatenatable(): boolean {\n    return true\n  }\n  \n  /**\n   * Create metadata for a new concatenated component\n   */\n  protected createMetadata(totalSegments: number): import('./types').ConcatenationMetadata {\n    return {\n      totalSegments,\n      accessibilityRole: this.determineAccessibilityRole(),\n      semanticStructure: this.determineSemanticStructure()\n    }\n  }\n  \n  /**\n   * Merge metadata when concatenating with existing concatenated component\n   */\n  protected mergeMetadata(\n    existing: import('./types').ConcatenationMetadata, \n    newTotal: number\n  ): import('./types').ConcatenationMetadata {\n    return {\n      totalSegments: newTotal,\n      accessibilityRole: this.mergeAccessibilityRoles(existing.accessibilityRole),\n      semanticStructure: this.mergeSemanticStructures(existing.semanticStructure)\n    }\n  }\n  \n  /**\n   * Determine the accessibility role for this component\n   */\n  protected determineAccessibilityRole(): 'text' | 'group' | 'composite' {\n    // Default implementation - subclasses should override\n    const componentType = this.constructor.name\n    \n    if (componentType === 'EnhancedText') return 'text'\n    if (componentType === 'EnhancedImage') return 'group'\n    if (componentType === 'EnhancedButton' || componentType === 'EnhancedLink') return 'group'\n    \n    return 'composite'\n  }\n  \n  /**\n   * Determine the semantic structure for this component\n   */\n  protected determineSemanticStructure(): 'inline' | 'block' | 'mixed' {\n    // Default implementation - subclasses should override\n    const componentType = this.constructor.name\n    \n    if (componentType === 'EnhancedText') return 'inline'\n    if (componentType === 'EnhancedImage') return 'inline'\n    \n    return 'mixed'\n  }\n  \n  /**\n   * Merge accessibility roles when combining components\n   */\n  protected mergeAccessibilityRoles(\n    existing: 'text' | 'group' | 'composite'\n  ): 'text' | 'group' | 'composite' {\n    const thisRole = this.determineAccessibilityRole()\n    \n    // If both are text, keep text\n    if (thisRole === 'text' && existing === 'text') return 'text'\n    \n    // If either is composite, result is composite\n    if (thisRole === 'composite' || existing === 'composite') return 'composite'\n    \n    // Otherwise, it's a group\n    return 'group'\n  }\n  \n  /**\n   * Merge semantic structures when combining components\n   */\n  protected mergeSemanticStructures(\n    existing: 'inline' | 'block' | 'mixed'\n  ): 'inline' | 'block' | 'mixed' {\n    const thisStructure = this.determineSemanticStructure()\n    \n    // If both are inline, keep inline\n    if (thisStructure === 'inline' && existing === 'inline') return 'inline'\n    \n    // If both are block, keep block\n    if (thisStructure === 'block' && existing === 'block') return 'block'\n    \n    // Otherwise, it's mixed\n    return 'mixed'\n  }\n}\n\n/**\n * Utility function to make any component concatenatable\n * This can be used as a mixin for existing components\n */\nexport function makeConcatenatable<T extends ComponentInstance>(\n  component: T\n): T & Concatenatable {\n  const concatenatable = component as T & Concatenatable\n  \n  // Add concatenation method\n  concatenatable.concat = function<U extends Concatenatable<any>>(\n    other: U\n  ): ConcatenatedComponent<any> {\n    const thisSegment: ComponentSegment = {\n      id: this.id,\n      component: this,\n      modifiers: (this as any).modifiers || [],\n      render: () => {\n        const rendered = this.render()\n        return Array.isArray(rendered) ? rendered[0] : rendered\n      }\n    }\n    \n    const otherSegment = other.toSegment()\n    \n    if (other instanceof ConcatenatedComponent) {\n      return new ConcatenatedComponent(\n        [thisSegment, ...other.segments],\n        {\n          totalSegments: other.segments.length + 1,\n          accessibilityRole: 'group',\n          semanticStructure: 'mixed'\n        }\n      )\n    }\n    \n    return new ConcatenatedComponent(\n      [thisSegment, otherSegment],\n      {\n        totalSegments: 2,\n        accessibilityRole: 'group',\n        semanticStructure: 'mixed'\n      }\n    )\n  }\n  \n  concatenatable.toSegment = function(): ComponentSegment {\n    return {\n      id: this.id,\n      component: this,\n      modifiers: (this as any).modifiers || [],\n      render: () => {\n        const rendered = this.render()\n        return Array.isArray(rendered) ? rendered[0] : rendered\n      }\n    }\n  }\n  \n  concatenatable.isConcatenatable = function(): boolean {\n    return true\n  }\n  \n  return concatenatable\n}"],"names":["CONCAT_SYMBOL","ConcatenatableBase","other","thisSegment","otherSegment","ConcatenatedComponent","totalSegments","existing","newTotal","componentType","thisRole","thisStructure","makeConcatenatable","component","concatenatable","rendered"],"mappings":"gIAcaA,EAAgB,OAAO,IAAI,eAAe,EAMhD,MAAeC,CAAyD,CAO7E,OAAsCC,EAAwC,CAC5E,MAAMC,EAAc,KAAK,UAAA,EACnBC,EAAeF,EAAM,UAAA,EAG3B,OAAIA,aAAiBG,EAAAA,sBACZ,IAAIA,EAAAA,sBACT,CAACF,EAAa,GAAGD,EAAM,QAAQ,EAC/B,KAAK,cAAcA,EAAM,SAAUA,EAAM,SAAS,OAAS,CAAC,CAAA,EAKzD,IAAIG,EAAAA,sBACT,CAACF,EAAaC,CAAY,EAC1B,KAAK,eAAe,CAAC,CAAA,CAEzB,CAUA,kBAA4B,CAC1B,MAAO,EACT,CAKU,eAAeE,EAAgE,CACvF,MAAO,CACL,cAAAA,EACA,kBAAmB,KAAK,2BAAA,EACxB,kBAAmB,KAAK,2BAAA,CAA2B,CAEvD,CAKU,cACRC,EACAC,EACyC,CACzC,MAAO,CACL,cAAeA,EACf,kBAAmB,KAAK,wBAAwBD,EAAS,iBAAiB,EAC1E,kBAAmB,KAAK,wBAAwBA,EAAS,iBAAiB,CAAA,CAE9E,CAKU,4BAA6D,CAErE,MAAME,EAAgB,KAAK,YAAY,KAEvC,OAAIA,IAAkB,eAAuB,OACzCA,IAAkB,iBAClBA,IAAkB,kBAAoBA,IAAkB,eAAuB,QAE5E,WACT,CAKU,4BAA2D,CAEnE,MAAMA,EAAgB,KAAK,YAAY,KAGvC,OADIA,IAAkB,gBAClBA,IAAkB,gBAAwB,SAEvC,OACT,CAKU,wBACRF,EACgC,CAChC,MAAMG,EAAW,KAAK,2BAAA,EAGtB,OAAIA,IAAa,QAAUH,IAAa,OAAe,OAGnDG,IAAa,aAAeH,IAAa,YAAoB,YAG1D,OACT,CAKU,wBACRA,EAC8B,CAC9B,MAAMI,EAAgB,KAAK,2BAAA,EAG3B,OAAIA,IAAkB,UAAYJ,IAAa,SAAiB,SAG5DI,IAAkB,SAAWJ,IAAa,QAAgB,QAGvD,OACT,CACF,CAMO,SAASK,EACdC,EACoB,CACpB,MAAMC,EAAiBD,EAGvB,OAAAC,EAAe,OAAS,SACtBZ,EAC4B,CAC5B,MAAMC,EAAgC,CACpC,GAAI,KAAK,GACT,UAAW,KACX,UAAY,KAAa,WAAa,CAAA,EACtC,OAAQ,IAAM,CACZ,MAAMY,EAAW,KAAK,OAAA,EACtB,OAAO,MAAM,QAAQA,CAAQ,EAAIA,EAAS,CAAC,EAAIA,CACjD,CAAA,EAGIX,EAAeF,EAAM,UAAA,EAE3B,OAAIA,aAAiBG,EAAAA,sBACZ,IAAIA,EAAAA,sBACT,CAACF,EAAa,GAAGD,EAAM,QAAQ,EAC/B,CACE,cAAeA,EAAM,SAAS,OAAS,EACvC,kBAAmB,QACnB,kBAAmB,OAAA,CACrB,EAIG,IAAIG,EAAAA,sBACT,CAACF,EAAaC,CAAY,EAC1B,CACE,cAAe,EACf,kBAAmB,QACnB,kBAAmB,OAAA,CACrB,CAEJ,EAEAU,EAAe,UAAY,UAA6B,CACtD,MAAO,CACL,GAAI,KAAK,GACT,UAAW,KACX,UAAY,KAAa,WAAa,CAAA,EACtC,OAAQ,IAAM,CACZ,MAAMC,EAAW,KAAK,OAAA,EACtB,OAAO,MAAM,QAAQA,CAAQ,EAAIA,EAAS,CAAC,EAAIA,CACjD,CAAA,CAEJ,EAEAD,EAAe,iBAAmB,UAAoB,CACpD,MAAO,EACT,EAEOA,CACT"}