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

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/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/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-alpha02",
+  "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"