@tachui/core 0.7.0-alpha1

package/dist/modifiers/margin.d.ts

@@ -0,0 +1,128 @@
+/**
+ * Margin Modifier - spacing around elements
+ *
+ * Provides a unified interface for setting element margins
+ * with support for shorthand and directional properties.
+ */
+import type { DOMNode } from '../runtime/types';
+import { BaseModifier } from './base';
+import type { ModifierContext, ReactiveModifierProps } from './types';
+export type MarginValue = number | string;
+export type MarginOptions = {
+    all: MarginValue;
+    vertical?: never;
+    horizontal?: never;
+    top?: never;
+    right?: never;
+    bottom?: never;
+    left?: never;
+} | {
+    all?: never;
+    vertical: MarginValue;
+    horizontal: MarginValue;
+    top?: never;
+    right?: never;
+    bottom?: never;
+    left?: never;
+} | {
+    all?: never;
+    vertical?: MarginValue;
+    horizontal?: MarginValue;
+    top?: MarginValue;
+    right?: MarginValue;
+    bottom?: MarginValue;
+    left?: MarginValue;
+};
+export type ReactiveMarginOptions = ReactiveModifierProps<MarginOptions>;
+export declare class MarginModifier extends BaseModifier<MarginOptions> {
+    readonly type = "margin";
+    readonly priority = 50;
+    constructor(options: ReactiveMarginOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computeMarginStyles;
+}
+/**
+ * Create a margin modifier with flexible options
+ *
+ * @example
+ * ```typescript
+ * // All sides equal
+ * .margin({ all: 16 })
+ * .margin({ all: 'auto' })
+ *
+ * // Symmetric spacing
+ * .margin({ vertical: 12, horizontal: 8 })
+ * .margin({ vertical: 30, horizontal: 'auto' })
+ *
+ * // Specific sides
+ * .margin({ top: 8, bottom: 16, left: 12, right: 12 })
+ * .margin({ top: 8, bottom: 16, left: 'auto', right: 'auto' })
+ *
+ * // Mixed approach
+ * .margin({ horizontal: 16, top: 8, bottom: 24 })
+ * .margin({ horizontal: 'auto', top: '1rem', bottom: '2rem' })
+ * ```
+ */
+export declare function margin(options: ReactiveMarginOptions): MarginModifier;
+export declare function margin(all: MarginValue): MarginModifier;
+/**
+ * Convenience function for top margin only
+ *
+ * @example
+ * ```typescript
+ * .marginTop(16)
+ * .marginTop('auto')
+ * ```
+ */
+export declare function marginTop(value: MarginValue): MarginModifier;
+/**
+ * Convenience function for bottom margin only
+ *
+ * @example
+ * ```typescript
+ * .marginBottom(24)
+ * .marginBottom('auto')
+ * ```
+ */
+export declare function marginBottom(value: MarginValue): MarginModifier;
+/**
+ * Convenience function for left and right margins
+ *
+ * @example
+ * ```typescript
+ * .marginHorizontal(20)
+ * .marginHorizontal('auto')
+ * ```
+ */
+export declare function marginHorizontal(value: MarginValue): MarginModifier;
+/**
+ * Convenience function for top and bottom margins
+ *
+ * @example
+ * ```typescript
+ * .marginVertical(16)
+ * .marginVertical('auto')
+ * ```
+ */
+export declare function marginVertical(value: MarginValue): MarginModifier;
+/**
+ * Convenience function for left margin only
+ *
+ * @example
+ * ```typescript
+ * .marginLeft(12)
+ * .marginLeft('auto')
+ * ```
+ */
+export declare function marginLeft(value: MarginValue): MarginModifier;
+/**
+ * Convenience function for right margin only
+ *
+ * @example
+ * ```typescript
+ * .marginRight(12)
+ * .marginRight('auto')
+ * ```
+ */
+export declare function marginRight(value: MarginValue): MarginModifier;
+//# sourceMappingURL=margin.d.ts.map

package/dist/modifiers/margin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"margin.d.ts","sourceRoot":"","sources":["../../src/modifiers/margin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAGrE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA;AAGzC,MAAM,MAAM,aAAa,GACrB;IACE,GAAG,EAAE,WAAW,CAAA;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,GACD;IACE,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,QAAQ,EAAE,WAAW,CAAA;IACrB,UAAU,EAAE,WAAW,CAAA;IACvB,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,GACD;IACE,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,QAAQ,CAAC,EAAE,WAAW,CAAA;IACtB,UAAU,CAAC,EAAE,WAAW,CAAA;IACxB,GAAG,CAAC,EAAE,WAAW,CAAA;IACjB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAEL,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,aAAa,CAAC,CAAA;AAUxE,qBAAa,cAAe,SAAQ,YAAY,CAAC,aAAa,CAAC;IAC7D,QAAQ,CAAC,IAAI,YAAW;IACxB,QAAQ,CAAC,QAAQ,MAAK;gBAEV,OAAO,EAAE,qBAAqB;IAK1C,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IASpE,OAAO,CAAC,mBAAmB;CAoC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,qBAAqB,GAAG,cAAc,CAAA;AACtE,wBAAgB,MAAM,CAAC,GAAG,EAAE,WAAW,GAAG,cAAc,CAAA;AAQxD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAE5D;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAE/D;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAEnE;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAEjE;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAE7D;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAE9D"}

package/dist/modifiers/margin.js

@@ -0,0 +1,65 @@
+import { BaseModifier as f } from "./base.js";
+var m = Object.defineProperty, l = (i, t, n) => t in i ? m(i, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[t] = n, o = (i, t, n) => l(i, typeof t != "symbol" ? t + "" : t, n);
+function a(i) {
+  return typeof i == "number" ? `${i}px` : i;
+}
+class e extends f {
+  // Priority 50 for spacing
+  constructor(t) {
+    super(t), o(this, "type", "margin"), o(this, "priority", 50);
+  }
+  apply(t, n) {
+    if (!n.element) return;
+    const r = this.computeMarginStyles(this.properties);
+    this.applyStyles(n.element, r);
+  }
+  computeMarginStyles(t) {
+    const n = {};
+    if ("all" in t && t.all !== void 0)
+      n.margin = a(t.all);
+    else {
+      if ("vertical" in t && t.vertical !== void 0) {
+        const r = a(t.vertical);
+        n.marginTop = r, n.marginBottom = r;
+      }
+      if ("horizontal" in t && t.horizontal !== void 0) {
+        const r = a(t.horizontal);
+        n.marginLeft = r, n.marginRight = r;
+      }
+      "top" in t && t.top !== void 0 && (n.marginTop = a(t.top)), "right" in t && t.right !== void 0 && (n.marginRight = a(t.right)), "bottom" in t && t.bottom !== void 0 && (n.marginBottom = a(t.bottom)), "left" in t && t.left !== void 0 && (n.marginLeft = a(t.left));
+    }
+    return n;
+  }
+}
+function g(i) {
+  return typeof i == "number" || typeof i == "string" ? new e({ all: i }) : new e(i);
+}
+function c(i) {
+  return new e({ top: i });
+}
+function d(i) {
+  return new e({ bottom: i });
+}
+function h(i) {
+  return new e({ horizontal: i });
+}
+function v(i) {
+  return new e({ vertical: i });
+}
+function y(i) {
+  return new e({ left: i });
+}
+function b(i) {
+  return new e({ right: i });
+}
+export {
+  e as MarginModifier,
+  g as margin,
+  d as marginBottom,
+  h as marginHorizontal,
+  y as marginLeft,
+  b as marginRight,
+  c as marginTop,
+  v as marginVertical
+};
+//# sourceMappingURL=margin.js.map

package/dist/modifiers/margin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"margin.js","sources":["../../src/modifiers/margin.ts"],"sourcesContent":["/**\n * Margin Modifier - spacing around elements\n *\n * Provides a unified interface for setting element margins\n * with support for shorthand and directional properties.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\n// CSS-compatible margin values\nexport type MarginValue = number | string\n\n// Type-safe options with conflict prevention\nexport type MarginOptions =\n  | {\n      all: MarginValue\n      vertical?: never\n      horizontal?: never\n      top?: never\n      right?: never\n      bottom?: never\n      left?: never\n    }\n  | {\n      all?: never\n      vertical: MarginValue\n      horizontal: MarginValue\n      top?: never\n      right?: never\n      bottom?: never\n      left?: never\n    }\n  | {\n      all?: never\n      vertical?: MarginValue\n      horizontal?: MarginValue\n      top?: MarginValue\n      right?: MarginValue\n      bottom?: MarginValue\n      left?: MarginValue\n    }\n\nexport type ReactiveMarginOptions = ReactiveModifierProps<MarginOptions>\n\n// Helper function to format margin values - moved to outer scope\nfunction formatMarginValue(value: MarginValue): string {\n  if (typeof value === 'number') {\n    return `${value}px`\n  }\n  return value // Already a string (e.g., 'auto', '1rem', '50%')\n}\n\nexport class MarginModifier extends BaseModifier<MarginOptions> {\n  readonly type = 'margin'\n  readonly priority = 50 // Priority 50 for spacing\n\n  constructor(options: ReactiveMarginOptions) {\n    // Preserve reactive values; BaseModifier.applyStyles will create effects\n    super(options as unknown as MarginOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeMarginStyles(this.properties)\n    this.applyStyles(context.element, styles)\n    \n    return undefined\n  }\n\n  private computeMarginStyles(props: MarginOptions) {\n    const styles: Record<string, any> = {}\n\n    if ('all' in props && props.all !== undefined) {\n      // All sides - highest priority\n      styles.margin = formatMarginValue(props.all)\n    } else {\n      // Handle shorthand properties first\n      if ('vertical' in props && props.vertical !== undefined) {\n        const value = formatMarginValue(props.vertical)\n        styles.marginTop = value\n        styles.marginBottom = value\n      }\n      if ('horizontal' in props && props.horizontal !== undefined) {\n        const value = formatMarginValue(props.horizontal)\n        styles.marginLeft = value\n        styles.marginRight = value\n      }\n\n      // Handle specific sides (override shorthand if specified)\n      if ('top' in props && props.top !== undefined) {\n        styles.marginTop = formatMarginValue(props.top)\n      }\n      if ('right' in props && props.right !== undefined) {\n        styles.marginRight = formatMarginValue(props.right)\n      }\n      if ('bottom' in props && props.bottom !== undefined) {\n        styles.marginBottom = formatMarginValue(props.bottom)\n      }\n      if ('left' in props && props.left !== undefined) {\n        styles.marginLeft = formatMarginValue(props.left)\n      }\n    }\n\n    return styles\n  }\n}\n\n/**\n * Create a margin modifier with flexible options\n *\n * @example\n * ```typescript\n * // All sides equal\n * .margin({ all: 16 })\n * .margin({ all: 'auto' })\n *\n * // Symmetric spacing\n * .margin({ vertical: 12, horizontal: 8 })\n * .margin({ vertical: 30, horizontal: 'auto' })\n *\n * // Specific sides\n * .margin({ top: 8, bottom: 16, left: 12, right: 12 })\n * .margin({ top: 8, bottom: 16, left: 'auto', right: 'auto' })\n *\n * // Mixed approach\n * .margin({ horizontal: 16, top: 8, bottom: 24 })\n * .margin({ horizontal: 'auto', top: '1rem', bottom: '2rem' })\n * ```\n */\nexport function margin(options: ReactiveMarginOptions): MarginModifier\nexport function margin(all: MarginValue): MarginModifier\nexport function margin(optionsOrAll: ReactiveMarginOptions | MarginValue): MarginModifier {\n  if (typeof optionsOrAll === 'number' || typeof optionsOrAll === 'string') {\n    return new MarginModifier({ all: optionsOrAll })\n  }\n  return new MarginModifier(optionsOrAll)\n}\n\n/**\n * Convenience function for top margin only\n *\n * @example\n * ```typescript\n * .marginTop(16)\n * .marginTop('auto')\n * ```\n */\nexport function marginTop(value: MarginValue): MarginModifier {\n  return new MarginModifier({ top: value })\n}\n\n/**\n * Convenience function for bottom margin only\n *\n * @example\n * ```typescript\n * .marginBottom(24)\n * .marginBottom('auto')\n * ```\n */\nexport function marginBottom(value: MarginValue): MarginModifier {\n  return new MarginModifier({ bottom: value })\n}\n\n/**\n * Convenience function for left and right margins\n *\n * @example\n * ```typescript\n * .marginHorizontal(20)\n * .marginHorizontal('auto')\n * ```\n */\nexport function marginHorizontal(value: MarginValue): MarginModifier {\n  return new MarginModifier({ horizontal: value })\n}\n\n/**\n * Convenience function for top and bottom margins\n *\n * @example\n * ```typescript\n * .marginVertical(16)\n * .marginVertical('auto')\n * ```\n */\nexport function marginVertical(value: MarginValue): MarginModifier {\n  return new MarginModifier({ vertical: value })\n}\n\n/**\n * Convenience function for left margin only\n *\n * @example\n * ```typescript\n * .marginLeft(12)\n * .marginLeft('auto')\n * ```\n */\nexport function marginLeft(value: MarginValue): MarginModifier {\n  return new MarginModifier({ left: value })\n}\n\n/**\n * Convenience function for right margin only\n *\n * @example\n * ```typescript\n * .marginRight(12)\n * .marginRight('auto')\n * ```\n */\nexport function marginRight(value: MarginValue): MarginModifier {\n  return new MarginModifier({ right: value })\n}\n"],"names":["formatMarginValue","value","MarginModifier","BaseModifier","options","__publicField","_node","context","styles","props","margin","optionsOrAll","marginTop","marginBottom","marginHorizontal","marginVertical","marginLeft","marginRight"],"mappings":";;AA+CA,SAASA,EAAkBC,GAA4B;AACrD,SAAI,OAAOA,KAAU,WACZ,GAAGA,CAAK,OAEVA;AACT;AAEO,MAAMC,UAAuBC,EAA4B;AAAA;AAAA,EAI9D,YAAYC,GAAgC;AAE1C,UAAMA,CAAmC,GAL3CC,EAAA,MAAS,QAAO,QAAA,GAChBA,EAAA,MAAS,YAAW,EAAA;AAAA,EAKpB;AAAA,EAEA,MAAMC,GAAgBC,GAA+C;AACnE,QAAI,CAACA,EAAQ,QAAS;AAEtB,UAAMC,IAAS,KAAK,oBAAoB,KAAK,UAAU;AACvD,SAAK,YAAYD,EAAQ,SAASC,CAAM;AAAA,EAG1C;AAAA,EAEQ,oBAAoBC,GAAsB;AAChD,UAAMD,IAA8B,CAAA;AAEpC,QAAI,SAASC,KAASA,EAAM,QAAQ;AAElC,MAAAD,EAAO,SAASR,EAAkBS,EAAM,GAAG;AAAA,SACtC;AAEL,UAAI,cAAcA,KAASA,EAAM,aAAa,QAAW;AACvD,cAAMR,IAAQD,EAAkBS,EAAM,QAAQ;AAC9C,QAAAD,EAAO,YAAYP,GACnBO,EAAO,eAAeP;AAAA,MACxB;AACA,UAAI,gBAAgBQ,KAASA,EAAM,eAAe,QAAW;AAC3D,cAAMR,IAAQD,EAAkBS,EAAM,UAAU;AAChD,QAAAD,EAAO,aAAaP,GACpBO,EAAO,cAAcP;AAAA,MACvB;AAGA,MAAI,SAASQ,KAASA,EAAM,QAAQ,WAClCD,EAAO,YAAYR,EAAkBS,EAAM,GAAG,IAE5C,WAAWA,KAASA,EAAM,UAAU,WACtCD,EAAO,cAAcR,EAAkBS,EAAM,KAAK,IAEhD,YAAYA,KAASA,EAAM,WAAW,WACxCD,EAAO,eAAeR,EAAkBS,EAAM,MAAM,IAElD,UAAUA,KAASA,EAAM,SAAS,WACpCD,EAAO,aAAaR,EAAkBS,EAAM,IAAI;AAAA,IAEpD;AAEA,WAAOD;AAAA,EACT;AACF;AA0BO,SAASE,EAAOC,GAAmE;AACxF,SAAI,OAAOA,KAAiB,YAAY,OAAOA,KAAiB,WACvD,IAAIT,EAAe,EAAE,KAAKS,GAAc,IAE1C,IAAIT,EAAeS,CAAY;AACxC;AAWO,SAASC,EAAUX,GAAoC;AAC5D,SAAO,IAAIC,EAAe,EAAE,KAAKD,GAAO;AAC1C;AAWO,SAASY,EAAaZ,GAAoC;AAC/D,SAAO,IAAIC,EAAe,EAAE,QAAQD,GAAO;AAC7C;AAWO,SAASa,EAAiBb,GAAoC;AACnE,SAAO,IAAIC,EAAe,EAAE,YAAYD,GAAO;AACjD;AAWO,SAASc,EAAed,GAAoC;AACjE,SAAO,IAAIC,EAAe,EAAE,UAAUD,GAAO;AAC/C;AAWO,SAASe,EAAWf,GAAoC;AAC7D,SAAO,IAAIC,EAAe,EAAE,MAAMD,GAAO;AAC3C;AAWO,SAASgB,EAAYhB,GAAoC;AAC9D,SAAO,IAAIC,EAAe,EAAE,OAAOD,GAAO;AAC5C;"}

package/dist/modifiers/padding.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./base.cjs");var l=Object.defineProperty,f=(n,i,t)=>i in n?l(n,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[i]=t,g=(n,i,t)=>f(n,typeof i!="symbol"?i+"":i,t);class d extends o.BaseModifier{constructor(i){super(i),g(this,"type","padding"),g(this,"priority",45)}apply(i,t){if(!t.element)return;const e=this.computePaddingStyles(this.properties);this.applyStyles(t.element,e)}computePaddingStyles(i){const t={},e=r=>typeof r=="number"?`${r}px`:r;if("all"in i&&i.all!==void 0)t.padding=e(i.all);else{if("vertical"in i&&i.vertical!==void 0){const r=e(i.vertical);t.paddingTop=r,t.paddingBottom=r}if("horizontal"in i&&i.horizontal!==void 0){const r=e(i.horizontal);t.paddingLeft=r,t.paddingRight=r}"top"in i&&i.top!==void 0&&(t.paddingTop=e(i.top)),"right"in i&&i.right!==void 0&&(t.paddingRight=e(i.right)),"bottom"in i&&i.bottom!==void 0&&(t.paddingBottom=e(i.bottom)),"left"in i&&i.left!==void 0&&(t.paddingLeft=e(i.left)),"leading"in i&&i.leading!==void 0&&(t.paddingLeft=e(i.leading)),"trailing"in i&&i.trailing!==void 0&&(t.paddingRight=e(i.trailing))}return t}}function a(n){return typeof n=="number"||typeof n=="string"?new d({all:n}):new d(n)}function u(n){return new d({top:n})}function c(n){return new d({bottom:n})}function m(n){return new d({left:n})}function h(n){return new d({right:n})}function v(n){return new d({leading:n})}function b(n){return new d({trailing:n})}function y(n){return new d({horizontal:n})}function w(n){return new d({vertical:n})}const s={xs:()=>a(4),sm:()=>a(8),md:()=>a(12),lg:()=>a(16),xl:()=>a(24),xxl:()=>a(32),button:()=>a({horizontal:16,vertical:8}),card:()=>a(16),section:()=>a({horizontal:20,vertical:12})};exports.PaddingModifier=d;exports.padding=a;exports.paddingBottom=c;exports.paddingHorizontal=y;exports.paddingLeading=v;exports.paddingLeft=m;exports.paddingPresets=s;exports.paddingRight=h;exports.paddingTop=u;exports.paddingTrailing=b;exports.paddingVertical=w;
+//# sourceMappingURL=padding.cjs.map

package/dist/modifiers/padding.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"padding.cjs","sources":["../../src/modifiers/padding.ts"],"sourcesContent":["/**\n * Padding Modifier - internal spacing within elements\n *\n * Provides a comprehensive interface for setting element padding\n * with support for shorthand and directional properties, matching SwiftUI's padding modifiers.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\n// CSS-compatible padding values\nexport type PaddingValue = number | string\n\n// Type-safe options with conflict prevention\nexport type PaddingOptions =\n  | {\n      all: PaddingValue\n      vertical?: never\n      horizontal?: never\n      top?: never\n      right?: never\n      bottom?: never\n      left?: never\n      leading?: never\n      trailing?: never\n    }\n  | {\n      all?: never\n      vertical: PaddingValue\n      horizontal: PaddingValue\n      top?: never\n      right?: never\n      bottom?: never\n      left?: never\n      leading?: never\n      trailing?: never\n    }\n  | {\n      all?: never\n      vertical?: PaddingValue\n      horizontal?: PaddingValue\n      top?: PaddingValue\n      right?: PaddingValue\n      bottom?: PaddingValue\n      left?: PaddingValue\n      leading?: never\n      trailing?: never\n    }\n  | {\n      all?: never\n      vertical?: PaddingValue\n      horizontal?: PaddingValue\n      top?: PaddingValue\n      leading?: PaddingValue\n      trailing?: PaddingValue\n      bottom?: PaddingValue\n      right?: never\n      left?: never\n    }\n\nexport type ReactivePaddingOptions = ReactiveModifierProps<PaddingOptions>\n\nexport class PaddingModifier extends BaseModifier<PaddingOptions> {\n  readonly type = 'padding'\n  readonly priority = 45 // Priority 45 for internal spacing (before margin at 50)\n\n  constructor(options: ReactivePaddingOptions) {\n    // Preserve reactive values; BaseModifier.applyStyles will create effects\n    super(options as unknown as PaddingOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computePaddingStyles(this.properties)\n    this.applyStyles(context.element, styles)\n    \n    return undefined\n  }\n\n  private computePaddingStyles(props: PaddingOptions) {\n    const styles: Record<string, any> = {}\n\n    // Helper function to format padding values\n    const formatValue = (value: PaddingValue): string => {\n      if (typeof value === 'number') {\n        return `${value}px`\n      }\n      return value // Already a string (e.g., '1rem', '50%', '0')\n    }\n\n    if ('all' in props && props.all !== undefined) {\n      // All sides - highest priority\n      styles.padding = formatValue(props.all)\n    } else {\n      // Handle shorthand properties first\n      if ('vertical' in props && props.vertical !== undefined) {\n        const value = formatValue(props.vertical)\n        styles.paddingTop = value\n        styles.paddingBottom = value\n      }\n      if ('horizontal' in props && props.horizontal !== undefined) {\n        const value = formatValue(props.horizontal)\n        styles.paddingLeft = value\n        styles.paddingRight = value\n      }\n\n      // Handle specific sides (override shorthand if specified)\n      if ('top' in props && props.top !== undefined) {\n        styles.paddingTop = formatValue(props.top)\n      }\n      if ('right' in props && props.right !== undefined) {\n        styles.paddingRight = formatValue(props.right)\n      }\n      if ('bottom' in props && props.bottom !== undefined) {\n        styles.paddingBottom = formatValue(props.bottom)\n      }\n      if ('left' in props && props.left !== undefined) {\n        styles.paddingLeft = formatValue(props.left)\n      }\n\n      // Handle SwiftUI-style leading/trailing (left/right in LTR)\n      if ('leading' in props && props.leading !== undefined) {\n        styles.paddingLeft = formatValue(props.leading)\n      }\n      if ('trailing' in props && props.trailing !== undefined) {\n        styles.paddingRight = formatValue(props.trailing)\n      }\n    }\n\n    return styles\n  }\n}\n\n/**\n * Create a padding modifier with flexible options\n *\n * @example\n * ```typescript\n * // All sides equal\n * .padding({ all: 16 })\n *\n * // Symmetric spacing\n * .padding({ vertical: 12, horizontal: 8 })\n *\n * // Specific sides\n * .padding({ top: 8, bottom: 16, left: 12, right: 12 })\n *\n * // SwiftUI-style leading/trailing\n * .padding({ leading: 16, trailing: 8, vertical: 12 })\n *\n * // Mixed approach\n * .padding({ horizontal: 16, top: 8, bottom: 24 })\n * ```\n */\nexport function padding(options: ReactivePaddingOptions): PaddingModifier\nexport function padding(all: PaddingValue): PaddingModifier\nexport function padding(optionsOrAll: ReactivePaddingOptions | PaddingValue): PaddingModifier {\n  if (typeof optionsOrAll === 'number' || typeof optionsOrAll === 'string') {\n    return new PaddingModifier({ all: optionsOrAll })\n  }\n  return new PaddingModifier(optionsOrAll)\n}\n\n/**\n * Convenience function for top padding only\n *\n * @example\n * ```typescript\n * .paddingTop(16)\n * .paddingTop('1rem')\n * ```\n */\nexport function paddingTop(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ top: value })\n}\n\n/**\n * Convenience function for bottom padding only\n *\n * @example\n * ```typescript\n * .paddingBottom(24)\n * .paddingBottom('2rem')\n * ```\n */\nexport function paddingBottom(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ bottom: value })\n}\n\n/**\n * Convenience function for left padding only\n *\n * @example\n * ```typescript\n * .paddingLeft(12)\n * .paddingLeft('1rem')\n * ```\n */\nexport function paddingLeft(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ left: value })\n}\n\n/**\n * Convenience function for right padding only\n *\n * @example\n * ```typescript\n * .paddingRight(12)\n * .paddingRight('1rem')\n * ```\n */\nexport function paddingRight(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ right: value })\n}\n\n/**\n * SwiftUI-style leading padding (left in LTR languages)\n *\n * @example\n * ```typescript\n * .paddingLeading(16)\n * .paddingLeading('1rem')\n * ```\n */\nexport function paddingLeading(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ leading: value })\n}\n\n/**\n * SwiftUI-style trailing padding (right in LTR languages)\n *\n * @example\n * ```typescript\n * .paddingTrailing(8)\n * .paddingTrailing('0.5rem')\n * ```\n */\nexport function paddingTrailing(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ trailing: value })\n}\n\n/**\n * Convenience function for left and right padding\n *\n * @example\n * ```typescript\n * .paddingHorizontal(20)\n * .paddingHorizontal('2rem')\n * ```\n */\nexport function paddingHorizontal(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ horizontal: value })\n}\n\n/**\n * Convenience function for top and bottom padding\n *\n * @example\n * ```typescript\n * .paddingVertical(16)\n * .paddingVertical('1rem')\n * ```\n */\nexport function paddingVertical(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ vertical: value })\n}\n\n/**\n * Common padding presets for consistent design\n */\nexport const paddingPresets = {\n  /**\n   * Extra small padding (4px)\n   */\n  xs: () => padding(4),\n\n  /**\n   * Small padding (8px)\n   */\n  sm: () => padding(8),\n\n  /**\n   * Medium padding (12px)\n   */\n  md: () => padding(12),\n\n  /**\n   * Large padding (16px)\n   */\n  lg: () => padding(16),\n\n  /**\n   * Extra large padding (24px)\n   */\n  xl: () => padding(24),\n\n  /**\n   * Extra extra large padding (32px)\n   */\n  xxl: () => padding(32),\n\n  /**\n   * Button padding preset (horizontal: 16, vertical: 8)\n   */\n  button: () => padding({ horizontal: 16, vertical: 8 }),\n\n  /**\n   * Card padding preset (all: 16)\n   */\n  card: () => padding(16),\n\n  /**\n   * Section padding preset (horizontal: 20, vertical: 12)\n   */\n  section: () => padding({ horizontal: 20, vertical: 12 }),\n} as const\n"],"names":["PaddingModifier","BaseModifier","options","__publicField","_node","context","styles","props","formatValue","value","padding","optionsOrAll","paddingTop","paddingBottom","paddingLeft","paddingRight","paddingLeading","paddingTrailing","paddingHorizontal","paddingVertical","paddingPresets"],"mappings":"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"}

package/dist/modifiers/padding.d.ts

@@ -0,0 +1,204 @@
+/**
+ * Padding Modifier - internal spacing within elements
+ *
+ * Provides a comprehensive interface for setting element padding
+ * with support for shorthand and directional properties, matching SwiftUI's padding modifiers.
+ */
+import type { DOMNode } from '../runtime/types';
+import { BaseModifier } from './base';
+import type { ModifierContext, ReactiveModifierProps } from './types';
+export type PaddingValue = number | string;
+export type PaddingOptions = {
+    all: PaddingValue;
+    vertical?: never;
+    horizontal?: never;
+    top?: never;
+    right?: never;
+    bottom?: never;
+    left?: never;
+    leading?: never;
+    trailing?: never;
+} | {
+    all?: never;
+    vertical: PaddingValue;
+    horizontal: PaddingValue;
+    top?: never;
+    right?: never;
+    bottom?: never;
+    left?: never;
+    leading?: never;
+    trailing?: never;
+} | {
+    all?: never;
+    vertical?: PaddingValue;
+    horizontal?: PaddingValue;
+    top?: PaddingValue;
+    right?: PaddingValue;
+    bottom?: PaddingValue;
+    left?: PaddingValue;
+    leading?: never;
+    trailing?: never;
+} | {
+    all?: never;
+    vertical?: PaddingValue;
+    horizontal?: PaddingValue;
+    top?: PaddingValue;
+    leading?: PaddingValue;
+    trailing?: PaddingValue;
+    bottom?: PaddingValue;
+    right?: never;
+    left?: never;
+};
+export type ReactivePaddingOptions = ReactiveModifierProps<PaddingOptions>;
+export declare class PaddingModifier extends BaseModifier<PaddingOptions> {
+    readonly type = "padding";
+    readonly priority = 45;
+    constructor(options: ReactivePaddingOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computePaddingStyles;
+}
+/**
+ * Create a padding modifier with flexible options
+ *
+ * @example
+ * ```typescript
+ * // All sides equal
+ * .padding({ all: 16 })
+ *
+ * // Symmetric spacing
+ * .padding({ vertical: 12, horizontal: 8 })
+ *
+ * // Specific sides
+ * .padding({ top: 8, bottom: 16, left: 12, right: 12 })
+ *
+ * // SwiftUI-style leading/trailing
+ * .padding({ leading: 16, trailing: 8, vertical: 12 })
+ *
+ * // Mixed approach
+ * .padding({ horizontal: 16, top: 8, bottom: 24 })
+ * ```
+ */
+export declare function padding(options: ReactivePaddingOptions): PaddingModifier;
+export declare function padding(all: PaddingValue): PaddingModifier;
+/**
+ * Convenience function for top padding only
+ *
+ * @example
+ * ```typescript
+ * .paddingTop(16)
+ * .paddingTop('1rem')
+ * ```
+ */
+export declare function paddingTop(value: PaddingValue): PaddingModifier;
+/**
+ * Convenience function for bottom padding only
+ *
+ * @example
+ * ```typescript
+ * .paddingBottom(24)
+ * .paddingBottom('2rem')
+ * ```
+ */
+export declare function paddingBottom(value: PaddingValue): PaddingModifier;
+/**
+ * Convenience function for left padding only
+ *
+ * @example
+ * ```typescript
+ * .paddingLeft(12)
+ * .paddingLeft('1rem')
+ * ```
+ */
+export declare function paddingLeft(value: PaddingValue): PaddingModifier;
+/**
+ * Convenience function for right padding only
+ *
+ * @example
+ * ```typescript
+ * .paddingRight(12)
+ * .paddingRight('1rem')
+ * ```
+ */
+export declare function paddingRight(value: PaddingValue): PaddingModifier;
+/**
+ * SwiftUI-style leading padding (left in LTR languages)
+ *
+ * @example
+ * ```typescript
+ * .paddingLeading(16)
+ * .paddingLeading('1rem')
+ * ```
+ */
+export declare function paddingLeading(value: PaddingValue): PaddingModifier;
+/**
+ * SwiftUI-style trailing padding (right in LTR languages)
+ *
+ * @example
+ * ```typescript
+ * .paddingTrailing(8)
+ * .paddingTrailing('0.5rem')
+ * ```
+ */
+export declare function paddingTrailing(value: PaddingValue): PaddingModifier;
+/**
+ * Convenience function for left and right padding
+ *
+ * @example
+ * ```typescript
+ * .paddingHorizontal(20)
+ * .paddingHorizontal('2rem')
+ * ```
+ */
+export declare function paddingHorizontal(value: PaddingValue): PaddingModifier;
+/**
+ * Convenience function for top and bottom padding
+ *
+ * @example
+ * ```typescript
+ * .paddingVertical(16)
+ * .paddingVertical('1rem')
+ * ```
+ */
+export declare function paddingVertical(value: PaddingValue): PaddingModifier;
+/**
+ * Common padding presets for consistent design
+ */
+export declare const paddingPresets: {
+    /**
+     * Extra small padding (4px)
+     */
+    readonly xs: () => PaddingModifier;
+    /**
+     * Small padding (8px)
+     */
+    readonly sm: () => PaddingModifier;
+    /**
+     * Medium padding (12px)
+     */
+    readonly md: () => PaddingModifier;
+    /**
+     * Large padding (16px)
+     */
+    readonly lg: () => PaddingModifier;
+    /**
+     * Extra large padding (24px)
+     */
+    readonly xl: () => PaddingModifier;
+    /**
+     * Extra extra large padding (32px)
+     */
+    readonly xxl: () => PaddingModifier;
+    /**
+     * Button padding preset (horizontal: 16, vertical: 8)
+     */
+    readonly button: () => PaddingModifier;
+    /**
+     * Card padding preset (all: 16)
+     */
+    readonly card: () => PaddingModifier;
+    /**
+     * Section padding preset (horizontal: 20, vertical: 12)
+     */
+    readonly section: () => PaddingModifier;
+};
+//# sourceMappingURL=padding.d.ts.map

package/dist/modifiers/padding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"padding.d.ts","sourceRoot":"","sources":["../../src/modifiers/padding.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAGrE,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAA;AAG1C,MAAM,MAAM,cAAc,GACtB;IACE,GAAG,EAAE,YAAY,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,GACD;IACE,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,QAAQ,EAAE,YAAY,CAAA;IACtB,UAAU,EAAE,YAAY,CAAA;IACxB,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,GACD;IACE,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,GAAG,CAAC,EAAE,YAAY,CAAA;IAClB,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,GACD;IACE,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,GAAG,CAAC,EAAE,YAAY,CAAA;IAClB,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAEL,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,cAAc,CAAC,CAAA;AAE1E,qBAAa,eAAgB,SAAQ,YAAY,CAAC,cAAc,CAAC;IAC/D,QAAQ,CAAC,IAAI,aAAY;IACzB,QAAQ,CAAC,QAAQ,MAAK;gBAEV,OAAO,EAAE,sBAAsB;IAK3C,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IASpE,OAAO,CAAC,oBAAoB;CAoD7B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,sBAAsB,GAAG,eAAe,CAAA;AACzE,wBAAgB,OAAO,CAAC,GAAG,EAAE,YAAY,GAAG,eAAe,CAAA;AAQ3D;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAE/D;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAElE;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAEhE;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAEjE;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAEnE;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAEpE;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAEtE;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAEpE;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;IACzB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;CAEK,CAAA"}

package/dist/modifiers/padding.js

@@ -0,0 +1,109 @@
+import { BaseModifier as o } from "./base.js";
+var g = Object.defineProperty, f = (t, i, n) => i in t ? g(t, i, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[i] = n, l = (t, i, n) => f(t, typeof i != "symbol" ? i + "" : i, n);
+class d extends o {
+  // Priority 45 for internal spacing (before margin at 50)
+  constructor(i) {
+    super(i), l(this, "type", "padding"), l(this, "priority", 45);
+  }
+  apply(i, n) {
+    if (!n.element) return;
+    const e = this.computePaddingStyles(this.properties);
+    this.applyStyles(n.element, e);
+  }
+  computePaddingStyles(i) {
+    const n = {}, e = (a) => typeof a == "number" ? `${a}px` : a;
+    if ("all" in i && i.all !== void 0)
+      n.padding = e(i.all);
+    else {
+      if ("vertical" in i && i.vertical !== void 0) {
+        const a = e(i.vertical);
+        n.paddingTop = a, n.paddingBottom = a;
+      }
+      if ("horizontal" in i && i.horizontal !== void 0) {
+        const a = e(i.horizontal);
+        n.paddingLeft = a, n.paddingRight = a;
+      }
+      "top" in i && i.top !== void 0 && (n.paddingTop = e(i.top)), "right" in i && i.right !== void 0 && (n.paddingRight = e(i.right)), "bottom" in i && i.bottom !== void 0 && (n.paddingBottom = e(i.bottom)), "left" in i && i.left !== void 0 && (n.paddingLeft = e(i.left)), "leading" in i && i.leading !== void 0 && (n.paddingLeft = e(i.leading)), "trailing" in i && i.trailing !== void 0 && (n.paddingRight = e(i.trailing));
+    }
+    return n;
+  }
+}
+function r(t) {
+  return typeof t == "number" || typeof t == "string" ? new d({ all: t }) : new d(t);
+}
+function c(t) {
+  return new d({ top: t });
+}
+function m(t) {
+  return new d({ bottom: t });
+}
+function h(t) {
+  return new d({ left: t });
+}
+function v(t) {
+  return new d({ right: t });
+}
+function b(t) {
+  return new d({ leading: t });
+}
+function w(t) {
+  return new d({ trailing: t });
+}
+function y(t) {
+  return new d({ horizontal: t });
+}
+function z(t) {
+  return new d({ vertical: t });
+}
+const P = {
+  /**
+   * Extra small padding (4px)
+   */
+  xs: () => r(4),
+  /**
+   * Small padding (8px)
+   */
+  sm: () => r(8),
+  /**
+   * Medium padding (12px)
+   */
+  md: () => r(12),
+  /**
+   * Large padding (16px)
+   */
+  lg: () => r(16),
+  /**
+   * Extra large padding (24px)
+   */
+  xl: () => r(24),
+  /**
+   * Extra extra large padding (32px)
+   */
+  xxl: () => r(32),
+  /**
+   * Button padding preset (horizontal: 16, vertical: 8)
+   */
+  button: () => r({ horizontal: 16, vertical: 8 }),
+  /**
+   * Card padding preset (all: 16)
+   */
+  card: () => r(16),
+  /**
+   * Section padding preset (horizontal: 20, vertical: 12)
+   */
+  section: () => r({ horizontal: 20, vertical: 12 })
+};
+export {
+  d as PaddingModifier,
+  r as padding,
+  m as paddingBottom,
+  y as paddingHorizontal,
+  b as paddingLeading,
+  h as paddingLeft,
+  P as paddingPresets,
+  v as paddingRight,
+  c as paddingTop,
+  w as paddingTrailing,
+  z as paddingVertical
+};
+//# sourceMappingURL=padding.js.map

package/dist/modifiers/padding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"padding.js","sources":["../../src/modifiers/padding.ts"],"sourcesContent":["/**\n * Padding Modifier - internal spacing within elements\n *\n * Provides a comprehensive interface for setting element padding\n * with support for shorthand and directional properties, matching SwiftUI's padding modifiers.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\n// CSS-compatible padding values\nexport type PaddingValue = number | string\n\n// Type-safe options with conflict prevention\nexport type PaddingOptions =\n  | {\n      all: PaddingValue\n      vertical?: never\n      horizontal?: never\n      top?: never\n      right?: never\n      bottom?: never\n      left?: never\n      leading?: never\n      trailing?: never\n    }\n  | {\n      all?: never\n      vertical: PaddingValue\n      horizontal: PaddingValue\n      top?: never\n      right?: never\n      bottom?: never\n      left?: never\n      leading?: never\n      trailing?: never\n    }\n  | {\n      all?: never\n      vertical?: PaddingValue\n      horizontal?: PaddingValue\n      top?: PaddingValue\n      right?: PaddingValue\n      bottom?: PaddingValue\n      left?: PaddingValue\n      leading?: never\n      trailing?: never\n    }\n  | {\n      all?: never\n      vertical?: PaddingValue\n      horizontal?: PaddingValue\n      top?: PaddingValue\n      leading?: PaddingValue\n      trailing?: PaddingValue\n      bottom?: PaddingValue\n      right?: never\n      left?: never\n    }\n\nexport type ReactivePaddingOptions = ReactiveModifierProps<PaddingOptions>\n\nexport class PaddingModifier extends BaseModifier<PaddingOptions> {\n  readonly type = 'padding'\n  readonly priority = 45 // Priority 45 for internal spacing (before margin at 50)\n\n  constructor(options: ReactivePaddingOptions) {\n    // Preserve reactive values; BaseModifier.applyStyles will create effects\n    super(options as unknown as PaddingOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computePaddingStyles(this.properties)\n    this.applyStyles(context.element, styles)\n    \n    return undefined\n  }\n\n  private computePaddingStyles(props: PaddingOptions) {\n    const styles: Record<string, any> = {}\n\n    // Helper function to format padding values\n    const formatValue = (value: PaddingValue): string => {\n      if (typeof value === 'number') {\n        return `${value}px`\n      }\n      return value // Already a string (e.g., '1rem', '50%', '0')\n    }\n\n    if ('all' in props && props.all !== undefined) {\n      // All sides - highest priority\n      styles.padding = formatValue(props.all)\n    } else {\n      // Handle shorthand properties first\n      if ('vertical' in props && props.vertical !== undefined) {\n        const value = formatValue(props.vertical)\n        styles.paddingTop = value\n        styles.paddingBottom = value\n      }\n      if ('horizontal' in props && props.horizontal !== undefined) {\n        const value = formatValue(props.horizontal)\n        styles.paddingLeft = value\n        styles.paddingRight = value\n      }\n\n      // Handle specific sides (override shorthand if specified)\n      if ('top' in props && props.top !== undefined) {\n        styles.paddingTop = formatValue(props.top)\n      }\n      if ('right' in props && props.right !== undefined) {\n        styles.paddingRight = formatValue(props.right)\n      }\n      if ('bottom' in props && props.bottom !== undefined) {\n        styles.paddingBottom = formatValue(props.bottom)\n      }\n      if ('left' in props && props.left !== undefined) {\n        styles.paddingLeft = formatValue(props.left)\n      }\n\n      // Handle SwiftUI-style leading/trailing (left/right in LTR)\n      if ('leading' in props && props.leading !== undefined) {\n        styles.paddingLeft = formatValue(props.leading)\n      }\n      if ('trailing' in props && props.trailing !== undefined) {\n        styles.paddingRight = formatValue(props.trailing)\n      }\n    }\n\n    return styles\n  }\n}\n\n/**\n * Create a padding modifier with flexible options\n *\n * @example\n * ```typescript\n * // All sides equal\n * .padding({ all: 16 })\n *\n * // Symmetric spacing\n * .padding({ vertical: 12, horizontal: 8 })\n *\n * // Specific sides\n * .padding({ top: 8, bottom: 16, left: 12, right: 12 })\n *\n * // SwiftUI-style leading/trailing\n * .padding({ leading: 16, trailing: 8, vertical: 12 })\n *\n * // Mixed approach\n * .padding({ horizontal: 16, top: 8, bottom: 24 })\n * ```\n */\nexport function padding(options: ReactivePaddingOptions): PaddingModifier\nexport function padding(all: PaddingValue): PaddingModifier\nexport function padding(optionsOrAll: ReactivePaddingOptions | PaddingValue): PaddingModifier {\n  if (typeof optionsOrAll === 'number' || typeof optionsOrAll === 'string') {\n    return new PaddingModifier({ all: optionsOrAll })\n  }\n  return new PaddingModifier(optionsOrAll)\n}\n\n/**\n * Convenience function for top padding only\n *\n * @example\n * ```typescript\n * .paddingTop(16)\n * .paddingTop('1rem')\n * ```\n */\nexport function paddingTop(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ top: value })\n}\n\n/**\n * Convenience function for bottom padding only\n *\n * @example\n * ```typescript\n * .paddingBottom(24)\n * .paddingBottom('2rem')\n * ```\n */\nexport function paddingBottom(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ bottom: value })\n}\n\n/**\n * Convenience function for left padding only\n *\n * @example\n * ```typescript\n * .paddingLeft(12)\n * .paddingLeft('1rem')\n * ```\n */\nexport function paddingLeft(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ left: value })\n}\n\n/**\n * Convenience function for right padding only\n *\n * @example\n * ```typescript\n * .paddingRight(12)\n * .paddingRight('1rem')\n * ```\n */\nexport function paddingRight(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ right: value })\n}\n\n/**\n * SwiftUI-style leading padding (left in LTR languages)\n *\n * @example\n * ```typescript\n * .paddingLeading(16)\n * .paddingLeading('1rem')\n * ```\n */\nexport function paddingLeading(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ leading: value })\n}\n\n/**\n * SwiftUI-style trailing padding (right in LTR languages)\n *\n * @example\n * ```typescript\n * .paddingTrailing(8)\n * .paddingTrailing('0.5rem')\n * ```\n */\nexport function paddingTrailing(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ trailing: value })\n}\n\n/**\n * Convenience function for left and right padding\n *\n * @example\n * ```typescript\n * .paddingHorizontal(20)\n * .paddingHorizontal('2rem')\n * ```\n */\nexport function paddingHorizontal(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ horizontal: value })\n}\n\n/**\n * Convenience function for top and bottom padding\n *\n * @example\n * ```typescript\n * .paddingVertical(16)\n * .paddingVertical('1rem')\n * ```\n */\nexport function paddingVertical(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ vertical: value })\n}\n\n/**\n * Common padding presets for consistent design\n */\nexport const paddingPresets = {\n  /**\n   * Extra small padding (4px)\n   */\n  xs: () => padding(4),\n\n  /**\n   * Small padding (8px)\n   */\n  sm: () => padding(8),\n\n  /**\n   * Medium padding (12px)\n   */\n  md: () => padding(12),\n\n  /**\n   * Large padding (16px)\n   */\n  lg: () => padding(16),\n\n  /**\n   * Extra large padding (24px)\n   */\n  xl: () => padding(24),\n\n  /**\n   * Extra extra large padding (32px)\n   */\n  xxl: () => padding(32),\n\n  /**\n   * Button padding preset (horizontal: 16, vertical: 8)\n   */\n  button: () => padding({ horizontal: 16, vertical: 8 }),\n\n  /**\n   * Card padding preset (all: 16)\n   */\n  card: () => padding(16),\n\n  /**\n   * Section padding preset (horizontal: 20, vertical: 12)\n   */\n  section: () => padding({ horizontal: 20, vertical: 12 }),\n} as const\n"],"names":["PaddingModifier","BaseModifier","options","__publicField","_node","context","styles","props","formatValue","value","padding","optionsOrAll","paddingTop","paddingBottom","paddingLeft","paddingRight","paddingLeading","paddingTrailing","paddingHorizontal","paddingVertical","paddingPresets"],"mappings":";;AA+DO,MAAMA,UAAwBC,EAA6B;AAAA;AAAA,EAIhE,YAAYC,GAAiC;AAE3C,UAAMA,CAAoC,GAL5CC,EAAA,MAAS,QAAO,SAAA,GAChBA,EAAA,MAAS,YAAW,EAAA;AAAA,EAKpB;AAAA,EAEA,MAAMC,GAAgBC,GAA+C;AACnE,QAAI,CAACA,EAAQ,QAAS;AAEtB,UAAMC,IAAS,KAAK,qBAAqB,KAAK,UAAU;AACxD,SAAK,YAAYD,EAAQ,SAASC,CAAM;AAAA,EAG1C;AAAA,EAEQ,qBAAqBC,GAAuB;AAClD,UAAMD,IAA8B,CAAA,GAG9BE,IAAc,CAACC,MACf,OAAOA,KAAU,WACZ,GAAGA,CAAK,OAEVA;AAGT,QAAI,SAASF,KAASA,EAAM,QAAQ;AAElC,MAAAD,EAAO,UAAUE,EAAYD,EAAM,GAAG;AAAA,SACjC;AAEL,UAAI,cAAcA,KAASA,EAAM,aAAa,QAAW;AACvD,cAAME,IAAQD,EAAYD,EAAM,QAAQ;AACxC,QAAAD,EAAO,aAAaG,GACpBH,EAAO,gBAAgBG;AAAA,MACzB;AACA,UAAI,gBAAgBF,KAASA,EAAM,eAAe,QAAW;AAC3D,cAAME,IAAQD,EAAYD,EAAM,UAAU;AAC1C,QAAAD,EAAO,cAAcG,GACrBH,EAAO,eAAeG;AAAA,MACxB;AAGA,MAAI,SAASF,KAASA,EAAM,QAAQ,WAClCD,EAAO,aAAaE,EAAYD,EAAM,GAAG,IAEvC,WAAWA,KAASA,EAAM,UAAU,WACtCD,EAAO,eAAeE,EAAYD,EAAM,KAAK,IAE3C,YAAYA,KAASA,EAAM,WAAW,WACxCD,EAAO,gBAAgBE,EAAYD,EAAM,MAAM,IAE7C,UAAUA,KAASA,EAAM,SAAS,WACpCD,EAAO,cAAcE,EAAYD,EAAM,IAAI,IAIzC,aAAaA,KAASA,EAAM,YAAY,WAC1CD,EAAO,cAAcE,EAAYD,EAAM,OAAO,IAE5C,cAAcA,KAASA,EAAM,aAAa,WAC5CD,EAAO,eAAeE,EAAYD,EAAM,QAAQ;AAAA,IAEpD;AAEA,WAAOD;AAAA,EACT;AACF;AAyBO,SAASI,EAAQC,GAAsE;AAC5F,SAAI,OAAOA,KAAiB,YAAY,OAAOA,KAAiB,WACvD,IAAIX,EAAgB,EAAE,KAAKW,GAAc,IAE3C,IAAIX,EAAgBW,CAAY;AACzC;AAWO,SAASC,EAAWH,GAAsC;AAC/D,SAAO,IAAIT,EAAgB,EAAE,KAAKS,GAAO;AAC3C;AAWO,SAASI,EAAcJ,GAAsC;AAClE,SAAO,IAAIT,EAAgB,EAAE,QAAQS,GAAO;AAC9C;AAWO,SAASK,EAAYL,GAAsC;AAChE,SAAO,IAAIT,EAAgB,EAAE,MAAMS,GAAO;AAC5C;AAWO,SAASM,EAAaN,GAAsC;AACjE,SAAO,IAAIT,EAAgB,EAAE,OAAOS,GAAO;AAC7C;AAWO,SAASO,EAAeP,GAAsC;AACnE,SAAO,IAAIT,EAAgB,EAAE,SAASS,GAAO;AAC/C;AAWO,SAASQ,EAAgBR,GAAsC;AACpE,SAAO,IAAIT,EAAgB,EAAE,UAAUS,GAAO;AAChD;AAWO,SAASS,EAAkBT,GAAsC;AACtE,SAAO,IAAIT,EAAgB,EAAE,YAAYS,GAAO;AAClD;AAWO,SAASU,EAAgBV,GAAsC;AACpE,SAAO,IAAIT,EAAgB,EAAE,UAAUS,GAAO;AAChD;AAKO,MAAMW,IAAiB;AAAA;AAAA;AAAA;AAAA,EAI5B,IAAI,MAAMV,EAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,EAKnB,IAAI,MAAMA,EAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,EAKnB,IAAI,MAAMA,EAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,EAKpB,IAAI,MAAMA,EAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,EAKpB,IAAI,MAAMA,EAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,EAKpB,KAAK,MAAMA,EAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,EAKrB,QAAQ,MAAMA,EAAQ,EAAE,YAAY,IAAI,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA,EAKrD,MAAM,MAAMA,EAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,EAKtB,SAAS,MAAMA,EAAQ,EAAE,YAAY,IAAI,UAAU,IAAI;AACzD;"}

package/dist/modifiers/registry.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./builder.cjs"),c=require("../concatenation/concatenated-component.cjs");var y=Object.defineProperty,m=(r,t,e)=>t in r?y(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e,g=(r,t,e)=>m(r,t+"",e);class u{constructor(){g(this,"modifiers",new Map)}register(t,e){this.modifiers.set(t,e)}get(t){return this.modifiers.get(t)}has(t){return this.modifiers.has(t)}list(){return Array.from(this.modifiers.keys())}clear(){this.modifiers.clear()}}const h=new u;function b(){return new u}function M(r,t,e={},a={}){if(!t.length)return r;const d={componentId:e.componentId||"unknown",phase:e.phase||"creation",...e.element&&{element:e.element},...e.parentElement&&{parentElement:e.parentElement},...e.componentInstance&&{componentInstance:e.componentInstance},...e.previousModifiers&&{previousModifiers:e.previousModifiers}};switch(a.batch?"batch":"sequential"){case"batch":return E(r,t,d,a);default:return C(r,t,d,a)}}function C(r,t,e,a){const d=[...t].sort((s,n)=>s.priority-n.priority);let i=r;const o=[],f=[];for(const s of d)try{const n=s.apply(i,e);n&&typeof n=="object"&&"type"in n&&(i=n),a.immediate&&!a.suppressEffects&&(o.forEach(l=>l()),o.length=0)}catch(n){console.error(`Failed to apply modifier ${s.type}:`,n)}if(f.length>0){const s=i.dispose;i.dispose=()=>{f.forEach(n=>n()),s&&s()}}return i}function E(r,t,e,a){const d=R(t);let i=r;const o=[],f=[];for(const[s,n]of d)try{i=N(i,n,e)}catch(l){(typeof process>"u"||process.env.NODE_ENV!=="test")&&console.error(`Failed to apply modifier group ${s}:`,l)}if(a.suppressEffects||o.forEach(s=>s()),f.length>0){const s=i.dispose;i.dispose=()=>{f.forEach(n=>n()),s&&s()}}return i}function R(r){const t=new Map;for(const e of r){const a=t.get(e.type)||[];a.push(e),t.set(e.type,a)}return t}function N(r,t,e){const a=[...t].sort((i,o)=>i.priority-o.priority);let d=r;for(const i of a)try{const o=i.apply(d,e);o&&typeof o=="object"&&"type"in o&&(d=o)}catch(o){(typeof process>"u"||process.env.NODE_ENV!=="test")&&console.error(`Failed to apply modifier ${i.type}:`,o)}return d}function S(r){return r&&typeof r.concat=="function"&&typeof r.toSegment=="function"&&typeof r.isConcatenatable=="function"}function _(r,t=[]){const e={type:r.type,id:r.id,props:{...r.props},mounted:r.mounted,cleanup:r.cleanup?[...r.cleanup]:[],modifiers:[...t],modifierBuilder:null,render:r.render?r.render.bind(r):()=>[]};e.modifierBuilder=p.createModifierBuilder(e),r.modifiableComponent=e;const a=r._enhancedLifecycle;a&&(e._enhancedLifecycle=a,"domElements"in r&&(e.domElements=r.domElements),"primaryElement"in r&&(e.primaryElement=r.primaryElement),"domReady"in r&&(e.domReady=r.domReady),"children"in r&&(e.children=r.children));const d=r.render?r.render.bind(r):()=>[];return e.render=()=>{const i=d();return(Array.isArray(i)?i:[i]).map(f=>(f&&typeof f=="object"&&(f.modifiers=e.modifiers,f.componentId=r.id),f))},S(r)&&(e.concat=function(i){const o={id:e.id,component:e,modifiers:e.modifiers,render:()=>{const n=e.render();return Array.isArray(n)?n[0]:n}},f=i.toSegment(),s={totalSegments:i instanceof c.ConcatenatedComponent?i.segments.length+1:2,accessibilityRole:"text",semanticStructure:"inline"};return i instanceof c.ConcatenatedComponent?new c.ConcatenatedComponent([o,...i.segments],s):new c.ConcatenatedComponent([o,f],s)},e.toSegment=function(){return{id:e.id,component:e,modifiers:e.modifiers,render:()=>{const i=e.render();return Array.isArray(i)?i[0]:i}}},e.isConcatenatable=function(){return!0}),e}exports.ModifierRegistryImpl=u;exports.applyModifiersToNode=M;exports.createModifiableComponent=_;exports.createModifierRegistry=b;exports.globalModifierRegistry=h;
+//# sourceMappingURL=registry.cjs.map

package/dist/modifiers/registry.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.cjs","sources":["../../src/modifiers/registry.ts"],"sourcesContent":["/**\n * Modifier Registry and Application System\n *\n * Manages registration, storage, and application of modifiers to components.\n * Provides a centralized system for custom modifier registration and application.\n */\n\nimport type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types'\nimport { createModifierBuilder } from './builder'\nimport type {\n  ModifiableComponent,\n  Modifier,\n  ModifierApplicationOptions,\n  ModifierContext,\n  ModifierFactory,\n  ModifierRegistry,\n} from './types'\nimport type { Concatenatable, ComponentSegment } from '../concatenation/types'\nimport { ConcatenatedComponent } from '../concatenation/concatenated-component'\n\n/**\n * Concrete modifier registry implementation\n */\nexport class ModifierRegistryImpl implements ModifierRegistry {\n  private modifiers = new Map<string, ModifierFactory<any>>()\n\n  register<TProps>(name: string, factory: ModifierFactory<TProps>): void {\n    this.modifiers.set(name, factory)\n  }\n\n  get<TProps>(name: string): ModifierFactory<TProps> | undefined {\n    return this.modifiers.get(name) as ModifierFactory<TProps> | undefined\n  }\n\n  has(name: string): boolean {\n    return this.modifiers.has(name)\n  }\n\n  list(): string[] {\n    return Array.from(this.modifiers.keys())\n  }\n\n  clear(): void {\n    this.modifiers.clear()\n  }\n}\n\n/**\n * Global modifier registry instance\n */\nexport const globalModifierRegistry = new ModifierRegistryImpl()\n\n/**\n * Create a new modifier registry\n */\nexport function createModifierRegistry(): ModifierRegistry {\n  return new ModifierRegistryImpl()\n}\n\n/**\n * Apply modifiers to a DOM node\n */\nexport function applyModifiersToNode(\n  node: DOMNode,\n  modifiers: Modifier[],\n  context: Partial<ModifierContext> = {},\n  options: ModifierApplicationOptions = {}\n): DOMNode {\n  if (!modifiers.length) return node\n\n  const fullContext: ModifierContext = {\n    componentId: context.componentId || 'unknown',\n    phase: context.phase || 'creation',\n    ...(context.element && { element: context.element }),\n    ...(context.parentElement && { parentElement: context.parentElement }),\n    ...(context.componentInstance && { componentInstance: context.componentInstance }),\n    ...(context.previousModifiers && { previousModifiers: context.previousModifiers }),\n  }\n\n  const strategy = options.batch ? 'batch' : 'sequential'\n\n  switch (strategy) {\n    case 'batch':\n      return applyModifiersBatch(node, modifiers, fullContext, options)\n    default:\n      return applyModifiersSequential(node, modifiers, fullContext, options)\n  }\n}\n\n/**\n * Apply modifiers sequentially\n */\nfunction applyModifiersSequential(\n  node: DOMNode,\n  modifiers: Modifier[],\n  context: ModifierContext,\n  options: ModifierApplicationOptions\n): DOMNode {\n  // Sort modifiers by priority\n  const sortedModifiers = [...modifiers].sort((a, b) => a.priority - b.priority)\n\n  let currentNode = node\n  const effects: (() => void)[] = []\n  const cleanup: (() => void)[] = []\n\n  for (const modifier of sortedModifiers) {\n    try {\n      const result = modifier.apply(currentNode, context)\n\n      if (result && typeof result === 'object' && 'type' in result) {\n        currentNode = result\n      }\n\n      if (options.immediate && !options.suppressEffects) {\n        // Apply effects immediately\n        effects.forEach((effect) => effect())\n        effects.length = 0\n      }\n    } catch (error) {\n      console.error(`Failed to apply modifier ${modifier.type}:`, error)\n    }\n  }\n\n  // Store cleanup functions on the node\n  if (cleanup.length > 0) {\n    const existingCleanup = currentNode.dispose\n    currentNode.dispose = () => {\n      cleanup.forEach((fn) => fn())\n      if (existingCleanup) existingCleanup()\n    }\n  }\n\n  return currentNode\n}\n\n/**\n * Apply modifiers in batch mode for better performance\n */\nfunction applyModifiersBatch(\n  node: DOMNode,\n  modifiers: Modifier[],\n  context: ModifierContext,\n  options: ModifierApplicationOptions\n): DOMNode {\n  // Group modifiers by type for more efficient application\n  const modifierGroups = groupModifiersByType(modifiers)\n\n  let currentNode = node\n  const allEffects: (() => void)[] = []\n  const allCleanup: (() => void)[] = []\n\n  // Apply each group\n  for (const [type, groupModifiers] of modifierGroups) {\n    try {\n      currentNode = applyModifierGroup(currentNode, groupModifiers, context)\n    } catch (error) {\n      // Only log in non-test environments to avoid polluting test output\n      if (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n        console.error(`Failed to apply modifier group ${type}:`, error)\n      }\n    }\n  }\n\n  // Apply all effects at once if not suppressed\n  if (!options.suppressEffects) {\n    allEffects.forEach((effect) => effect())\n  }\n\n  // Store cleanup functions\n  if (allCleanup.length > 0) {\n    const existingCleanup = currentNode.dispose\n    currentNode.dispose = () => {\n      allCleanup.forEach((fn) => fn())\n      if (existingCleanup) existingCleanup()\n    }\n  }\n\n  return currentNode\n}\n\n/**\n * Group modifiers by type for batch processing\n */\nfunction groupModifiersByType(modifiers: Modifier[]): Map<string, Modifier[]> {\n  const groups = new Map<string, Modifier[]>()\n\n  for (const modifier of modifiers) {\n    const existing = groups.get(modifier.type) || []\n    existing.push(modifier)\n    groups.set(modifier.type, existing)\n  }\n\n  return groups\n}\n\n/**\n * Apply a group of modifiers of the same type\n */\nfunction applyModifierGroup(\n  node: DOMNode,\n  modifiers: Modifier[],\n  context: ModifierContext\n): DOMNode {\n  // Sort by priority within the group\n  const sortedModifiers = [...modifiers].sort((a, b) => a.priority - b.priority)\n\n  let currentNode = node\n\n  for (const modifier of sortedModifiers) {\n    try {\n      const result = modifier.apply(currentNode, context)\n      if (result && typeof result === 'object' && 'type' in result) {\n        currentNode = result\n      }\n    } catch (error) {\n      // In batch mode, individual modifier failures shouldn't break the entire batch\n      // Only log in non-test environments to avoid polluting test output\n      if (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n        console.error(`Failed to apply modifier ${modifier.type}:`, error)\n      }\n      // Continue with the next modifier\n    }\n  }\n\n  return currentNode\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 * Create a modifiable component from a regular component\n */\nexport function createModifiableComponent<P extends ComponentProps>(\n  component: ComponentInstance<P>,\n  initialModifiers: Modifier[] = []\n): ModifiableComponent<P> {\n  // Create a proper copy to avoid shared references\n  const modifiableComponent: ModifiableComponent<P> = {\n    type: component.type,\n    id: component.id,\n    props: { ...component.props },\n    mounted: component.mounted,\n    cleanup: component.cleanup ? [...component.cleanup] : [],\n    modifiers: [...initialModifiers],\n    modifierBuilder: null as any, // Will be set after component is created\n    render: component.render ? component.render.bind(component) : () => [], // Bind to original component or provide default\n  }\n  \n  // Create modifier builder with the modifiable component so it can update the right modifiers array\n  modifiableComponent.modifierBuilder = createModifierBuilder(modifiableComponent) as any\n  \n  // Store reference to modifiable component so Button can access modifiers\n  ;(component as any).modifiableComponent = modifiableComponent\n  \n  // CRITICAL: Preserve enhanced lifecycle hooks when creating modifiable components\n  const enhancedLifecycle = (component as any)._enhancedLifecycle\n  if (enhancedLifecycle) {\n    // Preserve the enhanced lifecycle hooks\n    ;(modifiableComponent as any)._enhancedLifecycle = enhancedLifecycle\n    \n    // Also preserve other component properties that might be important\n    if ('domElements' in component) {\n      (modifiableComponent as any).domElements = component.domElements\n    }\n    if ('primaryElement' in component) {\n      (modifiableComponent as any).primaryElement = component.primaryElement\n    }\n    if ('domReady' in component) {\n      (modifiableComponent as any).domReady = component.domReady\n    }\n    if ('children' in component) {\n      (modifiableComponent as any).children = component.children\n    }\n  }\n\n  // Enhance the render function to apply modifiers\n  const originalRender = component.render ? component.render.bind(component) : () => []\n  modifiableComponent.render = () => {\n    const renderResult = originalRender()\n    const nodes = Array.isArray(renderResult) ? renderResult : [renderResult]\n\n    // Attach modifiers to each node for later application without breaking component structure\n    return nodes.map((node: any) => {\n      // Preserve the original node and just add modifier metadata\n      if (node && typeof node === 'object') {\n        // Use direct property assignment instead of spread to preserve prototypes\n        node.modifiers = modifiableComponent.modifiers\n        node.componentId = component.id\n        return node\n      }\n      return node\n    })\n  }\n\n  // If the original component supports concatenation, add concatenation methods to modifiable component\n  if (isConcatenatable(component)) {\n    (modifiableComponent as any).concat = function<U extends Concatenatable<any>>(other: U): ConcatenatedComponent<P | U> {\n      // Create segment for this modifiable component\n      const thisSegment: ComponentSegment = {\n        id: modifiableComponent.id,\n        component: modifiableComponent,\n        modifiers: modifiableComponent.modifiers,\n        render: () => {\n          const result = modifiableComponent.render()\n          return Array.isArray(result) ? result[0] : result\n        }\n      }\n      \n      // Get segment from other component\n      const otherSegment = other.toSegment()\n      \n      // Create concatenated component with appropriate metadata\n      const metadata = {\n        totalSegments: other instanceof ConcatenatedComponent \n          ? other.segments.length + 1 \n          : 2,\n        accessibilityRole: 'text' as const, // Simplified for now\n        semanticStructure: 'inline' as const // Simplified for now\n      }\n      \n      if (other instanceof ConcatenatedComponent) {\n        return new ConcatenatedComponent([thisSegment, ...other.segments], metadata)\n      }\n      \n      return new ConcatenatedComponent([thisSegment, otherSegment], metadata)\n    };\n    \n    (modifiableComponent as any).toSegment = function(): ComponentSegment {\n      return {\n        id: modifiableComponent.id,\n        component: modifiableComponent,\n        modifiers: modifiableComponent.modifiers,\n        render: () => {\n          const result = modifiableComponent.render()\n          return Array.isArray(result) ? result[0] : result\n        }\n      }\n    };\n    \n    (modifiableComponent as any).isConcatenatable = function(): boolean {\n      return true\n    }\n  }\n\n  return modifiableComponent\n}\n\n/**\n * Update modifiers on an existing modifiable component\n */\nexport function updateComponentModifiers<P extends ComponentProps>(\n  component: ModifiableComponent<P>,\n  newModifiers: Modifier[],\n  _options: ModifierApplicationOptions = {}\n): void {\n  // const _previousModifiers = component.modifiers\n  component.modifiers = [...newModifiers]\n\n  // If the component is mounted, reapply modifiers\n  if (component.mounted && component.context) {\n    // This would require access to the actual DOM element\n    // Implementation would depend on the component mounting system\n    console.log('Updating modifiers on mounted component', component.id)\n  }\n}\n\n/**\n * Modifier application utilities\n */\nexport const modifierApplicationUtils = {\n  /**\n   * Check if a component has specific modifier types\n   */\n  hasModifierOfType(component: ModifiableComponent, type: string): boolean {\n    return component.modifiers.some((modifier) => modifier.type === type)\n  },\n\n  /**\n   * Get modifiers of a specific type from a component\n   */\n  getModifiersOfType(component: ModifiableComponent, type: string): Modifier[] {\n    return component.modifiers.filter((modifier) => modifier.type === type)\n  },\n\n  /**\n   * Remove modifiers of a specific type from a component\n   */\n  removeModifiersOfType(component: ModifiableComponent, type: string): void {\n    component.modifiers = component.modifiers.filter((modifier) => modifier.type !== type)\n  },\n\n  /**\n   * Replace modifiers of a specific type\n   */\n  replaceModifiersOfType(\n    component: ModifiableComponent,\n    type: string,\n    newModifiers: Modifier[]\n  ): void {\n    // Remove existing modifiers of this type\n    component.modifiers = component.modifiers.filter((modifier) => modifier.type !== type)\n\n    // Add new modifiers\n    component.modifiers.push(...newModifiers)\n  },\n\n  /**\n   * Get the total number of modifiers on a component\n   */\n  getModifierCount(component: ModifiableComponent): number {\n    return component.modifiers.length\n  },\n\n  /**\n   * Check if two modifier arrays are equivalent\n   */\n  areModifiersEqual(modifiers1: Modifier[], modifiers2: Modifier[]): boolean {\n    if (modifiers1.length !== modifiers2.length) return false\n\n    for (let i = 0; i < modifiers1.length; i++) {\n      const m1 = modifiers1[i]\n      const m2 = modifiers2[i]\n\n      if (m1.type !== m2.type || m1.priority !== m2.priority) {\n        return false\n      }\n\n      // Deep compare properties (simplified)\n      if (JSON.stringify(m1.properties) !== JSON.stringify(m2.properties)) {\n        return false\n      }\n    }\n\n    return true\n  },\n}\n"],"names":["ModifierRegistryImpl","__publicField","name","factory","globalModifierRegistry","createModifierRegistry","applyModifiersToNode","node","modifiers","context","options","fullContext","applyModifiersBatch","applyModifiersSequential","sortedModifiers","a","b","currentNode","effects","cleanup","modifier","result","effect","error","existingCleanup","fn","modifierGroups","groupModifiersByType","allEffects","allCleanup","type","groupModifiers","applyModifierGroup","groups","existing","isConcatenatable","component","createModifiableComponent","initialModifiers","modifiableComponent","createModifierBuilder","enhancedLifecycle","originalRender","renderResult","other","thisSegment","otherSegment","metadata","ConcatenatedComponent"],"mappings":"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"}