@tachui/core 0.7.0-alpha1

package/dist/modifiers/effects.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"effects.cjs","sources":["../../src/modifiers/effects.ts"],"sourcesContent":["/**\n * Effects Modifiers - Hover effects and cursor styling\n *\n * Provides comprehensive hover effect system with SwiftUI-style effects\n * and enhanced cursor styling with complete CSS cursor support.\n */\n\nimport type { Signal } from '../reactive/types'\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\n// ============================================================================\n// Cursor System\n// ============================================================================\n\nexport type CSSCursorValue = \n  // Existing values (8 values) - no breaking changes\n  | 'auto' | 'default' | 'pointer' | 'text' | 'wait' | 'help' | 'not-allowed' | 'none'\n  \n  // New additions (7 values) - additive enhancement\n  | 'grab' | 'grabbing' | 'zoom-in' | 'zoom-out' | 'alias' | 'cell' | 'copy'\n  \n  // Custom cursor support\n  | string // CSS cursor syntax: 'url(...), fallback'\n\nexport interface CursorOptions {\n  cursor: CSSCursorValue\n}\n\nexport type ReactiveCursorOptions = ReactiveModifierProps<CursorOptions>\n\nexport class CursorModifier extends BaseModifier<CursorOptions> {\n  readonly type = 'cursor'\n  readonly priority = 10\n\n  constructor(options: ReactiveCursorOptions) {\n    const resolvedOptions: CursorOptions = { cursor: 'auto' }\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    // Validate cursor value in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateCursorValue(this.properties.cursor)\n    }\n\n    this.applyStyles(context.element, { cursor: this.properties.cursor })\n    \n    return undefined\n  }\n\n  private validateCursorValue(value: string): void {\n    const validCursors = [\n      'auto', 'default', 'pointer', 'text', 'wait', 'help', 'not-allowed', 'none',\n      'grab', 'grabbing', 'zoom-in', 'zoom-out', 'alias', 'cell', 'copy'\n    ]\n    \n    if (!validCursors.includes(value) && !value.includes('url(')) {\n      console.warn(`Unknown cursor value: \"${value}\". See documentation for valid cursor values.`)\n    }\n  }\n}\n\n// ============================================================================\n// Hover Effects System\n// ============================================================================\n\nexport type SwiftUIHoverEffect = \n  | 'automatic'     // SwiftUI default - subtle scaling and shadow\n  | 'highlight'     // Subtle background change\n  | 'lift'          // Elevation effect with shadow\n  | 'scale'         // Scale transform on hover\n\nexport interface HoverStyles {\n  backgroundColor?: string\n  color?: string\n  transform?: string\n  opacity?: number\n  boxShadow?: string\n  borderColor?: string\n  filter?: string\n  [key: string]: any  // Allow any CSS property\n}\n\nexport interface HoverOptions {\n  effect?: SwiftUIHoverEffect\n  hoverStyles?: HoverStyles\n  transition?: string | number  \n  isEnabled?: boolean\n}\n\nexport type ReactiveHoverOptions = ReactiveModifierProps<HoverOptions>\n\nexport class HoverModifier extends BaseModifier<HoverOptions> {\n  readonly type = 'hover'\n  readonly priority = 15\n  private static hoverCount = 0\n\n  constructor(options: ReactiveHoverOptions) {\n    const resolvedOptions: HoverOptions = {}\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    // Check if hover effects are enabled\n    const isEnabled = this.properties.isEnabled !== false\n    if (!isEnabled) return undefined\n\n    // Generate unique class for hover states\n    const hoverClass = `tachui-hover-${++HoverModifier.hoverCount}`\n    context.element.classList.add(hoverClass)\n\n    // Add hover styles to stylesheet\n    this.addHoverStyles(hoverClass, this.properties)\n    \n    return undefined\n  }\n\n  private addHoverStyles(className: string, props: HoverOptions): void {\n    const styleSheet = this.getOrCreateStyleSheet()\n    \n    // Base transition styles\n    const transition = this.formatTransition(props.transition)\n    if (transition) {\n      const transitionRule = `.${className} { transition: ${transition}; }`\n      try {\n        styleSheet.insertRule(transitionRule)\n      } catch (e) {\n        console.warn('Failed to add transition rule:', e)\n      }\n    }\n\n    // Hover effect styles\n    const hoverStyles = this.computeHoverStyles(props)\n    if (Object.keys(hoverStyles).length > 0) {\n      // Use !important for critical hover properties that might conflict with inline styles\n      const cssPropertiesWithImportant = Object.entries(hoverStyles)\n        .map(([prop, value]) => {\n          const cssProperty = this.toCSSProperty(prop)\n          // Add !important to properties commonly overridden by inline styles\n          // Note: Exclude 'transform' to prevent conflicts with button press states\n          const needsImportant = ['background-color', 'background', 'border-color', 'color'].includes(cssProperty)\n          return `${cssProperty}: ${value}${needsImportant ? ' !important' : ''}`\n        })\n        .join('; ')\n      \n      const hoverRule = `.${className}:hover { ${cssPropertiesWithImportant} }`\n      \n      try {\n        styleSheet.insertRule(hoverRule)\n      } catch (e) {\n        console.warn('Failed to add hover rule:', e)\n      }\n    }\n  }\n\n  private computeHoverStyles(props: HoverOptions): HoverStyles {\n    const styles: HoverStyles = {}\n\n    // Apply preset SwiftUI effect if specified\n    if (props.effect) {\n      Object.assign(styles, this.getSwiftUIEffectStyles(props.effect))\n    }\n\n    // Apply custom hover styles (these override preset effects)\n    if (props.hoverStyles) {\n      Object.assign(styles, props.hoverStyles)\n    }\n\n    return styles\n  }\n\n  private getSwiftUIEffectStyles(effect: SwiftUIHoverEffect): HoverStyles {\n    switch (effect) {\n      case 'automatic':\n        return {\n          transform: 'scale(1.02)',\n          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'\n        }\n      \n      case 'highlight':\n        return {\n          backgroundColor: 'rgba(0, 0, 0, 0.05)',\n          filter: 'brightness(0.95)'\n        }\n      \n      case 'lift':\n        return {\n          transform: 'translateY(-2px)',\n          boxShadow: '0 8px 24px rgba(0, 0, 0, 0.15)'\n        }\n      \n      case 'scale':\n        return {\n          transform: 'scale(1.05)'\n        }\n      \n      default:\n        return {}\n    }\n  }\n\n  private formatTransition(transition?: string | number): string {\n    if (transition === undefined) {\n      return 'all 200ms ease' // Default transition\n    }\n    \n    if (typeof transition === 'number') {\n      return `all ${transition}ms ease`\n    }\n    \n    return transition\n  }\n\n  private getOrCreateStyleSheet(): CSSStyleSheet {\n    const existingStyle = document.getElementById('tachui-hover-styles')\n    \n    if (existingStyle && existingStyle instanceof HTMLStyleElement) {\n      return existingStyle.sheet!\n    }\n\n    const style = document.createElement('style')\n    style.id = 'tachui-hover-styles'\n    document.head.appendChild(style)\n    return style.sheet!\n  }\n}\n\n// ============================================================================\n// Effects Functions\n// ============================================================================\n\n/**\n * Enhanced cursor modifier with complete CSS cursor support\n *\n * @example\n * ```typescript\n * .cursor('pointer')           // Standard pointer cursor\n * .cursor('grab')              // Grab cursor for draggable elements\n * .cursor('zoom-in')           // Zoom cursor for zoomable content\n * .cursor('url(custom.cur), pointer')  // Custom cursor with fallback\n * ```\n */\nexport function cursor(value: CSSCursorValue): CursorModifier {\n  return new CursorModifier({ cursor: value })\n}\n\n/**\n * SwiftUI-style hover effect modifier with preset effects\n *\n * @example\n * ```typescript\n * .hoverEffect('automatic')     // Default SwiftUI hover with scale + shadow\n * .hoverEffect('lift')          // Elevation effect with shadow\n * .hoverEffect('highlight')     // Subtle background change\n * .hoverEffect('scale')         // Scale transform only\n * ```\n */\nexport function hoverEffect(effect: SwiftUIHoverEffect, isEnabled?: boolean | Signal<boolean>): HoverModifier {\n  return new HoverModifier({ effect, isEnabled })\n}\n\n/**\n * Custom hover styles with optional transition\n *\n * @example\n * ```typescript\n * .hover({ \n *   backgroundColor: '#f0f0f0', \n *   transform: 'scale(1.05)' \n * })\n * .hover({ \n *   opacity: 0.8, \n *   filter: 'blur(2px)' \n * }, 300)\n * ```\n */\nexport function hover(styles: HoverStyles, transition?: string | number): HoverModifier {\n  return new HoverModifier({ hoverStyles: styles, transition })\n}\n\n/**\n * Hover styles with explicit transition duration\n *\n * @example\n * ```typescript\n * .hoverWithTransition({ \n *   transform: 'rotate(5deg)', \n *   color: '#007AFF' \n * }, 250)\n * ```\n */\nexport function hoverWithTransition(styles: HoverStyles, duration: number = 200): HoverModifier {\n  return new HoverModifier({ hoverStyles: styles, transition: duration })\n}\n\n/**\n * Conditional hover effect - can be toggled on/off\n *\n * @example\n * ```typescript\n * .conditionalHover('lift', isInteractive)  // Signal<boolean>\n * .conditionalHover('highlight', false)     // Disabled\n * ```\n */\nexport function conditionalHover(effect: SwiftUIHoverEffect, isEnabled: boolean | Signal<boolean>): HoverModifier {\n  return new HoverModifier({ effect, isEnabled })\n}\n\n// ============================================================================\n// Cursor Presets - Common cursor patterns\n// ============================================================================\n\n/**\n * Interactive cursor - pointer with hover effect\n */\nexport function interactiveCursor(): CursorModifier {\n  return cursor('pointer')\n}\n\n/**\n * Draggable cursor - grab when idle, grabbing when active\n */\nexport function draggableCursor(): CursorModifier {\n  return cursor('grab')\n}\n\n/**\n * Text selection cursor\n */\nexport function textCursor(): CursorModifier {\n  return cursor('text')\n}\n\n/**\n * Disabled/not-allowed cursor\n */\nexport function disabledCursor(): CursorModifier {\n  return cursor('not-allowed')\n}\n\n/**\n * Loading cursor\n */\nexport function loadingCursor(): CursorModifier {\n  return cursor('wait')\n}\n\n/**\n * Help cursor\n */\nexport function helpCursor(): CursorModifier {\n  return cursor('help')\n}\n\n/**\n * Zoom cursor for zoomable content\n */\nexport function zoomCursor(mode: 'in' | 'out' = 'in'): CursorModifier {\n  return cursor(mode === 'in' ? 'zoom-in' : 'zoom-out')\n}\n\n// ============================================================================\n// Hover Effect Presets - Common interaction patterns\n// ============================================================================\n\n/**\n * Button hover effect - lift with shadow\n */\nexport function buttonHover(): HoverModifier {\n  return hoverEffect('lift')\n}\n\n/**\n * Card hover effect - subtle scale and shadow\n */\nexport function cardHover(): HoverModifier {\n  return hoverEffect('automatic')\n}\n\n/**\n * Link hover effect - highlight background\n */\nexport function linkHover(): HoverModifier {\n  return hoverEffect('highlight')\n}\n\n/**\n * Image hover effect - scale on hover\n */\nexport function imageHover(): HoverModifier {\n  return hoverEffect('scale')\n}"],"names":["CursorModifier","BaseModifier","options","resolvedOptions","key","value","__publicField","_node","context","_HoverModifier","hoverClass","className","props","styleSheet","transition","transitionRule","e","hoverStyles","cssPropertiesWithImportant","prop","cssProperty","needsImportant","hoverRule","styles","effect","existingStyle","style","HoverModifier","cursor","hoverEffect","isEnabled","hover","hoverWithTransition","duration","conditionalHover","interactiveCursor","draggableCursor","textCursor","disabledCursor","loadingCursor","helpCursor","zoomCursor","mode","buttonHover","cardHover","linkHover","imageHover"],"mappings":"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"}

package/dist/modifiers/effects.d.ts

@@ -0,0 +1,159 @@
+/**
+ * Effects Modifiers - Hover effects and cursor styling
+ *
+ * Provides comprehensive hover effect system with SwiftUI-style effects
+ * and enhanced cursor styling with complete CSS cursor support.
+ */
+import type { Signal } from '../reactive/types';
+import type { DOMNode } from '../runtime/types';
+import { BaseModifier } from './base';
+import type { ModifierContext, ReactiveModifierProps } from './types';
+export type CSSCursorValue = 'auto' | 'default' | 'pointer' | 'text' | 'wait' | 'help' | 'not-allowed' | 'none' | 'grab' | 'grabbing' | 'zoom-in' | 'zoom-out' | 'alias' | 'cell' | 'copy' | string;
+export interface CursorOptions {
+    cursor: CSSCursorValue;
+}
+export type ReactiveCursorOptions = ReactiveModifierProps<CursorOptions>;
+export declare class CursorModifier extends BaseModifier<CursorOptions> {
+    readonly type = "cursor";
+    readonly priority = 10;
+    constructor(options: ReactiveCursorOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private validateCursorValue;
+}
+export type SwiftUIHoverEffect = 'automatic' | 'highlight' | 'lift' | 'scale';
+export interface HoverStyles {
+    backgroundColor?: string;
+    color?: string;
+    transform?: string;
+    opacity?: number;
+    boxShadow?: string;
+    borderColor?: string;
+    filter?: string;
+    [key: string]: any;
+}
+export interface HoverOptions {
+    effect?: SwiftUIHoverEffect;
+    hoverStyles?: HoverStyles;
+    transition?: string | number;
+    isEnabled?: boolean;
+}
+export type ReactiveHoverOptions = ReactiveModifierProps<HoverOptions>;
+export declare class HoverModifier extends BaseModifier<HoverOptions> {
+    readonly type = "hover";
+    readonly priority = 15;
+    private static hoverCount;
+    constructor(options: ReactiveHoverOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private addHoverStyles;
+    private computeHoverStyles;
+    private getSwiftUIEffectStyles;
+    private formatTransition;
+    private getOrCreateStyleSheet;
+}
+/**
+ * Enhanced cursor modifier with complete CSS cursor support
+ *
+ * @example
+ * ```typescript
+ * .cursor('pointer')           // Standard pointer cursor
+ * .cursor('grab')              // Grab cursor for draggable elements
+ * .cursor('zoom-in')           // Zoom cursor for zoomable content
+ * .cursor('url(custom.cur), pointer')  // Custom cursor with fallback
+ * ```
+ */
+export declare function cursor(value: CSSCursorValue): CursorModifier;
+/**
+ * SwiftUI-style hover effect modifier with preset effects
+ *
+ * @example
+ * ```typescript
+ * .hoverEffect('automatic')     // Default SwiftUI hover with scale + shadow
+ * .hoverEffect('lift')          // Elevation effect with shadow
+ * .hoverEffect('highlight')     // Subtle background change
+ * .hoverEffect('scale')         // Scale transform only
+ * ```
+ */
+export declare function hoverEffect(effect: SwiftUIHoverEffect, isEnabled?: boolean | Signal<boolean>): HoverModifier;
+/**
+ * Custom hover styles with optional transition
+ *
+ * @example
+ * ```typescript
+ * .hover({
+ *   backgroundColor: '#f0f0f0',
+ *   transform: 'scale(1.05)'
+ * })
+ * .hover({
+ *   opacity: 0.8,
+ *   filter: 'blur(2px)'
+ * }, 300)
+ * ```
+ */
+export declare function hover(styles: HoverStyles, transition?: string | number): HoverModifier;
+/**
+ * Hover styles with explicit transition duration
+ *
+ * @example
+ * ```typescript
+ * .hoverWithTransition({
+ *   transform: 'rotate(5deg)',
+ *   color: '#007AFF'
+ * }, 250)
+ * ```
+ */
+export declare function hoverWithTransition(styles: HoverStyles, duration?: number): HoverModifier;
+/**
+ * Conditional hover effect - can be toggled on/off
+ *
+ * @example
+ * ```typescript
+ * .conditionalHover('lift', isInteractive)  // Signal<boolean>
+ * .conditionalHover('highlight', false)     // Disabled
+ * ```
+ */
+export declare function conditionalHover(effect: SwiftUIHoverEffect, isEnabled: boolean | Signal<boolean>): HoverModifier;
+/**
+ * Interactive cursor - pointer with hover effect
+ */
+export declare function interactiveCursor(): CursorModifier;
+/**
+ * Draggable cursor - grab when idle, grabbing when active
+ */
+export declare function draggableCursor(): CursorModifier;
+/**
+ * Text selection cursor
+ */
+export declare function textCursor(): CursorModifier;
+/**
+ * Disabled/not-allowed cursor
+ */
+export declare function disabledCursor(): CursorModifier;
+/**
+ * Loading cursor
+ */
+export declare function loadingCursor(): CursorModifier;
+/**
+ * Help cursor
+ */
+export declare function helpCursor(): CursorModifier;
+/**
+ * Zoom cursor for zoomable content
+ */
+export declare function zoomCursor(mode?: 'in' | 'out'): CursorModifier;
+/**
+ * Button hover effect - lift with shadow
+ */
+export declare function buttonHover(): HoverModifier;
+/**
+ * Card hover effect - subtle scale and shadow
+ */
+export declare function cardHover(): HoverModifier;
+/**
+ * Link hover effect - highlight background
+ */
+export declare function linkHover(): HoverModifier;
+/**
+ * Image hover effect - scale on hover
+ */
+export declare function imageHover(): HoverModifier;
+//# sourceMappingURL=effects.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"effects.d.ts","sourceRoot":"","sources":["../../src/modifiers/effects.ts"],"names":[],"mappings":"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"}

package/dist/modifiers/effects.js

@@ -0,0 +1,178 @@
+import { BaseModifier as p } from "./base.js";
+var g = Object.defineProperty, S = (r, e, t) => e in r ? g(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, i = (r, e, t) => S(r, typeof e != "symbol" ? e + "" : e, t);
+class C extends p {
+  constructor(e) {
+    const t = { cursor: "auto" };
+    for (const [n, o] of Object.entries(e))
+      typeof o == "function" && "peek" in o ? t[n] = o.peek() : t[n] = o;
+    super(t), i(this, "type", "cursor"), i(this, "priority", 10);
+  }
+  apply(e, t) {
+    t.element && (process.env.NODE_ENV === "development" && this.validateCursorValue(this.properties.cursor), this.applyStyles(t.element, { cursor: this.properties.cursor }));
+  }
+  validateCursorValue(e) {
+    ![
+      "auto",
+      "default",
+      "pointer",
+      "text",
+      "wait",
+      "help",
+      "not-allowed",
+      "none",
+      "grab",
+      "grabbing",
+      "zoom-in",
+      "zoom-out",
+      "alias",
+      "cell",
+      "copy"
+    ].includes(e) && !e.includes("url(") && console.warn(`Unknown cursor value: "${e}". See documentation for valid cursor values.`);
+  }
+}
+const v = class y extends p {
+  constructor(e) {
+    const t = {};
+    for (const [n, o] of Object.entries(e))
+      typeof o == "function" && "peek" in o ? t[n] = o.peek() : t[n] = o;
+    super(t), i(this, "type", "hover"), i(this, "priority", 15);
+  }
+  apply(e, t) {
+    if (!t.element || !(this.properties.isEnabled !== !1)) return;
+    const o = `tachui-hover-${++y.hoverCount}`;
+    t.element.classList.add(o), this.addHoverStyles(o, this.properties);
+  }
+  addHoverStyles(e, t) {
+    const n = this.getOrCreateStyleSheet(), o = this.formatTransition(t.transition);
+    if (o) {
+      const l = `.${e} { transition: ${o}; }`;
+      try {
+        n.insertRule(l);
+      } catch (c) {
+        console.warn("Failed to add transition rule:", c);
+      }
+    }
+    const d = this.computeHoverStyles(t);
+    if (Object.keys(d).length > 0) {
+      const l = Object.entries(d).map(([f, m]) => {
+        const h = this.toCSSProperty(f), b = ["background-color", "background", "border-color", "color"].includes(h);
+        return `${h}: ${m}${b ? " !important" : ""}`;
+      }).join("; "), c = `.${e}:hover { ${l} }`;
+      try {
+        n.insertRule(c);
+      } catch (f) {
+        console.warn("Failed to add hover rule:", f);
+      }
+    }
+  }
+  computeHoverStyles(e) {
+    const t = {};
+    return e.effect && Object.assign(t, this.getSwiftUIEffectStyles(e.effect)), e.hoverStyles && Object.assign(t, e.hoverStyles), t;
+  }
+  getSwiftUIEffectStyles(e) {
+    switch (e) {
+      case "automatic":
+        return {
+          transform: "scale(1.02)",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
+        };
+      case "highlight":
+        return {
+          backgroundColor: "rgba(0, 0, 0, 0.05)",
+          filter: "brightness(0.95)"
+        };
+      case "lift":
+        return {
+          transform: "translateY(-2px)",
+          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.15)"
+        };
+      case "scale":
+        return {
+          transform: "scale(1.05)"
+        };
+      default:
+        return {};
+    }
+  }
+  formatTransition(e) {
+    return e === void 0 ? "all 200ms ease" : typeof e == "number" ? `all ${e}ms ease` : e;
+  }
+  getOrCreateStyleSheet() {
+    const e = document.getElementById("tachui-hover-styles");
+    if (e && e instanceof HTMLStyleElement)
+      return e.sheet;
+    const t = document.createElement("style");
+    return t.id = "tachui-hover-styles", document.head.appendChild(t), t.sheet;
+  }
+};
+i(v, "hoverCount", 0);
+let u = v;
+function s(r) {
+  return new C({ cursor: r });
+}
+function a(r, e) {
+  return new u({ effect: r, isEnabled: e });
+}
+function H(r, e) {
+  return new u({ hoverStyles: r, transition: e });
+}
+function x(r, e = 200) {
+  return new u({ hoverStyles: r, transition: e });
+}
+function O(r, e) {
+  return new u({ effect: r, isEnabled: e });
+}
+function E() {
+  return s("pointer");
+}
+function _() {
+  return s("grab");
+}
+function $() {
+  return s("text");
+}
+function k() {
+  return s("not-allowed");
+}
+function j() {
+  return s("wait");
+}
+function M() {
+  return s("help");
+}
+function P(r = "in") {
+  return s(r === "in" ? "zoom-in" : "zoom-out");
+}
+function z() {
+  return a("lift");
+}
+function I() {
+  return a("automatic");
+}
+function R() {
+  return a("highlight");
+}
+function T() {
+  return a("scale");
+}
+export {
+  C as CursorModifier,
+  u as HoverModifier,
+  z as buttonHover,
+  I as cardHover,
+  O as conditionalHover,
+  s as cursor,
+  k as disabledCursor,
+  _ as draggableCursor,
+  M as helpCursor,
+  H as hover,
+  a as hoverEffect,
+  x as hoverWithTransition,
+  T as imageHover,
+  E as interactiveCursor,
+  R as linkHover,
+  j as loadingCursor,
+  $ as textCursor,
+  P as zoomCursor
+};
+//# sourceMappingURL=effects.js.map

package/dist/modifiers/effects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"effects.js","sources":["../../src/modifiers/effects.ts"],"sourcesContent":["/**\n * Effects Modifiers - Hover effects and cursor styling\n *\n * Provides comprehensive hover effect system with SwiftUI-style effects\n * and enhanced cursor styling with complete CSS cursor support.\n */\n\nimport type { Signal } from '../reactive/types'\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\n// ============================================================================\n// Cursor System\n// ============================================================================\n\nexport type CSSCursorValue = \n  // Existing values (8 values) - no breaking changes\n  | 'auto' | 'default' | 'pointer' | 'text' | 'wait' | 'help' | 'not-allowed' | 'none'\n  \n  // New additions (7 values) - additive enhancement\n  | 'grab' | 'grabbing' | 'zoom-in' | 'zoom-out' | 'alias' | 'cell' | 'copy'\n  \n  // Custom cursor support\n  | string // CSS cursor syntax: 'url(...), fallback'\n\nexport interface CursorOptions {\n  cursor: CSSCursorValue\n}\n\nexport type ReactiveCursorOptions = ReactiveModifierProps<CursorOptions>\n\nexport class CursorModifier extends BaseModifier<CursorOptions> {\n  readonly type = 'cursor'\n  readonly priority = 10\n\n  constructor(options: ReactiveCursorOptions) {\n    const resolvedOptions: CursorOptions = { cursor: 'auto' }\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    // Validate cursor value in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateCursorValue(this.properties.cursor)\n    }\n\n    this.applyStyles(context.element, { cursor: this.properties.cursor })\n    \n    return undefined\n  }\n\n  private validateCursorValue(value: string): void {\n    const validCursors = [\n      'auto', 'default', 'pointer', 'text', 'wait', 'help', 'not-allowed', 'none',\n      'grab', 'grabbing', 'zoom-in', 'zoom-out', 'alias', 'cell', 'copy'\n    ]\n    \n    if (!validCursors.includes(value) && !value.includes('url(')) {\n      console.warn(`Unknown cursor value: \"${value}\". See documentation for valid cursor values.`)\n    }\n  }\n}\n\n// ============================================================================\n// Hover Effects System\n// ============================================================================\n\nexport type SwiftUIHoverEffect = \n  | 'automatic'     // SwiftUI default - subtle scaling and shadow\n  | 'highlight'     // Subtle background change\n  | 'lift'          // Elevation effect with shadow\n  | 'scale'         // Scale transform on hover\n\nexport interface HoverStyles {\n  backgroundColor?: string\n  color?: string\n  transform?: string\n  opacity?: number\n  boxShadow?: string\n  borderColor?: string\n  filter?: string\n  [key: string]: any  // Allow any CSS property\n}\n\nexport interface HoverOptions {\n  effect?: SwiftUIHoverEffect\n  hoverStyles?: HoverStyles\n  transition?: string | number  \n  isEnabled?: boolean\n}\n\nexport type ReactiveHoverOptions = ReactiveModifierProps<HoverOptions>\n\nexport class HoverModifier extends BaseModifier<HoverOptions> {\n  readonly type = 'hover'\n  readonly priority = 15\n  private static hoverCount = 0\n\n  constructor(options: ReactiveHoverOptions) {\n    const resolvedOptions: HoverOptions = {}\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    // Check if hover effects are enabled\n    const isEnabled = this.properties.isEnabled !== false\n    if (!isEnabled) return undefined\n\n    // Generate unique class for hover states\n    const hoverClass = `tachui-hover-${++HoverModifier.hoverCount}`\n    context.element.classList.add(hoverClass)\n\n    // Add hover styles to stylesheet\n    this.addHoverStyles(hoverClass, this.properties)\n    \n    return undefined\n  }\n\n  private addHoverStyles(className: string, props: HoverOptions): void {\n    const styleSheet = this.getOrCreateStyleSheet()\n    \n    // Base transition styles\n    const transition = this.formatTransition(props.transition)\n    if (transition) {\n      const transitionRule = `.${className} { transition: ${transition}; }`\n      try {\n        styleSheet.insertRule(transitionRule)\n      } catch (e) {\n        console.warn('Failed to add transition rule:', e)\n      }\n    }\n\n    // Hover effect styles\n    const hoverStyles = this.computeHoverStyles(props)\n    if (Object.keys(hoverStyles).length > 0) {\n      // Use !important for critical hover properties that might conflict with inline styles\n      const cssPropertiesWithImportant = Object.entries(hoverStyles)\n        .map(([prop, value]) => {\n          const cssProperty = this.toCSSProperty(prop)\n          // Add !important to properties commonly overridden by inline styles\n          // Note: Exclude 'transform' to prevent conflicts with button press states\n          const needsImportant = ['background-color', 'background', 'border-color', 'color'].includes(cssProperty)\n          return `${cssProperty}: ${value}${needsImportant ? ' !important' : ''}`\n        })\n        .join('; ')\n      \n      const hoverRule = `.${className}:hover { ${cssPropertiesWithImportant} }`\n      \n      try {\n        styleSheet.insertRule(hoverRule)\n      } catch (e) {\n        console.warn('Failed to add hover rule:', e)\n      }\n    }\n  }\n\n  private computeHoverStyles(props: HoverOptions): HoverStyles {\n    const styles: HoverStyles = {}\n\n    // Apply preset SwiftUI effect if specified\n    if (props.effect) {\n      Object.assign(styles, this.getSwiftUIEffectStyles(props.effect))\n    }\n\n    // Apply custom hover styles (these override preset effects)\n    if (props.hoverStyles) {\n      Object.assign(styles, props.hoverStyles)\n    }\n\n    return styles\n  }\n\n  private getSwiftUIEffectStyles(effect: SwiftUIHoverEffect): HoverStyles {\n    switch (effect) {\n      case 'automatic':\n        return {\n          transform: 'scale(1.02)',\n          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'\n        }\n      \n      case 'highlight':\n        return {\n          backgroundColor: 'rgba(0, 0, 0, 0.05)',\n          filter: 'brightness(0.95)'\n        }\n      \n      case 'lift':\n        return {\n          transform: 'translateY(-2px)',\n          boxShadow: '0 8px 24px rgba(0, 0, 0, 0.15)'\n        }\n      \n      case 'scale':\n        return {\n          transform: 'scale(1.05)'\n        }\n      \n      default:\n        return {}\n    }\n  }\n\n  private formatTransition(transition?: string | number): string {\n    if (transition === undefined) {\n      return 'all 200ms ease' // Default transition\n    }\n    \n    if (typeof transition === 'number') {\n      return `all ${transition}ms ease`\n    }\n    \n    return transition\n  }\n\n  private getOrCreateStyleSheet(): CSSStyleSheet {\n    const existingStyle = document.getElementById('tachui-hover-styles')\n    \n    if (existingStyle && existingStyle instanceof HTMLStyleElement) {\n      return existingStyle.sheet!\n    }\n\n    const style = document.createElement('style')\n    style.id = 'tachui-hover-styles'\n    document.head.appendChild(style)\n    return style.sheet!\n  }\n}\n\n// ============================================================================\n// Effects Functions\n// ============================================================================\n\n/**\n * Enhanced cursor modifier with complete CSS cursor support\n *\n * @example\n * ```typescript\n * .cursor('pointer')           // Standard pointer cursor\n * .cursor('grab')              // Grab cursor for draggable elements\n * .cursor('zoom-in')           // Zoom cursor for zoomable content\n * .cursor('url(custom.cur), pointer')  // Custom cursor with fallback\n * ```\n */\nexport function cursor(value: CSSCursorValue): CursorModifier {\n  return new CursorModifier({ cursor: value })\n}\n\n/**\n * SwiftUI-style hover effect modifier with preset effects\n *\n * @example\n * ```typescript\n * .hoverEffect('automatic')     // Default SwiftUI hover with scale + shadow\n * .hoverEffect('lift')          // Elevation effect with shadow\n * .hoverEffect('highlight')     // Subtle background change\n * .hoverEffect('scale')         // Scale transform only\n * ```\n */\nexport function hoverEffect(effect: SwiftUIHoverEffect, isEnabled?: boolean | Signal<boolean>): HoverModifier {\n  return new HoverModifier({ effect, isEnabled })\n}\n\n/**\n * Custom hover styles with optional transition\n *\n * @example\n * ```typescript\n * .hover({ \n *   backgroundColor: '#f0f0f0', \n *   transform: 'scale(1.05)' \n * })\n * .hover({ \n *   opacity: 0.8, \n *   filter: 'blur(2px)' \n * }, 300)\n * ```\n */\nexport function hover(styles: HoverStyles, transition?: string | number): HoverModifier {\n  return new HoverModifier({ hoverStyles: styles, transition })\n}\n\n/**\n * Hover styles with explicit transition duration\n *\n * @example\n * ```typescript\n * .hoverWithTransition({ \n *   transform: 'rotate(5deg)', \n *   color: '#007AFF' \n * }, 250)\n * ```\n */\nexport function hoverWithTransition(styles: HoverStyles, duration: number = 200): HoverModifier {\n  return new HoverModifier({ hoverStyles: styles, transition: duration })\n}\n\n/**\n * Conditional hover effect - can be toggled on/off\n *\n * @example\n * ```typescript\n * .conditionalHover('lift', isInteractive)  // Signal<boolean>\n * .conditionalHover('highlight', false)     // Disabled\n * ```\n */\nexport function conditionalHover(effect: SwiftUIHoverEffect, isEnabled: boolean | Signal<boolean>): HoverModifier {\n  return new HoverModifier({ effect, isEnabled })\n}\n\n// ============================================================================\n// Cursor Presets - Common cursor patterns\n// ============================================================================\n\n/**\n * Interactive cursor - pointer with hover effect\n */\nexport function interactiveCursor(): CursorModifier {\n  return cursor('pointer')\n}\n\n/**\n * Draggable cursor - grab when idle, grabbing when active\n */\nexport function draggableCursor(): CursorModifier {\n  return cursor('grab')\n}\n\n/**\n * Text selection cursor\n */\nexport function textCursor(): CursorModifier {\n  return cursor('text')\n}\n\n/**\n * Disabled/not-allowed cursor\n */\nexport function disabledCursor(): CursorModifier {\n  return cursor('not-allowed')\n}\n\n/**\n * Loading cursor\n */\nexport function loadingCursor(): CursorModifier {\n  return cursor('wait')\n}\n\n/**\n * Help cursor\n */\nexport function helpCursor(): CursorModifier {\n  return cursor('help')\n}\n\n/**\n * Zoom cursor for zoomable content\n */\nexport function zoomCursor(mode: 'in' | 'out' = 'in'): CursorModifier {\n  return cursor(mode === 'in' ? 'zoom-in' : 'zoom-out')\n}\n\n// ============================================================================\n// Hover Effect Presets - Common interaction patterns\n// ============================================================================\n\n/**\n * Button hover effect - lift with shadow\n */\nexport function buttonHover(): HoverModifier {\n  return hoverEffect('lift')\n}\n\n/**\n * Card hover effect - subtle scale and shadow\n */\nexport function cardHover(): HoverModifier {\n  return hoverEffect('automatic')\n}\n\n/**\n * Link hover effect - highlight background\n */\nexport function linkHover(): HoverModifier {\n  return hoverEffect('highlight')\n}\n\n/**\n * Image hover effect - scale on hover\n */\nexport function imageHover(): HoverModifier {\n  return hoverEffect('scale')\n}"],"names":["CursorModifier","BaseModifier","options","resolvedOptions","key","value","__publicField","_node","context","_HoverModifier","hoverClass","className","props","styleSheet","transition","transitionRule","e","hoverStyles","cssPropertiesWithImportant","prop","cssProperty","needsImportant","hoverRule","styles","effect","existingStyle","style","HoverModifier","cursor","hoverEffect","isEnabled","hover","hoverWithTransition","duration","conditionalHover","interactiveCursor","draggableCursor","textCursor","disabledCursor","loadingCursor","helpCursor","zoomCursor","mode","buttonHover","cardHover","linkHover","imageHover"],"mappings":"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"}

package/dist/modifiers/elements.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("./base.cjs");var b=Object.defineProperty,S=(n,t,e)=>t in n?b(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e,u=(n,t,e)=>S(n,typeof t!="symbol"?t+"":t,e);const f=class a extends g.BaseModifier{constructor(t){const e={};for(const[o,r]of Object.entries(t))typeof r=="function"&&"peek"in r?e[o]=r.peek():e[o]=r;super(e),u(this,"type","pseudoElement"),u(this,"priority",50)}apply(t,e){if(!e.element)return;const o=`tachui-pseudo-${++a.elementCount}`;e.element.classList.add(o),this.properties.before&&this.addPseudoElementRule(o,"before",this.properties.before),this.properties.after&&this.addPseudoElementRule(o,"after",this.properties.after)}addPseudoElementRule(t,e,o){const r=this.getOrCreateStyleSheet(),c=this.generatePseudoElementCSS(t,e,o);try{r.insertRule(c)}catch(d){console.warn("Failed to add pseudo-element rule:",d)}}generatePseudoElementCSS(t,e,o){const r=`.${t}::${e}`,c=[];return o.content||(o.content='""'),Object.entries(o).forEach(([d,p])=>{if(p!==void 0){const h=this.toCSSProperty(d),m=this.formatCSSValue(d,p);c.push(`${h}: ${m}`)}}),`${r} { ${c.join("; ")} }`}formatCSSValue(t,e){return t==="content"?typeof e=="string"&&!e.startsWith('"')&&!e.startsWith("'")?`"${e}"`:e:typeof e=="number"?["opacity","z-index","line-height","flex-grow","flex-shrink","order","column-count","font-weight"].includes(this.toCSSProperty(t))?String(e):`${e}px`:String(e)}getOrCreateStyleSheet(){const t=document.getElementById(a.styleSheetId);if(t&&t instanceof HTMLStyleElement)return t.sheet;const e=document.createElement("style");return e.id=a.styleSheetId,document.head.appendChild(e),e.sheet}};u(f,"styleSheetId","tachui-pseudo-elements");u(f,"elementCount",0);let s=f;function i(n){return new s({before:n})}function l(n){return new s({after:n})}function y(n){return new s(n)}function C(n,t={}){return i({content:n,display:"inline-block",...t})}function P(n,t={}){return l({content:n,display:"inline-block",...t})}function w(n="#ddd",t=1,e=16){return i({content:"",display:"inline-block",width:e,height:t,backgroundColor:n,marginRight:8,verticalAlign:"middle"})}function E(n="#ddd",t=1,e=16){return l({content:"",display:"inline-block",width:e,height:t,backgroundColor:n,marginLeft:8,verticalAlign:"middle"})}function x(n='"',t='"'){return new s({before:{content:n,fontSize:"1.2em",color:"#666",marginRight:4},after:{content:t,fontSize:"1.2em",color:"#666",marginLeft:4}})}function R(n="currentColor",t=1,e=1){return l({content:"",position:"absolute",bottom:0,left:0,right:0,height:t,backgroundColor:n,opacity:e})}function $(n="#ff3b30",t=6,e=""){return l({content:e,position:"absolute",top:-2,right:-2,width:e?"auto":t,height:t,minWidth:t,backgroundColor:n,borderRadius:"50%",fontSize:10,color:"white",textAlign:"center",lineHeight:e?t/10:1,padding:e?"2px 4px":0,display:"flex",alignItems:"center",justifyContent:"center"})}function k(n,t="top",e="#333",o="white"){return i({content:n,position:"absolute",backgroundColor:e,color:o,padding:"4px 8px",borderRadius:4,fontSize:12,whiteSpace:"nowrap",zIndex:1e3,opacity:0,pointerEvents:"none",transition:"opacity 0.2s ease",...{top:{bottom:"100%",left:"50%",transform:"translateX(-50%)",marginBottom:5},bottom:{top:"100%",left:"50%",transform:"translateX(-50%)",marginTop:5},left:{right:"100%",top:"50%",transform:"translateY(-50%)",marginRight:5},right:{left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:5}}[t]})}function A(n,t="#ff3b30",e="white"){return i({content:n,position:"absolute",top:8,right:-8,backgroundColor:t,color:e,padding:"2px 12px",fontSize:11,fontWeight:"bold",textTransform:"uppercase",transform:"rotate(45deg)",transformOrigin:"center",zIndex:10})}function O(n=20,t="#007AFF",e=2){return i({content:"",display:"inline-block",width:n,height:n,border:`${e}px solid transparent`,borderTop:`${e}px solid ${t}`,borderRadius:"50%",animation:"spin 1s linear infinite"})}exports.PseudoElementModifier=s;exports.after=l;exports.badge=$;exports.before=i;exports.cornerRibbon=A;exports.iconAfter=P;exports.iconBefore=C;exports.lineAfter=E;exports.lineBefore=w;exports.pseudoElements=y;exports.quotes=x;exports.spinner=O;exports.tooltip=k;exports.underline=R;
+//# sourceMappingURL=elements.cjs.map

package/dist/modifiers/elements.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.cjs","sources":["../../src/modifiers/elements.ts"],"sourcesContent":["/**\n * Pseudo-element Modifiers - ::before and ::after styling\n *\n * Provides comprehensive pseudo-element support for ::before and ::after\n * with dynamic stylesheet generation and flexible styling options.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\nexport interface PseudoElementStyles {\n  content?: string                    // Content for pseudo-element (required)\n  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'\n  top?: number | string\n  right?: number | string\n  bottom?: number | string\n  left?: number | string\n  width?: number | string\n  height?: number | string\n  backgroundColor?: string\n  color?: string\n  fontSize?: number | string\n  fontWeight?: string | number\n  fontFamily?: string\n  lineHeight?: number | string\n  textAlign?: 'left' | 'center' | 'right' | 'justify'\n  margin?: number | string\n  marginTop?: number | string\n  marginRight?: number | string\n  marginBottom?: number | string\n  marginLeft?: number | string\n  padding?: number | string\n  paddingTop?: number | string\n  paddingRight?: number | string\n  paddingBottom?: number | string\n  paddingLeft?: number | string\n  border?: string\n  borderTop?: string\n  borderRight?: string\n  borderBottom?: string\n  borderLeft?: string\n  borderRadius?: number | string\n  borderWidth?: number | string\n  borderStyle?: string\n  borderColor?: string\n  boxShadow?: string\n  textShadow?: string\n  opacity?: number\n  transform?: string\n  transformOrigin?: string\n  zIndex?: number\n  display?: string\n  flexDirection?: string\n  flexWrap?: string\n  alignItems?: string\n  justifyContent?: string\n  alignSelf?: string\n  flex?: string\n  flexGrow?: number\n  flexShrink?: number\n  flexBasis?: string\n  order?: number\n  overflow?: 'visible' | 'hidden' | 'scroll' | 'auto'\n  overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto'\n  overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto'\n  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line'\n  textOverflow?: 'clip' | 'ellipsis'\n  cursor?: string\n  pointerEvents?: 'auto' | 'none'\n  visibility?: 'visible' | 'hidden'\n  backgroundImage?: string\n  backgroundSize?: string\n  backgroundPosition?: string\n  backgroundRepeat?: string\n  filter?: string\n  backdropFilter?: string\n  transition?: string\n  animation?: string\n  [key: string]: any  // Allow any CSS property\n}\n\nexport interface PseudoElementOptions {\n  before?: PseudoElementStyles\n  after?: PseudoElementStyles\n}\n\nexport type ReactivePseudoElementOptions = ReactiveModifierProps<PseudoElementOptions>\n\nexport class PseudoElementModifier extends BaseModifier<PseudoElementOptions> {\n  readonly type = 'pseudoElement'\n  readonly priority = 50  // High priority to ensure pseudo-elements are applied last\n  private static styleSheetId = 'tachui-pseudo-elements'\n  private static elementCount = 0\n\n  constructor(options: ReactivePseudoElementOptions) {\n    const resolvedOptions: PseudoElementOptions = {}\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    // Generate unique class for pseudo-element styles\n    const pseudoClass = `tachui-pseudo-${++PseudoElementModifier.elementCount}`\n    context.element.classList.add(pseudoClass)\n\n    // Add pseudo-element styles to stylesheet\n    if (this.properties.before) {\n      this.addPseudoElementRule(pseudoClass, 'before', this.properties.before)\n    }\n\n    if (this.properties.after) {\n      this.addPseudoElementRule(pseudoClass, 'after', this.properties.after)\n    }\n    \n    return undefined\n  }\n\n  private addPseudoElementRule(\n    className: string, \n    pseudoType: 'before' | 'after', \n    styles: PseudoElementStyles\n  ): void {\n    const styleSheet = this.getOrCreateStyleSheet()\n    const cssRule = this.generatePseudoElementCSS(className, pseudoType, styles)\n    \n    try {\n      styleSheet.insertRule(cssRule)\n    } catch (e) {\n      console.warn('Failed to add pseudo-element rule:', e)\n    }\n  }\n\n  private generatePseudoElementCSS(\n    className: string, \n    pseudoType: 'before' | 'after', \n    styles: PseudoElementStyles\n  ): string {\n    const selector = `.${className}::${pseudoType}`\n    const cssProperties: string[] = []\n\n    // Ensure content property is set (required for pseudo-elements)\n    if (!styles.content) {\n      styles.content = '\"\"'\n    }\n\n    Object.entries(styles).forEach(([prop, value]) => {\n      if (value !== undefined) {\n        const cssProperty = this.toCSSProperty(prop)\n        const cssValue = this.formatCSSValue(prop, value)\n        cssProperties.push(`${cssProperty}: ${cssValue}`)\n      }\n    })\n\n    return `${selector} { ${cssProperties.join('; ')} }`\n  }\n\n  private formatCSSValue(property: string, value: any): string {\n    // Handle special cases for pseudo-element properties\n    if (property === 'content') {\n      // Ensure content is properly quoted if it's not already\n      if (typeof value === 'string' && !value.startsWith('\"') && !value.startsWith(\"'\")) {\n        return `\"${value}\"`\n      }\n      return value\n    }\n\n    if (typeof value === 'number') {\n      // Properties that should be unitless\n      const unitlessProperties = [\n        'opacity', 'z-index', 'line-height', 'flex-grow', 'flex-shrink', \n        'order', 'column-count', 'font-weight'\n      ]\n      \n      if (unitlessProperties.includes(this.toCSSProperty(property))) {\n        return String(value)\n      }\n      \n      return `${value}px`\n    }\n\n    return String(value)\n  }\n\n  private getOrCreateStyleSheet(): CSSStyleSheet {\n    const existingStyle = document.getElementById(PseudoElementModifier.styleSheetId)\n    \n    if (existingStyle && existingStyle instanceof HTMLStyleElement) {\n      return existingStyle.sheet!\n    }\n\n    const style = document.createElement('style')\n    style.id = PseudoElementModifier.styleSheetId\n    document.head.appendChild(style)\n    return style.sheet!\n  }\n}\n\n// ============================================================================\n// Pseudo-element Functions\n// ============================================================================\n\n/**\n * ::before pseudo-element modifier\n *\n * @example\n * ```typescript\n * .before({\n *   content: '★',\n *   position: 'absolute',\n *   left: -20,\n *   color: '#ffd700'\n * })\n * ```\n */\nexport function before(styles: PseudoElementStyles): PseudoElementModifier {\n  return new PseudoElementModifier({ before: styles })\n}\n\n/**\n * ::after pseudo-element modifier\n *\n * @example\n * ```typescript\n * .after({\n *   content: '',\n *   position: 'absolute',\n *   bottom: 0,\n *   left: 0,\n *   right: 0,\n *   height: 2,\n *   backgroundColor: '#007AFF'\n * })\n * ```\n */\nexport function after(styles: PseudoElementStyles): PseudoElementModifier {\n  return new PseudoElementModifier({ after: styles })\n}\n\n/**\n * Both ::before and ::after pseudo-elements\n *\n * @example\n * ```typescript\n * .pseudoElements({\n *   before: { content: '\"', fontSize: 24, color: '#666' },\n *   after: { content: '\"', fontSize: 24, color: '#666' }\n * })\n * ```\n */\nexport function pseudoElements(options: PseudoElementOptions): PseudoElementModifier {\n  return new PseudoElementModifier(options)\n}\n\n// ============================================================================\n// Common Pseudo-element Patterns\n// ============================================================================\n\n/**\n * Icon before content using a Unicode character\n *\n * @example\n * ```typescript\n * .iconBefore('★', { color: '#ffd700', marginRight: 8 })\n * .iconBefore('→', { color: '#007AFF' })\n * ```\n */\nexport function iconBefore(\n  icon: string, \n  styles: Omit<PseudoElementStyles, 'content'> = {}\n): PseudoElementModifier {\n  return before({\n    content: icon,\n    display: 'inline-block',\n    ...styles\n  })\n}\n\n/**\n * Icon after content using a Unicode character\n *\n * @example\n * ```typescript\n * .iconAfter('→', { color: '#007AFF', marginLeft: 8 })\n * .iconAfter('✓', { color: '#34c759' })\n * ```\n */\nexport function iconAfter(\n  icon: string, \n  styles: Omit<PseudoElementStyles, 'content'> = {}\n): PseudoElementModifier {\n  return after({\n    content: icon,\n    display: 'inline-block',\n    ...styles\n  })\n}\n\n/**\n * Decorative line before content\n *\n * @example\n * ```typescript\n * .lineBefore()                    // Default line\n * .lineBefore('#007AFF', 2, 20)    // Blue line, 2px thick, 20px long\n * ```\n */\nexport function lineBefore(\n  color: string = '#ddd',\n  thickness: number = 1,\n  length: number = 16\n): PseudoElementModifier {\n  return before({\n    content: '',\n    display: 'inline-block',\n    width: length,\n    height: thickness,\n    backgroundColor: color,\n    marginRight: 8,\n    verticalAlign: 'middle'\n  })\n}\n\n/**\n * Decorative line after content\n *\n * @example\n * ```typescript\n * .lineAfter()                     // Default line\n * .lineAfter('#007AFF', 2, 20)     // Blue line, 2px thick, 20px long\n * ```\n */\nexport function lineAfter(\n  color: string = '#ddd',\n  thickness: number = 1,\n  length: number = 16\n): PseudoElementModifier {\n  return after({\n    content: '',\n    display: 'inline-block',\n    width: length,\n    height: thickness,\n    backgroundColor: color,\n    marginLeft: 8,\n    verticalAlign: 'middle'\n  })\n}\n\n/**\n * Quote marks around content\n *\n * @example\n * ```typescript\n * .quotes()                        // Default quotes (\" \")\n * .quotes('«', '»')               // Custom quote characters\n * ```\n */\nexport function quotes(\n  openQuote: string = '\"',\n  closeQuote: string = '\"'\n): PseudoElementModifier {\n  return new PseudoElementModifier({\n    before: {\n      content: openQuote,\n      fontSize: '1.2em',\n      color: '#666',\n      marginRight: 4\n    },\n    after: {\n      content: closeQuote,\n      fontSize: '1.2em',\n      color: '#666',\n      marginLeft: 4\n    }\n  })\n}\n\n/**\n * Underline decoration using ::after\n *\n * @example\n * ```typescript\n * .underline()                     // Default underline\n * .underline('#007AFF', 2, 0.2)    // Blue underline, 2px thick, 20% opacity\n * ```\n */\nexport function underline(\n  color: string = 'currentColor',\n  thickness: number = 1,\n  opacity: number = 1\n): PseudoElementModifier {\n  return after({\n    content: '',\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    height: thickness,\n    backgroundColor: color,\n    opacity\n  })\n}\n\n/**\n * Badge or notification dot using ::after\n *\n * @example\n * ```typescript\n * .badge()                         // Default red dot\n * .badge('#007AFF', 8, '2')        // Blue badge with \"2\" text\n * ```\n */\nexport function badge(\n  color: string = '#ff3b30',\n  size: number = 6,\n  text: string = ''\n): PseudoElementModifier {\n  return after({\n    content: text,\n    position: 'absolute',\n    top: -2,\n    right: -2,\n    width: text ? 'auto' : size,\n    height: size,\n    minWidth: size,\n    backgroundColor: color,\n    borderRadius: '50%',\n    fontSize: 10,\n    color: 'white',\n    textAlign: 'center',\n    lineHeight: text ? size / 10 : 1,\n    padding: text ? '2px 4px' : 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center'\n  })\n}\n\n/**\n * Tooltip using ::before with positioning\n *\n * @example\n * ```typescript\n * .tooltip('This is a tooltip')\n * .tooltip('Custom tooltip', 'bottom', '#333')\n * ```\n */\nexport function tooltip(\n  text: string,\n  position: 'top' | 'bottom' | 'left' | 'right' = 'top',\n  backgroundColor: string = '#333',\n  textColor: string = 'white'\n): PseudoElementModifier {\n  const positionStyles: Record<string, any> = {\n    top: { bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: 5 },\n    bottom: { top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: 5 },\n    left: { right: '100%', top: '50%', transform: 'translateY(-50%)', marginRight: 5 },\n    right: { left: '100%', top: '50%', transform: 'translateY(-50%)', marginLeft: 5 }\n  }\n\n  return before({\n    content: text,\n    position: 'absolute',\n    backgroundColor,\n    color: textColor,\n    padding: '4px 8px',\n    borderRadius: 4,\n    fontSize: 12,\n    whiteSpace: 'nowrap',\n    zIndex: 1000,\n    opacity: 0,\n    pointerEvents: 'none',\n    transition: 'opacity 0.2s ease',\n    ...positionStyles[position]\n  })\n}\n\n/**\n * Corner ribbon using ::before\n *\n * @example\n * ```typescript\n * .cornerRibbon('New!')            // Default red ribbon\n * .cornerRibbon('Sale', '#ff9500') // Orange sale ribbon\n * ```\n */\nexport function cornerRibbon(\n  text: string,\n  color: string = '#ff3b30',\n  textColor: string = 'white'\n): PseudoElementModifier {\n  return before({\n    content: text,\n    position: 'absolute',\n    top: 8,\n    right: -8,\n    backgroundColor: color,\n    color: textColor,\n    padding: '2px 12px',\n    fontSize: 11,\n    fontWeight: 'bold',\n    textTransform: 'uppercase',\n    transform: 'rotate(45deg)',\n    transformOrigin: 'center',\n    zIndex: 10\n  })\n}\n\n/**\n * Loading spinner using ::before with animation\n *\n * @example\n * ```typescript\n * .spinner()                       // Default spinner\n * .spinner(16, '#007AFF', 2)       // Custom size, color, border width\n * ```\n */\nexport function spinner(\n  size: number = 20,\n  color: string = '#007AFF',\n  borderWidth: number = 2\n): PseudoElementModifier {\n  return before({\n    content: '',\n    display: 'inline-block',\n    width: size,\n    height: size,\n    border: `${borderWidth}px solid transparent`,\n    borderTop: `${borderWidth}px solid ${color}`,\n    borderRadius: '50%',\n    animation: 'spin 1s linear infinite'\n  })\n}"],"names":["_PseudoElementModifier","BaseModifier","options","resolvedOptions","key","value","__publicField","_node","context","pseudoClass","className","pseudoType","styles","styleSheet","cssRule","e","selector","cssProperties","prop","cssProperty","cssValue","property","existingStyle","style","PseudoElementModifier","before","after","pseudoElements","iconBefore","icon","iconAfter","lineBefore","color","thickness","length","lineAfter","quotes","openQuote","closeQuote","underline","opacity","badge","size","text","tooltip","position","backgroundColor","textColor","cornerRibbon","spinner","borderWidth"],"mappings":"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"}