@tachui/modifiers 0.8.0-alpha

package/dist/layout/aspect-ratio.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Aspect Ratio Modifier
+ *
+ * SwiftUI .aspectRatio() modifier for controlling element aspect ratios.
+ * Supports both explicit ratios and content mode (fit/fill).
+ */
+import type { DOMNode } from '@tachui/core/runtime/types';
+import { BaseModifier } from '../basic/base';
+import type { ModifierContext } from '@tachui/core/modifiers/types';
+export type ContentMode = 'fit' | 'fill';
+export interface AspectRatioOptions {
+    ratio?: number;
+    contentMode: ContentMode;
+}
+export declare class AspectRatioModifier extends BaseModifier<AspectRatioOptions> {
+    readonly type = "aspectRatio";
+    readonly priority = 20;
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private applyAspectRatio;
+    private applyContentMode;
+    private isMediaElement;
+    /**
+     * Development mode validation
+     */
+    private validateAspectRatio;
+    /**
+     * Get common aspect ratios
+     */
+    static readonly COMMON_RATIOS: {
+        readonly square: 1;
+        readonly portrait: number;
+        readonly landscape: number;
+        readonly widescreen: number;
+        readonly ultrawide: number;
+        readonly golden: 1.618;
+        readonly photo: number;
+    };
+}
+/**
+ * Create an aspect ratio modifier
+ *
+ * @param ratio - Aspect ratio (width/height). If undefined, maintains natural aspect ratio
+ * @param contentMode - How content should fit within the aspect ratio ('fit' or 'fill')
+ *
+ * @example
+ * ```typescript
+ * // Square aspect ratio with fit content mode
+ * aspectRatio(1, 'fit')
+ *
+ * // 16:9 widescreen with fill
+ * aspectRatio(16/9, 'fill')
+ *
+ * // Use common ratio
+ * aspectRatio(AspectRatioModifier.COMMON_RATIOS.landscape, 'fit')
+ *
+ * // Content mode only (maintain natural ratio)
+ * aspectRatio(undefined, 'fill')
+ *
+ * // With reactive value
+ * const ratio = signal(1.5)
+ * aspectRatio(ratio, 'fit')
+ * ```
+ */
+export declare function aspectRatio(ratio?: number, contentMode?: ContentMode): AspectRatioModifier;
+//# sourceMappingURL=aspect-ratio.d.ts.map

package/dist/layout/aspect-ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../src/layout/aspect-ratio.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAGnE,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,MAAM,CAAA;AAExC,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,WAAW,CAAA;CACzB;AAED,qBAAa,mBAAoB,SAAQ,YAAY,CAAC,kBAAkB,CAAC;IACvE,QAAQ,CAAC,IAAI,iBAAgB;IAC7B,QAAQ,CAAC,QAAQ,MAAK;IAEtB,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IAuCpE,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,cAAc;IAKtB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAmD3B;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,aAAa;;;;;;;;MAQnB;CACX;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,WAAW,CACzB,KAAK,CAAC,EAAE,MAAM,EACd,WAAW,GAAE,WAAmB,GAC/B,mBAAmB,CAErB"}

package/dist/layout/fixed-size.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Fixed Size Modifier
+ *
+ * SwiftUI .fixedSize() modifier for preventing elements from growing
+ * beyond their intrinsic content size in specified dimensions.
+ */
+import type { DOMNode } from '@tachui/core/runtime/types';
+import { BaseModifier } from '../basic/base';
+import type { ModifierContext } from '@tachui/core/modifiers/types';
+export interface FixedSizeOptions {
+    horizontal: boolean;
+    vertical: boolean;
+}
+export declare class FixedSizeModifier extends BaseModifier<FixedSizeOptions> {
+    readonly type = "fixedSize";
+    readonly priority = 25;
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private applyFixedSize;
+    private isTextElement;
+    private isFlexItem;
+    /**
+     * Development mode validation
+     */
+    private validateFixedSize;
+}
+/**
+ * Create a fixed size modifier
+ *
+ * @param horizontal - Fix horizontal size to content (default: true)
+ * @param vertical - Fix vertical size to content (default: true)
+ *
+ * @example
+ * ```typescript
+ * // Fix both dimensions (equivalent to intrinsic sizing)
+ * fixedSize()
+ * fixedSize(true, true)
+ *
+ * // Fix only horizontal (prevent text wrapping)
+ * fixedSize(true, false)
+ *
+ * // Fix only vertical (prevent height expansion)
+ * fixedSize(false, true)
+ *
+ * // No fixed sizing (no-op, but validates parameters)
+ * fixedSize(false, false)
+ * ```
+ */
+export declare function fixedSize(horizontal?: boolean, vertical?: boolean): FixedSizeModifier;
+//# sourceMappingURL=fixed-size.d.ts.map

package/dist/layout/fixed-size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixed-size.d.ts","sourceRoot":"","sources":["../../src/layout/fixed-size.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAEnE,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,qBAAa,iBAAkB,SAAQ,YAAY,CAAC,gBAAgB,CAAC;IACnE,QAAQ,CAAC,IAAI,eAAc;IAC3B,QAAQ,CAAC,QAAQ,MAAK;IAEtB,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IAkBpE,OAAO,CAAC,cAAc;IAuCtB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,UAAU;IAQlB;;OAEG;IACH,OAAO,CAAC,iBAAiB;CAyC1B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,SAAS,CACvB,UAAU,GAAE,OAAc,EAC1B,QAAQ,GAAE,OAAc,GACvB,iBAAiB,CAEnB"}

package/dist/layout/flexbox.d.ts

@@ -0,0 +1,253 @@
+/**
+ * Flexbox Modifier - Best-in-class flexbox layout system
+ *
+ * Comprehensive interface for flexbox properties with full CSS Grid fallbacks,
+ * SwiftUI compatibility, reactive values, design system presets, and modern
+ * CSS features including container queries support.
+ */
+import type { DOMNode } from '@tachui/core/runtime/types';
+import { BaseModifier } from '../basic/base';
+import type { ModifierContext, ReactiveModifierProps } from '@tachui/core/modifiers/types';
+export type FlexValue = number | string | `${number}px` | `${number}rem` | `${number}em` | `${number}%` | `${number}fr`;
+export interface FlexboxOptions {
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: FlexValue | 'auto' | 'content' | 'max-content' | 'min-content' | 'fit-content';
+    flex?: string | number | 'auto' | 'initial' | 'none';
+    justifyContent?: 'flex-start' | 'start' | 'flex-end' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    alignItems?: 'flex-start' | 'start' | 'flex-end' | 'end' | 'center' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline';
+    alignContent?: 'flex-start' | 'start' | 'flex-end' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';
+    alignSelf?: 'auto' | 'flex-start' | 'start' | 'flex-end' | 'end' | 'center' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline';
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    flexFlow?: string;
+    gap?: FlexValue;
+    rowGap?: FlexValue;
+    columnGap?: FlexValue;
+    display?: 'flex' | 'inline-flex';
+    placeItems?: string;
+    placeContent?: string;
+    placeSelf?: 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 layout control
+ *
+ * Best-in-class implementation with full type safety, modern CSS support,
+ * and enhanced performance optimizations.
+ *
+ * @example
+ * ```typescript
+ * // Complete flexbox layout
+ * .flexbox({
+ *   display: 'flex',
+ *   flexDirection: 'column',
+ *   justifyContent: 'center',
+ *   alignItems: 'stretch',
+ *   gap: 16
+ * })
+ *
+ * // Responsive flex container
+ * .flexbox({
+ *   flex: 1,
+ *   gap: '1rem',
+ *   flexWrap: 'wrap'
+ * })
+ *
+ * // Modern CSS Grid alignment
+ * .flexbox({
+ *   display: 'flex',
+ *   placeItems: 'center',
+ *   gap: '2vw'
+ * })
+ * ```
+ */
+export declare function flexbox(options: ReactiveFlexboxOptions): FlexboxModifier;
+/**
+ * Convenience function for flex-grow
+ *
+ * @example
+ * ```typescript
+ * .flexGrow(1) // Grow to fill available space
+ * .flexGrow(0) // Don't grow
+ * ```
+ */
+export declare function flexGrow(value: number): FlexboxModifier;
+/**
+ * Convenience function for flex-shrink
+ *
+ * @example
+ * ```typescript
+ * .flexShrink(1) // Allow shrinking
+ * .flexShrink(0) // Prevent shrinking
+ * ```
+ */
+export declare function flexShrink(value: number): FlexboxModifier;
+/**
+ * Convenience function for flex-basis
+ *
+ * @example
+ * ```typescript
+ * .flexBasis('auto')
+ * .flexBasis(200)
+ * .flexBasis('50%')
+ * ```
+ */
+export declare function flexBasis(value: FlexboxOptions['flexBasis']): FlexboxModifier;
+/**
+ * Convenience function for justify-content
+ *
+ * @example
+ * ```typescript
+ * .justifyContent('center')
+ * .justifyContent('space-between')
+ * ```
+ */
+export declare function justifyContent(value: FlexboxOptions['justifyContent']): FlexboxModifier;
+/**
+ * Convenience function for align-items
+ *
+ * @example
+ * ```typescript
+ * .alignItems('center')
+ * .alignItems('stretch')
+ * ```
+ */
+export declare function alignItems(value: FlexboxOptions['alignItems']): FlexboxModifier;
+/**
+ * Convenience function for align-self
+ *
+ * @example
+ * ```typescript
+ * .alignSelf('center')
+ * .alignSelf('stretch')
+ * ```
+ */
+export declare function alignSelf(value: FlexboxOptions['alignSelf']): FlexboxModifier;
+/**
+ * Convenience function for gap
+ *
+ * @example
+ * ```typescript
+ * .gap(16)
+ * .gap('1rem')
+ * .gap('2vw')
+ * ```
+ */
+export declare function gap(value: FlexValue): FlexboxModifier;
+/**
+ * Convenience function for flex-direction
+ *
+ * @example
+ * ```typescript
+ * .flexDirection('column')
+ * .flexDirection('row-reverse')
+ * ```
+ */
+export declare function flexDirection(value: FlexboxOptions['flexDirection']): FlexboxModifier;
+/**
+ * Convenience function for flex-wrap
+ *
+ * @example
+ * ```typescript
+ * .flexWrap('wrap')
+ * .flexWrap('nowrap')
+ * ```
+ */
+export declare function flexWrap(value: FlexboxOptions['flexWrap']): FlexboxModifier;
+/**
+ * Design system flexbox presets for consistent layouts
+ *
+ * Based on modern design system principles with semantic naming
+ * for common layout patterns and responsive design.
+ */
+export declare const flexboxPresets: {
+    /**
+     * Standard flex container
+     * Sets display: flex for basic flex container
+     */
+    readonly container: () => FlexboxModifier;
+    /**
+     * Inline flex container
+     * Sets display: inline-flex for inline flex behavior
+     */
+    readonly inline: () => FlexboxModifier;
+    /**
+     * Horizontal layout with center alignment
+     * Perfect for nav bars, button groups
+     */
+    readonly hcenter: () => FlexboxModifier;
+    /**
+     * Vertical layout with center alignment
+     * Perfect for cards, modals, centered content
+     */
+    readonly vcenter: () => FlexboxModifier;
+    /**
+     * Space between layout
+     * Common for headers, footers, navigation
+     */
+    readonly spaceBetween: () => FlexboxModifier;
+    /**
+     * Space around layout
+     * For even distribution with edge spacing
+     */
+    readonly spaceAround: () => FlexboxModifier;
+    /**
+     * Column stack with spacing
+     * For vertical component stacks
+     */
+    readonly vstack: () => FlexboxModifier;
+    /**
+     * Row with spacing
+     * For horizontal component layouts
+     */
+    readonly hstack: () => FlexboxModifier;
+    /**
+     * Card layout
+     * Column with internal spacing
+     */
+    readonly card: () => FlexboxModifier;
+    /**
+     * Form layout
+     * Column with form-appropriate spacing
+     */
+    readonly form: () => FlexboxModifier;
+    /**
+     * Button group
+     * Horizontal with tight spacing
+     */
+    readonly buttonGroup: () => FlexboxModifier;
+    /**
+     * Sidebar layout
+     * Vertical with stretch alignment
+     */
+    readonly sidebar: () => FlexboxModifier;
+    /**
+     * Responsive wrap
+     * Wrapping layout with gaps
+     */
+    readonly wrap: () => FlexboxModifier;
+    /**
+     * Full flex item
+     * Grows and shrinks to fill space
+     */
+    readonly fill: () => FlexboxModifier;
+    /**
+     * Fixed flex item
+     * Doesn't grow or shrink
+     */
+    readonly fixed: () => FlexboxModifier;
+    /**
+     * Stretch alignment
+     * Items stretch to container height
+     */
+    readonly stretch: () => FlexboxModifier;
+};
+//# sourceMappingURL=flexbox.d.ts.map

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

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

package/dist/layout/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Layout and Positioning Modifiers
+ *
+ * Collection of modifiers for controlling element positioning, sizing, and transformations.
+ * These modifiers follow SwiftUI conventions while providing enhanced web-specific functionality.
+ */
+export * from './flexbox';
+export * from './offset';
+export * from './scale-effect';
+export * from './aspect-ratio';
+export * from './fixed-size';
+export * from './position';
+export * from './z-index';
+export * from './overlay';
+export type { ScaleAnchor } from './scale-effect';
+export type { ContentMode } from './aspect-ratio';
+export type { PositionValue } from './position';
+export type { OverlayAlignment } from './overlay';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,WAAW,CAAA;AAGzB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAG9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAG5B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AAGzB,cAAc,WAAW,CAAA;AAGzB,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACjD,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA"}

package/dist/layout/index.js

@@ -0,0 +1,30 @@
+import { A as a, m as i, F as f, O as o, q as r, P as t, S as l, Z as x, d, e as n, l as c, n as M, c as p, h as S, a as b, b as g, i as z, f as m, k as y, g as F, j as I, o as O, r as P, p as h, s as j, z as k } from "../overlay-DDiSLprp.js";
+export {
+  a as AspectRatioModifier,
+  i as FixedSizeModifier,
+  f as FlexboxModifier,
+  o as OffsetModifier,
+  r as OverlayModifier,
+  t as PositionModifier,
+  l as ScaleEffectModifier,
+  x as ZIndexModifier,
+  d as alignItems,
+  n as alignSelf,
+  c as aspectRatio,
+  M as fixedSize,
+  p as flexBasis,
+  S as flexDirection,
+  b as flexGrow,
+  g as flexShrink,
+  z as flexWrap,
+  m as flexbox,
+  y as flexboxPresets,
+  F as gap,
+  I as justifyContent,
+  O as offset,
+  P as overlay,
+  h as position,
+  j as scaleEffect,
+  k as zIndex
+};
+//# sourceMappingURL=index.js.map

package/dist/layout/index.js.map

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

package/dist/layout/offset.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Offset Modifier
+ *
+ * SwiftUI .offset(x, y) modifier for translating elements with reactive support.
+ * Handles CSS transforms while preserving existing transformations.
+ */
+import type { DOMNode } from '@tachui/core/runtime/types';
+import { BaseModifier } from '../basic/base';
+import type { ModifierContext } from '@tachui/core/modifiers/types';
+export interface OffsetOptions {
+    x: number;
+    y?: number;
+}
+export declare class OffsetModifier extends BaseModifier<OffsetOptions> {
+    readonly type = "offset";
+    readonly priority = 35;
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private applyOffset;
+    /**
+     * Development mode validation
+     */
+    private validateOffset;
+}
+/**
+ * Create an offset modifier
+ *
+ * @param x - Horizontal offset in pixels
+ * @param y - Vertical offset in pixels (optional, defaults to 0)
+ *
+ * @example
+ * ```typescript
+ * // Move element 10px right and 5px down
+ * offset(10, 5)
+ *
+ * // Move element only horizontally
+ * offset(20)
+ *
+ * // With reactive values
+ * const xOffset = signal(0)
+ * offset(xOffset, -10)
+ * ```
+ */
+export declare function offset(x: number, y?: number): OffsetModifier;
+//# sourceMappingURL=offset.d.ts.map

package/dist/layout/offset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"offset.d.ts","sourceRoot":"","sources":["../../src/layout/offset.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAGnE,MAAM,WAAW,aAAa;IAC5B,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,CAAC,EAAE,MAAM,CAAA;CACX;AAED,qBAAa,cAAe,SAAQ,YAAY,CAAC,aAAa,CAAC;IAC7D,QAAQ,CAAC,IAAI,YAAW;IACxB,QAAQ,CAAC,QAAQ,MAAK;IAEtB,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IAqBpE,OAAO,CAAC,WAAW;IAmBnB;;OAEG;IACH,OAAO,CAAC,cAAc;CAiDvB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,cAAc,CAY5D"}

package/dist/layout/overlay.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Overlay Modifier
+ *
+ * SwiftUI-inspired modifier for overlaying content on top of another view
+ */
+import { BaseModifier } from '../base';
+import type { ModifierContext } from '../types';
+import type { DOMNode } from '@tachui/core/runtime/types';
+export type OverlayAlignment = 'center' | 'top' | 'bottom' | 'leading' | 'trailing' | 'topLeading' | 'topTrailing' | 'bottomLeading' | 'bottomTrailing';
+export interface OverlayOptions {
+    content: any;
+    alignment?: OverlayAlignment;
+}
+export declare class OverlayModifier extends BaseModifier<OverlayOptions> {
+    readonly type = "overlay";
+    readonly priority = 10;
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private applyOverlay;
+    private renderContent;
+    private getOverlayAlignment;
+}
+/**
+ * Creates an overlay modifier that overlays content on top of the view
+ */
+export declare function overlay(content: any, alignment?: OverlayAlignment): OverlayModifier;
+//# sourceMappingURL=overlay.d.ts.map

package/dist/layout/overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/layout/overlay.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEzD,MAAM,MAAM,gBAAgB,GACxB,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,SAAS,GACT,UAAU,GACV,YAAY,GACZ,aAAa,GACb,eAAe,GACf,gBAAgB,CAAA;AAEpB,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,GAAG,CAAA;IACZ,SAAS,CAAC,EAAE,gBAAgB,CAAA;CAC7B;AAED,qBAAa,eAAgB,SAAQ,YAAY,CAAC,cAAc,CAAC;IAC/D,QAAQ,CAAC,IAAI,aAAY;IACzB,QAAQ,CAAC,QAAQ,MAAK;IAEtB,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IAcpE,OAAO,CAAC,YAAY;IA2BpB,OAAO,CAAC,aAAa;IAyBrB,OAAO,CAAC,mBAAmB;CAiD5B;AAED;;GAEG;AACH,wBAAgB,OAAO,CACrB,OAAO,EAAE,GAAG,EACZ,SAAS,GAAE,gBAA2B,GACrC,eAAe,CAEjB"}

package/dist/layout/position.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Position Modifier
+ *
+ * CSS position property modifier with enhanced validation and utilities.
+ */
+import type { DOMNode } from '@tachui/core/runtime/types';
+import { BaseModifier } from '../basic/base';
+import type { ModifierContext } from '@tachui/core/modifiers/types';
+export type PositionValue = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+export interface PositionOptions {
+    position: PositionValue;
+}
+export declare class PositionModifier extends BaseModifier<PositionOptions> {
+    readonly type = "position";
+    readonly priority = 50;
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private applyPosition;
+    private applyPositionOptimizations;
+    private warnIfMissingPositionedParent;
+    private warnIfMissingStickyProperties;
+    private warnIfHasPositioningProperties;
+    /**
+     * Development mode validation
+     */
+    private validatePosition;
+}
+/**
+ * Create a position modifier
+ *
+ * @param value - CSS position value
+ *
+ * @example
+ * ```typescript
+ * // Static positioning (default, removes positioning context)
+ * position('static')
+ *
+ * // Relative positioning (creates positioning context)
+ * position('relative')
+ *
+ * // Absolute positioning (positioned relative to nearest positioned parent)
+ * position('absolute')
+ *
+ * // Fixed positioning (positioned relative to viewport)
+ * position('fixed')
+ *
+ * // Sticky positioning (hybrid relative/fixed)
+ * position('sticky')
+ *
+ * // With reactive value
+ * const pos = signal('relative')
+ * position(pos)
+ * ```
+ */
+export declare function position(value: PositionValue): PositionModifier;
+//# sourceMappingURL=position.d.ts.map

package/dist/layout/position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../src/layout/position.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAGnE,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,UAAU,GACV,UAAU,GACV,OAAO,GACP,QAAQ,CAAA;AAEZ,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,aAAa,CAAA;CACxB;AAED,qBAAa,gBAAiB,SAAQ,YAAY,CAAC,eAAe,CAAC;IACjE,QAAQ,CAAC,IAAI,cAAa;IAC1B,QAAQ,CAAC,QAAQ,MAAK;IAEtB,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IA2BpE,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,0BAA0B;IA6ClC,OAAO,CAAC,6BAA6B;IAoBrC,OAAO,CAAC,6BAA6B;IAerC,OAAO,CAAC,8BAA8B;IAetC;;OAEG;IACH,OAAO,CAAC,gBAAgB;CAwCzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,gBAAgB,CAE/D"}

package/dist/layout/scale-effect.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Scale Effect Modifier
+ *
+ * SwiftUI .scaleEffect() modifier for scaling elements with anchor support.
+ * Handles CSS transforms while preserving existing transformations.
+ */
+import type { DOMNode } from '@tachui/core/runtime/types';
+import { BaseModifier } from '../basic/base';
+import type { ModifierContext } from '@tachui/core/modifiers/types';
+export type ScaleAnchor = 'center' | 'top' | 'topLeading' | 'topTrailing' | 'bottom' | 'bottomLeading' | 'bottomTrailing' | 'leading' | 'trailing';
+export interface ScaleEffectOptions {
+    x: number;
+    y?: number;
+    anchor?: ScaleAnchor;
+}
+export declare class ScaleEffectModifier extends BaseModifier<ScaleEffectOptions> {
+    readonly type = "scaleEffect";
+    readonly priority = 35;
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private applyScale;
+    private getTransformOrigin;
+    /**
+     * Development mode validation
+     */
+    private validateScale;
+}
+/**
+ * Create a scale effect modifier
+ *
+ * @param x - Horizontal scale factor (1.0 = normal size)
+ * @param y - Vertical scale factor (optional, defaults to x for uniform scaling)
+ * @param anchor - Transform origin anchor point (default: 'center')
+ *
+ * @example
+ * ```typescript
+ * // Scale to 150% uniformly
+ * scaleEffect(1.5)
+ *
+ * // Scale with different x/y values
+ * scaleEffect(2.0, 0.5)
+ *
+ * // Scale with custom anchor point
+ * scaleEffect(1.2, 1.2, 'topLeading')
+ *
+ * // With reactive values
+ * const scale = signal(1.0)
+ * scaleEffect(scale, undefined, 'center')
+ * ```
+ */
+export declare function scaleEffect(x: number, y?: number, anchor?: ScaleAnchor): ScaleEffectModifier;
+//# sourceMappingURL=scale-effect.d.ts.map

package/dist/layout/scale-effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale-effect.d.ts","sourceRoot":"","sources":["../../src/layout/scale-effect.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAGnE,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,KAAK,GACL,YAAY,GACZ,aAAa,GACb,QAAQ,GACR,eAAe,GACf,gBAAgB,GAChB,SAAS,GACT,UAAU,CAAA;AAEd,MAAM,WAAW,kBAAkB;IACjC,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,WAAW,CAAA;CACrB;AAED,qBAAa,mBAAoB,SAAQ,YAAY,CAAC,kBAAkB,CAAC;IACvE,QAAQ,CAAC,IAAI,iBAAgB;IAC7B,QAAQ,CAAC,QAAQ,MAAK;IAEtB,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IAyCpE,OAAO,CAAC,UAAU;IAyBlB,OAAO,CAAC,kBAAkB;IAgB1B;;OAEG;IACH,OAAO,CAAC,aAAa;CAgEtB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CACzB,CAAC,EAAE,MAAM,EACT,CAAC,CAAC,EAAE,MAAM,EACV,MAAM,GAAE,WAAsB,GAC7B,mBAAmB,CAErB"}