konpeki 0.1.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 (121) hide show
  1. package/.agents/skills/authoring-visuals/SKILL.md +82 -0
  2. package/AGENTS.md +33 -0
  3. package/AUTHORING.md +233 -0
  4. package/LICENSE +201 -0
  5. package/README.md +70 -0
  6. package/SETUP.md +86 -0
  7. package/composition/README.md +166 -0
  8. package/composition/compile.ts +227 -0
  9. package/composition/document.ts +709 -0
  10. package/composition/schema.json +2992 -0
  11. package/composition/schema.ts +435 -0
  12. package/composition/theme-tokens.ts +16 -0
  13. package/composition/types.ts +286 -0
  14. package/composition/validate.ts +684 -0
  15. package/composition/vector.ts +143 -0
  16. package/composition/visualizations.ts +335 -0
  17. package/design/README.md +17 -0
  18. package/design/palettes/README.md +14 -0
  19. package/design/palettes/base.ts +14 -0
  20. package/design/palettes/candidates.ts +19 -0
  21. package/design/palettes/index.ts +78 -0
  22. package/design/review/color-theme.md +44 -0
  23. package/design/review/layout.md +16 -0
  24. package/design/review/text.md +18 -0
  25. package/design/review/typography.md +15 -0
  26. package/design/review/visuals.md +31 -0
  27. package/design/semantic-patterns.md +43 -0
  28. package/design/themes/README.md +22 -0
  29. package/design/themes/index.ts +13 -0
  30. package/design/visual-languages/technical-product.md +17 -0
  31. package/design/visual-review.md +88 -0
  32. package/docs/development.md +140 -0
  33. package/docs/workflow.md +61 -0
  34. package/index.html +17 -0
  35. package/lib/assets.d.ts +8 -0
  36. package/lib/charts.ts +18 -0
  37. package/lib/contrast.ts +16 -0
  38. package/lib/layouts.ts +50 -0
  39. package/lib/slide.tsx +42 -0
  40. package/lib/taste.ts +17 -0
  41. package/lib/text.tsx +89 -0
  42. package/lib/typeface.ts +44 -0
  43. package/package.json +85 -0
  44. package/runtime/konpeki.mjs +1685 -0
  45. package/scripts/migrate-react-page.ts +120 -0
  46. package/slides/README.md +153 -0
  47. package/slides/architecture/PROMPT.md +31 -0
  48. package/slides/architecture/index.tsx +102 -0
  49. package/slides/article-brief/PROMPT.md +35 -0
  50. package/slides/article-brief/index.tsx +71 -0
  51. package/slides/bar-chart/PROMPT.md +39 -0
  52. package/slides/bar-chart/index.tsx +97 -0
  53. package/slides/comparison/PROMPT.md +29 -0
  54. package/slides/comparison/index.tsx +95 -0
  55. package/slides/decision-memo/PROMPT.md +34 -0
  56. package/slides/decision-memo/index.tsx +85 -0
  57. package/slides/delivery-plan/PROMPT.md +45 -0
  58. package/slides/delivery-plan/index.tsx +105 -0
  59. package/slides/experiment/PROMPT.md +44 -0
  60. package/slides/experiment/index.tsx +127 -0
  61. package/slides/incident-workflow/PROMPT.md +57 -0
  62. package/slides/incident-workflow/index.tsx +78 -0
  63. package/slides/introducing-konpeki/PROMPT.md +19 -0
  64. package/slides/introducing-konpeki/README.md +54 -0
  65. package/slides/introducing-konpeki/SOURCE.md +20 -0
  66. package/slides/introducing-konpeki/author.ts +163 -0
  67. package/slides/introducing-konpeki/composition.json +3265 -0
  68. package/slides/line-chart/PROMPT.md +40 -0
  69. package/slides/line-chart/index.tsx +72 -0
  70. package/slides/migration/PROMPT.md +38 -0
  71. package/slides/migration/index.tsx +89 -0
  72. package/slides/og-images/PROMPT.md +21 -0
  73. package/slides/og-images/index.tsx +76 -0
  74. package/slides/product-introduction/PROMPT.md +24 -0
  75. package/slides/product-introduction/index.tsx +105 -0
  76. package/slides/research-brief/PROMPT.md +40 -0
  77. package/slides/research-brief/index.tsx +104 -0
  78. package/slides/results-explanation/PROMPT.md +32 -0
  79. package/slides/results-explanation/index.tsx +96 -0
  80. package/slides/retrospective/PROMPT.md +43 -0
  81. package/slides/retrospective/index.tsx +105 -0
  82. package/slides/sankey/PROMPT.md +11 -0
  83. package/slides/sankey/index.tsx +93 -0
  84. package/slides/teaching/PROMPT.md +45 -0
  85. package/slides/teaching/index.tsx +124 -0
  86. package/slides/vertical-bar-charts/PROMPT.md +13 -0
  87. package/slides/vertical-bar-charts/index.tsx +97 -0
  88. package/src/app/App.tsx +694 -0
  89. package/src/assets/konpeki-mark.png +0 -0
  90. package/src/components/Canvas.tsx +1168 -0
  91. package/src/components/DiagramTypeIcon.tsx +78 -0
  92. package/src/components/InspectorPanel.tsx +687 -0
  93. package/src/components/LeftPanel.tsx +107 -0
  94. package/src/components/PageSizePicker.tsx +30 -0
  95. package/src/components/Presentation.tsx +105 -0
  96. package/src/components/RightPanel.tsx +201 -0
  97. package/src/components/VectorOverflowWarning.tsx +46 -0
  98. package/src/components/WorkspaceChrome.tsx +199 -0
  99. package/src/components/ui.tsx +53 -0
  100. package/src/lib/examples/react-page-migration.json +1295 -0
  101. package/src/lib/examples.ts +42 -0
  102. package/src/lib/export-png.ts +101 -0
  103. package/src/lib/file-session.ts +74 -0
  104. package/src/lib/history.ts +53 -0
  105. package/src/lib/model.ts +188 -0
  106. package/src/lib/page-size.ts +24 -0
  107. package/src/lib/presentation.ts +17 -0
  108. package/src/lib/storage.ts +43 -0
  109. package/src/lib/theme.ts +25 -0
  110. package/src/lib/use-file-session.ts +162 -0
  111. package/src/main.tsx +26 -0
  112. package/src/styles/base.css +105 -0
  113. package/src/styles/canvas.css +268 -0
  114. package/src/styles/chrome.css +214 -0
  115. package/src/styles/component-previews.css +386 -0
  116. package/src/styles/feedback.css +71 -0
  117. package/src/styles/left-panel.css +125 -0
  118. package/src/styles/presentation.css +72 -0
  119. package/src/styles/right-panel.css +1172 -0
  120. package/src/styles/shell.css +247 -0
  121. package/vite.config.ts +6 -0
@@ -0,0 +1,82 @@
1
+ ---
2
+ name: authoring-visuals
3
+ description: Creates and revises editable Konpeki visuals from source material. Use for social graphics, article headers, visual explanations and presentations, including revisions to an existing composition.
4
+ ---
5
+
6
+ # Authoring visuals with Konpeki
7
+
8
+ Deliver an editable composition and visually reviewed output. This skill needs
9
+ the surrounding Konpeki runtime and resources; if they are unavailable, follow
10
+ [SETUP.md](../../../SETUP.md) first. Paths here are relative to this file;
11
+ run commands below from the user's workspace with Konpeki installed locally.
12
+ For repository development, substitute `pnpm konpeki` for
13
+ `npm exec --no -- konpeki`. Keep authored documents outside `node_modules`.
14
+
15
+ ## 1. Interpret the brief
16
+
17
+ Read [project rules](../../../AGENTS.md) and
18
+ [authoring policy](../../../AUTHORING.md). Use the user's existing prompt as the
19
+ brief; do not ask them to repeat it in the canvas. Establish the source facts,
20
+ audience, takeaway and destination. Ask only when missing facts or conflicting
21
+ requirements prevent a faithful result.
22
+
23
+ Use `default` authoring mode unless requested otherwise. Explicit visual
24
+ preferences override taste defaults, not factual fidelity or readability. Use
25
+ the policy's [comparison workflow](../../../AUTHORING.md#explore-an-uncertain-direction)
26
+ only when requested or accepted. A single page is a complete creation; choose
27
+ dimensions for its destination rather than assuming a slide deck.
28
+
29
+ ## 2. Author or revise the composition
30
+
31
+ Read the [composition contract](../../../composition/README.md). For a new visual,
32
+ create `slides/<name>/composition.json` unless the user supplies another path.
33
+ Save the creative brief in `PROMPT.md` and substantial facts, citations and asset
34
+ provenance in `SOURCE.md`. Separate assumptions from supplied facts. Preserve
35
+ creative requests accurately, but omit private coordination and environment or
36
+ agent metadata; label excerpts and redactions rather than calling them verbatim.
37
+
38
+ For revisions, reread the current file first. Preserve unrelated content,
39
+ component/vector IDs and human-edited geometry. Honor explicit chart or diagram
40
+ choices. Recompose for a new aspect ratio instead of stretching or cropping.
41
+
42
+ Prefer native text and semantic components. When standard drafts cannot express
43
+ the visual, use editable vectors inside their owning component. Reuse
44
+ [design resources](../../../design/README.md) and reference examples as needed.
45
+ Trusted React may generate SVG for conversion, but imported JSX must not execute
46
+ in the canvas or become a second document source.
47
+
48
+ ## 3. Validate, render and repair
49
+
50
+ ```sh
51
+ npm exec --no -- konpeki validate slides/<name>/composition.json
52
+ npm exec --no -- konpeki preview slides/<name>/composition.json
53
+ ```
54
+
55
+ Reuse an active file-backed preview for the same document when available. Open
56
+ the exact session URL, or its host-approved remote preview equivalent. Inspect
57
+ every affected page and requested theme at presentation and smaller review sizes
58
+ after fonts load. Check factual fidelity, text bounds, contrast, reading order
59
+ and relationships. Repair consequential issues and inspect fresh renders.
60
+
61
+ Follow [verification guidance](../../../docs/development.md#verification) for
62
+ code changes. Validation alone is not visual review. If a required check cannot
63
+ run, state the limitation; do not claim it passed. Honor requested checkpoints;
64
+ otherwise continue to finished output.
65
+
66
+ ## 4. Deliver and continue revisions
67
+
68
+ Return the composition path, usable preview, reviewed images or requested
69
+ exports, source attribution and verification limitations. Verify exports
70
+ separately; browser images do not prove editable PDF/PPTX or font fidelity.
71
+ Include any generator source while keeping composition JSON authoritative.
72
+
73
+ Keep revision requests in agent chat by default. When explicitly waiting for a
74
+ canvas request, run `npm exec --no -- konpeki wait <composition.json>` alongside the preview.
75
+ **Build it** submits a request; it does not launch an agent. On receiving it,
76
+ reread the named file and compare its revision with the request. If it changed,
77
+ reconcile against the latest document instead of applying a stale rewrite.
78
+ Respect the selected component/page scope and preserve unrelated edits.
79
+
80
+ See [canvas workflow](../../../docs/workflow.md) for the full handoff contract.
81
+ Never bypass revision checks or mutate hidden browser storage to replace the
82
+ document. Do not publish without permission.
package/AGENTS.md ADDED
@@ -0,0 +1,33 @@
1
+ # Konpeki
2
+
3
+ Konpeki is a shared editable canvas for people and coding agents. The agent owns
4
+ the conversation; composition JSON owns the document; the browser edits and
5
+ presents that same document.
6
+
7
+ ## Choose the relevant guide
8
+
9
+ - First-time setup: [SETUP.md](SETUP.md).
10
+ - Creating or revising visuals: [authoring-visuals](.agents/skills/authoring-visuals/SKILL.md)
11
+ and [AUTHORING.md](AUTHORING.md), which owns design and factual-fidelity rules.
12
+ - Changing the application: [development guidance](docs/development.md) and
13
+ the [composition contract](composition/README.md).
14
+ - Browser/file handoff: [canvas workflow](docs/workflow.md).
15
+
16
+ ## Shared rules
17
+
18
+ - For repository development, use the toolchain pinned in `mise.toml`. Run
19
+ commands through `mise exec --` unless the mise environment is already active.
20
+ Use pnpm and preserve the dependency lockfile; do not install tools globally.
21
+ - Keep drafting, editing and presentation on the shared composition canvas.
22
+ Retained React/SVG examples are drawing references, not a parallel deck runtime.
23
+ Example geometry is not a design requirement.
24
+ - Preserve unrelated work, human edits and stable component/vector IDs. Reread
25
+ the current composition before revising it; do not overwrite a newer revision.
26
+ - Complete requested implementation, rendering, inspection and repair unless
27
+ the person requests a checkpoint. Ask when missing facts prevent faithful work.
28
+ - Scale checks using [verification guidance](docs/development.md#verification).
29
+ Inspect affected renders for visual changes; tests alone are not visual review.
30
+ - Keep creative briefs and factual provenance with examples. Exclude private
31
+ chat, coordination transcripts, workspace paths, credentials and agent/model
32
+ or timezone metadata. Label excerpts, adaptations and redactions honestly.
33
+ - Do not push, publish or deploy without permission.
package/AUTHORING.md ADDED
@@ -0,0 +1,233 @@
1
+ # Authoring visuals
2
+
3
+ Make visually compelling pages that explain the material clearly.
4
+ This file owns design guidance. The brief overrides taste defaults; preserve
5
+ accuracy and readability. Components, specimens and historical studies are
6
+ resources to adapt freely.
7
+
8
+ ## Destination and surface
9
+
10
+ A single page is a complete creation. The brief may request a social graphic,
11
+ Open Graph preview, article header, standalone explanation or presentation.
12
+ Choose page dimensions for that destination, within 256–4096 pixels per side;
13
+ do not assume 16:9 or invent extra pages. Record the destination in
14
+ `intendedViewingSize` (`social`, `article`, `presentation` or `custom`).
15
+ For another aspect ratio, recompose deliberately rather than stretching artwork,
16
+ silently cropping evidence or shrinking essential text. Each page can have its own size.
17
+
18
+ Return finished, inspected output by default. Do not require people to sketch,
19
+ choose component types or approve an outline unless they ask for that checkpoint.
20
+ Treat supplied sketches as partial direction and preserve deliberate human edits.
21
+ The slide-oriented guidance below also applies to single visual pages where relevant.
22
+
23
+ ## Requirements
24
+
25
+ - Preserve facts, sources, units, denominators, bounds and meaningful caveats.
26
+ Distinguish evidence from interpretation; never invent data or filler.
27
+ - Keep all essential content readable at the intended viewing size. Check
28
+ captions and sources as carefully as body text. Do not hide overflow, truncate
29
+ required copy or automatically shrink text to fit.
30
+ - Represent relationships honestly: correct arrow directions, clear label/value
31
+ associations, appropriate chart scales and zero baselines for amount bars.
32
+ Do not rely on color alone to distinguish meanings.
33
+ - Use licensed assets and real font weights; verify fonts load before measuring
34
+ text.
35
+ - Keep slide order, outer component geometry, reading/paint order and semantic
36
+ relationships in the Konpeki composition document. Use the same canvas for
37
+ editing and presentation preview.
38
+ - When standard components cannot express the artwork, attach editable vector
39
+ elements to the owning component. The composition owns both the component's
40
+ outer geometry and stable IDs for its internal lines, shapes, paths and text.
41
+ React may generate SVG in a trusted build step, but convert supported SVG
42
+ primitives into the vector tree rather than making React a second deck source.
43
+
44
+ ## Writing tone
45
+
46
+ Write like a builder explaining their work to a capable peer: plainspoken,
47
+ concrete and concise. Give each slide a main point and state it in the headline.
48
+ Cut hype, repetition and rhetorical “not X, but Y” framing. Keep names consistent,
49
+ explain unfamiliar terms and retain enough context to make sense without narration.
50
+
51
+ Start the slide's reading order with its main headline. By default, omit brand
52
+ eyebrows above it and section labels that repeat it. Do not add a numbered
53
+ micro-heading merely because the slide belongs to a sequence; retain numbers
54
+ when they explain actual steps or provide useful page navigation.
55
+ Keep an extra label only when removing it would lose necessary context,
56
+ navigation or required attribution, or when the user explicitly requests it.
57
+ Apply this test when composing shared slide frames as well as individual pages.
58
+
59
+ Omit recurring metadata footers by default. Put deck-wide product names,
60
+ generic source descriptions and provenance in the example's README/source record
61
+ or introduce them once where useful. Keep page-specific citations, units and
62
+ meaningful caveats next to the evidence they qualify; preserve legally required
63
+ attribution and make fictional data clear where it is presented. Useful page
64
+ numbers may stand alone without a footer strip or separator. A table's closing
65
+ rule ends the table, not the page; do not add a page-bottom rule for metadata.
66
+
67
+ Make each page answer one identifiable audience question. In a worked example,
68
+ carry named actors, current state and consequences through the explanation.
69
+ Explain what a choice changes: abstract labels such as “keep, revise or replace”
70
+ are not enough without their concrete outcomes. Place implementation requirements
71
+ with the mechanism they constrain and limitations with the claims they qualify;
72
+ do not turn an action-oriented page into an equal-weight collection of steps,
73
+ requirements and unrelated caveats. Preserve essential limitations visibly,
74
+ redistributing them across the deck rather than hiding them in notes. Use names
75
+ instead of pronouns when multiple actors make the reference ambiguous.
76
+
77
+ ## Taste and creative freedom
78
+
79
+ ### Authoring mode
80
+
81
+ Offer exactly two modes: `default` and `dynamic`. Use `default` when omitted.
82
+ Default preserves the pre-revision visual rules; dynamic removes the specific
83
+ restrictions listed below. It grants freedom, not a requirement to add decoration,
84
+ more colors or more diagrams. This is an authoring instruction, not a runtime
85
+ switch or a model-specific setting.
86
+
87
+ | Rule | `default` — original rules | `dynamic` — relaxed rules |
88
+ | --- | --- | --- |
89
+ | Unspecified theme | Minimalist white canvas, dark text, sans-serif and one restrained main accent. Beige and light violet only when requested. Additional semantic chart/status colors are allowed. | Same background, font and main-accent defaults. Expressiveness comes from composition and visual explanation, not an automatic theme change. |
90
+ | Emphasis and containers | Prefer typography, placement and whitespace. Keep containers restrained; use fills for state, meaningful boundaries or highlighted evidence, not decorative emphasis. | Color fields, tinted panels and shapes may also provide hierarchy, grouping, rhythm and emphasis. Remove competing layers, not containers as a category. |
91
+ | Subheadings | Give subheadings enough typographic emphasis to distinguish them from supporting text. | Hierarchy may also come from placement, color or grouping without extra type contrast. |
92
+ | Drawing style | Keep text/data crisp; Rough.js is opt-in by user or template choice. | Choose crisp or hand-drawn treatment to suit the direction; text/data remain legible. |
93
+ | Arrows | Use arrows for relationships that placement and wording do not already make clear. Default to open, stroked heads unless the user or notation calls for another form. | Arrows may reinforce prose when useful; open or filled heads are valid. |
94
+ | Framing | No decorative top/bottom ribbons or side rails. Match surrounding padding to differently proportioned artwork rather than adding contrasting bands. | Bands and rails may support composition or emphasis; compose surrounding space deliberately. |
95
+
96
+ Dynamic does not imply a dark or colored canvas. Make the composition more
97
+ expressive before changing the theme. Keep the white canvas and sans-serif
98
+ fallback unless the user supplies another direction; use accent fills locally
99
+ for emphasis, grouping or visual explanation rather than recoloring the page.
100
+
101
+ In both modes, explicit brand, palette, typeface and visual references override
102
+ taste defaults, never accuracy or readability. Choose explanation structure and
103
+ depth from the source, audience and brief, not extra parameters. Tinted text cards
104
+ alone do not constitute a visual explanation. Never invent relationships or
105
+ supporting facts to satisfy a mode.
106
+
107
+ Palette/background, font pairing, illustration style, audience, tone, delivery
108
+ format, viewing size and page count are brief choices or constraints. They are
109
+ not additional numeric knobs.
110
+ Do not expose separate container-count, arrow-count, hue, corner-radius or
111
+ "creativity" sliders: choose these implementation details to serve the brief.
112
+
113
+ Resolve conflicts in this order: accuracy/readability requirements, explicit
114
+ content and delivery constraints, specific visual directions, then authoring mode
115
+ and its default. With a fixed page count, recompose or remove optional repetition
116
+ rather than shrinking text to fit; ask for a scope/page-count decision if required
117
+ content cannot fit legibly. Never silently drop it or add pages.
118
+
119
+ Apply the mode deck-wide, with page-level variation where content warrants it.
120
+ Record the requested setting (or `unspecified`) and resolved setting in the adaptation
121
+ record in `PROMPT.md`, separately from verbatim user wording. Do not retroactively
122
+ label historical outputs as if they were generated with this parameter.
123
+
124
+ The parameter is usable through the existing authoring workflow, but its
125
+ reliability has not been established by earlier examples. Compare actual renders
126
+ on the same brief, not counts of shapes or an aesthetic score.
127
+
128
+ ### Palette, type and visual explanation
129
+
130
+ For font-family choices, consider IBM Plex Sans for technical explanations,
131
+ Noto Sans for neutral typography or Hanken Grotesk for a product-oriented feel.
132
+ Reuse the project's established typeface when one exists. Inter is acceptable;
133
+ choose for readability, language coverage and fit with the brief rather than
134
+ novelty. These are suggestions, not a closed list. Keep font roles consistent
135
+ and verify the required weights load.
136
+
137
+ Choose a coherent deck-wide palette and treatment within the selected mode or
138
+ explicit user direction. Keep font roles consistent and the reading order clear.
139
+ Keep chart and status meanings stable, and provide labels or other cues when a
140
+ distinction carries information. Apply the mode table to emphasis and containers.
141
+
142
+ Consider a diagram, annotated artifact or visual comparison when relationships
143
+ are central to the point. Use it when it makes those relationships easier to
144
+ grasp, even if prose could describe them. Supporting words and visuals can
145
+ reinforce each other. Do not require a diagram on every page or invent causal,
146
+ temporal or quantitative meaning to justify one.
147
+
148
+ Use whitespace and alignment for independent paragraphs and heading–description
149
+ pairs; columns alone do not require borders. Use horizontal rules when they help
150
+ readers track corresponding items across columns. When rules establish table
151
+ rows or paired rows, give the group a clear ending before notes or conclusions,
152
+ usually a closing bottom rule. Do not add separators to every paragraph.
153
+ Align a short row heading with the first line of its description, rather than
154
+ centering it against a multiline paragraph. Apply the mode's subheading guidance
155
+ and verify that headings are distinguishable from their supporting text.
156
+
157
+ Use the mode's arrow policy. Keep arrow meaning and treatment consistent, and
158
+ align anchors and labels with the objects they refer to. Do not imply a transition
159
+ or dependency that the evidence does not support.
160
+
161
+ Use the mode's framing policy; do not add recurring metadata strips merely to
162
+ fill space. Use the intended ratio where supported. Inspect both the preview
163
+ and requested export.
164
+
165
+ Find optional themes, palettes and semantic patterns in the
166
+ [design index](design/README.md). Choose visuals for the audience's question
167
+ and the relationships to explain.
168
+
169
+ ## Workflow and review
170
+
171
+ Ground the story in the brief and sources: audience, takeaway and delivery needs.
172
+ Use lightweight page drafts when they help resolve story, density or pacing;
173
+ they are not a required deliverable for every edit. State material assumptions
174
+ and proceed with reasonable composition choices within the design defaults.
175
+ Ask when missing evidence or conflicting requirements prevent a faithful result.
176
+ Honor an explicit draft-review checkpoint; otherwise continue to the requested output.
177
+
178
+ Reuse the kit where useful. Use deck-local SVG/React as trusted drawing source
179
+ when existing components weaken the explanation, then convert its supported
180
+ primitives to composition vectors. Do not replace the editable composition with
181
+ framework source. No new runtime or template framework is needed.
182
+
183
+ A completed slide implementation includes runnable source, source notes and
184
+ inspected captures at presentation and review sizes. Check factual fidelity,
185
+ readability, clipping and visual relationships, plus coherence across pages and
186
+ any requested variants. Before delivery, inspect each page's reading order and
187
+ apply the [text review](design/review/text.md), including redundant hierarchy.
188
+ Readable, in-bounds text can still repeat the headline unnecessarily. Record
189
+ the page-level evidence and repair findings without waiting for user feedback.
190
+ Repair consequential issues and inspect fresh renders
191
+ before delivery. Use [development checks](docs/development.md#verification) for relevant code checks
192
+ and [focused visual review](design/visual-review.md) for applicable review guidance.
193
+ Specimen geometry assertions and aesthetic scores are not design requirements.
194
+ Do not add an aesthetic linter.
195
+
196
+ For each new example, save `slides/<name>/PROMPT.md` before authoring: the exact
197
+ initial prompt, supplied source material or links, and explicit visual preferences
198
+ (including none). Preserve creative follow-ups accurately and record material
199
+ assumptions and manual edits separately. Exclude private coordination transcripts,
200
+ agent/model identifiers, generation timestamps and environment metadata. Keep input
201
+ facts and datasets in `SOURCE.md` when substantial. These records explain why
202
+ the example looks and reads as it does, as well as supporting reproduction.
203
+ Mark adaptation prompts and reconstructed history honestly; do not invent an
204
+ original prompt for an inherited specimen. Never commit secrets or private
205
+ material without permission; record any redaction.
206
+
207
+ Report verification limitations and only behavior actually tested. Browser
208
+ images do not establish PDF/PPTX or cross-application fidelity. Inspect requested
209
+ exports separately; if a delivery target is unsupported, explain the limitation.
210
+
211
+ ### Explore an uncertain direction
212
+
213
+ When the user is unsure about the mode, offer two candidates of one representative
214
+ page: `default` and `dynamic`. Generate them when requested or accepted, not
215
+ automatically for every deck. Keep wording, evidence, caveats and viewing size
216
+ fixed. Honor the same explicit visual constraints; otherwise let each mode's
217
+ theme policy apply. Render and inspect both, label the modes and explain the
218
+ differences. Let the user choose before applying the mode across the deck.
219
+
220
+ When a design choice matters and the brief does not settle it, choose one page
221
+ and one primary axis: composition, density, hierarchy or wording. Render two or
222
+ three named alternatives with the same facts, evidence and chosen theme.
223
+ Vary the answer, not just the tint. For architecture, an ownership map, request
224
+ journey and failure-boundary view can test which structure explains the point.
225
+ Keep required relationships visible in every candidate.
226
+
227
+ Show candidates at the same viewing size and explain what each makes easier
228
+ and what it sacrifices. For an exploration-only request, recommend a direction
229
+ and let the user choose. When implementation is requested, choose and carry it
230
+ through unless the user requested a selection checkpoint.
231
+ Promote the selected direction and remove temporary comparison scaffolding;
232
+ retain alternatives only when requested. This is optional exploration, not a
233
+ required extra round for every deck.
package/LICENSE ADDED
@@ -0,0 +1,201 @@
1
+ Apache License
2
+ Version 2.0, January 2004
3
+ http://www.apache.org/licenses/
4
+
5
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6
+
7
+ 1. Definitions.
8
+
9
+ "License" shall mean the terms and conditions for use, reproduction,
10
+ and distribution as defined by Sections 1 through 9 of this document.
11
+
12
+ "Licensor" shall mean the copyright owner or entity authorized by
13
+ the copyright owner that is granting the License.
14
+
15
+ "Legal Entity" shall mean the union of the acting entity and all
16
+ other entities that control, are controlled by, or are under common
17
+ control with that entity. For the purposes of this definition,
18
+ "control" means (i) the power, direct or indirect, to cause the
19
+ direction or management of such entity, whether by contract or
20
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
21
+ outstanding shares, or (iii) beneficial ownership of such entity.
22
+
23
+ "You" (or "Your") shall mean an individual or Legal Entity
24
+ exercising permissions granted by this License.
25
+
26
+ "Source" form shall mean the preferred form for making modifications,
27
+ including but not limited to software source code, documentation
28
+ source, and configuration files.
29
+
30
+ "Object" form shall mean any form resulting from mechanical
31
+ transformation or translation of a Source form, including but
32
+ not limited to compiled object code, generated documentation,
33
+ and conversions to other media types.
34
+
35
+ "Work" shall mean the work of authorship, whether in Source or
36
+ Object form, made available under the License, as indicated by a
37
+ copyright notice that is included in or attached to the work
38
+ (an example is provided in the Appendix below).
39
+
40
+ "Derivative Works" shall mean any work, whether in Source or Object
41
+ form, that is based on (or derived from) the Work and for which the
42
+ editorial revisions, annotations, elaborations, or other modifications
43
+ represent, as a whole, an original work of authorship. For the purposes
44
+ of this License, Derivative Works shall not include works that remain
45
+ separable from, or merely link (or bind by name) to the interfaces of,
46
+ the Work and Derivative Works thereof.
47
+
48
+ "Contribution" shall mean any work of authorship, including
49
+ the original version of the Work and any modifications or additions
50
+ to that Work or Derivative Works thereof, that is intentionally
51
+ submitted to Licensor for inclusion in the Work by the copyright owner
52
+ or by an individual or Legal Entity authorized to submit on behalf of
53
+ the copyright owner. For the purposes of this definition, "submitted"
54
+ means any form of electronic, verbal, or written communication sent
55
+ to the Licensor or its representatives, including but not limited to
56
+ communication on electronic mailing lists, source code control systems,
57
+ and issue tracking systems that are managed by, or on behalf of, the
58
+ Licensor for the purpose of discussing and improving the Work, but
59
+ excluding communication that is conspicuously marked or otherwise
60
+ designated in writing by the copyright owner as "Not a Contribution."
61
+
62
+ "Contributor" shall mean Licensor and any individual or Legal Entity
63
+ on behalf of whom a Contribution has been received by Licensor and
64
+ subsequently incorporated within the Work.
65
+
66
+ 2. Grant of Copyright License. Subject to the terms and conditions of
67
+ this License, each Contributor hereby grants to You a perpetual,
68
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69
+ copyright license to reproduce, prepare Derivative Works of,
70
+ publicly display, publicly perform, sublicense, and distribute the
71
+ Work and such Derivative Works in Source or Object form.
72
+
73
+ 3. Grant of Patent License. Subject to the terms and conditions of
74
+ this License, each Contributor hereby grants to You a perpetual,
75
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76
+ (except as stated in this section) patent license to make, have made,
77
+ use, offer to sell, sell, import, and otherwise transfer the Work,
78
+ where such license applies only to those patent claims licensable
79
+ by such Contributor that are necessarily infringed by their
80
+ Contribution(s) alone or by combination of their Contribution(s)
81
+ with the Work to which such Contribution(s) was submitted. If You
82
+ institute patent litigation against any entity (including a
83
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
84
+ or a Contribution incorporated within the Work constitutes direct
85
+ or contributory patent infringement, then any patent licenses
86
+ granted to You under this License for that Work shall terminate
87
+ as of the date such litigation is filed.
88
+
89
+ 4. Redistribution. You may reproduce and distribute copies of the
90
+ Work or Derivative Works thereof in any medium, with or without
91
+ modifications, and in Source or Object form, provided that You
92
+ meet the following conditions:
93
+
94
+ (a) You must give any other recipients of the Work or
95
+ Derivative Works a copy of this License; and
96
+
97
+ (b) You must cause any modified files to carry prominent notices
98
+ stating that You changed the files; and
99
+
100
+ (c) You must retain, in the Source form of any Derivative Works
101
+ that You distribute, all copyright, patent, trademark, and
102
+ attribution notices from the Source form of the Work,
103
+ excluding those notices that do not pertain to any part of
104
+ the Derivative Works; and
105
+
106
+ (d) If the Work includes a "NOTICE" text file as part of its
107
+ distribution, then any Derivative Works that You distribute must
108
+ include a readable copy of the attribution notices contained
109
+ within such NOTICE file, excluding those notices that do not
110
+ pertain to any part of the Derivative Works, in at least one
111
+ of the following places: within a NOTICE text file distributed
112
+ as part of the Derivative Works; within the Source form or
113
+ documentation, if provided along with the Derivative Works; or,
114
+ within a display generated by the Derivative Works, if and
115
+ wherever such third-party notices normally appear. The contents
116
+ of the NOTICE file are for informational purposes only and
117
+ do not modify the License. You may add Your own attribution
118
+ notices within Derivative Works that You distribute, alongside
119
+ or as an addendum to the NOTICE text from the Work, provided
120
+ that such additional attribution notices cannot be construed
121
+ as modifying the License.
122
+
123
+ You may add Your own copyright statement to Your modifications and
124
+ may provide additional or different license terms and conditions
125
+ for use, reproduction, or distribution of Your modifications, or
126
+ for any such Derivative Works as a whole, provided Your use,
127
+ reproduction, and distribution of the Work otherwise complies with
128
+ the conditions stated in this License.
129
+
130
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
131
+ any Contribution intentionally submitted for inclusion in the Work
132
+ by You to the Licensor shall be under the terms and conditions of
133
+ this License, without any additional terms or conditions.
134
+ Notwithstanding the above, nothing herein shall supersede or modify
135
+ the terms of any separate license agreement you may have executed
136
+ with Licensor regarding such Contributions.
137
+
138
+ 6. Trademarks. This License does not grant permission to use the trade
139
+ names, trademarks, service marks, or product names of the Licensor,
140
+ except as required for reasonable and customary use in describing the
141
+ origin of the Work and reproducing the content of the NOTICE file.
142
+
143
+ 7. Disclaimer of Warranty. Unless required by applicable law or
144
+ agreed to in writing, Licensor provides the Work (and each
145
+ Contributor provides its Contributions) on an "AS IS" BASIS,
146
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147
+ implied, including, without limitation, any warranties or conditions
148
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149
+ PARTICULAR PURPOSE. You are solely responsible for determining the
150
+ appropriateness of using or redistributing the Work and assume any
151
+ risks associated with Your exercise of permissions under this License.
152
+
153
+ 8. Limitation of Liability. In no event and under no legal theory,
154
+ whether in tort (including negligence), contract, or otherwise,
155
+ unless required by applicable law (such as deliberate and grossly
156
+ negligent acts) or agreed to in writing, shall any Contributor be
157
+ liable to You for damages, including any direct, indirect, special,
158
+ incidental, or consequential damages of any character arising as a
159
+ result of this License or out of the use or inability to use the
160
+ Work (including but not limited to damages for loss of goodwill,
161
+ work stoppage, computer failure or malfunction, or any and all
162
+ other commercial damages or losses), even if such Contributor
163
+ has been advised of the possibility of such damages.
164
+
165
+ 9. Accepting Warranty or Additional Liability. While redistributing
166
+ the Work or Derivative Works thereof, You may choose to offer,
167
+ and charge a fee for, acceptance of support, warranty, indemnity,
168
+ or other liability obligations and/or rights consistent with this
169
+ License. However, in accepting such obligations, You may act only
170
+ on Your own behalf and on Your sole responsibility, not on behalf
171
+ of any other Contributor, and only if You agree to indemnify,
172
+ defend, and hold each Contributor harmless for any liability
173
+ incurred by, or claims asserted against, such Contributor by reason
174
+ of your accepting any such warranty or additional liability.
175
+
176
+ END OF TERMS AND CONDITIONS
177
+
178
+ APPENDIX: How to apply the Apache License to your work.
179
+
180
+ To apply the Apache License to your work, attach the following
181
+ boilerplate notice, with the fields enclosed by brackets "[]"
182
+ replaced with your own identifying information. (Don't include
183
+ the brackets!) The text should be enclosed in the appropriate
184
+ comment syntax for the file format. We also recommend that a
185
+ file or class name and description of purpose be included on the
186
+ same "printed page" as the copyright notice for easier
187
+ identification within third-party archives.
188
+
189
+ Copyright [yyyy] [name of copyright owner]
190
+
191
+ Licensed under the Apache License, Version 2.0 (the "License");
192
+ you may not use this file except in compliance with the License.
193
+ You may obtain a copy of the License at
194
+
195
+ http://www.apache.org/licenses/LICENSE-2.0
196
+
197
+ Unless required by applicable law or agreed to in writing, software
198
+ distributed under the License is distributed on an "AS IS" BASIS,
199
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200
+ See the License for the specific language governing permissions and
201
+ limitations under the License.
package/README.md ADDED
@@ -0,0 +1,70 @@
1
+ # Konpeki
2
+
3
+ **An editable canvas for agent-made visuals. Create a single explanation or a
4
+ whole presentation, then revise it together.**
5
+
6
+ Give your coding agent notes, source material and a brief. Konpeki provides the
7
+ shared canvas, design guidance, typography and semantic components for social
8
+ graphics, article headers, visual explanations and presentations.
9
+
10
+ People and agents edit the same composition. Export a page as PNG, download its
11
+ editable JSON, or use **Present** for a chrome-free presentation.
12
+
13
+ ## Start in your coding agent
14
+
15
+ Requires **Node.js 24+**, npm, a coding agent that can edit files and run commands,
16
+ and a browser.
17
+
18
+ For agent-led installation, give your agent [SETUP.md](SETUP.md) and your brief.
19
+ For a manual quickstart:
20
+
21
+ ```sh
22
+ mkdir konpeki-workspace
23
+ cd konpeki-workspace
24
+ npm init -y
25
+ npm install --save-dev konpeki@0.1.0
26
+ cp node_modules/konpeki/slides/introducing-konpeki/composition.json introduction.json
27
+ npm exec --no -- konpeki preview introduction.json
28
+ ```
29
+
30
+ Open the exact URL printed by `preview`. Browser edits save to the composition
31
+ file; valid agent edits appear on the same canvas. In a remote environment, use
32
+ its authenticated preview mechanism rather than sharing a local address.
33
+
34
+ Open the workspace in your coding agent and ask it to read
35
+ `node_modules/konpeki/SETUP.md`. The installed package includes the authoring skill,
36
+ design guidance and examples; skills inside dependencies may need to be read
37
+ explicitly. Keep your documents outside `node_modules`. Give your brief in the
38
+ agent's prompt field:
39
+
40
+ ```text
41
+ Use Konpeki to turn these notes into a three-slide explanation for engineers.
42
+ Make the request flow and failure handling easy to follow. Preserve facts and
43
+ caveats. Save editable composition JSON, then render, inspect and fix the result.
44
+
45
+ [Paste notes or provide source files.]
46
+ ```
47
+
48
+ Ask for revisions in the same conversation. Add “Stop after the outline for
49
+ approval” when you want a checkpoint. Supply a visual direction or leave it open;
50
+ [authoring modes](AUTHORING.md#authoring-mode) provide defaults without requiring
51
+ you to choose fonts, colors or layouts first.
52
+
53
+ ## Examples and guides
54
+
55
+ - [Example gallery](slides/README.md): 18 fictional examples and an editable
56
+ Konpeki introduction. Retained React/SVG examples are drawing references;
57
+ new editable documents use composition JSON.
58
+ - [Agent-led setup](SETUP.md) and [authoring guidance](AUTHORING.md).
59
+ - [Canvas workflow](docs/workflow.md): page sizes, export and agent handoff.
60
+ - [Development](docs/development.md): architecture, demo hosting, packaging and checks.
61
+ - [Composition contract](composition/README.md) and [design resources](design/README.md).
62
+
63
+ Konpeki requires no account or hosted AI service. Your coding agent's pricing
64
+ and data handling still apply. Supply facts and approved assets; examples and
65
+ component placeholders are not evidence about real products.
66
+
67
+ ## License
68
+
69
+ [Apache-2.0](LICENSE). Dependencies and bundled fonts retain their own licenses;
70
+ external design references are credited where used.