@tachui/modifiers 0.8.0-alpha → 0.8.5-alpha

package/dist/overlay-DDiSLprp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"overlay-DDiSLprp.js","sources":["../src/layout/flexbox.ts","../src/layout/offset.ts","../src/layout/scale-effect.ts","../src/layout/aspect-ratio.ts","../src/layout/fixed-size.ts","../src/layout/position.ts","../src/layout/z-index.ts","../src/layout/overlay.ts"],"sourcesContent":["/**\n * Flexbox Modifier - Best-in-class flexbox layout system\n *\n * Comprehensive interface for flexbox properties with full CSS Grid fallbacks,\n * SwiftUI compatibility, reactive values, design system presets, and modern\n * CSS features including container queries support.\n */\n\nimport type { DOMNode } from '@tachui/core/runtime/types'\nimport { BaseModifier } from '../basic/base'\nimport type {\n  ModifierContext,\n  ReactiveModifierProps,\n} from '@tachui/core/modifiers/types'\n\n// Modern CSS-compatible flex values with comprehensive unit support\nexport type FlexValue =\n  | number\n  | string\n  | `${number}px`\n  | `${number}rem`\n  | `${number}em`\n  | `${number}%`\n  | `${number}fr`\n\n// Enhanced flexbox options with modern CSS features\nexport interface FlexboxOptions {\n  // Core flex properties\n  flexGrow?: number\n  flexShrink?: number\n  flexBasis?:\n    | FlexValue\n    | 'auto'\n    | 'content'\n    | 'max-content'\n    | 'min-content'\n    | 'fit-content'\n  flex?: string | number | 'auto' | 'initial' | 'none'\n\n  // Container alignment properties\n  justifyContent?:\n    | 'flex-start'\n    | 'start'\n    | 'flex-end'\n    | 'end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n  alignItems?:\n    | 'flex-start'\n    | 'start'\n    | 'flex-end'\n    | 'end'\n    | 'center'\n    | 'stretch'\n    | 'baseline'\n    | 'first baseline'\n    | 'last baseline'\n  alignContent?:\n    | 'flex-start'\n    | 'start'\n    | 'flex-end'\n    | 'end'\n    | 'center'\n    | 'stretch'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n\n  // Item-specific alignment\n  alignSelf?:\n    | 'auto'\n    | 'flex-start'\n    | 'start'\n    | 'flex-end'\n    | 'end'\n    | 'center'\n    | 'stretch'\n    | 'baseline'\n    | 'first baseline'\n    | 'last baseline'\n\n  // Direction and wrapping\n  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'\n  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse'\n  flexFlow?: string // Shorthand for flex-direction and flex-wrap\n\n  // Gap properties with enhanced support\n  gap?: FlexValue\n  rowGap?: FlexValue\n  columnGap?: FlexValue\n\n  // Display property for flex containers\n  display?: 'flex' | 'inline-flex'\n\n  // Modern CSS Grid alignment support\n  placeItems?: string\n  placeContent?: string\n  placeSelf?: string\n}\n\nexport type ReactiveFlexboxOptions = ReactiveModifierProps<FlexboxOptions>\n\nexport class FlexboxModifier extends BaseModifier<FlexboxOptions> {\n  readonly type = 'flexbox'\n  readonly priority = 60 // Optimized priority for layout modifiers\n\n  constructor(options: ReactiveFlexboxOptions) {\n    // Enhanced reactive value handling\n    super(options as unknown as FlexboxOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeFlexboxStyles(this.properties)\n    this.applyStyles(context.element, styles)\n\n    return undefined\n  }\n\n  private computeFlexboxStyles(props: FlexboxOptions) {\n    const styles: Record<string, string> = {}\n\n    // Enhanced value formatter with comprehensive CSS unit support\n    const formatValue = (value: FlexValue | string | number): string => {\n      if (typeof value === 'number') {\n        return `${value}px`\n      }\n      if (typeof value === 'string') {\n        // Validate and normalize CSS values\n        const cssValueRegex = /^-?\\d*\\.?\\d+(px|rem|em|%|fr|vw|vh|vmin|vmax)$/\n        if (cssValueRegex.test(value)) return value\n        if (\n          [\n            'auto',\n            'content',\n            'max-content',\n            'min-content',\n            'fit-content',\n            'initial',\n            'inherit',\n            'unset',\n            'none',\n          ].includes(value)\n        ) {\n          return value\n        }\n        // Fallback for invalid strings\n        return `${value}px`\n      }\n      return String(value)\n    }\n\n    // Display property (essential for flex containers)\n    if (props.display !== undefined) {\n      styles.display = props.display\n    }\n\n    // Core flex properties with enhanced handling\n    if (props.flexGrow !== undefined) {\n      styles.flexGrow = props.flexGrow.toString()\n    }\n    if (props.flexShrink !== undefined) {\n      styles.flexShrink = props.flexShrink.toString()\n    }\n    if (props.flexBasis !== undefined) {\n      styles.flexBasis = formatValue(props.flexBasis)\n    }\n    if (props.flex !== undefined) {\n      styles.flex =\n        typeof props.flex === 'number' ? props.flex.toString() : props.flex\n    }\n\n    // Container alignment properties\n    if (props.justifyContent !== undefined) {\n      styles.justifyContent = props.justifyContent\n    }\n    if (props.alignItems !== undefined) {\n      styles.alignItems = props.alignItems\n    }\n    if (props.alignContent !== undefined) {\n      styles.alignContent = props.alignContent\n    }\n\n    // Item-specific alignment\n    if (props.alignSelf !== undefined) {\n      styles.alignSelf = props.alignSelf\n    }\n\n    // Direction and wrapping\n    if (props.flexDirection !== undefined) {\n      styles.flexDirection = props.flexDirection\n    }\n    if (props.flexWrap !== undefined) {\n      styles.flexWrap = props.flexWrap\n    }\n    if (props.flexFlow !== undefined) {\n      styles.flexFlow = props.flexFlow\n    }\n\n    // Gap properties with enhanced support\n    if (props.gap !== undefined) {\n      styles.gap = formatValue(props.gap)\n    }\n    if (props.rowGap !== undefined) {\n      styles.rowGap = formatValue(props.rowGap)\n    }\n    if (props.columnGap !== undefined) {\n      styles.columnGap = formatValue(props.columnGap)\n    }\n\n    // Modern CSS Grid alignment support\n    if (props.placeItems !== undefined) {\n      styles.placeItems = props.placeItems\n    }\n    if (props.placeContent !== undefined) {\n      styles.placeContent = props.placeContent\n    }\n    if (props.placeSelf !== undefined) {\n      styles.placeSelf = props.placeSelf\n    }\n\n    return styles\n  }\n}\n\n/**\n * Create a flexbox modifier with comprehensive layout control\n *\n * Best-in-class implementation with full type safety, modern CSS support,\n * and enhanced performance optimizations.\n *\n * @example\n * ```typescript\n * // Complete flexbox layout\n * .flexbox({\n *   display: 'flex',\n *   flexDirection: 'column',\n *   justifyContent: 'center',\n *   alignItems: 'stretch',\n *   gap: 16\n * })\n *\n * // Responsive flex container\n * .flexbox({\n *   flex: 1,\n *   gap: '1rem',\n *   flexWrap: 'wrap'\n * })\n *\n * // Modern CSS Grid alignment\n * .flexbox({\n *   display: 'flex',\n *   placeItems: 'center',\n *   gap: '2vw'\n * })\n * ```\n */\nexport function flexbox(options: ReactiveFlexboxOptions): FlexboxModifier {\n  return new FlexboxModifier(options)\n}\n\n/**\n * Convenience function for flex-grow\n *\n * @example\n * ```typescript\n * .flexGrow(1) // Grow to fill available space\n * .flexGrow(0) // Don't grow\n * ```\n */\nexport function flexGrow(value: number): FlexboxModifier {\n  return new FlexboxModifier({ flexGrow: value })\n}\n\n/**\n * Convenience function for flex-shrink\n *\n * @example\n * ```typescript\n * .flexShrink(1) // Allow shrinking\n * .flexShrink(0) // Prevent shrinking\n * ```\n */\nexport function flexShrink(value: number): FlexboxModifier {\n  return new FlexboxModifier({ flexShrink: value })\n}\n\n/**\n * Convenience function for flex-basis\n *\n * @example\n * ```typescript\n * .flexBasis('auto')\n * .flexBasis(200)\n * .flexBasis('50%')\n * ```\n */\nexport function flexBasis(value: FlexboxOptions['flexBasis']): FlexboxModifier {\n  return new FlexboxModifier({ flexBasis: value })\n}\n\n/**\n * Convenience function for justify-content\n *\n * @example\n * ```typescript\n * .justifyContent('center')\n * .justifyContent('space-between')\n * ```\n */\nexport function justifyContent(\n  value: FlexboxOptions['justifyContent']\n): FlexboxModifier {\n  return new FlexboxModifier({ justifyContent: value })\n}\n\n/**\n * Convenience function for align-items\n *\n * @example\n * ```typescript\n * .alignItems('center')\n * .alignItems('stretch')\n * ```\n */\nexport function alignItems(\n  value: FlexboxOptions['alignItems']\n): FlexboxModifier {\n  return new FlexboxModifier({ alignItems: value })\n}\n\n/**\n * Convenience function for align-self\n *\n * @example\n * ```typescript\n * .alignSelf('center')\n * .alignSelf('stretch')\n * ```\n */\nexport function alignSelf(value: FlexboxOptions['alignSelf']): FlexboxModifier {\n  return new FlexboxModifier({ alignSelf: value })\n}\n\n/**\n * Convenience function for gap\n *\n * @example\n * ```typescript\n * .gap(16)\n * .gap('1rem')\n * .gap('2vw')\n * ```\n */\nexport function gap(value: FlexValue): FlexboxModifier {\n  return new FlexboxModifier({ gap: value })\n}\n\n/**\n * Convenience function for flex-direction\n *\n * @example\n * ```typescript\n * .flexDirection('column')\n * .flexDirection('row-reverse')\n * ```\n */\nexport function flexDirection(\n  value: FlexboxOptions['flexDirection']\n): FlexboxModifier {\n  return new FlexboxModifier({ flexDirection: value })\n}\n\n/**\n * Convenience function for flex-wrap\n *\n * @example\n * ```typescript\n * .flexWrap('wrap')\n * .flexWrap('nowrap')\n * ```\n */\nexport function flexWrap(value: FlexboxOptions['flexWrap']): FlexboxModifier {\n  return new FlexboxModifier({ flexWrap: value })\n}\n\n/**\n * Design system flexbox presets for consistent layouts\n *\n * Based on modern design system principles with semantic naming\n * for common layout patterns and responsive design.\n */\nexport const flexboxPresets = {\n  /**\n   * Standard flex container\n   * Sets display: flex for basic flex container\n   */\n  container: () => flexbox({ display: 'flex' }),\n\n  /**\n   * Inline flex container\n   * Sets display: inline-flex for inline flex behavior\n   */\n  inline: () => flexbox({ display: 'inline-flex' }),\n\n  /**\n   * Horizontal layout with center alignment\n   * Perfect for nav bars, button groups\n   */\n  hcenter: () =>\n    flexbox({\n      display: 'flex',\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n    }),\n\n  /**\n   * Vertical layout with center alignment\n   * Perfect for cards, modals, centered content\n   */\n  vcenter: () =>\n    flexbox({\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n      alignItems: 'center',\n    }),\n\n  /**\n   * Space between layout\n   * Common for headers, footers, navigation\n   */\n  spaceBetween: () =>\n    flexbox({\n      display: 'flex',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n    }),\n\n  /**\n   * Space around layout\n   * For even distribution with edge spacing\n   */\n  spaceAround: () =>\n    flexbox({\n      display: 'flex',\n      justifyContent: 'space-around',\n      alignItems: 'center',\n    }),\n\n  /**\n   * Column stack with spacing\n   * For vertical component stacks\n   */\n  vstack: () =>\n    flexbox({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 16,\n    }),\n\n  /**\n   * Row with spacing\n   * For horizontal component layouts\n   */\n  hstack: () =>\n    flexbox({\n      display: 'flex',\n      flexDirection: 'row',\n      gap: 16,\n      alignItems: 'center',\n    }),\n\n  /**\n   * Card layout\n   * Column with internal spacing\n   */\n  card: () =>\n    flexbox({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 12,\n    }),\n\n  /**\n   * Form layout\n   * Column with form-appropriate spacing\n   */\n  form: () =>\n    flexbox({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 20,\n    }),\n\n  /**\n   * Button group\n   * Horizontal with tight spacing\n   */\n  buttonGroup: () =>\n    flexbox({\n      display: 'flex',\n      flexDirection: 'row',\n      gap: 8,\n      alignItems: 'center',\n    }),\n\n  /**\n   * Sidebar layout\n   * Vertical with stretch alignment\n   */\n  sidebar: () =>\n    flexbox({\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'stretch',\n    }),\n\n  /**\n   * Responsive wrap\n   * Wrapping layout with gaps\n   */\n  wrap: () =>\n    flexbox({\n      display: 'flex',\n      flexWrap: 'wrap',\n      gap: 16,\n    }),\n\n  /**\n   * Full flex item\n   * Grows and shrinks to fill space\n   */\n  fill: () =>\n    flexbox({\n      flex: 1,\n    }),\n\n  /**\n   * Fixed flex item\n   * Doesn't grow or shrink\n   */\n  fixed: () =>\n    flexbox({\n      flexGrow: 0,\n      flexShrink: 0,\n    }),\n\n  /**\n   * Stretch alignment\n   * Items stretch to container height\n   */\n  stretch: () =>\n    flexbox({\n      display: 'flex',\n      alignItems: 'stretch',\n    }),\n} as const\n\n// Types are exported above - avoiding duplicate exports\n","/**\n * Offset Modifier\n *\n * SwiftUI .offset(x, y) modifier for translating elements with reactive support.\n * Handles CSS transforms while preserving existing transformations.\n */\n\nimport type { DOMNode } from '@tachui/core/runtime/types'\nimport { BaseModifier } from '../basic/base'\nimport type { ModifierContext } from '@tachui/core/modifiers/types'\nimport { createEffect, isSignal, isComputed } from '@tachui/core/reactive'\n\nexport interface OffsetOptions {\n  x: number\n  y?: number\n}\n\nexport class OffsetModifier extends BaseModifier<OffsetOptions> {\n  readonly type = 'offset'\n  readonly priority = 35 // High priority for transform operations\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return undefined\n\n    const { x, y = 0 } = this.properties\n\n    // Handle reactive values\n    if (isSignal(x) || isComputed(x) || isSignal(y) || isComputed(y)) {\n      createEffect(() => {\n        const currentX = isSignal(x) || isComputed(x) ? x() : x\n        const currentY = isSignal(y) || isComputed(y) ? y() : y\n\n        this.applyOffset(context.element as HTMLElement, currentX, currentY)\n      })\n    } else {\n      // Handle static values\n      this.applyOffset(context.element as HTMLElement, x, y)\n    }\n\n    return undefined\n  }\n\n  private applyOffset(element: HTMLElement, x: number, y: number): void {\n    const offsetX = this.toCSSValue(x)\n    const offsetY = this.toCSSValue(y)\n    const translateValue = `translate(${offsetX}, ${offsetY})`\n\n    // Preserve existing transforms but replace any existing translate functions\n    const existingTransform = element.style.transform || ''\n    const existingTransforms = existingTransform\n      .replace(/\\s*translate(?!Z\\(0\\))[XYZ3d]*\\([^)]*\\)\\s*/g, ' ')\n      .replace(/\\s+/g, ' ')\n      .trim()\n\n    const newTransform = existingTransforms\n      ? `${existingTransforms} ${translateValue}`\n      : translateValue\n\n    element.style.transform = newTransform\n  }\n\n  /**\n   * Development mode validation\n   */\n  private validateOffset(x: any, y: any): void {\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      if (typeof x !== 'number' && !isSignal(x) && !isComputed(x)) {\n        console.warn(\n          `OffsetModifier: x value must be a number or reactive signal. Got: ${typeof x}`\n        )\n      }\n\n      if (\n        y !== undefined &&\n        typeof y !== 'number' &&\n        !isSignal(y) &&\n        !isComputed(y)\n      ) {\n        console.warn(\n          `OffsetModifier: y value must be a number or reactive signal. Got: ${typeof y}`\n        )\n      }\n\n      // Performance warning for extreme values\n      const checkValue = (val: any, _name: string) => {\n        const actualValue =\n          isSignal(val) || isComputed(val) ? val.peek?.() || val() : val\n        if (typeof actualValue === 'number') {\n          // Warn about very large values\n          if (Math.abs(actualValue) > 1000) {\n            console.warn(\n              `OffsetModifier: Very large offset values may cause layout issues`\n            )\n          }\n\n          // Performance tips for high precision decimals\n          if (actualValue !== Math.round(actualValue * 100) / 100) {\n            console.info(\n              `OffsetModifier: Consider rounding offset values to 2 decimal places for better performance`\n            )\n          }\n        }\n      }\n\n      checkValue(x, 'x')\n      if (y !== undefined) {\n        checkValue(y, 'y')\n      }\n    }\n  }\n}\n\n/**\n * Create an offset modifier\n *\n * @param x - Horizontal offset in pixels\n * @param y - Vertical offset in pixels (optional, defaults to 0)\n *\n * @example\n * ```typescript\n * // Move element 10px right and 5px down\n * offset(10, 5)\n *\n * // Move element only horizontally\n * offset(20)\n *\n * // With reactive values\n * const xOffset = signal(0)\n * offset(xOffset, -10)\n * ```\n */\nexport function offset(x: number, y?: number): OffsetModifier {\n  const modifier = new OffsetModifier({ x, y: y ?? 0 })\n\n  // Validate in development\n  if (\n    typeof process !== 'undefined' &&\n    process.env.NODE_ENV === 'development'\n  ) {\n    modifier['validateOffset'](x, y)\n  }\n\n  return modifier\n}\n","/**\n * Scale Effect Modifier\n *\n * SwiftUI .scaleEffect() modifier for scaling elements with anchor support.\n * Handles CSS transforms while preserving existing transformations.\n */\n\nimport type { DOMNode } from '@tachui/core/runtime/types'\nimport { BaseModifier } from '../basic/base'\nimport type { ModifierContext } from '@tachui/core/modifiers/types'\nimport { createEffect, isSignal, isComputed } from '@tachui/core/reactive'\n\nexport type ScaleAnchor =\n  | 'center'\n  | 'top'\n  | 'topLeading'\n  | 'topTrailing'\n  | 'bottom'\n  | 'bottomLeading'\n  | 'bottomTrailing'\n  | 'leading'\n  | 'trailing'\n\nexport interface ScaleEffectOptions {\n  x: number\n  y?: number\n  anchor?: ScaleAnchor\n}\n\nexport class ScaleEffectModifier extends BaseModifier<ScaleEffectOptions> {\n  readonly type = 'scaleEffect'\n  readonly priority = 35 // High priority for transform operations\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return undefined\n\n    const { x, y, anchor = 'center' } = this.properties\n    const scaleY = y ?? x // Default to uniform scaling if y not provided\n\n    // Validate in development\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      this.validateScale(x, scaleY, anchor)\n    }\n\n    // Handle reactive values\n    if (\n      isSignal(x) ||\n      isComputed(x) ||\n      isSignal(scaleY) ||\n      isComputed(scaleY)\n    ) {\n      createEffect(() => {\n        const currentX = isSignal(x) || isComputed(x) ? x() : x\n        const currentY =\n          isSignal(scaleY) || isComputed(scaleY) ? scaleY() : scaleY\n\n        this.applyScale(\n          context.element as HTMLElement,\n          currentX,\n          currentY,\n          anchor\n        )\n      })\n    } else {\n      // Handle static values\n      this.applyScale(context.element as HTMLElement, x, scaleY, anchor)\n    }\n\n    return undefined\n  }\n\n  private applyScale(\n    element: HTMLElement,\n    x: number,\n    y: number,\n    anchor: ScaleAnchor\n  ): void {\n    const scaleValue = `scale(${x}, ${y})`\n\n    // Set transform-origin based on anchor\n    element.style.transformOrigin = this.getTransformOrigin(anchor)\n\n    // Preserve existing transforms but replace any existing scale functions\n    const existingTransform = element.style.transform || ''\n    const existingTransforms = existingTransform\n      .replace(/\\s*scale[XYZ3d]*\\([^)]*\\)\\s*/g, ' ')\n      .replace(/\\s+/g, ' ')\n      .trim()\n\n    const newTransform = existingTransforms\n      ? `${existingTransforms} ${scaleValue}`.trim()\n      : scaleValue\n\n    element.style.transform = newTransform\n  }\n\n  private getTransformOrigin(anchor: ScaleAnchor): string {\n    const anchorMap: Record<ScaleAnchor, string> = {\n      center: 'center center',\n      top: 'center top',\n      topLeading: 'left top',\n      topTrailing: 'right top',\n      bottom: 'center bottom',\n      bottomLeading: 'left bottom',\n      bottomTrailing: 'right bottom',\n      leading: 'left center',\n      trailing: 'right center',\n    }\n\n    return anchorMap[anchor]\n  }\n\n  /**\n   * Development mode validation\n   */\n  private validateScale(x: any, y: any, anchor: ScaleAnchor): void {\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      // Validate scale values\n      if (typeof x !== 'number' && !isSignal(x) && !isComputed(x)) {\n        console.warn(\n          `ScaleEffectModifier: x value must be a number or reactive signal. Got: ${typeof x}`\n        )\n      }\n\n      if (typeof y !== 'number' && !isSignal(y) && !isComputed(y)) {\n        console.warn(\n          `ScaleEffectModifier: y value must be a number or reactive signal. Got: ${typeof y}`\n        )\n      }\n\n      // Validate anchor\n      const validAnchors: ScaleAnchor[] = [\n        'center',\n        'top',\n        'topLeading',\n        'topTrailing',\n        'bottom',\n        'bottomLeading',\n        'bottomTrailing',\n        'leading',\n        'trailing',\n      ]\n      if (!validAnchors.includes(anchor)) {\n        console.warn(\n          `ScaleEffectModifier: Invalid anchor \"${anchor}\". Valid anchors:`,\n          validAnchors\n        )\n      }\n\n      // Performance and visual warnings\n      const checkValue = (val: any, name: string) => {\n        const actualValue =\n          isSignal(val) || isComputed(val) ? val.peek?.() || val() : val\n        if (typeof actualValue === 'number') {\n          if (actualValue <= 0) {\n            console.warn(\n              `ScaleEffectModifier: ${name} scale value ${actualValue} will make element invisible`\n            )\n          }\n          if (actualValue > 10) {\n            console.warn(\n              `ScaleEffectModifier: Large ${name} scale (${actualValue}) may impact performance and cause visual issues`\n            )\n          }\n          if (actualValue !== Math.round(actualValue * 100) / 100) {\n            console.info(\n              `ScaleEffectModifier: Consider rounding ${name} scale to 2 decimal places for better performance`\n            )\n          }\n        }\n      }\n\n      checkValue(x, 'x')\n      checkValue(y, 'y')\n    }\n  }\n}\n\n/**\n * Create a scale effect modifier\n *\n * @param x - Horizontal scale factor (1.0 = normal size)\n * @param y - Vertical scale factor (optional, defaults to x for uniform scaling)\n * @param anchor - Transform origin anchor point (default: 'center')\n *\n * @example\n * ```typescript\n * // Scale to 150% uniformly\n * scaleEffect(1.5)\n *\n * // Scale with different x/y values\n * scaleEffect(2.0, 0.5)\n *\n * // Scale with custom anchor point\n * scaleEffect(1.2, 1.2, 'topLeading')\n *\n * // With reactive values\n * const scale = signal(1.0)\n * scaleEffect(scale, undefined, 'center')\n * ```\n */\nexport function scaleEffect(\n  x: number,\n  y?: number,\n  anchor: ScaleAnchor = 'center'\n): ScaleEffectModifier {\n  return new ScaleEffectModifier({ x, y, anchor })\n}\n","/**\n * Aspect Ratio Modifier\n *\n * SwiftUI .aspectRatio() modifier for controlling element aspect ratios.\n * Supports both explicit ratios and content mode (fit/fill).\n */\n\nimport type { DOMNode } from '@tachui/core/runtime/types'\nimport { BaseModifier } from '../basic/base'\nimport type { ModifierContext } from '@tachui/core/modifiers/types'\nimport { createEffect, isSignal, isComputed } from '@tachui/core/reactive'\n\nexport type ContentMode = 'fit' | 'fill'\n\nexport interface AspectRatioOptions {\n  ratio?: number\n  contentMode: ContentMode\n}\n\nexport class AspectRatioModifier extends BaseModifier<AspectRatioOptions> {\n  readonly type = 'aspectRatio'\n  readonly priority = 20 // Medium priority for layout properties\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return undefined\n\n    const { ratio, contentMode } = this.properties\n\n    // Validate in development\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      this.validateAspectRatio(ratio, contentMode)\n    }\n\n    if (ratio !== undefined) {\n      // Handle reactive aspect ratio\n      if (isSignal(ratio) || isComputed(ratio)) {\n        createEffect(() => {\n          const currentRatio = ratio()\n          this.applyAspectRatio(\n            context.element as HTMLElement,\n            currentRatio,\n            contentMode\n          )\n        })\n      } else {\n        this.applyAspectRatio(\n          context.element as HTMLElement,\n          ratio,\n          contentMode\n        )\n      }\n    } else {\n      // Apply only content mode without specific ratio\n      this.applyContentMode(context.element as HTMLElement, contentMode)\n    }\n\n    return undefined\n  }\n\n  private applyAspectRatio(\n    element: HTMLElement,\n    ratio: number,\n    contentMode: ContentMode\n  ): void {\n    // Set CSS aspect-ratio property\n    element.style.aspectRatio = String(ratio)\n\n    // Apply content mode\n    this.applyContentMode(element, contentMode)\n  }\n\n  private applyContentMode(\n    element: HTMLElement,\n    contentMode: ContentMode\n  ): void {\n    // Set content mode behavior\n    if (contentMode === 'fill') {\n      element.style.objectFit = 'cover'\n      // For non-img/video elements, ensure content fills the container\n      if (!this.isMediaElement(element)) {\n        element.style.width = '100%'\n        element.style.height = '100%'\n      }\n    } else {\n      // fit\n      element.style.objectFit = 'contain'\n      // For non-media elements, maintain aspect ratio within container\n      if (!this.isMediaElement(element)) {\n        element.style.maxWidth = '100%'\n        element.style.maxHeight = '100%'\n      }\n    }\n  }\n\n  private isMediaElement(element: HTMLElement): boolean {\n    const mediaTagNames = ['IMG', 'VIDEO', 'CANVAS', 'SVG', 'IFRAME']\n    return mediaTagNames.includes(element.tagName)\n  }\n\n  /**\n   * Development mode validation\n   */\n  private validateAspectRatio(ratio: any, contentMode: ContentMode): void {\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      // Validate ratio\n      if (ratio !== undefined) {\n        if (\n          typeof ratio !== 'number' &&\n          !isSignal(ratio) &&\n          !isComputed(ratio)\n        ) {\n          console.warn(\n            `AspectRatioModifier: ratio must be a number or reactive signal. Got: ${typeof ratio}`\n          )\n        }\n\n        const actualRatio =\n          isSignal(ratio) || isComputed(ratio)\n            ? ratio.peek?.() || ratio()\n            : ratio\n        if (typeof actualRatio === 'number') {\n          if (actualRatio <= 0) {\n            console.warn(\n              `AspectRatioModifier: ratio must be positive. Got: ${actualRatio}`\n            )\n          }\n          if (actualRatio > 100) {\n            console.warn(\n              `AspectRatioModifier: Very large ratio (${actualRatio}) may cause layout issues`\n            )\n          }\n          if (actualRatio < 0.01) {\n            console.warn(\n              `AspectRatioModifier: Very small ratio (${actualRatio}) may cause layout issues`\n            )\n          }\n        }\n      }\n\n      // Validate content mode\n      const validContentModes: ContentMode[] = ['fit', 'fill']\n      if (!validContentModes.includes(contentMode)) {\n        console.warn(\n          `AspectRatioModifier: Invalid content mode \"${contentMode}\". Valid modes:`,\n          validContentModes\n        )\n      }\n    }\n  }\n\n  /**\n   * Get common aspect ratios\n   */\n  static readonly COMMON_RATIOS = {\n    square: 1,\n    portrait: 3 / 4,\n    landscape: 4 / 3,\n    widescreen: 16 / 9,\n    ultrawide: 21 / 9,\n    golden: 1.618,\n    photo: 3 / 2,\n  } as const\n}\n\n/**\n * Create an aspect ratio modifier\n *\n * @param ratio - Aspect ratio (width/height). If undefined, maintains natural aspect ratio\n * @param contentMode - How content should fit within the aspect ratio ('fit' or 'fill')\n *\n * @example\n * ```typescript\n * // Square aspect ratio with fit content mode\n * aspectRatio(1, 'fit')\n *\n * // 16:9 widescreen with fill\n * aspectRatio(16/9, 'fill')\n *\n * // Use common ratio\n * aspectRatio(AspectRatioModifier.COMMON_RATIOS.landscape, 'fit')\n *\n * // Content mode only (maintain natural ratio)\n * aspectRatio(undefined, 'fill')\n *\n * // With reactive value\n * const ratio = signal(1.5)\n * aspectRatio(ratio, 'fit')\n * ```\n */\nexport function aspectRatio(\n  ratio?: number,\n  contentMode: ContentMode = 'fit'\n): AspectRatioModifier {\n  return new AspectRatioModifier({ ratio, contentMode })\n}\n","/**\n * Fixed Size Modifier\n *\n * SwiftUI .fixedSize() modifier for preventing elements from growing\n * beyond their intrinsic content size in specified dimensions.\n */\n\nimport type { DOMNode } from '@tachui/core/runtime/types'\nimport { BaseModifier } from '../basic/base'\nimport type { ModifierContext } from '@tachui/core/modifiers/types'\n\nexport interface FixedSizeOptions {\n  horizontal: boolean\n  vertical: boolean\n}\n\nexport class FixedSizeModifier extends BaseModifier<FixedSizeOptions> {\n  readonly type = 'fixedSize'\n  readonly priority = 25 // Medium priority for layout properties\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return undefined\n\n    const { horizontal, vertical } = this.properties\n\n    // Validate in development\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      this.validateFixedSize(horizontal, vertical)\n    }\n\n    this.applyFixedSize(context.element as HTMLElement, horizontal, vertical)\n\n    return undefined\n  }\n\n  private applyFixedSize(\n    element: HTMLElement,\n    horizontal: boolean,\n    vertical: boolean\n  ): void {\n    // Apply horizontal fixed size\n    if (horizontal) {\n      // Prevent horizontal growth beyond intrinsic width\n      element.style.maxWidth = 'max-content'\n      element.style.width = 'max-content'\n\n      // For flex items, prevent flex-grow\n      element.style.flexShrink = '0'\n      element.style.flexBasis = 'auto'\n\n      // For text content, prevent wrapping\n      if (this.isTextElement(element)) {\n        element.style.whiteSpace = 'nowrap'\n      }\n    }\n\n    // Apply vertical fixed size\n    if (vertical) {\n      // Prevent vertical growth beyond intrinsic height\n      element.style.maxHeight = 'max-content'\n      element.style.height = 'max-content'\n\n      // For flex items in column direction\n      if (this.isFlexItem(element)) {\n        element.style.alignSelf = 'flex-start'\n      }\n    }\n\n    // If both dimensions are fixed, make the element as small as possible\n    if (horizontal && vertical) {\n      element.style.display = element.style.display || 'inline-block'\n    }\n  }\n\n  private isTextElement(element: HTMLElement): boolean {\n    const textElements = [\n      'P',\n      'SPAN',\n      'DIV',\n      'H1',\n      'H2',\n      'H3',\n      'H4',\n      'H5',\n      'H6',\n      'LABEL',\n    ]\n    return (\n      (textElements.includes(element.tagName) &&\n        element.childNodes.length > 0) ||\n      (element.childNodes.length > 0 &&\n        Array.from(element.childNodes).some(\n          node => node.nodeType === Node.TEXT_NODE\n        ))\n    )\n  }\n\n  private isFlexItem(element: HTMLElement): boolean {\n    const parent = element.parentElement\n    if (!parent) return false\n\n    const parentDisplay = getComputedStyle(parent).display\n    return parentDisplay === 'flex' || parentDisplay === 'inline-flex'\n  }\n\n  /**\n   * Development mode validation\n   */\n  private validateFixedSize(horizontal: boolean, vertical: boolean): void {\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      // Validate boolean values\n      if (typeof horizontal !== 'boolean') {\n        console.warn(\n          `FixedSizeModifier: horizontal must be a boolean. Got: ${typeof horizontal}`\n        )\n      }\n\n      if (typeof vertical !== 'boolean') {\n        console.warn(\n          `FixedSizeModifier: vertical must be a boolean. Got: ${typeof vertical}`\n        )\n      }\n\n      // Warn if both are false (no-op)\n      if (!horizontal && !vertical) {\n        console.warn(\n          'FixedSizeModifier: Both horizontal and vertical are false - this modifier has no effect'\n        )\n      }\n\n      // Provide usage guidance\n      if (horizontal && vertical) {\n        console.info(\n          'FixedSizeModifier: Element will be sized to its content in both dimensions (like display: inline-block)'\n        )\n      } else if (horizontal) {\n        console.info(\n          'FixedSizeModifier: Element width will be fixed to content size (prevents text wrapping)'\n        )\n      } else if (vertical) {\n        console.info(\n          'FixedSizeModifier: Element height will be fixed to content size'\n        )\n      }\n    }\n  }\n}\n\n/**\n * Create a fixed size modifier\n *\n * @param horizontal - Fix horizontal size to content (default: true)\n * @param vertical - Fix vertical size to content (default: true)\n *\n * @example\n * ```typescript\n * // Fix both dimensions (equivalent to intrinsic sizing)\n * fixedSize()\n * fixedSize(true, true)\n *\n * // Fix only horizontal (prevent text wrapping)\n * fixedSize(true, false)\n *\n * // Fix only vertical (prevent height expansion)\n * fixedSize(false, true)\n *\n * // No fixed sizing (no-op, but validates parameters)\n * fixedSize(false, false)\n * ```\n */\nexport function fixedSize(\n  horizontal: boolean = true,\n  vertical: boolean = true\n): FixedSizeModifier {\n  return new FixedSizeModifier({ horizontal, vertical })\n}\n","/**\n * Position Modifier\n *\n * CSS position property modifier with enhanced validation and utilities.\n */\n\nimport type { DOMNode } from '@tachui/core/runtime/types'\nimport { BaseModifier } from '../basic/base'\nimport type { ModifierContext } from '@tachui/core/modifiers/types'\nimport { createEffect, isSignal, isComputed } from '@tachui/core/reactive'\n\nexport type PositionValue =\n  | 'static'\n  | 'relative'\n  | 'absolute'\n  | 'fixed'\n  | 'sticky'\n\nexport interface PositionOptions {\n  position: PositionValue\n}\n\nexport class PositionModifier extends BaseModifier<PositionOptions> {\n  readonly type = 'position'\n  readonly priority = 50 // Highest priority to override other positioning\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return undefined\n\n    const { position } = this.properties\n\n    // Validate in development\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      this.validatePosition(position)\n    }\n\n    // Handle reactive position\n    if (isSignal(position) || isComputed(position)) {\n      createEffect(() => {\n        const currentPosition = position()\n        this.applyPosition(context.element as HTMLElement, currentPosition)\n      })\n    } else {\n      // Handle static position\n      this.applyPosition(context.element as HTMLElement, position)\n    }\n\n    return undefined\n  }\n\n  private applyPosition(element: HTMLElement, position: PositionValue): void {\n    element.style.position = position\n\n    // Apply position-specific optimizations and warnings\n    this.applyPositionOptimizations(element, position)\n  }\n\n  private applyPositionOptimizations(\n    element: HTMLElement,\n    position: PositionValue\n  ): void {\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      // Provide helpful guidance for each position type\n      switch (position) {\n        case 'absolute':\n          this.warnIfMissingPositionedParent(element)\n          break\n        case 'fixed':\n          console.info(\n            'PositionModifier: Fixed positioning relative to viewport. Consider impact on mobile layouts.'\n          )\n          break\n        case 'sticky':\n          this.warnIfMissingStickyProperties(element)\n          break\n        case 'relative':\n          // Relative is generally safe, but can establish new stacking context\n          break\n        case 'static':\n          // Static is the default, removes any positioning context\n          this.warnIfHasPositioningProperties(element)\n          break\n      }\n    }\n\n    // Apply performance optimizations for positioned elements\n    if (position === 'absolute' || position === 'fixed') {\n      // Create new stacking context to improve performance\n      if (!element.style.zIndex) {\n        element.style.zIndex = '0'\n      }\n\n      // Enable hardware acceleration for better performance\n      if (!element.style.transform) {\n        element.style.transform = 'translateZ(0)'\n      }\n    }\n  }\n\n  private warnIfMissingPositionedParent(element: HTMLElement): void {\n    let parent = element.parentElement\n    let hasPositionedParent = false\n\n    while (parent && parent !== document.body) {\n      const parentPosition = getComputedStyle(parent).position\n      if (parentPosition !== 'static') {\n        hasPositionedParent = true\n        break\n      }\n      parent = parent.parentElement\n    }\n\n    if (!hasPositionedParent) {\n      console.warn(\n        'PositionModifier: Absolutely positioned element may not have expected behavior without a positioned parent (relative, absolute, or fixed)'\n      )\n    }\n  }\n\n  private warnIfMissingStickyProperties(element: HTMLElement): void {\n    const style = getComputedStyle(element)\n    const hasStickySide =\n      style.top !== 'auto' ||\n      style.right !== 'auto' ||\n      style.bottom !== 'auto' ||\n      style.left !== 'auto'\n\n    if (!hasStickySide) {\n      console.warn(\n        'PositionModifier: Sticky positioning requires at least one of top, right, bottom, or left to be set'\n      )\n    }\n  }\n\n  private warnIfHasPositioningProperties(element: HTMLElement): void {\n    const style = getComputedStyle(element)\n    const hasPositioningProps =\n      style.top !== 'auto' ||\n      style.right !== 'auto' ||\n      style.bottom !== 'auto' ||\n      style.left !== 'auto'\n\n    if (hasPositioningProps) {\n      console.warn(\n        'PositionModifier: Static positioning ignores top, right, bottom, and left properties'\n      )\n    }\n  }\n\n  /**\n   * Development mode validation\n   */\n  private validatePosition(position: any): void {\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      const isReactive = isSignal(position) || isComputed(position)\n\n      if (!isReactive && typeof position !== 'string') {\n        console.warn(\n          `PositionModifier: position must be a string or reactive signal. Got: ${typeof position}`\n        )\n        return\n      }\n\n      const actualPosition = isReactive\n        ? position.peek?.() || position()\n        : position\n      const validPositions: PositionValue[] = [\n        'static',\n        'relative',\n        'absolute',\n        'fixed',\n        'sticky',\n      ]\n\n      if (!validPositions.includes(actualPosition)) {\n        console.warn(\n          `PositionModifier: Invalid position value \"${actualPosition}\". Valid values:`,\n          validPositions\n        )\n      }\n\n      // Browser compatibility warnings\n      if (actualPosition === 'sticky') {\n        console.info(\n          'PositionModifier: Sticky positioning may need vendor prefixes for older browsers'\n        )\n      }\n    }\n  }\n}\n\n/**\n * Create a position modifier\n *\n * @param value - CSS position value\n *\n * @example\n * ```typescript\n * // Static positioning (default, removes positioning context)\n * position('static')\n *\n * // Relative positioning (creates positioning context)\n * position('relative')\n *\n * // Absolute positioning (positioned relative to nearest positioned parent)\n * position('absolute')\n *\n * // Fixed positioning (positioned relative to viewport)\n * position('fixed')\n *\n * // Sticky positioning (hybrid relative/fixed)\n * position('sticky')\n *\n * // With reactive value\n * const pos = signal('relative')\n * position(pos)\n * ```\n */\nexport function position(value: PositionValue): PositionModifier {\n  return new PositionModifier({ position: value })\n}\n","/**\n * Z-Index Modifier\n *\n * CSS z-index property modifier with enhanced validation and stacking context utilities.\n */\n\nimport type { DOMNode } from '@tachui/core/runtime/types'\nimport { BaseModifier } from '../basic/base'\nimport type { ModifierContext } from '@tachui/core/modifiers/types'\nimport { createEffect, isSignal, isComputed } from '@tachui/core/reactive'\n\nexport interface ZIndexOptions {\n  zIndex: number\n}\n\nexport class ZIndexModifier extends BaseModifier<ZIndexOptions> {\n  readonly type = 'zIndex'\n  readonly priority = 45 // High priority for layering\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return undefined\n\n    const { zIndex } = this.properties\n\n    // Validate in development\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      this.validateZIndex(zIndex)\n    }\n\n    // Handle reactive z-index\n    if (isSignal(zIndex) || isComputed(zIndex)) {\n      createEffect(() => {\n        const currentZIndex = zIndex()\n        this.applyZIndex(context.element as HTMLElement, currentZIndex)\n      })\n    } else {\n      // Handle static z-index\n      this.applyZIndex(context.element as HTMLElement, zIndex)\n    }\n\n    return undefined\n  }\n\n  private applyZIndex(element: HTMLElement, zIndex: number): void {\n    element.style.zIndex = String(zIndex)\n\n    // Ensure element can participate in z-index stacking\n    this.ensureStackingContext(element, zIndex)\n  }\n\n  private ensureStackingContext(element: HTMLElement, zIndex: number): void {\n    const computedStyle = getComputedStyle(element)\n    const position = computedStyle.position\n\n    // z-index only works on positioned elements, flex items, and grid items\n    const isPositioned = position !== 'static'\n    const isFlexItem = this.isFlexItem(element)\n    const isGridItem = this.isGridItem(element)\n\n    if (!isPositioned && !isFlexItem && !isGridItem) {\n      // Make element positioned so z-index works\n      element.style.position = 'relative'\n\n      if (\n        typeof process !== 'undefined' &&\n        process.env.NODE_ENV === 'development'\n      ) {\n        console.info(\n          `ZIndexModifier: Set position: relative on element to enable z-index stacking`\n        )\n      }\n    }\n\n    // Development mode insights\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      this.provideStackingInsights(element, zIndex)\n    }\n  }\n\n  private isFlexItem(element: HTMLElement): boolean {\n    const parent = element.parentElement\n    if (!parent) return false\n\n    const parentDisplay = getComputedStyle(parent).display\n    return parentDisplay === 'flex' || parentDisplay === 'inline-flex'\n  }\n\n  private isGridItem(element: HTMLElement): boolean {\n    const parent = element.parentElement\n    if (!parent) return false\n\n    const parentDisplay = getComputedStyle(parent).display\n    return parentDisplay === 'grid' || parentDisplay === 'inline-grid'\n  }\n\n  private provideStackingInsights(element: HTMLElement, zIndex: number): void {\n    // Check for common z-index ranges and provide guidance\n    if (zIndex < 0) {\n      console.info(\n        'ZIndexModifier: Negative z-index will layer behind the normal stacking order'\n      )\n    } else if (zIndex > 1000) {\n      console.warn(\n        `ZIndexModifier: Very high z-index (${zIndex}) may cause stacking conflicts. Consider using semantic ranges.`\n      )\n    }\n\n    // Check for potential stacking context issues\n    this.checkStackingContext(element)\n  }\n\n  private checkStackingContext(element: HTMLElement): void {\n    const style = getComputedStyle(element)\n\n    // Properties that create new stacking contexts\n    const stackingContextProperties = [\n      { prop: 'opacity', value: style.opacity, creates: style.opacity !== '1' },\n      {\n        prop: 'transform',\n        value: style.transform,\n        creates: style.transform !== 'none',\n      },\n      { prop: 'filter', value: style.filter, creates: style.filter !== 'none' },\n      {\n        prop: 'isolation',\n        value: style.isolation,\n        creates: style.isolation === 'isolate',\n      },\n      {\n        prop: 'mix-blend-mode',\n        value: style.mixBlendMode,\n        creates: style.mixBlendMode !== 'normal',\n      },\n    ]\n\n    const creatingContexts = stackingContextProperties.filter(p => p.creates)\n\n    if (creatingContexts.length > 0) {\n      console.info(\n        'ZIndexModifier: Element creates new stacking context due to:',\n        creatingContexts.map(p => `${p.prop}: ${p.value}`).join(', ')\n      )\n    }\n  }\n\n  /**\n   * Development mode validation\n   */\n  private validateZIndex(zIndex: any): void {\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      const isReactive = isSignal(zIndex) || isComputed(zIndex)\n\n      if (!isReactive && typeof zIndex !== 'number') {\n        console.warn(\n          `ZIndexModifier: zIndex must be a number or reactive signal. Got: ${typeof zIndex}`\n        )\n        return\n      }\n\n      const actualZIndex = isReactive ? zIndex.peek?.() || zIndex() : zIndex\n\n      if (typeof actualZIndex === 'number') {\n        if (!Number.isInteger(actualZIndex)) {\n          console.warn(\n            `ZIndexModifier: z-index should be an integer. Got: ${actualZIndex}`\n          )\n        }\n\n        if (\n          actualZIndex > Number.MAX_SAFE_INTEGER ||\n          actualZIndex < Number.MIN_SAFE_INTEGER\n        ) {\n          console.warn(\n            `ZIndexModifier: z-index value ${actualZIndex} is outside safe integer range`\n          )\n        }\n      }\n    }\n  }\n\n  /**\n   * Common z-index values for semantic layering\n   */\n  static readonly COMMON_LAYERS = {\n    background: -1,\n    base: 0,\n    content: 1,\n    navigation: 100,\n    dropdown: 200,\n    overlay: 300,\n    modal: 400,\n    tooltip: 500,\n    toast: 600,\n    debug: 9999,\n  } as const\n}\n\n/**\n * Create a z-index modifier\n *\n * @param value - Z-index value (integer)\n *\n * @example\n * ```typescript\n * // Basic z-index\n * zIndex(10)\n *\n * // Negative z-index (behind normal content)\n * zIndex(-1)\n *\n * // Use semantic layers\n * zIndex(ZIndexModifier.COMMON_LAYERS.modal)\n * zIndex(ZIndexModifier.COMMON_LAYERS.tooltip)\n *\n * // With reactive value\n * const layer = signal(100)\n * zIndex(layer)\n * ```\n */\nexport function zIndex(value: number): ZIndexModifier {\n  return new ZIndexModifier({ zIndex: value })\n}\n","/**\n * Overlay Modifier\n *\n * SwiftUI-inspired modifier for overlaying content on top of another view\n */\n\nimport { BaseModifier } from '../base'\nimport type { ModifierContext } from '../types'\nimport type { DOMNode } from '@tachui/core/runtime/types'\n\nexport type OverlayAlignment =\n  | 'center'\n  | 'top'\n  | 'bottom'\n  | 'leading'\n  | 'trailing'\n  | 'topLeading'\n  | 'topTrailing'\n  | 'bottomLeading'\n  | 'bottomTrailing'\n\nexport interface OverlayOptions {\n  content: any // ComponentInstance, HTMLElement, or function that returns ComponentInstance\n  alignment?: OverlayAlignment\n}\n\nexport class OverlayModifier extends BaseModifier<OverlayOptions> {\n  readonly type = 'overlay'\n  readonly priority = 10 // Apply late so positioning is relative to final layout\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    // In test environment, accept any element with style property\n    const element = context.element as HTMLElement\n    if (!element.style) return\n\n    const { content, alignment = 'center' } = this.properties\n\n    this.applyOverlay(element, content, alignment, context)\n\n    return undefined\n  }\n\n  private applyOverlay(\n    element: HTMLElement,\n    content: any,\n    alignment: OverlayAlignment,\n    _context: ModifierContext\n  ): void {\n    // Make the element a positioned container\n    if (element.style.position === '' || element.style.position === 'static') {\n      element.style.position = 'relative'\n    }\n\n    // Create overlay container\n    const overlayContainer = document.createElement('div')\n    overlayContainer.style.position = 'absolute'\n    overlayContainer.style.pointerEvents = 'none' // Allow clicks to pass through by default\n\n    // Apply alignment positioning\n    const alignmentStyles = this.getOverlayAlignment(alignment)\n    Object.assign(overlayContainer.style, alignmentStyles)\n\n    // Render content\n    this.renderContent(overlayContainer, content)\n\n    // Add overlay to the element\n    element.appendChild(overlayContainer)\n  }\n\n  private renderContent(container: HTMLElement, content: any): void {\n    if (typeof content === 'function') {\n      // If content is a function, call it to get component\n      const contentComponent = content()\n      if (contentComponent && typeof contentComponent.render === 'function') {\n        const contentNode = contentComponent.render()\n        if (contentNode.element) {\n          container.appendChild(contentNode.element)\n        }\n      }\n    } else if (content && typeof content.render === 'function') {\n      // If content is a component instance\n      const contentNode = content.render()\n      if (contentNode.element) {\n        container.appendChild(contentNode.element)\n      }\n    } else if (\n      content &&\n      (content instanceof HTMLElement || content.appendChild)\n    ) {\n      // If content is a DOM element (including test mock elements with appendChild method)\n      container.appendChild(content)\n    }\n  }\n\n  private getOverlayAlignment(\n    alignment: OverlayAlignment\n  ): Record<string, string> {\n    const alignments: Record<OverlayAlignment, Record<string, string>> = {\n      center: {\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n      },\n      top: {\n        top: '0px',\n        left: '50%',\n        transform: 'translateX(-50%)',\n      },\n      bottom: {\n        bottom: '0px',\n        left: '50%',\n        transform: 'translateX(-50%)',\n      },\n      leading: {\n        top: '50%',\n        left: '0px',\n        transform: 'translateY(-50%)',\n      },\n      trailing: {\n        top: '50%',\n        right: '0px',\n        transform: 'translateY(-50%)',\n      },\n      topLeading: {\n        top: '0px',\n        left: '0px',\n      },\n      topTrailing: {\n        top: '0px',\n        right: '0px',\n      },\n      bottomLeading: {\n        bottom: '0px',\n        left: '0px',\n      },\n      bottomTrailing: {\n        bottom: '0px',\n        right: '0px',\n      },\n    }\n\n    return alignments[alignment] || alignments.center\n  }\n}\n\n/**\n * Creates an overlay modifier that overlays content on top of the view\n */\nexport function overlay(\n  content: any,\n  alignment: OverlayAlignment = 'center'\n): OverlayModifier {\n  return new OverlayModifier({ content, alignment })\n}\n"],"names":["FlexboxModifier","BaseModifier","options","__publicField","_node","context","styles","props","formatValue","value","flexbox","flexGrow","flexShrink","flexBasis","justifyContent","alignItems","alignSelf","gap","flexDirection","flexWrap","flexboxPresets","OffsetModifier","x","y","isSignal","isComputed","createEffect","currentX","currentY","element","offsetX","offsetY","translateValue","existingTransforms","newTransform","checkValue","val","_name","actualValue","offset","modifier","ScaleEffectModifier","anchor","scaleY","scaleValue","validAnchors","name","scaleEffect","AspectRatioModifier","ratio","contentMode","currentRatio","actualRatio","validContentModes","aspectRatio","FixedSizeModifier","horizontal","vertical","node","parent","parentDisplay","fixedSize","PositionModifier","position","currentPosition","hasPositionedParent","style","isReactive","actualPosition","validPositions","ZIndexModifier","zIndex","currentZIndex","isPositioned","isFlexItem","isGridItem","creatingContexts","p","actualZIndex","OverlayModifier","content","alignment","_context","overlayContainer","alignmentStyles","container","contentComponent","contentNode","alignments","overlay"],"mappings":"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"}

package/dist/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sources":["../src/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 '@tachui/core/reactive/types'\nimport type {\n  ComponentInstance,\n  ComponentProps,\n  DOMNode,\n} from '@tachui/core/runtime/types'\n\n// Re-export for convenience\nexport type { DOMNode } from '@tachui/core/runtime/types'\n// Temporary type definitions until we migrate all types\nexport type Dimension = number | string | 'infinity'\nexport interface StatefulBackgroundValue {\n  default: any\n  hover?: any\n  active?: any\n  focus?: any\n  disabled?: any\n}\n\n// Basic asset interfaces - simplified for now\nexport interface Asset {\n  resolve(): any\n}\nexport interface ColorAssetProxy extends Asset {}\nexport interface ImageAssetProxy extends Asset {}\nexport interface FontAssetProxy extends Asset {}\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 =\n  | Asset\n  | ColorAssetProxy\n  | ImageAssetProxy\n  | 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\n    | 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  // Touch events\n  onTouchStart?: (event: TouchEvent) => void\n  onTouchMove?: (event: TouchEvent) => void\n  onTouchEnd?: (event: TouchEvent) => void\n  onTouchCancel?: (event: TouchEvent) => 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<\n  T extends ComponentInstance = ComponentInstance,\n> {\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?: string | 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(\n    value: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end'\n  ): ModifierBuilder<T>\n  textTransform(\n    value: 'none' | 'uppercase' | 'lowercase' | 'capitalize'\n  ): 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?:\n      | 'solid'\n      | 'dashed'\n      | 'dotted'\n      | 'double'\n      | 'groove'\n      | 'ridge'\n      | 'inset'\n      | 'outset'\n  ): ModifierBuilder<T>\n  borderRight(\n    width: number | Signal<number>,\n    color: ColorValue,\n    style?:\n      | 'solid'\n      | 'dashed'\n      | 'dotted'\n      | 'double'\n      | 'groove'\n      | 'ridge'\n      | 'inset'\n      | 'outset'\n  ): ModifierBuilder<T>\n  borderBottom(\n    width: number | Signal<number>,\n    color: ColorValue,\n    style?:\n      | 'solid'\n      | 'dashed'\n      | 'dotted'\n      | 'double'\n      | 'groove'\n      | 'ridge'\n      | 'inset'\n      | 'outset'\n  ): ModifierBuilder<T>\n  borderLeft(\n    width: number | Signal<number>,\n    color: ColorValue,\n    style?:\n      | 'solid'\n      | 'dashed'\n      | 'dotted'\n      | 'double'\n      | 'groove'\n      | 'ridge'\n      | 'inset'\n      | 'outset'\n  ): ModifierBuilder<T>\n\n  // Flexbox modifiers\n  flexGrow(value: number): ModifierBuilder<T>\n  flexShrink(value: number): ModifierBuilder<T>\n  justifyContent(\n    value:\n      | 'flex-start'\n      | 'flex-end'\n      | 'center'\n      | 'space-between'\n      | 'space-around'\n      | '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(\n    value: 'row' | 'row-reverse' | 'column' | 'column-reverse'\n  ): 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(\n    value: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'\n  ): ModifierBuilder<T>\n  zIndex(value: number): ModifierBuilder<T>\n  display(\n    value:\n      | 'block'\n      | 'inline'\n      | 'inline-block'\n      | 'flex'\n      | 'inline-flex'\n      | 'grid'\n      | 'none'\n  ): ModifierBuilder<T>\n  transform(value: string | Signal<string>): ModifierBuilder<T>\n\n  // Raw CSS modifiers\n  css(properties: {\n    [property: string]: string | number | undefined\n  }): 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(\n    x: number | Signal<number>,\n    y?: number | Signal<number>\n  ): 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(\n    ratio?: number | Signal<number>,\n    contentMode?: 'fit' | 'fill'\n  ): 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(\n    x: number | Signal<number>,\n    y: number | Signal<number>\n  ): ModifierBuilder<T>\n\n  // Appearance modifiers\n  foregroundColor(color: ColorValue): ModifierBuilder<T>\n  backgroundColor(color: ColorValue): ModifierBuilder<T>\n  background(\n    value: StatefulBackgroundValue | Signal<string>\n  ): ModifierBuilder<T>\n  font(options: AppearanceModifierProps['font']): ModifierBuilder<T>\n  font(size: number | string): ModifierBuilder<T>\n  fontWeight(\n    weight: NonNullable<AppearanceModifierProps['font']>['weight']\n  ): ModifierBuilder<T>\n  fontSize(\n    size: number | string | Signal<number> | Signal<string>\n  ): 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: {\n    x: number\n    y: number\n    blur: number\n    color: string\n    spread?: number\n    inset?: boolean\n  }): ModifierBuilder<T>\n  shadows(\n    configs: Array<{\n      x: number\n      y: number\n      blur: number\n      color: string\n      spread?: number\n      inset?: boolean\n    }>\n  ): ModifierBuilder<T>\n  textShadow(config: TextShadowConfig): ModifierBuilder<T>\n  shadowPreset(presetName: string): ModifierBuilder<T>\n\n  // Visual Effects Modifiers (Phase 2 - Epic: Butternut)\n\n  // ============================================================================\n  // VISUAL EFFECTS METHODS MOVED TO @tachui/effects\n  // ============================================================================\n  // Visual effects methods (filters, transforms, backdrop, hover) have been\n  // moved to @tachui/effects package. Import and use with .apply():\n  //\n  //   import { blur, scale, glassmorphism, hoverEffect } from '@tachui/effects'\n  //   VStack().apply(blur(5)).apply(scale(1.1))\n  //\n  // This provides better tree-shaking and cleaner plugin boundaries.\n  // ============================================================================\n\n  // Advanced Gesture Modifiers (Phase 4 - Epic: Butternut)\n  onLongPressGesture(options: {\n    minimumDuration?: number\n    maximumDistance?: number\n    perform: () => void\n    onPressingChanged?: (isPressing: boolean) => void\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: {\n    [key: string]: string | number | boolean\n  }): ModifierBuilder<T>\n  aria(attributes: {\n    [key: string]: string | number | boolean | undefined\n  }): ModifierBuilder<T>\n  tabIndex(value: number): ModifierBuilder<T>\n\n  // Text Modifiers\n  lineClamp(lines: number): ModifierBuilder<T>\n  wordBreak(\n    value: 'normal' | 'break-all' | 'keep-all' | 'break-word'\n  ): 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(\n    config: {\n      blur?: number\n      brightness?: number\n      contrast?: number\n      saturate?: number\n      [key: string]: any\n    },\n    fallbackColor?: ColorValue\n  ): ModifierBuilder<T>\n  backdropFilter(\n    cssValue: string,\n    fallbackColor?: ColorValue\n  ): ModifierBuilder<T>\n  glassmorphism(\n    intensity?: 'subtle' | 'light' | 'medium' | 'heavy',\n    customFallback?: ColorValue\n  ): ModifierBuilder<T>\n\n  // Pseudo-element modifiers\n  before(styles: {\n    content: string\n    color?: string\n    [key: string]: any\n  }): ModifierBuilder<T>\n  after(styles: {\n    content: string\n    color?: string\n    [key: string]: any\n  }): ModifierBuilder<T>\n\n  // State modifiers\n  disabled(isDisabled?: boolean | Signal<boolean>): ModifierBuilder<T>\n\n  // Animation modifiers\n  transition(\n    property?: string,\n    duration?: number,\n    easing?: string,\n    delay?: number\n  ): 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(\n    margin:\n      | number\n      | string\n      | {\n          top?: number | string\n          right?: number | string\n          bottom?: number | string\n          left?: number | string\n        }\n  ): ModifierBuilder<T>\n  scrollPadding(\n    padding:\n      | number\n      | string\n      | {\n          top?: number | string\n          right?: number | string\n          bottom?: number | string\n          left?: number | string\n        }\n  ): ModifierBuilder<T>\n  scrollSnap(\n    type:\n      | 'none'\n      | 'x mandatory'\n      | 'y mandatory'\n      | 'x proximity'\n      | 'y proximity'\n      | 'both mandatory'\n      | '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?: {\n      id?: string\n      priority?: 'background' | 'userInitiated' | 'utility' | 'default'\n    }\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  // Text case alias for textTransform\n  textCase(\n    value: 'none' | 'uppercase' | 'lowercase' | 'capitalize'\n  ): 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?: { skipSanitizer?: boolean }): ModifierBuilder<T>\n\n  // Responsive functionality moved to @tachui/responsive package\n\n  // Interaction modifiers\n  onTap(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onFocus(handler: (isFocused: boolean) => void): ModifierBuilder<T>\n  onBlur(handler: (isFocused: boolean) => void): ModifierBuilder<T>\n  onKeyDown(handler: (event: KeyboardEvent) => void): ModifierBuilder<T>\n  onScroll(handler: (event: Event) => void): ModifierBuilder<T>\n  onKeyPress(handler: (event: KeyboardEvent) => void): ModifierBuilder<T>\n  onKeyUp(handler: (event: KeyboardEvent) => void): ModifierBuilder<T>\n  onDoubleClick(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onContextMenu(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onWheel(handler: (event: WheelEvent) => void): ModifierBuilder<T>\n  onInput(handler: (event: InputEvent) => void): ModifierBuilder<T>\n  onChange(handler: (value: any, event?: Event) => void): ModifierBuilder<T>\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  onSelect(handler: (event: Event) => void): ModifierBuilder<T>\n\n  // Transition modifiers\n  transition(\n    property?: string,\n    duration?: number,\n    easing?: string,\n    delay?: number\n  ): ModifierBuilder<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]:\n    | string\n    | number\n    | Signal<string>\n    | Signal<number>\n    | 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":"AAi9BO,IAAKA,sBAAAA,OACVA,EAAAA,EAAA,SAAS,GAAA,IAAT,UACAA,EAAAA,EAAA,aAAa,GAAA,IAAb,cACAA,EAAAA,EAAA,cAAc,GAAA,IAAd,eACAA,EAAAA,EAAA,YAAY,GAAA,IAAZ,aACAA,EAAAA,EAAA,SAAS,GAAA,IAAT,UALUA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/typography/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/typography/text.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"text.js","sources":["../../src/typography/text.ts"],"sourcesContent":["/**\n * Text Modifiers Implementation\n *\n * Specialized text handling modifiers including line clamping, word breaking,\n * overflow wrapping, and hyphenation control for enhanced typography.\n */\n\nimport type { DOMNode } from '@tachui/core/runtime/types'\nimport { BaseModifier } from '../basic/base'\nimport type {\n  ModifierContext,\n  ReactiveModifierProps,\n} from '@tachui/core/modifiers/types'\nimport { ModifierPriority } from '@tachui/core/modifiers/types'\n\n// ============================================================================\n// Line Clamp Modifier - Multi-line Text Truncation\n// ============================================================================\n\nexport interface LineClampOptions {\n  lines: number\n}\n\nexport type ReactiveLineClampOptions = ReactiveModifierProps<LineClampOptions>\n\nexport class LineClampModifier extends BaseModifier<LineClampOptions> {\n  readonly type = 'lineClamp'\n  readonly priority = ModifierPriority.APPEARANCE + 15\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const { lines } = this.properties\n\n    // Validate lines in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateLines(lines)\n    }\n\n    // Apply line clamp styles\n    const styles = this.generateLineClampStyles(lines)\n    this.applyStyles(context.element, styles)\n\n    return undefined\n  }\n\n  private generateLineClampStyles(lines: number): Record<string, string> {\n    const styles: Record<string, string> = {}\n\n    // Modern browsers: Use -webkit-line-clamp\n    styles.display = '-webkit-box'\n    styles.webkitLineClamp = String(lines)\n    styles.webkitBoxOrient = 'vertical'\n    styles.overflow = 'hidden'\n\n    // Additional properties for better cross-browser support\n    styles.textOverflow = 'ellipsis'\n    styles.wordWrap = 'break-word'\n\n    return styles\n  }\n\n  private validateLines(lines: number): void {\n    if (typeof lines !== 'number' || !Number.isInteger(lines) || lines < 1) {\n      console.warn(\n        'TachUI LineClamp Modifier: lines must be a positive integer'\n      )\n      return\n    }\n\n    if (lines > 10) {\n      console.info(\n        'TachUI LineClamp Modifier: Large line clamp values (>10) may impact readability. Consider if this is intentional.'\n      )\n    }\n  }\n}\n\n/**\n * Line clamp modifier function - SwiftUI .lineLimit() equivalent\n */\nexport function lineClamp(lines: number): LineClampModifier {\n  return new LineClampModifier({ lines })\n}\n\n// ============================================================================\n// Word Break Modifier - Word Breaking Behavior\n// ============================================================================\n\nexport type WordBreakValue = 'normal' | 'break-all' | 'keep-all' | 'break-word'\n\nexport interface WordBreakOptions {\n  wordBreak: WordBreakValue\n}\n\nexport type ReactiveWordBreakOptions = ReactiveModifierProps<WordBreakOptions>\n\nexport class WordBreakModifier extends BaseModifier<WordBreakOptions> {\n  readonly type = 'wordBreak'\n  readonly priority = ModifierPriority.APPEARANCE + 8\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const { wordBreak } = this.properties\n\n    // Validate word break value in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateWordBreak(wordBreak)\n    }\n\n    this.applyStyles(context.element, { wordBreak })\n\n    return undefined\n  }\n\n  private validateWordBreak(value: string): void {\n    const validValues: WordBreakValue[] = [\n      'normal',\n      'break-all',\n      'keep-all',\n      'break-word',\n    ]\n\n    if (!validValues.includes(value as WordBreakValue)) {\n      console.warn(\n        `TachUI WordBreak Modifier: Invalid word-break value \"${value}\". Valid values are: ${validValues.join(', ')}`\n      )\n    }\n\n    if (value === 'break-word') {\n      console.info(\n        'TachUI WordBreak Modifier: \"break-word\" is deprecated. Consider using overflowWrap(\"break-word\") instead.'\n      )\n    }\n  }\n}\n\n/**\n * Word break modifier function\n */\nexport function wordBreak(value: WordBreakValue): WordBreakModifier {\n  return new WordBreakModifier({ wordBreak: value })\n}\n\n// ============================================================================\n// Overflow Wrap Modifier - Word Wrapping\n// ============================================================================\n\nexport type OverflowWrapValue = 'normal' | 'break-word' | 'anywhere'\n\nexport interface OverflowWrapOptions {\n  overflowWrap: OverflowWrapValue\n}\n\nexport type ReactiveOverflowWrapOptions =\n  ReactiveModifierProps<OverflowWrapOptions>\n\nexport class OverflowWrapModifier extends BaseModifier<OverflowWrapOptions> {\n  readonly type = 'overflowWrap'\n  readonly priority = ModifierPriority.APPEARANCE + 9\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const { overflowWrap } = this.properties\n\n    // Validate overflow wrap value in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateOverflowWrap(overflowWrap)\n    }\n\n    this.applyStyles(context.element, { overflowWrap })\n\n    return undefined\n  }\n\n  private validateOverflowWrap(value: string): void {\n    const validValues: OverflowWrapValue[] = [\n      'normal',\n      'break-word',\n      'anywhere',\n    ]\n\n    if (!validValues.includes(value as OverflowWrapValue)) {\n      console.warn(\n        `TachUI OverflowWrap Modifier: Invalid overflow-wrap value \"${value}\". Valid values are: ${validValues.join(', ')}`\n      )\n    }\n  }\n}\n\n/**\n * Overflow wrap modifier function\n */\nexport function overflowWrap(value: OverflowWrapValue): OverflowWrapModifier {\n  return new OverflowWrapModifier({ overflowWrap: value })\n}\n\n// ============================================================================\n// Hyphens Modifier - Hyphenation Control\n// ============================================================================\n\nexport type HyphensValue = 'none' | 'manual' | 'auto'\n\nexport interface HyphensOptions {\n  hyphens: HyphensValue\n}\n\nexport type ReactiveHyphensOptions = ReactiveModifierProps<HyphensOptions>\n\nexport class HyphensModifier extends BaseModifier<HyphensOptions> {\n  readonly type = 'hyphens'\n  readonly priority = ModifierPriority.APPEARANCE + 10\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const { hyphens } = this.properties\n\n    // Validate hyphens value in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateHyphens(hyphens)\n    }\n\n    this.applyStyles(context.element, {\n      hyphens,\n      // Add vendor prefixes for better browser support\n      webkitHyphens: hyphens,\n      msHyphens: hyphens,\n    })\n\n    return undefined\n  }\n\n  private validateHyphens(value: string): void {\n    const validValues: HyphensValue[] = ['none', 'manual', 'auto']\n\n    if (!validValues.includes(value as HyphensValue)) {\n      console.warn(\n        `TachUI Hyphens Modifier: Invalid hyphens value \"${value}\". Valid values are: ${validValues.join(', ')}`\n      )\n    }\n\n    if (value === 'auto') {\n      console.info(\n        'TachUI Hyphens Modifier: Automatic hyphenation requires proper lang attribute on the document or element for best results.'\n      )\n    }\n  }\n}\n\n/**\n * Hyphens modifier function\n */\nexport function hyphens(value: HyphensValue): HyphensModifier {\n  return new HyphensModifier({ hyphens: value })\n}\n\n// Note: Background clip modifiers are already available in the appearance package\n// Import them from @tachui/modifiers/appearance for gradient text effects\n"],"names":["LineClampModifier","BaseModifier","__publicField","ModifierPriority","_node","context","lines","styles","lineClamp","WordBreakModifier","wordBreak","value","validValues","OverflowWrapModifier","overflowWrap","HyphensModifier","hyphens"],"mappings":"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"}

package/dist/utility/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}