@danielito1996/compose-svelted 0.2.7-alpha01 → 0.2.7-alpha02

package/dist/components/layouts/Box.svelte

@@ -1,25 +1,47 @@
 <script lang="ts">
     import { Modifier } from "../../core/modifier/Modifier";
-    import type {BoxAlignment} from "./Alignment";
+    import type { BoxAlignment } from "./Alignment";
+    import {resolveBoxAlignment} from "./resolveAlignment";
 
     export let modifier: Modifier = Modifier.empty();
     export let contentAlignment: BoxAlignment | undefined = undefined;
 
-    $: contentStyle = contentAlignment ? alignmentToFlexStyle(contentAlignment) : "";
+    /**
+     * Box-level alignment:
+     * Alinea TODOS los hijos (Compose Box behavior)
+     */
+    function contentAlignmentStyle(alignment: BoxAlignment): string {
+        const [h, v = h] = alignment.split(" ");
 
-    function alignmentToFlexStyle(alignment: BoxAlignment): string {
-        const parts = alignment.split(" ");
-        const horiz = parts[0] === "flex-start" ? "flex-start" : parts[0] === "flex-end" ? "flex-end" : "center";
-        const vert = parts[1] || parts[0];
-        const v = vert === "flex-start" ? "flex-start" : vert === "flex-end" ? "flex-end" : "center";
+        const justify =
+            h === "flex-start" ? "flex-start" :
+                h === "flex-end" ? "flex-end" :
+                    "center";
 
-        return `display:flex; align-items:${v}; justify-content:${horiz};`;
+        const align =
+            v === "flex-start" ? "flex-start" :
+                v === "flex-end" ? "flex-end" :
+                    "center";
+
+        return `
+      display:flex;
+      justify-content:${justify};
+      align-items:${align};
+    `;
     }
 </script>
 
 <div
-        class="relative"
-        style={`${contentStyle} ${modifier.toStyle()}`}
+        class="compose-box"
+        style={`
+    position:relative;
+    ${contentAlignment ? contentAlignmentStyle(contentAlignment) : ""}
+    ${modifier.toStyle()}
+  `}
 >
-    <slot />
+    <!--
+      Slot con scope:
+      Cada hijo puede traer su propio Modifier
+    -->
+    style={`position:relative;${modifier.toStyle()}`}
 </div>

package/dist/components/layouts/Box.svelte.d.ts

@@ -13,20 +13,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Box: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+declare const Box: $$__sveltets_2_IsomorphicComponent<{
     modifier?: Modifier;
     contentAlignment?: BoxAlignment | undefined;
 }, {
-    default: {};
-}>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
+}, {}, {}, string>;
 type Box = InstanceType<typeof Box>;
 export default Box;

package/dist/components/layouts/Column.svelte

@@ -4,20 +4,43 @@
     import { Arrangement } from "./Arrangement";
     import type { ArrangementValue } from "./Arrangement";
     import type { HorizontalAlignment } from "./Alignment";
+    import {resolveFlexAlignSelf} from "./resolveFlexAlignSelf";
 
     export let modifier: Modifier = Modifier.empty();
+
+    // Cross-axis (horizontal en Column)
     export let horizontalAlignment: HorizontalAlignment = Alignment.Start;
+
+    // Main-axis (vertical en Column)
     export let verticalArrangement: ArrangementValue = Arrangement.Start;
+
+    $: gapStyle =
+        verticalArrangement.type === "spaced"
+            ? `gap:${verticalArrangement.gap}px;`
+            : "";
 </script>
 
 <div
-        class="flex flex-col"
+        class="compose-column"
         style={`
-            align-items: ${horizontalAlignment};
-            justify-content: ${verticalArrangement.justifyContent};
-            ${verticalArrangement.type === "spaced" ? `gap:${verticalArrangement.gap}px;` : ""}
-            ${modifier.toStyle()}
-        `}
+    display: flex;
+    flex-direction: column;
+    align-items: ${horizontalAlignment};
+    justify-content: ${verticalArrangement.justifyContent};
+    ${gapStyle}
+    ${modifier.toStyle()}
+  `}
 >
-    <slot />
+    <slot let:modifier>
+        <div
+                style={`
+      ${modifier?.getMeta().align
+        ? resolveFlexAlignSelf(modifier.getMeta().align)
+        : ""}
+      ${modifier?.toStyle()}
+    `}
+        >
+            <slot />
+        </div>
+    </slot>
 </div>

package/dist/components/layouts/LayoutContext.d.ts

@@ -0,0 +1 @@
+export type LayoutContext = "flex" | "box";

package/dist/components/layouts/LayoutContext.js

@@ -0,0 +1 @@
+export {};

package/dist/components/layouts/Row.svelte

@@ -4,20 +4,43 @@
     import { Arrangement } from "./Arrangement";
     import type { ArrangementValue } from "./Arrangement";
     import type { VerticalAlignment } from "./Alignment";
+    import {resolveFlexAlignSelf} from "./resolveFlexAlignSelf";
 
     export let modifier: Modifier = Modifier.empty();
-    export let verticalAlignment: VerticalAlignment = Alignment.Top;
+
+    // Cross-axis (vertical en Row)
+    export let verticalAlignment: VerticalAlignment = Alignment.CenterVertically;
+
+    // Main-axis (horizontal en Row)
     export let horizontalArrangement: ArrangementValue = Arrangement.Start;
+
+    $: gapStyle =
+        horizontalArrangement.type === "spaced"
+            ? `gap:${horizontalArrangement.gap}px;`
+            : "";
 </script>
 
 <div
-        class="flex flex-row"
+        class="compose-row"
         style={`
-            align-items: ${verticalAlignment};
-            justify-content: ${horizontalArrangement.justifyContent};
-        ${horizontalArrangement.type === "spaced" ? `gap:${horizontalArrangement.gap}px;` : ""}
-        ${modifier.toStyle()}
-    `}
+    display: flex;
+    flex-direction: row;
+    align-items: ${verticalAlignment};
+    justify-content: ${horizontalArrangement.justifyContent};
+    ${gapStyle}
+    ${modifier.toStyle()}
+  `}
 >
-    <slot />
+    <slot let:modifier>
+        <div
+                style={`
+      ${modifier?.getMeta().align
+        ? resolveFlexAlignSelf(modifier.getMeta().align)
+        : ""}
+      ${modifier?.toStyle()}
+    `}
+        >
+            <slot />
+        </div>
+    </slot>
 </div>

package/dist/components/layouts/resolveAlignment.d.ts

@@ -0,0 +1,4 @@
+import { ModifierImpl } from "../../core/modifier/ModifierImpl";
+import { BoxAlignment } from "./Alignment";
+export declare function resolveBoxAlignment(alignment?: BoxAlignment): string;
+export declare function resolveFlexAlignment(mod: ModifierImpl): string;

package/dist/components/layouts/resolveAlignment.js

@@ -0,0 +1,44 @@
+/* =========================
+ * Box (position:absolute)
+ * ========================= */
+export function resolveBoxAlignment(alignment) {
+    var _a;
+    if (!alignment)
+        return "";
+    var parts = alignment.split(" ");
+    var h = parts[0];
+    var v = (_a = parts[1]) !== null && _a !== void 0 ? _a : parts[0];
+    var style = "position:absolute;";
+    // Vertical
+    if (v === "flex-start")
+        style += "top:0;";
+    else if (v === "flex-end")
+        style += "bottom:0;";
+    else
+        style += "top:50%;";
+    // Horizontal
+    if (h === "flex-start")
+        style += "left:0;";
+    else if (h === "flex-end")
+        style += "right:0;";
+    else
+        style += "left:50%;";
+    if (h === "center" || v === "center") {
+        style += "transform:translate(-50%,-50%);";
+    }
+    return style;
+}
+/* =========================
+ * Flex (Row / Column)
+ * ========================= */
+export function resolveFlexAlignment(mod) {
+    var align = mod.getMeta().align;
+    if (!align)
+        return "";
+    var horizontal = align.split(" ")[0];
+    return "\n    align-self:".concat(horizontal === "center"
+        ? "center"
+        : horizontal === "flex-end"
+            ? "flex-end"
+            : "flex-start", ";\n  ");
+}

package/dist/components/layouts/resolveFlexAlignSelf.d.ts

@@ -0,0 +1,2 @@
+import { BoxAlignment } from "./Alignment";
+export declare function resolveFlexAlignSelf(alignment: BoxAlignment): string;

package/dist/components/layouts/resolveFlexAlignSelf.js

@@ -0,0 +1,10 @@
+export function resolveFlexAlignSelf(alignment) {
+    var _a;
+    var parts = alignment.split(" ");
+    var vertical = (_a = parts[1]) !== null && _a !== void 0 ? _a : parts[0];
+    if (vertical === "flex-start")
+        return "align-self:flex-start;";
+    if (vertical === "flex-end")
+        return "align-self:flex-end;";
+    return "align-self:center;";
+}

package/dist/core/modifier/ModifierImpl.d.ts

@@ -1,38 +1,32 @@
 import type { BoxAlignment } from "../../components/layouts/Alignment";
 import type { Shape } from "../shapes/Shape";
 import type { ColorToken } from "../theme/ColorScheme";
+export type ModifierMeta = {
+    align?: BoxAlignment;
+};
 export type ModifierEntry = {
     className?: string;
     style?: string;
+    meta?: ModifierMeta;
 };
 export declare class ModifierImpl {
     private readonly entries;
     constructor(entries?: ModifierEntry[]);
     then(other: ModifierImpl): ModifierImpl;
-    paddingHorizontal(value: number): ModifierImpl;
-    verticalScroll(enabled?: boolean): ModifierImpl;
-    horizontalScroll(enabled?: boolean): ModifierImpl;
-    paddingVertical(value: number): ModifierImpl;
     fillMaxWidth(): ModifierImpl;
     fillMaxHeight(): ModifierImpl;
     fillMaxSize(): ModifierImpl;
-    background(color: ColorToken | string): ModifierImpl;
     weight(weight: number, fill?: boolean): ModifierImpl;
-    align(alignment: BoxAlignment): ModifierImpl;
-    padding(valueOrParams?: number | {
-        top?: number;
-        bottom?: number;
-        start?: number;
-        end?: number;
-    }, unit?: string): ModifierImpl;
-    width(value: number | string, unit?: string): ModifierImpl;
-    height(value: number | string, unit?: string): ModifierImpl;
-    marginTop(value: number, unit?: string): ModifierImpl;
-    clip(shape: Shape): ModifierImpl;
-    size(value: number | string, unit?: string): ModifierImpl;
-    offset(x: number, y: number): ModifierImpl;
-    clickable(onClick: () => void): ModifierImpl;
+    padding(value: number): ModifierImpl;
+    paddingHorizontal(value: number): ModifierImpl;
+    paddingVertical(value: number): ModifierImpl;
+    marginTop(value: number): ModifierImpl;
+    background(color: ColorToken | string): ModifierImpl;
     border(width: number, color: string, shape?: Shape): ModifierImpl;
+    clip(shape: Shape): ModifierImpl;
+    align(alignment: BoxAlignment): ModifierImpl;
+    clickable(): ModifierImpl;
     toStyle(): string;
     toClass(): string;
+    getMeta(): ModifierMeta;
 }

package/dist/core/modifier/ModifierImpl.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -8,40 +19,19 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { resolveColor } from "../theme/resolve";
+/* =========================
+ * ModifierImpl
+ * ========================= */
 var ModifierImpl = /** @class */ (function () {
     function ModifierImpl(entries) {
         if (entries === void 0) { entries = []; }
         this.entries = entries;
     }
+    /* -------- composición -------- */
     ModifierImpl.prototype.then = function (other) {
         return new ModifierImpl(__spreadArray(__spreadArray([], this.entries, true), other.entries, true));
     };
-    ModifierImpl.prototype.paddingHorizontal = function (value) {
-        return this.then(new ModifierImpl([
-            { style: "padding-left:".concat(value, "px;padding-right:").concat(value, "px;") },
-        ]));
-    };
-    ModifierImpl.prototype.verticalScroll = function (enabled) {
-        if (enabled === void 0) { enabled = true; }
-        return this.then(new ModifierImpl([{
-                style: enabled
-                    ? "overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;"
-                    : ''
-            }]));
-    };
-    ModifierImpl.prototype.horizontalScroll = function (enabled) {
-        if (enabled === void 0) { enabled = true; }
-        return this.then(new ModifierImpl([{
-                style: enabled
-                    ? "overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap;"
-                    : ''
-            }]));
-    };
-    ModifierImpl.prototype.paddingVertical = function (value) {
-        return this.then(new ModifierImpl([
-            { style: "padding-top:".concat(value, "px;padding-bottom:").concat(value, "px;") },
-        ]));
-    };
+    /* -------- layout size -------- */
     ModifierImpl.prototype.fillMaxWidth = function () {
         return this.then(new ModifierImpl([{ style: "width:100%;" }]));
     };
@@ -51,164 +41,86 @@ var ModifierImpl = /** @class */ (function () {
     ModifierImpl.prototype.fillMaxSize = function () {
         return this.then(new ModifierImpl([{ style: "width:100%;height:100%;" }]));
     };
-    ModifierImpl.prototype.background = function (color) {
-        var resolved;
-        if (typeof color === "string" &&
-            (color.startsWith("#") ||
-                color.startsWith("rgb") ||
-                color.startsWith("hsl") ||
-                color === "transparent" ||
-                color === "currentColor")) {
-            // Color CSS directo
-            resolved = color;
-        }
-        else {
-            // Token de ComposeTheme
-            resolved = resolveColor(color);
-        }
-        return this.then(new ModifierImpl([
-            { style: "background:".concat(resolved, ";") }
-        ]));
-    };
     ModifierImpl.prototype.weight = function (weight, fill) {
         if (fill === void 0) { fill = true; }
-        if (weight <= 0) {
-            console.warn("Modifier.weight() debe ser > 0");
+        if (weight <= 0)
             return this;
-        }
-        var styleParts = [
-            "flex-grow: ".concat(weight, ";"),
-            "flex-shrink: ".concat(fill ? 1 : 0, ";"),
-            "flex-basis: 0%;" // importante para que el peso funcione bien
-        ];
-        return this.then(new ModifierImpl([{ style: styleParts.join(" ") }]));
-    };
-    ModifierImpl.prototype.align = function (alignment) {
-        var parts = alignment.split(' ');
-        var horizontal = parts[0]; // flex-start, center, flex-end
-        var vertical = parts[1] || parts[0]; // para casos simples como "center"
-        var style = 'position: absolute;';
-        // Vertical
-        if (vertical === 'flex-start') {
-            style += 'top: 0;';
-        }
-        else if (vertical === 'flex-end') {
-            style += 'bottom: 0;';
-        }
-        else if (vertical === 'center') {
-            style += 'top: 50%; transform: translateY(-50%);';
-        }
-        // Horizontal
-        if (horizontal === 'flex-start') {
-            style += 'left: 0;';
-        }
-        else if (horizontal === 'flex-end') {
-            style += 'right: 0;';
-        }
-        else if (horizontal === 'center') {
-            style += 'left: 50%;';
-            // Combinar transform si ya hay translateY
-            if (style.includes('translateY')) {
-                style = style.replace('translateY(-50%)', 'translate(-50%, -50%)');
-            }
-            else {
-                style += 'transform: translateX(-50%);';
-            }
-        }
-        return this.then(new ModifierImpl([{ style: style }]));
-    };
-    ModifierImpl.prototype.padding = function (valueOrParams, unit) {
-        if (valueOrParams === void 0) { valueOrParams = 0; }
-        if (unit === void 0) { unit = 'px'; }
-        var style = '';
-        if (typeof valueOrParams === 'number') {
-            // Padding uniforme
-            style = "padding:".concat(valueOrParams).concat(unit, ";");
-        }
-        else {
-            // Padding direccional
-            var _a = valueOrParams.top, top = _a === void 0 ? 0 : _a, _b = valueOrParams.bottom, bottom = _b === void 0 ? 0 : _b, _c = valueOrParams.start, start = _c === void 0 ? 0 : _c, _d = valueOrParams.end, end = _d === void 0 ? 0 : _d;
-            style = "\n                padding-top:".concat(top).concat(unit, ";\n                padding-bottom:").concat(bottom).concat(unit, ";\n                padding-left:").concat(start).concat(unit, ";\n                //padding-right:").concat(end).concat(unit, ";\n    ").trim();
-        }
-        return this.then(new ModifierImpl([{ style: style }]));
-    };
-    ModifierImpl.prototype.width = function (value, unit) {
-        if (unit === void 0) { unit = 'px'; }
-        var size = typeof value === 'number' ? "".concat(value).concat(unit) : value;
-        return this.then(new ModifierImpl([{ style: "width:".concat(size, ";") }]));
+        return this.then(new ModifierImpl([
+            {
+                style: "\n            flex-grow:".concat(weight, ";\n            flex-shrink:").concat(fill ? 1 : 0, ";\n            flex-basis:0%;\n          "),
+            },
+        ]));
     };
-    ModifierImpl.prototype.height = function (value, unit) {
-        if (unit === void 0) { unit = 'px'; }
-        var size = typeof value === 'number' ? "".concat(value).concat(unit) : value;
-        return this.then(new ModifierImpl([{ style: "height:".concat(size, ";") }]));
+    /* -------- padding / margin -------- */
+    ModifierImpl.prototype.padding = function (value) {
+        return this.then(new ModifierImpl([{ style: "padding:".concat(value, "px;") }]));
     };
-    ModifierImpl.prototype.marginTop = function (value, unit) {
-        if (unit === void 0) { unit = 'px'; }
-        return this.then(new ModifierImpl([{ style: "margin-top:".concat(value).concat(unit, ";") }]));
+    ModifierImpl.prototype.paddingHorizontal = function (value) {
+        return this.then(new ModifierImpl([
+            { style: "padding-left:".concat(value, "px;padding-right:").concat(value, "px;") },
+        ]));
     };
-    ModifierImpl.prototype.clip = function (shape) {
+    ModifierImpl.prototype.paddingVertical = function (value) {
         return this.then(new ModifierImpl([
-            {
-                style: "\n                    border-radius:".concat(shape.toCssBorderRadius(), ";\n                    overflow:hidden;\n                ")
-            }
+            { style: "padding-top:".concat(value, "px;padding-bottom:").concat(value, "px;") },
         ]));
     };
-    ModifierImpl.prototype.size = function (value, unit) {
-        if (unit === void 0) { unit = "px"; }
-        if (value === null || value === undefined) {
+    ModifierImpl.prototype.marginTop = function (value) {
+        return this.then(new ModifierImpl([{ style: "margin-top:".concat(value, "px;") }]));
+    };
+    /* -------- background / border -------- */
+    ModifierImpl.prototype.background = function (color) {
+        var resolved = typeof color === "string"
+            ? color
+            : resolveColor(color);
+        return this.then(new ModifierImpl([{ style: "background:".concat(resolved, ";") }]));
+    };
+    ModifierImpl.prototype.border = function (width, color, shape) {
+        if (width <= 0)
             return this;
-        }
-        var resolved;
-        if (typeof value === "number") {
-            if (isNaN(value))
-                return this;
-            resolved = "".concat(value).concat(unit);
-        }
-        else {
-            if (value.trim() === "")
-                return this;
-            resolved = value;
-        }
         return this.then(new ModifierImpl([
             {
-                style: "width:".concat(resolved, ";height:").concat(resolved, ";")
-            }
+                style: "\n            border:".concat(width, "px solid ").concat(color, ";\n            ").concat(shape ? "border-radius:".concat(shape.toCssBorderRadius(), ";") : "", "\n          "),
+            },
         ]));
     };
-    ModifierImpl.prototype.offset = function (x, y) {
-        if (isNaN(x) || isNaN(y))
-            return this;
+    ModifierImpl.prototype.clip = function (shape) {
         return this.then(new ModifierImpl([
             {
-                style: "transform: translate(".concat(x, "px, ").concat(y, "px);")
-            }
+                style: "\n            border-radius:".concat(shape.toCssBorderRadius(), ";\n            overflow:hidden;\n          "),
+            },
         ]));
     };
-    ModifierImpl.prototype.clickable = function (onClick) {
+    /* -------- posicionamiento semántico -------- */
+    ModifierImpl.prototype.align = function (alignment) {
         return this.then(new ModifierImpl([
             {
-                className: "compose-clickable",
-                style: "\n                    cursor: pointer;\n                    user-select: none;\n                "
+                meta: { align: alignment }
             }
         ]));
     };
-    ModifierImpl.prototype.border = function (width, color, shape) {
-        if (width <= 0)
-            return this;
-        var radius = shape ? shape.toCssBorderRadius() : undefined;
+    /* -------- interacción -------- */
+    ModifierImpl.prototype.clickable = function () {
         return this.then(new ModifierImpl([
             {
-                style: "\n                    border:".concat(width, "px solid ").concat(color, ";\n                    ").concat(radius ? "border-radius:".concat(radius, ";") : "", "\n                ")
-            }
+                className: "compose-clickable",
+                style: "cursor:pointer;user-select:none;",
+            },
         ]));
     };
-    // ---- consumo interno ----
+    /* -------- consumo interno -------- */
     ModifierImpl.prototype.toStyle = function () {
         return this.entries.map(function (e) { var _a; return (_a = e.style) !== null && _a !== void 0 ? _a : ""; }).join("");
     };
     ModifierImpl.prototype.toClass = function () {
         return this.entries.map(function (e) { var _a; return (_a = e.className) !== null && _a !== void 0 ? _a : ""; }).join(" ");
     };
+    ModifierImpl.prototype.getMeta = function () {
+        return this.entries.reduce(function (acc, e) {
+            var _a;
+            return (__assign(__assign({}, acc), ((_a = e.meta) !== null && _a !== void 0 ? _a : {})));
+        }, {});
+    };
     return ModifierImpl;
 }());
 export { ModifierImpl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielito1996/compose-svelted",
-  "version": "0.2.7-alpha01",
+  "version": "0.2.7-alpha02",
   "description": "Compose-like UI toolkit for Svelte, inspired by Jetpack Compose",
   "license": "MIT",
   "type": "module",