konpeki 0.3.0 → 0.3.1

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 (30) hide show
  1. package/README.md +56 -39
  2. package/SETUP.md +35 -19
  3. package/docs/development.md +11 -3
  4. package/package.json +3 -1
  5. package/plugin.json +1 -1
  6. package/skills/konpeki/scripts/ensure-runtime.mjs +1 -1
  7. package/slides/README.md +35 -132
  8. package/slides/drawing-references.md +32 -0
  9. package/slides/github-cover/PROMPT.md +21 -0
  10. package/slides/github-cover/README.md +21 -0
  11. package/slides/github-cover/author.ts +67 -0
  12. package/slides/github-cover/composition.json +595 -0
  13. package/slides/introducing-konpeki/PROMPT.md +20 -30
  14. package/slides/introducing-konpeki/README.md +28 -60
  15. package/slides/introducing-konpeki/SOURCE.md +13 -20
  16. package/src/app/App.tsx +63 -38
  17. package/src/components/Canvas.tsx +8 -2
  18. package/src/components/InspectorPanel.tsx +11 -27
  19. package/src/components/RevisionNotes.tsx +6 -7
  20. package/src/components/RightPanel.tsx +42 -10
  21. package/src/components/VectorOverflowWarning.tsx +35 -8
  22. package/src/components/WorkspaceChrome.tsx +57 -29
  23. package/src/components/ui.tsx +95 -1
  24. package/src/lib/use-file-session.ts +60 -38
  25. package/src/styles/base.css +7 -0
  26. package/src/styles/chrome.css +103 -12
  27. package/src/styles/feedback.css +96 -61
  28. package/src/styles/left-panel.css +27 -6
  29. package/src/styles/right-panel.css +86 -3
  30. package/src/styles/shell.css +43 -11
package/src/styles/shell.css CHANGED
@@ -1,3 +1,6 @@
1
+ :root {
2
+ --panel-top: 20px;
3
+ }
1
4
  .skip-link {
2
5
  position: fixed;
3
6
  top: -60px;
@@ -23,8 +26,8 @@
23
26
  .left-sidebar,
24
27
  .right-panel {
25
28
  position: fixed;
26
- top: 20px;
27
- height: calc(100dvh - 112px);
29
+ top: var(--panel-top);
30
+ height: calc(100dvh - 92px - var(--panel-top));
28
31
  width: var(--panel-width);
29
32
  z-index: 30;
30
33
  display: flex;
@@ -32,11 +35,12 @@
32
35
  overflow: hidden;
33
36
  background: var(--ui-surface);
34
37
  min-height: 0;
35
- border: 1px solid var(--ui-border);
38
+ border: 1px solid transparent;
36
39
  border-radius: 12px;
37
- box-shadow: var(--ui-shadow);
40
+ box-shadow: var(--ui-floating-shadow);
38
41
  transition: width var(--panel-duration) var(--panel-easing),
39
- height var(--panel-duration) var(--panel-easing);
42
+ height var(--panel-duration) var(--panel-easing),
43
+ top var(--panel-duration) var(--panel-easing);
40
44
  }
41
45
  .left-sidebar {
42
46
  --panel-width: 252px;
@@ -44,6 +48,7 @@
44
48
  z-index: 40;
45
49
  }
46
50
  .left-sidebar.collapsed {
51
+ top: 20px;
47
52
  width: 107px;
48
53
  height: calc(var(--panel-header-height) + 2px);
49
54
  }
@@ -55,17 +60,16 @@
55
60
  right: 20px;
56
61
  }
57
62
  .right-panel.collapsed {
63
+ top: 20px;
58
64
  width: 50px;
59
65
  height: calc(var(--panel-header-height) + 2px);
60
66
  }
61
67
  .right-panel.collapsed > .panel-toolbar {
62
68
  gap: 0;
69
+ grid-template-columns: minmax(0, 1fr) 0 40px;
63
70
  padding: 0 4px;
64
71
  border-bottom-color: transparent;
65
72
  }
66
- .right-panel.collapsed .panel-tabs {
67
- visibility: hidden;
68
- }
69
73
  .left-panel,
70
74
  .right-panel-body {
71
75
  width: calc(var(--panel-width) - 2px);
@@ -78,12 +82,28 @@
78
82
  .right-panel-body {
79
83
  align-self: flex-end;
80
84
  }
85
+ .right-panel > .panel-toolbar > .panel-tabs {
86
+ clip-path: inset(-4px 0);
87
+ }
88
+ .right-panel .panel-tabs button:focus-visible {
89
+ outline-offset: -3px;
90
+ }
91
+ .document-title,
92
+ .document-title-error,
93
+ .file-status,
94
+ .right-panel > .panel-toolbar > .panel-tabs,
95
+ .right-panel > .panel-toolbar > .overflow-control,
81
96
  .left-panel,
82
97
  .action-island,
83
98
  .right-panel-body {
84
99
  transition: opacity var(--panel-duration) var(--panel-easing),
85
100
  visibility 0s;
86
101
  }
102
+ .left-collapsed .document-title,
103
+ .left-collapsed .document-title-error,
104
+ .left-collapsed .file-status,
105
+ .right-panel.collapsed .panel-tabs,
106
+ .right-panel.collapsed .overflow-control,
87
107
  .left-panel.collapsed,
88
108
  .left-collapsed .action-island,
89
109
  .right-panel.collapsed .right-panel-body {
@@ -110,12 +130,14 @@
110
130
  .right-panel > .panel-toolbar {
111
131
  flex: none;
112
132
  display: grid;
113
- grid-template-columns: minmax(0, 1fr) 40px;
133
+ grid-template-columns: minmax(0, 1fr) 48px 40px;
114
134
  height: var(--panel-header-height);
115
135
  padding: 0 8px 0 12px;
116
136
  overflow: hidden;
117
137
  transition: padding var(--panel-duration) var(--panel-easing),
118
- gap var(--panel-duration) var(--panel-easing);
138
+ gap var(--panel-duration) var(--panel-easing),
139
+ grid-template-columns var(--panel-duration) var(--panel-easing),
140
+ border-bottom-color var(--panel-duration) var(--panel-easing);
119
141
  }
120
142
  .panel-heading {
121
143
  flex: 1;
@@ -289,7 +311,7 @@
289
311
  align-items: center;
290
312
  justify-content: space-between;
291
313
  gap: 16px;
292
- min-height: 26px;
314
+ height: 40px;
293
315
  margin: 0 0 12px;
294
316
  }
295
317
  .edit-elements-action {
@@ -299,10 +321,14 @@
299
321
  font-size: 12px;
300
322
  }
301
323
  .stage-meta h2 {
324
+ min-width: 0;
325
+ overflow: hidden;
302
326
  font-size: 12px;
303
327
  font-weight: 500;
304
328
  color: var(--ui-muted);
305
329
  margin: 0;
330
+ text-overflow: ellipsis;
331
+ white-space: nowrap;
306
332
  cursor: text;
307
333
  }
308
334
  .stage-meta input {
@@ -325,6 +351,12 @@
325
351
  }
326
352
  }
327
353
 
354
+ @media (max-width: 600px) {
355
+ :root {
356
+ --panel-top: 88px;
357
+ }
358
+ }
359
+
328
360
  @media (prefers-reduced-motion: reduce) {
329
361
  .workspace {
330
362
  --panel-duration: 0ms;