@tachui/core 0.7.0-alpha1

package/dist/modifiers/filters.d.ts

@@ -0,0 +1,275 @@
+/**
+ * Filter Modifiers - CSS filter effects system
+ *
+ * Provides comprehensive CSS filter capabilities including blur, brightness,
+ * contrast, saturation, and other visual effects for enhanced styling.
+ */
+import type { DOMNode } from '../runtime/types';
+import { BaseModifier } from './base';
+import type { ModifierContext, ReactiveModifierProps } from './types';
+export interface FilterConfig {
+    blur?: number;
+    brightness?: number;
+    contrast?: number;
+    saturate?: number;
+    sepia?: number;
+    hueRotate?: string;
+    invert?: number;
+    opacity?: number;
+    dropShadow?: string;
+    grayscale?: number;
+}
+export interface FilterOptions {
+    filter?: FilterConfig | string;
+}
+export type ReactiveFilterOptions = ReactiveModifierProps<FilterOptions>;
+export declare class FilterModifier extends BaseModifier<FilterOptions> {
+    readonly type = "filter";
+    readonly priority = 30;
+    constructor(options: ReactiveFilterOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computeFilterStyles;
+    private generateFilterCSS;
+}
+/**
+ * General filter modifier with flexible configuration
+ *
+ * @example
+ * ```typescript
+ * .filter({ blur: 5, brightness: 1.2, contrast: 1.1 })
+ * .filter('blur(3px) sepia(0.8)')  // Direct CSS filter string
+ * ```
+ */
+export declare function filter(config: FilterConfig | string): FilterModifier;
+/**
+ * Blur filter effect
+ *
+ * @example
+ * ```typescript
+ * .blur(5)      // 5px blur
+ * .blur(0.5)    // Subtle 0.5px blur
+ * .blur(10)     // Heavy 10px blur
+ * ```
+ */
+export declare function blur(radius: number): FilterModifier;
+/**
+ * Brightness adjustment filter
+ *
+ * @example
+ * ```typescript
+ * .brightness(1.2)    // 20% brighter
+ * .brightness(0.8)    // 20% darker
+ * .brightness(2.0)    // Double brightness
+ * ```
+ */
+export declare function brightness(value: number): FilterModifier;
+/**
+ * Contrast adjustment filter
+ *
+ * @example
+ * ```typescript
+ * .contrast(1.5)     // 50% more contrast
+ * .contrast(0.7)     // 30% less contrast
+ * .contrast(2.0)     // Double contrast
+ * ```
+ */
+export declare function contrast(value: number): FilterModifier;
+/**
+ * Saturation adjustment filter
+ *
+ * @example
+ * ```typescript
+ * .saturate(1.5)     // 50% more saturated
+ * .saturate(0.5)     // 50% less saturated
+ * .saturate(0)       // Completely desaturated (grayscale)
+ * .saturate(2.0)     // Double saturation
+ * ```
+ */
+export declare function saturate(value: number): FilterModifier;
+/**
+ * Grayscale filter effect
+ *
+ * @example
+ * ```typescript
+ * .grayscale(1)      // Full grayscale
+ * .grayscale(0.5)    // 50% grayscale
+ * .grayscale(0)      // No grayscale (full color)
+ * ```
+ */
+export declare function grayscale(value: number): FilterModifier;
+/**
+ * Sepia filter effect for vintage look
+ *
+ * @example
+ * ```typescript
+ * .sepia(1)        // Full sepia effect
+ * .sepia(0.6)      // 60% sepia effect
+ * .sepia(0)        // No sepia effect
+ * ```
+ */
+export declare function sepia(value: number): FilterModifier;
+/**
+ * Hue rotation filter effect
+ *
+ * @example
+ * ```typescript
+ * .hueRotate('90deg')     // Rotate hue by 90 degrees
+ * .hueRotate('0.25turn')  // Quarter turn hue rotation
+ * .hueRotate('180deg')    // Half rotation (complementary colors)
+ * ```
+ */
+export declare function hueRotate(angle: string): FilterModifier;
+/**
+ * Invert colors filter
+ *
+ * @example
+ * ```typescript
+ * .invert(1)       // Full color inversion
+ * .invert(0.5)     // 50% color inversion
+ * .invert(0)       // No inversion (normal colors)
+ * ```
+ */
+export declare function invert(value: number): FilterModifier;
+/**
+ * Drop shadow filter (alternative to box-shadow)
+ *
+ * @example
+ * ```typescript
+ * .dropShadow('2px 2px 4px rgba(0,0,0,0.3)')
+ * .dropShadow('0 4px 8px #000')
+ * .dropShadow('inset 0 0 10px rgba(255,255,255,0.5)')
+ * ```
+ */
+export declare function dropShadow(shadow: string): FilterModifier;
+/**
+ * Vintage photo effect - sepia + contrast + slight blur
+ *
+ * @example
+ * ```typescript
+ * .vintagePhoto()           // Default vintage effect
+ * .vintagePhoto(0.8, 1.2)   // Custom sepia and contrast
+ * ```
+ */
+export declare function vintagePhoto(sepiaAmount?: number, contrastAmount?: number): FilterModifier;
+/**
+ * High contrast black and white effect
+ *
+ * @example
+ * ```typescript
+ * .blackAndWhite()          // Full grayscale with high contrast
+ * .blackAndWhite(1.5)       // Custom contrast level
+ * ```
+ */
+export declare function blackAndWhite(contrastAmount?: number): FilterModifier;
+/**
+ * Vibrant color enhancement
+ *
+ * @example
+ * ```typescript
+ * .vibrant()               // Enhanced saturation and contrast
+ * .vibrant(1.4, 1.1)       // Custom saturation and contrast
+ * ```
+ */
+export declare function vibrant(saturationAmount?: number, contrastAmount?: number): FilterModifier;
+/**
+ * Warm color temperature effect
+ *
+ * @example
+ * ```typescript
+ * .warmTone()              // Warm hue shift with brightness
+ * .warmTone('15deg')       // Custom hue rotation
+ * ```
+ */
+export declare function warmTone(hueShift?: string): FilterModifier;
+/**
+ * Cool color temperature effect
+ *
+ * @example
+ * ```typescript
+ * .coolTone()              // Cool hue shift
+ * .coolTone('-20deg')      // Custom hue rotation
+ * ```
+ */
+export declare function coolTone(hueShift?: string): FilterModifier;
+/**
+ * Faded/washed out effect
+ *
+ * @example
+ * ```typescript
+ * .faded()                 // Reduced contrast and saturation
+ * .faded(0.8, 0.7)         // Custom contrast and saturation
+ * ```
+ */
+export declare function faded(contrastAmount?: number, saturationAmount?: number): FilterModifier;
+/**
+ * High-key photography effect - bright and airy
+ *
+ * @example
+ * ```typescript
+ * .highKey()               // Bright, airy effect
+ * .highKey(1.3, 0.9)       // Custom brightness and contrast
+ * ```
+ */
+export declare function highKey(brightnessAmount?: number, contrastAmount?: number): FilterModifier;
+/**
+ * Low-key photography effect - dark and moody
+ *
+ * @example
+ * ```typescript
+ * .lowKey()                // Dark, moody effect
+ * .lowKey(0.8, 1.4)        // Custom brightness and contrast
+ * ```
+ */
+export declare function lowKey(brightnessAmount?: number, contrastAmount?: number): FilterModifier;
+/**
+ * Soft focus effect - subtle blur with brightness
+ *
+ * @example
+ * ```typescript
+ * .softFocus()             // Subtle blur with glow effect
+ * .softFocus(1.5)          // Custom blur amount
+ * ```
+ */
+export declare function softFocus(blurAmount?: number): FilterModifier;
+/**
+ * High contrast mode for accessibility
+ */
+export declare function highContrastMode(): FilterModifier;
+/**
+ * Reduced motion safe blur (very subtle)
+ */
+export declare function subtleBlur(): FilterModifier;
+/**
+ * Dark mode invert filter
+ */
+export declare function darkModeInvert(): FilterModifier;
+/**
+ * SwiftUI-compatible colorInvert modifier (full color inversion)
+ *
+ * @example
+ * ```typescript
+ * .colorInvert()   // Full color inversion (equivalent to .invert(1))
+ * ```
+ */
+export declare function colorInvert(): FilterModifier;
+/**
+ * SwiftUI-compatible saturation modifier (alias for saturate)
+ *
+ * @example
+ * ```typescript
+ * .saturation(1.5)   // 50% more saturated
+ * .saturation(0)     // Completely desaturated (grayscale)
+ * ```
+ */
+export declare function saturation(amount: number): FilterModifier;
+/**
+ * SwiftUI-compatible hueRotation modifier (alias for hueRotate)
+ *
+ * @example
+ * ```typescript
+ * .hueRotation('90deg')     // Rotate hue by 90 degrees
+ * .hueRotation('0.25turn')  // Quarter turn hue rotation
+ * ```
+ */
+export declare function hueRotation(angle: string): FilterModifier;
+//# sourceMappingURL=filters.d.ts.map

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

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

package/dist/modifiers/filters.js

@@ -0,0 +1,223 @@
+import { BaseModifier as u } from "./base.js";
+var a = Object.defineProperty, c = (e, t, r) => t in e ? a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, o = (e, t, r) => c(e, typeof t != "symbol" ? t + "" : t, r);
+class n extends u {
+  constructor(t) {
+    const r = {};
+    for (const [s, i] of Object.entries(t))
+      typeof i == "function" && "peek" in i ? r[s] = i.peek() : r[s] = i;
+    super(r), o(this, "type", "filter"), o(this, "priority", 30);
+  }
+  apply(t, r) {
+    if (!r.element) return;
+    const s = this.computeFilterStyles(this.properties);
+    this.applyStyles(r.element, s);
+  }
+  computeFilterStyles(t) {
+    const r = {};
+    if (t.filter) {
+      const s = typeof t.filter == "string" ? t.filter : this.generateFilterCSS(t.filter);
+      r.filter = s;
+    }
+    return r;
+  }
+  generateFilterCSS(t) {
+    const r = [];
+    return Object.entries(t).forEach(([s, i]) => {
+      switch (s) {
+        case "blur":
+          r.push(`blur(${i}px)`);
+          break;
+        case "brightness":
+          r.push(`brightness(${i})`);
+          break;
+        case "contrast":
+          r.push(`contrast(${i})`);
+          break;
+        case "saturate":
+          r.push(`saturate(${i})`);
+          break;
+        case "sepia":
+          r.push(`sepia(${i})`);
+          break;
+        case "hueRotate":
+          r.push(`hue-rotate(${i})`);
+          break;
+        case "invert":
+          r.push(`invert(${i})`);
+          break;
+        case "opacity":
+          r.push(`opacity(${i})`);
+          break;
+        case "dropShadow":
+          r.push(`drop-shadow(${i})`);
+          break;
+        case "grayscale":
+          r.push(`grayscale(${i})`);
+          break;
+      }
+    }), r.join(" ");
+  }
+}
+function b(e) {
+  return new n({ filter: e });
+}
+function w(e) {
+  return new n({ filter: { blur: e } });
+}
+function d(e) {
+  return new n({ filter: { brightness: e } });
+}
+function g(e) {
+  return new n({ filter: { contrast: e } });
+}
+function f(e) {
+  return new n({ filter: { saturate: e } });
+}
+function y(e) {
+  return new n({ filter: { grayscale: e } });
+}
+function k(e) {
+  return new n({ filter: { sepia: e } });
+}
+function l(e) {
+  return new n({ filter: { hueRotate: e } });
+}
+function h(e) {
+  return new n({ filter: { invert: e } });
+}
+function m(e) {
+  return new n({ filter: { dropShadow: e } });
+}
+function S(e = 0.7, t = 1.1) {
+  return new n({
+    filter: {
+      sepia: e,
+      contrast: t,
+      blur: 0.3
+    }
+  });
+}
+function $(e = 1.3) {
+  return new n({
+    filter: {
+      grayscale: 1,
+      contrast: e
+    }
+  });
+}
+function F(e = 1.3, t = 1.05) {
+  return new n({
+    filter: {
+      saturate: e,
+      contrast: t
+    }
+  });
+}
+function R(e = "10deg") {
+  return new n({
+    filter: {
+      hueRotate: e,
+      brightness: 1.05,
+      saturate: 1.1
+    }
+  });
+}
+function _(e = "-15deg") {
+  return new n({
+    filter: {
+      hueRotate: e,
+      brightness: 0.98,
+      saturate: 1.05
+    }
+  });
+}
+function v(e = 0.85, t = 0.75) {
+  return new n({
+    filter: {
+      contrast: e,
+      saturate: t,
+      brightness: 1.1
+    }
+  });
+}
+function M(e = 1.2, t = 0.85) {
+  return new n({
+    filter: {
+      brightness: e,
+      contrast: t
+    }
+  });
+}
+function O(e = 0.85, t = 1.3) {
+  return new n({
+    filter: {
+      brightness: e,
+      contrast: t
+    }
+  });
+}
+function P(e = 1) {
+  return new n({
+    filter: {
+      blur: e,
+      brightness: 1.05
+    }
+  });
+}
+function C() {
+  return new n({
+    filter: {
+      contrast: 2,
+      brightness: 1.1
+    }
+  });
+}
+function j() {
+  return new n({ filter: { blur: 0.5 } });
+}
+function x() {
+  return new n({
+    filter: {
+      invert: 1,
+      hueRotate: "180deg"
+    }
+  });
+}
+function B() {
+  return h(1);
+}
+function I(e) {
+  return f(e);
+}
+function K(e) {
+  return l(e);
+}
+export {
+  n as FilterModifier,
+  $ as blackAndWhite,
+  w as blur,
+  d as brightness,
+  B as colorInvert,
+  g as contrast,
+  _ as coolTone,
+  x as darkModeInvert,
+  m as dropShadow,
+  v as faded,
+  b as filter,
+  y as grayscale,
+  C as highContrastMode,
+  M as highKey,
+  l as hueRotate,
+  K as hueRotation,
+  h as invert,
+  O as lowKey,
+  f as saturate,
+  I as saturation,
+  k as sepia,
+  P as softFocus,
+  j as subtleBlur,
+  F as vibrant,
+  S as vintagePhoto,
+  R as warmTone
+};
+//# sourceMappingURL=filters.js.map

package/dist/modifiers/filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.js","sources":["../../src/modifiers/filters.ts"],"sourcesContent":["/**\n * Filter Modifiers - CSS filter effects system\n *\n * Provides comprehensive CSS filter capabilities including blur, brightness,\n * contrast, saturation, and other visual effects for enhanced styling.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\nexport interface FilterConfig {\n  blur?: number            // Blur radius in pixels\n  brightness?: number      // Brightness multiplier (1 = normal, >1 brighter, <1 darker)\n  contrast?: number        // Contrast multiplier (1 = normal, >1 more contrast, <1 less contrast)\n  saturate?: number        // Saturation multiplier (1 = normal, >1 more saturated, 0 = grayscale)\n  sepia?: number          // Sepia effect (0-1, where 1 is full sepia)\n  hueRotate?: string      // Hue rotation (e.g., '90deg', '0.25turn')\n  invert?: number         // Invert colors (0-1, where 1 is full invert)\n  opacity?: number        // Opacity filter (0-1, alternative to CSS opacity)\n  dropShadow?: string     // Drop shadow filter (e.g., '2px 2px 4px rgba(0,0,0,0.5)')\n  grayscale?: number      // Grayscale effect (0-1, where 1 is full grayscale)\n}\n\nexport interface FilterOptions {\n  filter?: FilterConfig | string\n}\n\nexport type ReactiveFilterOptions = ReactiveModifierProps<FilterOptions>\n\nexport class FilterModifier extends BaseModifier<FilterOptions> {\n  readonly type = 'filter'\n  readonly priority = 30\n\n  constructor(options: ReactiveFilterOptions) {\n    const resolvedOptions: FilterOptions = {}\n    for (const [key, value] of Object.entries(options)) {\n      if (typeof value === 'function' && 'peek' in value) {\n        ;(resolvedOptions as any)[key] = (value as any).peek()\n      } else {\n        ;(resolvedOptions as any)[key] = value\n      }\n    }\n    super(resolvedOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeFilterStyles(this.properties)\n    this.applyStyles(context.element, styles)\n    \n    return undefined\n  }\n\n  private computeFilterStyles(props: FilterOptions) {\n    const styles: Record<string, string> = {}\n\n    if (props.filter) {\n      const filterValue = typeof props.filter === 'string'\n        ? props.filter\n        : this.generateFilterCSS(props.filter)\n      \n      styles.filter = filterValue\n    }\n\n    return styles\n  }\n\n  private generateFilterCSS(config: FilterConfig): string {\n    const filters: string[] = []\n\n    Object.entries(config).forEach(([filterType, value]) => {\n      switch (filterType) {\n        case 'blur':\n          filters.push(`blur(${value}px)`)\n          break\n        case 'brightness':\n          filters.push(`brightness(${value})`)\n          break\n        case 'contrast':\n          filters.push(`contrast(${value})`)\n          break\n        case 'saturate':\n          filters.push(`saturate(${value})`)\n          break\n        case 'sepia':\n          filters.push(`sepia(${value})`)\n          break\n        case 'hueRotate':\n          filters.push(`hue-rotate(${value})`)\n          break\n        case 'invert':\n          filters.push(`invert(${value})`)\n          break\n        case 'opacity':\n          filters.push(`opacity(${value})`)\n          break\n        case 'dropShadow':\n          filters.push(`drop-shadow(${value})`)\n          break\n        case 'grayscale':\n          filters.push(`grayscale(${value})`)\n          break\n      }\n    })\n\n    return filters.join(' ')\n  }\n}\n\n// ============================================================================\n// Filter Functions\n// ============================================================================\n\n/**\n * General filter modifier with flexible configuration\n *\n * @example\n * ```typescript\n * .filter({ blur: 5, brightness: 1.2, contrast: 1.1 })\n * .filter('blur(3px) sepia(0.8)')  // Direct CSS filter string\n * ```\n */\nexport function filter(config: FilterConfig | string): FilterModifier {\n  return new FilterModifier({ filter: config })\n}\n\n/**\n * Blur filter effect\n *\n * @example\n * ```typescript\n * .blur(5)      // 5px blur\n * .blur(0.5)    // Subtle 0.5px blur\n * .blur(10)     // Heavy 10px blur\n * ```\n */\nexport function blur(radius: number): FilterModifier {\n  return new FilterModifier({ filter: { blur: radius } })\n}\n\n/**\n * Brightness adjustment filter\n *\n * @example\n * ```typescript\n * .brightness(1.2)    // 20% brighter\n * .brightness(0.8)    // 20% darker\n * .brightness(2.0)    // Double brightness\n * ```\n */\nexport function brightness(value: number): FilterModifier {\n  return new FilterModifier({ filter: { brightness: value } })\n}\n\n/**\n * Contrast adjustment filter\n *\n * @example\n * ```typescript\n * .contrast(1.5)     // 50% more contrast\n * .contrast(0.7)     // 30% less contrast\n * .contrast(2.0)     // Double contrast\n * ```\n */\nexport function contrast(value: number): FilterModifier {\n  return new FilterModifier({ filter: { contrast: value } })\n}\n\n/**\n * Saturation adjustment filter\n *\n * @example\n * ```typescript\n * .saturate(1.5)     // 50% more saturated\n * .saturate(0.5)     // 50% less saturated  \n * .saturate(0)       // Completely desaturated (grayscale)\n * .saturate(2.0)     // Double saturation\n * ```\n */\nexport function saturate(value: number): FilterModifier {\n  return new FilterModifier({ filter: { saturate: value } })\n}\n\n/**\n * Grayscale filter effect\n *\n * @example\n * ```typescript\n * .grayscale(1)      // Full grayscale\n * .grayscale(0.5)    // 50% grayscale\n * .grayscale(0)      // No grayscale (full color)\n * ```\n */\nexport function grayscale(value: number): FilterModifier {\n  return new FilterModifier({ filter: { grayscale: value } })\n}\n\n/**\n * Sepia filter effect for vintage look\n *\n * @example\n * ```typescript\n * .sepia(1)        // Full sepia effect\n * .sepia(0.6)      // 60% sepia effect  \n * .sepia(0)        // No sepia effect\n * ```\n */\nexport function sepia(value: number): FilterModifier {\n  return new FilterModifier({ filter: { sepia: value } })\n}\n\n/**\n * Hue rotation filter effect\n *\n * @example\n * ```typescript\n * .hueRotate('90deg')     // Rotate hue by 90 degrees\n * .hueRotate('0.25turn')  // Quarter turn hue rotation\n * .hueRotate('180deg')    // Half rotation (complementary colors)\n * ```\n */\nexport function hueRotate(angle: string): FilterModifier {\n  return new FilterModifier({ filter: { hueRotate: angle } })\n}\n\n/**\n * Invert colors filter\n *\n * @example\n * ```typescript\n * .invert(1)       // Full color inversion\n * .invert(0.5)     // 50% color inversion\n * .invert(0)       // No inversion (normal colors)\n * ```\n */\nexport function invert(value: number): FilterModifier {\n  return new FilterModifier({ filter: { invert: value } })\n}\n\n/**\n * Drop shadow filter (alternative to box-shadow)\n *\n * @example\n * ```typescript\n * .dropShadow('2px 2px 4px rgba(0,0,0,0.3)')\n * .dropShadow('0 4px 8px #000')\n * .dropShadow('inset 0 0 10px rgba(255,255,255,0.5)')\n * ```\n */\nexport function dropShadow(shadow: string): FilterModifier {\n  return new FilterModifier({ filter: { dropShadow: shadow } })\n}\n\n// ============================================================================\n// Filter Combinations - Common filter effect patterns\n// ============================================================================\n\n/**\n * Vintage photo effect - sepia + contrast + slight blur\n *\n * @example\n * ```typescript\n * .vintagePhoto()           // Default vintage effect\n * .vintagePhoto(0.8, 1.2)   // Custom sepia and contrast\n * ```\n */\nexport function vintagePhoto(sepiaAmount: number = 0.7, contrastAmount: number = 1.1): FilterModifier {\n  return new FilterModifier({ \n    filter: { \n      sepia: sepiaAmount, \n      contrast: contrastAmount,\n      blur: 0.3\n    } \n  })\n}\n\n/**\n * High contrast black and white effect\n *\n * @example\n * ```typescript\n * .blackAndWhite()          // Full grayscale with high contrast\n * .blackAndWhite(1.5)       // Custom contrast level\n * ```\n */\nexport function blackAndWhite(contrastAmount: number = 1.3): FilterModifier {\n  return new FilterModifier({ \n    filter: { \n      grayscale: 1, \n      contrast: contrastAmount \n    } \n  })\n}\n\n/**\n * Vibrant color enhancement\n *\n * @example\n * ```typescript\n * .vibrant()               // Enhanced saturation and contrast\n * .vibrant(1.4, 1.1)       // Custom saturation and contrast\n * ```\n */\nexport function vibrant(saturationAmount: number = 1.3, contrastAmount: number = 1.05): FilterModifier {\n  return new FilterModifier({ \n    filter: { \n      saturate: saturationAmount, \n      contrast: contrastAmount \n    } \n  })\n}\n\n/**\n * Warm color temperature effect\n *\n * @example\n * ```typescript\n * .warmTone()              // Warm hue shift with brightness\n * .warmTone('15deg')       // Custom hue rotation\n * ```\n */\nexport function warmTone(hueShift: string = '10deg'): FilterModifier {\n  return new FilterModifier({ \n    filter: { \n      hueRotate: hueShift, \n      brightness: 1.05,\n      saturate: 1.1\n    } \n  })\n}\n\n/**\n * Cool color temperature effect\n *\n * @example\n * ```typescript\n * .coolTone()              // Cool hue shift\n * .coolTone('-20deg')      // Custom hue rotation\n * ```\n */\nexport function coolTone(hueShift: string = '-15deg'): FilterModifier {\n  return new FilterModifier({ \n    filter: { \n      hueRotate: hueShift, \n      brightness: 0.98,\n      saturate: 1.05\n    } \n  })\n}\n\n/**\n * Faded/washed out effect\n *\n * @example\n * ```typescript\n * .faded()                 // Reduced contrast and saturation\n * .faded(0.8, 0.7)         // Custom contrast and saturation\n * ```\n */\nexport function faded(contrastAmount: number = 0.85, saturationAmount: number = 0.75): FilterModifier {\n  return new FilterModifier({ \n    filter: { \n      contrast: contrastAmount, \n      saturate: saturationAmount,\n      brightness: 1.1\n    } \n  })\n}\n\n/**\n * High-key photography effect - bright and airy\n *\n * @example\n * ```typescript\n * .highKey()               // Bright, airy effect\n * .highKey(1.3, 0.9)       // Custom brightness and contrast\n * ```\n */\nexport function highKey(brightnessAmount: number = 1.2, contrastAmount: number = 0.85): FilterModifier {\n  return new FilterModifier({ \n    filter: { \n      brightness: brightnessAmount, \n      contrast: contrastAmount \n    } \n  })\n}\n\n/**\n * Low-key photography effect - dark and moody\n *\n * @example\n * ```typescript\n * .lowKey()                // Dark, moody effect  \n * .lowKey(0.8, 1.4)        // Custom brightness and contrast\n * ```\n */\nexport function lowKey(brightnessAmount: number = 0.85, contrastAmount: number = 1.3): FilterModifier {\n  return new FilterModifier({ \n    filter: { \n      brightness: brightnessAmount, \n      contrast: contrastAmount \n    } \n  })\n}\n\n/**\n * Soft focus effect - subtle blur with brightness\n *\n * @example\n * ```typescript\n * .softFocus()             // Subtle blur with glow effect\n * .softFocus(1.5)          // Custom blur amount\n * ```\n */\nexport function softFocus(blurAmount: number = 1): FilterModifier {\n  return new FilterModifier({ \n    filter: { \n      blur: blurAmount, \n      brightness: 1.05 \n    } \n  })\n}\n\n// ============================================================================\n// Accessibility and Theme Filters\n// ============================================================================\n\n/**\n * High contrast mode for accessibility\n */\nexport function highContrastMode(): FilterModifier {\n  return new FilterModifier({ \n    filter: { \n      contrast: 2.0,\n      brightness: 1.1\n    } \n  })\n}\n\n/**\n * Reduced motion safe blur (very subtle)\n */\nexport function subtleBlur(): FilterModifier {\n  return new FilterModifier({ filter: { blur: 0.5 } })\n}\n\n/**\n * Dark mode invert filter\n */\nexport function darkModeInvert(): FilterModifier {\n  return new FilterModifier({ \n    filter: { \n      invert: 1,\n      hueRotate: '180deg'\n    } \n  })\n}\n\n// ============================================================================\n// SwiftUI Compatibility Functions\n// ============================================================================\n\n/**\n * SwiftUI-compatible colorInvert modifier (full color inversion)\n * \n * @example\n * ```typescript\n * .colorInvert()   // Full color inversion (equivalent to .invert(1))\n * ```\n */\nexport function colorInvert(): FilterModifier {\n  return invert(1)\n}\n\n/**\n * SwiftUI-compatible saturation modifier (alias for saturate)\n * \n * @example\n * ```typescript\n * .saturation(1.5)   // 50% more saturated\n * .saturation(0)     // Completely desaturated (grayscale)\n * ```\n */\nexport function saturation(amount: number): FilterModifier {\n  return saturate(amount)\n}\n\n/**\n * SwiftUI-compatible hueRotation modifier (alias for hueRotate)\n * \n * @example\n * ```typescript\n * .hueRotation('90deg')     // Rotate hue by 90 degrees\n * .hueRotation('0.25turn')  // Quarter turn hue rotation\n * ```\n */\nexport function hueRotation(angle: string): FilterModifier {\n  return hueRotate(angle)\n}"],"names":["FilterModifier","BaseModifier","options","resolvedOptions","key","value","__publicField","_node","context","styles","props","filterValue","config","filters","filterType","filter","blur","radius","brightness","contrast","saturate","grayscale","sepia","hueRotate","angle","invert","dropShadow","shadow","vintagePhoto","sepiaAmount","contrastAmount","blackAndWhite","vibrant","saturationAmount","warmTone","hueShift","coolTone","faded","highKey","brightnessAmount","lowKey","softFocus","blurAmount","highContrastMode","subtleBlur","darkModeInvert","colorInvert","saturation","amount","hueRotation"],"mappings":"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"}

package/dist/modifiers/flexbox.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./base.cjs");var a=Object.defineProperty,u=(t,e,i)=>e in t?a(t,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[e]=i,o=(t,e,i)=>u(t,typeof e!="symbol"?e+"":e,i);class n extends r.BaseModifier{constructor(e){const i={};for(const[l,f]of Object.entries(e))typeof f=="function"&&"peek"in f?i[l]=f.peek():i[l]=f;super(i),o(this,"type","flexbox"),o(this,"priority",60)}apply(e,i){if(!i.element)return;const l=this.computeFlexboxStyles(this.properties);this.applyStyles(i.element,l)}computeFlexboxStyles(e){const i={};return e.flexGrow!==void 0&&(i.flexGrow=e.flexGrow.toString()),e.flexShrink!==void 0&&(i.flexShrink=e.flexShrink.toString()),e.flexBasis!==void 0&&(i.flexBasis=this.toCSSValue(e.flexBasis)),e.flex!==void 0&&(i.flex=e.flex),e.justifyContent!==void 0&&(i.justifyContent=e.justifyContent),e.alignItems!==void 0&&(i.alignItems=e.alignItems),e.alignSelf!==void 0&&(i.alignSelf=e.alignSelf),e.flexDirection!==void 0&&(i.flexDirection=e.flexDirection),e.flexWrap!==void 0&&(i.flexWrap=e.flexWrap),e.alignContent!==void 0&&(i.alignContent=e.alignContent),e.gap!==void 0&&(i.gap=this.toCSSValue(e.gap)),e.rowGap!==void 0&&(i.rowGap=this.toCSSValue(e.rowGap)),e.columnGap!==void 0&&(i.columnGap=this.toCSSValue(e.columnGap)),i}}function x(t){return new n(t)}function c(t){return new n({flexGrow:t})}function s(t){return new n({flexShrink:t})}function d(t){return new n({justifyContent:t})}function S(t){return new n({alignItems:t})}function g(t){return new n({gap:t})}function v(t){return new n({flexDirection:t})}function w(t){return new n({flexWrap:t})}exports.FlexboxModifier=n;exports.alignItems=S;exports.flexDirection=v;exports.flexGrow=c;exports.flexShrink=s;exports.flexWrap=w;exports.flexbox=x;exports.gap=g;exports.justifyContent=d;
+//# sourceMappingURL=flexbox.cjs.map

package/dist/modifiers/flexbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flexbox.cjs","sources":["../../src/modifiers/flexbox.ts"],"sourcesContent":["/**\n * Flexbox Modifier - comprehensive flexbox layout properties\n *\n * Provides a unified interface for flexbox properties\n * including flex-grow, justify-content, align-items, etc.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\nexport interface FlexboxOptions {\n  flexGrow?: number\n  flexShrink?: number\n  flexBasis?: number | string\n  flex?: string\n  justifyContent?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'\n  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse'\n  alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around'\n  gap?: number | string\n  rowGap?: number | string\n  columnGap?: number | string\n}\n\nexport type ReactiveFlexboxOptions = ReactiveModifierProps<FlexboxOptions>\n\nexport class FlexboxModifier extends BaseModifier<FlexboxOptions> {\n  readonly type = 'flexbox'\n  readonly priority = 60 // Priority 60 for flexbox layout\n\n  constructor(options: ReactiveFlexboxOptions) {\n    // Convert reactive options to regular options for immediate use\n    const resolvedOptions: FlexboxOptions = {}\n    for (const [key, value] of Object.entries(options)) {\n      if (typeof value === 'function' && 'peek' in value) {\n        ;(resolvedOptions as any)[key] = (value as any).peek()\n      } else {\n        ;(resolvedOptions as any)[key] = value\n      }\n    }\n    super(resolvedOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.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    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 = this.toCSSValue(props.flexBasis)\n    }\n    if (props.flex !== undefined) {\n      styles.flex = props.flex\n    }\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.alignSelf !== undefined) {\n      styles.alignSelf = props.alignSelf\n    }\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.alignContent !== undefined) {\n      styles.alignContent = props.alignContent\n    }\n    if (props.gap !== undefined) {\n      styles.gap = this.toCSSValue(props.gap)\n    }\n    if (props.rowGap !== undefined) {\n      styles.rowGap = this.toCSSValue(props.rowGap)\n    }\n    if (props.columnGap !== undefined) {\n      styles.columnGap = this.toCSSValue(props.columnGap)\n    }\n\n    return styles\n  }\n}\n\n/**\n * Create a flexbox modifier with comprehensive flexbox properties\n *\n * @example\n * ```typescript\n * // Complete flexbox layout\n * .flexbox({\n *   flexGrow: 1,\n *   justifyContent: 'center',\n *   alignItems: 'stretch',\n *   gap: 16\n * })\n *\n * // Simple flex grow\n * .flexGrow(1)\n *\n * // Justify content\n * .justifyContent('space-between')\n * ```\n */\nexport function flexbox(options: ReactiveFlexboxOptions): FlexboxModifier {\n  return new FlexboxModifier(options)\n}\n\n/**\n * Convenience function for flex-grow\n */\nexport function flexGrow(value: number): FlexboxModifier {\n  return new FlexboxModifier({ flexGrow: value })\n}\n\n/**\n * Convenience function for flex-shrink\n */\nexport function flexShrink(value: number): FlexboxModifier {\n  return new FlexboxModifier({ flexShrink: value })\n}\n\n/**\n * Convenience function for justify-content\n */\nexport function justifyContent(value: FlexboxOptions['justifyContent']): FlexboxModifier {\n  return new FlexboxModifier({ justifyContent: value })\n}\n\n/**\n * Convenience function for align-items\n */\nexport function alignItems(value: FlexboxOptions['alignItems']): FlexboxModifier {\n  return new FlexboxModifier({ alignItems: value })\n}\n\n/**\n * Convenience function for gap\n */\nexport function gap(value: number | string): FlexboxModifier {\n  return new FlexboxModifier({ gap: value })\n}\n\n/**\n * Convenience function for flex-direction\n */\nexport function flexDirection(value: FlexboxOptions['flexDirection']): FlexboxModifier {\n  return new FlexboxModifier({ flexDirection: value })\n}\n\n/**\n * Convenience function for flex-wrap\n */\nexport function flexWrap(value: FlexboxOptions['flexWrap']): FlexboxModifier {\n  return new FlexboxModifier({ flexWrap: value })\n}\n"],"names":["FlexboxModifier","BaseModifier","options","resolvedOptions","key","value","__publicField","_node","context","styles","props","flexbox","flexGrow","flexShrink","justifyContent","alignItems","gap","flexDirection","flexWrap"],"mappings":"0QAmCO,MAAMA,UAAwBC,EAAAA,YAA6B,CAIhE,YAAYC,EAAiC,CAE3C,MAAMC,EAAkC,CAAA,EACxC,SAAW,CAACC,EAAKC,CAAK,IAAK,OAAO,QAAQH,CAAO,EAC3C,OAAOG,GAAU,YAAc,SAAUA,EACzCF,EAAwBC,CAAG,EAAKC,EAAc,KAAA,EAE9CF,EAAwBC,CAAG,EAAIC,EAGrC,MAAMF,CAAe,EAbvBG,EAAA,KAAS,OAAO,SAAA,EAChBA,EAAA,KAAS,WAAW,EAAA,CAapB,CAEA,MAAMC,EAAgBC,EAA+C,CACnE,GAAI,CAACA,EAAQ,QAAS,OAEtB,MAAMC,EAAS,KAAK,qBAAqB,KAAK,UAAU,EACxD,KAAK,YAAYD,EAAQ,QAASC,CAAM,CAG1C,CAEQ,qBAAqBC,EAAuB,CAClD,MAAMD,EAAiC,CAAA,EAEvC,OAAIC,EAAM,WAAa,SACrBD,EAAO,SAAWC,EAAM,SAAS,SAAA,GAE/BA,EAAM,aAAe,SACvBD,EAAO,WAAaC,EAAM,WAAW,SAAA,GAEnCA,EAAM,YAAc,SACtBD,EAAO,UAAY,KAAK,WAAWC,EAAM,SAAS,GAEhDA,EAAM,OAAS,SACjBD,EAAO,KAAOC,EAAM,MAElBA,EAAM,iBAAmB,SAC3BD,EAAO,eAAiBC,EAAM,gBAE5BA,EAAM,aAAe,SACvBD,EAAO,WAAaC,EAAM,YAExBA,EAAM,YAAc,SACtBD,EAAO,UAAYC,EAAM,WAEvBA,EAAM,gBAAkB,SAC1BD,EAAO,cAAgBC,EAAM,eAE3BA,EAAM,WAAa,SACrBD,EAAO,SAAWC,EAAM,UAEtBA,EAAM,eAAiB,SACzBD,EAAO,aAAeC,EAAM,cAE1BA,EAAM,MAAQ,SAChBD,EAAO,IAAM,KAAK,WAAWC,EAAM,GAAG,GAEpCA,EAAM,SAAW,SACnBD,EAAO,OAAS,KAAK,WAAWC,EAAM,MAAM,GAE1CA,EAAM,YAAc,SACtBD,EAAO,UAAY,KAAK,WAAWC,EAAM,SAAS,GAG7CD,CACT,CACF,CAsBO,SAASE,EAAQT,EAAkD,CACxE,OAAO,IAAIF,EAAgBE,CAAO,CACpC,CAKO,SAASU,EAASP,EAAgC,CACvD,OAAO,IAAIL,EAAgB,CAAE,SAAUK,EAAO,CAChD,CAKO,SAASQ,EAAWR,EAAgC,CACzD,OAAO,IAAIL,EAAgB,CAAE,WAAYK,EAAO,CAClD,CAKO,SAASS,EAAeT,EAA0D,CACvF,OAAO,IAAIL,EAAgB,CAAE,eAAgBK,EAAO,CACtD,CAKO,SAASU,EAAWV,EAAsD,CAC/E,OAAO,IAAIL,EAAgB,CAAE,WAAYK,EAAO,CAClD,CAKO,SAASW,EAAIX,EAAyC,CAC3D,OAAO,IAAIL,EAAgB,CAAE,IAAKK,EAAO,CAC3C,CAKO,SAASY,EAAcZ,EAAyD,CACrF,OAAO,IAAIL,EAAgB,CAAE,cAAeK,EAAO,CACrD,CAKO,SAASa,EAASb,EAAoD,CAC3E,OAAO,IAAIL,EAAgB,CAAE,SAAUK,EAAO,CAChD"}

package/dist/modifiers/flexbox.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Flexbox Modifier - comprehensive flexbox layout properties
+ *
+ * Provides a unified interface for flexbox properties
+ * including flex-grow, justify-content, align-items, etc.
+ */
+import type { DOMNode } from '../runtime/types';
+import { BaseModifier } from './base';
+import type { ModifierContext, ReactiveModifierProps } from './types';
+export interface FlexboxOptions {
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: number | string;
+    flex?: string;
+    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
+    gap?: number | string;
+    rowGap?: number | string;
+    columnGap?: number | string;
+}
+export type ReactiveFlexboxOptions = ReactiveModifierProps<FlexboxOptions>;
+export declare class FlexboxModifier extends BaseModifier<FlexboxOptions> {
+    readonly type = "flexbox";
+    readonly priority = 60;
+    constructor(options: ReactiveFlexboxOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computeFlexboxStyles;
+}
+/**
+ * Create a flexbox modifier with comprehensive flexbox properties
+ *
+ * @example
+ * ```typescript
+ * // Complete flexbox layout
+ * .flexbox({
+ *   flexGrow: 1,
+ *   justifyContent: 'center',
+ *   alignItems: 'stretch',
+ *   gap: 16
+ * })
+ *
+ * // Simple flex grow
+ * .flexGrow(1)
+ *
+ * // Justify content
+ * .justifyContent('space-between')
+ * ```
+ */
+export declare function flexbox(options: ReactiveFlexboxOptions): FlexboxModifier;
+/**
+ * Convenience function for flex-grow
+ */
+export declare function flexGrow(value: number): FlexboxModifier;
+/**
+ * Convenience function for flex-shrink
+ */
+export declare function flexShrink(value: number): FlexboxModifier;
+/**
+ * Convenience function for justify-content
+ */
+export declare function justifyContent(value: FlexboxOptions['justifyContent']): FlexboxModifier;
+/**
+ * Convenience function for align-items
+ */
+export declare function alignItems(value: FlexboxOptions['alignItems']): FlexboxModifier;
+/**
+ * Convenience function for gap
+ */
+export declare function gap(value: number | string): FlexboxModifier;
+/**
+ * Convenience function for flex-direction
+ */
+export declare function flexDirection(value: FlexboxOptions['flexDirection']): FlexboxModifier;
+/**
+ * Convenience function for flex-wrap
+ */
+export declare function flexWrap(value: FlexboxOptions['flexWrap']): FlexboxModifier;
+//# sourceMappingURL=flexbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flexbox.d.ts","sourceRoot":"","sources":["../../src/modifiers/flexbox.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAErE,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EACX,YAAY,GACZ,UAAU,GACV,QAAQ,GACR,eAAe,GACf,cAAc,GACd,cAAc,CAAA;IAClB,UAAU,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;IAC1E,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;IAClF,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,QAAQ,GAAG,gBAAgB,CAAA;IACnE,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;IAC7C,YAAY,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,eAAe,GAAG,cAAc,CAAA;IAClG,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC5B;AAED,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,cAAc,CAAC,CAAA;AAE1E,qBAAa,eAAgB,SAAQ,YAAY,CAAC,cAAc,CAAC;IAC/D,QAAQ,CAAC,IAAI,aAAY;IACzB,QAAQ,CAAC,QAAQ,MAAK;gBAEV,OAAO,EAAE,sBAAsB;IAa3C,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IASpE,OAAO,CAAC,oBAAoB;CA6C7B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,sBAAsB,GAAG,eAAe,CAExE;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,eAAe,CAEvD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,eAAe,CAEzD;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,GAAG,eAAe,CAEvF;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,eAAe,CAE/E;AAED;;GAEG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,eAAe,CAE3D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,eAAe,CAAC,GAAG,eAAe,CAErF;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,eAAe,CAE3E"}