konpeki 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 (34) hide show
  1. package/.agents/skills/authoring-visuals/SKILL.md +12 -1
  2. package/README.md +4 -4
  3. package/composition/README.md +26 -49
  4. package/composition/compile.ts +1 -1
  5. package/composition/document.ts +2 -111
  6. package/composition/schema.json +3 -3
  7. package/composition/schema.ts +1 -1
  8. package/composition/types.ts +1 -20
  9. package/composition/validate.ts +3 -461
  10. package/composition/visualizations.ts +0 -16
  11. package/docs/development.md +4 -0
  12. package/docs/workflow.md +49 -7
  13. package/package.json +3 -1
  14. package/runtime/konpeki.mjs +182 -460
  15. package/slides/introducing-konpeki/composition.json +1740 -1735
  16. package/src/app/App.tsx +92 -18
  17. package/src/components/BuildOrb.tsx +40 -0
  18. package/src/components/Canvas.tsx +17 -0
  19. package/src/components/InspectorPanel.tsx +37 -3
  20. package/src/components/LeftPanel.tsx +16 -3
  21. package/src/components/RevisionNotes.tsx +56 -0
  22. package/src/components/WorkspaceChrome.tsx +6 -6
  23. package/src/lib/examples/react-page-migration.json +1 -1
  24. package/src/lib/export-png.ts +4 -1
  25. package/src/lib/file-session.ts +14 -1
  26. package/src/lib/review.ts +26 -0
  27. package/src/lib/use-file-session.ts +49 -13
  28. package/src/styles/base.css +16 -0
  29. package/src/styles/canvas.css +43 -12
  30. package/src/styles/chrome.css +78 -28
  31. package/src/styles/feedback.css +19 -1
  32. package/src/styles/left-panel.css +48 -7
  33. package/src/styles/right-panel.css +62 -20
  34. package/src/styles/shell.css +41 -26
package/src/styles/right-panel.css CHANGED
@@ -67,13 +67,50 @@
67
67
  }
68
68
 
69
69
  .vector-actions {
70
- display: flex;
71
- flex-wrap: wrap;
70
+ display: grid;
71
+ grid-template-columns: repeat(3, minmax(0, 1fr));
72
72
  gap: 6px;
73
73
  }
74
74
 
75
75
  .vector-actions button {
76
+ display: inline-flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ gap: 6px;
80
+ min-width: 0;
81
+ min-height: 40px;
82
+ padding: 7px 6px;
83
+ border-color: transparent;
84
+ border-radius: 8px;
85
+ background: #f4f4f5;
76
86
  font-size: 11px;
87
+ white-space: nowrap;
88
+ }
89
+
90
+ .vector-actions button:hover:not(:disabled) {
91
+ border-color: transparent;
92
+ background: #e9e9eb;
93
+ }
94
+
95
+ .vector-action-icon {
96
+ flex: none;
97
+ width: 16px;
98
+ height: 16px;
99
+ fill: none;
100
+ stroke: currentColor;
101
+ stroke-linecap: round;
102
+ stroke-linejoin: round;
103
+ stroke-width: 1.5;
104
+ }
105
+
106
+ .vector-actions .vector-delete-action {
107
+ background: #fff1f1;
108
+ color: #9d2020;
109
+ }
110
+
111
+ .vector-actions .vector-delete-action:hover:not(:disabled) {
112
+ background: #ffe3e3;
113
+ color: #841919;
77
114
  }
78
115
 
79
116
  .vector-attributes {
@@ -106,7 +143,7 @@
106
143
 
107
144
  .segmented-options button {
108
145
  min-width: 0;
109
- min-height: 30px;
146
+ min-height: 40px;
110
147
  padding: 5px 7px;
111
148
  border: 1px solid transparent;
112
149
  border-radius: 5px;
@@ -121,10 +158,10 @@
121
158
  }
122
159
 
123
160
  .segmented-options button.selected {
124
- background: white;
125
- border-color: #e5e5e7;
126
- box-shadow: 0 1px 3px #00000012;
127
- color: var(--ui-text);
161
+ background: var(--ui-selected);
162
+ border-color: color-mix(in srgb, var(--accent) 45%, white);
163
+ box-shadow: none;
164
+ color: #006aa1;
128
165
  }
129
166
 
130
167
  .inspector-content .slide-settings-heading {
@@ -153,9 +190,9 @@
153
190
  }
154
191
 
155
192
  .theme-options button.selected {
156
- border-color: #86868b;
157
- background: #f4f4f5;
158
- box-shadow: inset 0 0 0 1px #86868b;
193
+ border-color: color-mix(in srgb, var(--accent) 45%, white);
194
+ background: var(--ui-selected);
195
+ box-shadow: none;
159
196
  }
160
197
 
161
198
  .theme-options button > span:first-child {
@@ -218,7 +255,7 @@
218
255
  display: grid;
219
256
  grid-template-columns: 16px minmax(0, 1fr) auto;
220
257
  align-items: center;
221
- min-height: 42px;
258
+ min-height: 48px;
222
259
  border: 1px solid transparent;
223
260
  border-radius: 6px;
224
261
  background: #fafafa;
@@ -267,7 +304,7 @@
267
304
 
268
305
  .layer-select span {
269
306
  color: var(--ui-muted);
270
- font-size: 9px;
307
+ font-size: 10px;
271
308
  }
272
309
 
273
310
  .layer-actions {
@@ -276,8 +313,8 @@
276
313
  }
277
314
 
278
315
  .layer-actions button {
279
- width: 20px;
280
- height: 26px;
316
+ width: 40px;
317
+ height: 40px;
281
318
  padding: 0;
282
319
  border: 0;
283
320
  background: transparent;
@@ -299,6 +336,10 @@
299
336
  }
300
337
 
301
338
  .inspector-context button {
339
+ display: inline-flex;
340
+ align-items: center;
341
+ min-width: 40px;
342
+ min-height: 40px;
302
343
  padding: 0;
303
344
  border: 0;
304
345
  background: transparent;
@@ -361,9 +402,9 @@
361
402
  }
362
403
 
363
404
  .appearance-options button.selected {
364
- border-color: #86868b;
365
- background: #f4f4f5;
366
- box-shadow: inset 0 0 0 1px #86868b;
405
+ border-color: color-mix(in srgb, var(--accent) 45%, white);
406
+ background: var(--ui-selected);
407
+ box-shadow: none;
367
408
  }
368
409
 
369
410
  .appearance-options button:disabled {
@@ -1078,8 +1119,8 @@ legend {
1078
1119
  }
1079
1120
 
1080
1121
  .diagram-type-category button.selected {
1081
- border-color: #86868b;
1082
- background: #f4f4f5;
1122
+ border-color: color-mix(in srgb, var(--accent) 45%, white);
1123
+ background: var(--ui-selected);
1083
1124
  }
1084
1125
 
1085
1126
  .diagram-type-category button > span {
@@ -1130,6 +1171,7 @@ legend {
1130
1171
  }
1131
1172
 
1132
1173
  .right-panel :is(input, select, textarea) {
1174
+ min-height: 40px;
1133
1175
  border-color: transparent;
1134
1176
  border-radius: 6px;
1135
1177
  background: #f4f4f5;
@@ -1146,7 +1188,7 @@ legend {
1146
1188
  }
1147
1189
 
1148
1190
  .parameter-input input {
1149
- min-height: 34px;
1191
+ min-height: 40px;
1150
1192
  padding-right: 32px;
1151
1193
  appearance: textfield;
1152
1194
  }
package/src/styles/shell.css CHANGED
@@ -14,7 +14,6 @@
14
14
  position: relative;
15
15
  height: 100dvh;
16
16
  min-height: 100dvh;
17
- min-width: 1000px;
18
17
  overflow: hidden;
19
18
  background: var(--ui-bg);
20
19
  }
@@ -31,7 +30,7 @@
31
30
  box-shadow: var(--ui-shadow);
32
31
  }
33
32
  .left-panel {
34
- top: 76px;
33
+ top: 80px;
35
34
  bottom: 148px;
36
35
  left: 20px;
37
36
  width: 252px;
@@ -47,7 +46,7 @@
47
46
  right: 20px;
48
47
  display: flex;
49
48
  flex-direction: column;
50
- width: 328px;
49
+ width: min(328px, calc(100vw - 40px));
51
50
  overflow: hidden;
52
51
  }
53
52
  .right-panel.collapsed {
@@ -103,8 +102,8 @@
103
102
  }
104
103
  .panel-toggle {
105
104
  flex: none;
106
- width: 30px;
107
- height: 30px;
105
+ width: 40px;
106
+ height: 40px;
108
107
  padding: 0;
109
108
  border: 0;
110
109
  border-radius: 6px;
@@ -157,9 +156,6 @@
157
156
  justify-content: flex-start;
158
157
  gap: 20px;
159
158
  }
160
- .left-panel .panel-tabs {
161
- gap: 4px;
162
- }
163
159
  .left-panel .panel-tabs button {
164
160
  padding-inline: 1px;
165
161
  font-size: 12px;
@@ -181,7 +177,7 @@
181
177
  }
182
178
  .panel-tabs button.active {
183
179
  background: transparent;
184
- color: var(--ui-text);
180
+ color: #006aa1;
185
181
  box-shadow: none;
186
182
  }
187
183
  .panel-tabs button.active::after {
@@ -190,7 +186,7 @@
190
186
  bottom: -1px;
191
187
  left: 0;
192
188
  height: 2px;
193
- background: var(--ui-text);
189
+ background: var(--accent);
194
190
  content: "";
195
191
  }
196
192
  .stage {
@@ -212,24 +208,29 @@
212
208
  display: contents;
213
209
  }
214
210
  .is-building .canvas {
215
- opacity: 0.25;
216
- filter: blur(2px);
211
+ opacity: 0.18;
212
+ filter: none;
217
213
  }
218
214
  .build-loading {
219
- z-index: 20;
215
+ z-index: 45;
220
216
  pointer-events: none;
221
217
  }
222
218
  .build-loading-card {
219
+ pointer-events: auto;
223
220
  display: grid;
224
221
  gap: 10px;
225
222
  width: min(320px, 100%);
226
223
  padding: 24px;
227
224
  border: 1px solid var(--ui-border);
228
- border-radius: 14px;
225
+ border-radius: 16px;
229
226
  background: var(--ui-surface);
230
227
  box-shadow: var(--ui-shadow);
231
228
  text-align: center;
232
229
  }
230
+ .build-loading-card button {
231
+ min-height: 40px;
232
+ border-radius: 8px;
233
+ }
233
234
  .build-loading-card strong {
234
235
  font-size: 14px;
235
236
  font-weight: 500;
@@ -239,13 +240,20 @@
239
240
  line-height: 1.5;
240
241
  color: var(--ui-muted);
241
242
  }
242
- .build-loading-track {
243
+ .build-nebula {
243
244
  position: relative;
244
- overflow: hidden;
245
- height: 3px;
246
- margin-bottom: 8px;
247
- border-radius: 2px;
248
- background: linear-gradient(90deg, #155e75, #2449aa, #7535a5, #a82d62);
245
+ width: 88px;
246
+ height: 88px;
247
+ margin: -4px auto 4px;
248
+ }
249
+ .build-nebula::before {
250
+ content: "";
251
+ position: absolute;
252
+ inset: 14px;
253
+ border-radius: 50%;
254
+ background: conic-gradient(from 45deg, #77d3ed70, #b994dc60, #729fec50, #77d3ed70);
255
+ filter: blur(10px);
256
+ animation: orb-turn 12s linear infinite reverse;
249
257
  }
250
258
  .slide-wrap {
251
259
  width: 100%;
@@ -253,7 +261,7 @@
253
261
  }
254
262
  .stage-meta {
255
263
  display: flex;
256
- align-items: baseline;
264
+ align-items: center;
257
265
  justify-content: space-between;
258
266
  gap: 16px;
259
267
  min-height: 26px;
@@ -261,8 +269,8 @@
261
269
  }
262
270
  .edit-elements-action {
263
271
  flex-shrink: 0;
264
- min-height: 26px;
265
- padding: 3px 8px;
272
+ min-height: 40px;
273
+ padding: 7px 10px;
266
274
  font-size: 12px;
267
275
  }
268
276
  .stage-meta h2 {
@@ -274,13 +282,20 @@
274
282
  }
275
283
  .stage-meta input {
276
284
  width: min(240px, 100%);
277
- height: 26px;
278
- padding: 3px 6px;
285
+ height: 40px;
286
+ padding: 7px 9px;
279
287
  font-size: 12px;
280
288
  }
281
289
  @media (max-width: 1200px) {
282
290
  .stage {
283
- padding-right: 352px;
291
+ padding-right: 96px;
284
292
  padding-left: 276px;
285
293
  }
286
294
  }
295
+ @media (max-width: 900px) {
296
+ .workspace.left-collapsed .stage,
297
+ .workspace.right-collapsed .stage,
298
+ .workspace.left-collapsed.right-collapsed .stage {
299
+ padding: 96px 16px 110px;
300
+ }
301
+ }