@danielito1996/compose-svelted 0.2.7-alpha04 → 0.2.8-alpha01

package/dist/components/layouts/Box.svelte

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

@@ -13,11 +13,27 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Box: $$__sveltets_2_IsomorphicComponent<{
+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<{
     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: {};
+}>, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {
+    default: {};
+}, {}, string>;
 type Box = InstanceType<typeof Box>;
 export default Box;

package/dist/components/layouts/Column.svelte

@@ -1,46 +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";
-    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="compose-column"
-        style={`
-    display: flex;
-    flex-direction: column;
-    align-items: ${horizontalAlignment};
-    justify-content: ${verticalArrangement.justifyContent};
-    ${gapStyle}
-    ${modifier.toStyle()}
-  `}
->
-    <slot let:modifier>
-        <div
-                style={`
-      ${modifier?.getMeta().align
-        ? resolveFlexAlignSelf(modifier.getMeta().align)
-        : ""}
-      ${modifier?.toStyle()}
-    `}
-        >
-            <slot />
-        </div>
-    </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/Row.svelte

@@ -1,46 +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 { VerticalAlignment } from "./Alignment";
-    import {resolveFlexAlignSelf} from "./resolveFlexAlignSelf";
-
-    export let modifier: Modifier = Modifier.empty();
-
-    // 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="compose-row"
-        style={`
-    display: flex;
-    flex-direction: row;
-    align-items: ${verticalAlignment};
-    justify-content: ${horizontalArrangement.justifyContent};
-    ${gapStyle}
-    ${modifier.toStyle()}
-  `}
->
-    <slot let:modifier>
-        <div
-                style={`
-      ${modifier?.getMeta().align
-        ? resolveFlexAlignSelf(modifier.getMeta().align)
-        : ""}
-      ${modifier?.toStyle()}
-    `}
-        >
-            <slot />
-        </div>
-    </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 { VerticalAlignment } from "./Alignment";
+
+    export let modifier: Modifier = Modifier.empty();
+
+    /**
+     * Alineación en el eje cross (vertical) de todos los hijos.
+     * Equivalente a verticalAlignment en Jetpack Compose Row.
+     * @default Alignment.Top
+     */
+    export let verticalAlignment: VerticalAlignment = Alignment.Top;
+
+    /**
+     * Disposición en el eje main (horizontal).
+     * Equivalente a horizontalArrangement en Jetpack Compose Row.
+     * @default Arrangement.Start
+     */
+    export let horizontalArrangement: ArrangementValue = Arrangement.Start;
+
+    $: gapStyle = horizontalArrangement.type === 'spaced'
+        ? `gap:${horizontalArrangement.gap}px;`
+        : '';
+</script>
+
+<!--
+    Row — contenedor flex horizontal.
+
+    • align-items controla la alineación vertical de los hijos (cross-axis)
+    • justify-content controla la distribución horizontal (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.horizontalScroll()
+    o LazyRow para contenido que desborda.
+-->
+<div
+        style={`
+    display: flex;
+    flex-direction: row;
+    align-items: ${verticalAlignment.cssValue};
+    justify-content: ${horizontalArrangement.justifyContent};
+    ${gapStyle}
+    ${modifier.toStyle()}
+  `}
+>
+    <slot />
+</div>

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

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

package/dist/components/layouts/Scaffold.svelte

@@ -1,53 +1,86 @@
-<script lang="ts">
-    import { Modifier } from "../../core/modifier/Modifier";
-    import { resolveBoxAlignment } from "./resolveAlignment";
-    import {Alignment, BoxAlignment} from "./Alignment";
-
-    export let modifier: Modifier = Modifier.empty();
-    export let contentPadding = 16;
-    export let fabAlignment: BoxAlignment = Alignment.BottomEnd;
-</script>
-
-<div
-        class="compose-relative"
-        style={`
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    ${modifier.toStyle()}
-  `}
->
-    <!-- Top bar -->
-    <slot name="topBar" />
-
-    <!-- Content -->
-    <div
-            class="compose-scaffold-content"
-            style={`padding:${contentPadding}px;`}
-    >
-        <slot />
-    </div>
-
-    <!-- Bottom bar -->
-    <slot name="bottomBar" />
-
-    <!-- FAB overlay -->
-    <div
-            style={`
-      position:absolute;
-      inset:0;
-      pointer-events:none;
-    `}
-    >
-        <div
-                style={`
-        ${resolveBoxAlignment(fabAlignment)}
-        pointer-events:auto;
-        margin:16px;
-      `}
-        >
-            <slot name="floatingActionButton" />
-        </div>
-    </div>
-</div>
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { resolveBoxPlaceSelf } from "./resolveAlignment";
+    import { Alignment } from "./Alignment";
+    import type { BoxAlignment } from "./Alignment";
+
+    export let modifier: Modifier = Modifier.empty();
+    export let contentPadding = 16;
+
+    /**
+     * Posición del FloatingActionButton dentro del Scaffold.
+     * @default Alignment.BottomEnd
+     */
+    export let fabAlignment: BoxAlignment = Alignment.BottomEnd;
+
+    $: fabPlaceSelf = resolveBoxPlaceSelf(fabAlignment);
+</script>
+
+<!--
+    Scaffold — estructura base de pantalla.
+
+    Slots:
+      topBar              → barra superior (TopAppBar)
+      default             → contenido principal (ahora es un flex container para permitir fillMaxSize)
+      bottomBar           → barra inferior (NavigationBar)
+      floatingActionButton → FAB posicionado por fabAlignment
+-->
+<div
+        class="cs-relative"
+        style={`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    ${modifier.toStyle()}
+  `}
+>
+    <!-- Top bar -->
+    <slot name="topBar" />
+
+    <!-- Content — ocupa el espacio restante -->
+    <!--
+        Se añade display: flex para que los hijos que usen fillMaxSize()
+        puedan expandirse correctamente basándose en el tamaño de este contenedor.
+    -->
+    <div
+            style={`
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      padding: ${contentPadding}px;
+      overflow: hidden;
+    `}
+    >
+        <slot />
+    </div>
+
+    <!-- Bottom bar -->
+    <slot name="bottomBar" />
+
+    <!-- FAB overlay -->
+    <div
+            style="
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: grid;
+      grid-template-areas: 'fab';
+    "
+    >
+        <div
+                style={`
+        grid-area: fab;
+        ${fabPlaceSelf}
+        pointer-events: auto;
+        margin: 16px;
+        width: fit-content;
+        height: fit-content;
+      `}
+        >
+            <slot name="floatingActionButton" />
+        </div>
+    </div>
+</div>

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

@@ -1,5 +1,5 @@
 import { Modifier } from "../../core/modifier/Modifier";
-import { BoxAlignment } from "./Alignment";
+import type { 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;
@@ -21,7 +21,10 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 declare const Scaffold: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     modifier?: Modifier;
     contentPadding?: number;
-    fabAlignment?: BoxAlignment;
+    /**
+         * Posición del FloatingActionButton dentro del Scaffold.
+         * @default Alignment.BottomEnd
+         */ fabAlignment?: BoxAlignment;
 }, {
     topBar: {};
     default: {};

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

@@ -1,4 +1,25 @@
-import { ModifierImpl } from "../../core/modifier/ModifierImpl";
-import { BoxAlignment } from "./Alignment";
-export declare function resolveBoxAlignment(alignment?: BoxAlignment): string;
-export declare function resolveFlexAlignment(mod: ModifierImpl): string;
+/**
+ * resolveAlignment.ts
+ *
+ * Funciones puras que traducen los tokens de Alignment a CSS inline.
+ * Trabajan con el nuevo shape de BoxAlignment (objeto con .horizontal / .vertical).
+ */
+import type { BoxAlignment, HorizontalAlignment, VerticalAlignment } from './Alignment';
+/**
+ * Resuelve el `place-items` de un Box stack container.
+ * CSS Grid: "align-items justify-items"
+ */
+export declare function resolveBoxPlaceItems(alignment: BoxAlignment): string;
+/**
+ * Resuelve el `place-self` de un hijo de Box que sobreescribe su alineación.
+ * Usado por Modifier.align() dentro de un Box.
+ */
+export declare function resolveBoxPlaceSelf(alignment: BoxAlignment): string;
+/**
+ * Resuelve `align-self` para un hijo de Column (eje horizontal).
+ */
+export declare function resolveColumnAlignSelf(alignment: HorizontalAlignment): string;
+/**
+ * Resuelve `align-self` para un hijo de Row (eje vertical).
+ */
+export declare function resolveRowAlignSelf(alignment: VerticalAlignment): string;