dekit-cli 0.1.1 → 0.2.0

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 (56) hide show
  1. package/README.md +23 -0
  2. package/bin/dekit.ts +98 -34
  3. package/dist/editor/assets/{index-DK9iczjI.js → index-yt1AtkL3.js} +6 -6
  4. package/dist/editor/index.html +1 -1
  5. package/docs/usage.md +127 -0
  6. package/editor/src/App.tsx +9 -11
  7. package/editor/src/types.ts +1 -0
  8. package/package.json +34 -9
  9. package/src/chrome.test.ts +24 -0
  10. package/src/chrome.ts +37 -0
  11. package/src/cli/add.test.ts +62 -0
  12. package/src/cli/add.ts +104 -0
  13. package/src/cli/init.test.ts +61 -0
  14. package/src/cli/init.ts +46 -0
  15. package/src/cli/ls.test.ts +29 -0
  16. package/src/cli/ls.ts +24 -0
  17. package/src/cli/resolve.test.ts +43 -0
  18. package/src/cli/resolve.ts +92 -0
  19. package/src/cli/screenshot.test.ts +54 -0
  20. package/src/cli/screenshot.ts +154 -0
  21. package/src/cli/usage.ts +8 -0
  22. package/src/devices.ts +23 -0
  23. package/src/injected/inspector.ts +31 -0
  24. package/src/parser.test.ts +6 -6
  25. package/src/parser.ts +2 -2
  26. package/src/ref.test.ts +68 -0
  27. package/src/ref.ts +42 -0
  28. package/src/server.ts +8 -5
  29. package/src/types.ts +13 -0
  30. package/src/vite-plugin-dekit.ts +13 -6
  31. package/templates/components/blank/component.css +3 -0
  32. package/templates/components/blank/component.html +5 -0
  33. package/templates/pages/blank/page.css +3 -0
  34. package/templates/pages/blank/page.html +3 -0
  35. package/templates/pages/form/page.css +88 -0
  36. package/templates/pages/form/page.html +21 -0
  37. package/templates/pages/grid/page.css +84 -0
  38. package/templates/pages/grid/page.html +40 -0
  39. package/templates/pages/hero/page.css +62 -0
  40. package/templates/pages/hero/page.html +10 -0
  41. package/templates/projects/blank/dekit.yaml +9 -0
  42. package/templates/projects/blank/global.css +18 -0
  43. package/templates/projects/blank/pages/home/home.css +3 -0
  44. package/templates/projects/blank/pages/home/home.html +3 -0
  45. package/templates/projects/dashboard/dekit.yaml +9 -0
  46. package/templates/projects/dashboard/global.css +18 -0
  47. package/templates/projects/dashboard/pages/home/home.css +248 -0
  48. package/templates/projects/dashboard/pages/home/home.html +100 -0
  49. package/templates/projects/landing/dekit.yaml +9 -0
  50. package/templates/projects/landing/global.css +18 -0
  51. package/templates/projects/landing/pages/home/home.css +255 -0
  52. package/templates/projects/landing/pages/home/home.html +79 -0
  53. package/templates/projects/mobile/dekit.yaml +9 -0
  54. package/templates/projects/mobile/global.css +20 -0
  55. package/templates/projects/mobile/pages/home/home.css +267 -0
  56. package/templates/projects/mobile/pages/home/home.html +110 -0
package/templates/projects/mobile/pages/home/home.css ADDED
@@ -0,0 +1,267 @@
1
+ /* App Shell */
2
+ .app {
3
+ display: flex;
4
+ flex-direction: column;
5
+ height: 100vh;
6
+ overflow: hidden;
7
+ background: #f3f4f6;
8
+ }
9
+
10
+ /* App Header */
11
+ .app-header {
12
+ display: flex;
13
+ align-items: center;
14
+ justify-content: space-between;
15
+ padding: 16px 20px;
16
+ background: #ffffff;
17
+ border-bottom: 1px solid #e5e7eb;
18
+ flex-shrink: 0;
19
+ }
20
+
21
+ .app-header__menu,
22
+ .app-header__action {
23
+ background: none;
24
+ border: none;
25
+ font-size: 1.25rem;
26
+ cursor: pointer;
27
+ color: #374151;
28
+ padding: 4px;
29
+ }
30
+
31
+ .app-header__title {
32
+ font-size: 1.0625rem;
33
+ font-weight: 700;
34
+ color: #111827;
35
+ }
36
+
37
+ /* Content */
38
+ .app-content {
39
+ flex: 1;
40
+ overflow-y: auto;
41
+ padding: 20px 16px;
42
+ display: flex;
43
+ flex-direction: column;
44
+ gap: 20px;
45
+ }
46
+
47
+ /* Greeting */
48
+ .greeting__sub {
49
+ font-size: 0.875rem;
50
+ color: #6b7280;
51
+ }
52
+
53
+ .greeting__name {
54
+ font-size: 1.5rem;
55
+ font-weight: 800;
56
+ color: #111827;
57
+ }
58
+
59
+ /* Summary Card */
60
+ .summary-card {
61
+ background: var(--color-primary);
62
+ border-radius: 16px;
63
+ padding: 24px 20px;
64
+ color: #ffffff;
65
+ }
66
+
67
+ .summary-card__label {
68
+ font-size: 0.8125rem;
69
+ opacity: 0.8;
70
+ margin-bottom: 6px;
71
+ }
72
+
73
+ .summary-card__value {
74
+ font-size: 2rem;
75
+ font-weight: 800;
76
+ margin-bottom: 20px;
77
+ }
78
+
79
+ .summary-card__row {
80
+ display: flex;
81
+ align-items: center;
82
+ gap: 20px;
83
+ }
84
+
85
+ .summary-card__divider {
86
+ width: 1px;
87
+ height: 40px;
88
+ background: rgba(255, 255, 255, 0.3);
89
+ }
90
+
91
+ .summary-card__stat {
92
+ display: flex;
93
+ flex-direction: column;
94
+ gap: 4px;
95
+ }
96
+
97
+ .summary-card__stat-icon {
98
+ font-size: 1rem;
99
+ }
100
+
101
+ .summary-card__stat-icon--up {
102
+ color: #86efac;
103
+ }
104
+
105
+ .summary-card__stat-icon--down {
106
+ color: #fca5a5;
107
+ }
108
+
109
+ .summary-card__stat-label {
110
+ font-size: 0.75rem;
111
+ opacity: 0.8;
112
+ }
113
+
114
+ .summary-card__stat-val {
115
+ font-size: 1rem;
116
+ font-weight: 700;
117
+ }
118
+
119
+ /* Quick Actions */
120
+ .quick-actions {
121
+ display: grid;
122
+ grid-template-columns: repeat(4, 1fr);
123
+ gap: 12px;
124
+ }
125
+
126
+ .quick-action {
127
+ display: flex;
128
+ flex-direction: column;
129
+ align-items: center;
130
+ gap: 8px;
131
+ padding: 14px 8px;
132
+ background: #ffffff;
133
+ border: 1px solid #e5e7eb;
134
+ border-radius: 12px;
135
+ cursor: pointer;
136
+ transition: background 0.15s;
137
+ }
138
+
139
+ .quick-action:hover {
140
+ background: #f9fafb;
141
+ }
142
+
143
+ .quick-action__icon {
144
+ font-size: 1.375rem;
145
+ }
146
+
147
+ .quick-action__label {
148
+ font-size: 0.6875rem;
149
+ font-weight: 600;
150
+ color: #374151;
151
+ }
152
+
153
+ /* Section */
154
+ .section__header {
155
+ display: flex;
156
+ justify-content: space-between;
157
+ align-items: center;
158
+ margin-bottom: 12px;
159
+ }
160
+
161
+ .section__title {
162
+ font-size: 1rem;
163
+ font-weight: 700;
164
+ color: #111827;
165
+ }
166
+
167
+ .section__link {
168
+ font-size: 0.875rem;
169
+ color: var(--color-primary);
170
+ font-weight: 600;
171
+ text-decoration: none;
172
+ }
173
+
174
+ /* Activity List */
175
+ .activity-list {
176
+ background: #ffffff;
177
+ border-radius: 12px;
178
+ border: 1px solid #e5e7eb;
179
+ overflow: hidden;
180
+ }
181
+
182
+ .activity-item {
183
+ display: flex;
184
+ align-items: center;
185
+ gap: 12px;
186
+ padding: 14px 16px;
187
+ border-bottom: 1px solid #f3f4f6;
188
+ }
189
+
190
+ .activity-item:last-child {
191
+ border-bottom: none;
192
+ }
193
+
194
+ .activity-item__icon {
195
+ font-size: 1.5rem;
196
+ width: 40px;
197
+ height: 40px;
198
+ display: flex;
199
+ align-items: center;
200
+ justify-content: center;
201
+ background: #f9fafb;
202
+ border-radius: 10px;
203
+ flex-shrink: 0;
204
+ }
205
+
206
+ .activity-item__info {
207
+ flex: 1;
208
+ }
209
+
210
+ .activity-item__name {
211
+ font-size: 0.875rem;
212
+ font-weight: 600;
213
+ color: #111827;
214
+ }
215
+
216
+ .activity-item__date {
217
+ font-size: 0.75rem;
218
+ color: #9ca3af;
219
+ margin-top: 2px;
220
+ }
221
+
222
+ .activity-item__amount {
223
+ font-size: 0.9375rem;
224
+ font-weight: 700;
225
+ }
226
+
227
+ .activity-item__amount--pos {
228
+ color: #16a34a;
229
+ }
230
+
231
+ .activity-item__amount--neg {
232
+ color: #dc2626;
233
+ }
234
+
235
+ /* Tab Bar */
236
+ .tab-bar {
237
+ display: flex;
238
+ background: #ffffff;
239
+ border-top: 1px solid #e5e7eb;
240
+ padding: 8px 0 env(safe-area-inset-bottom, 0);
241
+ flex-shrink: 0;
242
+ }
243
+
244
+ .tab-item {
245
+ flex: 1;
246
+ display: flex;
247
+ flex-direction: column;
248
+ align-items: center;
249
+ gap: 4px;
250
+ padding: 8px 4px;
251
+ text-decoration: none;
252
+ color: #9ca3af;
253
+ transition: color 0.15s;
254
+ }
255
+
256
+ .tab-item--active {
257
+ color: var(--color-primary);
258
+ }
259
+
260
+ .tab-item__icon {
261
+ font-size: 1.25rem;
262
+ }
263
+
264
+ .tab-item__label {
265
+ font-size: 0.6875rem;
266
+ font-weight: 600;
267
+ }
package/templates/projects/mobile/pages/home/home.html ADDED
@@ -0,0 +1,110 @@
1
+ <div class="app">
2
+ <!-- App Header -->
3
+ <header class="app-header">
4
+ <button class="app-header__menu" aria-label="Menu">&#9776;</button>
5
+ <h1 class="app-header__title">Home</h1>
6
+ <button class="app-header__action" aria-label="Notifications">&#128276;</button>
7
+ </header>
8
+
9
+ <!-- Scrollable Content -->
10
+ <main class="app-content">
11
+ <!-- Greeting -->
12
+ <div class="greeting">
13
+ <p class="greeting__sub">Good morning,</p>
14
+ <h2 class="greeting__name">Alex</h2>
15
+ </div>
16
+
17
+ <!-- Summary Card -->
18
+ <div class="summary-card">
19
+ <p class="summary-card__label">Total Balance</p>
20
+ <p class="summary-card__value">$2,450.00</p>
21
+ <div class="summary-card__row">
22
+ <div class="summary-card__stat">
23
+ <span class="summary-card__stat-icon summary-card__stat-icon--up">&#8593;</span>
24
+ <span class="summary-card__stat-label">Income</span>
25
+ <span class="summary-card__stat-val">$3,200</span>
26
+ </div>
27
+ <div class="summary-card__divider"></div>
28
+ <div class="summary-card__stat">
29
+ <span class="summary-card__stat-icon summary-card__stat-icon--down">&#8595;</span>
30
+ <span class="summary-card__stat-label">Expenses</span>
31
+ <span class="summary-card__stat-val">$750</span>
32
+ </div>
33
+ </div>
34
+ </div>
35
+
36
+ <!-- Quick Actions -->
37
+ <div class="quick-actions">
38
+ <button class="quick-action">
39
+ <span class="quick-action__icon">&#128197;</span>
40
+ <span class="quick-action__label">Schedule</span>
41
+ </button>
42
+ <button class="quick-action">
43
+ <span class="quick-action__icon">&#128200;</span>
44
+ <span class="quick-action__label">Stats</span>
45
+ </button>
46
+ <button class="quick-action">
47
+ <span class="quick-action__icon">&#128179;</span>
48
+ <span class="quick-action__label">Pay</span>
49
+ </button>
50
+ <button class="quick-action">
51
+ <span class="quick-action__icon">&#9881;</span>
52
+ <span class="quick-action__label">Settings</span>
53
+ </button>
54
+ </div>
55
+
56
+ <!-- Recent Activity -->
57
+ <div class="section">
58
+ <div class="section__header">
59
+ <h3 class="section__title">Recent Activity</h3>
60
+ <a href="#" class="section__link">See all</a>
61
+ </div>
62
+ <div class="activity-list">
63
+ <div class="activity-item">
64
+ <div class="activity-item__icon">&#127829;</div>
65
+ <div class="activity-item__info">
66
+ <p class="activity-item__name">Food &amp; Dining</p>
67
+ <p class="activity-item__date">Today, 12:30 PM</p>
68
+ </div>
69
+ <p class="activity-item__amount activity-item__amount--neg">-$24.50</p>
70
+ </div>
71
+ <div class="activity-item">
72
+ <div class="activity-item__icon">&#128188;</div>
73
+ <div class="activity-item__info">
74
+ <p class="activity-item__name">Salary Deposit</p>
75
+ <p class="activity-item__date">Yesterday</p>
76
+ </div>
77
+ <p class="activity-item__amount activity-item__amount--pos">+$3,200</p>
78
+ </div>
79
+ <div class="activity-item">
80
+ <div class="activity-item__icon">&#128722;</div>
81
+ <div class="activity-item__info">
82
+ <p class="activity-item__name">Online Shopping</p>
83
+ <p class="activity-item__date">Jan 9, 2025</p>
84
+ </div>
85
+ <p class="activity-item__amount activity-item__amount--neg">-$89.00</p>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </main>
90
+
91
+ <!-- Tab Bar -->
92
+ <nav class="tab-bar">
93
+ <a href="#" class="tab-item tab-item--active">
94
+ <span class="tab-item__icon">&#9632;</span>
95
+ <span class="tab-item__label">Home</span>
96
+ </a>
97
+ <a href="#" class="tab-item">
98
+ <span class="tab-item__icon">&#128200;</span>
99
+ <span class="tab-item__label">Stats</span>
100
+ </a>
101
+ <a href="#" class="tab-item">
102
+ <span class="tab-item__icon">&#128179;</span>
103
+ <span class="tab-item__label">Pay</span>
104
+ </a>
105
+ <a href="#" class="tab-item">
106
+ <span class="tab-item__icon">&#128101;</span>
107
+ <span class="tab-item__label">Profile</span>
108
+ </a>
109
+ </nav>
110
+ </div>