@tachui/core 0.7.0-alpha1

package/dist/modifiers/transformations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformations.js","sources":["../../src/modifiers/transformations.ts"],"sourcesContent":["/**\n * Transformation Modifiers - CSS Transform System\n *\n * Provides comprehensive 2D and 3D transform capabilities including\n * scale, rotate, translate, skew, perspective, and matrix transforms.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\nexport interface TransformConfig {\n  scale?: number | { x?: number; y?: number }\n  rotate?: string\n  translate?: { x?: number | string; y?: number | string }\n  skew?: { x?: string; y?: string }\n  perspective?: number\n}\n\nexport interface Transform3DConfig extends TransformConfig {\n  rotateX?: string\n  rotateY?: string\n  rotateZ?: string\n  translate?: { x?: number | string; y?: number | string; z?: number | string }\n  translateZ?: number | string\n  scaleZ?: number\n}\n\nexport interface ModifierTransformOptions {\n  transform?: TransformConfig | Transform3DConfig\n  transformOrigin?: string\n  backfaceVisibility?: 'visible' | 'hidden'\n  transformStyle?: 'flat' | 'preserve-3d'\n}\n\nexport type ReactiveTransformOptions = ReactiveModifierProps<ModifierTransformOptions>\n\nexport class TransformModifier extends BaseModifier<ModifierTransformOptions> {\n  readonly type = 'transform'\n  readonly priority = 45\n\n  constructor(options: ReactiveTransformOptions) {\n    const resolvedOptions: ModifierTransformOptions = {}\n    for (const [key, value] of Object.entries(options)) {\n      if (typeof value === 'function' && 'peek' in value) {\n        ;(resolvedOptions as any)[key] = (value as any).peek()\n      } else {\n        ;(resolvedOptions as any)[key] = value\n      }\n    }\n    super(resolvedOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeTransformStyles(this.properties)\n    this.applyStyles(context.element, styles)\n\n    return undefined\n  }\n\n  private computeTransformStyles(props: ModifierTransformOptions) {\n    const styles: Record<string, string> = {}\n\n    if (props.transform) {\n      styles.transform = this.generateTransformCSS(props.transform)\n    }\n\n    if (props.transformOrigin) {\n      styles.transformOrigin = props.transformOrigin\n    }\n\n    if (props.backfaceVisibility) {\n      styles.backfaceVisibility = props.backfaceVisibility\n    }\n\n    if (props.transformStyle) {\n      styles.transformStyle = props.transformStyle\n    }\n\n    return styles\n  }\n\n  private generateTransformCSS(config: TransformConfig | Transform3DConfig): string {\n    const transforms: string[] = []\n\n    // Handle perspective first (for 3D transforms)\n    if ('perspective' in config && config.perspective !== undefined) {\n      transforms.push(`perspective(${config.perspective}px)`)\n    }\n\n    // Handle scale\n    if (config.scale !== undefined) {\n      if (typeof config.scale === 'number') {\n        transforms.push(`scale(${config.scale})`)\n      } else {\n        const x = config.scale.x ?? 1\n        const y = config.scale.y ?? 1\n        transforms.push(`scale(${x}, ${y})`)\n      }\n    }\n\n    // Handle rotate (2D)\n    if (config.rotate !== undefined) {\n      transforms.push(`rotate(${config.rotate})`)\n    }\n\n    // Handle 3D rotations\n    if ('rotateX' in config && config.rotateX !== undefined) {\n      transforms.push(`rotateX(${config.rotateX})`)\n    }\n    if ('rotateY' in config && config.rotateY !== undefined) {\n      transforms.push(`rotateY(${config.rotateY})`)\n    }\n    if ('rotateZ' in config && config.rotateZ !== undefined) {\n      transforms.push(`rotateZ(${config.rotateZ})`)\n    }\n\n    // Handle translate\n    if (config.translate !== undefined) {\n      const x = this.formatLength(config.translate.x ?? 0)\n      const y = this.formatLength(config.translate.y ?? 0)\n\n      // Check for Z value in translate object or translateZ property\n      let z = '0'\n      if ('z' in config.translate && config.translate.z !== undefined) {\n        z = this.formatLength(config.translate.z)\n      } else if ('translateZ' in config && config.translateZ !== undefined) {\n        z = this.formatLength(config.translateZ)\n      }\n\n      // Always use translate3d for hardware acceleration\n      transforms.push(`translate3d(${x}, ${y}, ${z})`)\n    }\n\n    // Handle 3D scale\n    if ('scaleZ' in config && config.scaleZ !== undefined) {\n      transforms.push(`scaleZ(${config.scaleZ})`)\n    }\n\n    // Handle skew\n    if (config.skew !== undefined) {\n      if (config.skew.x !== undefined && config.skew.y !== undefined) {\n        transforms.push(`skew(${config.skew.x}, ${config.skew.y})`)\n      } else if (config.skew.x !== undefined) {\n        transforms.push(`skewX(${config.skew.x})`)\n      } else if (config.skew.y !== undefined) {\n        transforms.push(`skewY(${config.skew.y})`)\n      }\n    }\n\n    return transforms.join(' ')\n  }\n\n  private formatLength(value: number | string): string {\n    if (typeof value === 'number') {\n      return `${value}px`\n    }\n    return value\n  }\n}\n\n// ============================================================================\n// Advanced Transform System for Matrix and Extended 3D\n// ============================================================================\n\nexport interface MatrixTransformConfig {\n  matrix?: [number, number, number, number, number, number]\n  matrix3d?: [\n    number, number, number, number,\n    number, number, number, number,\n    number, number, number, number,\n    number, number, number, number\n  ]\n}\n\nexport interface Advanced3DTransformConfig {\n  rotate3d?: { x: number; y: number; z: number; angle: string }\n  scale3d?: { x: number; y: number; z: number }\n  translate3d?: { x?: number | string; y?: number | string; z?: number | string }\n  scaleX?: number\n  scaleY?: number\n  scaleZ?: number\n  translateX?: number | string\n  translateY?: number | string\n  translateZ?: number | string\n}\n\nexport interface ModifierAdvancedTransformOptions {\n  transform?: TransformConfig | Transform3DConfig | MatrixTransformConfig | Advanced3DTransformConfig\n  transformOrigin?: string\n  perspectiveOrigin?: string\n  transformStyle?: 'flat' | 'preserve-3d'\n  backfaceVisibility?: 'visible' | 'hidden'\n}\n\nexport type ReactiveAdvancedTransformOptions = ReactiveModifierProps<ModifierAdvancedTransformOptions>\n\nexport class AdvancedTransformModifier extends BaseModifier<ModifierAdvancedTransformOptions> {\n  readonly type = 'advancedTransform'\n  readonly priority = 45\n\n  constructor(options: ReactiveAdvancedTransformOptions) {\n    const resolvedOptions: ModifierAdvancedTransformOptions = {}\n    for (const [key, value] of Object.entries(options)) {\n      if (typeof value === 'function' && 'peek' in value) {\n        ;(resolvedOptions as any)[key] = (value as any).peek()\n      } else {\n        ;(resolvedOptions as any)[key] = value\n      }\n    }\n    super(resolvedOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeAdvancedTransformStyles(this.properties)\n    this.applyStyles(context.element, styles)\n\n    return undefined\n  }\n\n  private computeAdvancedTransformStyles(props: ModifierAdvancedTransformOptions) {\n    const styles: Record<string, string> = {}\n\n    if (props.transform) {\n      styles.transform = this.generateAdvancedTransformCSS(props.transform)\n    }\n\n    if (props.transformOrigin) {\n      styles.transformOrigin = props.transformOrigin\n    }\n\n    if (props.perspectiveOrigin) {\n      styles.perspectiveOrigin = props.perspectiveOrigin\n    }\n\n    if (props.backfaceVisibility) {\n      styles.backfaceVisibility = props.backfaceVisibility\n    }\n\n    if (props.transformStyle) {\n      styles.transformStyle = props.transformStyle\n    }\n\n    return styles\n  }\n\n  private generateAdvancedTransformCSS(config: any): string {\n    const transforms: string[] = []\n\n    // Handle matrix transforms\n    if ('matrix' in config && config.matrix) {\n      transforms.push(`matrix(${config.matrix.join(', ')})`)\n    }\n    if ('matrix3d' in config && config.matrix3d) {\n      transforms.push(`matrix3d(${config.matrix3d.join(', ')})`)\n    }\n\n    // Handle advanced 3D transforms\n    if ('rotate3d' in config && config.rotate3d) {\n      const { x, y, z, angle } = config.rotate3d\n      transforms.push(`rotate3d(${x}, ${y}, ${z}, ${angle})`)\n    }\n\n    if ('scale3d' in config && config.scale3d) {\n      const { x, y, z } = config.scale3d\n      transforms.push(`scale3d(${x}, ${y}, ${z})`)\n    }\n\n    if ('translate3d' in config && config.translate3d) {\n      const x = this.formatLength(config.translate3d.x ?? 0)\n      const y = this.formatLength(config.translate3d.y ?? 0)\n      const z = this.formatLength(config.translate3d.z ?? 0)\n      transforms.push(`translate3d(${x}, ${y}, ${z})`)\n    }\n\n    // Individual axis transforms\n    if ('scaleX' in config && config.scaleX !== undefined) {\n      transforms.push(`scaleX(${config.scaleX})`)\n    }\n    if ('scaleY' in config && config.scaleY !== undefined) {\n      transforms.push(`scaleY(${config.scaleY})`)\n    }\n    if ('scaleZ' in config && config.scaleZ !== undefined) {\n      transforms.push(`scaleZ(${config.scaleZ})`)\n    }\n    if ('translateX' in config && config.translateX !== undefined) {\n      transforms.push(`translateX(${this.formatLength(config.translateX)})`)\n    }\n    if ('translateY' in config && config.translateY !== undefined) {\n      transforms.push(`translateY(${this.formatLength(config.translateY)})`)\n    }\n    if ('translateZ' in config && config.translateZ !== undefined) {\n      transforms.push(`translateZ(${this.formatLength(config.translateZ)})`)\n    }\n\n    // Fallback to basic transform generation\n    if (transforms.length === 0) {\n      return this.generateTransformCSS(config)\n    }\n\n    return transforms.join(' ')\n  }\n\n  private generateTransformCSS(config: TransformConfig | Transform3DConfig): string {\n    // Reuse the basic transform generation logic\n    const transformModifier = new TransformModifier({ transform: config })\n    return (transformModifier as any).generateTransformCSS(config)\n  }\n\n  private formatLength(value: number | string): string {\n    if (typeof value === 'number') {\n      return `${value}px`\n    }\n    return value\n  }\n}\n\n// ============================================================================\n// Transform Functions\n// ============================================================================\n\n/**\n * General transform modifier with flexible configuration\n *\n * @example\n * ```typescript\n * .transform({\n *   scale: 1.1,\n *   rotate: '45deg',\n *   translate: { x: 10, y: 20 }\n * })\n * ```\n */\nexport function transform(config: TransformConfig | Transform3DConfig): TransformModifier {\n  return new TransformModifier({ transform: config })\n}\n\n/**\n * Scale transformation\n *\n * @example\n * ```typescript\n * .scale(1.2)                    // Uniform scale\n * .scale({ x: 1.5, y: 0.8 })     // Non-uniform scale\n * ```\n */\nexport function scale(value: number | { x?: number; y?: number }): TransformModifier {\n  return new TransformModifier({ transform: { scale: value } })\n}\n\n/**\n * 2D rotation transformation\n *\n * @example\n * ```typescript\n * .rotate('45deg')\n * .rotate('-90deg')\n * .rotate('0.5turn')\n * ```\n */\nexport function rotate(angle: string): TransformModifier {\n  return new TransformModifier({ transform: { rotate: angle } })\n}\n\n/**\n * Translation transformation\n *\n * @example\n * ```typescript\n * .translate({ x: 10, y: 20 })\n * .translate({ x: '50%', y: '-10px' })\n * ```\n */\nexport function translate(offset: { x?: number | string; y?: number | string }): TransformModifier {\n  return new TransformModifier({ transform: { translate: offset } })\n}\n\n/**\n * Skew transformation\n *\n * @example\n * ```typescript\n * .skew({ x: '15deg', y: '10deg' })\n * .skew({ x: '20deg' })  // Only X axis\n * ```\n */\nexport function skew(angles: { x?: string; y?: string }): TransformModifier {\n  return new TransformModifier({ transform: { skew: angles } })\n}\n\n// ============================================================================\n// 3D Transform Functions\n// ============================================================================\n\n/**\n * X-axis rotation (3D)\n *\n * @example\n * ```typescript\n * .rotateX('45deg')\n * .rotateX('1rad')\n * ```\n */\nexport function rotateX(angle: string): TransformModifier {\n  return new TransformModifier({ transform: { rotateX: angle } })\n}\n\n/**\n * Y-axis rotation (3D)\n *\n * @example\n * ```typescript\n * .rotateY('90deg')\n * .rotateY('-45deg')\n * ```\n */\nexport function rotateY(angle: string): TransformModifier {\n  return new TransformModifier({ transform: { rotateY: angle } })\n}\n\n/**\n * Z-axis rotation (3D)\n *\n * @example\n * ```typescript\n * .rotateZ('180deg')\n * .rotateZ('0.25turn')\n * ```\n */\nexport function rotateZ(angle: string): TransformModifier {\n  return new TransformModifier({ transform: { rotateZ: angle } })\n}\n\n/**\n * 3D perspective\n *\n * @example\n * ```typescript\n * .perspective(1000)  // 1000px perspective\n * .perspective(500)   // Closer perspective\n * ```\n */\nexport function perspective(value: number): TransformModifier {\n  return new TransformModifier({ transform: { perspective: value } })\n}\n\n// ============================================================================\n// Advanced Transform Functions (Matrix, Extended 3D)\n// ============================================================================\n\n/**\n * Advanced transform modifier with matrix and extended 3D support\n *\n * @example\n * ```typescript\n * .advancedTransform({\n *   rotate3d: { x: 1, y: 1, z: 0, angle: '45deg' },\n *   scale3d: { x: 1.2, y: 1.2, z: 1 }\n * })\n * ```\n */\nexport function advancedTransform(config: Advanced3DTransformConfig | MatrixTransformConfig): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transform: config })\n}\n\n/**\n * 2D matrix transformation\n *\n * @example\n * ```typescript\n * .matrix([1, 0, 0, 1, 50, 100])  // Translate(50, 100)\n * ```\n */\nexport function matrix(values: [number, number, number, number, number, number]): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transform: { matrix: values } })\n}\n\n/**\n * 3D matrix transformation\n *\n * @example\n * ```typescript\n * .matrix3d([1,0,0,0, 0,1,0,0, 0,0,1,0, 50,100,0,1])\n * ```\n */\nexport function matrix3d(values: [\n  number, number, number, number,\n  number, number, number, number,\n  number, number, number, number,\n  number, number, number, number\n]): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transform: { matrix3d: values } })\n}\n\n/**\n * 3D rotation around arbitrary axis\n *\n * @example\n * ```typescript\n * .rotate3d(1, 1, 0, '45deg')  // Rotate around X and Y axis\n * ```\n */\nexport function rotate3d(x: number, y: number, z: number, angle: string): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transform: { rotate3d: { x, y, z, angle } } })\n}\n\n/**\n * 3D scale transformation\n *\n * @example\n * ```typescript\n * .scale3d(1.2, 1.2, 0.8)  // Scale XY up, Z down\n * ```\n */\nexport function scale3d(x: number, y: number, z: number): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transform: { scale3d: { x, y, z } } })\n}\n\n/**\n * 3D translation transformation\n *\n * @example\n * ```typescript\n * .translate3d(10, 20, 30)      // Hardware accelerated\n * .translate3d('50%', 0, 0)     // Percentage values\n * ```\n */\nexport function translate3d(x?: number | string, y?: number | string, z?: number | string): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transform: { translate3d: { x, y, z } } })\n}\n\n// Individual axis scale functions\nexport function scaleX(value: number): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transform: { scaleX: value } })\n}\n\nexport function scaleY(value: number): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transform: { scaleY: value } })\n}\n\nexport function scaleZ(value: number): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transform: { scaleZ: value } })\n}\n\n// Individual axis translate functions\nexport function translateX(value: number | string): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transform: { translateX: value } })\n}\n\nexport function translateY(value: number | string): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transform: { translateY: value } })\n}\n\nexport function translateZ(value: number | string): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transform: { translateZ: value } })\n}\n\n// Transform utility functions\nexport function perspectiveOrigin(value: string): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ perspectiveOrigin: value })\n}\n\nexport function transformStyle(value: 'flat' | 'preserve-3d'): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ transformStyle: value })\n}\n\nexport function backfaceVisibility(value: 'visible' | 'hidden'): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({ backfaceVisibility: value })\n}\n\n// ============================================================================\n// SwiftUI Compatibility Functions\n// ============================================================================\n\ntype AnchorPoint = 'center' | 'top' | 'bottom' | 'leading' | 'trailing' | \n                   'topLeading' | 'topTrailing' | 'bottomLeading' | 'bottomTrailing'\n\n/**\n * SwiftUI-compatible scaleEffect modifier\n * \n * @example\n * ```typescript\n * .scaleEffect(1.5)                    // Uniform scale\n * .scaleEffect(1.5, 2.0)               // Non-uniform scale  \n * .scaleEffect(1.2, undefined, 'topLeading')  // Scale from top-leading corner\n * ```\n */\nexport function scaleEffect(\n  x: number,\n  y?: number,\n  anchor: AnchorPoint = 'center'\n): AdvancedTransformModifier {\n  const scaleX = x\n  const scaleY = y ?? x\n  const transformOrigin = getTransformOrigin(anchor)\n  \n  return new AdvancedTransformModifier({ \n    transform: { scaleX, scaleY },\n    transformOrigin \n  })\n}\n\n/**\n * SwiftUI-compatible offset modifier (relative positioning via transform)\n * \n * Note: SwiftUI's .position() sets absolute coordinates, but in web context\n * we use .offset() for relative positioning which is more common.\n * \n * @example\n * ```typescript\n * .offset(100, 50)   // Offset by x=100, y=50 relative to current position\n * ```\n */\nexport function offset(x: number, y: number): AdvancedTransformModifier {\n  return new AdvancedTransformModifier({\n    transform: { translateX: x, translateY: y }\n  })\n}\n\n/**\n * Convert SwiftUI anchor point to CSS transform-origin\n */\nfunction getTransformOrigin(anchor: AnchorPoint): string {\n  switch (anchor) {\n    case 'center': return 'center center'\n    case 'top': return 'center top'\n    case 'bottom': return 'center bottom'\n    case 'leading': return 'left center'\n    case 'trailing': return 'right center'\n    case 'topLeading': return 'left top'\n    case 'topTrailing': return 'right top'\n    case 'bottomLeading': return 'left bottom'\n    case 'bottomTrailing': return 'right bottom'\n    default: return 'center center'\n  }\n}\n"],"names":["TransformModifier","BaseModifier","options","resolvedOptions","key","value","__publicField","_node","context","styles","props","config","transforms","x","y","z","AdvancedTransformModifier","angle","transform","scale","rotate","translate","offset","skew","angles","rotateX","rotateY","rotateZ","perspective","advancedTransform","matrix","values","matrix3d","rotate3d","scale3d","translate3d","scaleX","scaleY","scaleZ","translateX","translateY","translateZ","perspectiveOrigin","transformStyle","backfaceVisibility","scaleEffect","anchor","transformOrigin","getTransformOrigin"],"mappings":"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"}

package/dist/modifiers/transitions.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./base.cjs");var T=Object.defineProperty,g=(n,t,i)=>t in n?T(n,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[t]=i,c=(n,t,i)=>g(n,typeof t!="symbol"?t+"":t,i);class a extends d.BaseModifier{constructor(t){const i={};for(const[o,e]of Object.entries(t))typeof e=="function"&&"peek"in e?i[o]=e.peek():i[o]=e;super(i),c(this,"type","transition"),c(this,"priority",25)}apply(t,i){if(!i.element)return;const o=this.computeTransitionStyles(this.properties);this.applyStyles(i.element,o)}computeTransitionStyles(t){const i={};if(t.transition&&(i.transition=t.transition),t.transitions){const o=this.generateTransitionsCSS(t.transitions);i.transition=o}return i}generateTransitionsCSS(t){return Object.entries(t).map(([i,o])=>{const e=this.toCSSProperty(i),l=o.duration||300,f=o.easing||"ease",u=o.delay||0;return`${e} ${l}ms ${f}${u>0?` ${u}ms`:""}`}).join(", ")}}function r(n="all",t=300,i="ease",o=0){const e=`${n} ${t}ms ${i}${o>0?` ${o}ms`:""}`;return new a({transition:e})}function s(n){return new a({transitions:n})}function m(n=200){return r("opacity",n,"ease-out")}function p(n=300){return r("transform",n,"ease-out")}function b(n=150){return s({color:{duration:n,easing:"ease-out"},backgroundColor:{duration:n,easing:"ease-out"},borderColor:{duration:n,easing:"ease-out"}})}function y(n=250){return s({width:{duration:n,easing:"ease-out"},height:{duration:n,easing:"ease-out"},margin:{duration:n,easing:"ease-out"},padding:{duration:n,easing:"ease-out"}})}function h(){return s({backgroundColor:{duration:150,easing:"ease-out"},transform:{duration:200,easing:"ease-out"},boxShadow:{duration:200,easing:"ease-out"}})}function S(){return s({transform:{duration:200,easing:"ease-out"},boxShadow:{duration:300,easing:"ease-out"},borderColor:{duration:150,easing:"ease-out"}})}function $(){return s({opacity:{duration:200,easing:"ease-out"},transform:{duration:300,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}})}function w(n=300){return r("all",n,"ease-out")}function C(n=150){return r("all",n,"ease-out")}function _(n=500){return r("all",n,"ease-out")}exports.TransitionModifier=a;exports.buttonTransition=h;exports.cardTransition=S;exports.colorTransition=b;exports.fadeTransition=m;exports.layoutTransition=y;exports.modalTransition=$;exports.quickTransition=C;exports.slowTransition=_;exports.smoothTransition=w;exports.transformTransition=p;exports.transition=r;exports.transitions=s;
+//# sourceMappingURL=transitions.cjs.map

package/dist/modifiers/transitions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.cjs","sources":["../../src/modifiers/transitions.ts"],"sourcesContent":["/**\n * Transition Modifiers - CSS transition system\n *\n * Provides comprehensive CSS transition capabilities with support for\n * individual property transitions and complex multi-property animations.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\nexport interface TransitionConfig {\n  property?: string\n  duration?: number\n  easing?: string\n  delay?: number\n}\n\nexport interface TransitionsConfig {\n  [property: string]: TransitionConfig\n}\n\nexport interface ModifierTransitionOptions {\n  transition?: string\n  transitions?: TransitionsConfig\n}\n\nexport type ReactiveTransitionOptions = ReactiveModifierProps<ModifierTransitionOptions>\n\nexport class TransitionModifier extends BaseModifier<ModifierTransitionOptions> {\n  readonly type = 'transition'\n  readonly priority = 25\n\n  constructor(options: ReactiveTransitionOptions) {\n    const resolvedOptions: ModifierTransitionOptions = {}\n    for (const [key, value] of Object.entries(options)) {\n      if (typeof value === 'function' && 'peek' in value) {\n        ;(resolvedOptions as any)[key] = (value as any).peek()\n      } else {\n        ;(resolvedOptions as any)[key] = value\n      }\n    }\n    super(resolvedOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeTransitionStyles(this.properties)\n    this.applyStyles(context.element, styles)\n    \n    return undefined\n  }\n\n  private computeTransitionStyles(props: ModifierTransitionOptions) {\n    const styles: Record<string, string> = {}\n\n    if (props.transition) {\n      styles.transition = props.transition\n    }\n\n    if (props.transitions) {\n      const transitionValue = this.generateTransitionsCSS(props.transitions)\n      styles.transition = transitionValue\n    }\n\n    return styles\n  }\n\n  private generateTransitionsCSS(config: TransitionsConfig): string {\n    return Object.entries(config)\n      .map(([property, settings]) => {\n        const prop = this.toCSSProperty(property)\n        const duration = settings.duration || 300\n        const easing = settings.easing || 'ease'\n        const delay = settings.delay || 0\n        \n        return `${prop} ${duration}ms ${easing}${delay > 0 ? ` ${delay}ms` : ''}`\n      })\n      .join(', ')\n  }\n}\n\n// ============================================================================\n// Transition Functions\n// ============================================================================\n\n/**\n * Simple transition modifier with sensible defaults\n *\n * @example\n * ```typescript\n * .transition()                          // All properties, 300ms, ease\n * .transition('opacity')                 // Just opacity\n * .transition('all', 200)                // All properties, 200ms\n * .transition('transform', 300, 'ease-out')  // Transform with custom easing\n * .transition('opacity', 150, 'ease-in', 50)  // With delay\n * ```\n */\nexport function transition(\n  property: string = 'all', \n  duration: number = 300, \n  easing: string = 'ease', \n  delay: number = 0\n): TransitionModifier {\n  const transitionValue = `${property} ${duration}ms ${easing}${delay > 0 ? ` ${delay}ms` : ''}`\n  return new TransitionModifier({ transition: transitionValue })\n}\n\n/**\n * Complex transitions with multiple properties\n *\n * @example\n * ```typescript\n * .transitions({\n *   opacity: { duration: 200, easing: 'ease-out' },\n *   transform: { duration: 300, easing: 'ease-in-out', delay: 100 },\n *   backgroundColor: { duration: 150 }\n * })\n * ```\n */\nexport function transitions(config: TransitionsConfig): TransitionModifier {\n  return new TransitionModifier({ transitions: config })\n}\n\n// ============================================================================\n// Common Transition Presets\n// ============================================================================\n\n/**\n * Quick fade transition\n */\nexport function fadeTransition(duration: number = 200): TransitionModifier {\n  return transition('opacity', duration, 'ease-out')\n}\n\n/**\n * Smooth transform transition\n */\nexport function transformTransition(duration: number = 300): TransitionModifier {\n  return transition('transform', duration, 'ease-out')\n}\n\n/**\n * Color change transition\n */\nexport function colorTransition(duration: number = 150): TransitionModifier {\n  return transitions({\n    color: { duration, easing: 'ease-out' },\n    backgroundColor: { duration, easing: 'ease-out' },\n    borderColor: { duration, easing: 'ease-out' }\n  })\n}\n\n/**\n * Layout transition for size changes\n */\nexport function layoutTransition(duration: number = 250): TransitionModifier {\n  return transitions({\n    width: { duration, easing: 'ease-out' },\n    height: { duration, easing: 'ease-out' },\n    margin: { duration, easing: 'ease-out' },\n    padding: { duration, easing: 'ease-out' }\n  })\n}\n\n/**\n * Button hover transition\n */\nexport function buttonTransition(): TransitionModifier {\n  return transitions({\n    backgroundColor: { duration: 150, easing: 'ease-out' },\n    transform: { duration: 200, easing: 'ease-out' },\n    boxShadow: { duration: 200, easing: 'ease-out' }\n  })\n}\n\n/**\n * Card hover transition\n */\nexport function cardTransition(): TransitionModifier {\n  return transitions({\n    transform: { duration: 200, easing: 'ease-out' },\n    boxShadow: { duration: 300, easing: 'ease-out' },\n    borderColor: { duration: 150, easing: 'ease-out' }\n  })\n}\n\n/**\n * Modal/dialog transition\n */\nexport function modalTransition(): TransitionModifier {\n  return transitions({\n    opacity: { duration: 200, easing: 'ease-out' },\n    transform: { duration: 300, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' }\n  })\n}\n\n/**\n * Smooth all-properties transition\n */\nexport function smoothTransition(duration: number = 300): TransitionModifier {\n  return transition('all', duration, 'ease-out')\n}\n\n/**\n * Quick transition for interactive elements\n */\nexport function quickTransition(duration: number = 150): TransitionModifier {\n  return transition('all', duration, 'ease-out')\n}\n\n/**\n * Slow transition for dramatic effects\n */\nexport function slowTransition(duration: number = 500): TransitionModifier {\n  return transition('all', duration, 'ease-out')\n}"],"names":["TransitionModifier","BaseModifier","options","resolvedOptions","key","value","__publicField","_node","context","styles","props","transitionValue","config","property","settings","prop","duration","easing","delay","transition","transitions","fadeTransition","transformTransition","colorTransition","layoutTransition","buttonTransition","cardTransition","modalTransition","smoothTransition","quickTransition","slowTransition"],"mappings":"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"}

package/dist/modifiers/transitions.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Transition Modifiers - CSS transition system
+ *
+ * Provides comprehensive CSS transition capabilities with support for
+ * individual property transitions and complex multi-property animations.
+ */
+import type { DOMNode } from '../runtime/types';
+import { BaseModifier } from './base';
+import type { ModifierContext, ReactiveModifierProps } from './types';
+export interface TransitionConfig {
+    property?: string;
+    duration?: number;
+    easing?: string;
+    delay?: number;
+}
+export interface TransitionsConfig {
+    [property: string]: TransitionConfig;
+}
+export interface ModifierTransitionOptions {
+    transition?: string;
+    transitions?: TransitionsConfig;
+}
+export type ReactiveTransitionOptions = ReactiveModifierProps<ModifierTransitionOptions>;
+export declare class TransitionModifier extends BaseModifier<ModifierTransitionOptions> {
+    readonly type = "transition";
+    readonly priority = 25;
+    constructor(options: ReactiveTransitionOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computeTransitionStyles;
+    private generateTransitionsCSS;
+}
+/**
+ * Simple transition modifier with sensible defaults
+ *
+ * @example
+ * ```typescript
+ * .transition()                          // All properties, 300ms, ease
+ * .transition('opacity')                 // Just opacity
+ * .transition('all', 200)                // All properties, 200ms
+ * .transition('transform', 300, 'ease-out')  // Transform with custom easing
+ * .transition('opacity', 150, 'ease-in', 50)  // With delay
+ * ```
+ */
+export declare function transition(property?: string, duration?: number, easing?: string, delay?: number): TransitionModifier;
+/**
+ * Complex transitions with multiple properties
+ *
+ * @example
+ * ```typescript
+ * .transitions({
+ *   opacity: { duration: 200, easing: 'ease-out' },
+ *   transform: { duration: 300, easing: 'ease-in-out', delay: 100 },
+ *   backgroundColor: { duration: 150 }
+ * })
+ * ```
+ */
+export declare function transitions(config: TransitionsConfig): TransitionModifier;
+/**
+ * Quick fade transition
+ */
+export declare function fadeTransition(duration?: number): TransitionModifier;
+/**
+ * Smooth transform transition
+ */
+export declare function transformTransition(duration?: number): TransitionModifier;
+/**
+ * Color change transition
+ */
+export declare function colorTransition(duration?: number): TransitionModifier;
+/**
+ * Layout transition for size changes
+ */
+export declare function layoutTransition(duration?: number): TransitionModifier;
+/**
+ * Button hover transition
+ */
+export declare function buttonTransition(): TransitionModifier;
+/**
+ * Card hover transition
+ */
+export declare function cardTransition(): TransitionModifier;
+/**
+ * Modal/dialog transition
+ */
+export declare function modalTransition(): TransitionModifier;
+/**
+ * Smooth all-properties transition
+ */
+export declare function smoothTransition(duration?: number): TransitionModifier;
+/**
+ * Quick transition for interactive elements
+ */
+export declare function quickTransition(duration?: number): TransitionModifier;
+/**
+ * Slow transition for dramatic effects
+ */
+export declare function slowTransition(duration?: number): TransitionModifier;
+//# sourceMappingURL=transitions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.d.ts","sourceRoot":"","sources":["../../src/modifiers/transitions.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;AAErE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,CAAC,QAAQ,EAAE,MAAM,GAAG,gBAAgB,CAAA;CACrC;AAED,MAAM,WAAW,yBAAyB;IACxC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,iBAAiB,CAAA;CAChC;AAED,MAAM,MAAM,yBAAyB,GAAG,qBAAqB,CAAC,yBAAyB,CAAC,CAAA;AAExF,qBAAa,kBAAmB,SAAQ,YAAY,CAAC,yBAAyB,CAAC;IAC7E,QAAQ,CAAC,IAAI,gBAAe;IAC5B,QAAQ,CAAC,QAAQ,MAAK;gBAEV,OAAO,EAAE,yBAAyB;IAY9C,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IASpE,OAAO,CAAC,uBAAuB;IAe/B,OAAO,CAAC,sBAAsB;CAY/B;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CACxB,QAAQ,GAAE,MAAc,EACxB,QAAQ,GAAE,MAAY,EACtB,MAAM,GAAE,MAAe,EACvB,KAAK,GAAE,MAAU,GAChB,kBAAkB,CAGpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,iBAAiB,GAAG,kBAAkB,CAEzE;AAMD;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,GAAE,MAAY,GAAG,kBAAkB,CAEzE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,MAAY,GAAG,kBAAkB,CAE9E;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,QAAQ,GAAE,MAAY,GAAG,kBAAkB,CAM1E;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,GAAE,MAAY,GAAG,kBAAkB,CAO3E;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,kBAAkB,CAMrD;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,kBAAkB,CAMnD;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,kBAAkB,CAKpD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,GAAE,MAAY,GAAG,kBAAkB,CAE3E;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,QAAQ,GAAE,MAAY,GAAG,kBAAkB,CAE1E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,GAAE,MAAY,GAAG,kBAAkB,CAEzE"}

package/dist/modifiers/transitions.js

@@ -0,0 +1,102 @@
+import { BaseModifier as d } from "./base.js";
+var g = Object.defineProperty, p = (n, t, e) => t in n ? g(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e, u = (n, t, e) => p(n, typeof t != "symbol" ? t + "" : t, e);
+class c extends d {
+  constructor(t) {
+    const e = {};
+    for (const [o, i] of Object.entries(t))
+      typeof i == "function" && "peek" in i ? e[o] = i.peek() : e[o] = i;
+    super(e), u(this, "type", "transition"), u(this, "priority", 25);
+  }
+  apply(t, e) {
+    if (!e.element) return;
+    const o = this.computeTransitionStyles(this.properties);
+    this.applyStyles(e.element, o);
+  }
+  computeTransitionStyles(t) {
+    const e = {};
+    if (t.transition && (e.transition = t.transition), t.transitions) {
+      const o = this.generateTransitionsCSS(t.transitions);
+      e.transition = o;
+    }
+    return e;
+  }
+  generateTransitionsCSS(t) {
+    return Object.entries(t).map(([e, o]) => {
+      const i = this.toCSSProperty(e), l = o.duration || 300, f = o.easing || "ease", a = o.delay || 0;
+      return `${i} ${l}ms ${f}${a > 0 ? ` ${a}ms` : ""}`;
+    }).join(", ");
+  }
+}
+function r(n = "all", t = 300, e = "ease", o = 0) {
+  const i = `${n} ${t}ms ${e}${o > 0 ? ` ${o}ms` : ""}`;
+  return new c({ transition: i });
+}
+function s(n) {
+  return new c({ transitions: n });
+}
+function b(n = 200) {
+  return r("opacity", n, "ease-out");
+}
+function y(n = 300) {
+  return r("transform", n, "ease-out");
+}
+function T(n = 150) {
+  return s({
+    color: { duration: n, easing: "ease-out" },
+    backgroundColor: { duration: n, easing: "ease-out" },
+    borderColor: { duration: n, easing: "ease-out" }
+  });
+}
+function h(n = 250) {
+  return s({
+    width: { duration: n, easing: "ease-out" },
+    height: { duration: n, easing: "ease-out" },
+    margin: { duration: n, easing: "ease-out" },
+    padding: { duration: n, easing: "ease-out" }
+  });
+}
+function S() {
+  return s({
+    backgroundColor: { duration: 150, easing: "ease-out" },
+    transform: { duration: 200, easing: "ease-out" },
+    boxShadow: { duration: 200, easing: "ease-out" }
+  });
+}
+function $() {
+  return s({
+    transform: { duration: 200, easing: "ease-out" },
+    boxShadow: { duration: 300, easing: "ease-out" },
+    borderColor: { duration: 150, easing: "ease-out" }
+  });
+}
+function w() {
+  return s({
+    opacity: { duration: 200, easing: "ease-out" },
+    transform: { duration: 300, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" }
+  });
+}
+function C(n = 300) {
+  return r("all", n, "ease-out");
+}
+function _(n = 150) {
+  return r("all", n, "ease-out");
+}
+function v(n = 500) {
+  return r("all", n, "ease-out");
+}
+export {
+  c as TransitionModifier,
+  S as buttonTransition,
+  $ as cardTransition,
+  T as colorTransition,
+  b as fadeTransition,
+  h as layoutTransition,
+  w as modalTransition,
+  _ as quickTransition,
+  v as slowTransition,
+  C as smoothTransition,
+  y as transformTransition,
+  r as transition,
+  s as transitions
+};
+//# sourceMappingURL=transitions.js.map

package/dist/modifiers/transitions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.js","sources":["../../src/modifiers/transitions.ts"],"sourcesContent":["/**\n * Transition Modifiers - CSS transition system\n *\n * Provides comprehensive CSS transition capabilities with support for\n * individual property transitions and complex multi-property animations.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\nexport interface TransitionConfig {\n  property?: string\n  duration?: number\n  easing?: string\n  delay?: number\n}\n\nexport interface TransitionsConfig {\n  [property: string]: TransitionConfig\n}\n\nexport interface ModifierTransitionOptions {\n  transition?: string\n  transitions?: TransitionsConfig\n}\n\nexport type ReactiveTransitionOptions = ReactiveModifierProps<ModifierTransitionOptions>\n\nexport class TransitionModifier extends BaseModifier<ModifierTransitionOptions> {\n  readonly type = 'transition'\n  readonly priority = 25\n\n  constructor(options: ReactiveTransitionOptions) {\n    const resolvedOptions: ModifierTransitionOptions = {}\n    for (const [key, value] of Object.entries(options)) {\n      if (typeof value === 'function' && 'peek' in value) {\n        ;(resolvedOptions as any)[key] = (value as any).peek()\n      } else {\n        ;(resolvedOptions as any)[key] = value\n      }\n    }\n    super(resolvedOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeTransitionStyles(this.properties)\n    this.applyStyles(context.element, styles)\n    \n    return undefined\n  }\n\n  private computeTransitionStyles(props: ModifierTransitionOptions) {\n    const styles: Record<string, string> = {}\n\n    if (props.transition) {\n      styles.transition = props.transition\n    }\n\n    if (props.transitions) {\n      const transitionValue = this.generateTransitionsCSS(props.transitions)\n      styles.transition = transitionValue\n    }\n\n    return styles\n  }\n\n  private generateTransitionsCSS(config: TransitionsConfig): string {\n    return Object.entries(config)\n      .map(([property, settings]) => {\n        const prop = this.toCSSProperty(property)\n        const duration = settings.duration || 300\n        const easing = settings.easing || 'ease'\n        const delay = settings.delay || 0\n        \n        return `${prop} ${duration}ms ${easing}${delay > 0 ? ` ${delay}ms` : ''}`\n      })\n      .join(', ')\n  }\n}\n\n// ============================================================================\n// Transition Functions\n// ============================================================================\n\n/**\n * Simple transition modifier with sensible defaults\n *\n * @example\n * ```typescript\n * .transition()                          // All properties, 300ms, ease\n * .transition('opacity')                 // Just opacity\n * .transition('all', 200)                // All properties, 200ms\n * .transition('transform', 300, 'ease-out')  // Transform with custom easing\n * .transition('opacity', 150, 'ease-in', 50)  // With delay\n * ```\n */\nexport function transition(\n  property: string = 'all', \n  duration: number = 300, \n  easing: string = 'ease', \n  delay: number = 0\n): TransitionModifier {\n  const transitionValue = `${property} ${duration}ms ${easing}${delay > 0 ? ` ${delay}ms` : ''}`\n  return new TransitionModifier({ transition: transitionValue })\n}\n\n/**\n * Complex transitions with multiple properties\n *\n * @example\n * ```typescript\n * .transitions({\n *   opacity: { duration: 200, easing: 'ease-out' },\n *   transform: { duration: 300, easing: 'ease-in-out', delay: 100 },\n *   backgroundColor: { duration: 150 }\n * })\n * ```\n */\nexport function transitions(config: TransitionsConfig): TransitionModifier {\n  return new TransitionModifier({ transitions: config })\n}\n\n// ============================================================================\n// Common Transition Presets\n// ============================================================================\n\n/**\n * Quick fade transition\n */\nexport function fadeTransition(duration: number = 200): TransitionModifier {\n  return transition('opacity', duration, 'ease-out')\n}\n\n/**\n * Smooth transform transition\n */\nexport function transformTransition(duration: number = 300): TransitionModifier {\n  return transition('transform', duration, 'ease-out')\n}\n\n/**\n * Color change transition\n */\nexport function colorTransition(duration: number = 150): TransitionModifier {\n  return transitions({\n    color: { duration, easing: 'ease-out' },\n    backgroundColor: { duration, easing: 'ease-out' },\n    borderColor: { duration, easing: 'ease-out' }\n  })\n}\n\n/**\n * Layout transition for size changes\n */\nexport function layoutTransition(duration: number = 250): TransitionModifier {\n  return transitions({\n    width: { duration, easing: 'ease-out' },\n    height: { duration, easing: 'ease-out' },\n    margin: { duration, easing: 'ease-out' },\n    padding: { duration, easing: 'ease-out' }\n  })\n}\n\n/**\n * Button hover transition\n */\nexport function buttonTransition(): TransitionModifier {\n  return transitions({\n    backgroundColor: { duration: 150, easing: 'ease-out' },\n    transform: { duration: 200, easing: 'ease-out' },\n    boxShadow: { duration: 200, easing: 'ease-out' }\n  })\n}\n\n/**\n * Card hover transition\n */\nexport function cardTransition(): TransitionModifier {\n  return transitions({\n    transform: { duration: 200, easing: 'ease-out' },\n    boxShadow: { duration: 300, easing: 'ease-out' },\n    borderColor: { duration: 150, easing: 'ease-out' }\n  })\n}\n\n/**\n * Modal/dialog transition\n */\nexport function modalTransition(): TransitionModifier {\n  return transitions({\n    opacity: { duration: 200, easing: 'ease-out' },\n    transform: { duration: 300, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' }\n  })\n}\n\n/**\n * Smooth all-properties transition\n */\nexport function smoothTransition(duration: number = 300): TransitionModifier {\n  return transition('all', duration, 'ease-out')\n}\n\n/**\n * Quick transition for interactive elements\n */\nexport function quickTransition(duration: number = 150): TransitionModifier {\n  return transition('all', duration, 'ease-out')\n}\n\n/**\n * Slow transition for dramatic effects\n */\nexport function slowTransition(duration: number = 500): TransitionModifier {\n  return transition('all', duration, 'ease-out')\n}"],"names":["TransitionModifier","BaseModifier","options","resolvedOptions","key","value","__publicField","_node","context","styles","props","transitionValue","config","property","settings","prop","duration","easing","delay","transition","transitions","fadeTransition","transformTransition","colorTransition","layoutTransition","buttonTransition","cardTransition","modalTransition","smoothTransition","quickTransition","slowTransition"],"mappings":"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"}

package/dist/modifiers/types.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var T=(A=>(A[A.LAYOUT=100]="LAYOUT",A[A.APPEARANCE=200]="APPEARANCE",A[A.INTERACTION=300]="INTERACTION",A[A.ANIMATION=400]="ANIMATION",A[A.CUSTOM=500]="CUSTOM",A))(T||{});exports.ModifierPriority=T;
+//# sourceMappingURL=types.cjs.map

package/dist/modifiers/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","sources":["../../src/modifiers/types.ts"],"sourcesContent":["/**\n * SwiftUI Modifier System Types\n *\n * Core type definitions for the SwiftUI-inspired modifier system.\n * Enables chaining modifiers on components similar to SwiftUI.\n */\n\nimport type { Signal } from '../reactive/types'\nimport type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types'\nimport type { FontWeight } from './typography'\nimport type { Dimension } from '../constants/layout'\nimport type { StatefulBackgroundValue } from '../gradients/types'\nimport type { ResponsiveModifierBuilder, ResponsiveBreakpointBuilder } from './responsive/responsive-builder'\nimport type { Asset } from '../assets/Asset'\nimport type { ColorAssetProxy, ImageAssetProxy, FontAssetProxy } from '../assets/types'\n\n/**\n * Valid color value types for modifiers\n */\nexport type ColorValue = string | Asset | ColorAssetProxy | Signal<string>\n\n/**\n * Valid asset types for modifiers\n */\nexport type AssetValue = Asset | ColorAssetProxy | ImageAssetProxy | FontAssetProxy\n\n/**\n * Text component interface for type safety with asHTML modifier\n */\nexport interface TextComponent extends ComponentInstance {\n  readonly __tachui_component_type: 'Text'\n  content: string\n}\n\n/**\n * Base modifier interface that all modifiers must implement\n */\nexport interface Modifier<TProps = {}> {\n  readonly type: string\n  readonly priority: number\n  readonly properties: TProps\n  apply(node: DOMNode, context: ModifierContext): DOMNode | undefined\n}\n\n/**\n * Context passed to modifiers during application\n */\nexport interface ModifierContext {\n  componentId: string\n  componentInstance?: ComponentInstance\n  element?: Element\n  parentElement?: Element\n  phase: 'creation' | 'update' | 'cleanup'\n  previousModifiers?: Modifier[]\n}\n\n/**\n * Modifier application result\n */\nexport interface ModifierResult {\n  node: DOMNode\n  effects?: (() => void)[]\n  cleanup?: (() => void)[]\n}\n\n/**\n * Reactive modifier properties that can contain signals\n */\nexport type ReactiveModifierProps<T> = {\n  [K in keyof T]: T[K] | Signal<T[K]>\n}\n\n/**\n * Strict TextShadow configuration interface\n * Prevents common mistakes like using 'radius' instead of 'blur'\n */\nexport interface TextShadowConfig {\n  readonly x: number\n  readonly y: number  \n  readonly blur: number\n  readonly color: string\n}\n\n/**\n * Layout modifier properties\n */\nexport interface LayoutModifierProps {\n  frame?: {\n    width?: Dimension\n    height?: Dimension\n    minWidth?: Dimension\n    maxWidth?: Dimension\n    minHeight?: Dimension\n    maxHeight?: Dimension\n  }\n  padding?:\n    | {\n        top?: number\n        right?: number\n        bottom?: number\n        left?: number\n      }\n    | number\n  margin?:\n    | {\n        top?: number | string\n        right?: number | string\n        bottom?: number | string\n        left?: number | string\n      }\n    | number | string\n  alignment?: 'leading' | 'center' | 'trailing' | 'top' | 'bottom'\n  layoutPriority?: number\n  offset?: {\n    x?: number\n    y?: number\n  }\n  aspectRatio?: {\n    ratio?: number\n    contentMode?: 'fit' | 'fill'\n  }\n  fixedSize?: {\n    horizontal?: boolean\n    vertical?: boolean\n  }\n  // Transform Properties (Phase 3 - Epic: Butternut)\n  scaleEffect?: {\n    x?: number\n    y?: number\n    anchor?:\n      | 'center'\n      | 'top'\n      | 'topLeading'\n      | 'topTrailing'\n      | 'bottom'\n      | 'bottomLeading'\n      | 'bottomTrailing'\n      | 'leading'\n      | 'trailing'\n  }\n  position?: {\n    x?: number\n    y?: number\n  }\n  zIndex?: number\n}\n\n/**\n * Appearance modifier properties\n */\nexport interface AppearanceModifierProps {\n  foregroundColor?: ColorValue\n  backgroundColor?: ColorValue\n  background?: StatefulBackgroundValue\n  opacity?: number\n  font?: {\n    family?: string\n    size?: number | string | Signal<number> | Signal<string>\n    weight?:\n      | 'normal'\n      | 'bold'\n      | '100'\n      | '200'\n      | '300'\n      | '400'\n      | '500'\n      | '600'\n      | '700'\n      | '800'\n      | '900'\n    style?: 'normal' | 'italic' | 'oblique'\n  }\n  cornerRadius?: number\n  border?: {\n    width?: number | Signal<number>\n    color?: ColorValue\n    style?: 'solid' | 'dashed' | 'dotted'\n  }\n  shadow?: {\n    color?: string\n    radius?: number\n    x?: number\n    y?: number\n  }\n  clipped?: boolean\n  clipShape?: {\n    shape: 'circle' | 'ellipse' | 'rect' | 'polygon'\n    parameters?: Record<string, any>\n  }\n  // Visual Effects (Phase 2 - Epic: Butternut)\n  blur?: number // CSS filter: blur(Npx)\n  brightness?: number // CSS filter: brightness(N) - 1.0 is normal\n  contrast?: number // CSS filter: contrast(N) - 1.0 is normal  \n  saturation?: number // CSS filter: saturate(N) - 1.0 is normal\n  hueRotation?: number // CSS filter: hue-rotate(Ndeg)\n  grayscale?: number // CSS filter: grayscale(N) - 0.0 to 1.0\n  colorInvert?: number // CSS filter: invert(N) - 0.0 to 1.0\n}\n\n/**\n * Interaction modifier properties\n */\nexport interface InteractionModifierProps {\n  // Existing mouse events\n  onTap?: (event: MouseEvent) => void\n  onHover?: (isHovered: boolean) => void\n  onMouseEnter?: (event: MouseEvent) => void\n  onMouseLeave?: (event: MouseEvent) => void\n  onMouseDown?: (event: MouseEvent) => void\n  onMouseUp?: (event: MouseEvent) => void\n  onDoubleClick?: (event: MouseEvent) => void\n  onContextMenu?: (event: MouseEvent) => void\n  \n  // Existing drag events\n  onDragStart?: (event: DragEvent) => void\n  onDragOver?: (event: DragEvent) => void\n  onDragLeave?: (event: DragEvent) => void\n  onDrop?: (event: DragEvent) => void\n  \n  // Focus events (onFocus exists, adding onBlur)\n  onFocus?: (isFocused: boolean) => void\n  onBlur?: (isFocused: boolean) => void\n  \n  // Keyboard events\n  onKeyPress?: (event: KeyboardEvent) => void\n  onKeyDown?: (event: KeyboardEvent) => void\n  onKeyUp?: (event: KeyboardEvent) => void\n  \n  // Scroll and wheel events\n  onScroll?: (event: Event) => void\n  onWheel?: (event: WheelEvent) => void\n  \n  // Input events\n  onInput?: (event: InputEvent) => void\n  onChange?: (value: any, event?: Event) => void\n  \n  // Clipboard events\n  onCopy?: (event: ClipboardEvent) => void\n  onCut?: (event: ClipboardEvent) => void\n  onPaste?: (event: ClipboardEvent) => void\n  \n  // Other events\n  onSelect?: (event: Event) => void\n  \n  // Advanced Gesture Modifiers (Phase 4 - Epic: Butternut)\n  onLongPressGesture?: {\n    minimumDuration?: number // ms, default 500\n    maximumDistance?: number // px, default 10\n    perform: () => void\n    onPressingChanged?: (isPressing: boolean) => void\n  }\n  \n  // Keyboard Shortcuts (Phase 4 - Epic: Butternut)\n  keyboardShortcut?: {\n    key: string\n    modifiers?: ('cmd' | 'ctrl' | 'shift' | 'alt' | 'meta')[]\n    action: () => void\n  }\n  \n  // Focus Management (Phase 4 - Epic: Butternut) \n  focused?: boolean | Signal<boolean>\n  focusable?: {\n    isFocusable?: boolean\n    interactions?: ('activate' | 'edit')[]\n  }\n  \n  // Enhanced Hover Tracking (Phase 4 - Epic: Butternut)\n  onContinuousHover?: {\n    coordinateSpace?: 'local' | 'global'\n    perform: (location: { x: number; y: number } | null) => void\n  }\n  \n  // Gesture Priority System (Phase 4 - Epic: Butternut)\n  highPriorityGesture?: {\n    gesture: any // Will define gesture types later\n    including?: ('all' | 'subviews' | 'none')[]\n  }\n  simultaneousGesture?: {\n    gesture: any\n    including?: ('all' | 'subviews' | 'none')[]\n  }\n  \n  // Hit Testing Control (Phase 4 - Epic: Butternut)\n  allowsHitTesting?: boolean\n  \n  // Existing state properties\n  disabled?: boolean\n  draggable?: boolean\n  accessibilityLabel?: string\n  accessibilityHint?: string\n}\n\n/**\n * Animation modifier properties\n */\nexport interface AnimationModifierProps {\n  transition?: {\n    property?: string\n    duration?: number\n    easing?: string\n    delay?: number\n  }\n  animation?: {\n    keyframes?: Record<string, Record<string, string>>\n    duration?: number\n    easing?: string\n    iterations?: number | 'infinite'\n    direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'\n  }\n  transform?: string | Signal<string>\n  rotationEffect?: {\n    angle: number\n    anchor?:\n      | 'center'\n      | 'top'\n      | 'topLeading'\n      | 'topTrailing'\n      | 'bottom'\n      | 'bottomLeading'\n      | 'bottomTrailing'\n      | 'leading'\n      | 'trailing'\n  }\n  overlay?: {\n    content: any // ComponentInstance or function that returns ComponentInstance\n    alignment?:\n      | 'center'\n      | 'top'\n      | 'bottom'\n      | 'leading'\n      | 'trailing'\n      | 'topLeading'\n      | 'topTrailing'\n      | 'bottomLeading'\n      | 'bottomTrailing'\n  }\n}\n\n/**\n * Lifecycle modifier properties\n */\nexport interface LifecycleModifierProps {\n  onAppear?: () => void\n  onDisappear?: () => void\n  task?: {\n    operation: () => Promise<void> | void\n    id?: string\n    priority?: 'background' | 'userInitiated' | 'utility' | 'default'\n  }\n  refreshable?: {\n    onRefresh: () => Promise<void>\n    isRefreshing?: boolean | Signal<boolean>\n  }\n}\n\n/**\n * Modifier factory function type\n */\nexport type ModifierFactory<TProps = {}> = (\n  props: ReactiveModifierProps<TProps>\n) => Modifier<TProps>\n\n/**\n * Modifier builder interface for creating chainable modifiers\n */\nexport interface ModifierBuilder<T extends ComponentInstance = ComponentInstance> {\n  // Layout modifiers\n  frame(width?: Dimension, height?: Dimension): ModifierBuilder<T>\n  frame(options: LayoutModifierProps['frame']): ModifierBuilder<T>\n  padding(value: number): ModifierBuilder<T>\n  padding(options: LayoutModifierProps['padding']): ModifierBuilder<T>\n  margin(value: number | string): ModifierBuilder<T>\n  margin(options: LayoutModifierProps['margin']): ModifierBuilder<T>\n\n  // New multi-property modifiers\n  size(options: {\n    width?: Dimension\n    height?: Dimension\n    minWidth?: Dimension\n    maxWidth?: Dimension\n    minHeight?: Dimension\n    maxHeight?: Dimension\n  }): ModifierBuilder<T>\n  width(value: Dimension): ModifierBuilder<T>\n  height(value: Dimension): ModifierBuilder<T>\n  maxWidth(value: Dimension): ModifierBuilder<T>\n  minWidth(value: Dimension): ModifierBuilder<T>\n  maxHeight(value: Dimension): ModifierBuilder<T>\n  minHeight(value: Dimension): ModifierBuilder<T>\n  marginTop(value: number | string): ModifierBuilder<T>\n  marginBottom(value: number | string): ModifierBuilder<T>\n  marginHorizontal(value: number | string): ModifierBuilder<T>\n  marginVertical(value: number | string): ModifierBuilder<T>\n\n  // Typography modifiers\n  typography(options: {\n    size?: number | string\n    weight?: FontWeight | number\n    family?: string\n    lineHeight?: number | string\n    letterSpacing?: number | string\n    align?: string\n    transform?: string\n    decoration?: string\n    variant?: string\n    style?: string\n    color?: string\n  }): ModifierBuilder<T>\n  textAlign(value: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end'): ModifierBuilder<T>\n  textTransform(value: 'none' | 'uppercase' | 'lowercase' | 'capitalize'): ModifierBuilder<T>\n  letterSpacing(value: number | string): ModifierBuilder<T>\n  lineHeight(value: number | string): ModifierBuilder<T>\n  gradientText(gradient: string): ModifierBuilder<T>\n\n  // Border modifiers\n  borderTop(\n    width: number | Signal<number>,\n    color: ColorValue,\n    style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'\n  ): ModifierBuilder<T>\n  borderRight(\n    width: number | Signal<number>,\n    color: ColorValue,\n    style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'\n  ): ModifierBuilder<T>\n  borderBottom(\n    width: number | Signal<number>,\n    color: ColorValue,\n    style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'\n  ): ModifierBuilder<T>\n  borderLeft(\n    width: number | Signal<number>,\n    color: ColorValue,\n    style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'\n  ): ModifierBuilder<T>\n\n  // Flexbox modifiers\n  flexGrow(value: number): ModifierBuilder<T>\n  flexShrink(value: number): ModifierBuilder<T>\n  justifyContent(\n    value: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'\n  ): ModifierBuilder<T>\n  alignItems(\n    value: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  ): ModifierBuilder<T>\n  gap(value: number | string): ModifierBuilder<T>\n  flexDirection(value: 'row' | 'row-reverse' | 'column' | 'column-reverse'): ModifierBuilder<T>\n  flexWrap(value: 'nowrap' | 'wrap' | 'wrap-reverse'): ModifierBuilder<T>\n\n  // Utility modifiers\n  cursor(\n    value:\n      | 'auto'\n      | 'default'\n      | 'pointer'\n      | 'text'\n      | 'wait'\n      | 'help'\n      | 'not-allowed'\n      | 'grab'\n      | 'grabbing'\n  ): ModifierBuilder<T>\n  overflowY(value: 'visible' | 'hidden' | 'scroll' | 'auto'): ModifierBuilder<T>\n  overflowX(value: 'visible' | 'hidden' | 'scroll' | 'auto'): ModifierBuilder<T>\n  position(value: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'): ModifierBuilder<T>\n  zIndex(value: number): ModifierBuilder<T>\n  display(\n    value: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none'\n  ): ModifierBuilder<T>\n  transform(value: string | Signal<string>): ModifierBuilder<T>\n\n  // Raw CSS modifiers\n  css(properties: { [property: string]: string | number | undefined }): ModifierBuilder<T>\n  cssProperty(property: string, value: string | number): ModifierBuilder<T>\n  cssVariable(name: string, value: string | number): ModifierBuilder<T>\n\n  // Phase 1 SwiftUI modifiers\n  offset(x: number | Signal<number>, y?: number | Signal<number>): ModifierBuilder<T>\n  clipped(): ModifierBuilder<T>\n  rotationEffect(\n    angle: number | Signal<number>,\n    anchor?:\n      | 'center'\n      | 'top'\n      | 'topLeading'\n      | 'topTrailing'\n      | 'bottom'\n      | 'bottomLeading'\n      | 'bottomTrailing'\n      | 'leading'\n      | 'trailing'\n  ): ModifierBuilder<T>\n\n  // Phase 2 SwiftUI modifiers\n  aspectRatio(ratio?: number | Signal<number>, contentMode?: 'fit' | 'fill'): ModifierBuilder<T>\n  fixedSize(horizontal?: boolean, vertical?: boolean): ModifierBuilder<T>\n  clipShape(\n    shape: 'circle' | 'ellipse' | 'rect' | 'polygon',\n    parameters?: Record<string, any>\n  ): ModifierBuilder<T>\n  overlay(\n    content: any,\n    alignment?:\n      | 'center'\n      | 'top'\n      | 'bottom'\n      | 'leading'\n      | 'trailing'\n      | 'topLeading'\n      | 'topTrailing'\n      | 'bottomLeading'\n      | 'bottomTrailing'\n  ): ModifierBuilder<T>\n\n  // Phase 3 SwiftUI modifiers - Critical Transform Modifiers\n  scaleEffect(\n    x: number | Signal<number>,\n    y?: number | Signal<number>,\n    anchor?:\n      | 'center'\n      | 'top'\n      | 'topLeading'\n      | 'topTrailing'\n      | 'bottom'\n      | 'bottomLeading'\n      | 'bottomTrailing'\n      | 'leading'\n      | 'trailing'\n  ): ModifierBuilder<T>\n  \n  // Note: SwiftUI-style position for absolute positioning (different from CSS position)\n  absolutePosition(x: number | Signal<number>, y: number | Signal<number>): ModifierBuilder<T>\n\n  // Appearance modifiers\n  foregroundColor(color: ColorValue): ModifierBuilder<T>\n  backgroundColor(color: ColorValue): ModifierBuilder<T>\n  background(value: StatefulBackgroundValue | Signal<string>): ModifierBuilder<T>\n  font(options: AppearanceModifierProps['font']): ModifierBuilder<T>\n  font(size: number | string): ModifierBuilder<T>\n  fontWeight(weight: NonNullable<AppearanceModifierProps['font']>['weight']): ModifierBuilder<T>\n  fontSize(size: number | string | Signal<number> | Signal<string>): ModifierBuilder<T>\n  opacity(value: number | Signal<number>): ModifierBuilder<T>\n  cornerRadius(radius: number | Signal<number>): ModifierBuilder<T>\n  border(width: number | Signal<number>, color?: ColorValue): ModifierBuilder<T>\n  border(options: AppearanceModifierProps['border']): ModifierBuilder<T>\n  borderWidth(width: number | Signal<number>): ModifierBuilder<T>\n  shadow(options: AppearanceModifierProps['shadow']): ModifierBuilder<T>\n  shadow(config: { x: number; y: number; blur: number; color: string; spread?: number; inset?: boolean }): ModifierBuilder<T>\n  shadows(configs: Array<{ x: number; y: number; blur: number; color: string; spread?: number; inset?: boolean }>): ModifierBuilder<T>\n  textShadow(config: TextShadowConfig): ModifierBuilder<T>\n  shadowPreset(presetName: string): ModifierBuilder<T>\n\n  // Visual Effects Modifiers (Phase 2 - Epic: Butternut)\n  blur(radius: number | Signal<number>): ModifierBuilder<T>\n  brightness(amount: number | Signal<number>): ModifierBuilder<T>\n  contrast(amount: number | Signal<number>): ModifierBuilder<T>\n  saturation(amount: number | Signal<number>): ModifierBuilder<T>\n  hueRotation(angle: number | Signal<number>): ModifierBuilder<T>\n  grayscale(amount: number | Signal<number>): ModifierBuilder<T>\n  colorInvert(amount?: number | Signal<number>): ModifierBuilder<T>\n  dropShadow(shadow: string): ModifierBuilder<T>\n  \n  // Additional filter methods\n  filter(config: { blur?: number; brightness?: number; contrast?: number; saturate?: number; [key: string]: any } | string): ModifierBuilder<T>\n  saturate(value: number): ModifierBuilder<T>\n  sepia(value: number): ModifierBuilder<T>\n  hueRotate(angle: string): ModifierBuilder<T>\n  invert(value: number): ModifierBuilder<T>\n  \n  // Filter presets\n  vintagePhoto(sepiaAmount?: number, contrastAmount?: number): ModifierBuilder<T>\n  blackAndWhite(contrastAmount?: number): ModifierBuilder<T>\n  vibrant(saturationAmount?: number, contrastAmount?: number): ModifierBuilder<T>\n  warmTone(hueShift?: string): ModifierBuilder<T>\n  coolTone(hueShift?: string): ModifierBuilder<T>\n  faded(contrastAmount?: number, saturationAmount?: number): ModifierBuilder<T>\n  highKey(brightnessAmount?: number, contrastAmount?: number): ModifierBuilder<T>\n  lowKey(brightnessAmount?: number, contrastAmount?: number): ModifierBuilder<T>\n  softFocus(blurAmount?: number): ModifierBuilder<T>\n  highContrastMode(): ModifierBuilder<T>\n  subtleBlur(): ModifierBuilder<T>\n  darkModeInvert(): ModifierBuilder<T>\n\n  // Transform modifiers (SwiftUI-style)\n  scale(value: number | { x?: number; y?: number }): ModifierBuilder<T>\n  rotate(angle: string): ModifierBuilder<T>\n  translate(offset: { x?: number | string; y?: number | string }): ModifierBuilder<T>\n  perspective(value: number): ModifierBuilder<T>\n\n  // Hover and cursor effect modifiers\n  hover(styles: any, transition?: string | number): ModifierBuilder<T>\n  hoverEffect(effect: 'automatic' | 'highlight' | 'lift' | 'scale', isEnabled?: boolean): ModifierBuilder<T>\n  hoverWithTransition(styles: any, duration?: number): ModifierBuilder<T>\n  conditionalHover(effect: 'automatic' | 'highlight' | 'lift' | 'scale', isEnabled: boolean): ModifierBuilder<T>\n\n  // Cursor preset methods\n  interactiveCursor(): ModifierBuilder<T>\n  draggableCursor(): ModifierBuilder<T>\n  textCursor(): ModifierBuilder<T>\n  disabledCursor(): ModifierBuilder<T>\n  loadingCursor(): ModifierBuilder<T>\n  helpCursor(): ModifierBuilder<T>\n  zoomCursor(mode?: 'in' | 'out'): ModifierBuilder<T>\n\n  // Hover effect presets\n  buttonHover(): ModifierBuilder<T>\n  cardHover(): ModifierBuilder<T>\n  linkHover(): ModifierBuilder<T>\n  imageHover(): ModifierBuilder<T>\n\n  // Interaction modifiers\n  onTap(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onHover(handler: (isHovered: boolean) => void): ModifierBuilder<T>\n  onMouseEnter(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onMouseLeave(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onMouseDown(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onMouseUp(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onDoubleClick(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onContextMenu(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onDragStart(handler: (event: DragEvent) => void): ModifierBuilder<T>\n  onDragOver(handler: (event: DragEvent) => void): ModifierBuilder<T>\n  onDragLeave(handler: (event: DragEvent) => void): ModifierBuilder<T>\n  onDrop(handler: (event: DragEvent) => void): ModifierBuilder<T>\n  \n  // Focus events\n  onFocus(handler: (isFocused: boolean) => void): ModifierBuilder<T>\n  onBlur(handler: (isFocused: boolean) => void): ModifierBuilder<T>\n  \n  // Keyboard events\n  onKeyPress(handler: (event: KeyboardEvent) => void): ModifierBuilder<T>\n  onKeyDown(handler: (event: KeyboardEvent) => void): ModifierBuilder<T>\n  onKeyUp(handler: (event: KeyboardEvent) => void): ModifierBuilder<T>\n  \n  // Scroll and wheel events\n  onScroll(handler: (event: Event) => void): ModifierBuilder<T>\n  onWheel(handler: (event: WheelEvent) => void): ModifierBuilder<T>\n  \n  // Input events\n  onInput(handler: (event: InputEvent) => void): ModifierBuilder<T>\n  onChange(handler: (value: any, event?: Event) => void): ModifierBuilder<T>\n  \n  // Clipboard events\n  onCopy(handler: (event: ClipboardEvent) => void): ModifierBuilder<T>\n  onCut(handler: (event: ClipboardEvent) => void): ModifierBuilder<T>\n  onPaste(handler: (event: ClipboardEvent) => void): ModifierBuilder<T>\n  \n  // Other events\n  onSelect(handler: (event: Event) => void): ModifierBuilder<T>\n  \n  // Advanced Gesture Modifiers (Phase 4 - Epic: Butternut)\n  onLongPressGesture(\n    options: {\n      minimumDuration?: number\n      maximumDistance?: number\n      perform: () => void\n      onPressingChanged?: (isPressing: boolean) => void\n    }\n  ): ModifierBuilder<T>\n  \n  // Keyboard Shortcuts (Phase 4 - Epic: Butternut)\n  keyboardShortcut(\n    key: string,\n    modifiers: ('cmd' | 'ctrl' | 'shift' | 'alt' | 'meta')[],\n    action: () => void\n  ): ModifierBuilder<T>\n  \n  // Focus Management (Phase 4 - Epic: Butternut)\n  focused(binding: boolean | Signal<boolean>): ModifierBuilder<T>\n  focusable(\n    isFocusable?: boolean,\n    interactions?: ('activate' | 'edit')[]\n  ): ModifierBuilder<T>\n  \n  // Enhanced Hover Tracking (Phase 4 - Epic: Butternut)\n  onContinuousHover(\n    coordinateSpace: 'local' | 'global',\n    perform: (location: { x: number; y: number } | null) => void\n  ): ModifierBuilder<T>\n  \n  // Gesture Priority System (Phase 4 - Epic: Butternut)\n  highPriorityGesture(\n    gesture: any,\n    including?: ('all' | 'subviews' | 'none')[]\n  ): ModifierBuilder<T>\n  simultaneousGesture(\n    gesture: any,\n    including?: ('all' | 'subviews' | 'none')[]\n  ): ModifierBuilder<T>\n  \n  // Hit Testing Control (Phase 4 - Epic: Butternut)\n  allowsHitTesting(enabled: boolean): ModifierBuilder<T>\n  \n  // HTML and ARIA Attributes\n  id(value: string): ModifierBuilder<T>\n  data(attributes: { [key: string]: string | number | boolean }): ModifierBuilder<T>\n  aria(attributes: { [key: string]: string | number | boolean | undefined }): ModifierBuilder<T>\n  tabIndex(value: number): ModifierBuilder<T>\n\n  // Text Modifiers\n  lineClamp(lines: number): ModifierBuilder<T>\n  wordBreak(value: 'normal' | 'break-all' | 'keep-all' | 'break-word'): ModifierBuilder<T>\n  overflowWrap(value: 'normal' | 'break-word' | 'anywhere'): ModifierBuilder<T>\n  hyphens(value: 'none' | 'manual' | 'auto'): ModifierBuilder<T>\n\n  // Backdrop Filter Modifiers (Unified Implementation)\n  backdropFilter(config: { blur?: number; brightness?: number; contrast?: number; saturate?: number; [key: string]: any }, fallbackColor?: ColorValue): ModifierBuilder<T>\n  backdropFilter(cssValue: string, fallbackColor?: ColorValue): ModifierBuilder<T>\n  glassmorphism(intensity?: 'subtle' | 'light' | 'medium' | 'heavy', customFallback?: ColorValue): ModifierBuilder<T>\n\n  // Pseudo-element modifiers\n  before(styles: { content: string; color?: string; [key: string]: any }): ModifierBuilder<T>\n  after(styles: { content: string; color?: string; [key: string]: any }): ModifierBuilder<T>\n\n  // State modifiers\n  disabled(isDisabled?: boolean | Signal<boolean>): ModifierBuilder<T>\n  draggable(isDraggable?: boolean): ModifierBuilder<T>\n  setAttribute(name: string, value: string): ModifierBuilder<T>\n  accessibilityLabel(label: string): ModifierBuilder<T>\n\n  // Animation modifiers\n  transition(property?: string, duration?: number, easing?: string, delay?: number): ModifierBuilder<T>\n  transitions(config: any): ModifierBuilder<T>\n  animation(options: AnimationModifierProps['animation']): ModifierBuilder<T>\n\n  // Transition presets\n  fadeTransition(duration?: number): ModifierBuilder<T>\n  transformTransition(duration?: number): ModifierBuilder<T>\n  colorTransition(duration?: number): ModifierBuilder<T>\n  layoutTransition(duration?: number): ModifierBuilder<T>\n  buttonTransition(): ModifierBuilder<T>\n  cardTransition(): ModifierBuilder<T>\n  modalTransition(): ModifierBuilder<T>\n  smoothTransition(duration?: number): ModifierBuilder<T>\n  quickTransition(duration?: number): ModifierBuilder<T>\n  slowTransition(duration?: number): ModifierBuilder<T>\n\n  // Scroll modifiers\n  scroll(config: any): ModifierBuilder<T>\n  scrollBehavior(value: 'auto' | 'smooth'): ModifierBuilder<T>\n  overscrollBehavior(value: 'auto' | 'contain' | 'none'): ModifierBuilder<T>\n  overscrollBehaviorX(value: 'auto' | 'contain' | 'none'): ModifierBuilder<T>\n  overscrollBehaviorY(value: 'auto' | 'contain' | 'none'): ModifierBuilder<T>\n  scrollMargin(margin: number | string | { top?: number | string, right?: number | string, bottom?: number | string, left?: number | string }): ModifierBuilder<T>\n  scrollPadding(padding: number | string | { top?: number | string, right?: number | string, bottom?: number | string, left?: number | string }): ModifierBuilder<T>\n  scrollSnap(\n    type: 'none' | 'x mandatory' | 'y mandatory' | 'x proximity' | 'y proximity' | 'both mandatory' | 'both proximity',\n    align?: 'start' | 'end' | 'center',\n    stop?: 'normal' | 'always'\n  ): ModifierBuilder<T>\n\n  // Lifecycle modifiers\n  onAppear(handler: () => void): ModifierBuilder<T>\n  onDisappear(handler: () => void): ModifierBuilder<T>\n  task(\n    operation: () => Promise<void> | void,\n    options?: { id?: string; priority?: 'background' | 'userInitiated' | 'utility' | 'default' }\n  ): ModifierBuilder<T>\n  refreshable(\n    onRefresh: () => Promise<void>,\n    isRefreshing?: boolean | Signal<boolean>\n  ): ModifierBuilder<T>\n\n  // Custom modifier application\n  modifier(modifier: Modifier): ModifierBuilder<T>\n\n  // Resizable modifier for images\n  resizable(): ModifierBuilder<T>\n\n  // Text case alias for textTransform\n  textCase(value: 'none' | 'uppercase' | 'lowercase' | 'capitalize'): ModifierBuilder<T>\n\n  // HTML Content Rendering (Text components only)\n  /**\n   * Render component content as HTML instead of plain text\n   * \n   * ⚠️ **RESTRICTION**: Only available on Text components for security\n   * ⚠️ **SECURITY NOTICE**: This modifier treats content as HTML.\n   * - Default: Basic sanitization removes common XSS vectors\n   * - Use skipSanitizer: true only with fully trusted content\n   * - Consider DOMPurify for comprehensive sanitization\n   * - Non-reactive for performance (content is processed once)\n   * \n   * @param options - Configuration options\n   * \n   * @example\n   * ```typescript\n   * // ✅ Allowed: Text components only\n   * Text('<p>Hello <strong>world</strong></p>').modifier.asHTML().build()\n   * \n   * // ❌ Compile Error: Not a Text component\n   * VStack({}).modifier.asHTML() // TypeScript error\n   * \n   * // ✅ Dangerous: Skip sanitization\n   * Text(serverTemplate).modifier.asHTML({ skipSanitizer: true }).build()\n   * ```\n   */\n  asHTML(options?: import('./as-html').AsHTMLOptions): ModifierBuilder<T>\n\n  // Responsive Design Methods\n  responsive(): ResponsiveModifierBuilder<T>\n  \n  // Responsive Breakpoint Shorthand Properties\n  readonly base: ResponsiveBreakpointBuilder<T>\n  readonly sm: ResponsiveBreakpointBuilder<T>\n  readonly md: ResponsiveBreakpointBuilder<T>\n  readonly lg: ResponsiveBreakpointBuilder<T>\n  readonly xl: ResponsiveBreakpointBuilder<T>\n  readonly '2xl': ResponsiveBreakpointBuilder<T>\n  \n  addModifier(modifier: Modifier): void\n\n  // Build the final component with all modifiers applied\n  build(): T\n}\n\n/**\n * Modifiable component - components that can have modifiers applied\n */\nexport interface ModifiableComponent<P extends ComponentProps = ComponentProps>\n  extends ComponentInstance<P> {\n  modifiers: Modifier[]\n  modifierBuilder?: ModifierBuilder<ModifiableComponent<P>>\n}\n\n/**\n * CSS style properties that can be generated by modifiers\n */\nexport interface CSSStyleProperties {\n  [property: string]: string | number | Signal<string> | Signal<number> | undefined\n}\n\n/**\n * CSS class names that can be applied by modifiers\n */\nexport interface CSSClassNames {\n  base?: string[]\n  state?: Record<string, string[]>\n  responsive?: Record<string, string[]>\n}\n\n/**\n * Modifier registry for registering custom modifiers\n */\nexport interface ModifierRegistry {\n  register<TProps>(name: string, factory: ModifierFactory<TProps>): void\n  get<TProps>(name: string): ModifierFactory<TProps> | undefined\n  has(name: string): boolean\n  list(): string[]\n}\n\n/**\n * Modifier application options\n */\nexport interface ModifierApplicationOptions {\n  immediate?: boolean\n  batch?: boolean\n  suppressEffects?: boolean\n  enableAnimations?: boolean\n}\n\n/**\n * Modifier priority levels for ordering\n */\nexport enum ModifierPriority {\n  LAYOUT = 100,\n  APPEARANCE = 200,\n  INTERACTION = 300,\n  ANIMATION = 400,\n  CUSTOM = 500,\n}\n\n/**\n * Modifier application strategy\n */\nexport type ModifierApplicationStrategy =\n  | 'sequential' // Apply modifiers one by one in order\n  | 'batch' // Batch all style changes and apply at once\n  | 'immediate' // Apply each modifier immediately\n\n/**\n * Style computation context for reactive styles\n */\nexport interface StyleComputationContext {\n  componentId: string\n  element: Element\n  modifiers: Modifier[]\n  signals: Set<Signal<any>>\n  cleanup: (() => void)[]\n}\n"],"names":["ModifierPriority"],"mappings":"gFA+1BO,IAAKA,GAAAA,IACVA,EAAAA,EAAA,OAAS,GAAA,EAAT,SACAA,EAAAA,EAAA,WAAa,GAAA,EAAb,aACAA,EAAAA,EAAA,YAAc,GAAA,EAAd,cACAA,EAAAA,EAAA,UAAY,GAAA,EAAZ,YACAA,EAAAA,EAAA,OAAS,GAAA,EAAT,SALUA,IAAAA,GAAA,CAAA,CAAA"}