@danielito1996/compose-svelted 0.2.7 → 0.2.8-alpha01

package/README.md

@@ -1,113 +1,196 @@
-# 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
+
+## 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
+
+### Core V3
+- Nested navigation
+- Directional transitions
+- Shared elements
+
+---
+
+## ⚠️ CSS Baseline (Required)
+
+Compose Svelted is **layout-deterministic**, assumes a neutral CSS baseline.
+
+You MUST include the following reset in your app:
+
+To avoid layout regressions in existing apps, use one of these two paths:
+
+### Path A (Primary): import baseline from the package
+
+- **Strict baseline** (Compose-like deterministic behavior):
+
+```ts
+import "@danielito1996/compose-svelted/baseline.css";
+```
+
+- **Safe baseline** (less intrusive for existing projects):
+
+```ts
+import "@danielito1996/compose-svelted/baseline-safe.css";
+```
+
+Use `baseline-safe.css` if your app already has strong global styles and you want minimal interference.
+
+### Path B (Alternative): do not import baseline, adapt your own `app.css`
+
+If you prefer full control, keep your app stylesheet and ensure at least:
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+```
+
+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**:
+- 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.

package/dist/components/AppRoot.svelte

@@ -1,15 +1,27 @@
-<script lang="ts">
-    import { Modifier } from "../core/modifier/Modifier";
-
-    export let modifier: Modifier = Modifier.empty();
-</script>
-
-<div
-        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];