@danielito1996/compose-svelted 0.0.1

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}

package/README.md

@@ -0,0 +1,274 @@
+# 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

package/docs/assets/svelted.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  width="256"
+  height="256"
+  viewBox="0 0 256 256"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <!-- Background circle -->
+  <circle cx="128" cy="128" r="112" fill="#FF3E00"/>
+
+  <!-- Inner compose-style layers -->
+  <rect
+    x="72"
+    y="72"
+    width="112"
+    height="112"
+    rx="28"
+    fill="white"
+    opacity="0.15"
+  />
+
+  <rect
+    x="88"
+    y="88"
+    width="80"
+    height="80"
+    rx="20"
+    fill="white"
+    opacity="0.25"
+  />
+
+  <rect
+    x="104"
+    y="104"
+    width="48"
+    height="48"
+    rx="12"
+    fill="white"
+  />
+</svg>

package/docs/getting_started.md

@@ -0,0 +1,116 @@
+# Getting Started
+
+This guide helps you go from **installation** to your **first screen**
+using Svelted.
+
+---
+
+## Installation
+
+```bash
+npm install compose-svelte
+```
+
+or
+
+```bash
+pnpm add compose-svelte
+```
+
+---
+
+## Basic Setup
+
+Wrap your app with `ComposeTheme` and `AppRoot`.
+
+```svelte
+<script>
+  import {
+    ComposeTheme,
+    AppRoot,
+    Surface,
+    Text,
+    Modifier
+  } from "compose-svelte";
+</script>
+
+<ComposeTheme mode="system">
+  <AppRoot>
+    <Surface modifier={Modifier.fillMaxSize()}>
+      <Text>Hello Svelted</Text>
+    </Surface>
+  </AppRoot>
+</ComposeTheme>
+```
+
+---
+
+## Layout Basics
+
+### 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>
+```
+
+---
+
+## TextField
+
+```svelte
+<TextField
+  label="Email"
+  placeholder="you@email.com"
+  value={email}
+  onValueChange={(v) => email = v}
+/>
+```
+
+```svelte
+<OutlinedTextField
+  label="Email"
+  value={email}
+  onValueChange={(v) => email = v}
+/>
+```
+
+---
+
+## Modifiers
+
+```ts
+Modifier
+  .padding(16)
+  .fillMaxWidth()
+  .clip(RoundedCornerShape(12))
+```
+
+---
+
+## Next Steps
+
+- Explore LazyColumn and LazyRow
+- Customize themes
+- Build real screens

package/docs/index.md

@@ -0,0 +1,106 @@
+<p align="center">
+  <img src="assets/svelted.png" alt="Svelted" width="480" />
+</p>
+
+<h1 align="center">Svelted</h1>
+
+<p align="center">
+  Compose-like UI for <strong>Svelte</strong><br/>
+  Explicit composition · Immutable modifiers · Theme-driven
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/status-alpha-orange" />
+  <img src="https://img.shields.io/badge/version-0.0.1-blue" />
+  <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 Svelted?
+
+**Svelted** is a UI toolkit for the web inspired by **Jetpack Compose**  
+and built natively on top of **Svelte**.
+
+It brings the Compose mental model to the web:
+
+- Explicit UI composition
+- Immutable and chainable `Modifier`s
+- Theme-first design
+- No virtual DOM abstractions
+- No hidden styling magic
+
+---
+
+## Core Principles
+
+### 🧩 Composition over configuration
+UI is built by composing small, predictable components.
+
+### 🧱 Modifiers
+Layout, drawing, interaction and behavior are controlled through immutable modifiers.
+
+```ts
+Modifier
+  .padding(16)
+  .fillMaxWidth()
+  .background(ColorScheme.Surface)
+```
+
+### 🎨 Theme-driven
+Design tokens come from the theme, not from hardcoded styles.
+
+---
+
+## Components (v0.0.1)
+
+<p align="center">
+  <img src="assets/svelted.svg" width="96" />
+</p>
+
+### Layout
+- Column, Row, Box, Spacer
+- LazyColumn *(experimental)*
+- LazyRow *(experimental)*
+
+### Foundation
+- Surface, Text, Image, Icon
+
+### Inputs
+- TextField
+- OutlinedTextField
+
+### Buttons
+- Button, TextButton
+- OutlinedButton, TonalButton
+- IconButton
+
+---
+
+## Quick Example
+
+```svelte
+<ComposeTheme mode="system">
+  <AppRoot>
+    <Surface modifier={Modifier.fillMaxSize().padding(32)}>
+      <Column>
+        <Text textStyle="titleLarge">Hello Compose</Text>
+        <Text>This is Svelted.</Text>
+      </Column>
+    </Surface>
+  </AppRoot>
+</ComposeTheme>
+```
+
+---
+
+## Get Started
+
+👉 **[Getting Started](./getting_started.html)**
+
+---
+
+<p align="center">
+  Built with ❤️ for developers who value clarity and composable UI.
+</p>

package/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="/src/app.css" rel="stylesheet">
+    <title>compose_svelted</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@danielito1996/compose-svelted",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "MIT",
+  "description": "Compose-like UI toolkit for Svelte",
+  "keywords": [
+    "svelte",
+    "ui",
+    "compose",
+    "design-system",
+    "material"
+  ],
+  "author": "Daniel Imbert Tabares",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/danielitoCode/compose_svelted"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tsconfig/svelte": "^5.0.6",
+    "@types/node": "^24.10.1",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
+    "svelte": "^5.43.8",
+    "svelte-check": "^4.3.4",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.18"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/screenshots/capturas.txt

@@ -0,0 +1 @@
+

package/src/App.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import {
+        AppRoot,
+        Column,
+        Surface,
+        Text,
+        OutlinedTextField,
+        ComposeTheme,
+        Icon,
+        ColorScheme,
+        RoundedCornerShape, Row, TextField, Box, Alignment, TextStyle, Button
+    } from "./lib";
+
+    import { Modifier } from "./lib";
+    import { Arrangement } from "./lib";
+
+    let name = "";
+    let email = "";
+    let bio = "";
+    let filled = "Texto inicial";
+    let notes = "";
+</script>
+
+<ComposeTheme mode="system">
+    <AppRoot>
+        <Surface
+                color={ColorScheme.Background}
+                modifier={Modifier.fillMaxSize().verticalScroll(true)}
+        >
+            <Box
+                    modifier={Modifier.fillMaxSize()}
+                    contentAlignment={Alignment.Center}
+            >
+
+                <Button onClick={()=>console.log("click")}>Custom Button</Button>
+            </Box>
+        </Surface>
+    </AppRoot>
+</ComposeTheme>

package/src/app.css

@@ -0,0 +1,23 @@
+@import "tailwindcss";
+/* RESET NEUTRO — NO layout, NO tema */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    min-width: 320px;
+    min-height: 100vh;
+    overflow: hidden;
+}
+
+/* IMPORTANTE:
+   - NO display:flex
+   - NO centrar
+   - NO colores
+   - NO tipografía
+*/