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

package/README.md

@@ -97,6 +97,27 @@ Navigation without external routers.
 - Core V2 closed
 - Core V3 planned
 
+## Project Zones
+
+- `src/lib`: publishable library source.
+- `playground`: local app for developing and validating the library against live source changes.
+- `src/App.svelte` and `src/samples`: legacy examples, not part of the active library/playground workflow.
+
+## Development Commands
+
+```bash
+npm install
+npm run dev
+npm run build
+npm run check
+npm run playground:build
+```
+
+- `npm run dev`: starts the playground.
+- `npm run build`: packages the library into `dist/`.
+- `npm run check`: type-checks the playground against the current library source.
+- `playground/vite.config.ts` aliases `@danielito1996/compose-svelted` to `src/lib/index.ts`, so playground changes reflect library source immediately.
+
 ---
 
 ## 🔮 Roadmap
@@ -110,44 +131,31 @@ Navigation without external routers.
 
 ## ⚠️ CSS Baseline (Required)
 
-Compose Svelted assumes a neutral CSS baseline.
+Compose Svelted is **layout-deterministic**, 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
+To avoid layout regressions in existing apps, use one of these two paths:
 
-MIT
+### Path A (Primary): import baseline from the package
 
----
+- **Strict baseline** (Compose-like deterministic behavior):
 
-## ⚠️ CSS Baseline Requirement (Important)
+```ts
+import "@danielito1996/compose-svelted/baseline.css";
+```
 
-Compose Svelted is **layout-deterministic**.
+- **Safe baseline** (less intrusive for existing projects):
 
-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.
+```ts
+import "@danielito1996/compose-svelted/baseline-safe.css";
+```
 
-This is **intentional** and mirrors the contract-based approach of **Jetpack Compose**.
+Use `baseline-safe.css` if your app already has strong global styles and you want minimal interference.
 
-### Required baseline
+### Path B (Alternative): do not import baseline, adapt your own `app.css`
 
-You must include the following reset in your global styles:
+If you prefer full control, keep your app stylesheet and ensure at least:
 
 ```css
 *,
@@ -156,14 +164,20 @@ You must include the following reset in your global styles:
   box-sizing: border-box;
 }
 
-html,
-body {
+html, body, #app {
+  width: 100%;
+  height: 100%;
   margin: 0;
   padding: 0;
-  min-height: 100vh;
 }
 ```
 
+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**.
+
 ### Why this matters
 
 Compose Svelted does **not**:
@@ -180,14 +194,3 @@ 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

@@ -1,12 +1,27 @@
-<script lang="ts">
-    import { Modifier } from "../core/modifier/Modifier";
-
-    export let modifier: Modifier = Modifier.empty();
-</script>
-
-<div
-        class="compose-relative"
-        style={`width:100vw;height:100vh;${modifier.toStyle()}`}
->
-    <slot />
+<script lang="ts">
+    import { Modifier } from "../core/modifier/Modifier";
+
+    export let modifier: Modifier = Modifier.empty();
+</script>
+
+<!--
+    AppRoot — ancla de toda la aplicación.
+
+    Ocupa el 100% del contenedor padre (que gracias a baseline.css es el viewport).
+    overflow:hidden garantiza que ningún hijo desborde el viewport accidentalmente.
+    position:relative es el contexto de posicionamiento para capas absolutas internas.
+    Se añade display:flex para actuar como raíz sólida para el crecimiento de hijos.
+-->
+<div
+        class="cs-relative"
+        style={`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    ${modifier.toStyle()}
+  `}
+>
+    <slot />
 </div>

package/dist/components/Surface.svelte

@@ -1,19 +1,29 @@
-<script lang="ts">
-    import { Modifier } from "../core/modifier/Modifier";
-    import { resolveColor } from "../core/theme/resolve";
-    import type { ColorToken } from "../core/theme/ColorScheme";
-
-    // ✅ default = no-op modifier
-    export let modifier: Modifier = Modifier.empty();
-    export let color: ColorToken = "surface";
-</script>
-
-<div
-        class="block"
-        style={`
-    background:${resolveColor(color)};
-    ${modifier.toStyle()}
-  `}
->
-    <slot />
-</div>
+<script lang="ts">
+    import { Modifier } from "../core/modifier/Modifier";
+    import { resolveColor } from "../core/theme/resolve";
+    import type { ColorToken } from "../core/theme/ColorScheme";
+
+    export let modifier: Modifier = Modifier.empty();
+    export let color: ColorToken = "surface";
+</script>
+
+<!--
+    Surface — Contenedor base de Material 3.
+    Sin dependencias de Tailwind.
+-->
+<div
+        class="cs-surface"
+        style={`
+    background:${resolveColor(color)};
+    ${modifier.toStyle()}
+  `}
+>
+    <slot />
+</div>
+
+<style>
+    .cs-surface {
+        display: block;
+        box-sizing: border-box;
+    }
+</style>

package/dist/components/Text.svelte

@@ -1,23 +1,37 @@
-<script lang="ts">
-    import { Modifier } from "../core/modifier/Modifier";
-    import { resolveTextStyle, resolveColor } from "../core/theme/resolve";
-    import type { TextStyleToken } from "../core/theme/TextStyle";
-    import { ColorScheme, type ColorToken } from "../core/theme/ColorScheme";
-
-    export let modifier: Modifier = Modifier.empty();
-    export let textStyle: TextStyleToken = "bodyMedium";
-
-    // Aceptamos token o string directo
-    export let color: ColorToken | string = "onSurface";  // string literal por defecto
-
-    // Usamos la misma lógica que Surface (que ya funciona)
-    $: resolvedColor = typeof color === "string" ? resolveColor(color as ColorToken) : color;
-</script>
-
-<p class="block m-0" style={`
-  ${resolveTextStyle(textStyle)};
-  color: ${resolvedColor};
-  ${modifier.toStyle()}
-`}>
-    <slot />
-</p>
+<script lang="ts">
+    import { Modifier } from "../core/modifier/Modifier";
+    import { resolveTextStyle, resolveColor } from "../core/theme/resolve";
+    import type { TextStyleToken } from "../core/theme/TextStyle";
+    import { ColorScheme, type ColorToken } from "../core/theme/ColorScheme";
+
+    export let modifier: Modifier = Modifier.empty();
+    export let textStyle: TextStyleToken = "bodyMedium";
+
+    // Aceptamos token o string directo
+    export let color: ColorToken | string = "onSurface";
+
+    $: resolvedColor = typeof color === "string" ? resolveColor(color as ColorToken) : color;
+</script>
+
+<!--
+    Text — Componente Material 3 independiente.
+    No depende de Tailwind.
+-->
+<p
+    class="cs-text"
+    style={`
+        ${resolveTextStyle(textStyle)};
+        color: ${resolvedColor};
+        ${modifier.toStyle()}
+    `}
+>
+    <slot />
+</p>
+
+<style>
+    .cs-text {
+        display: block;
+        margin: 0;
+        padding: 0;
+    }
+</style>

package/dist/components/buttons/Button.svelte

@@ -1,34 +1,66 @@
-<script lang="ts">
-    import { Modifier } from "../../core/modifier/Modifier";
-    import { resolveColor } from "../../core/theme/resolve";
-    import { ColorScheme, type ColorToken } from "../../core/theme/ColorScheme";
-
-    export let onClick: () => void = () => {};
-    export let modifier: Modifier = Modifier.empty();
-
-    export let color: ColorToken | string = "primary";
-    export let onColor: ColorToken | string = "onPrimary";
-
-    export let shape: "none" | "extraSmall" | "small" | "medium" | "large" = "large";
-    export let elevation: "level0" | "level1" | "level2" | "level3" | "level4" = "level1";
-
-    $: backgroundColor = typeof color === "string" ? resolveColor(color as ColorToken) : color;
-    $: contentColor = typeof onColor === "string" ? resolveColor(onColor as ColorToken) : onColor;
-    $: borderRadius = `var(--md-sys-shape-${shape})`;
-    $: boxShadow = `var(--md-sys-elevation-${elevation})`;
-</script>
-
-<button
-        on:click={onClick}
-        class="border-0 cursor-pointer inline-flex items-center justify-center gap-8 font-medium tracking-wider transition-all hover:opacity-90 active:scale-95"
-        style={`
-    background: ${backgroundColor};
-    color: ${contentColor};
-    border-radius: ${borderRadius};
-    box-shadow: ${boxShadow};
-    padding: 10px 24px;  <!-- Padding moderado: vertical 10px, horizontal 24px (como Compose) -->
-    ${modifier.toStyle()}
-  `}
->
-    <slot />
-</button>
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { resolveColor } from "../../core/theme/resolve";
+    import { ColorScheme, type ColorToken } from "../../core/theme/ColorScheme";
+
+    export let onClick: () => void = () => {};
+    export let modifier: Modifier = Modifier.empty();
+
+    export let color: ColorToken | string = "primary";
+    export let onColor: ColorToken | string = "onPrimary";
+
+    export let shape: "none" | "extraSmall" | "small" | "medium" | "large" = "large";
+    export let elevation: "level0" | "level1" | "level2" | "level3" | "level4" = "level1";
+
+    $: backgroundColor = typeof color === "string" ? resolveColor(color as ColorToken) : color;
+    $: contentColor = typeof onColor === "string" ? resolveColor(onColor as ColorToken) : onColor;
+    $: borderRadius = `var(--md-sys-shape-${shape})`;
+    $: boxShadow = `var(--md-sys-elevation-${elevation})`;
+</script>
+
+<!--
+    Button — Componente Material 3 independiente.
+    No depende de Tailwind.
+-->
+<button
+        on:click={onClick}
+        class="cs-button"
+        style={`
+    background: ${backgroundColor};
+    color: ${contentColor};
+    border-radius: ${borderRadius};
+    box-shadow: ${boxShadow};
+    ${modifier.toStyle()}
+  `}
+>
+    <slot />
+</button>
+
+<style>
+    .cs-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        cursor: pointer;
+        padding: 10px 24px;
+        gap: 8px;
+        font-family: inherit;
+        font-weight: 500;
+        letter-spacing: 0.1px;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+        outline: none;
+    }
+
+    .cs-button:hover {
+        opacity: 0.92;
+        box-shadow: var(--md-sys-elevation-level2);
+    }
+
+    .cs-button:active {
+        transform: scale(0.97);
+        opacity: 0.85;
+    }
+</style>

package/dist/components/buttons/CheckButton.svelte

@@ -3,7 +3,7 @@
     import { ColorScheme } from "../../core/theme/ColorScheme";
     import { resolveColor } from "../../core/theme/resolve";
     import { RoundedCornerShape } from "../../core/shapes/RoundedCornerShape";
-    import AnimatedVisibility from "../motion/AnimatedVisibility.svelte";
+    import AnimatedVisibility from "../motion/motion/AnimatedVisibility.svelte";
     import { scaleIn, scaleOut } from "../../core/motion/transitions";
     import type { Shape } from "../../core/shapes/Shape";
 
@@ -74,4 +74,4 @@
 
     <!-- Content -->
     <slot />
-</button>
+</button>

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

@@ -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)
+ */
+export type HorizontalAlignment = {
+    readonly _brand: 'HorizontalAlignment';
+    readonly cssValue: string;
+};
+export type VerticalAlignment = {
+    readonly _brand: 'VerticalAlignment';
+    readonly cssValue: string;
+};
+/** Alineación compuesta para Box — encapsula horizontal + vertical */
+export type BoxAlignment = {
+    readonly _brand: 'BoxAlignment';
+    readonly horizontal: string;
+    readonly vertical: string;
+};
 export declare const Alignment: {
-    readonly Start: "flex-start";
-    readonly CenterHorizontally: "center";
-    readonly End: "flex-end";
-    readonly Top: "flex-start";
-    readonly CenterVertically: "center";
-    readonly Bottom: "flex-end";
-    readonly TopStart: "flex-start flex-start";
-    readonly TopCenter: "center flex-start";
-    readonly TopEnd: "flex-end flex-start";
-    readonly CenterStart: "flex-start center";
-    readonly Center: "center center";
-    readonly CenterEnd: "flex-end center";
-    readonly BottomStart: "flex-start flex-end";
-    readonly BottomCenter: "center flex-end";
-    readonly BottomEnd: "flex-end flex-end";
+    readonly Start: HorizontalAlignment;
+    readonly CenterHorizontally: HorizontalAlignment;
+    readonly End: HorizontalAlignment;
+    readonly Top: VerticalAlignment;
+    readonly CenterVertically: VerticalAlignment;
+    readonly Bottom: VerticalAlignment;
+    readonly TopStart: BoxAlignment;
+    readonly TopCenter: BoxAlignment;
+    readonly TopEnd: BoxAlignment;
+    readonly CenterStart: BoxAlignment;
+    readonly Center: BoxAlignment;
+    readonly CenterEnd: BoxAlignment;
+    readonly BottomStart: BoxAlignment;
+    readonly BottomCenter: BoxAlignment;
+    readonly BottomEnd: BoxAlignment;
 };
-export type HorizontalAlignment = typeof Alignment.Start | typeof Alignment.CenterHorizontally | typeof Alignment.End;
-export type VerticalAlignment = typeof Alignment.Top | typeof Alignment.CenterVertically | typeof Alignment.Bottom;
-export type BoxAlignment = typeof Alignment[keyof typeof Alignment];

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 };
     },
 };