@danielito1996/compose-svelted 0.0.1 → 0.2.0

package/README.md

@@ -1,274 +1,113 @@
-# Compose-like UI for Svelte
-<p align="start">
-  <a href="https://www.npmjs.com/package/compose-svelte">
-    <img src="https://img.shields.io/npm/v/svelted.svg" alt="npm version" />
-  </a>
-  <a href="https://www.npmjs.com/package/compose-svelte">
-    <img src="https://img.shields.io/npm/dm/svelted.svg" alt="npm downloads" />
-  </a>
-  <a href="https://github.com/danielitoCode/compose-svelte/blob/main/LICENSE">
-    <img src="https://img.shields.io/github/license/danielitoCode/compose-svelte" alt="license" />
-  </a>
-   <img src="https://img.shields.io/badge/status-alpha-orange" />
-   <img src="https://img.shields.io/badge/version-0.0.1-blue" />
-</p>
-
-<p align="center">
-  <img src="docs/assets/svelted.png" width="310" alt="ios" />
-</p>
-
-
-A Compose-inspired UI toolkit for **Svelte**, focused on explicit composition,
-immutable modifiers, and theme-driven design.
-
-Inspired by **Jetpack Compose**, built natively for the web using Svelte and
-standard web technologies.
-
-<p align="center">
-  <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" />
-  <img src="https://img.shields.io/badge/Jetpack%20Compose-inspired-4285F4" />
-</p>
-
----
-
-## ✨ Goals
-
-- Explicit and predictable UI composition
-- Immutable, chainable `Modifier`s
-- Strong separation between core, layout and components
-- Theme-driven design (tokens, not raw CSS)
-- No virtual DOM abstractions
-- No hidden magic
-
-> This is **not** a Material clone.  
-> It is a Compose-like system that can be styled beyond Material Design.
-
----
-
-## Why Compose-like for Svelte?
-
-Jetpack Compose introduced a clear, explicit and composable mental model for UI.
-This project explores how that same philosophy translates to the web,
-using Svelte as a native, compiler-driven foundation.
-
-The goal is not to replicate Android UI,
-but to bring Compose’s clarity and composability to modern web applications.
-
-## 🚀 Installation
-
-```bash
-npm install compose-svelte
-```
-
----
-
-## 🧭 Minimal Example
-
-```svelte
-<script>
-  import {
-    ComposeTheme,
-    AppRoot,
-    Surface,
-    Text,
-    Modifier
-  } from "compose-svelte";
-</script>
-
-<ComposeTheme mode="system">
-  <AppRoot>
-    <Surface modifier={Modifier.fillMaxSize()}>
-      <Text>Hello Compose</Text>
-    </Surface>
-  </AppRoot>
-</ComposeTheme>
-```
-
----
-
-## 🧱 Layout
-
-### Column
-
-```svelte
-<Column modifier={Modifier.padding(16)}>
-  <Text textStyle="titleLarge">Title</Text>
-  <Text>Body text</Text>
-</Column>
-```
-
-### Row
-
-```svelte
-<Row horizontalArrangement={Arrangement.spacedBy(8)}>
-  <Text>Left</Text>
-  <Text>Right</Text>
-</Row>
-```
-
-### Box
-
-```svelte
-<Box modifier={Modifier.size(120)}>
-  <Text modifier={Modifier.align(Alignment.Center)}>Centered</Text>
-</Box>
-```
-
----
-
-## 🎨 Theme
-
-### ComposeTheme
-
-Provides theming for the entire app.
-
-- Light / Dark / System modes
-- Tokens exposed as CSS variables
-- Inspired by MaterialTheme
-
-```svelte
-<ComposeTheme mode="dark">
-  <AppRoot>
-    <Surface>
-      <Text>Dark mode</Text>
-    </Surface>
-  </AppRoot>
-</ComposeTheme>
-```
-
----
-
-## 📝 TextField
-
-### Filled
-
-```svelte
-<TextField
-  label="Email"
-  placeholder="you@email.com"
-  value={email}
-  onValueChange={(v) => email = v}
-/>
-```
-
-### Outlined
-
-```svelte
-<OutlinedTextField
-  label="Email"
-  value={email}
-  onValueChange={(v) => email = v}
-/>
-```
-
----
-
-## 🔘 Buttons
-
-```svelte
-<Button onClick={submit}>
-  Submit
-</Button>
-
-<TextButton onClick={cancel}>
-  Cancel
-</TextButton>
-
-<OutlinedButton>
-  Outlined
-</OutlinedButton>
-```
-
----
-
-## 🧩 Modifiers
-
-Modifiers are immutable and chainable.
-
-```ts
-Modifier
-  .padding(16)
-  .fillMaxWidth()
-  .background(ColorScheme.Surface)
-```
-
-### Available categories
-
-- Layout: `size`, `width`, `height`, `fill`, `weight`
-- Spacing: `padding`, `margin`
-- Drawing: `background`, `border`, `clip`
-- Interaction: `clickable`
-- Transform: `offset`
-- Scroll: `verticalScroll`, `horizontalScroll`
-
----
-
-## 🔲 Shapes
-
-```ts
-RoundedCornerShape(12)
-RoundedCornerShape({ topStart: 16, topEnd: 16 })
-```
-
-Shapes are value objects and reusable across components.
-
----
-
-## 🎨 Theme Tokens
-
-### ColorScheme
-
-```ts
-ColorScheme.Primary
-ColorScheme.Surface
-ColorScheme.OnSurface
-```
-
-### TextStyle
-
-```ts
-TextStyle.TitleLarge
-TextStyle.BodyMedium
-TextStyle.LabelSmall
-```
-
----
-
-## 🖼️ Images & Icons
-
-```svelte
-<Image
-  painter={painterResource(Res.image("logo.png"))}
-  contentScale={ContentScale.Fit}
-/>
-
-<Icon
-  painter="https://api.iconify.design/mdi/home.svg"
-  modifier={Modifier.size(24)}
-/>
-```
-
----
-
-## 📦 Project Status
-
-- Core v0.0.1: stable
-- Layout system: stable
-- Theme system: stable
-- Modifiers: stable
-- Lazy layouts: experimental
-
----
-
-## 🧠 Philosophy
-
-Clarity over cleverness.
-
-If something is not explicit, it is probably not part of the API.
-
----
-
-## 📄 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
+
+---
+
+## 📄 License
+
+MIT

package/dist/components/ContentScale.d.ts

@@ -0,0 +1,10 @@
+export declare const ContentScale: {
+    readonly Crop: "cover";
+    readonly Fit: "contain";
+    readonly FillBounds: "fill";
+    readonly Inside: "contain";
+    readonly FillWidth: "fillWidth";
+    readonly FillHeight: "fillHeight";
+    readonly None: "none";
+};
+export type ContentScaleToken = typeof ContentScale[keyof typeof ContentScale];

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

@@ -0,0 +1,20 @@
+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";
+};
+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/Arrangement.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Arrangement — eje principal (main axis)
+ * Fiel a Jetpack Compose
+ */
+export type ArrangementValue = {
+    type: "static";
+    justifyContent: string;
+} | {
+    type: "spaced";
+    gap: number;
+    justifyContent: string;
+};
+export declare const Arrangement: {
+    readonly Start: ArrangementValue;
+    readonly Center: ArrangementValue;
+    readonly End: ArrangementValue;
+    readonly Bottom: ArrangementValue;
+    readonly Top: ArrangementValue;
+    readonly SpaceBetween: ArrangementValue;
+    readonly SpaceAround: ArrangementValue;
+    readonly SpaceEvenly: ArrangementValue;
+    readonly spacedBy: (value: number) => ArrangementValue;
+};

package/{src/lib/components/textFields/TextFieldColors.ts → dist/components/textFields/TextFieldColors.d.ts}

@@ -1,11 +1,12 @@
-export interface TextFieldColors {
-    container: string;
-    label: string;
-    placeholder: string;
-    text: string;
-    cursor: string;
-    indicatorFocused: string;
-    indicatorUnfocused: string;
-    borderFocused?: string;
-    borderUnfocused?: string;
-}
+export interface TextFieldColors {
+    container: string;
+    label: string;
+    placeholder: string;
+    text: string;
+    cursor: string;
+    indicatorFocused: string;
+    indicatorUnfocused: string;
+    borderFocused?: string;
+    borderUnfocused?: string;
+    error?: string;
+}

package/dist/components/textFields/TextFieldDefaults.d.ts

@@ -0,0 +1,11 @@
+import type { TextFieldColors } from "./TextFieldColors";
+export declare const TextFieldDefaults: {
+    /**
+     * FilledTextField (Material default)
+     */
+    filledColors(): TextFieldColors;
+    /**
+     * OutlinedTextField
+     */
+    outlinedColors(): TextFieldColors;
+};

package/dist/core/elevation/elevation.d.ts

@@ -0,0 +1 @@
+export declare function elevationToShadow(value: number | string): string;

package/dist/core/helpers/painterResource.d.ts

@@ -0,0 +1,12 @@
+/**
+ * painterResource - como en Jetpack Compose
+ * Carga un recurso local desde src/lib/assets/
+ * Soporta SVG (?raw para string) e imágenes (?url para URL)
+ */
+export declare const Res: {
+    readonly raw: (fileName: string) => string;
+    readonly image: (fileName: string) => string;
+    readonly values: (fileName: string) => string;
+    readonly fonts: (fileName: string) => string;
+};
+export declare function painterResource(resourceName: string): string;