juxscript 1.1.131 → 1.1.133

package/lib/components/base/LayoutExtensions.ts

@@ -1,345 +0,0 @@
-/**
- * Layout Modifiers Extension
- * 
- * Provides precision layout control via inline styles (for variable values)
- * and CSS classes (for fixed values like display, position, overflow).
- * 
- * Automatically applied to BaseComponent - all components have these methods.
- */
-
-import type { BaseComponent } from './BaseComponent.js';
-
-export interface LayoutExtensions {
-    // Spacing (inline styles - too variable for classes)
-    padding(value: string): this;
-    paddingTop(value: string): this;
-    paddingRight(value: string): this;
-    paddingBottom(value: string): this;
-    paddingLeft(value: string): this;
-    paddingHorizontal(value: string): this;
-    paddingVertical(value: string): this;
-    margin(value: string): this;
-    marginTop(value: string): this;
-    marginRight(value: string): this;
-    marginBottom(value: string): this;
-    marginLeft(value: string): this;
-    marginHorizontal(value: string): this;
-    marginVertical(value: string): this;
-
-    // Sizing (inline styles)
-    width(value: string): this;
-    height(value: string): this;
-    minWidth(value: string): this;
-    maxWidth(value: string): this;
-    minHeight(value: string): this;
-    maxHeight(value: string): this;
-
-    // Borders (inline styles for values, classes for style)
-    border(value: string): this;
-    borderTop(value: string): this;
-    borderRight(value: string): this;
-    borderBottom(value: string): this;
-    borderLeft(value: string): this;
-    borderRadius(value: string): this;
-    borderWidth(value: string): this;
-    borderColor(value: string): this;
-    borderStyle(value: 'solid' | 'dashed' | 'dotted' | 'double' | 'none'): this;
-
-    // Background (inline styles)
-    background(value: string): this;
-    backgroundColor(value: string): this;
-    backgroundImage(value: string): this;
-    backgroundSize(value: string): this;
-    backgroundPosition(value: string): this;
-    backgroundRepeat(value: string): this;
-
-    // Gradient helpers (inline styles)
-    linearGradient(direction: string, ...colorStops: string[]): this;
-    radialGradient(shape: string, ...colorStops: string[]): this;
-    conicGradient(from: string, ...colorStops: string[]): this;
-
-
-    // Effects (inline styles)
-    boxShadow(value: string): this;
-    opacity(value: string | number): this;
-
-    // Positioning (classes for type, inline for offsets)
-    position(value: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'): this;
-    top(value: string): this;
-    right(value: string): this;
-    bottom(value: string): this;
-    left(value: string): this;
-    zIndex(value: string | number): this;
-
-    // Overflow (CSS classes)
-    overflow(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
-    overflowX(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
-    overflowY(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
-
-    // Display (CSS classes)
-    display(value: 'block' | 'inline' | 'inline-block' | 'flex' | 'grid' | 'none'): this;
-
-    // Flex (inline styles)
-    flex(value: string | number): this;
-    flexGrow(value: string | number): this;
-    flexShrink(value: string | number): this;
-    flexBasis(value: string): this;
-    alignSelf(value: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'): this;
-    // ✅ NEW flex container properties
-    flexDirection(value: 'row' | 'column' | 'row-reverse' | 'column-reverse'): this;
-    flexWrap(value: 'nowrap' | 'wrap' | 'wrap-reverse'): this;
-    alignItems(value: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'): this;
-    justifyContent(value: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'): this;
-    gap(value: string): this;
-    rowGap(value: string): this;
-    columnGap(value: string): this;
-
-    // Transform (inline styles)
-    transform(value: string): this;
-    transformOrigin(value: string): this;
-    rotate(degrees: number): this;
-    rotateX(degrees: number): this; // ✅ NEW
-    rotateY(degrees: number): this; // ✅ NEW
-    rotateZ(degrees: number): this; // ✅ NEW
-    scale(value: number): this;
-    scaleX(value: number): this; // ✅ NEW
-    scaleY(value: number): this; // ✅ NEW
-    translateX(value: string): this;
-    translateY(value: string): this;
-    translate(x: string, y: string): this;
-    flipX(): this; // ✅ NEW - Flip horizontally (scaleX(-1))
-    flipY(): this; // ✅ NEW - Flip vertically (scaleY(-1))
-    flipBoth(): this; // ✅ NEW - Flip both axes
-
-    // Transition & Animation (inline styles)
-    transition(value: string): this;
-    transitionDuration(value: string): this;
-    transitionDelay(value: string): this;
-    animation(value: string): this;
-
-    // Cursor & Interaction (CSS classes)
-    cursor(value: string): this;
-    pointerEvents(value: 'auto' | 'none'): this;
-    userSelect(value: 'auto' | 'none' | 'text' | 'all'): this;
-
-    // Text (inline styles for values, classes for alignment/transform)
-    color(value: string): this;
-    fontSize(value: string): this;
-    fontWeight(value: string | number): this;
-    fontFamily(value: string): this;
-    textAlign(value: 'left' | 'center' | 'right' | 'justify'): this;
-    lineHeight(value: string | number): this;
-    letterSpacing(value: string): this;
-    textDecoration(value: string): this;
-    textTransform(value: 'none' | 'capitalize' | 'uppercase' | 'lowercase'): this;
-    whiteSpace(value: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line'): this;
-    wordWrap(value: 'normal' | 'break-word'): this;
-}
-
-/**
- * Helper to add inline style
- */
-function addInlineStyle(component: BaseComponent<any>, property: string, value: string): void {
-    const currentStyle = component.state.style || '';
-
-    // Parse existing styles into a map
-    const styleMap = new Map<string, string>();
-
-    currentStyle.split(';').forEach((style: string) => {
-        const trimmed = style.trim();
-        if (!trimmed) return;
-
-        const colonIndex = trimmed.indexOf(':');
-        if (colonIndex === -1) return;
-
-        const prop = trimmed.substring(0, colonIndex).trim();
-        const val = trimmed.substring(colonIndex + 1).trim();
-
-        if (prop && val) {
-            styleMap.set(prop, val);
-        }
-    });
-
-    // Update or add the new property
-    styleMap.set(property, value);
-
-    // Rebuild style string
-    const styles: string[] = [];
-    styleMap.forEach((val, prop) => {
-        styles.push(`${prop}: ${val}`);
-    });
-
-    component.state.style = styles.join('; ');
-}
-
-/**
- * Apply layout extensions to a component instance
- * Called automatically in BaseComponent constructor
- */
-export function applyLayoutExtensions<T extends BaseComponent<any>>(component: T): T & LayoutExtensions {
-    const ext = component as T & LayoutExtensions;
-
-    // Spacing (inline styles)
-    ext.padding = (v) => { addInlineStyle(component, 'padding', v); return ext; };
-    ext.paddingTop = (v) => { addInlineStyle(component, 'padding-top', v); return ext; };
-    ext.paddingRight = (v) => { addInlineStyle(component, 'padding-right', v); return ext; };
-    ext.paddingBottom = (v) => { addInlineStyle(component, 'padding-bottom', v); return ext; };
-    ext.paddingLeft = (v) => { addInlineStyle(component, 'padding-left', v); return ext; };
-    ext.paddingHorizontal = (v) => {
-        addInlineStyle(component, 'padding-left', v);
-        addInlineStyle(component, 'padding-right', v);
-        return ext;
-    };
-    ext.paddingVertical = (v) => {
-        addInlineStyle(component, 'padding-top', v);
-        addInlineStyle(component, 'padding-bottom', v);
-        return ext;
-    };
-
-    ext.margin = (v) => { addInlineStyle(component, 'margin', v); return ext; };
-    ext.marginTop = (v) => { addInlineStyle(component, 'margin-top', v); return ext; };
-    ext.marginRight = (v) => { addInlineStyle(component, 'margin-right', v); return ext; };
-    ext.marginBottom = (v) => { addInlineStyle(component, 'margin-bottom', v); return ext; };
-    ext.marginLeft = (v) => { addInlineStyle(component, 'margin-left', v); return ext; };
-    ext.marginHorizontal = (v) => {
-        addInlineStyle(component, 'margin-left', v);
-        addInlineStyle(component, 'margin-right', v);
-        return ext;
-    };
-    ext.marginVertical = (v) => {
-        addInlineStyle(component, 'margin-top', v);
-        addInlineStyle(component, 'margin-bottom', v);
-        return ext;
-    };
-
-    // Sizing (inline styles)
-    ext.width = (v) => { addInlineStyle(component, 'width', v); return ext; };
-    ext.height = (v) => { addInlineStyle(component, 'height', v); return ext; };
-    ext.minWidth = (v) => { addInlineStyle(component, 'min-width', v); return ext; };
-    ext.maxWidth = (v) => { addInlineStyle(component, 'max-width', v); return ext; };
-    ext.minHeight = (v) => { addInlineStyle(component, 'min-height', v); return ext; };
-    ext.maxHeight = (v) => { addInlineStyle(component, 'max-height', v); return ext; };
-
-    // Borders
-    ext.border = (v) => { addInlineStyle(component, 'border', v); return ext; };
-    ext.borderTop = (v) => { addInlineStyle(component, 'border-top', v); return ext; };
-    ext.borderRight = (v) => { addInlineStyle(component, 'border-right', v); return ext; };
-    ext.borderBottom = (v) => { addInlineStyle(component, 'border-bottom', v); return ext; };
-    ext.borderLeft = (v) => { addInlineStyle(component, 'border-left', v); return ext; };
-    ext.borderRadius = (v) => { addInlineStyle(component, 'border-radius', v); return ext; }; // ✅ HERE
-    ext.borderWidth = (v) => { addInlineStyle(component, 'border-width', v); return ext; };
-    ext.borderColor = (v) => { addInlineStyle(component, 'border-color', v); return ext; };
-    ext.borderStyle = (v) => { component.addClass(`jux-border-${v}`); return ext; }; // ✅ CSS class
-
-    // Background
-    ext.background = (v) => { addInlineStyle(component, 'background', v); return ext; };
-    ext.backgroundColor = (v) => { addInlineStyle(component, 'background-color', v); return ext; };
-    ext.backgroundImage = (v) => { addInlineStyle(component, 'background-image', v); return ext; };
-    ext.backgroundSize = (v) => { addInlineStyle(component, 'background-size', v); return ext; };
-    ext.backgroundPosition = (v) => { addInlineStyle(component, 'background-position', v); return ext; };
-    ext.backgroundRepeat = (v) => { addInlineStyle(component, 'background-repeat', v); return ext; };
-
-    // Gradient helpers
-    ext.linearGradient = (direction, ...colorStops) => {
-        const value = `linear-gradient(${direction}, ${colorStops.join(', ')})`;
-        addInlineStyle(component, 'background-image', value);
-        return ext;
-    };
-    ext.radialGradient = (shape, ...colorStops) => {
-        const value = `radial-gradient(${shape}, ${colorStops.join(', ')})`;
-        addInlineStyle(component, 'background-image', value);
-        return ext;
-    };
-    ext.conicGradient = (from, ...colorStops) => {
-        const value = `conic-gradient(from ${from}, ${colorStops.join(', ')})`;
-        addInlineStyle(component, 'background-image', value);
-        return ext;
-    };
-
-    // Effects
-    ext.boxShadow = (v) => { addInlineStyle(component, 'box-shadow', v); return ext; };
-    ext.opacity = (v) => { addInlineStyle(component, 'opacity', String(v)); return ext; };
-
-    // Positioning
-    ext.position = (v) => { component.addClass(`jux-position-${v}`); return ext; }; // ✅ CSS class
-    ext.top = (v) => { addInlineStyle(component, 'top', v); return ext; };
-    ext.right = (v) => { addInlineStyle(component, 'right', v); return ext; };
-    ext.bottom = (v) => { addInlineStyle(component, 'bottom', v); return ext; };
-    ext.left = (v) => { addInlineStyle(component, 'left', v); return ext; };
-    ext.zIndex = (v) => { addInlineStyle(component, 'z-index', String(v)); return ext; };
-
-    // Overflow
-    ext.overflow = (v) => { component.addClass(`jux-overflow-${v}`); return ext; }; // ✅ CSS class
-    ext.overflowX = (v) => { component.addClass(`jux-overflow-x-${v}`); return ext; }; // ✅ CSS class
-    ext.overflowY = (v) => { component.addClass(`jux-overflow-y-${v}`); return ext; }; // ✅ CSS class
-
-    // Display
-    ext.display = (v) => { component.addClass(`jux-display-${v}`); return ext; }; // ✅ CSS class
-
-    // Flex
-    ext.flex = (v) => { addInlineStyle(component, 'flex', String(v)); return ext; };
-    ext.flexGrow = (v) => { addInlineStyle(component, 'flex-grow', String(v)); return ext; };
-    ext.flexShrink = (v) => { addInlineStyle(component, 'flex-shrink', String(v)); return ext; };
-    ext.flexBasis = (v) => { addInlineStyle(component, 'flex-basis', v); return ext; };
-    ext.alignSelf = (v) => { addInlineStyle(component, 'align-self', v); return ext; };
-
-    // ✅ NEW flex container properties
-    ext.flexDirection = (v) => { addInlineStyle(component, 'flex-direction', v); return ext; };
-    ext.flexWrap = (v) => { addInlineStyle(component, 'flex-wrap', v); return ext; };
-    ext.alignItems = (v) => { addInlineStyle(component, 'align-items', v); return ext; };
-    ext.justifyContent = (v) => { addInlineStyle(component, 'justify-content', v); return ext; };
-    ext.gap = (v) => { addInlineStyle(component, 'gap', v); return ext; };
-    ext.rowGap = (v) => { addInlineStyle(component, 'row-gap', v); return ext; };
-    ext.columnGap = (v) => { addInlineStyle(component, 'column-gap', v); return ext; };
-
-    // Transform
-    ext.transform = (v) => { addInlineStyle(component, 'transform', v); return ext; };
-    ext.transformOrigin = (v) => { addInlineStyle(component, 'transform-origin', v); return ext; };
-
-    // ✅ Rotation (all axes)
-    ext.rotate = (deg) => { addInlineStyle(component, 'transform', `rotate(${deg}deg)`); return ext; };
-    ext.rotateX = (deg) => { addInlineStyle(component, 'transform', `rotateX(${deg}deg)`); return ext; };
-    ext.rotateY = (deg) => { addInlineStyle(component, 'transform', `rotateY(${deg}deg)`); return ext; };
-    ext.rotateZ = (deg) => { addInlineStyle(component, 'transform', `rotateZ(${deg}deg)`); return ext; };
-
-    // ✅ Scale (all axes)
-    ext.scale = (v) => { addInlineStyle(component, 'transform', `scale(${v})`); return ext; };
-    ext.scaleX = (v) => { addInlineStyle(component, 'transform', `scaleX(${v})`); return ext; };
-    ext.scaleY = (v) => { addInlineStyle(component, 'transform', `scaleY(${v})`); return ext; };
-
-    // ✅ Translate
-    ext.translateX = (v) => { addInlineStyle(component, 'transform', `translateX(${v})`); return ext; };
-    ext.translateY = (v) => { addInlineStyle(component, 'transform', `translateY(${v})`); return ext; };
-    ext.translate = (x, y) => { addInlineStyle(component, 'transform', `translate(${x}, ${y})`); return ext; };
-
-    // ✅ Flip (mirror) transforms
-    ext.flipX = () => { addInlineStyle(component, 'transform', 'scaleX(-1)'); return ext; };
-    ext.flipY = () => { addInlineStyle(component, 'transform', 'scaleY(-1)'); return ext; };
-    ext.flipBoth = () => { addInlineStyle(component, 'transform', 'scale(-1, -1)'); return ext; };
-
-    // Transition & Animation
-    ext.transition = (v) => { addInlineStyle(component, 'transition', v); return ext; };
-    ext.transitionDuration = (v) => { addInlineStyle(component, 'transition-duration', v); return ext; };
-    ext.transitionDelay = (v) => { addInlineStyle(component, 'transition-delay', v); return ext; };
-    ext.animation = (v) => { addInlineStyle(component, 'animation', v); return ext; };
-
-    // Cursor & Interaction
-    ext.cursor = (v) => { component.addClass(`jux-cursor-${v}`); return ext; }; // ✅ CSS class
-    ext.pointerEvents = (v) => { component.addClass(`jux-pointer-events-${v}`); return ext; }; // ✅ CSS class
-    ext.userSelect = (v) => { component.addClass(`jux-select-${v}`); return ext; }; // ✅ CSS class
-
-    // Text
-    ext.color = (v) => { addInlineStyle(component, 'color', v); return ext; };
-    ext.fontSize = (v) => { addInlineStyle(component, 'font-size', v); return ext; };
-    ext.fontWeight = (v) => { addInlineStyle(component, 'font-weight', String(v)); return ext; };
-    ext.fontFamily = (v) => { addInlineStyle(component, 'font-family', v); return ext; };
-    ext.textAlign = (v) => { component.addClass(`jux-text-${v}`); return ext; }; // ✅ CSS class
-    ext.lineHeight = (v) => { addInlineStyle(component, 'line-height', String(v)); return ext; };
-    ext.letterSpacing = (v) => { addInlineStyle(component, 'letter-spacing', v); return ext; };
-    ext.textDecoration = (v) => { addInlineStyle(component, 'text-decoration', v); return ext; };
-    ext.textTransform = (v) => { component.addClass(`jux-text-${v}`); return ext; }; // ✅ CSS class
-    ext.whiteSpace = (v) => { component.addClass(`jux-whitespace-${v}`); return ext; }; // ✅ CSS class
-    ext.wordWrap = (v) => { component.addClass(`jux-word-wrap-${v === 'break-word' ? 'break' : 'normal'}`); return ext; }; // ✅ CSS class
-
-    return ext;
-}