@danielito1996/compose-svelted 0.2.7 → 0.2.8-alpha01

package/dist/components/layouts/Alignment.js

@@ -1,20 +1,42 @@
+/**
+ * Alignment — tokens de alineación type-safe con branded types.
+ *
+ * Los objetos son opacos: nunca se puede pasar un VerticalAlignment donde
+ * se espera un HorizontalAlignment, aunque ambos representen "center" en CSS.
+ *
+ * Filosofía Jetpack Compose:
+ *  - HorizontalAlignment → eje cross de Column
+ *  - VerticalAlignment   → eje cross de Row
+ *  - BoxAlignment        → alineación compuesta para Box (stack)
+ */
+// ─── Helpers internos ────────────────────────────────────────────────────────
+function h(cssValue) {
+    return { _brand: 'HorizontalAlignment', cssValue: cssValue };
+}
+function v(cssValue) {
+    return { _brand: 'VerticalAlignment', cssValue: cssValue };
+}
+function box(horizontal, vertical) {
+    return { _brand: 'BoxAlignment', horizontal: horizontal, vertical: vertical };
+}
+// ─── Tokens públicos ─────────────────────────────────────────────────────────
 export var Alignment = {
-    // Horizontal only (para Column)
-    Start: "flex-start",
-    CenterHorizontally: "center",
-    End: "flex-end",
-    // Vertical only (para Row)
-    Top: "flex-start",
-    CenterVertically: "center",
-    Bottom: "flex-end",
-    // Compuestos (para Box y layouts avanzados)
-    TopStart: "flex-start flex-start",
-    TopCenter: "center flex-start",
-    TopEnd: "flex-end flex-start",
-    CenterStart: "flex-start center",
-    Center: "center center",
-    CenterEnd: "flex-end center",
-    BottomStart: "flex-start flex-end",
-    BottomCenter: "center flex-end",
-    BottomEnd: "flex-end flex-end",
+    // Horizontal — eje cross de Column
+    Start: h('flex-start'),
+    CenterHorizontally: h('center'),
+    End: h('flex-end'),
+    // Vertical — eje cross de Row
+    Top: v('flex-start'),
+    CenterVertically: v('center'),
+    Bottom: v('flex-end'),
+    // Box — alineación compuesta (stack)
+    TopStart: box('flex-start', 'flex-start'),
+    TopCenter: box('center', 'flex-start'),
+    TopEnd: box('flex-end', 'flex-start'),
+    CenterStart: box('flex-start', 'center'),
+    Center: box('center', 'center'),
+    CenterEnd: box('flex-end', 'center'),
+    BottomStart: box('flex-start', 'flex-end'),
+    BottomCenter: box('center', 'flex-end'),
+    BottomEnd: box('flex-end', 'flex-end'),
 };

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

@@ -1,23 +1,39 @@
 /**
- * Arrangement — eje principal (main axis)
- * Fiel a Jetpack Compose
+ * Arrangement — eje principal (main axis).
+ *
+ * Fiel a Jetpack Compose:
+ *  - Arrangement.Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly
+ *  - Arrangement.spacedBy(gap) → gap entre hijos, con justificación base opcional
+ *  - Arrangement.spacedBy(gap, Arrangement.Center) → centrado + gap
  */
+type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
 export type ArrangementValue = {
-    type: "static";
-    justifyContent: string;
+    readonly type: 'static';
+    readonly justifyContent: JustifyContent;
+    readonly gap?: never;
 } | {
-    type: "spaced";
-    gap: number;
-    justifyContent: string;
+    readonly type: 'spaced';
+    readonly justifyContent: JustifyContent;
+    readonly gap: number;
 };
 export declare const Arrangement: {
+    readonly Top: ArrangementValue;
+    readonly Bottom: ArrangementValue;
     readonly Start: ArrangementValue;
-    readonly Center: ArrangementValue;
     readonly End: ArrangementValue;
-    readonly Bottom: ArrangementValue;
-    readonly Top: ArrangementValue;
+    readonly Center: ArrangementValue;
     readonly SpaceBetween: ArrangementValue;
     readonly SpaceAround: ArrangementValue;
     readonly SpaceEvenly: ArrangementValue;
-    readonly spacedBy: (value: number) => ArrangementValue;
+    /**
+     * Espaciado uniforme entre hijos con gap en px.
+     * @param gap        Espacio en píxeles entre elementos
+     * @param baseAlign  Alineación base del main-axis (por defecto flex-start)
+     *
+     * @example
+     * Arrangement.spacedBy(16)
+     * Arrangement.spacedBy(16, Arrangement.Center)
+     */
+    readonly spacedBy: (gap: number, baseAlign?: ArrangementValue) => ArrangementValue;
 };
+export {};

package/dist/components/layouts/Arrangement.js

@@ -1,46 +1,39 @@
 /**
- * Arrangement — eje principal (main axis)
- * Fiel a Jetpack Compose
+ * Arrangement — eje principal (main axis).
+ *
+ * Fiel a Jetpack Compose:
+ *  - Arrangement.Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly
+ *  - Arrangement.spacedBy(gap) → gap entre hijos, con justificación base opcional
+ *  - Arrangement.spacedBy(gap, Arrangement.Center) → centrado + gap
  */
+// ─── Tokens estáticos ────────────────────────────────────────────────────────
+var staticArrangement = function (justifyContent) {
+    return ({ type: 'static', justifyContent: justifyContent });
+};
+// ─── Arrangement public API ──────────────────────────────────────────────────
 export var Arrangement = {
-    // --- simples ---
-    Start: {
-        type: "static",
-        justifyContent: "flex-start",
-    },
-    Center: {
-        type: "static",
-        justifyContent: "center",
-    },
-    End: {
-        type: "static",
-        justifyContent: "flex-end",
-    },
-    Bottom: {
-        type: "static",
-        justifyContent: "flex-end"
-    },
-    Top: {
-        type: "static",
-        justifyContent: "flex-start"
-    },
-    SpaceBetween: {
-        type: "static",
-        justifyContent: "space-between",
-    },
-    SpaceAround: {
-        type: "static",
-        justifyContent: "space-around",
-    },
-    SpaceEvenly: {
-        type: "static",
-        justifyContent: "space-evenly",
-    },
-    spacedBy: function (value) {
-        return {
-            type: "spaced",
-            gap: value,
-            justifyContent: "flex-start",
-        };
+    // Column main-axis (vertical)
+    Top: staticArrangement('flex-start'),
+    Bottom: staticArrangement('flex-end'),
+    // Row main-axis (horizontal)
+    Start: staticArrangement('flex-start'),
+    End: staticArrangement('flex-end'),
+    // Compartidos
+    Center: staticArrangement('center'),
+    SpaceBetween: staticArrangement('space-between'),
+    SpaceAround: staticArrangement('space-around'),
+    SpaceEvenly: staticArrangement('space-evenly'),
+    /**
+     * Espaciado uniforme entre hijos con gap en px.
+     * @param gap        Espacio en píxeles entre elementos
+     * @param baseAlign  Alineación base del main-axis (por defecto flex-start)
+     *
+     * @example
+     * Arrangement.spacedBy(16)
+     * Arrangement.spacedBy(16, Arrangement.Center)
+     */
+    spacedBy: function (gap, baseAlign) {
+        if (baseAlign === void 0) { baseAlign = staticArrangement('flex-start'); }
+        return { type: 'spaced', gap: gap, justifyContent: baseAlign.justifyContent };
     },
 };

package/dist/components/layouts/Box.svelte

@@ -1,25 +1,54 @@
-<script lang="ts">
-    import { Modifier } from "../../core/modifier/Modifier";
-    import type {BoxAlignment} from "./Alignment";
-
-    export let modifier: Modifier = Modifier.empty();
-    export let contentAlignment: BoxAlignment | undefined = undefined;
-
-    $: contentStyle = contentAlignment ? alignmentToFlexStyle(contentAlignment) : "";
-
-    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";
-
-        return `display:flex; align-items:${v}; justify-content:${horiz};`;
-    }
-</script>
-
-<div
-        class="relative"
-        style={`${contentStyle} ${modifier.toStyle()}`}
->
-    <slot />
-</div>
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { Alignment } from "./Alignment";
+    import type { BoxAlignment } from "./Alignment";
+    import { resolveBoxPlaceItems } from "./resolveAlignment";
+
+    export let modifier: Modifier = Modifier.empty();
+
+    /**
+     * Alineación por defecto para TODOS los hijos del Box.
+     * Equivalente a contentAlignment en Jetpack Compose.
+     *
+     * Cada hijo puede sobreescribir con Modifier.align(Alignment.XXX).
+     *
+     * @default Alignment.TopStart
+     */
+    export let contentAlignment: BoxAlignment = Alignment.TopStart;
+
+    /**
+     * CSS Grid place-items resuelto desde el contentAlignment.
+     * Formato: "<vertical> <horizontal>"
+     */
+    $: placeItems = resolveBoxPlaceItems(contentAlignment);
+</script>
+
+<!--
+    Box — contenedor de apilamiento (stack), fiel a Jetpack Compose.
+
+    Implementación:
+    • display: grid con grid-template-areas: 'stack'
+    • El CSS interno fuerza a todos los hijos directos a usar grid-area: 'stack'
+    • Esto hace que todos los hijos se solapen en la misma celda.
+    • place-items controla la alineación por defecto de TODOS los hijos.
+    • Cada hijo puede sobreescribir con place-self via Modifier.align().
+-->
+<div
+    class="cs-box"
+    style={`
+        display: grid;
+        grid-template-areas: 'stack';
+        place-items: ${placeItems};
+        position: relative;
+        ${modifier.toStyle()}
+    `}
+>
+    <slot />
+</div>
+
+<style>
+    /* Fuerza a todos los hijos directos a apilarse en la misma área de grid */
+    .cs-box > :global(*) {
+        grid-area: stack;
+    }
+</style>

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

@@ -20,7 +20,14 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 } : {});
 declare const Box: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     modifier?: Modifier;
-    contentAlignment?: BoxAlignment | undefined;
+    /**
+         * Alineación por defecto para TODOS los hijos del Box.
+         * Equivalente a contentAlignment en Jetpack Compose.
+         *
+         * Cada hijo puede sobreescribir con Modifier.align(Alignment.XXX).
+         *
+         * @default Alignment.TopStart
+         */ contentAlignment?: BoxAlignment;
 }, {
     default: {};
 }>, {

package/dist/components/layouts/Column.svelte

@@ -1,23 +1,52 @@
-<script lang="ts">
-    import { Modifier } from "../../core/modifier/Modifier";
-    import { Alignment } from "./Alignment";
-    import { Arrangement } from "./Arrangement";
-    import type { ArrangementValue } from "./Arrangement";
-    import type { HorizontalAlignment } from "./Alignment";
-
-    export let modifier: Modifier = Modifier.empty();
-    export let horizontalAlignment: HorizontalAlignment = Alignment.Start;
-    export let verticalArrangement: ArrangementValue = Arrangement.Start;
-</script>
-
-<div
-        class="flex flex-col"
-        style={`
-            align-items: ${horizontalAlignment};
-            justify-content: ${verticalArrangement.justifyContent};
-            ${verticalArrangement.type === "spaced" ? `gap:${verticalArrangement.gap}px;` : ""}
-            ${modifier.toStyle()}
-        `}
->
-    <slot />
-</div>
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { Alignment } from "./Alignment";
+    import { Arrangement } from "./Arrangement";
+    import type { ArrangementValue } from "./Arrangement";
+    import type { HorizontalAlignment } from "./Alignment";
+
+    export let modifier: Modifier = Modifier.empty();
+
+    /**
+     * Alineación en el eje cross (horizontal) de todos los hijos.
+     * Equivalente a horizontalAlignment en Jetpack Compose Column.
+     * @default Alignment.Start
+     */
+    export let horizontalAlignment: HorizontalAlignment = Alignment.Start;
+
+    /**
+     * Disposición en el eje main (vertical).
+     * Equivalente a verticalArrangement en Jetpack Compose Column.
+     * @default Arrangement.Top
+     */
+    export let verticalArrangement: ArrangementValue = Arrangement.Top;
+
+    $: gapStyle = verticalArrangement.type === 'spaced'
+        ? `gap:${verticalArrangement.gap}px;`
+        : '';
+</script>
+
+<!--
+    Column — contenedor flex vertical.
+
+    • align-items controla la alineación horizontal de los hijos (cross-axis)
+    • justify-content controla la distribución vertical (main-axis)
+    • Los hijos pueden sobreescribir su alineación individual via
+      Modifier.align() que inyecta align-self en su propio estilo
+
+    No hay wrapper interno: cada hijo gestiona su propio layout.
+    El scroll no está habilitado por defecto — usar Modifier.verticalScroll()
+    o LazyColumn para contenido que desborda.
+-->
+<div
+        style={`
+    display: flex;
+    flex-direction: column;
+    align-items: ${horizontalAlignment.cssValue};
+    justify-content: ${verticalArrangement.justifyContent};
+    ${gapStyle}
+    ${modifier.toStyle()}
+  `}
+>
+    <slot />
+</div>

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

@@ -21,8 +21,16 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 } : {});
 declare const Column: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     modifier?: Modifier;
-    horizontalAlignment?: HorizontalAlignment;
-    verticalArrangement?: ArrangementValue;
+    /**
+         * Alineación en el eje cross (horizontal) de todos los hijos.
+         * Equivalente a horizontalAlignment en Jetpack Compose Column.
+         * @default Alignment.Start
+         */ horizontalAlignment?: HorizontalAlignment;
+    /**
+         * Disposición en el eje main (vertical).
+         * Equivalente a verticalArrangement en Jetpack Compose Column.
+         * @default Arrangement.Top
+         */ verticalArrangement?: ArrangementValue;
 }, {
     default: {};
 }>, {

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;