konpeki 0.3.0 → 0.4.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 (162) hide show
  1. package/AGENTS.md +21 -28
  2. package/AUTHORING.md +68 -229
  3. package/CONTRIBUTING.md +10 -23
  4. package/README.md +96 -87
  5. package/SETUP.md +50 -114
  6. package/docs/development.md +43 -248
  7. package/docs/workflow.md +6 -108
  8. package/html/README.md +140 -0
  9. package/html/browser.ts +103 -0
  10. package/html/document.ts +38 -0
  11. package/html/floor.ts +34 -0
  12. package/html/index.html +5 -0
  13. package/html/inspect.ts +313 -0
  14. package/html/preview.css +62 -0
  15. package/html/preview.tsx +463 -0
  16. package/html/review-hints.ts +63 -0
  17. package/html/server.ts +99 -0
  18. package/html/source.ts +104 -0
  19. package/html/starter.ts +6 -0
  20. package/html/theme-authoring.md +176 -0
  21. package/html/theme.md +61 -0
  22. package/index.html +9 -9
  23. package/package.json +21 -35
  24. package/plugin.json +1 -1
  25. package/public/og.png +0 -0
  26. package/runtime/browser-B-29TH1a.mjs +595 -0
  27. package/runtime/floor-Cmk7G3pU.mjs +41 -0
  28. package/runtime/konpeki.mjs +90 -1410
  29. package/runtime/server-BAqC_5WD.mjs +2 -0
  30. package/runtime/server-DfRpfcY9.mjs +205 -0
  31. package/runtime/source-B_Ui9tMp.mjs +141 -0
  32. package/runtime/source-CZQq9GUO.mjs +2 -0
  33. package/skills/konpeki/SKILL.md +88 -172
  34. package/skills/konpeki/assets/blank.html +17 -0
  35. package/skills/konpeki/floor.md +76 -0
  36. package/skills/konpeki/references/cover.md +27 -0
  37. package/skills/konpeki/references/long-document.md +40 -0
  38. package/skills/konpeki/references/one-pager.md +27 -0
  39. package/skills/konpeki/references/patterns.md +118 -0
  40. package/skills/konpeki/references/resume.md +28 -0
  41. package/skills/konpeki/references/slides.md +28 -0
  42. package/skills/konpeki/scripts/ensure-runtime.mjs +10 -31
  43. package/skills/konpeki/scripts/prepare-document.mjs +25 -14
  44. package/src/components/PageBoard.tsx +156 -0
  45. package/src/lib/alignment.ts +21 -0
  46. package/src/lib/page-board.ts +25 -0
  47. package/src/lib/review-position.ts +19 -0
  48. package/src/styles/base.css +4 -6
  49. package/src/styles/feedback.css +97 -61
  50. package/src/styles/shell.css +95 -323
  51. package/theme-base.css +90 -0
  52. package/theme.css +56 -0
  53. package/vite.config.ts +2 -5
  54. package/composition/README.md +0 -156
  55. package/composition/compile.ts +0 -227
  56. package/composition/document.ts +0 -600
  57. package/composition/schema.json +0 -3001
  58. package/composition/schema.ts +0 -437
  59. package/composition/theme-tokens.ts +0 -16
  60. package/composition/types.ts +0 -269
  61. package/composition/validate.ts +0 -226
  62. package/composition/vector.ts +0 -143
  63. package/composition/visualizations.ts +0 -319
  64. package/design/README.md +0 -17
  65. package/design/palettes/README.md +0 -14
  66. package/design/palettes/base.ts +0 -14
  67. package/design/palettes/candidates.ts +0 -19
  68. package/design/palettes/index.ts +0 -78
  69. package/design/review/color-theme.md +0 -44
  70. package/design/review/layout.md +0 -16
  71. package/design/review/text.md +0 -18
  72. package/design/review/typography.md +0 -15
  73. package/design/review/visuals.md +0 -31
  74. package/design/semantic-patterns.md +0 -43
  75. package/design/themes/README.md +0 -40
  76. package/design/themes/index.ts +0 -24
  77. package/design/visual-languages/technical-product.md +0 -17
  78. package/design/visual-review.md +0 -88
  79. package/lib/assets.d.ts +0 -8
  80. package/lib/charts.ts +0 -18
  81. package/lib/contrast.ts +0 -16
  82. package/lib/layouts.ts +0 -50
  83. package/lib/slide.tsx +0 -42
  84. package/lib/taste.ts +0 -17
  85. package/lib/text.tsx +0 -89
  86. package/lib/typeface.ts +0 -44
  87. package/scripts/migrate-react-page.ts +0 -120
  88. package/skills/konpeki/assets/blank.json +0 -23
  89. package/slides/README.md +0 -153
  90. package/slides/architecture/PROMPT.md +0 -31
  91. package/slides/architecture/index.tsx +0 -102
  92. package/slides/article-brief/PROMPT.md +0 -35
  93. package/slides/article-brief/index.tsx +0 -71
  94. package/slides/bar-chart/PROMPT.md +0 -39
  95. package/slides/bar-chart/index.tsx +0 -97
  96. package/slides/comparison/PROMPT.md +0 -29
  97. package/slides/comparison/index.tsx +0 -95
  98. package/slides/decision-memo/PROMPT.md +0 -34
  99. package/slides/decision-memo/index.tsx +0 -85
  100. package/slides/delivery-plan/PROMPT.md +0 -45
  101. package/slides/delivery-plan/index.tsx +0 -105
  102. package/slides/experiment/PROMPT.md +0 -44
  103. package/slides/experiment/index.tsx +0 -127
  104. package/slides/incident-workflow/PROMPT.md +0 -57
  105. package/slides/incident-workflow/index.tsx +0 -78
  106. package/slides/introducing-konpeki/PROMPT.md +0 -40
  107. package/slides/introducing-konpeki/README.md +0 -76
  108. package/slides/introducing-konpeki/SOURCE.md +0 -26
  109. package/slides/introducing-konpeki/author.ts +0 -165
  110. package/slides/introducing-konpeki/composition.json +0 -3270
  111. package/slides/line-chart/PROMPT.md +0 -40
  112. package/slides/line-chart/index.tsx +0 -72
  113. package/slides/migration/PROMPT.md +0 -38
  114. package/slides/migration/index.tsx +0 -89
  115. package/slides/og-images/PROMPT.md +0 -21
  116. package/slides/og-images/index.tsx +0 -76
  117. package/slides/product-introduction/PROMPT.md +0 -24
  118. package/slides/product-introduction/index.tsx +0 -105
  119. package/slides/research-brief/PROMPT.md +0 -40
  120. package/slides/research-brief/index.tsx +0 -104
  121. package/slides/results-explanation/PROMPT.md +0 -32
  122. package/slides/results-explanation/index.tsx +0 -96
  123. package/slides/retrospective/PROMPT.md +0 -43
  124. package/slides/retrospective/index.tsx +0 -105
  125. package/slides/sankey/PROMPT.md +0 -11
  126. package/slides/sankey/index.tsx +0 -93
  127. package/slides/teaching/PROMPT.md +0 -45
  128. package/slides/teaching/index.tsx +0 -124
  129. package/slides/vertical-bar-charts/PROMPT.md +0 -13
  130. package/slides/vertical-bar-charts/index.tsx +0 -97
  131. package/src/app/App.tsx +0 -820
  132. package/src/components/BuildOrb.tsx +0 -40
  133. package/src/components/Canvas.tsx +0 -1185
  134. package/src/components/DiagramTypeIcon.tsx +0 -78
  135. package/src/components/InspectorPanel.tsx +0 -773
  136. package/src/components/LeftPanel.tsx +0 -120
  137. package/src/components/PageSizePicker.tsx +0 -30
  138. package/src/components/Presentation.tsx +0 -105
  139. package/src/components/RevisionNotes.tsx +0 -56
  140. package/src/components/RightPanel.tsx +0 -201
  141. package/src/components/VectorOverflowWarning.tsx +0 -46
  142. package/src/components/WorkspaceChrome.tsx +0 -288
  143. package/src/components/ui.tsx +0 -53
  144. package/src/lib/examples/react-page-migration.json +0 -1295
  145. package/src/lib/examples.ts +0 -42
  146. package/src/lib/export-png.ts +0 -104
  147. package/src/lib/file-session.ts +0 -87
  148. package/src/lib/history.ts +0 -53
  149. package/src/lib/model.ts +0 -188
  150. package/src/lib/page-size.ts +0 -24
  151. package/src/lib/presentation.ts +0 -17
  152. package/src/lib/review.ts +0 -26
  153. package/src/lib/storage.ts +0 -71
  154. package/src/lib/theme.ts +0 -25
  155. package/src/lib/use-file-session.ts +0 -227
  156. package/src/main.tsx +0 -29
  157. package/src/styles/canvas.css +0 -299
  158. package/src/styles/chrome.css +0 -384
  159. package/src/styles/component-previews.css +0 -386
  160. package/src/styles/left-panel.css +0 -166
  161. package/src/styles/presentation.css +0 -72
  162. package/src/styles/right-panel.css +0 -1215
@@ -1,319 +0,0 @@
1
- export type DiagramLayoutEngine =
2
- | "linear"
3
- | "branching"
4
- | "cyclical"
5
- | "layered"
6
- | "request-flow"
7
- | "hub-and-spoke";
8
-
9
- export type DiagramDefinition = {
10
- label: string;
11
- category:
12
- | "Systems & technical structure"
13
- | "Flow, interaction & behavior"
14
- | "Data & software modeling"
15
- | "Hierarchy, containment & organization"
16
- | "Time & work"
17
- | "Quantitative & analytical"
18
- | "Conceptual & strategic";
19
- layout: DiagramLayoutEngine;
20
- slotRole: "process-step" | "entity";
21
- expression: string;
22
- };
23
-
24
- export type ChartDefinition = {
25
- label: string;
26
- expression: string;
27
- source: "diagram-design" | "konpeki";
28
- };
29
-
30
- export const diagramDefinitions = {
31
- architecture: {
32
- label: "Architecture",
33
- category: "Systems & technical structure",
34
- layout: "hub-and-spoke",
35
- slotRole: "entity",
36
- expression: "Show system boundaries, responsibilities, interfaces, and directional communication without implying physical deployment.",
37
- },
38
- "it-current-state": {
39
- label: "IT current state",
40
- category: "Systems & technical structure",
41
- layout: "hub-and-spoke",
42
- slotRole: "entity",
43
- expression: "Show the systems that exist today, their ownership, integration paths, friction, duplication, and known constraints.",
44
- },
45
- "high-level": {
46
- label: "High-level overview",
47
- category: "Systems & technical structure",
48
- layout: "layered",
49
- slotRole: "entity",
50
- expression: "Reduce the system to a small number of named capabilities and major relationships; suppress implementation detail.",
51
- },
52
- deployment: {
53
- label: "Deployment",
54
- category: "Systems & technical structure",
55
- layout: "layered",
56
- slotRole: "entity",
57
- expression: "Place software artifacts inside the environments, hosts, zones, or runtimes where they execute and show cross-zone communication.",
58
- },
59
- flowchart: {
60
- label: "Flowchart",
61
- category: "Flow, interaction & behavior",
62
- layout: "branching",
63
- slotRole: "process-step",
64
- expression: "Distinguish actions, decisions, merge points, and start or end states; label decision branches explicitly.",
65
- },
66
- sequence: {
67
- label: "Sequence",
68
- category: "Flow, interaction & behavior",
69
- layout: "request-flow",
70
- slotRole: "entity",
71
- expression: "Order actors horizontally and messages vertically through time; distinguish calls, returns, asynchronous messages, and branches.",
72
- },
73
- "state-machine": {
74
- label: "State machine",
75
- category: "Flow, interaction & behavior",
76
- layout: "branching",
77
- slotRole: "entity",
78
- expression: "Treat nodes as legal states and edges as guarded transitions; preserve initial, terminal, retry, and invalid transition semantics.",
79
- },
80
- swimlane: {
81
- label: "Swimlane",
82
- category: "Flow, interaction & behavior",
83
- layout: "layered",
84
- slotRole: "process-step",
85
- expression: "Partition steps by responsible actor or team and make every cross-lane handoff visible.",
86
- },
87
- process: {
88
- label: "Process",
89
- category: "Flow, interaction & behavior",
90
- layout: "linear",
91
- slotRole: "process-step",
92
- expression: "Show ordered work from trigger to outcome, including branches, loops, owners, and exceptional paths when supplied.",
93
- },
94
- "data-flow": {
95
- label: "Data flow",
96
- category: "Flow, interaction & behavior",
97
- layout: "hub-and-spoke",
98
- slotRole: "entity",
99
- expression: "Show data producers, transformations, stores, and consumers; label payloads and direction independently from control flow.",
100
- },
101
- "dp-integration": {
102
- label: "Data-product integration",
103
- category: "Flow, interaction & behavior",
104
- layout: "request-flow",
105
- slotRole: "entity",
106
- expression: "Show producer and consumer responsibilities, contracts, integration boundaries, and exchange direction for each data product.",
107
- },
108
- "er-data-model": {
109
- label: "ER / data model",
110
- category: "Data & software modeling",
111
- layout: "hub-and-spoke",
112
- slotRole: "entity",
113
- expression: "Represent entities with key attributes and label relationship cardinality and optionality at both endpoints.",
114
- },
115
- medallion: {
116
- label: "Medallion",
117
- category: "Data & software modeling",
118
- layout: "layered",
119
- slotRole: "entity",
120
- expression: "Arrange data products by progressive quality tier and show transformations from raw through refined to consumption-ready data.",
121
- },
122
- "dp-security-matrix": {
123
- label: "Data-product security matrix",
124
- category: "Data & software modeling",
125
- layout: "layered",
126
- slotRole: "entity",
127
- expression: "Use rows and columns as explicit subject and resource axes; encode permissions or controls at their intersections.",
128
- },
129
- "dependency-graph": {
130
- label: "Dependency graph",
131
- category: "Data & software modeling",
132
- layout: "branching",
133
- slotRole: "entity",
134
- expression: "Preserve many-parent fan-in, shared dependencies, and cycles; orient every dependency edge consistently.",
135
- },
136
- "uml-class": {
137
- label: "UML class",
138
- category: "Data & software modeling",
139
- layout: "hub-and-spoke",
140
- slotRole: "entity",
141
- expression: "Keep class names, attributes, and operations in separate compartments and preserve inheritance, aggregation, and composition notation.",
142
- },
143
- "database-schema": {
144
- label: "Database schema",
145
- category: "Data & software modeling",
146
- layout: "hub-and-spoke",
147
- slotRole: "entity",
148
- expression: "Show tables with typed columns, keys, constraints, and column-level foreign-key endpoints.",
149
- },
150
- nested: {
151
- label: "Nested containment",
152
- category: "Hierarchy, containment & organization",
153
- layout: "layered",
154
- slotRole: "entity",
155
- expression: "Use enclosure to express scope and ownership; containment must not be replaced by proximity alone.",
156
- },
157
- tree: {
158
- label: "Tree",
159
- category: "Hierarchy, containment & organization",
160
- layout: "branching",
161
- slotRole: "entity",
162
- expression: "Show a strict one-parent hierarchy with consistent depth and sibling ordering.",
163
- },
164
- "org-chart": {
165
- label: "Org chart",
166
- category: "Hierarchy, containment & organization",
167
- layout: "branching",
168
- slotRole: "entity",
169
- expression: "Show reporting structure, role ownership, and escalation paths; do not imply technical dependency.",
170
- },
171
- "layer-stack": {
172
- label: "Layer stack",
173
- category: "Hierarchy, containment & organization",
174
- layout: "layered",
175
- slotRole: "entity",
176
- expression: "Order abstraction or responsibility layers consistently and show only legitimate cross-layer dependencies.",
177
- },
178
- "pyramid-funnel": {
179
- label: "Pyramid / funnel",
180
- category: "Hierarchy, containment & organization",
181
- layout: "layered",
182
- slotRole: "entity",
183
- expression: "Use width and vertical order to encode rank, concentration, or drop-off; state which meaning applies.",
184
- },
185
- timeline: {
186
- label: "Timeline",
187
- category: "Time & work",
188
- layout: "linear",
189
- slotRole: "process-step",
190
- expression: "Place dated events on an honest temporal axis and preserve meaningful interval differences.",
191
- },
192
- gantt: {
193
- label: "Gantt",
194
- category: "Time & work",
195
- layout: "layered",
196
- slotRole: "process-step",
197
- expression: "Encode task start, duration, overlap, milestones, dependencies, and ownership against a shared time scale.",
198
- },
199
- kanban: {
200
- label: "Kanban",
201
- category: "Time & work",
202
- layout: "layered",
203
- slotRole: "entity",
204
- expression: "Use columns as workflow states, preserve card ownership and priority, and show WIP limits when supplied.",
205
- },
206
- "user-journey": {
207
- label: "User journey",
208
- category: "Time & work",
209
- layout: "linear",
210
- slotRole: "process-step",
211
- expression: "Order experience stages and align actions, touchpoints, pain points, and sentiment to each stage.",
212
- },
213
- "story-map": {
214
- label: "Story map",
215
- category: "Time & work",
216
- layout: "layered",
217
- slotRole: "entity",
218
- expression: "Use columns for narrative activity order and rows for release slices; preserve the release-cut line.",
219
- },
220
- quadrant: {
221
- label: "Quadrant",
222
- category: "Quantitative & analytical",
223
- layout: "layered",
224
- slotRole: "entity",
225
- expression: "Position items against two named axes with meaningful scales and make quadrant interpretation explicit.",
226
- },
227
- "loop-flywheel": {
228
- label: "Loop / flywheel",
229
- category: "Conceptual & strategic",
230
- layout: "cyclical",
231
- slotRole: "process-step",
232
- expression: "Show a reinforcing cycle with explicit direction and explain how each stage increases momentum or feeds the next.",
233
- },
234
- venn: {
235
- label: "Venn",
236
- category: "Conceptual & strategic",
237
- layout: "hub-and-spoke",
238
- slotRole: "entity",
239
- expression: "Use overlapping regions to encode set membership and label every meaningful intersection.",
240
- },
241
- fishbone: {
242
- label: "Fishbone",
243
- category: "Conceptual & strategic",
244
- layout: "branching",
245
- slotRole: "entity",
246
- expression: "Group candidate causes by category along branches that converge on one clearly stated effect.",
247
- },
248
- "wardley-map": {
249
- label: "Wardley map",
250
- category: "Conceptual & strategic",
251
- layout: "layered",
252
- slotRole: "entity",
253
- expression: "Position components by user visibility and evolution, then show value-chain dependencies and movement without treating the map as runtime architecture.",
254
- },
255
- } as const satisfies Record<string, DiagramDefinition>;
256
-
257
- export type DiagramType = keyof typeof diagramDefinitions;
258
-
259
- export const diagramTypes = Object.keys(diagramDefinitions) as DiagramType[];
260
-
261
- export const chartDefinitions = {
262
- "grouped-bar": {
263
- label: "Grouped bar",
264
- expression: "Compare quantitative values across categories with a shared zero baseline; use grouped series only when each category has comparable values.",
265
- source: "diagram-design",
266
- },
267
- line: {
268
- label: "Line",
269
- expression: "Encode values on a shared scale and connect observations in meaningful order, usually time; preserve intervals and do not imply missing measurements.",
270
- source: "diagram-design",
271
- },
272
- pie: {
273
- label: "Pie",
274
- expression: "Show a small set of mutually exclusive parts of one whole; preserve the total and label values directly when comparison by angle is difficult.",
275
- source: "konpeki",
276
- },
277
- "annotated-detail": {
278
- label: "Annotated detail",
279
- expression: "Focus on one visual detail and connect concise annotations to exact evidence without obscuring the underlying image or chart.",
280
- source: "konpeki",
281
- },
282
- radar: {
283
- label: "Radar",
284
- expression: "Compare multivariate profiles on consistently normalized radial axes; preserve axis order, scale, and direction across every series.",
285
- source: "diagram-design",
286
- },
287
- treemap: {
288
- label: "Treemap",
289
- expression: "Encode part-to-whole magnitude by rectangle area within explicit hierarchy; preserve parent totals and avoid implying rank from position.",
290
- source: "diagram-design",
291
- },
292
- scatter: {
293
- label: "Scatter",
294
- expression: "Position observations by two measured quantitative variables; preserve axis scales, units, outliers, and uncertainty about correlation.",
295
- source: "diagram-design",
296
- },
297
- sankey: {
298
- label: "Sankey",
299
- expression: "Encode conserved quantity through splits and merges using proportional ribbon width; preserve node totals, flow direction, and units.",
300
- source: "diagram-design",
301
- },
302
- } as const satisfies Record<string, ChartDefinition>;
303
-
304
- export type ChartTemplate = keyof typeof chartDefinitions;
305
-
306
- export const chartTemplates = Object.keys(chartDefinitions) as ChartTemplate[];
307
-
308
- export const visualizationDefinitions = {
309
- diagram: diagramDefinitions,
310
- chart: chartDefinitions,
311
- } as const;
312
-
313
- export const diagramCategories = Array.from(
314
- new Set(Object.values(diagramDefinitions).map((definition) => definition.category)),
315
- );
316
-
317
- export function diagramDefinition(type: DiagramType): DiagramDefinition {
318
- return diagramDefinitions[type];
319
- }
package/design/README.md DELETED
@@ -1,17 +0,0 @@
1
- # Find an authoring resource
2
-
3
- [AUTHORING](../AUTHORING.md) owns design defaults and font suggestions. Consult
4
- the resources below for a specific need; none impose a composition or reading order.
5
-
6
- | Need | Where | Use |
7
- | --- | --- | --- |
8
- | Choose the rules | [Authoring mode](../AUTHORING.md#authoring-mode) | Default (original rules) or dynamic (relaxed visual rules); optional paired comparison |
9
- | Choose a visual structure | [Semantic patterns](semantic-patterns.md) | Audience question → relationships → visual structure |
10
- | Review rendered pages | [Review categories](visual-review.md) | Text, typography, layout, color/theme and visuals; optional parallel review |
11
- | Colors only | [palettes](palettes/README.md) | Base, eight light/dark palettes, Mineral/Botanical light candidates |
12
- | Typography + colors | [themes](themes/README.md) | Ready theme roles; no content or layout |
13
- | Art direction | [Technical product language](visual-languages/technical-product.md) | How imagery, emphasis and diagrams work together |
14
- | Add a deck | [Deck directory guide](../slides/README.md) | Routes, prompt records and example deliverables |
15
-
16
- Start freely when no example fits. Reuse implementation, not composition.
17
- A case-specific check is not a design rule.
@@ -1,14 +0,0 @@
1
- # Color palettes
2
-
3
- Color resources only; no typography, layout or content.
4
-
5
- - [index.ts](index.ts): `resolvePalette(name, 'paper' | 'night')` for Plex,
6
- Precision, Editorial, Blue–cyan, Orange–coral, Yellow, Green and Graphite.
7
- Contains surface/text roles, categorical colors, sequential ramps and status.
8
- - [candidates.ts](candidates.ts): `lightPalettes`, Mineral and Botanical,
9
- including named series and diverging ramps. Light-only; not auto-inverted.
10
- - [base.ts](base.ts): original specimen roles, still re-exported by
11
- `lib/taste.ts` for existing runtime consumers. Definitions are not duplicated.
12
-
13
- Choose only the needed series. Keep category meaning separate from status.
14
- For typography with a palette, use [themes](../themes/README.md).
@@ -1,14 +0,0 @@
1
- // Original specimen palette. Named palettes build on these color roles.
2
- export const palettes = {
3
- paper: {
4
- bg: '#FFFFFF', fg: '#000000', muted: '#3F4A54', line: '#BCC6CE',
5
- surface: '#EAEFF3', wash: '#E3EAF8', accent: '#2458C7', inverse: '#FFFFFF',
6
- emphasis: '#98451F', emphasisWash: '#F1E1D4',
7
- },
8
- night: {
9
- bg: '#000000', fg: '#FFFFFF', muted: '#B2C1CC', line: '#4C6072',
10
- surface: '#202E3C', wash: '#233857', accent: '#97B9FF', inverse: '#000000',
11
- emphasis: '#F0AC7D', emphasisWash: '#443025',
12
- },
13
- };
14
- export type Palette = typeof palettes.paper;
@@ -1,19 +0,0 @@
1
- // Approved light-only color candidates. No layout or typography.
2
- export const lightPalettes = [
3
- {
4
- name: 'Mineral', bg: '#FFFFFF', ink: '#18232D', muted: '#526170',
5
- surface: '#F0F3F5', line: '#CBD3DA', accent: '#2458B8', wash: '#E8EFFB',
6
- colors: ['#3569B7', '#167D8D', '#8061A8', '#A27616', '#BA536A', '#59734A'],
7
- names: ['Cobalt', 'Petrol', 'Iris', 'Ochre', 'Rose', 'Moss'],
8
- sequential: ['#E8EFFB', '#B9CDEA', '#7CA2D4', '#4677B8', '#24518D'],
9
- diverging: ['#A14B26', '#D79A73', '#F0F1F2', '#83B9C1', '#216775'],
10
- },
11
- {
12
- name: 'Botanical', bg: '#FFFFFF', ink: '#222923', muted: '#59625B',
13
- surface: '#F1F4F1', line: '#CBD4CB', accent: '#32634D', wash: '#E7F0E9',
14
- colors: ['#43785B', '#5375B5', '#B45A38', '#8B5B96', '#8A781B', '#287F92'],
15
- names: ['Fern', 'Denim', 'Terracotta', 'Plum', 'Brass', 'Lake'],
16
- sequential: ['#E7F0E9', '#B9D1BF', '#83AD90', '#528566', '#2D5941'],
17
- diverging: ['#86508D', '#BE9AC1', '#F0F1F2', '#8DB7A8', '#326C59'],
18
- },
19
- ];
@@ -1,78 +0,0 @@
1
- import { palettes, type Palette } from './base.ts';
2
-
3
- // Color-only resources. These are our adaptations, not extracted brand tokens.
4
- // Keep category identity/order stable across modes; status is a separate channel.
5
- export const paletteNames = ['Plex', 'Precision', 'Editorial', 'Blue–cyan', 'Orange–coral', 'Yellow', 'Green', 'Graphite'] as const;
6
- export type PaletteName = typeof paletteNames[number];
7
- export type PaletteMode = 'paper' | 'night';
8
- type SixColors = [string, string, string, string, string, string];
9
- type FiveColors = [string, string, string, string, string];
10
- type PaletteDefinition = {
11
- accent: [string, string];
12
- wash: [string, string];
13
- surface: [string, string];
14
- categorical: [SixColors, SixColors];
15
- sequential: [FiveColors, FiveColors];
16
- };
17
-
18
- const definitions: Record<PaletteName, PaletteDefinition> = {
19
- Plex: {
20
- accent: ['#2458B8', '#91B9FF'], wash: ['#EAF0FA', '#18273F'], surface: ['#F1F3F5', '#171B21'],
21
- categorical: [['#3569B7', '#167D8D', '#8061A8', '#A27616', '#BA536A', '#59734A'], ['#82AEF2', '#63C3CD', '#BAA0DF', '#D7B55B', '#E899AA', '#A6C58E']],
22
- sequential: [['#E8EFFB', '#B9CDEA', '#7CA2D4', '#4677B8', '#24518D'], ['#192B45', '#305381', '#4C7CB4', '#82AEF2', '#C2DAFF']],
23
- },
24
- Precision: {
25
- accent: ['#3D3A8F', '#B6B2FF'], wash: ['#EEEFFD', '#22213D'], surface: ['#F2F2F5', '#19191F'],
26
- categorical: [['#4B469D', '#2F6A8F', '#76538F', '#8A5A25', '#9A475F', '#4F7040'], ['#AAA5F4', '#82BCE2', '#C69DDF', '#DEB071', '#E89AAF', '#A6C88D']],
27
- sequential: [['#EEEFFD', '#C9C7EC', '#9792D0', '#6761AE', '#3D3A8F'], ['#23223F', '#454278', '#716CB2', '#AAA5F4', '#D9D7FF']],
28
- },
29
- Editorial: {
30
- accent: ['#93451F', '#F2B38C'], wash: ['#F6ECE5', '#30231D'], surface: ['#F4F3F2', '#1B1918'],
31
- categorical: [['#AF5934', '#387684', '#8A619A', '#8C791D', '#AD5071', '#4D7757'], ['#EFA77F', '#86C3CD', '#C6A3D5', '#D4C17A', '#E9A2BF', '#A0C9A5']],
32
- sequential: [['#F7EEE7', '#EACAB4', '#CD9875', '#AB6A45', '#794021'], ['#35271F', '#664832', '#A07350', '#D5A17B', '#F6D5B8']],
33
- },
34
- 'Blue–cyan': {
35
- accent: ['#007C88', '#63D6E3'], wash: ['#EAF9FA', '#112E33'], surface: ['#F0F9FA', '#121D20'],
36
- categorical: [['#007C88', '#007F8E', '#275F9A', '#95631F', '#A64D68', '#39724F'], ['#63D6E3', '#79E3EB', '#8FBCEF', '#DBB267', '#E799AF', '#89C9A1']],
37
- sequential: [['#EAF9FA', '#B7E7EA', '#72C3CA', '#2B9AA5', '#007C88'], ['#123136', '#225D65', '#388F99', '#63C6D0', '#A8EFF4']],
38
- },
39
- 'Orange–coral': {
40
- accent: ['#A23E20', '#FFB28E'], wash: ['#FFF0E8', '#33231D'], surface: ['#F5F3F2', '#1D1917'],
41
- categorical: [['#BA5A31', '#B94970', '#4876AA', '#247D76', '#8861A3', '#92771D'], ['#F3A47C', '#ED99B7', '#91B8E8', '#76C7BE', '#BFA3DD', '#D7BF70']],
42
- sequential: [['#FCEDE5', '#EDC3AD', '#D89370', '#B66A44', '#88411E'], ['#36251F', '#6D4430', '#A9704D', '#DF9F73', '#FFD1AC']],
43
- },
44
- Yellow: {
45
- accent: ['#756000', '#F1D66D'], wash: ['#FBF5D9', '#302A17'], surface: ['#F5F5F0', '#1C1C18'],
46
- categorical: [['#95761C', '#416FA4', '#A95670', '#397D71', '#8862A2', '#AD612C'], ['#E0C264', '#91B6E5', '#E1A1B6', '#8AC8B8', '#BFA5D9', '#E4B181']],
47
- sequential: [['#F8F3D9', '#E5D9A4', '#C4B369', '#9B8433', '#705C12'], ['#302B19', '#5A4C25', '#917A38', '#C9AF59', '#F5DE91']],
48
- },
49
- Green: {
50
- accent: ['#216B3D', '#98DCAF'], wash: ['#EAF3ED', '#1A2D22'], surface: ['#F1F5F2', '#171D19'],
51
- categorical: [['#43785B', '#5375B5', '#B45A38', '#8B5B96', '#8A781B', '#287F92'], ['#91C7A6', '#9AB8EA', '#E9AB8A', '#CBA4D5', '#D1C278', '#7BC8D8']],
52
- sequential: [['#E7F0E9', '#B9D1BF', '#83AD90', '#528566', '#2D5941'], ['#1B3023', '#325A40', '#578569', '#91C7A6', '#CBECD6']],
53
- },
54
- Graphite: {
55
- accent: ['#242424', '#F2F2F2'], wash: ['#EDEDED', '#242424'], surface: ['#F5F5F5', '#171717'],
56
- categorical: [['#3268B5', '#187F86', '#8A5DA6', '#A87922', '#B55372', '#5A7847'], ['#85B2F3', '#77C9CF', '#C3A2E0', '#DDBB78', '#E6A0B8', '#ADC991']],
57
- sequential: [['#EFEFEF', '#CBCBCB', '#999999', '#666666', '#303030'], ['#282828', '#505050', '#838383', '#B8B8B8', '#EFEFEF']],
58
- },
59
- };
60
-
61
- export function resolvePalette(name: PaletteName, mode: PaletteMode): Palette & {
62
- categorical: SixColors; sequential: FiveColors; status: { complete: string; attention: string; blocked: string };
63
- } {
64
- const d = definitions[name], dark = mode === 'night', i = dark ? 1 : 0;
65
- return {
66
- ...palettes[mode],
67
- bg: dark ? '#000000' : '#FFFFFF', fg: dark ? '#F2F2F2' : '#20242A',
68
- muted: dark ? '#B7BCC4' : '#505B68', line: dark ? '#454B54' : '#C9CFD6',
69
- ...(name === 'Graphite' ? {
70
- fg: dark ? '#F2F2F2' : '#202020', muted: dark ? '#B8B8B8' : '#595959',
71
- line: dark ? '#454545' : '#CECECE', emphasis: d.accent[i], emphasisWash: d.wash[i],
72
- } : {}),
73
- accent: d.accent[i], wash: d.wash[i], surface: d.surface[i],
74
- categorical: [...d.categorical[i]], sequential: [...d.sequential[i]],
75
- status: dark ? { complete: '#94D3AB', attention: '#E3C477', blocked: '#F0A1AF' }
76
- : { complete: '#276749', attention: '#946200', blocked: '#AC3348' },
77
- };
78
- }
@@ -1,44 +0,0 @@
1
- # Color / theme review
2
-
3
- Owns palette use across the deck. Apply existing
4
- [theme guidance](../../AUTHORING.md#taste-and-creative-freedom) and
5
- [color roles](../palettes/README.md); this category adds no new style rules.
6
-
7
- - Check palette roles, background and visual emphasis against the brief and
8
- selected mode. Both modes use the original white-background/main-accent
9
- fallback unless the user supplies another direction. Dynamic permits local
10
- emphasis fills, not an automatic dark or colored canvas.
11
- - Check text/mark contrast on actual surfaces at viewing size. Confirm category
12
- and status meanings stay consistent and have cues beyond color alone.
13
-
14
- Leave font rendering to typography and container structure to visuals.
15
- Use the shared [review process](../visual-review.md#independent-review).
16
-
17
- ## Measure a declared solid pair
18
-
19
- Use [contrastRatio](../../lib/contrast.ts) for opaque six-digit sRGB hex colors.
20
- From the kit directory, this checks one declared normal-text pair:
21
-
22
- ```sh
23
- node --input-type=module <<'JS'
24
- import { contrastRatio } from './lib/contrast.ts';
25
- const foreground = '#505B68', background = '#FFFFFF';
26
- const ratio = contrastRatio(foreground, background);
27
- console.log({ foreground, background, ratio, minimum: 4.5 });
28
- if (ratio < 4.5) process.exitCode = 1;
29
- JS
30
- ```
31
-
32
- Use actual palette roles or rendered values for the pair under review. Record
33
- the page/element, pair, ratio and applicable threshold. Compare the unrounded
34
- ratio: rounding 4.478 to 4.5 does not make it pass. Normal text needs 4.5:1;
35
- large text can use 3:1 only when it qualifies at the delivered size (at least
36
- 24 CSS px regular or about 18.67 CSS px bold). A 32-unit SVG label scaled to
37
- half size is not 32 CSS px. Contrast does not establish comfortable readability.
38
-
39
- This helper does not discover backgrounds, classify text, composite opacity or
40
- inspect images, gradients and overlapping shapes. Confirm the solid pair really
41
- applies in the render. For other surfaces, measure the actual composite with an
42
- appropriate tool and inspect the result; otherwise report contrast as Not verified.
43
- Never report an unmeasured ratio. The existing theme browser check's containing-
44
- rectangle assumption remains specimen-specific, not a general background solver.
@@ -1,16 +0,0 @@
1
- # Layout review
2
-
3
- Owns composition and spatial relationships. Inspect the rendered deck for
4
- reading order, grouping and balance. Leave glyph readability to typography,
5
- diagram meaning and container structure to visuals, and factual claims to text review.
6
-
7
- | Check | Guidance |
8
- | --- | --- |
9
- | Content balance | Recompose when one column runs far below its neighbor and leaves a stranded empty area. Equal heights are unnecessary. |
10
- | Heading attachment | Give the heading more separation from the preceding section than from its own content. Respect visible group boundaries. |
11
- | Evidence-led emphasis | Question the giant-number, small-label, supporting-stats formula. Use it when the metric explains the point, with scope and evidence intact. |
12
- | Meaningful grouping | Repeated icon–heading–body cards can flatten different ideas into equal weight. Group and prioritize according to meaning. |
13
- | Paired-row alignment | Align short headings with the first line of their descriptions, not the vertical center of multiline copy. Check visible text alignment as well as element bounds. |
14
- | Spacing hierarchy | Avoid identical gaps between unrelated sections and within closely related content. A consistent spacing scale is still useful. |
15
-
16
- Use the shared [review process](../visual-review.md#independent-review).
@@ -1,18 +0,0 @@
1
- # Text review
2
-
3
- Owns meaning and wording. Use the brief and sources to verify claims and caveats;
4
- apply the [writing tone](../../AUTHORING.md#writing-tone). Leave font size and
5
- visual placement to typography/layout review.
6
-
7
- | Check | Guidance |
8
- | --- | --- |
9
- | Headline first | Inspect the rendered reading order against the authoring policy. For every eyebrow, brand label and numbered section heading, name the information lost if it were removed. Remove it when that information is already supplied by the headline, nearby content or page navigation, unless explicitly requested. Preserve essential context and required attribution. |
10
- | Information economy | Avoid restating one message in a card’s headline, badge and note. Repeated values in tables or parallel items can be necessary. |
11
- | Page purpose | State the audience question answered by the page. Can a reader identify the current state, the decision or mechanism, and its consequence without narration? Replace abstract choice labels and ambiguous pronouns with concrete outcomes and named actors. |
12
- | Metadata versus evidence | Remove recurring deck metadata unless requested or required. Keep page-specific citations, units, synthetic-data disclosures and material caveats with the evidence; do not remove those as footer clutter. |
13
- | Relevant limitations | Attach requirements and limits to the mechanism or claim they constrain. Do not give unrelated caveats equal weight on a next-action page or hide essential limits in notes merely to reduce density. |
14
- | Sentence rhythm | Check for a repeated dash-heavy cadence across the copy. Keep occasional dashes that improve reading. |
15
- | Concrete claims | Name the capability or supported outcome. Remove claims that could describe any product. |
16
- | Direct explanation | Remove manufactured rebuttals such as “Not a feature. A platform.” and “not X, but Y.” Explain genuine distinctions directly. |
17
-
18
- Use the shared [review process](../visual-review.md#independent-review).
@@ -1,15 +0,0 @@
1
- # Typography review
2
-
3
- Owns text rendering and reading comfort. Inspect full/half-size renders for
4
- legibility, hierarchy, wrapping and clipping; verify actual fonts and weights
5
- against the chosen [theme](../themes/README.md). Leave wording to text review
6
- and section placement to layout review.
7
-
8
- | Check | Guidance |
9
- | --- | --- |
10
- | Font category | Both modes use sans-serif unless the brief directs otherwise. Dynamic may vary typographic emphasis without changing the font category. Verify language coverage, loaded weights and readability in both modes. |
11
- | Useful numbering | Remove repeated micro-indices beside headings when they add no ordering information. Keep useful step and page numbers readable. |
12
- | Subheading distinction | Apply the mode table: default requires typographic emphasis; dynamic may establish hierarchy through placement, color or grouping. Check the result at review size. |
13
- | Readable line measure | Keep paragraph lines easy to track into the next line. Judge the actual font and viewing size; avoid imposing a web character limit on every slide label. |
14
-
15
- Use the shared [review process](../visual-review.md#independent-review).
@@ -1,31 +0,0 @@
1
- # Visuals review
2
-
3
- Owns diagrams, charts, imagery and containers. Apply the existing
4
- [accuracy requirements](../../AUTHORING.md#requirements): verify arrow direction,
5
- label/value associations, chart scales, asset provenance and faithful crops.
6
- Text review verifies the underlying claims; this review checks their visual encoding.
7
- Leave page arrangement to layout and color assignments to color/theme.
8
-
9
- Apply the [mode table](../../AUTHORING.md#authoring-mode) first. The allowances
10
- below for emphasis fills, framing, reinforcing arrows and filled heads apply to
11
- dynamic mode or an explicit user direction; they do not override default mode's
12
- original restrictions. Geometry and factual checks apply in both modes.
13
-
14
- | Check | Guidance |
15
- | --- | --- |
16
- | Visual explanation | Would a diagram, image or annotated artifact make the relationships easier to grasp? Do not accept prose-only treatment merely because it is in bounds, or require a diagram when it adds nothing. |
17
- | Purposeful boundaries | Judge whether surfaces improve grouping, emphasis or reading order in the chosen direction. Remove competing layers, not all layers that could be replaced by whitespace. Keep meaningful object boundaries and actual controls. |
18
- | Rules and frames | Dividers must stop at the region they separate, not cross shared copy or subsequent sections. Give text clearance from borders and accent rules. Frames and rails may support grouping or emphasis; distinguish intentional treatment from accidental-looking missing edges. |
19
- | Paragraphs versus rows | Apply the authoring boundary policy: independent text groups can use whitespace; corresponding table or paired rows may benefit from rules. If rules establish the rows, check for a clear ending before notes, usually a bottom rule. Do not require borders merely because text has columns. |
20
- | Table ending versus page footer | A closing rule belongs to the table it ends. Do not extend it to the page bottom or add a second separator for generic metadata or a standalone page number. |
21
- | Canvas padding | Check preview and requested export for unintended padding around differently proportioned artwork. Use the intended aspect ratio where supported or compose the surrounding space deliberately; intentional color bands are not a defect. |
22
- | Emphasis backgrounds | Does the fill help the audience notice, group or navigate the content? Hierarchy, rhythm and emphasis are valid uses alongside state and evidence. Check contrast and avoid competing emphasis; when color encodes meaning, check that labels or symbols agree. |
23
- | Connector endpoints | Every arrow needs an identifiable source and destination: a node, participant, lane or explicit continuation. Boxes are optional; meaningful attachment is not. Check what each endpoint refers to, not just its coordinates or alignment. Connectors should meet their intended anchors without stray tails or gaps; extend beyond them only to convey meaning. |
24
- | Connector routing | Optimize for a clear, coherent route, not the fewest bends. Orthogonal corners are welcome when they support reading order, aligned entry/exit points or label placement. Remove needless doglegs, but do not replace useful elbows with awkward diagonal fans or detach a sequence rail from its stages. Place turns deliberately, with clearance from nodes, labels, boundaries and other connectors; avoid near-touches or crossings that imply unintended junctions. |
25
- | Corresponding bends | For equivalent or mirrored relationships, check that turn positions, offsets and spacing align or mirror consistently. Preserve asymmetry when different endpoints, obstacles or meanings require it; do not add bends merely to force symmetry. |
26
- | Arrow purpose | Check that arrows make the intended relationship easier to follow without implying unsupported transitions or dependencies. Reinforcing a relationship stated in words is useful when it speeds understanding, not automatically redundant. |
27
- | Arrowheads | Open and filled heads are valid. Check consistency with the chosen notation, alignment with shafts, and clean joins without spikes, gaps or protruding stems. Inspect at full and review size. |
28
-
29
- Inspect the render: DOM nesting alone cannot establish whether a boundary helps,
30
- and an HTML card detector can miss nested SVG shapes.
31
- Use the shared [review process](../visual-review.md#independent-review).
@@ -1,43 +0,0 @@
1
- # Choose a visual by meaning
2
-
3
- Start with the audience's question, not a favorite layout. These are choices,
4
- not templates. Choose the primary medium from the source, audience and brief;
5
- plain text or a large image may be enough. Authoring mode changes visual rules, not
6
- the truth of the relationships. More detail requires more supported explanation,
7
- not more nodes or arrows by default.
8
-
9
- ## Pick the relationship
10
-
11
- | Question | Pattern | Keep clear |
12
- | --- | --- | --- |
13
- | What happens next? | Process / sequence | Input, steps, output and blockers. Label branches and return paths; pending is not approved. |
14
- | Which option fits? | Comparison / decision | Same criteria, units and scope. Explain the recommendation without hiding drawbacks or inventing scores. |
15
- | What belongs to what? | Hierarchy / containment | Consistent parent–child meaning. Use a map when shared ownership or cross-links matter. |
16
- | What connects? | System map | Named entities, meaningful boundaries and labeled connections. Use a sequence when event order is the story. |
17
- | What should I notice? | Annotated detail | Enough context to locate the detail, large evidence and nearby labels. Identify crops and mockups; don't invent specifications. |
18
-
19
- Choose theme and composition to suit the relationship. Any pattern can be
20
- restrained or expressive; decorative shapes must not imply data.
21
-
22
- ## Infer the form; preserve the meaning
23
-
24
- People do not need to name a diagram or chart type. In Auto, infer a suitable form
25
- from the goal, audience, supplied relationships and data. An explicitly selected form is binding:
26
- preserve it and ask before switching, including to another component kind. Never
27
- silently reset explicit selection to Auto. Honor notation requested in the intent
28
- or brief even in Auto. When ambiguity changes the explanation, ask what should be emphasized rather than
29
- asking the person to choose from a taxonomy.
30
-
31
- Keep specialized semantics when they matter: message order in a sequence,
32
- guarded transitions in a state machine, enclosure for containment, and honest
33
- scales for quantities. Use editable vectors when a standard draft cannot express
34
- them. In Auto, update the returned diagram type or chart template to match the chosen form
35
- without changing its selection mode.
36
-
37
- Diagram Design and Archify are references, not product specifications. Borrow
38
- useful techniques with attribution; do not pursue their catalog coverage or
39
- force domain recipes into first-class types. Evaluate the result against the
40
- explanation goal, factual fidelity and editability.
41
-
42
- Render and inspect: is the relationship clear without narration? Are facts,
43
- arrows and labels correct and readable? No aesthetic score or required layout.