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

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/LazyColumn.svelte

@@ -18,7 +18,7 @@
     let scrollTop = 0;
     let viewportHeight = 0;
 
-    let estimatedItemHeight = 56; // fallback Material
+    let estimatedItemHeight = 56;
     let measured = false;
 
     const overscan = 3;
@@ -43,7 +43,7 @@
         scrollTop = (e.target as HTMLDivElement).scrollTop;
     }
 
-    // --- Virtualization math ---
+    // --- Virtualization ---
     $: totalHeight = items.length * estimatedItemHeight;
 
     $: startIndex = Math.max(
@@ -55,13 +55,11 @@
         Math.ceil(viewportHeight / estimatedItemHeight) + overscan * 2;
 
     $: endIndex = Math.min(items.length, startIndex + visibleCount);
-
     $: visibleItems = items.slice(startIndex, endIndex);
 
-    // --- Arrangement ---
-    function resolveGap(arrangement: ArrangementValue): string {
-        return arrangement.type === "spaced"
-            ? `${arrangement.gap}px`
+    function resolveGap(): string {
+        return verticalArrangement.type === "spaced"
+            ? `${verticalArrangement.gap}px`
             : "0px";
     }
 </script>
@@ -69,15 +67,17 @@
 <div
         bind:this={container}
         on:scroll={onScroll}
+        class="compose-lazy-column"
         style={`
-    overflow-y:auto;
-    position:relative;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
     ${modifier.toStyle()}
   `}
 >
-    <!-- Total scroll space -->
+    <!-- Espacio total -->
     <div style={`height:${totalHeight}px; position:relative;`}>
-        <!-- Visible window -->
+        <!-- Ventana visible -->
         <div
                 style={`
         position:absolute;
@@ -88,7 +88,7 @@
         display:flex;
         flex-direction:column;
         align-items:${horizontalAlignment};
-        gap:${resolveGap(verticalArrangement)};
+        gap:${resolveGap()};
       `}
         >
             {#each visibleItems as item, i}

package/dist/components/layouts/LazyRow.svelte

@@ -1,71 +1,107 @@
 <script lang="ts">
     import { Modifier } from "../../core/modifier/Modifier";
+    import { onMount, tick } from "svelte";
     import { Alignment } from "./Alignment";
     import { Arrangement } from "./Arrangement";
     import type { ArrangementValue } from "./Arrangement";
-    import type { VerticalAlignment } from "./Alignment";
+    import type { HorizontalAlignment } from "./Alignment";
 
     export let items: any[] = [];
     export let modifier: Modifier = Modifier.empty();
 
-    export let verticalAlignment: VerticalAlignment = Alignment.Top;
-    export let horizontalArrangement: ArrangementValue = Arrangement.Start;
+    export let horizontalAlignment: HorizontalAlignment = Alignment.Start;
+    export let verticalArrangement: ArrangementValue = Arrangement.Start;
 
-    export let scrollEnabled: boolean = true;
-    export let hideScrollbar: boolean = false;
-    export let horizontalSpacing: number | null = null;
+    let container: HTMLDivElement;
+    let probeItem: HTMLDivElement | null = null;
 
-    function resolveGap(): string {
-        if (horizontalSpacing !== null) {
-            return `${horizontalSpacing}px`;
+    let scrollTop = 0;
+    let viewportHeight = 0;
+
+    let estimatedItemHeight = 56; // fallback Material
+    let measured = false;
+
+    const overscan = 3;
+
+    onMount(() => {
+        viewportHeight = container.clientHeight;
+    });
+
+    async function measure() {
+        await tick();
+        if (probeItem) {
+            estimatedItemHeight = probeItem.offsetHeight;
+            measured = true;
         }
+    }
 
-        return horizontalArrangement.type === "spaced"
-            ? `${horizontalArrangement.gap}px`
-            : "0px";
+    $: if (probeItem && !measured) {
+        measure();
     }
 
-    function resolveOverflowX(): string {
-        return scrollEnabled ? "auto" : "hidden";
+    function onScroll(e: Event) {
+        scrollTop = (e.target as HTMLDivElement).scrollTop;
     }
 
-    function resolveScrollbarStyle(): string {
-        if (!hideScrollbar) return "";
+    // --- Virtualization math ---
+    $: totalHeight = items.length * estimatedItemHeight;
 
-        return `
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-    `;
-    }
-</script>
+    $: startIndex = Math.max(
+        0,
+        Math.floor(scrollTop / estimatedItemHeight) - overscan
+    );
 
-<div
-        class={hideScrollbar ? "lazy-row--hide-scrollbar" : ""}
-        style={`
-    display: flex;
-    flex-direction: row;
+    $: visibleCount =
+        Math.ceil(viewportHeight / estimatedItemHeight) + overscan * 2;
 
-    align-items: ${verticalAlignment};
-    justify-content: ${horizontalArrangement.justifyContent};
-    gap: ${resolveGap()};
+    $: endIndex = Math.min(items.length, startIndex + visibleCount);
 
-    overflow-x: ${resolveOverflowX()};
-    overflow-y: visible;
+    $: visibleItems = items.slice(startIndex, endIndex);
 
-    height: fit-content;
-    min-height: fit-content;
+    // --- Arrangement ---
+    function resolveGap(arrangement: ArrangementValue): string {
+        return arrangement.type === "spaced"
+            ? `${arrangement.gap}px`
+            : "0px";
+    }
+</script>
 
-    ${resolveScrollbarStyle()}
+<div
+        bind:this={container}
+        on:scroll={onScroll}
+        style={`
+    overflow-y:auto;
+    position:relative;
     ${modifier.toStyle()}
   `}
 >
-    {#each items as item}
-        <slot {item} />
-    {/each}
-</div>
-
-<style>
-    .lazy-row--hide-scrollbar::-webkit-scrollbar {
-        display: none;
-    }
-</style>
+    <!-- Total scroll space -->
+    <div style={`height:${totalHeight}px; position:relative;`}>
+        <!-- Visible window -->
+        <div
+                style={`
+        position:absolute;
+        top:${startIndex * estimatedItemHeight}px;
+        left:0;
+        right:0;
+
+        display:flex;
+        flex-direction:column;
+        align-items:${horizontalAlignment};
+        gap:${resolveGap(verticalArrangement)};
+      `}
+        >
+            {#each visibleItems as item, i}
+                {#if i === 0 && !measured}
+                    <div bind:this={probeItem}>
+                        <slot {item} />
+                    </div>
+                {:else}
+                    <div>
+                        <slot {item} />
+                    </div>
+                {/if}
+            {/each}
+        </div>
+    </div>
+</div>

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

@@ -1,6 +1,6 @@
 import { Modifier } from "../../core/modifier/Modifier";
 import type { ArrangementValue } from "./Arrangement";
-import type { VerticalAlignment } from "./Alignment";
+import type { HorizontalAlignment } from "./Alignment";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -22,11 +22,8 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 declare const LazyRow: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     items?: any[];
     modifier?: Modifier;
-    verticalAlignment?: VerticalAlignment;
-    horizontalArrangement?: ArrangementValue;
-    scrollEnabled?: boolean;
-    hideScrollbar?: boolean;
-    horizontalSpacing?: number | null;
+    horizontalAlignment?: HorizontalAlignment;
+    verticalArrangement?: ArrangementValue;
 }, {
     default: {
         item: any;

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/Scaffold.svelte

@@ -1,70 +1,50 @@
 <script lang="ts">
     import { Modifier } from "../../core/modifier/Modifier";
+    import { resolveBoxAlignment } from "./resolveAlignment";
+    import {Alignment, BoxAlignment} from "./Alignment";
 
     export let modifier: Modifier = Modifier.empty();
-
-    // Padding interno aplicado al content (como Scaffold paddingValues)
-    export let contentPadding: number = 16;
-
-    // Control del FAB
-    export let fabAlignment:
-        | "bottom-end"
-        | "bottom-center"
-        | "bottom-start" = "bottom-end";
+    export let contentPadding = 16;
+    export let fabAlignment: BoxAlignment = Alignment.BottomEnd;
 </script>
 
 <div
+        class="compose-relative"
         style={`
     display: flex;
     flex-direction: column;
-    height: 100%;
     width: 100%;
-    position: relative;
+    height: 100%;
     ${modifier.toStyle()}
   `}
 >
-    <!-- Top Bar -->
-    <div>
-        <slot name="topBar" />
-    </div>
+    <!-- Top bar -->
+    <slot name="topBar" />
 
     <!-- Content -->
     <div
-            style={`
-      flex: 1;
-      position: relative;
-      padding: ${contentPadding}px;
-      overflow: auto;
-    `}
+            class="compose-scaffold-content"
+            style={`padding:${contentPadding}px;`}
     >
         <slot />
     </div>
 
-    <!-- Bottom Bar -->
-    <div>
-        <slot name="bottomBar" />
-    </div>
+    <!-- Bottom bar -->
+    <slot name="bottomBar" />
 
-    <!-- Floating Action Button -->
+    <!-- FAB overlay -->
     <div
             style={`
-      position: absolute;
-      pointer-events: none;
-      inset: 0;
+      position:absolute;
+      inset:0;
+      pointer-events:none;
     `}
     >
         <div
                 style={`
-        position: absolute;
-        pointer-events: auto;
-
-        ${
-          fabAlignment === "bottom-end"
-            ? "right: 16px; bottom: 16px;"
-            : fabAlignment === "bottom-center"
-            ? "left: 50%; transform: translateX(-50%); bottom: 16px;"
-            : "left: 16px; bottom: 16px;"
-        }
+        ${resolveBoxAlignment(fabAlignment)}
+        pointer-events:auto;
+        margin:16px;
       `}
         >
             <slot name="floatingActionButton" />

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

@@ -1,4 +1,5 @@
 import { Modifier } from "../../core/modifier/Modifier";
+import { BoxAlignment } from "./Alignment";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -20,7 +21,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 declare const Scaffold: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     modifier?: Modifier;
     contentPadding?: number;
-    fabAlignment?: "bottom-end" | "bottom-center" | "bottom-start";
+    fabAlignment?: BoxAlignment;
 }, {
     topBar: {};
     default: {};

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/dist/core/styles/baseline.css

@@ -0,0 +1,49 @@
+/* compose-svelted baseline.css */
+
+/* 1. Modelo de caja consistente */
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+/* 2. Root layout estable */
+html, body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+/* 3. Host de la app */
+#app, body > div {
+    width: 100%;
+    height: 100%;
+}
+
+/* 4. Prevención de colapso en flex */
+* {
+    min-width: 0;
+    min-height: 0;
+}
+
+/* 5. Soporte para absolute alignment */
+.compose-relative {
+    position: relative;
+}
+
+/* 6. Clickable base */
+.compose-clickable {
+    cursor: pointer;
+    user-select: none;
+}
+
+/* 7. Evitar interferencia de estilos externos */
+img, svg, video, canvas {
+    display: block;
+    max-width: 100%;
+}
+
+.compose-lazy-row,
+.compose-lazy-column {
+    min-width: 0;
+    min-height: 0;
+}

package/dist/index.js

@@ -1,3 +1,4 @@
+import "./core/styles/baseline.css";
 // Root
 export { default as ComposeTheme } from "./core/theme/ComposeTheme.svelte";
 export { default as AppRoot } from "./components/AppRoot.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielito1996/compose-svelted",
-  "version": "0.2.7-alpha01",
+  "version": "0.2.7-alpha03",
   "description": "Compose-like UI toolkit for Svelte, inspired by Jetpack Compose",
   "license": "MIT",
   "type": "module",
@@ -18,7 +18,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "svelte": "./dist/index.js"
-    }
+    },
+    "./baseline.css": "./dist/core/styles/baseline.css"
   },
   "files": [
     "dist"