@danielito1996/compose-svelted 0.2.6 → 0.2.7-alpha02

package/README.md

@@ -1,113 +1,193 @@
-# compose-svelted
-
-<p align="center">
-  <img src="docs/assets/svelted.png" width="960" alt="compose-svelted" />
-</p>
-
-<p align="center">
-  <b>Compose-inspired UI framework for Svelte</b><br/>
-  Declarative layout · Immutable modifiers · Structural motion · Compose-like navigation
-</p>
-
-<p align="center">
-  <img src="https://img.shields.io/badge/status-alpha-orange" />
-  <img src="https://img.shields.io/badge/Svelte-FF3E00?logo=svelte&logoColor=white" />
-  <img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white" />
-</p>
-
----
-
-## ✨ What is compose-svelted?
-
-**compose-svelted** is an experimental but ambitious UI framework that brings the
-**Jetpack Compose mental model** to the Svelte ecosystem.
-
-It is **not** a Material Design clone, and it is **not** a thin component library.
-
-Instead, it focuses on:
-- explicit UI composition
-- predictable layout
-- declarative motion
-- navigation as state
-
-All built on top of **Svelte**, without virtual DOM abstractions or hidden magic.
-
----
-
-## 🧠 Core Philosophy
-
-> UI is a function of state.  
-> Layout, motion, and navigation must be explicit and predictable.
-
-Key ideas:
-- No implicit behavior
-- No global side effects
-- No magic context you cannot reason about
-- Everything composes
-
----
-
-## 🧱 Library Structure (High-Level)
-
-### Core V1 – Layout & Styling
-- Column, Row, Box
-- Modifier (immutable, chainable)
-- Shapes
-- Theme system
-- Typography
-
-### Core V2 – Motion & Navigation (CLOSED)
-- AnimatedVisibility
-- AnimatedContent
-- Declarative motion
-- NavController
-- NavHost
-- Internal backstack
-
----
-
-## 💪 Strengths
-
-### Explicit Layout
-Layouts are predictable and composable.
-
-### Immutable Modifiers
-Describe intent, not CSS.
-
-### Structural Motion
-Motion is part of the UI structure.
-
-### Compose-like Navigation
-Navigation without external routers.
-
----
-
-## 🚀 Innovation
-
-- Compose mental model on the web
-- Navigation as state
-- Motion as structure
-- No virtual DOM abstraction
-
----
-
-## 📦 Status
-
-- Alpha
-- Core V2 closed
-- Core V3 planned
-
----
-
-## 🔮 Roadmap
-
-### Core V3
-- Nested navigation
-- Directional transitions
-- Shared elements
-
----
-
-## 📄 License
-
-MIT
+# compose-svelted
+
+<p align="center">
+  <img src="docs/assets/svelted.png" width="960" alt="compose-svelted" />
+</p>
+
+<p align="center">
+  <b>Compose-inspired UI framework for Svelte</b><br/>
+  Declarative layout · Immutable modifiers · Structural motion · Compose-like navigation
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/status-alpha-orange" />
+  <img src="https://img.shields.io/badge/Svelte-FF3E00?logo=svelte&logoColor=white" />
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white" />
+</p>
+
+---
+
+## ✨ What is compose-svelted?
+
+**compose-svelted** is an experimental but ambitious UI framework that brings the
+**Jetpack Compose mental model** to the Svelte ecosystem.
+
+It is **not** a Material Design clone, and it is **not** a thin component library.
+
+Instead, it focuses on:
+- explicit UI composition
+- predictable layout
+- declarative motion
+- navigation as state
+
+All built on top of **Svelte**, without virtual DOM abstractions or hidden magic.
+
+---
+
+## 🧠 Core Philosophy
+
+> UI is a function of state.  
+> Layout, motion, and navigation must be explicit and predictable.
+
+Key ideas:
+- No implicit behavior
+- No global side effects
+- No magic context you cannot reason about
+- Everything composes
+
+---
+
+## 🧱 Library Structure (High-Level)
+
+### Core V1 – Layout & Styling
+- Column, Row, Box
+- Modifier (immutable, chainable)
+- Shapes
+- Theme system
+- Typography
+
+### Core V2 – Motion & Navigation (CLOSED)
+- AnimatedVisibility
+- AnimatedContent
+- Declarative motion
+- NavController
+- NavHost
+- Internal backstack
+
+---
+
+## 💪 Strengths
+
+### Explicit Layout
+Layouts are predictable and composable.
+
+### Immutable Modifiers
+Describe intent, not CSS.
+
+### Structural Motion
+Motion is part of the UI structure.
+
+### Compose-like Navigation
+Navigation without external routers.
+
+---
+
+## 🚀 Innovation
+
+- Compose mental model on the web
+- Navigation as state
+- Motion as structure
+- No virtual DOM abstraction
+
+---
+
+## 📦 Status
+
+- Alpha
+- Core V2 closed
+- Core V3 planned
+
+---
+
+## 🔮 Roadmap
+
+### Core V3
+- Nested navigation
+- Directional transitions
+- Shared elements
+
+---
+
+## ⚠️ CSS Baseline (Required)
+
+Compose Svelted assumes a neutral CSS baseline.
+
+You MUST include the following reset in your app:
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+}
+```
+
+## 📄 License
+
+MIT
+
+---
+
+## ⚠️ CSS Baseline Requirement (Important)
+
+Compose Svelted is **layout-deterministic**.
+
+To guarantee consistent and predictable behavior of layout components such as
+`Box`, `Column`, `Row`, `Surface`, `Scaffold`, and navigation containers,
+a **neutral CSS baseline is required** in the host application.
+
+This is **intentional** and mirrors the contract-based approach of **Jetpack Compose**.
+
+### Required baseline
+
+You must include the following reset in your global styles:
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+}
+```
+
+### Why this matters
+
+Compose Svelted does **not**:
+- force global CSS
+- inject layout styles silently
+- assume browser defaults
+
+Instead, it expects a minimal, explicit layout contract.
+Without this baseline, layout behavior may vary between browsers or projects.
+
+### Tailwind CSS
+
+Compose Svelted **does not require Tailwind CSS**.
+
+Tailwind is used internally as an implementation detail for predictable styling,
+but consumers of the library are **not required** to install or configure Tailwind.
+
+### Future (Core V3)
+
+A reusable `baseline.css` helper will be provided as an **optional import**
+to simplify adoption:
+
+```ts
+import "@danielito1996/compose-svelted/baseline.css";
+```
+
+This will remain optional and opt-in.

package/dist/components/AppRoot.svelte

@@ -5,11 +5,8 @@
 </script>
 
 <div
-        style={`
-    width:100vw;
-    height:100vh;
-    ${modifier.toStyle()}
-  `}
+        class="compose-relative"
+        style={`width:100vw;height:100vh;${modifier.toStyle()}`}
 >
     <slot />
 </div>

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/dist/index.js

@@ -0,0 +1,51 @@
+// Root
+export { default as ComposeTheme } from "./core/theme/ComposeTheme.svelte";
+export { default as AppRoot } from "./components/AppRoot.svelte";
+// Layouts
+export { default as Column } from "./components/layouts/Column.svelte";
+export { default as Row } from "./components/layouts/Row.svelte";
+export { default as Box } from "./components/layouts/Box.svelte";
+export { default as Spacer } from "./components/Spacer.svelte";
+export { default as LazyColumn } from "./components/layouts/LazyColumn.svelte";
+export { default as LazyRow } from "./components/layouts/LazyRow.svelte";
+export { default as Scaffold } from "./components/layouts/Scaffold.svelte";
+// UI
+export { default as Surface } from "./components/Surface.svelte";
+export { default as Text } from "./components/Text.svelte";
+export { default as Button } from "./components/buttons/Button.svelte";
+export { default as TextButton } from "./components/buttons/TextButton.svelte";
+export { default as TonalButton } from "./components/TonalButton.svelte";
+export { default as IconButton } from "./components/buttons/IconButton.svelte";
+export { default as ButtonWithIcon } from "./components/buttons/ButtonWithIcon.svelte";
+export { default as OutlinedButton } from "./components/buttons/OutlinedButton.svelte";
+export { default as OutlinedButtonWithIcon } from "./components/buttons/OutlinedButtonWithIcon.svelte";
+export { default as CheckButton } from "./components/buttons/CheckButton.svelte";
+export { default as Card } from "./components/cards/Card.svelte";
+export { default as OutlinedCard } from "./components/cards/OutlinedCard.svelte";
+export { default as TextField } from "./components/textFields/TextField.svelte";
+export { default as OutlinedTextField } from "./components/textFields/OutlinedTextField.svelte";
+export { default as Image } from "./components/Image.svelte";
+export { default as Icon } from "./components/Icon.svelte";
+// Motion
+export { default as AnimatedVisibility } from "./components/motion/AnimatedVisibility.svelte";
+export { default as AnimatedContent } from "./components/motion/AnimatedContent.svelte";
+// Navigation
+export { default as NavHost } from "./core/navigation/NavHost.svelte";
+// Custom
+export { default as CodeBlock } from "./components/custom/CodeBlock.svelte";
+// TS-only exports
+export * from "./core/modifier/Modifier";
+export * from "./components/layouts/Alignment";
+export * from "./components/layouts/Arrangement";
+export * from "./components/ContentScale";
+export * from "./core/theme/ColorScheme";
+export * from "./core/theme/TextStyle";
+export * from "./core/theme/Density";
+export * from "./core/motion/AnimationSpec";
+export * from "./core/motion/transitions";
+export * from "./core/motion/contentTransitions";
+export * from "./core/helpers/painterResource";
+export * from "./core/navigation/Route";
+export * from "./core/navigation/NavController";
+export * from "./core/navigation/rememberNavController";
+export * from "./core/navigation/composable";

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@danielito1996/compose-svelted",
-  "version": "0.2.6",
+  "version": "0.2.7-alpha02",
   "description": "Compose-like UI toolkit for Svelte, inspired by Jetpack Compose",
   "license": "MIT",
   "type": "module",
-
   "author": "Daniel Imbert Tabares",
   "repository": {
     "type": "git",
@@ -18,21 +17,18 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "svelte": "./dist/index.js",
-      "default": "./dist/index.js"
+      "svelte": "./dist/index.js"
     }
   },
-  "svelte": "./dist/index.js",
   "files": [
     "dist"
   ],
-  "sideEffects": [
-    "**/*.css"
-  ],
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
-
+  "sideEffects": [
+    "**/*.css"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",