@tachui/core 0.7.0-alpha1

package/dist/modifiers/builder.js

@@ -0,0 +1,930 @@
+import { LayoutModifier as h, AppearanceModifier as o, AnimationModifier as d, InteractionModifier as s, LifecycleModifier as f, ResizableModifier as c } from "./base.js";
+import { BackgroundModifier as g } from "./background.js";
+import { borderTop as w, borderRight as b, borderBottom as v, borderLeft as y } from "./border.js";
+import { css as x, cssProperty as M, cssVariable as T } from "./css.js";
+import { flexGrow as C, flexShrink as k, justifyContent as B, alignItems as H, gap as P, flexDirection as S, flexWrap as D } from "./flexbox.js";
+import { margin as a, marginTop as L, marginBottom as z, marginHorizontal as I, marginVertical as W, marginLeft as R, marginRight as A } from "./margin.js";
+import { padding as m, paddingTop as F, paddingBottom as K, paddingLeft as E, paddingRight as G, paddingLeading as _, paddingTrailing as V, paddingHorizontal as j, paddingVertical as U } from "./padding.js";
+import { size as X, width as Y, height as q, maxWidth as N, minWidth as J, maxHeight as Q, minHeight as Z } from "./size.js";
+import { ResponsiveModifierBuilderImpl as u } from "./responsive/responsive-builder.js";
+import { createResponsiveModifier as $ } from "./responsive/responsive-modifier.js";
+import { createModifiableComponent as O } from "./registry.js";
+import { typography as ii, textAlign as ri, textTransform as p, letterSpacing as si, lineHeight as ti, textOverflow as ei, whiteSpace as oi, overflow as hi, textDecoration as ni } from "./typography.js";
+import { cursor as ui, overflowY as di, overflowX as fi, position as ai, zIndex as mi, display as pi } from "./utility.js";
+import { IdModifier as li, DataModifier as ci, AriaModifier as gi, TabIndexModifier as wi } from "./attributes.js";
+import { LineClampModifier as bi, WordBreakModifier as vi, OverflowWrapModifier as yi, HyphensModifier as xi, BackgroundClipModifier as Mi } from "./text.js";
+import { BackdropFilterModifier as l } from "./backdrop.js";
+import { before as Ti, after as Ci } from "./elements.js";
+import { FilterModifier as ki, filter as Bi, saturate as Hi, sepia as Pi, hueRotate as Si, invert as Di, vintagePhoto as Li, blackAndWhite as zi, vibrant as Ii, warmTone as Wi, coolTone as Ri, faded as Ai, highKey as Fi, lowKey as Ki, softFocus as Ei, highContrastMode as Gi, subtleBlur as _i, darkModeInvert as Vi } from "./filters.js";
+import { shadow as ji, textShadow as Ui, shadows as Xi, shadowPreset as Yi } from "./shadows.js";
+import { scale as qi, rotate as Ni, translate as Ji, perspective as Qi } from "./transformations.js";
+import { hover as Zi, hoverEffect as $i, hoverWithTransition as Oi, conditionalHover as ir, interactiveCursor as rr, draggableCursor as sr, textCursor as tr, disabledCursor as er, loadingCursor as or, helpCursor as hr, zoomCursor as nr, buttonHover as ur, cardHover as dr, linkHover as fr, imageHover as ar } from "./effects.js";
+import { transition as mr, transitions as pr, fadeTransition as lr, transformTransition as cr, colorTransition as gr, layoutTransition as wr, buttonTransition as br, cardTransition as vr, modalTransition as yr, smoothTransition as xr, quickTransition as Mr, slowTransition as Tr } from "./transitions.js";
+import { scroll as Cr, scrollBehavior as kr, overscrollBehavior as Br, overscrollBehaviorX as Hr, overscrollBehaviorY as Pr, scrollMargin as Sr, scrollPadding as Dr, scrollSnap as Lr } from "./scroll.js";
+import { asHTML as zr } from "./as-html.js";
+var Ir = Object.defineProperty, Wr = (e, i, r) => i in e ? Ir(e, i, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[i] = r, Rr = (e, i, r) => Wr(e, i + "", r);
+class Ar {
+  constructor(i) {
+    this.component = i, Rr(this, "modifiers", []);
+  }
+  frame(i, r) {
+    let t;
+    return typeof i == "object" ? t = i : (t = {}, i !== void 0 && (t.width = i), r !== void 0 && (t.height = r)), this.modifiers.push(new h({ frame: t })), this;
+  }
+  margin(i) {
+    if (typeof i == "number" || typeof i == "string")
+      this.modifiers.push(a(i));
+    else {
+      const r = i;
+      r.vertical !== void 0 || r.horizontal !== void 0 ? this.modifiers.push(a({
+        vertical: r.vertical,
+        horizontal: r.horizontal
+      })) : (r.top !== void 0 || r.right !== void 0 || r.bottom !== void 0 || r.left !== void 0) && this.modifiers.push(a({
+        top: r.top,
+        right: r.right,
+        bottom: r.bottom,
+        left: r.left
+      }));
+    }
+    return this;
+  }
+  layoutPriority(i) {
+    return this.modifiers.push(new h({ layoutPriority: i })), this;
+  }
+  // New multi-property modifiers
+  size(i) {
+    return this.modifiers.push(X(i)), this;
+  }
+  width(i) {
+    return this.modifiers.push(Y(i)), this;
+  }
+  height(i) {
+    return this.modifiers.push(q(i)), this;
+  }
+  maxWidth(i) {
+    return this.modifiers.push(N(i)), this;
+  }
+  minWidth(i) {
+    return this.modifiers.push(J(i)), this;
+  }
+  maxHeight(i) {
+    return this.modifiers.push(Q(i)), this;
+  }
+  minHeight(i) {
+    return this.modifiers.push(Z(i)), this;
+  }
+  marginTop(i) {
+    return this.modifiers.push(L(i)), this;
+  }
+  marginBottom(i) {
+    return this.modifiers.push(z(i)), this;
+  }
+  marginHorizontal(i) {
+    return this.modifiers.push(I(i)), this;
+  }
+  marginVertical(i) {
+    return this.modifiers.push(W(i)), this;
+  }
+  marginLeft(i) {
+    return this.modifiers.push(R(i)), this;
+  }
+  marginRight(i) {
+    return this.modifiers.push(A(i)), this;
+  }
+  padding(i) {
+    return typeof i == "number" ? this.modifiers.push(m(i)) : this.modifiers.push(m(i)), this;
+  }
+  paddingTop(i) {
+    return this.modifiers.push(F(i)), this;
+  }
+  paddingBottom(i) {
+    return this.modifiers.push(K(i)), this;
+  }
+  paddingLeft(i) {
+    return this.modifiers.push(E(i)), this;
+  }
+  paddingRight(i) {
+    return this.modifiers.push(G(i)), this;
+  }
+  paddingLeading(i) {
+    return this.modifiers.push(_(i)), this;
+  }
+  paddingTrailing(i) {
+    return this.modifiers.push(V(i)), this;
+  }
+  paddingHorizontal(i) {
+    return this.modifiers.push(j(i)), this;
+  }
+  paddingVertical(i) {
+    return this.modifiers.push(U(i)), this;
+  }
+  // Typography modifiers
+  typography(i) {
+    return this.modifiers.push(ii(i)), this;
+  }
+  textAlign(i) {
+    return this.modifiers.push(ri(i)), this;
+  }
+  textTransform(i) {
+    return this.modifiers.push(p(i)), this;
+  }
+  letterSpacing(i) {
+    return this.modifiers.push(si(i)), this;
+  }
+  lineHeight(i) {
+    return this.modifiers.push(ti(i)), this;
+  }
+  textOverflow(i) {
+    return this.modifiers.push(ei(i)), this;
+  }
+  whiteSpace(i) {
+    return this.modifiers.push(oi(i)), this;
+  }
+  overflow(i) {
+    return this.modifiers.push(hi(i)), this;
+  }
+  // Border modifiers
+  borderTop(i, r, t) {
+    return this.modifiers.push(w(i, r, t)), this;
+  }
+  borderRight(i, r, t) {
+    return this.modifiers.push(b(i, r, t)), this;
+  }
+  borderBottom(i, r, t) {
+    return this.modifiers.push(v(i, r, t)), this;
+  }
+  borderLeft(i, r, t) {
+    return this.modifiers.push(y(i, r, t)), this;
+  }
+  // Flexbox modifiers
+  flexGrow(i) {
+    return this.modifiers.push(C(i)), this;
+  }
+  flexShrink(i) {
+    return this.modifiers.push(k(i)), this;
+  }
+  justifyContent(i) {
+    return this.modifiers.push(B(i)), this;
+  }
+  alignItems(i) {
+    return this.modifiers.push(H(i)), this;
+  }
+  gap(i) {
+    return this.modifiers.push(P(i)), this;
+  }
+  flexDirection(i) {
+    return this.modifiers.push(S(i)), this;
+  }
+  flexWrap(i) {
+    return this.modifiers.push(D(i)), this;
+  }
+  // Utility modifiers
+  cursor(i) {
+    return this.modifiers.push(ui(i)), this;
+  }
+  overflowY(i) {
+    return this.modifiers.push(di(i)), this;
+  }
+  overflowX(i) {
+    return this.modifiers.push(fi(i)), this;
+  }
+  position(i) {
+    return this.modifiers.push(ai(i)), this;
+  }
+  zIndex(i) {
+    return this.modifiers.push(mi(i)), this;
+  }
+  display(i) {
+    return this.modifiers.push(pi(i)), this;
+  }
+  // Raw CSS modifiers
+  css(i) {
+    return this.modifiers.push(x(i)), this;
+  }
+  cssProperty(i, r) {
+    return this.modifiers.push(M(i, r)), this;
+  }
+  cssVariable(i, r) {
+    return this.modifiers.push(T(i, r)), this;
+  }
+  textCase(i) {
+    return this.modifiers.push(p(i)), this;
+  }
+  textDecoration(i) {
+    return this.modifiers.push(ni(i)), this;
+  }
+  // Phase 1 SwiftUI modifiers
+  offset(i, r) {
+    return this.modifiers.push(
+      new h({
+        offset: {
+          x: i,
+          y: r ?? 0
+        }
+      })
+    ), this;
+  }
+  clipped() {
+    return this.modifiers.push(new o({ clipped: !0 })), this;
+  }
+  rotationEffect(i, r = "center") {
+    return this.modifiers.push(
+      new d({
+        rotationEffect: {
+          angle: i,
+          anchor: r
+        }
+      })
+    ), this;
+  }
+  // Phase 2 SwiftUI modifiers
+  aspectRatio(i, r = "fit") {
+    return this.modifiers.push(
+      new h({
+        aspectRatio: {
+          ratio: i,
+          contentMode: r
+        }
+      })
+    ), this;
+  }
+  fixedSize(i = !0, r = !0) {
+    return this.modifiers.push(
+      new h({
+        fixedSize: {
+          horizontal: i,
+          vertical: r
+        }
+      })
+    ), this;
+  }
+  clipShape(i, r) {
+    return this.modifiers.push(
+      new o({
+        clipShape: {
+          shape: i,
+          parameters: r || {}
+        }
+      })
+    ), this;
+  }
+  overlay(i, r = "center") {
+    return this.modifiers.push(
+      new d({
+        overlay: {
+          content: i,
+          alignment: r
+        }
+      })
+    ), this;
+  }
+  // Phase 3 SwiftUI modifiers - Critical Transform Modifiers
+  scaleEffect(i, r, t = "center") {
+    return this.modifiers.push(
+      new h({
+        scaleEffect: {
+          x: i,
+          y: r,
+          anchor: t
+        }
+      })
+    ), this;
+  }
+  absolutePosition(i, r) {
+    return this.modifiers.push(
+      new h({
+        position: {
+          x: i,
+          y: r
+        }
+      })
+    ), this;
+  }
+  // Appearance modifiers
+  foregroundColor(i) {
+    return this.modifiers.push(new o({ foregroundColor: i })), this;
+  }
+  backgroundColor(i) {
+    return this.modifiers.push(new o({ backgroundColor: i })), this;
+  }
+  background(i) {
+    return this.modifiers.push(new g({ background: i })), this;
+  }
+  font(i) {
+    let r;
+    return typeof i == "object" ? r = i : r = i !== void 0 ? { size: i } : {}, this.modifiers.push(new o({ font: r })), this;
+  }
+  fontWeight(i) {
+    return this.modifiers.push(new o({ font: { weight: i } })), this;
+  }
+  fontSize(i) {
+    return this.modifiers.push(new o({ font: { size: i } })), this;
+  }
+  fontFamily(i) {
+    return this.modifiers.push(new o({ font: { family: i } })), this;
+  }
+  opacity(i) {
+    return this.modifiers.push(new o({ opacity: i })), this;
+  }
+  cornerRadius(i) {
+    return this.modifiers.push(new o({ cornerRadius: i })), this;
+  }
+  border(i, r) {
+    let t;
+    return typeof i == "object" ? t = i : t = {
+      style: "solid",
+      ...i !== void 0 && { width: i },
+      ...r !== void 0 && { color: r }
+    }, this.modifiers.push(new o({ border: t })), this;
+  }
+  borderWidth(i) {
+    return this.modifiers.push(new o({ border: { width: i } })), this;
+  }
+  shadow(i) {
+    return i && typeof i == "object" && "x" in i && "y" in i && "blur" in i ? this.modifiers.push(ji(i)) : this.modifiers.push(new o({ shadow: i })), this;
+  }
+  textShadow(i) {
+    return this.modifiers.push(Ui(i)), this;
+  }
+  // Additional shadow methods
+  shadows(i) {
+    return this.modifiers.push(Xi(i)), this;
+  }
+  shadowPreset(i) {
+    return this.modifiers.push(Yi(i)), this;
+  }
+  // Visual Effects Modifiers (Phase 2 - Epic: Butternut)
+  blur(i) {
+    return this.modifiers.push(new o({ blur: i })), this;
+  }
+  brightness(i) {
+    return this.modifiers.push(new o({ brightness: i })), this;
+  }
+  contrast(i) {
+    return this.modifiers.push(new o({ contrast: i })), this;
+  }
+  saturation(i) {
+    return this.modifiers.push(new o({ saturation: i })), this;
+  }
+  hueRotation(i) {
+    return this.modifiers.push(new o({ hueRotation: i })), this;
+  }
+  grayscale(i) {
+    return this.modifiers.push(new o({ grayscale: i })), this;
+  }
+  colorInvert(i = 1) {
+    return this.modifiers.push(new o({ colorInvert: i })), this;
+  }
+  dropShadow(i) {
+    return this.modifiers.push(new ki({ filter: { dropShadow: i } })), this;
+  }
+  // Additional filter methods
+  filter(i) {
+    return this.modifiers.push(Bi(i)), this;
+  }
+  saturate(i) {
+    return this.modifiers.push(Hi(i)), this;
+  }
+  sepia(i) {
+    return this.modifiers.push(Pi(i)), this;
+  }
+  hueRotate(i) {
+    return this.modifiers.push(Si(i)), this;
+  }
+  invert(i) {
+    return this.modifiers.push(Di(i)), this;
+  }
+  // Filter presets
+  vintagePhoto(i, r) {
+    return this.modifiers.push(Li(i, r)), this;
+  }
+  blackAndWhite(i) {
+    return this.modifiers.push(zi(i)), this;
+  }
+  vibrant(i, r) {
+    return this.modifiers.push(Ii(i, r)), this;
+  }
+  warmTone(i) {
+    return this.modifiers.push(Wi(i)), this;
+  }
+  coolTone(i) {
+    return this.modifiers.push(Ri(i)), this;
+  }
+  faded(i, r) {
+    return this.modifiers.push(Ai(i, r)), this;
+  }
+  highKey(i, r) {
+    return this.modifiers.push(Fi(i, r)), this;
+  }
+  lowKey(i, r) {
+    return this.modifiers.push(Ki(i, r)), this;
+  }
+  softFocus(i) {
+    return this.modifiers.push(Ei(i)), this;
+  }
+  highContrastMode() {
+    return this.modifiers.push(Gi()), this;
+  }
+  subtleBlur() {
+    return this.modifiers.push(_i()), this;
+  }
+  darkModeInvert() {
+    return this.modifiers.push(Vi()), this;
+  }
+  // Transform modifiers
+  scale(i) {
+    return this.modifiers.push(qi(i)), this;
+  }
+  rotate(i) {
+    return this.modifiers.push(Ni(i)), this;
+  }
+  translate(i) {
+    return this.modifiers.push(Ji(i)), this;
+  }
+  perspective(i) {
+    return this.modifiers.push(Qi(i)), this;
+  }
+  // Hover and cursor effect modifiers
+  hover(i, r) {
+    return this.modifiers.push(Zi(i, r)), this;
+  }
+  hoverEffect(i, r) {
+    return this.modifiers.push($i(i, r)), this;
+  }
+  hoverWithTransition(i, r = 200) {
+    return this.modifiers.push(Oi(i, r)), this;
+  }
+  conditionalHover(i, r) {
+    return this.modifiers.push(ir(i, r)), this;
+  }
+  // Cursor preset methods
+  interactiveCursor() {
+    return this.modifiers.push(rr()), this;
+  }
+  draggableCursor() {
+    return this.modifiers.push(sr()), this;
+  }
+  textCursor() {
+    return this.modifiers.push(tr()), this;
+  }
+  disabledCursor() {
+    return this.modifiers.push(er()), this;
+  }
+  loadingCursor() {
+    return this.modifiers.push(or()), this;
+  }
+  helpCursor() {
+    return this.modifiers.push(hr()), this;
+  }
+  zoomCursor(i = "in") {
+    return this.modifiers.push(nr(i)), this;
+  }
+  // Hover effect presets
+  buttonHover() {
+    return this.modifiers.push(ur()), this;
+  }
+  cardHover() {
+    return this.modifiers.push(dr()), this;
+  }
+  linkHover() {
+    return this.modifiers.push(fr()), this;
+  }
+  imageHover() {
+    return this.modifiers.push(ar()), this;
+  }
+  // Transition modifiers
+  transition(i = "all", r = 300, t = "ease", n = 0) {
+    return this.modifiers.push(mr(i, r, t, n)), this;
+  }
+  transitions(i) {
+    return this.modifiers.push(pr(i)), this;
+  }
+  // Transition presets
+  fadeTransition(i = 200) {
+    return this.modifiers.push(lr(i)), this;
+  }
+  transformTransition(i = 300) {
+    return this.modifiers.push(cr(i)), this;
+  }
+  colorTransition(i = 150) {
+    return this.modifiers.push(gr(i)), this;
+  }
+  layoutTransition(i = 250) {
+    return this.modifiers.push(wr(i)), this;
+  }
+  buttonTransition() {
+    return this.modifiers.push(br()), this;
+  }
+  cardTransition() {
+    return this.modifiers.push(vr()), this;
+  }
+  modalTransition() {
+    return this.modifiers.push(yr()), this;
+  }
+  smoothTransition(i = 300) {
+    return this.modifiers.push(xr(i)), this;
+  }
+  quickTransition(i = 150) {
+    return this.modifiers.push(Mr(i)), this;
+  }
+  slowTransition(i = 500) {
+    return this.modifiers.push(Tr(i)), this;
+  }
+  // Scroll modifiers
+  scroll(i) {
+    return this.modifiers.push(Cr(i)), this;
+  }
+  scrollBehavior(i) {
+    return this.modifiers.push(kr(i)), this;
+  }
+  overscrollBehavior(i) {
+    return this.modifiers.push(Br(i)), this;
+  }
+  overscrollBehaviorX(i) {
+    return this.modifiers.push(Hr(i)), this;
+  }
+  overscrollBehaviorY(i) {
+    return this.modifiers.push(Pr(i)), this;
+  }
+  scrollMargin(i) {
+    return this.modifiers.push(Sr(i)), this;
+  }
+  scrollPadding(i) {
+    return this.modifiers.push(Dr(i)), this;
+  }
+  scrollSnap(i, r, t) {
+    return this.modifiers.push(Lr(i, r, t)), this;
+  }
+  // Interaction modifiers
+  onTap(i) {
+    return this.modifiers.push(new s({ onTap: i })), this;
+  }
+  onHover(i) {
+    return this.modifiers.push(new s({ onHover: i })), this;
+  }
+  onMouseEnter(i) {
+    return this.modifiers.push(new s({ onMouseEnter: i })), this;
+  }
+  onMouseLeave(i) {
+    return this.modifiers.push(new s({ onMouseLeave: i })), this;
+  }
+  onMouseDown(i) {
+    return this.modifiers.push(new s({ onMouseDown: i })), this;
+  }
+  onMouseUp(i) {
+    return this.modifiers.push(new s({ onMouseUp: i })), this;
+  }
+  onDragStart(i) {
+    return this.modifiers.push(new s({ onDragStart: i })), this;
+  }
+  onDragOver(i) {
+    return this.modifiers.push(new s({ onDragOver: i })), this;
+  }
+  onDragLeave(i) {
+    return this.modifiers.push(new s({ onDragLeave: i })), this;
+  }
+  onDrop(i) {
+    return this.modifiers.push(new s({ onDrop: i })), this;
+  }
+  // Additional mouse events
+  onDoubleClick(i) {
+    return this.modifiers.push(new s({ onDoubleClick: i })), this;
+  }
+  onContextMenu(i) {
+    return this.modifiers.push(new s({ onContextMenu: i })), this;
+  }
+  // Focus events
+  onFocus(i) {
+    return this.modifiers.push(new s({ onFocus: i })), this;
+  }
+  onBlur(i) {
+    return this.modifiers.push(new s({ onBlur: i })), this;
+  }
+  // Keyboard events
+  onKeyPress(i) {
+    return this.modifiers.push(new s({ onKeyPress: i })), this;
+  }
+  onKeyDown(i) {
+    return this.modifiers.push(new s({ onKeyDown: i })), this;
+  }
+  onKeyUp(i) {
+    return this.modifiers.push(new s({ onKeyUp: i })), this;
+  }
+  // Scroll and wheel events
+  onScroll(i) {
+    return this.modifiers.push(new s({ onScroll: i })), this;
+  }
+  onWheel(i) {
+    return this.modifiers.push(new s({ onWheel: i })), this;
+  }
+  // Input events
+  onInput(i) {
+    return this.modifiers.push(new s({ onInput: i })), this;
+  }
+  onChange(i) {
+    return this.modifiers.push(new s({ onChange: i })), this;
+  }
+  // Clipboard events
+  onCopy(i) {
+    return this.modifiers.push(new s({ onCopy: i })), this;
+  }
+  onCut(i) {
+    return this.modifiers.push(new s({ onCut: i })), this;
+  }
+  onPaste(i) {
+    return this.modifiers.push(new s({ onPaste: i })), this;
+  }
+  // Selection events
+  onSelect(i) {
+    return this.modifiers.push(new s({ onSelect: i })), this;
+  }
+  // HTML and ARIA Attributes
+  id(i) {
+    return this.modifiers.push(new li({ id: i })), this;
+  }
+  data(i) {
+    return this.modifiers.push(new ci({ data: i })), this;
+  }
+  aria(i) {
+    return this.modifiers.push(new gi({ aria: i })), this;
+  }
+  tabIndex(i) {
+    return this.modifiers.push(new wi({ tabIndex: i })), this;
+  }
+  // Text Modifiers
+  lineClamp(i) {
+    return this.modifiers.push(new bi({ lines: i })), this;
+  }
+  wordBreak(i) {
+    return this.modifiers.push(new vi({ wordBreak: i })), this;
+  }
+  overflowWrap(i) {
+    return this.modifiers.push(new yi({ overflowWrap: i })), this;
+  }
+  hyphens(i) {
+    return this.modifiers.push(new xi({ hyphens: i })), this;
+  }
+  // Gradient Text Modifier
+  gradientText(i) {
+    return this.modifiers.push(new Mi({
+      backgroundImage: i,
+      backgroundClip: "text",
+      color: "transparent",
+      webkitBackgroundClip: "text",
+      webkitTextFillColor: "transparent"
+    })), this;
+  }
+  backdropFilter(i, r) {
+    return this.modifiers.push(new l({
+      backdropFilter: i,
+      ...r && { fallbackColor: r }
+    })), this;
+  }
+  glassmorphism(i = "medium", r) {
+    const n = {
+      subtle: { config: { blur: 3, saturate: 1.05, brightness: 1.05 }, fallbackColor: "rgba(255, 255, 255, 0.05)" },
+      light: { config: { blur: 8, saturate: 1.15, brightness: 1.1 }, fallbackColor: "rgba(255, 255, 255, 0.1)" },
+      medium: { config: { blur: 16, saturate: 1.3, brightness: 1.15 }, fallbackColor: "rgba(255, 255, 255, 0.15)" },
+      heavy: { config: { blur: 24, saturate: 1.5, brightness: 1.2 }, fallbackColor: "rgba(255, 255, 255, 0.2)" }
+    }[i];
+    return this.modifiers.push(new l({
+      backdropFilter: n.config,
+      fallbackColor: r || n.fallbackColor
+    })), this;
+  }
+  before(i) {
+    return this.modifiers.push(Ti(i)), this;
+  }
+  after(i) {
+    return this.modifiers.push(Ci(i)), this;
+  }
+  disabled(i = !0) {
+    return this.modifiers.push(new s({ disabled: i })), this;
+  }
+  draggable(i = !0) {
+    return this.modifiers.push(new s({ draggable: i })), this;
+  }
+  setAttribute(i, r) {
+    return this.modifiers.push({
+      type: "attribute",
+      priority: 50,
+      properties: { name: i, value: r },
+      apply: (t, n) => {
+        n.element && n.element.setAttribute(i, r);
+      }
+    }), this;
+  }
+  accessibilityLabel(i) {
+    return this.modifiers.push(new s({ accessibilityLabel: i })), this;
+  }
+  // Phase 4 Advanced Gesture Modifiers (Epic: Butternut)
+  onLongPressGesture(i) {
+    return this.modifiers.push(new s({ onLongPressGesture: i })), this;
+  }
+  keyboardShortcut(i, r, t) {
+    return this.modifiers.push(new s({
+      keyboardShortcut: { key: i, modifiers: r, action: t }
+    })), this;
+  }
+  focused(i) {
+    return this.modifiers.push(new s({ focused: i })), this;
+  }
+  focusable(i = !0, r) {
+    return this.modifiers.push(new s({
+      focusable: { isFocusable: i, interactions: r }
+    })), this;
+  }
+  onContinuousHover(i, r) {
+    return this.modifiers.push(new s({
+      onContinuousHover: { coordinateSpace: i, perform: r }
+    })), this;
+  }
+  highPriorityGesture(i, r) {
+    return this.modifiers.push(new s({
+      highPriorityGesture: { gesture: i, including: r }
+    })), this;
+  }
+  simultaneousGesture(i, r) {
+    return this.modifiers.push(new s({
+      simultaneousGesture: { gesture: i, including: r }
+    })), this;
+  }
+  allowsHitTesting(i) {
+    return this.modifiers.push(new s({ allowsHitTesting: i })), this;
+  }
+  // Animation modifiers
+  transform(i) {
+    return this.modifiers.push(new d({ transform: i })), this;
+  }
+  animation(i) {
+    return this.modifiers.push(new d({ animation: i })), this;
+  }
+  // Lifecycle modifiers
+  onAppear(i) {
+    return this.modifiers.push(new f({ onAppear: i })), this;
+  }
+  onDisappear(i) {
+    return this.modifiers.push(new f({ onDisappear: i })), this;
+  }
+  task(i, r) {
+    return this.modifiers.push(
+      new f({
+        task: {
+          operation: i,
+          id: r?.id,
+          priority: r?.priority || "default"
+        }
+      })
+    ), this;
+  }
+  refreshable(i, r) {
+    return this.modifiers.push(
+      new f({
+        refreshable: {
+          onRefresh: i,
+          isRefreshing: r
+        }
+      })
+    ), this;
+  }
+  // Custom modifier application
+  modifier(i) {
+    return this.modifiers.push(i), this;
+  }
+  // Resizable modifier for images
+  resizable() {
+    return this.modifiers.push(new c({})), this;
+  }
+  // Responsive Design Methods
+  /**
+   * Add modifier to internal list (used by responsive builder)
+   */
+  addModifier(i) {
+    if (this.modifiers.push(i), "modifiers" in this.component && Array.isArray(this.component.modifiers)) {
+      const r = this.component;
+      r.modifiers = [...r.modifiers, i];
+    }
+  }
+  responsive(i) {
+    if (i) {
+      const r = $(i);
+      return this.modifiers.push(r), this;
+    } else
+      return new u(this);
+  }
+  // Responsive Breakpoint Shorthand Properties
+  get base() {
+    return new u(this).base;
+  }
+  get sm() {
+    return new u(this).sm;
+  }
+  get md() {
+    return new u(this).md;
+  }
+  get lg() {
+    return new u(this).lg;
+  }
+  get xl() {
+    return new u(this).xl;
+  }
+  get "2xl"() {
+    return new u(this)["2xl"];
+  }
+  // HTML Content Rendering (Text components only)
+  asHTML(i) {
+    const r = zr(i);
+    return this.modifiers.push(r), this;
+  }
+  // Build the final component with all modifiers applied
+  build() {
+    if ("modifiers" in this.component) {
+      const i = this.component, r = this.modifiers.filter(
+        (t) => !i.modifiers.some(
+          (n) => n === t
+          // Reference equality check
+        )
+      );
+      return i.modifiers = [...i.modifiers, ...r], this.component;
+    } else
+      return O(this.component, this.modifiers);
+  }
+}
+function Fr(e) {
+  return new Ar(e);
+}
+function us(e, i) {
+  return {
+    ...e,
+    modifiers: i,
+    modifierBuilder: Fr(e)
+  };
+}
+const ds = {
+  /**
+   * Create a padding modifier with all sides
+   */
+  paddingAll(e) {
+    return new h({ padding: e });
+  },
+  /**
+   * Create a padding modifier with horizontal/vertical values
+   */
+  paddingSymmetric(e, i) {
+    return new h({
+      padding: {
+        left: e,
+        right: e,
+        top: i,
+        bottom: i
+      }
+    });
+  },
+  /**
+   * Create a margin modifier with all sides
+   */
+  marginAll(e) {
+    return new h({ margin: e });
+  },
+  /**
+   * Create a font modifier with common presets
+   */
+  fontPreset(e) {
+    const i = {
+      title: { size: 32, weight: "bold" },
+      heading: { size: 24, weight: "600" },
+      body: { size: 16, weight: "normal" },
+      caption: { size: 12, weight: "normal" }
+    };
+    return new o({ font: i[e] });
+  },
+  /**
+   * Create a shadow modifier with common presets
+   */
+  shadowPreset(e) {
+    const i = {
+      small: { x: 0, y: 1, radius: 3, color: "rgba(0,0,0,0.12)" },
+      medium: { x: 0, y: 4, radius: 6, color: "rgba(0,0,0,0.15)" },
+      large: { x: 0, y: 10, radius: 25, color: "rgba(0,0,0,0.15)" }
+    };
+    return new o({ shadow: i[e] });
+  },
+  /**
+   * Create a transition modifier with common presets
+   */
+  transitionPreset(e) {
+    const i = {
+      fast: { duration: 150, easing: "ease-out" },
+      normal: { duration: 300, easing: "ease" },
+      slow: { duration: 500, easing: "ease-in-out" }
+    };
+    return new d({ transition: i[e] });
+  }
+};
+export {
+  Ar as ModifierBuilderImpl,
+  us as applyModifiers,
+  Fr as createModifierBuilder,
+  ds as modifierUtils
+};
+//# sourceMappingURL=builder.js.map