@danielito1996/compose-svelted 0.2.6 → 0.2.7-alpha01

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +193 -113
  2. package/dist/components/AppRoot.svelte +2 -5
  3. package/dist/index.js +51 -0
  4. package/package.json +5 -9
package/README.md CHANGED
@@ -1,113 +1,193 @@
1
- # compose-svelted
2
-
3
- <p align="center">
4
- <img src="docs/assets/svelted.png" width="960" alt="compose-svelted" />
5
- </p>
6
-
7
- <p align="center">
8
- <b>Compose-inspired UI framework for Svelte</b><br/>
9
- Declarative layout · Immutable modifiers · Structural motion · Compose-like navigation
10
- </p>
11
-
12
- <p align="center">
13
- <img src="https://img.shields.io/badge/status-alpha-orange" />
14
- <img src="https://img.shields.io/badge/Svelte-FF3E00?logo=svelte&logoColor=white" />
15
- <img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white" />
16
- </p>
17
-
18
- ---
19
-
20
- ## ✨ What is compose-svelted?
21
-
22
- **compose-svelted** is an experimental but ambitious UI framework that brings the
23
- **Jetpack Compose mental model** to the Svelte ecosystem.
24
-
25
- It is **not** a Material Design clone, and it is **not** a thin component library.
26
-
27
- Instead, it focuses on:
28
- - explicit UI composition
29
- - predictable layout
30
- - declarative motion
31
- - navigation as state
32
-
33
- All built on top of **Svelte**, without virtual DOM abstractions or hidden magic.
34
-
35
- ---
36
-
37
- ## 🧠 Core Philosophy
38
-
39
- > UI is a function of state.
40
- > Layout, motion, and navigation must be explicit and predictable.
41
-
42
- Key ideas:
43
- - No implicit behavior
44
- - No global side effects
45
- - No magic context you cannot reason about
46
- - Everything composes
47
-
48
- ---
49
-
50
- ## 🧱 Library Structure (High-Level)
51
-
52
- ### Core V1 – Layout & Styling
53
- - Column, Row, Box
54
- - Modifier (immutable, chainable)
55
- - Shapes
56
- - Theme system
57
- - Typography
58
-
59
- ### Core V2 – Motion & Navigation (CLOSED)
60
- - AnimatedVisibility
61
- - AnimatedContent
62
- - Declarative motion
63
- - NavController
64
- - NavHost
65
- - Internal backstack
66
-
67
- ---
68
-
69
- ## 💪 Strengths
70
-
71
- ### Explicit Layout
72
- Layouts are predictable and composable.
73
-
74
- ### Immutable Modifiers
75
- Describe intent, not CSS.
76
-
77
- ### Structural Motion
78
- Motion is part of the UI structure.
79
-
80
- ### Compose-like Navigation
81
- Navigation without external routers.
82
-
83
- ---
84
-
85
- ## 🚀 Innovation
86
-
87
- - Compose mental model on the web
88
- - Navigation as state
89
- - Motion as structure
90
- - No virtual DOM abstraction
91
-
92
- ---
93
-
94
- ## 📦 Status
95
-
96
- - Alpha
97
- - Core V2 closed
98
- - Core V3 planned
99
-
100
- ---
101
-
102
- ## 🔮 Roadmap
103
-
104
- ### Core V3
105
- - Nested navigation
106
- - Directional transitions
107
- - Shared elements
108
-
109
- ---
110
-
111
- ## 📄 License
112
-
113
- MIT
1
+ # compose-svelted
2
+
3
+ <p align="center">
4
+ <img src="docs/assets/svelted.png" width="960" alt="compose-svelted" />
5
+ </p>
6
+
7
+ <p align="center">
8
+ <b>Compose-inspired UI framework for Svelte</b><br/>
9
+ Declarative layout · Immutable modifiers · Structural motion · Compose-like navigation
10
+ </p>
11
+
12
+ <p align="center">
13
+ <img src="https://img.shields.io/badge/status-alpha-orange" />
14
+ <img src="https://img.shields.io/badge/Svelte-FF3E00?logo=svelte&logoColor=white" />
15
+ <img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white" />
16
+ </p>
17
+
18
+ ---
19
+
20
+ ## ✨ What is compose-svelted?
21
+
22
+ **compose-svelted** is an experimental but ambitious UI framework that brings the
23
+ **Jetpack Compose mental model** to the Svelte ecosystem.
24
+
25
+ It is **not** a Material Design clone, and it is **not** a thin component library.
26
+
27
+ Instead, it focuses on:
28
+ - explicit UI composition
29
+ - predictable layout
30
+ - declarative motion
31
+ - navigation as state
32
+
33
+ All built on top of **Svelte**, without virtual DOM abstractions or hidden magic.
34
+
35
+ ---
36
+
37
+ ## 🧠 Core Philosophy
38
+
39
+ > UI is a function of state.
40
+ > Layout, motion, and navigation must be explicit and predictable.
41
+
42
+ Key ideas:
43
+ - No implicit behavior
44
+ - No global side effects
45
+ - No magic context you cannot reason about
46
+ - Everything composes
47
+
48
+ ---
49
+
50
+ ## 🧱 Library Structure (High-Level)
51
+
52
+ ### Core V1 – Layout & Styling
53
+ - Column, Row, Box
54
+ - Modifier (immutable, chainable)
55
+ - Shapes
56
+ - Theme system
57
+ - Typography
58
+
59
+ ### Core V2 – Motion & Navigation (CLOSED)
60
+ - AnimatedVisibility
61
+ - AnimatedContent
62
+ - Declarative motion
63
+ - NavController
64
+ - NavHost
65
+ - Internal backstack
66
+
67
+ ---
68
+
69
+ ## 💪 Strengths
70
+
71
+ ### Explicit Layout
72
+ Layouts are predictable and composable.
73
+
74
+ ### Immutable Modifiers
75
+ Describe intent, not CSS.
76
+
77
+ ### Structural Motion
78
+ Motion is part of the UI structure.
79
+
80
+ ### Compose-like Navigation
81
+ Navigation without external routers.
82
+
83
+ ---
84
+
85
+ ## 🚀 Innovation
86
+
87
+ - Compose mental model on the web
88
+ - Navigation as state
89
+ - Motion as structure
90
+ - No virtual DOM abstraction
91
+
92
+ ---
93
+
94
+ ## 📦 Status
95
+
96
+ - Alpha
97
+ - Core V2 closed
98
+ - Core V3 planned
99
+
100
+ ---
101
+
102
+ ## 🔮 Roadmap
103
+
104
+ ### Core V3
105
+ - Nested navigation
106
+ - Directional transitions
107
+ - Shared elements
108
+
109
+ ---
110
+
111
+ ## ⚠️ CSS Baseline (Required)
112
+
113
+ Compose Svelted assumes a neutral CSS baseline.
114
+
115
+ You MUST include the following reset in your app:
116
+
117
+ ```css
118
+ *,
119
+ *::before,
120
+ *::after {
121
+ box-sizing: border-box;
122
+ }
123
+
124
+ html,
125
+ body {
126
+ margin: 0;
127
+ padding: 0;
128
+ min-height: 100vh;
129
+ }
130
+ ```
131
+
132
+ ## 📄 License
133
+
134
+ MIT
135
+
136
+ ---
137
+
138
+ ## ⚠️ CSS Baseline Requirement (Important)
139
+
140
+ Compose Svelted is **layout-deterministic**.
141
+
142
+ To guarantee consistent and predictable behavior of layout components such as
143
+ `Box`, `Column`, `Row`, `Surface`, `Scaffold`, and navigation containers,
144
+ a **neutral CSS baseline is required** in the host application.
145
+
146
+ This is **intentional** and mirrors the contract-based approach of **Jetpack Compose**.
147
+
148
+ ### Required baseline
149
+
150
+ You must include the following reset in your global styles:
151
+
152
+ ```css
153
+ *,
154
+ *::before,
155
+ *::after {
156
+ box-sizing: border-box;
157
+ }
158
+
159
+ html,
160
+ body {
161
+ margin: 0;
162
+ padding: 0;
163
+ min-height: 100vh;
164
+ }
165
+ ```
166
+
167
+ ### Why this matters
168
+
169
+ Compose Svelted does **not**:
170
+ - force global CSS
171
+ - inject layout styles silently
172
+ - assume browser defaults
173
+
174
+ Instead, it expects a minimal, explicit layout contract.
175
+ Without this baseline, layout behavior may vary between browsers or projects.
176
+
177
+ ### Tailwind CSS
178
+
179
+ Compose Svelted **does not require Tailwind CSS**.
180
+
181
+ Tailwind is used internally as an implementation detail for predictable styling,
182
+ but consumers of the library are **not required** to install or configure Tailwind.
183
+
184
+ ### Future (Core V3)
185
+
186
+ A reusable `baseline.css` helper will be provided as an **optional import**
187
+ to simplify adoption:
188
+
189
+ ```ts
190
+ import "@danielito1996/compose-svelted/baseline.css";
191
+ ```
192
+
193
+ This will remain optional and opt-in.
package/dist/components/AppRoot.svelte CHANGED
@@ -5,11 +5,8 @@
5
5
  </script>
6
6
 
7
7
  <div
8
- style={`
9
- width:100vw;
10
- height:100vh;
11
- ${modifier.toStyle()}
12
- `}
8
+ class="compose-relative"
9
+ style={`width:100vw;height:100vh;${modifier.toStyle()}`}
13
10
  >
14
11
  <slot />
15
12
  </div>
package/dist/index.js ADDED
@@ -0,0 +1,51 @@
1
+ // Root
2
+ export { default as ComposeTheme } from "./core/theme/ComposeTheme.svelte";
3
+ export { default as AppRoot } from "./components/AppRoot.svelte";
4
+ // Layouts
5
+ export { default as Column } from "./components/layouts/Column.svelte";
6
+ export { default as Row } from "./components/layouts/Row.svelte";
7
+ export { default as Box } from "./components/layouts/Box.svelte";
8
+ export { default as Spacer } from "./components/Spacer.svelte";
9
+ export { default as LazyColumn } from "./components/layouts/LazyColumn.svelte";
10
+ export { default as LazyRow } from "./components/layouts/LazyRow.svelte";
11
+ export { default as Scaffold } from "./components/layouts/Scaffold.svelte";
12
+ // UI
13
+ export { default as Surface } from "./components/Surface.svelte";
14
+ export { default as Text } from "./components/Text.svelte";
15
+ export { default as Button } from "./components/buttons/Button.svelte";
16
+ export { default as TextButton } from "./components/buttons/TextButton.svelte";
17
+ export { default as TonalButton } from "./components/TonalButton.svelte";
18
+ export { default as IconButton } from "./components/buttons/IconButton.svelte";
19
+ export { default as ButtonWithIcon } from "./components/buttons/ButtonWithIcon.svelte";
20
+ export { default as OutlinedButton } from "./components/buttons/OutlinedButton.svelte";
21
+ export { default as OutlinedButtonWithIcon } from "./components/buttons/OutlinedButtonWithIcon.svelte";
22
+ export { default as CheckButton } from "./components/buttons/CheckButton.svelte";
23
+ export { default as Card } from "./components/cards/Card.svelte";
24
+ export { default as OutlinedCard } from "./components/cards/OutlinedCard.svelte";
25
+ export { default as TextField } from "./components/textFields/TextField.svelte";
26
+ export { default as OutlinedTextField } from "./components/textFields/OutlinedTextField.svelte";
27
+ export { default as Image } from "./components/Image.svelte";
28
+ export { default as Icon } from "./components/Icon.svelte";
29
+ // Motion
30
+ export { default as AnimatedVisibility } from "./components/motion/AnimatedVisibility.svelte";
31
+ export { default as AnimatedContent } from "./components/motion/AnimatedContent.svelte";
32
+ // Navigation
33
+ export { default as NavHost } from "./core/navigation/NavHost.svelte";
34
+ // Custom
35
+ export { default as CodeBlock } from "./components/custom/CodeBlock.svelte";
36
+ // TS-only exports
37
+ export * from "./core/modifier/Modifier";
38
+ export * from "./components/layouts/Alignment";
39
+ export * from "./components/layouts/Arrangement";
40
+ export * from "./components/ContentScale";
41
+ export * from "./core/theme/ColorScheme";
42
+ export * from "./core/theme/TextStyle";
43
+ export * from "./core/theme/Density";
44
+ export * from "./core/motion/AnimationSpec";
45
+ export * from "./core/motion/transitions";
46
+ export * from "./core/motion/contentTransitions";
47
+ export * from "./core/helpers/painterResource";
48
+ export * from "./core/navigation/Route";
49
+ export * from "./core/navigation/NavController";
50
+ export * from "./core/navigation/rememberNavController";
51
+ export * from "./core/navigation/composable";
package/package.json CHANGED
@@ -1,10 +1,9 @@
1
1
  {
2
2
  "name": "@danielito1996/compose-svelted",
3
- "version": "0.2.6",
3
+ "version": "0.2.7-alpha01",
4
4
  "description": "Compose-like UI toolkit for Svelte, inspired by Jetpack Compose",
5
5
  "license": "MIT",
6
6
  "type": "module",
7
-
8
7
  "author": "Daniel Imbert Tabares",
9
8
  "repository": {
10
9
  "type": "git",
@@ -18,21 +17,18 @@
18
17
  ".": {
19
18
  "types": "./dist/index.d.ts",
20
19
  "import": "./dist/index.js",
21
- "svelte": "./dist/index.js",
22
- "default": "./dist/index.js"
20
+ "svelte": "./dist/index.js"
23
21
  }
24
22
  },
25
- "svelte": "./dist/index.js",
26
23
  "files": [
27
24
  "dist"
28
25
  ],
29
- "sideEffects": [
30
- "**/*.css"
31
- ],
32
26
  "peerDependencies": {
33
27
  "svelte": "^5.0.0"
34
28
  },
35
-
29
+ "sideEffects": [
30
+ "**/*.css"
31
+ ],
36
32
  "scripts": {
37
33
  "dev": "vite",
38
34
  "build": "vite build",