@tachui/core 0.7.0-alpha1

package/dist/modifiers/responsive/responsive-builder.d.ts

@@ -0,0 +1,133 @@
+/**
+ * Responsive Modifier Builder
+ *
+ * Extends the existing ModifierBuilder with responsive capabilities.
+ * Provides a fluent API for creating responsive modifiers that integrate
+ * seamlessly with the existing modifier system.
+ */
+import type { ModifierBuilder, Modifier } from '../types';
+import type { ComponentInstance } from '../../runtime/types';
+import { ResponsiveValue, ResponsiveStyleConfig, ResponsiveSpacingConfig, ResponsiveDimensionConfig, ResponsiveTypographyConfig } from './types';
+/**
+ * Responsive modifier builder interface
+ */
+export interface ResponsiveModifierBuilder<T extends ComponentInstance = ComponentInstance> {
+    responsive(config: ResponsiveStyleConfig): ResponsiveModifierBuilder<T>;
+    mediaQuery(query: string, styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    orientation(orientation: 'portrait' | 'landscape', styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    colorScheme(scheme: 'light' | 'dark', styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    reducedMotion(styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    highContrast(styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    touchDevice(styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    mouseDevice(styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    retina(styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    print(styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    responsiveLayout(config: {
+        direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
+        wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>;
+        justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>;
+        align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>;
+        gap?: ResponsiveValue<number | string>;
+    }): ResponsiveModifierBuilder<T>;
+    responsiveWidth(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T>;
+    responsiveHeight(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T>;
+    responsiveSize(config: ResponsiveDimensionConfig): ResponsiveModifierBuilder<T>;
+    responsivePadding(value: ResponsiveValue<number | string> | ResponsiveSpacingConfig): ResponsiveModifierBuilder<T>;
+    responsiveMargin(value: ResponsiveValue<number | string> | ResponsiveSpacingConfig): ResponsiveModifierBuilder<T>;
+    responsiveFont(config: ResponsiveTypographyConfig): ResponsiveModifierBuilder<T>;
+    responsiveFontSize(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T>;
+    responsiveTextAlign(value: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>): ResponsiveModifierBuilder<T>;
+    base: ResponsiveBreakpointBuilder<T>;
+    sm: ResponsiveBreakpointBuilder<T>;
+    md: ResponsiveBreakpointBuilder<T>;
+    lg: ResponsiveBreakpointBuilder<T>;
+    xl: ResponsiveBreakpointBuilder<T>;
+    '2xl': ResponsiveBreakpointBuilder<T>;
+    addModifier(modifier: Modifier): void;
+    build(): T;
+}
+/**
+ * Breakpoint-specific builder for shorthand syntax
+ * Returns ModifierBuilder to allow chaining with regular modifiers after responsive ones
+ */
+export interface ResponsiveBreakpointBuilder<T extends ComponentInstance = ComponentInstance> {
+    width(value: number | string): ModifierBuilder<T>;
+    height(value: number | string): ModifierBuilder<T>;
+    minWidth(value: number | string): ModifierBuilder<T>;
+    maxWidth(value: number | string): ModifierBuilder<T>;
+    minHeight(value: number | string): ModifierBuilder<T>;
+    maxHeight(value: number | string): ModifierBuilder<T>;
+    padding(value: number | string): ModifierBuilder<T>;
+    paddingHorizontal(value: number | string): ModifierBuilder<T>;
+    paddingVertical(value: number | string): ModifierBuilder<T>;
+    paddingTop(value: number | string): ModifierBuilder<T>;
+    paddingBottom(value: number | string): ModifierBuilder<T>;
+    paddingLeft(value: number | string): ModifierBuilder<T>;
+    paddingRight(value: number | string): ModifierBuilder<T>;
+    margin(value: number | string): ModifierBuilder<T>;
+    marginHorizontal(value: number | string): ModifierBuilder<T>;
+    marginVertical(value: number | string): ModifierBuilder<T>;
+    marginTop(value: number | string): ModifierBuilder<T>;
+    marginBottom(value: number | string): ModifierBuilder<T>;
+    marginLeft(value: number | string): ModifierBuilder<T>;
+    marginRight(value: number | string): ModifierBuilder<T>;
+    fontSize(value: number | string): ModifierBuilder<T>;
+    textAlign(value: 'left' | 'center' | 'right' | 'justify'): ModifierBuilder<T>;
+    display(value: 'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid'): ModifierBuilder<T>;
+    flexDirection(value: 'row' | 'column' | 'row-reverse' | 'column-reverse'): ModifierBuilder<T>;
+    justifyContent(value: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'): ModifierBuilder<T>;
+    alignItems(value: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'): ModifierBuilder<T>;
+    backgroundColor(value: string): ModifierBuilder<T>;
+    color(value: string): ModifierBuilder<T>;
+    opacity(value: number): ModifierBuilder<T>;
+}
+/**
+ * Implementation of responsive modifier builder using Proxy delegation
+ */
+export declare class ResponsiveModifierBuilderImpl<T extends ComponentInstance = ComponentInstance> implements ResponsiveModifierBuilder<T> {
+    private baseBuilder;
+    constructor(baseBuilder: ModifierBuilder<T>);
+    addModifier(modifier: Modifier): void;
+    build(): T;
+    responsive(config: ResponsiveStyleConfig): ResponsiveModifierBuilder<T>;
+    mediaQuery(query: string, styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    orientation(orientation: 'portrait' | 'landscape', styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    colorScheme(scheme: 'light' | 'dark', styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    reducedMotion(styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    highContrast(styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    touchDevice(styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    mouseDevice(styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    retina(styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    print(styles: Record<string, any>): ResponsiveModifierBuilder<T>;
+    responsiveLayout(config: {
+        direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
+        wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>;
+        justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>;
+        align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>;
+        gap?: ResponsiveValue<number | string>;
+    }): ResponsiveModifierBuilder<T>;
+    responsiveWidth(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T>;
+    responsiveHeight(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T>;
+    responsiveSize(config: ResponsiveDimensionConfig): ResponsiveModifierBuilder<T>;
+    responsivePadding(value: ResponsiveValue<number | string> | ResponsiveSpacingConfig): ResponsiveModifierBuilder<T>;
+    responsiveMargin(value: ResponsiveValue<number | string> | ResponsiveSpacingConfig): ResponsiveModifierBuilder<T>;
+    responsiveFont(config: ResponsiveTypographyConfig): ResponsiveModifierBuilder<T>;
+    responsiveFontSize(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T>;
+    responsiveTextAlign(value: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>): ResponsiveModifierBuilder<T>;
+    get base(): ResponsiveBreakpointBuilder<T>;
+    get sm(): ResponsiveBreakpointBuilder<T>;
+    get md(): ResponsiveBreakpointBuilder<T>;
+    get lg(): ResponsiveBreakpointBuilder<T>;
+    get xl(): ResponsiveBreakpointBuilder<T>;
+    get '2xl'(): ResponsiveBreakpointBuilder<T>;
+    [key: string]: any;
+}
+/**
+ * Utility function to wrap existing modifier builder with responsive capabilities
+ */
+export declare function withResponsive<T extends ComponentInstance = ComponentInstance>(builder: ModifierBuilder<T>): ResponsiveModifierBuilder<T>;
+/**
+ * Create a responsive modifier builder from scratch
+ */
+export declare function createResponsiveBuilder<T extends ComponentInstance = ComponentInstance>(baseBuilder: ModifierBuilder<T>): ResponsiveModifierBuilder<T>;
+//# sourceMappingURL=responsive-builder.d.ts.map

package/dist/modifiers/responsive/responsive-builder.d.ts.map

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

package/dist/modifiers/responsive/responsive-builder.js

@@ -0,0 +1,272 @@
+import { isResponsiveValue as u } from "./types.js";
+import { createResponsiveModifier as n, createMediaQueryModifier as o, createResponsiveLayoutModifier as l, createResponsivePropertyModifier as t } from "./responsive-modifier.js";
+class f {
+  constructor(r) {
+    return this.baseBuilder = r, new Proxy(this, {
+      get(i, e) {
+        if (e in i || e === "base" || e === "sm" || e === "md" || e === "lg" || e === "xl" || e === "2xl")
+          return i[e];
+        const s = i.baseBuilder[e];
+        return typeof s == "function" ? (...h) => (s.apply(i.baseBuilder, h), i.baseBuilder) : s;
+      }
+    });
+  }
+  // Delegate essential builder methods
+  addModifier(r) {
+    this.baseBuilder.addModifier(r);
+  }
+  build() {
+    return this.baseBuilder.build();
+  }
+  // Core responsive methods
+  responsive(r) {
+    const i = n(r);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  mediaQuery(r, i) {
+    const e = o(r, i);
+    return this.baseBuilder.addModifier(e), this;
+  }
+  // Advanced media query methods
+  orientation(r, i) {
+    const e = `(orientation: ${r})`, s = o(e, i);
+    return this.baseBuilder.addModifier(s), this;
+  }
+  colorScheme(r, i) {
+    const e = `(prefers-color-scheme: ${r})`, s = o(e, i);
+    return this.baseBuilder.addModifier(s), this;
+  }
+  reducedMotion(r) {
+    const e = o("(prefers-reduced-motion: reduce)", r);
+    return this.baseBuilder.addModifier(e), this;
+  }
+  highContrast(r) {
+    const e = o("(prefers-contrast: high)", r);
+    return this.baseBuilder.addModifier(e), this;
+  }
+  touchDevice(r) {
+    const e = o("(pointer: coarse)", r);
+    return this.baseBuilder.addModifier(e), this;
+  }
+  mouseDevice(r) {
+    const e = o("(pointer: fine)", r);
+    return this.baseBuilder.addModifier(e), this;
+  }
+  retina(r) {
+    const e = o("(min-resolution: 2dppx)", r);
+    return this.baseBuilder.addModifier(e), this;
+  }
+  print(r) {
+    const e = o("print", r);
+    return this.baseBuilder.addModifier(e), this;
+  }
+  // Responsive layout methods
+  responsiveLayout(r) {
+    const i = l(r);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  // Responsive dimension methods
+  responsiveWidth(r) {
+    const i = t("width", r);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  responsiveHeight(r) {
+    const i = t("height", r);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  responsiveSize(r) {
+    const i = n(r);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  // Responsive spacing methods
+  responsivePadding(r) {
+    if (u(r) || typeof r == "string" || typeof r == "number") {
+      const i = t("padding", r);
+      this.baseBuilder.addModifier(i);
+    } else {
+      const i = {}, e = r;
+      e.all && (i.padding = e.all), e.horizontal && (i.paddingLeft = e.horizontal, i.paddingRight = e.horizontal), e.vertical && (i.paddingTop = e.vertical, i.paddingBottom = e.vertical), e.top && (i.paddingTop = e.top), e.right && (i.paddingRight = e.right), e.bottom && (i.paddingBottom = e.bottom), e.left && (i.paddingLeft = e.left);
+      const s = n(i);
+      this.baseBuilder.addModifier(s);
+    }
+    return this;
+  }
+  responsiveMargin(r) {
+    if (u(r) || typeof r == "string" || typeof r == "number") {
+      const i = t("margin", r);
+      this.baseBuilder.addModifier(i);
+    } else {
+      const i = {}, e = r;
+      e.all && (i.margin = e.all), e.horizontal && (i.marginLeft = e.horizontal, i.marginRight = e.horizontal), e.vertical && (i.marginTop = e.vertical, i.marginBottom = e.vertical), e.top && (i.marginTop = e.top), e.right && (i.marginRight = e.right), e.bottom && (i.marginBottom = e.bottom), e.left && (i.marginLeft = e.left);
+      const s = n(i);
+      this.baseBuilder.addModifier(s);
+    }
+    return this;
+  }
+  // Responsive typography methods
+  responsiveFont(r) {
+    const i = n(r);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  responsiveFontSize(r) {
+    const i = t("fontSize", r);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  responsiveTextAlign(r) {
+    const i = t("textAlign", r);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  // Breakpoint shorthand methods
+  get base() {
+    return new d("base", this, this.baseBuilder);
+  }
+  get sm() {
+    return new d("sm", this, this.baseBuilder);
+  }
+  get md() {
+    return new d("md", this, this.baseBuilder);
+  }
+  get lg() {
+    return new d("lg", this, this.baseBuilder);
+  }
+  get xl() {
+    return new d("xl", this, this.baseBuilder);
+  }
+  get "2xl"() {
+    return new d("2xl", this, this.baseBuilder);
+  }
+}
+class d {
+  constructor(r, i, e) {
+    this.breakpoint = r, this.parentBuilder = i, this.baseBuilder = e;
+  }
+  // Layout properties
+  width(r) {
+    const i = { [this.breakpoint]: r }, e = t("width", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  height(r) {
+    const i = { [this.breakpoint]: r }, e = t("height", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  minWidth(r) {
+    const i = { [this.breakpoint]: r }, e = t("minWidth", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  maxWidth(r) {
+    const i = { [this.breakpoint]: r }, e = t("maxWidth", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  minHeight(r) {
+    const i = { [this.breakpoint]: r }, e = t("minHeight", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  maxHeight(r) {
+    const i = { [this.breakpoint]: r }, e = t("maxHeight", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  padding(r) {
+    const i = { [this.breakpoint]: r }, e = t("padding", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  paddingHorizontal(r) {
+    const i = { [this.breakpoint]: r }, e = t("paddingLeft", i), s = t("paddingRight", i);
+    return this.parentBuilder.addModifier(e), this.parentBuilder.addModifier(s), this.baseBuilder;
+  }
+  paddingVertical(r) {
+    const i = { [this.breakpoint]: r }, e = t("paddingTop", i), s = t("paddingBottom", i);
+    return this.parentBuilder.addModifier(e), this.parentBuilder.addModifier(s), this.baseBuilder;
+  }
+  paddingTop(r) {
+    const i = { [this.breakpoint]: r }, e = t("paddingTop", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  paddingBottom(r) {
+    const i = { [this.breakpoint]: r }, e = t("paddingBottom", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  paddingLeft(r) {
+    const i = { [this.breakpoint]: r }, e = t("paddingLeft", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  paddingRight(r) {
+    const i = { [this.breakpoint]: r }, e = t("paddingRight", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  margin(r) {
+    const i = { [this.breakpoint]: r }, e = t("margin", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  marginHorizontal(r) {
+    const i = { [this.breakpoint]: r }, e = t("marginLeft", i), s = t("marginRight", i);
+    return this.parentBuilder.addModifier(e), this.parentBuilder.addModifier(s), this.baseBuilder;
+  }
+  marginVertical(r) {
+    const i = { [this.breakpoint]: r }, e = t("marginTop", i), s = t("marginBottom", i);
+    return this.parentBuilder.addModifier(e), this.parentBuilder.addModifier(s), this.baseBuilder;
+  }
+  marginTop(r) {
+    const i = { [this.breakpoint]: r }, e = t("marginTop", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  marginBottom(r) {
+    const i = { [this.breakpoint]: r }, e = t("marginBottom", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  marginLeft(r) {
+    const i = { [this.breakpoint]: r }, e = t("marginLeft", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  marginRight(r) {
+    const i = { [this.breakpoint]: r }, e = t("marginRight", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  // Typography properties
+  fontSize(r) {
+    const i = { [this.breakpoint]: r }, e = t("fontSize", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  textAlign(r) {
+    const i = { [this.breakpoint]: r }, e = t("textAlign", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  // Display properties
+  display(r) {
+    const i = { [this.breakpoint]: r }, e = t("display", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  // Flexbox properties
+  flexDirection(r) {
+    const i = { [this.breakpoint]: r }, e = t("flexDirection", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  justifyContent(r) {
+    const i = { [this.breakpoint]: r }, e = t("justifyContent", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  alignItems(r) {
+    const i = { [this.breakpoint]: r }, e = t("alignItems", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  // Visual properties
+  backgroundColor(r) {
+    const i = { [this.breakpoint]: r }, e = t("backgroundColor", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  color(r) {
+    const i = { [this.breakpoint]: r }, e = t("color", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+  opacity(r) {
+    const i = { [this.breakpoint]: r }, e = t("opacity", i);
+    return this.parentBuilder.addModifier(e), this.baseBuilder;
+  }
+}
+function m(a) {
+  return new f(a);
+}
+export {
+  f as ResponsiveModifierBuilderImpl,
+  m as createResponsiveBuilder
+};
+//# sourceMappingURL=responsive-builder.js.map

package/dist/modifiers/responsive/responsive-builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-builder.js","sources":["../../../src/modifiers/responsive/responsive-builder.ts"],"sourcesContent":["/**\n * Responsive Modifier Builder\n *\n * Extends the existing ModifierBuilder with responsive capabilities.\n * Provides a fluent API for creating responsive modifiers that integrate\n * seamlessly with the existing modifier system.\n */\n\nimport type { ModifierBuilder, Modifier } from '../types'\nimport type { ComponentInstance } from '../../runtime/types'\nimport {\n  ResponsiveValue,\n  ResponsiveStyleConfig,\n  ResponsiveSpacingConfig,\n  ResponsiveDimensionConfig,\n  ResponsiveTypographyConfig,\n  BreakpointKey,\n  isResponsiveValue\n} from './types'\nimport {\n  createResponsiveModifier,\n  createMediaQueryModifier,\n  createResponsivePropertyModifier,\n  createResponsiveLayoutModifier\n} from './responsive-modifier'\n\n/**\n * Responsive modifier builder interface\n */\nexport interface ResponsiveModifierBuilder<T extends ComponentInstance = ComponentInstance> {\n  // Core responsive methods\n  responsive(config: ResponsiveStyleConfig): ResponsiveModifierBuilder<T>\n  mediaQuery(query: string, styles: Record<string, any>): ResponsiveModifierBuilder<T>\n\n  // Advanced media query methods\n  orientation(orientation: 'portrait' | 'landscape', styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  colorScheme(scheme: 'light' | 'dark', styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  reducedMotion(styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  highContrast(styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  touchDevice(styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  mouseDevice(styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  retina(styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  print(styles: Record<string, any>): ResponsiveModifierBuilder<T>\n\n  // Responsive layout methods\n  responsiveLayout(config: {\n    direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>\n    wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>\n    justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>\n    align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>\n    gap?: ResponsiveValue<number | string>\n  }): ResponsiveModifierBuilder<T>\n\n  // Responsive dimension methods\n  responsiveWidth(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T>\n  responsiveHeight(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T>\n  responsiveSize(config: ResponsiveDimensionConfig): ResponsiveModifierBuilder<T>\n\n  // Responsive spacing methods\n  responsivePadding(value: ResponsiveValue<number | string> | ResponsiveSpacingConfig): ResponsiveModifierBuilder<T>\n  responsiveMargin(value: ResponsiveValue<number | string> | ResponsiveSpacingConfig): ResponsiveModifierBuilder<T>\n\n  // Responsive typography methods\n  responsiveFont(config: ResponsiveTypographyConfig): ResponsiveModifierBuilder<T>\n  responsiveFontSize(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T>\n  responsiveTextAlign(value: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>): ResponsiveModifierBuilder<T>\n\n  // Breakpoint shorthand methods\n  base: ResponsiveBreakpointBuilder<T>\n  sm: ResponsiveBreakpointBuilder<T>\n  md: ResponsiveBreakpointBuilder<T>\n  lg: ResponsiveBreakpointBuilder<T>\n  xl: ResponsiveBreakpointBuilder<T>\n  '2xl': ResponsiveBreakpointBuilder<T>\n\n  // Builder methods\n  addModifier(modifier: Modifier): void\n  build(): T\n}\n\n/**\n * Breakpoint-specific builder for shorthand syntax\n * Returns ModifierBuilder to allow chaining with regular modifiers after responsive ones\n */\nexport interface ResponsiveBreakpointBuilder<T extends ComponentInstance = ComponentInstance> {\n  // Layout properties\n  width(value: number | string): ModifierBuilder<T>\n  height(value: number | string): ModifierBuilder<T>\n  minWidth(value: number | string): ModifierBuilder<T>\n  maxWidth(value: number | string): ModifierBuilder<T>\n  minHeight(value: number | string): ModifierBuilder<T>\n  maxHeight(value: number | string): ModifierBuilder<T>\n  \n  // Padding properties\n  padding(value: number | string): ModifierBuilder<T>\n  paddingHorizontal(value: number | string): ModifierBuilder<T>\n  paddingVertical(value: number | string): ModifierBuilder<T>\n  paddingTop(value: number | string): ModifierBuilder<T>\n  paddingBottom(value: number | string): ModifierBuilder<T>\n  paddingLeft(value: number | string): ModifierBuilder<T>\n  paddingRight(value: number | string): ModifierBuilder<T>\n  \n  // Margin properties\n  margin(value: number | string): ModifierBuilder<T>\n  marginHorizontal(value: number | string): ModifierBuilder<T>\n  marginVertical(value: number | string): ModifierBuilder<T>\n  marginTop(value: number | string): ModifierBuilder<T>\n  marginBottom(value: number | string): ModifierBuilder<T>\n  marginLeft(value: number | string): ModifierBuilder<T>\n  marginRight(value: number | string): ModifierBuilder<T>\n\n  // Typography properties\n  fontSize(value: number | string): ModifierBuilder<T>\n  textAlign(value: 'left' | 'center' | 'right' | 'justify'): ModifierBuilder<T>\n\n  // Display properties\n  display(value: 'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid'): ModifierBuilder<T>\n\n  // Flexbox properties\n  flexDirection(value: 'row' | 'column' | 'row-reverse' | 'column-reverse'): ModifierBuilder<T>\n  justifyContent(value: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'): ModifierBuilder<T>\n  alignItems(value: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'): ModifierBuilder<T>\n\n  // Visual properties\n  backgroundColor(value: string): ModifierBuilder<T>\n  color(value: string): ModifierBuilder<T>\n  opacity(value: number): ModifierBuilder<T>\n}\n\n/**\n * Implementation of responsive modifier builder using Proxy delegation\n */\nexport class ResponsiveModifierBuilderImpl<T extends ComponentInstance = ComponentInstance> implements ResponsiveModifierBuilder<T> {\n  constructor(private baseBuilder: ModifierBuilder<T>) {\n    // Return a Proxy that delegates unknown methods to baseBuilder\n    return new Proxy(this, {\n      get(target, prop) {\n        // If the method exists on this class, use it\n        if (prop in target) {\n          return target[prop as keyof ResponsiveModifierBuilderImpl<T>]\n        }\n\n        // Special handling for responsive breakpoint getters\n        if (prop === 'base' || prop === 'sm' || prop === 'md' || prop === 'lg' || prop === 'xl' || prop === '2xl') {\n          return target[prop as keyof ResponsiveModifierBuilderImpl<T>]\n        }\n\n        // Delegate everything else to baseBuilder\n        const baseProp = (target.baseBuilder as any)[prop]\n        if (typeof baseProp === 'function') {\n          return (...args: any[]) => {\n            baseProp.apply(target.baseBuilder, args)\n            // Return baseBuilder to maintain fluent chain\n            return target.baseBuilder\n          }\n        }\n\n        return baseProp\n      }\n    }) as ResponsiveModifierBuilderImpl<T>\n  }\n\n  // Delegate essential builder methods\n  addModifier(modifier: Modifier): void {\n    this.baseBuilder.addModifier(modifier)\n  }\n\n  build(): T {\n    return this.baseBuilder.build()\n  }\n\n  // Core responsive methods\n  responsive(config: ResponsiveStyleConfig): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsiveModifier(config)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  mediaQuery(query: string, styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  // Advanced media query methods\n  orientation(orientation: 'portrait' | 'landscape', styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = `(orientation: ${orientation})`\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  colorScheme(scheme: 'light' | 'dark', styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = `(prefers-color-scheme: ${scheme})`\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  reducedMotion(styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = '(prefers-reduced-motion: reduce)'\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  highContrast(styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = '(prefers-contrast: high)'\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  touchDevice(styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = '(pointer: coarse)'\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  mouseDevice(styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = '(pointer: fine)'\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  retina(styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = '(min-resolution: 2dppx)'\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  print(styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = 'print'\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  // Responsive layout methods\n  responsiveLayout(config: {\n    direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>\n    wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>\n    justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>\n    align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>\n    gap?: ResponsiveValue<number | string>\n  }): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsiveLayoutModifier(config)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  // Responsive dimension methods\n  responsiveWidth(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsivePropertyModifier('width', value)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  responsiveHeight(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsivePropertyModifier('height', value)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  responsiveSize(config: ResponsiveDimensionConfig): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsiveModifier(config)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  // Responsive spacing methods\n  responsivePadding(value: ResponsiveValue<number | string> | ResponsiveSpacingConfig): ResponsiveModifierBuilder<T> {\n    if (isResponsiveValue(value) || typeof value === 'string' || typeof value === 'number') {\n      const modifier = createResponsivePropertyModifier('padding', value as ResponsiveValue<number | string>)\n      this.baseBuilder.addModifier(modifier)\n    } else {\n      // Handle spacing config\n      const styleConfig: ResponsiveStyleConfig = {}\n      const config = value as ResponsiveSpacingConfig\n\n      if (config.all) styleConfig.padding = config.all\n      if (config.horizontal) {\n        styleConfig.paddingLeft = config.horizontal\n        styleConfig.paddingRight = config.horizontal\n      }\n      if (config.vertical) {\n        styleConfig.paddingTop = config.vertical\n        styleConfig.paddingBottom = config.vertical\n      }\n      if (config.top) styleConfig.paddingTop = config.top\n      if (config.right) styleConfig.paddingRight = config.right\n      if (config.bottom) styleConfig.paddingBottom = config.bottom\n      if (config.left) styleConfig.paddingLeft = config.left\n\n      const modifier = createResponsiveModifier(styleConfig)\n      this.baseBuilder.addModifier(modifier)\n    }\n    return this\n  }\n\n  responsiveMargin(value: ResponsiveValue<number | string> | ResponsiveSpacingConfig): ResponsiveModifierBuilder<T> {\n    if (isResponsiveValue(value) || typeof value === 'string' || typeof value === 'number') {\n      const modifier = createResponsivePropertyModifier('margin', value as ResponsiveValue<number | string>)\n      this.baseBuilder.addModifier(modifier)\n    } else {\n      // Handle spacing config\n      const styleConfig: ResponsiveStyleConfig = {}\n      const config = value as ResponsiveSpacingConfig\n\n      if (config.all) styleConfig.margin = config.all\n      if (config.horizontal) {\n        styleConfig.marginLeft = config.horizontal\n        styleConfig.marginRight = config.horizontal\n      }\n      if (config.vertical) {\n        styleConfig.marginTop = config.vertical\n        styleConfig.marginBottom = config.vertical\n      }\n      if (config.top) styleConfig.marginTop = config.top\n      if (config.right) styleConfig.marginRight = config.right\n      if (config.bottom) styleConfig.marginBottom = config.bottom\n      if (config.left) styleConfig.marginLeft = config.left\n\n      const modifier = createResponsiveModifier(styleConfig)\n      this.baseBuilder.addModifier(modifier)\n    }\n    return this\n  }\n\n  // Responsive typography methods\n  responsiveFont(config: ResponsiveTypographyConfig): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsiveModifier(config)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  responsiveFontSize(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsivePropertyModifier('fontSize', value)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  responsiveTextAlign(value: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsivePropertyModifier('textAlign', value)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  // Breakpoint shorthand methods\n  get base(): ResponsiveBreakpointBuilder<T> {\n    return new ResponsiveBreakpointBuilderImpl('base', this, this.baseBuilder)\n  }\n\n  get sm(): ResponsiveBreakpointBuilder<T> {\n    return new ResponsiveBreakpointBuilderImpl('sm', this, this.baseBuilder)\n  }\n\n  get md(): ResponsiveBreakpointBuilder<T> {\n    return new ResponsiveBreakpointBuilderImpl('md', this, this.baseBuilder)\n  }\n\n  get lg(): ResponsiveBreakpointBuilder<T> {\n    return new ResponsiveBreakpointBuilderImpl('lg', this, this.baseBuilder)\n  }\n\n  get xl(): ResponsiveBreakpointBuilder<T> {\n    return new ResponsiveBreakpointBuilderImpl('xl', this, this.baseBuilder)\n  }\n\n  get '2xl'(): ResponsiveBreakpointBuilder<T> {\n    return new ResponsiveBreakpointBuilderImpl('2xl', this, this.baseBuilder)\n  }\n\n  // Delegate to base builder methods\n  [key: string]: any\n}\n\n/**\n * Implementation of breakpoint-specific builder\n */\nclass ResponsiveBreakpointBuilderImpl<T extends ComponentInstance = ComponentInstance> implements ResponsiveBreakpointBuilder<T> {\n  constructor(\n    private breakpoint: BreakpointKey,\n    private parentBuilder: ResponsiveModifierBuilder<T>,\n    private baseBuilder: ModifierBuilder<T>\n  ) {}\n\n  // Layout properties\n  width(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('width', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  height(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('height', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  minWidth(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('minWidth', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  maxWidth(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('maxWidth', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  minHeight(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('minHeight', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  maxHeight(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('maxHeight', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  padding(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('padding', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  paddingHorizontal(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const leftModifier = createResponsivePropertyModifier('paddingLeft', responsiveValue)\n    const rightModifier = createResponsivePropertyModifier('paddingRight', responsiveValue)\n    this.parentBuilder.addModifier(leftModifier)\n    this.parentBuilder.addModifier(rightModifier)\n    return this.baseBuilder\n  }\n\n  paddingVertical(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const topModifier = createResponsivePropertyModifier('paddingTop', responsiveValue)\n    const bottomModifier = createResponsivePropertyModifier('paddingBottom', responsiveValue)\n    this.parentBuilder.addModifier(topModifier)\n    this.parentBuilder.addModifier(bottomModifier)\n    return this.baseBuilder\n  }\n\n  paddingTop(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('paddingTop', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  paddingBottom(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('paddingBottom', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  paddingLeft(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('paddingLeft', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  paddingRight(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('paddingRight', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  margin(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('margin', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  marginHorizontal(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const leftModifier = createResponsivePropertyModifier('marginLeft', responsiveValue)\n    const rightModifier = createResponsivePropertyModifier('marginRight', responsiveValue)\n    this.parentBuilder.addModifier(leftModifier)\n    this.parentBuilder.addModifier(rightModifier)\n    return this.baseBuilder\n  }\n\n  marginVertical(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const topModifier = createResponsivePropertyModifier('marginTop', responsiveValue)\n    const bottomModifier = createResponsivePropertyModifier('marginBottom', responsiveValue)\n    this.parentBuilder.addModifier(topModifier)\n    this.parentBuilder.addModifier(bottomModifier)\n    return this.baseBuilder\n  }\n\n  marginTop(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('marginTop', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  marginBottom(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('marginBottom', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  marginLeft(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('marginLeft', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  marginRight(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('marginRight', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  // Typography properties\n  fontSize(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('fontSize', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  textAlign(value: 'left' | 'center' | 'right' | 'justify'): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('textAlign', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  // Display properties\n  display(value: 'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid'): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('display', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  // Flexbox properties\n  flexDirection(value: 'row' | 'column' | 'row-reverse' | 'column-reverse'): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('flexDirection', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  justifyContent(value: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('justifyContent', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  alignItems(value: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('alignItems', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  // Visual properties\n  backgroundColor(value: string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('backgroundColor', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  color(value: string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('color', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  opacity(value: number): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('opacity', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n}\n\n/**\n * Utility function to wrap existing modifier builder with responsive capabilities\n */\nexport function withResponsive<T extends ComponentInstance = ComponentInstance>(builder: ModifierBuilder<T>): ResponsiveModifierBuilder<T> {\n  return new ResponsiveModifierBuilderImpl(builder)\n}\n\n/**\n * Create a responsive modifier builder from scratch\n */\nexport function createResponsiveBuilder<T extends ComponentInstance = ComponentInstance>(baseBuilder: ModifierBuilder<T>): ResponsiveModifierBuilder<T> {\n  return new ResponsiveModifierBuilderImpl(baseBuilder)\n}\n"],"names":["ResponsiveModifierBuilderImpl","baseBuilder","target","prop","baseProp","args","modifier","config","createResponsiveModifier","query","styles","createMediaQueryModifier","orientation","scheme","createResponsiveLayoutModifier","value","createResponsivePropertyModifier","isResponsiveValue","styleConfig","ResponsiveBreakpointBuilderImpl","breakpoint","parentBuilder","responsiveValue","leftModifier","rightModifier","topModifier","bottomModifier","createResponsiveBuilder"],"mappings":"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"}

package/dist/modifiers/responsive/responsive-modifier.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("../base.cjs"),d=require("./types.cjs"),h=require("./css-generator.cjs"),C=require("./performance.cjs");require("../../reactive/cleanup.cjs");const u=require("../../reactive/computed.cjs"),M=require("../../reactive/effect.cjs");require("../../reactive/unified-scheduler.cjs");const l=require("../../reactive/signal.cjs");require("../../reactive/scheduler.cjs");const q=require("../../reactive/theme.cjs");var b=Object.defineProperty,I=(i,e,t)=>e in i?b(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,c=(i,e,t)=>I(i,typeof e!="symbol"?e+"":e,t);const S=250;class f extends g.BaseModifier{constructor(e){super(e),c(this,"type","responsive"),c(this,"priority",S),c(this,"generatedCSS",null),c(this,"elementSelector",""),c(this,"_config"),this._config=e}get config(){return this._config}apply(e,t){const r=e.element;!r||!(r instanceof HTMLElement)||(this.elementSelector=this.generateUniqueSelector(r),r.classList.add(this.getClassFromSelector(this.elementSelector)),this.generateAndInjectCSS(),this.setupReactiveUpdates())}generateAndInjectCSS(){const e=C.ResponsivePerformanceMonitor.startMeasurement("css-generation");try{const t=new h.ResponsiveCSSGenerator({selector:this.elementSelector,generateMinified:process.env.NODE_ENV==="production",includeComments:process.env.NODE_ENV!=="production",optimizeOutput:!0});this.generatedCSS=t.generateResponsiveCSS(this.config),this.generatedCSS.cssRules.length>0&&h.CSSInjector.injectCSS(this.generatedCSS.cssRules)}finally{e()}}setupReactiveUpdates(){this.hasReactiveValues(this.config)&&M.createEffect(()=>{this.trackReactiveDependencies(this.config);const t=this.resolveReactiveConfig(this.config);this.updateConfig(t)})}trackReactiveDependencies(e){let t=!1;for(const[r,s]of Object.entries(e))if(this.isReactiveValue(s))l.isSignal(s)||u.isComputed(s)?s():this.isAsset(s)&&(t=!0,s.resolve());else if(d.isResponsiveValue(s))for(const[o,n]of Object.entries(s))this.isReactiveValue(n)&&(l.isSignal(n)||u.isComputed(n)?n():this.isAsset(n)&&(t=!0,n.resolve()));t&&q.getThemeSignal()()}updateConfig(e){this._config=e,this.generateAndInjectCSS()}generateUniqueSelector(e){return`.${`tachui-responsive-${this.generateUniqueId()}`}`}getClassFromSelector(e){return e.replace(/^\./,"")}generateUniqueId(){return Math.random().toString(36).substr(2,9)}hasReactiveValues(e){for(const t of Object.values(e)){if(this.isReactiveValue(t))return!0;if(d.isResponsiveValue(t)){for(const r of Object.values(t))if(this.isReactiveValue(r))return!0}}return!1}isReactiveValue(e){return!!(l.isSignal(e)||u.isComputed(e)||this.isAsset(e))}isAsset(e){return e!=null&&typeof e=="object"&&"resolve"in e&&typeof e.resolve=="function"}resolveReactiveConfig(e){const t={};for(const[r,s]of Object.entries(e))if(this.isReactiveValue(s))l.isSignal(s)||u.isComputed(s)?t[r]=s():this.isAsset(s)&&(t[r]=s.resolve());else if(d.isResponsiveValue(s)){const o={};for(const[n,a]of Object.entries(s))this.isReactiveValue(a)?l.isSignal(a)||u.isComputed(a)?o[n]=a():this.isAsset(a)&&(o[n]=a.resolve()):o[n]=a;t[r]=o}else t[r]=s;return t}getGeneratedCSS(){return this.generatedCSS}getConfig(){return this.config}}function V(i){return new f(i)}class v extends g.BaseModifier{constructor(e,t){super({query:e,styles:t}),c(this,"type","media-query"),c(this,"priority",S+1),c(this,"elementSelector","")}get query(){return this.properties.query}get styles(){return this.properties.styles}apply(e,t){const r=e.element;!r||!(r instanceof HTMLElement)||(this.elementSelector=this.generateUniqueSelector(r),r.classList.add(this.getClassFromSelector(this.elementSelector)),this.generateMediaQueryCSS())}generateMediaQueryCSS(){const{generateMinified:e=process.env.NODE_ENV==="production"}={},t=e?"":"  ",r=e?"":"    ",s=e?"":`
+`,o=e?"":" ";let n=`@media ${this.query}${o}{${s}`;n+=`${t}${this.elementSelector}${o}{${s}`;for(const[a,p]of Object.entries(this.styles)){const m=a.replace(/[A-Z]/g,y=>`-${y.toLowerCase()}`),R=typeof p=="number"?`${p}px`:p.toString();n+=`${r}${m}:${o}${R};${s}`}n+=`${t}}${s}`,n+=`}${s}`,h.CSSInjector.injectCSS([n])}generateUniqueSelector(e){return`.${`tachui-mq-${Math.random().toString(36).substr(2,9)}`}`}getClassFromSelector(e){return e.replace(/^\./,"")}}function _(i,e){return new v(i,e)}function $(i,e){const t={[i]:e};return new f(t)}function O(i){const e={};return i.direction&&(e.flexDirection=i.direction),i.wrap&&(e.flexWrap=i.wrap),i.justify&&(e.justifyContent=i.justify),i.align&&(e.alignItems=i.align),i.gap&&(e.gap=i.gap),new f(e)}exports.MediaQueryModifier=v;exports.RESPONSIVE_MODIFIER_PRIORITY=S;exports.ResponsiveModifier=f;exports.createMediaQueryModifier=_;exports.createResponsiveLayoutModifier=O;exports.createResponsiveModifier=V;exports.createResponsivePropertyModifier=$;
+//# sourceMappingURL=responsive-modifier.cjs.map

package/dist/modifiers/responsive/responsive-modifier.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-modifier.cjs","sources":["../../../src/modifiers/responsive/responsive-modifier.ts"],"sourcesContent":["/**\n * Responsive Modifier Implementation\n * \n * Core responsive modifier that integrates with the existing tachUI modifier system.\n * Provides CSS-native media query generation with backward compatibility.\n */\n\nimport { BaseModifier } from '../base'\nimport type { ModifierContext } from '../types'\nimport type { DOMNode } from '../../runtime/types'\nimport {\n  ResponsiveValue,\n  ResponsiveStyleConfig,\n  ResponsiveModifierResult,\n  isResponsiveValue,\n  BreakpointKey\n} from './types'\nimport { ResponsiveCSSGenerator, CSSInjector } from './css-generator'\nimport { ResponsivePerformanceMonitor } from './performance'\nimport { createEffect, isSignal, isComputed } from '../../reactive'\nimport { getThemeSignal } from '../../reactive/theme'\n\n/**\n * Responsive modifier priority (between appearance and interaction)\n */\nexport const RESPONSIVE_MODIFIER_PRIORITY = 250\n\n/**\n * Core responsive modifier class\n */\nexport class ResponsiveModifier extends BaseModifier<ResponsiveStyleConfig> {\n  readonly type = 'responsive'\n  readonly priority = RESPONSIVE_MODIFIER_PRIORITY\n  private generatedCSS: ResponsiveModifierResult | null = null\n  private elementSelector: string = ''\n  private _config: ResponsiveStyleConfig\n  \n  constructor(config: ResponsiveStyleConfig) {\n    super(config)\n    this._config = config\n  }\n  \n  get config(): ResponsiveStyleConfig {\n    return this._config\n  }\n  \n  /**\n   * Apply responsive styles to the element\n   */\n  apply(node: DOMNode, _context: ModifierContext): DOMNode | undefined {\n    const element = node.element\n    \n    if (!element || !(element instanceof HTMLElement)) {\n      return undefined\n    }\n    \n    // Generate unique selector for this element\n    this.elementSelector = this.generateUniqueSelector(element)\n    element.classList.add(this.getClassFromSelector(this.elementSelector))\n    \n    // Generate responsive CSS\n    this.generateAndInjectCSS()\n    \n    // Set up reactive updates for dynamic responsive values\n    this.setupReactiveUpdates()\n    \n    return undefined // No DOM modifications needed\n  }\n  \n  /**\n   * Generate and inject responsive CSS\n   */\n  private generateAndInjectCSS(): void {\n    const endMeasurement = ResponsivePerformanceMonitor.startMeasurement('css-generation')\n    \n    try {\n      // Always use immediate CSS generation for responsive modifiers\n      // Batching can cause FOUC and layout issues when components need responsive styles immediately\n      const generator = new ResponsiveCSSGenerator({\n        selector: this.elementSelector,\n        generateMinified: process.env.NODE_ENV === 'production',\n        includeComments: process.env.NODE_ENV !== 'production',\n        optimizeOutput: true\n      })\n      \n      this.generatedCSS = generator.generateResponsiveCSS(this.config)\n      \n      // Inject CSS rules into the document immediately\n      if (this.generatedCSS.cssRules.length > 0) {\n        CSSInjector.injectCSS(this.generatedCSS.cssRules)\n      }\n    } finally {\n      endMeasurement()\n    }\n  }\n  \n  /**\n   * Set up reactive updates for dynamic responsive values\n   */\n  private setupReactiveUpdates(): void {\n    // Check if any values are reactive signals\n    const hasReactiveValues = this.hasReactiveValues(this.config)\n    \n    if (hasReactiveValues) {\n      // Create reactive effect to regenerate CSS when values change\n      createEffect(() => {\n        // Track all reactive dependencies by accessing them\n        this.trackReactiveDependencies(this.config)\n        \n        // Re-evaluate config with current signal values\n        const currentConfig = this.resolveReactiveConfig(this.config)\n        \n        // Update CSS if config changed\n        this.updateConfig(currentConfig)\n      })\n    }\n  }\n  \n  /**\n   * Track reactive dependencies by accessing all reactive values\n   */\n  private trackReactiveDependencies(config: ResponsiveStyleConfig): void {\n    // Track theme signal for any Assets that might be present\n    let hasAssets = false\n    \n    for (const [_key, value] of Object.entries(config)) {\n      if (this.isReactiveValue(value)) {\n        if (isSignal(value) || isComputed(value)) {\n          value() // Access to establish dependency tracking\n        } else if (this.isAsset(value)) {\n          hasAssets = true\n          value.resolve() // Access to establish theme dependency tracking\n        }\n      } else if (isResponsiveValue(value)) {\n        for (const [_breakpoint, breakpointValue] of Object.entries(value)) {\n          if (this.isReactiveValue(breakpointValue)) {\n            if (isSignal(breakpointValue) || isComputed(breakpointValue)) {\n              breakpointValue() // Access to establish dependency tracking\n            } else if (this.isAsset(breakpointValue)) {\n              hasAssets = true\n              breakpointValue.resolve() // Access to establish theme dependency tracking\n            }\n          }\n        }\n      }\n    }\n    \n    // If we have Assets, explicitly track the theme signal to ensure theme changes trigger updates\n    if (hasAssets) {\n      const themeSignal = getThemeSignal()\n      themeSignal() // Access theme signal to establish dependency\n    }\n  }\n  \n  /**\n   * Update configuration and regenerate CSS\n   */\n  private updateConfig(newConfig: ResponsiveStyleConfig): void {\n    this._config = newConfig\n    \n    // Clear old CSS rules (if we had a way to track them individually)\n    // For now, we'll rely on CSS override behavior\n    \n    // Generate new CSS\n    this.generateAndInjectCSS()\n  }\n  \n  /**\n   * Generate unique CSS selector for this element\n   */\n  private generateUniqueSelector(_element: HTMLElement): string {\n    const uniqueId = this.generateUniqueId()\n    const className = `tachui-responsive-${uniqueId}`\n    return `.${className}`\n  }\n  \n  /**\n   * Extract class name from CSS selector\n   */\n  private getClassFromSelector(selector: string): string {\n    return selector.replace(/^\\./, '') // Remove leading dot\n  }\n  \n  /**\n   * Generate unique ID for CSS class names\n   */\n  private generateUniqueId(): string {\n    return Math.random().toString(36).substr(2, 9)\n  }\n  \n  /**\n   * Check if configuration contains reactive values (signals)\n   */\n  private hasReactiveValues(config: ResponsiveStyleConfig): boolean {\n    for (const value of Object.values(config)) {\n      if (this.isReactiveValue(value)) {\n        return true\n      }\n      \n      if (isResponsiveValue(value)) {\n        for (const breakpointValue of Object.values(value)) {\n          if (this.isReactiveValue(breakpointValue)) {\n            return true\n          }\n        }\n      }\n    }\n    \n    return false\n  }\n  \n  /**\n   * Check if a value is a reactive signal, computed, or Asset\n   */\n  private isReactiveValue(value: any): boolean {\n    // Check for TachUI signals and computed values\n    if (isSignal(value) || isComputed(value)) {\n      return true\n    }\n    \n    // Check for Assets (have a resolve method and are theme-reactive)\n    if (this.isAsset(value)) {\n      return true\n    }\n    \n    return false\n  }\n  \n  /**\n   * Check if a value is an Asset object\n   */\n  private isAsset(value: any): boolean {\n    return (\n      value !== null &&\n      value !== undefined &&\n      typeof value === 'object' &&\n      'resolve' in value &&\n      typeof value.resolve === 'function'\n    )\n  }\n  \n  /**\n   * Resolve configuration with current signal values\n   */\n  private resolveReactiveConfig(config: ResponsiveStyleConfig): ResponsiveStyleConfig {\n    const resolved: ResponsiveStyleConfig = {}\n    \n    for (const [key, value] of Object.entries(config)) {\n      if (this.isReactiveValue(value)) {\n        // Handle different types of reactive values\n        if (isSignal(value) || isComputed(value)) {\n          resolved[key] = value() // Call signal/computed to get current value\n        } else if (this.isAsset(value)) {\n          resolved[key] = value.resolve() // Resolve Asset to current theme value\n        }\n      } else if (isResponsiveValue(value)) {\n        const resolvedBreakpoints: Partial<Record<BreakpointKey, any>> = {}\n        \n        for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n          if (this.isReactiveValue(breakpointValue)) {\n            // Handle different types of reactive values at breakpoint level\n            if (isSignal(breakpointValue) || isComputed(breakpointValue)) {\n              resolvedBreakpoints[breakpoint as BreakpointKey] = breakpointValue()\n            } else if (this.isAsset(breakpointValue)) {\n              resolvedBreakpoints[breakpoint as BreakpointKey] = breakpointValue.resolve()\n            }\n          } else {\n            resolvedBreakpoints[breakpoint as BreakpointKey] = breakpointValue\n          }\n        }\n        \n        resolved[key] = resolvedBreakpoints\n      } else {\n        resolved[key] = value\n      }\n    }\n    \n    return resolved\n  }\n  \n  /**\n   * Get generated CSS information (for debugging)\n   */\n  getGeneratedCSS(): ResponsiveModifierResult | null {\n    return this.generatedCSS\n  }\n  \n  /**\n   * Get configuration (for debugging)\n   */\n  getConfig(): ResponsiveStyleConfig {\n    return this.config\n  }\n}\n\n/**\n * Factory function to create responsive modifiers\n */\nexport function createResponsiveModifier(config: ResponsiveStyleConfig): ResponsiveModifier {\n  return new ResponsiveModifier(config)\n}\n\n/**\n * Media query modifier for custom media queries\n */\nexport class MediaQueryModifier extends BaseModifier<{ query: string; styles: Record<string, any> }> {\n  readonly type = 'media-query'\n  readonly priority = RESPONSIVE_MODIFIER_PRIORITY + 1 // Slightly higher than responsive\n  private elementSelector: string = ''\n  \n  constructor(query: string, styles: Record<string, any>) {\n    super({ query, styles })\n  }\n  \n  get query(): string {\n    return this.properties.query\n  }\n  \n  get styles(): Record<string, any> {\n    return this.properties.styles\n  }\n  \n  apply(node: DOMNode, _context: ModifierContext): DOMNode | undefined {\n    const element = node.element\n    \n    if (!element || !(element instanceof HTMLElement)) {\n      return undefined\n    }\n    \n    // Generate unique selector\n    this.elementSelector = this.generateUniqueSelector(element)\n    element.classList.add(this.getClassFromSelector(this.elementSelector))\n    \n    // Generate and inject media query CSS\n    this.generateMediaQueryCSS()\n    \n    return undefined\n  }\n  \n  private generateMediaQueryCSS(): void {\n    const { generateMinified = process.env.NODE_ENV === 'production' } = {}\n    const indent = generateMinified ? '' : '  '\n    const doubleIndent = generateMinified ? '' : '    '\n    const newline = generateMinified ? '' : '\\n'\n    const space = generateMinified ? '' : ' '\n    \n    let rule = `@media ${this.query}${space}{${newline}`\n    rule += `${indent}${this.elementSelector}${space}{${newline}`\n    \n    for (const [property, value] of Object.entries(this.styles)) {\n      const cssProperty = property.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)\n      const cssValue = typeof value === 'number' ? `${value}px` : value.toString()\n      rule += `${doubleIndent}${cssProperty}:${space}${cssValue};${newline}`\n    }\n    \n    rule += `${indent}}${newline}`\n    rule += `}${newline}`\n    \n    CSSInjector.injectCSS([rule])\n  }\n  \n  private generateUniqueSelector(_element: HTMLElement): string {\n    const uniqueId = Math.random().toString(36).substr(2, 9)\n    const className = `tachui-mq-${uniqueId}`\n    return `.${className}`\n  }\n  \n  private getClassFromSelector(selector: string): string {\n    return selector.replace(/^\\./, '')\n  }\n}\n\n/**\n * Factory function to create media query modifiers\n */\nexport function createMediaQueryModifier(query: string, styles: Record<string, any>): MediaQueryModifier {\n  return new MediaQueryModifier(query, styles)\n}\n\n/**\n * Utility to create responsive property modifier\n */\nexport function createResponsivePropertyModifier<T>(\n  property: string, \n  value: ResponsiveValue<T>\n): ResponsiveModifier {\n  const config = { [property]: value } as ResponsiveStyleConfig\n  return new ResponsiveModifier(config)\n}\n\n/**\n * Create a responsive layout modifier\n */\nexport function createResponsiveLayoutModifier(config: {\n  direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>\n  wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>\n  justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>\n  align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>\n  gap?: ResponsiveValue<number | string>\n}): ResponsiveModifier {\n  const styleConfig: ResponsiveStyleConfig = {}\n  \n  if (config.direction) styleConfig.flexDirection = config.direction\n  if (config.wrap) styleConfig.flexWrap = config.wrap\n  if (config.justify) styleConfig.justifyContent = config.justify\n  if (config.align) styleConfig.alignItems = config.align\n  if (config.gap) styleConfig.gap = config.gap\n  \n  return new ResponsiveModifier(styleConfig)\n}"],"names":["RESPONSIVE_MODIFIER_PRIORITY","ResponsiveModifier","BaseModifier","config","__publicField","node","_context","element","endMeasurement","ResponsivePerformanceMonitor","generator","ResponsiveCSSGenerator","CSSInjector","createEffect","currentConfig","hasAssets","_key","value","isSignal","isComputed","isResponsiveValue","_breakpoint","breakpointValue","getThemeSignal","newConfig","_element","selector","resolved","key","resolvedBreakpoints","breakpoint","createResponsiveModifier","MediaQueryModifier","query","styles","generateMinified","indent","doubleIndent","newline","space","rule","property","cssProperty","match","cssValue","createMediaQueryModifier","createResponsivePropertyModifier","createResponsiveLayoutModifier","styleConfig"],"mappings":"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"}