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

package/dist/core/navigation/NavHost.svelte

@@ -1,45 +1,46 @@
-<script lang="ts">
-    import { Modifier } from "../modifier/Modifier";
-    import type { NavController } from "./NavController";
-    import AnimatedContent from "../../components/motion/AnimatedContent.svelte";
-    import type { ContentTransition } from "../motion/ContentTransition";
-    import { fade } from "../motion/contentTransitions";
-
-    export let navController: NavController;
-
-    export let routes: {
-        route: { path: string };
-        component: any;
-    }[];
-
-    // 🔹 Transición única, Compose-like
-    export let transition: ContentTransition = fade(320);
-
-    export let modifier: Modifier = Modifier.empty();
-
-    // 🔹 Store interno (estable)
-    const stackStore = navController._getStackStore();
-
-    $: stack = $stackStore;
-    $: currentEntry = stack.at(-1);
-
-    $: active =
-        routes.find(r => r.route.path === currentEntry?.route);
-</script>
-
-<div style={modifier.toStyle()}>
-    <AnimatedContent
-            targetState={currentEntry?.route}
-            transition={transition}
-            modifier={Modifier.fillMaxSize()}
-            let:value
-    >
-        {#if active}
-            <svelte:component
-                    this={active.component}
-                    navController={navController}
-                    navBackStackEntry={currentEntry}
-            />
-        {/if}
-    </AnimatedContent>
-</div>
+<script lang="ts">
+    import { Modifier } from "../modifier/Modifier";
+    import type { NavController } from "./NavController";
+    import AnimatedContent from "../../components/motion/motion/AnimatedContent.svelte";
+    import type { ContentTransition } from "../motion/ContentTransition";
+    import { fade } from "../motion/contentTransitions";
+
+    export let navController: NavController;
+
+    export let routes: {
+        route: { path: string };
+        component: any;
+    }[];
+
+    // Transición única, Compose-like
+    export let transition: ContentTransition = fade(320);
+
+    export let modifier: Modifier = Modifier.empty();
+
+    const stackStore = navController._getStackStore();
+
+    $: stack = $stackStore;
+    $: currentEntry = stack.at(-1);
+
+    $: active =
+        routes.find(r => r.route.path === currentEntry?.route);
+</script>
+
+<!--
+    NavHost ocupa todo el espacio disponible del padre.
+    Cada screen registrada recibe navController y navBackStackEntry como props.
+-->
+<div style={`width:100%;height:100%;position:relative;${modifier.toStyle()}`}>
+    <AnimatedContent
+            targetState={currentEntry?.route}
+            transition={transition}
+    >
+        {#if active}
+            <svelte:component
+                    this={active.component}
+                    navController={navController}
+                    navBackStackEntry={currentEntry}
+            />
+        {/if}
+    </AnimatedContent>
+</div>

package/dist/core/styles/baseline-safe.css

@@ -0,0 +1,34 @@
+/**
+ * compose-svelted — baseline-safe.css
+ *
+ * Variante conservadora para apps existentes:
+ * - Mantiene contrato mínimo de layout (box-sizing + root 100%)
+ * - No fuerza overflow global
+ * - No normaliza media globalmente
+ * - No aplica min-width/min-height universal
+ */
+
+* ,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.cs-clickable {
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.cs-relative {
+    position: relative;
+}

package/dist/core/styles/baseline.css

@@ -1,49 +1,45 @@
-/* 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;
+/**
+ * compose-svelted — baseline.css
+ *
+ * Este CSS establece la base mínima necesaria para que los layouts de
+ * compose-svelted funcionen con la filosofía de Jetpack Compose:
+ *
+ *  • El viewport es la unidad raíz — html/body/app ocupan exactamente 100%.
+ *  • NO hay scroll por defecto — el overflow está bloqueado en el root.
+ *    El scroll solo ocurre cuando el layout o Modifier lo habilitan
+ *    explícitamente (verticalScroll, LazyColumn, LazyRow).
+ *  • Los layouts controlan tamaños y alineaciones — el CSS global no impone
+ *    ninguna opinión sobre disposición de hijos.
+ *  • box-sizing: border-box universal — padding no suma al ancho declarado.
+ *  • min-width/min-height: 0 universal — los hijos flex/grid no desbordan
+ *    si su contenido es mayor que el espacio asignado.
+ */
+
+/* ── 1. Box model consistente ──────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* 2) Root sizing + bloqueo de overflow global */
+html,
+body,
+#app {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+/* 3) Utilidades internas usadas por la librería */
+.cs-clickable {
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.cs-relative {
+    position: relative;
 }

package/dist/core/theme/ColorScheme.d.ts

@@ -11,6 +11,8 @@ export declare const ColorScheme: {
     readonly OnSurface: "onSurface";
     readonly SurfaceVariant: "surfaceVariant";
     readonly OnSurfaceVariant: "onSurfaceVariant";
+    readonly Tertiary: "tertiary";
+    readonly OnTertiary: "onTertiary";
     readonly Outline: "outline";
     readonly Error: "error";
     readonly OnError: "onError";

package/dist/core/theme/ColorScheme.js

@@ -9,6 +9,8 @@ export var ColorScheme = {
     OnSurface: "onSurface",
     SurfaceVariant: "surfaceVariant",
     OnSurfaceVariant: "onSurfaceVariant",
+    Tertiary: "tertiary",
+    OnTertiary: "onTertiary",
     Outline: "outline",
     Error: "error",
     OnError: "onError",

package/dist/core/theme/ComposeTheme.svelte

@@ -1,22 +1,37 @@
-<script lang="ts">
-    import { themeState, resolvedTheme } from "./store";
-    import { themeToCssVars } from "./cssVars";
-    import { defaultLightTheme, defaultDarkTheme } from "./defaults/defaultTheme";
-    import type { ComposeTheme as Theme, ThemeMode } from "./theme";
-
-    export let light: Theme | undefined = undefined;
-    export let dark: Theme | undefined = undefined;
-    export let mode: ThemeMode = "system";
-
-    $: themeState.set({
-        light: light ?? defaultLightTheme,
-        dark: dark ?? defaultDarkTheme,
-        mode,
-    });
-
-    $: css = $resolvedTheme ? themeToCssVars($resolvedTheme) : "";
-</script>
-
-<div style={css}>
-    <slot />
+<script lang="ts">
+    import { themeState, resolvedTheme } from "./store";
+    import { themeToCssVars } from "./cssVars";
+    import { defaultLightTheme, defaultDarkTheme } from "./defaults/defaultTheme";
+    import type { ComposeTheme as Theme, ThemeMode } from "./theme";
+
+    export let light: Theme | undefined = undefined;
+    export let dark: Theme | undefined = undefined;
+    export let mode: ThemeMode = "system";
+
+    $: themeState.set({
+        light: light ?? defaultLightTheme,
+        dark: dark ?? defaultDarkTheme,
+        mode,
+    });
+
+    $: css = $resolvedTheme ? themeToCssVars($resolvedTheme) : "";
+</script>
+
+<!--
+    ComposeTheme — Proveedor de tokens y estilos globales.
+    Aplica las variables CSS y establece el fondo/color base siguiendo el esquema de Material 3.
+    Ocupa el 100% para asegurar que los fondos cubran toda la pantalla.
+-->
+<div
+    style={`
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-surface, white);
+        color: var(--md-sys-color-onSurface, black);
+        ${css}
+    `}
+>
+    <slot />
 </div>

package/dist/core/theme/colors.d.ts

@@ -9,6 +9,8 @@ export interface ColorScheme {
     onSurface: string;
     surfaceVariant: string;
     onSurfaceVariant: string;
+    tertiary: string;
+    onTertiary: string;
     outline: string;
     error: string;
     onError: string;

package/dist/core/theme/defaults/darkColors.js

@@ -3,6 +3,8 @@ export var darkColors = {
     onPrimary: "#E6E6E6",
     secondary: "#3A3E49",
     onSecondary: "#E6E6E6",
+    tertiary: "#D0BCFF",
+    onTertiary: "#381E72",
     background: "#080808",
     onBackground: "#E6E6E6",
     surface: "#101010",

package/dist/core/theme/defaults/lightColors.js

@@ -3,6 +3,8 @@ export var lightColors = {
     onPrimary: "#FFFBF2",
     secondary: "#3A3E49", // Teal vibrante
     onSecondary: "#FFFFFF",
+    tertiary: "#6750A4",
+    onTertiary: "#FFFFFF",
     background: "#FFFBF2",
     onBackground: "#1C1B1F",
     surface: "#FFFFFF",

package/dist/index.d.ts

@@ -1,129 +1,48 @@
-// =======================================
-// Compose Svelted – Public API (Core V2)
-// =======================================
-
-import type { SvelteComponent } from "svelte";
-
-// ---------- Svelte components (typed as components) ----------
-export class ComposeTheme extends SvelteComponent {}
-export class AppRoot extends SvelteComponent {}
-
-export class Surface extends SvelteComponent {}
-export class Text extends SvelteComponent {}
-
-export class Column extends SvelteComponent {}
-export class Row extends SvelteComponent {}
-export class Box extends SvelteComponent {}
-export class Spacer extends SvelteComponent {}
-export class LazyColumn extends SvelteComponent {}
-export class LazyRow extends SvelteComponent {}
-export class Scaffold extends SvelteComponent {}
-
-export class Button extends SvelteComponent {}
-export class TextButton extends SvelteComponent {}
-export class TonalButton extends SvelteComponent {}
-export class IconButton extends SvelteComponent {}
-export class ButtonWithIcon extends SvelteComponent {}
-export class OutlinedButton extends SvelteComponent {}
-export class OutlinedButtonWithIcon extends SvelteComponent {}
-export class CheckButton extends SvelteComponent {}
-
-export class Card extends SvelteComponent {}
-export class OutlinedCard extends SvelteComponent {}
-
-export class TextField extends SvelteComponent {}
-export class OutlinedTextField extends SvelteComponent {}
-
-export class Image extends SvelteComponent {}
-export class Icon extends SvelteComponent {}
-
-export class AnimatedVisibility extends SvelteComponent {}
-export class AnimatedContent extends SvelteComponent {}
-
-export class NavHost extends SvelteComponent {}
-
-export class CodeBlock extends SvelteComponent {}
-
-// ---------- TS-only API (must resolve inside the installed package) ----------
-// IMPORTANT: These paths must exist in the published tarball.
-// If you are publishing `dist/core/...` etc. (as your npm pack log showed), keep these.
-export * from "./core/shapes/RoundedCornerShape";
-export * from "./core/theme/ColorScheme";
-export * from "./core/theme/TextStyle";
-export * from "./core/theme/Density";
-
-export * from "./core/modifier/Modifier";
-
-export * from "./components/layouts/Arrangement";
-export * from "./components/layouts/Alignment";
-export * from "./components/ContentScale";
-
-export * from "./core/helpers/painterResource";
-
-export * from "./core/motion/AnimationSpec";
-export * from "./core/motion/transitions";
-export * from "./core/motion/contentTransitions";
-
-export * from "./core/navigation/Route";
-export * from "./core/navigation/NavController";
-export * from "./core/navigation/rememberNavController";
-export * from "./core/navigation/composable";
-/*// =========================
-// COMPONENTS (Svelte)
-// =========================
-// LAYOUTS
-export { default as ComposeTheme } from "./core/theme/ComposeTheme.svelte";
-export { default as AppRoot } from "./components/AppRoot.svelte"
-// COMPONENTS
-export { default as Surface } from "./components/Surface.svelte";
-export { default as Text } from "./components/Text.svelte";
-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 Button } from "./components/buttons/Button.svelte"
-export { default as IconButton } from "./components/buttons/IconButton.svelte"
-export { default as ButtonWithIcon } from "./components/buttons/ButtonWithIcon.svelte"
-export { default as OutlinedIconButton } 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 TextButton } from "./components/buttons/TextButton.svelte"
-export { default as OutlinedButton } from "./components/buttons/OutlinedButton.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 TonalButton } from "./components/TonalButton.svelte"
-export { default as LazyColumn } from "./components/layouts/LazyColumn.svelte"
-export { default as LazyRow } from "./components/layouts/LazyRow.svelte"
-export { default as Icon } from "./components/Icon.svelte"
-export { default as Image } from "./components/Image.svelte"
-export { default as Scaffold } from "./components/layouts/Scaffold.svelte"
-// Motions
-export { default as AnimatedVisibility } from "./components/motion/AnimatedVisibility.svelte"
-export { default as AnimatedContent } from "./components/motion/AnimatedContent.svelte"
-// Custom
-export { default as CodeBlock } from "./components/custom/CodeBlock.svelte"
-// Navigation
-export { default as NavHost } from "./core/navigation/NavHost.svelte";
-
-// =========================
-// TOKENS / API (TS only)
-// =========================
-export * from "./core/shapes/RoundedCornerShape"
-export * from "./core/theme/ColorScheme";
-export * from "./core/theme/TextStyle";
-export * from "./core/modifier/Modifier"
-export * from "./components/layouts/Arrangement";
-export * from "./components/layouts/Alignment";
-export * from "./components/ContentScale"
-export * from "./core/helpers/painterResource"
-export * from "./components/ContentScale"
-export * from "./core/theme/Density"
-export * from "./core/motion/AnimationSpec"
-export * from "./core/motion/transitions"
-export * from "./core/motion/contentTransitions"
-export * from "./core/navigation/Route";
-export * from "./core/navigation/NavController";
-export * from "./core/navigation/rememberNavController";
-export * from "./core/navigation/composable";*/
+export { default as ComposeTheme } from "./core/theme/ComposeTheme.svelte";
+export { default as AppRoot } from "./components/AppRoot.svelte";
+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";
+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 OutlinedIconButton } from "./components/buttons/OutlinedIconButton.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 DropdownMenu } from "./components/menus/DropdownMenu.svelte";
+export { default as DropdownMenuItem } from "./components/menus/DropdownMenuItem.svelte";
+export { default as Image } from "./components/Image.svelte";
+export { default as Icon } from "./components/Icon.svelte";
+export { default as AnimatedVisibility } from "./components/motion/motion/AnimatedVisibility.svelte";
+export { default as AnimatedContent } from "./components/motion/motion/AnimatedContent.svelte";
+export { default as NavHost } from "./core/navigation/NavHost.svelte";
+export { default as CodeBlock } from "./components/custom/CodeBlock.svelte";
+export * from "./core/modifier/Modifier";
+export * from "./core/shapes/RoundedCornerShape";
+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/dist/index.js

@@ -1,4 +1,4 @@
-import "./core/styles/baseline.css";
+//import "./core/styles/baseline.css";
 // Root
 export { default as ComposeTheme } from "./core/theme/ComposeTheme.svelte";
 export { default as AppRoot } from "./components/AppRoot.svelte";
@@ -21,21 +21,25 @@ export { default as ButtonWithIcon } from "./components/buttons/ButtonWithIcon.s
 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 OutlinedIconButton } from "./components/buttons/OutlinedIconButton.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 DropdownMenu } from "./components/menus/DropdownMenu.svelte";
+export { default as DropdownMenuItem } from "./components/menus/DropdownMenuItem.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";
+export { default as AnimatedVisibility } from "./components/motion/motion/AnimatedVisibility.svelte";
+export { default as AnimatedContent } from "./components/motion/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 "./core/shapes/RoundedCornerShape";
 export * from "./components/layouts/Alignment";
 export * from "./components/layouts/Arrangement";
 export * from "./components/ContentScale";