@danielito1996/compose-svelted 0.0.1 → 0.2.1

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/compose-svelted.css

@@ -0,0 +1,2 @@
+.lazy-row--hide-scrollbar.svelte-t2yd5u::-webkit-scrollbar{display:none}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -0,0 +1,152 @@
+/*// =======================================
+// Compose Svelted – Public API (Core V2)
+// =======================================
+
+import type { SvelteComponent } from "svelte";
+
+// =======================================
+// Root / Theme
+// =======================================
+
+export class ComposeTheme extends SvelteComponent {}
+export class AppRoot extends SvelteComponent {}
+
+// =======================================
+// Layouts
+// =======================================
+
+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 {}
+
+// =======================================
+// Core UI Components
+// =======================================
+
+export class Surface extends SvelteComponent {}
+export class Text 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 {}
+
+// =======================================
+// Motion
+// =======================================
+
+export class AnimatedVisibility extends SvelteComponent {}
+export class AnimatedContent extends SvelteComponent {}
+
+// =======================================
+// Navigation
+// =======================================
+
+export class NavHost extends SvelteComponent {}
+
+// =======================================
+// Custom / Docs
+// =======================================
+
+export class CodeBlock extends SvelteComponent {}
+
+// =======================================
+// Tokens / Helpers (TypeScript only)
+// =======================================
+
+export * from "../src/lib/core/shapes/RoundedCornerShape";
+export * from "../src/lib/core/theme/ColorScheme";
+export * from "../src/lib/core/theme/TextStyle";
+export * from "../src/lib/core/theme/Density";
+
+export * from "../src/lib/core/modifier/Modifier";
+
+export * from "../src/lib/components/layouts/Arrangement";
+export * from "../src/lib/components/layouts/Alignment";
+export * from "../src/lib/components/ContentScale";
+
+export * from "../src/lib/core/helpers/painterResource";
+
+export * from "../src/lib/core/motion/AnimationSpec";
+export * from "../src/lib/core/motion/transitions";
+export * from "../src/lib/core/motion/contentTransitions";
+
+export * from "../src/lib/core/navigation/Route";
+export * from "../src/lib/core/navigation/NavController";
+export * from "../src/lib/core/navigation/rememberNavController";
+export * from "../src/lib/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";