konpeki 0.3.0 → 0.4.0

package/slides/incident-workflow/index.tsx

@@ -1,78 +0,0 @@
-import type { ReactNode } from 'react';
-import '@fontsource/ibm-plex-sans/latin-400.css';
-import '@fontsource/ibm-plex-sans/latin-600.css';
-
-const ink = '#152B39', muted = '#465D6B', accent = '#006B75';
-function Copy({ x = 112, y, lines, size = 34, color = ink, weight = 400 }: {
-  x?: number; y: number; lines: string[]; size?: number; color?: string; weight?: number;
-}) {
-  return <text x={x} y={y} fill={color} fontSize={size} fontWeight={weight}>
-    {lines.map((s, i) => <tspan key={i} x={x} dy={i ? size * 1.32 : 0}>{s}</tspan>)}
-  </text>;
-}
-function Frame({ title, description, page, children }: { title: string; description: string; page: number; children: ReactNode }) {
-  return <svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" fontFamily="IBM Plex Sans" role="img" aria-labelledby={`title-${page} desc-${page}`}>
-    <title id={`title-${page}`}>{title}</title><desc id={`desc-${page}`}>{description}</desc>
-    <rect width="1920" height="1080" fill="#FFFFFF" />
-    <Copy y={135} lines={[title]} size={64} weight={600} />
-    {children}
-    <Copy x={1760} y={1025} lines={[`${page} / 3`]} size={26} color={muted} />
-  </svg>;
-}
-
-const Diagnosis = () => <Frame page={1} title="The release outpaced the connection pool" description="Fictional Lantern incident, 18 August 2026, UTC. API accepts events into a durable queue; workers deliver to customer webhook endpoints. Concurrency rose from 20 to 80 per worker at 09:00 while the pool stayed at 20. At 09:05 oldest pending age was six minutes and queue depth 18,000. At 09:08 API acceptance was healthy, CPU below 50%, outbound timeouts increased. At 09:12 steady traffic, widespread endpoint timeouts and traces waiting for connections support a worker-side bottleneck rather than traffic surge or independent customer failures. Not yet reproduced under controlled load.">
-  <Copy y={202} lines={['Lantern · fictional incident · 18 August 2026 · all times UTC']} size={28} color={muted} />
-  <Copy y={290} lines={['API accepts events']} weight={600} />
-  <Copy x={630} y={290} lines={['Durable queue']} weight={600} />
-  <Copy x={1150} y={290} lines={['Workers deliver to webhooks']} weight={600} />
-  <path d="M435 278 H578 M564 266 L578 278 L564 290 M910 278 H1098 M1084 266 L1098 278 L1084 290" stroke={accent} strokeWidth="3" fill="none" />
-  <Copy y={350} lines={['Objective: 99% of accepted events get a successful endpoint response within five minutes.']} size={31} color={muted} />
-  <Copy y={447} lines={['09:00  Release']} size={36} weight={600} color={accent} />
-  <Copy y={502} lines={['Concurrency per worker: 20 → 80', 'Worker count and incoming volume unchanged.']} size={32} />
-  <Copy y={630} lines={['09:05–09:08  Symptoms']} size={36} weight={600} color={accent} />
-  <Copy y={685} lines={['18,000 queued events; oldest waiting 6 min.', 'API acceptance healthy; worker CPU <50%.', 'Outbound requests timed out more often.']} size={32} />
-  <Copy x={970} y={447} lines={['09:12  Test the three explanations']} size={36} weight={600} color={accent} />
-  <Copy x={970} y={510} lines={['Traffic surge?  Volume matched pre-release.', 'Endpoint failures?  Many unrelated endpoints.', 'Worker bottleneck?  Traces waited for a', 'connection; each pool still had only 20.']} size={32} />
-  <Copy x={970} y={737} lines={['Supported diagnosis: concurrency / pool mismatch.', 'The evidence points to shared worker capacity.']} size={31} weight={600} />
-  <Copy x={970} y={853} lines={['The failure has not yet been reproduced', 'in a controlled test.']} size={29} color={muted} />
-  <Copy y={925} lines={['Queue age = time the oldest', 'pending event has waited.']} size={29} color={muted} />
-</Frame>;
-
-const Mitigation = () => <Frame page={2} title="Rollback relieved waits before the backlog cleared" description="At 09:15 the team rolled concurrency back to 20, without purging the queue or replaying completed jobs. At 09:20 connection waits and timeout rates were back to pre-release levels, but 24,000 events remained queued, down from a peak of 30,000, and oldest pending age was 14 minutes. At 09:40 queue depth was in its usual 0–500 range and oldest age 40 seconds. Recovery after rollback strengthens the diagnosis but does not replace controlled reproduction.">
-  <Copy y={208} lines={['Operational sequence · all times UTC · fictional incident']} size={28} color={muted} />
-  <Copy y={340} lines={['09:15']} size={72} color={accent} weight={600} />
-  <Copy y={410} lines={['Mitigate the mismatch']} size={37} weight={600} />
-  <Copy y={478} lines={['Roll concurrency back to 20.', 'Keep the durable queue intact.', 'Do not replay completed jobs.']} size={33} />
-  <Copy y={685} lines={['Why this intervention?']} size={32} weight={600} />
-  <Copy y={738} lines={['Match concurrent deliveries', 'to the existing 20-connection', 'pool rather than add pressure.']} size={32} />
-  <Copy x={760} y={340} lines={['09:20']} size={72} color={accent} weight={600} />
-  <Copy x={760} y={410} lines={['Transport stabilizes']} size={37} weight={600} />
-  <Copy x={760} y={478} lines={['Connection waits and timeout', 'rates return to pre-release levels.']} size={33} />
-  <Copy x={760} y={635} lines={['24,000 events remain']} size={40} weight={600} />
-  <Copy x={760} y={695} lines={['Down from a peak of 30,000.', 'Oldest pending age: 14 min.', 'The backlog is still draining.']} size={32} />
-  <Copy x={1340} y={340} lines={['09:40']} size={72} color={accent} weight={600} />
-  <Copy x={1340} y={410} lines={['Queue normalizes']} size={37} weight={600} />
-  <Copy x={1340} y={478} lines={['Depth returns to its usual', 'range of 0–500 events.']} size={33} />
-  <Copy x={1340} y={635} lines={['40 seconds']} size={40} weight={600} />
-  <Copy x={1340} y={695} lines={['Oldest pending event age.', 'Confirm backlog recovery', 'separately from timeouts.']} size={32} />
-  <Copy y={935} lines={['Recovery after rollback strengthens the diagnosis; controlled reproduction is still needed.']} size={31} color={muted} />
-</Frame>;
-
-const Recovery = () => <Frame page={3} title="Recovery is a measured window, not a clean slate" description="At 10:10 UTC, 99.3% of newly accepted events over the preceding 30 minutes received a successful endpoint response within five minutes, exceeding the 99% objective for that cohort. It does not erase the incident delivery-objective breach. No data loss observed, but event-by-event audit incomplete. Next: reproduce mismatch under load, validate concurrency and pool settings together before release, and add connection-wait time to the rollout dashboard.">
-  <Copy y={208} lines={['10:10 UTC check · fictional incident']} size={28} color={muted} />
-  <Copy y={385} lines={['99.3%']} size={132} color={accent} weight={600} />
-  <Copy y={466} lines={['of newly accepted events']} size={42} weight={600} />
-  <Copy y={533} lines={['received a successful endpoint response', 'within five minutes in the preceding', '30 minutes (09:40–10:10 UTC).']} size={34} />
-  <Copy y={730} lines={['Objective: 99% within five minutes.']} size={33} weight={600} />
-  <Copy y={794} lines={['This cohort met the objective. The incident’s', 'delivery-objective breach still happened.']} size={33} />
-  <Copy x={1050} y={330} lines={['Close the evidence gaps']} size={43} weight={600} />
-  <Copy x={1050} y={420} lines={['Reproduce the mismatch under load.']} size={34} weight={600} />
-  <Copy x={1050} y={473} lines={['Test the supported cause in a controlled run.']} size={31} color={muted} />
-  <Copy x={1050} y={575} lines={['Validate both settings before release.']} size={34} weight={600} />
-  <Copy x={1050} y={628} lines={['Check concurrency and pool capacity together.']} size={31} color={muted} />
-  <Copy x={1050} y={730} lines={['Expose connection-wait time.']} size={34} weight={600} />
-  <Copy x={1050} y={783} lines={['Add the signal to the rollout dashboard.']} size={31} color={muted} />
-  <Copy y={957} lines={['No data loss was observed; an event-by-event delivery audit is not yet complete.']} size={31} color={muted} />
-</Frame>;
-
-export default [Diagnosis, Mitigation, Recovery];

package/slides/introducing-konpeki/PROMPT.md

@@ -1,40 +0,0 @@
-# Public brief excerpt
-
-This file retains the original creation request and its authoring context.
-Implementation debugging and product-development follow-ups are omitted; this
-is not the complete conversation record.
-
-> build a pre to introduce konpeki
-
-## Authoring record
-
-- Requested mode: unspecified. Resolved mode: default.
-- Explicit visual preferences: none supplied.
-- Interpretation: “pre” means presentation. Build a six-slide English introduction
-  for people and coding-agent users who have not used Konpeki.
-- Direction: white, IBM Plex Sans, dark ink and Konpeki blue; restrained diagrams,
-  clear hierarchy, no invented metrics or unsupported export claims.
-- Sources: the repository's documented capabilities;
-  see SOURCE.md for concrete references and qualifications.
-- Deliverable: composition JSON, browser presentation, reviewed captures.
-
-## Public revision request
-
-> review the example composition and revise if needed
-
-### Adaptation record
-
-- Requested mode: unspecified. Resolved mode: retain default.
-- Scope: review the introduction against the current skill-led creation,
-  file-backed revision and browser-only playground workflows.
-- Position Konpeki as a creator of editable visuals, not primarily a slide
-  explainer. Show a creation brief without a mandatory init or canvas-drafting step;
-  keep the canvas-first intent / Build it workflow as an alternative.
-- Distinguish browser-local playground storage from an agent-opened file session.
-  Notes and Build it need the latter; Copy prompt resumes an idle agent.
-- Replace contributor setup commands with skill installation and current user
-  prerequisites. Do not imply that every agent uses the same slash command.
-- Preserve the six pages, existing Precision/Paper appearance, stable IDs and
-  unrelated geometry. Precision uses Noto Sans; the IBM Plex direction above
-  records the original creation, not the current theme.
-- Refresh the editable JSON, authoring source, source notes and reviewed captures.

package/slides/introducing-konpeki/README.md

@@ -1,76 +0,0 @@
-# Introducing Konpeki
-
-A six-page English introduction for first-time users. Defaults to Precision on paper
-with theme-linked colors and fonts; deck appearance can switch palettes and
-Paper/Night without repainting vector elements. Uses the default authoring mode.
-
-1. **Meet Konpeki** — create editable visuals with your coding agent.
-2. **Create and revise together** — brief, generate, edit and revise the same file.
-3. **Five semantic components** — Text block, Diagram, Chart, Image and Table.
-4. **Keep the detail editable** — direct editing and targeted agent revision notes.
-5. **Browser or agent editor** — local playground versus file-backed editing.
-6. **Try a real brief** — install the skill and give a one-sentence creation request.
-
-## Open and revise
-
-For repository development, run `mise exec -- pnpm dev` from the root and open
-`?example=introducing-konpeki` in the application. A static build serves the same
-example after `mise exec -- pnpm build`. Select **Present** for viewing.
-
-Edits autosave to this example's separate browser-local working copy when storage
-is available. **Browser → Download JSON** keeps a portable copy; **Import JSON**
-and **Start blank** replace only this working copy. **Reset example** restores
-the bundled version. Download existing work before resetting, including when
-loading an updated example. Browser storage is not a backup and does not sync
-with an agent's file. The playground has no connected agent, Notes or Build it.
-
-For agent-backed editing, follow [SETUP.md](../../SETUP.md) to install the complete
-skill, then ask your agent to open a downloaded or copied composition file.
-Browser and agent revisions use that same file in its preview. Continue feedback
-in agent chat, or use Notes / Build it and Copy prompt as described in the
-[canvas workflow](../../docs/workflow.md). A creation brief selects generate;
-init is optional, not a required first step.
-
-[composition.json](composition.json) is the authoritative editable deck. Each
-page contains semantic components. Ordinary text uses native content and typography
-fields; diagrams and custom specimens keep editable vector elements. Double-click
-ordinary text to edit it directly; Content intent remains separate agent guidance.
-This is not a second React deck runtime or a collection of page images.
-
-[author.ts](author.ts) records the reviewed drawing instructions. Running
-`mise exec -- node slides/introducing-konpeki/author.ts` validates and regenerates the JSON;
-it **replaces manual canvas revisions**, so do not rerun it over revised work.
-See [the public brief excerpt](PROMPT.md) and [source facts / provenance](SOURCE.md).
-
-## Review
-
-- `mise exec -- pnpm check`, `mise exec -- pnpm test` (106 tests),
-  `mise exec -- pnpm build`, composition validation and `git diff --check`: passed.
-  The build retains its existing large-chunk advisory.
-- Inspected all six canvas pages in Precision Paper, Precision Night and Editorial
-  Paper at 1920×1080 and 1024×768, DPR2 (36 states). No clipped text or overlapping
-  labels. Revised the file/playground wording and kept the revision arrow returning
-  from Revise to Edit, not to a new brief.
-- `review.mjs` checked text bounds after font loading and each authored vector
-  viewport against its component rectangle within 0.5 screen pixels at both sizes.
-  With a dev or preview server and `agent-browser` available, run:
-
-  ```sh
-  mise exec -- node slides/introducing-konpeki/review.mjs http://localhost:4318 /tmp/konpeki-intro Precision paper
-  ```
-
-  Repeat with `Precision night` and `Editorial paper`; inspect captures after
-  the assertions pass. The script defaults to Plex if no palette is supplied and
-  explicitly selects its legacy font pairing. An optional final typography ID
-  tests independent combinations, such as `Green paper plex-serif` or
-  `Plex night noto-sans`; both passed all six pages at both sizes after separation.
-- Precision Paper's accessibility tree exposes page copy, visual descriptions
-  and the chart's illustrative values. Home / ArrowRight navigation reached all
-  six pages; Noto Sans weights 400, 500 and 600 loaded. Text on the white canvas
-  measures 15.59:1 (ink), 6.91:1 (muted) and 9.54:1 (accent).
-- Final reviewed presentation captures: [screenshots](screenshots/).
-- Chart values are illustrative; diagrams are explanatory artwork, not screenshots.
-- Native agent-client installation, PDF/PPTX, mobile, reduced motion, focus styling
-  and cross-application fidelity were not verified by this content review.
-
-![Title slide](screenshots/page-1.png)

package/slides/introducing-konpeki/SOURCE.md

@@ -1,26 +0,0 @@
-# Source facts and provenance
-
-This is a factual introduction to Konpeki, not a fictional customer case study.
-
-| Claim | Repository evidence |
-| --- | --- |
-| Covers, social graphics, charts, diagrams and presentations share an editable canvas | [Product introduction](../../README.md); [authoring guidance](../../AUTHORING.md) |
-| Install the complete skill; a creation brief selects generate, with init optional | [Setup](../../SETUP.md); [canvas workflow](../../docs/workflow.md) |
-| In a file-backed preview, valid browser and agent changes update the same composition JSON | [File-backed workflow](../../docs/workflow.md#file-backed-editing-with-an-agent) |
-| Five top-level kinds: Text block, Diagram, Chart, Image, Table; stable editable vector IDs | [Composition contract](../../composition/README.md); [types](../../composition/types.ts) |
-| Direct text, shape and layout editing with undo/redo | [Product capabilities](../../README.md); [composition operations](../../composition/document.ts) |
-| Diagram, Chart and Table previews are structural drafts; real source data is needed for finished artwork | [Canvas workflow](../../docs/workflow.md#documents-and-exports); [factual-fidelity rules](../../AUTHORING.md#requirements) |
-| Revision notes and Build it belong to file-backed sessions; Copy prompt resumes an idle agent | [Review handoff](../../docs/workflow.md#file-backed-editing-with-an-agent) |
-| Playground examples save independent browser-local copies; import/download JSON, start blank, reset, PNG and Present are available | [Demo hosting](../../docs/development.md#development-server-and-demo-hosting); [storage implementation](../../src/lib/storage.ts); [browser controls](../../src/components/WorkspaceChrome.tsx) |
-| Playground files do not sync with an agent session; there is no connected AI or cloud storage | [Demo hosting](../../docs/development.md#development-server-and-demo-hosting) |
-| Agent workflow requires Node.js 24+, npm, file/command access and a browser; contributor pnpm setup is separate | [User setup](../../SETUP.md); [development setup](../../docs/development.md) |
-
-The architecture drawings, vector selection example and component specimens are
-original explanatory artwork for this deck, not product screenshots. The tiny
-chart uses explicitly labeled illustrative values, not measured product data.
-The product-announcement prompt is an example brief, not a customer result.
-No third-party image assets or customer claims are used. The retained Precision
-theme uses Noto Sans from the repository's Fontsource dependency; theme-linked
-text follows the selected palette's font roles. No PDF/PPTX or cross-application
-fidelity is claimed. This deck does not establish native agent-client installation
-compatibility or an official hosted playground URL.

package/slides/introducing-konpeki/author.ts

@@ -1,165 +0,0 @@
-// Authoring source. composition.json is the editable deck of record.
-// Re-running this script replaces it; preserve canvas revisions before rebuilding.
-import { writeFile } from "node:fs/promises";
-import { canonicalJSON } from "../../composition/compile.ts";
-import { createComponent } from "../../composition/document.ts";
-import { validateComposition } from "../../composition/validate.ts";
-import {
-  compositionSchema, canvasSize, canvasPadding,
-  type CompositionComponent, type CompositionDocument, type CompositionSlide,
-  type VectorElement,
-} from "../../composition/types.ts";
-
-const ink = "theme:ink", blue = "theme:accent", muted = "theme:muted", line = "theme:divider";
-function text(id: string, value: string, x: number, y: number, size = 34, fill = ink, weight = 400): VectorElement {
-  return { id, kind: "text", text: value, attributes: { x, y, "font-family": size >= 56 ? "theme:heading-font" : "theme:body-font", "font-size": size, "font-weight": weight, fill } };
-}
-function rect(id: string, x: number, y: number, width: number, height: number, stroke = line, fill = "theme:background"): VectorElement {
-  return { id, kind: "rect", attributes: { x, y, width, height, rx: 4, fill, stroke, "stroke-width": 2 } };
-}
-function path(id: string, d: string, stroke = blue, width = 3): VectorElement {
-  return { id, kind: "path", attributes: { d, fill: "none", stroke, "stroke-width": width, "stroke-linecap": "round", "stroke-linejoin": "round" } };
-}
-function arrow(id: string, x: number, y: number, end: number) {
-  return path(id, `M${x} ${y}H${end}M${end - 14} ${y - 12}L${end} ${y}L${end - 14} ${y + 12}`);
-}
-function component(id: string, kind: CompositionComponent["kind"], x: number, y: number, width: number, height: number, description: string, elements: VectorElement[]): CompositionComponent {
-  const base = createComponent(kind, 1);
-  if (base.kind === "diagram" || base.kind === "chart") base.appearance.selection = "explicit";
-  return { ...base, id, slotIds: [`${id}-content`], preferredRect: { x, y, width, height }, intent: description,
-    customVisual: { format: "vector", viewBox: { x: 0, y: 0, width, height }, fit: "contain", description, elements } };
-}
-function copy(id: string, x: number, y: number, width: number, lines: string[], size = 36, color = ink, weight = 400) {
-  const result = component(id, "text-block", x, y, width, Math.ceil(lines.length * size * 1.4 + 20), lines.join(" "),
-    lines.map((value, index) => text(`${id}-line-${index + 1}`, value, 0, size + 8 + index * size * 1.4, size, color, weight)));
-  if (result.kind === "text-block" && (id.endsWith("-title") || id === "brand")) result.appearance.role = "title";
-  if (result.kind === "text-block") {
-    delete result.customVisual;
-    result.content = lines.join("\n");
-    result.textStyle = { size, weight: weight as 400 | 500 | 600, lineHeight: 1.4,
-      color: color === blue ? "accent" : color === muted ? "muted" : "ink", font: size >= 56 ? "heading" : "body" };
-  }
-  return result;
-}
-function slide(id: string, name: string, question: string, components: CompositionComponent[]): CompositionSlide {
-  return { id, name, canvas: canvasSize, innerPadding: canvasPadding, pageNumber: { style: "01/02", color: "muted" },
-    audience: "People and coding-agent users discovering Konpeki", question, intendedViewingSize: "presentation",
-    components, contentSlots: components.map((c) => ({ id: c.slotIds[0], label: c.id, role: "body", required: true, instruction: c.intent! })),
-    groups: [], readingOrder: components.map((c) => ({ kind: "component", id: c.id })), paintOrder: components.map((c) => c.id), relationships: [] };
-}
-function heading(id: string, title: string, subtitle: string) {
-  return [copy(`${id}-title`, 112, 88, 1696, [title], 62, ink, 600), copy(`${id}-subtitle`, 112, 184, 1696, [subtitle], 32, muted)];
-}
-
-const slides: CompositionSlide[] = [];
-slides.push(slide("introduction", "Meet Konpeki", "What is Konpeki?", [
-  copy("brand", 112, 140, 820, ["Konpeki"], 112, blue, 600),
-  copy("promise", 112, 328, 960, ["Create clear visuals", "with your coding agent."], 56, ink, 500),
-  copy("summary", 112, 548, 870, ["Bring a brief. Get an editable result.", "Keep revising the same document."], 36, muted),
-  component("shared-canvas", "diagram", 1090, 185, 700, 590, "A single editable composition contains a headline, diagram and supporting text; people and agents revise it.", [
-    rect("canvas-frame", 8, 25, 670, 395),
-    text("canvas-title", "From brief to visual", 45, 93, 36, ink, 500),
-    path("headline-rule", "M45 120H640", line, 2),
-    rect("source-node", 50, 183, 160, 90, blue), rect("result-node", 310, 183, 320, 90, blue),
-    text("source-label", "Brief", 98, 239, 28), text("result-label", "Editable visual", 374, 239, 28),
-    arrow("connection", 228, 228, 292),
-    path("body-lines", "M50 323H395M50 351H525", line, 8),
-    text("document-label", "composition.json", 178, 484, 32, blue, 500),
-    text("participants", "Human edits + agent revisions", 116, 548, 28, muted),
-  ]),
-  copy("intro-note", 112, 870, 1696, ["Covers, social graphics, charts, diagrams and presentations."], 34),
-]));
-
-slides.push(slide("workflow", "Create and revise together", "How do a person and an agent work together?", [
-  ...heading("workflow", "Start with a brief. Keep editing the result.", "In the agent-opened editor, you and your agent edit the same file."),
-  component("roundtrip", "diagram", 112, 342, 1696, 470, "Share a brief and materials. The agent creates a visual and opens its file-backed preview. Edit that canvas, then ask for revisions in the same conversation. The agent updates the same file; the loop returns to editing, not a new brief.", [
-    ...[0, 1, 2, 3].flatMap((index) => {
-      const x = index * 438;
-      return [text(`number-${index}`, `0${index + 1}`, x, 48, 26, blue, 500),
-        text(`step-${index}`, ["Brief", "Generate", "Edit", "Revise"][index], x, 122, 42, ink, 500),
-        text(`detail-a-${index}`, ["Share your materials.", "Agent creates a visual.", "Edit the open canvas.", "Ask in the same chat."][index], x, 190, 29, muted),
-        text(`detail-b-${index}`, ["Describe the result.", "Opens its file preview.", "Review the details.", "Agent updates that file."][index], x, 234, 29, muted),
-        ...(index < 3 ? [arrow(`handoff-${index}`, x + 338, 109, x + 398)] : [])];
-    }),
-    path("revision-loop", "M1510 285V365H991V285M979 299L991 285L1003 299", blue),
-    text("loop-label", "Both edit the same composition.json", 490, 431, 32, blue),
-  ]),
-  copy("workflow-note", 112, 870, 1696, ["Prefer to sketch first? Add a component, describe its intent, then choose Build it."], 34, ink),
-]));
-
-slides.push(slide("components", "Five semantic components", "What can a page contain?", [
-  ...heading("components", "Five components. One composition.", "Each component keeps its meaning, outer geometry and editable interior."),
-  component("text-specimen", "text-block", 112, 360, 296, 360, "Text block: headlines, body text, captions and footnotes.", [
-    text("label", "Text block", 0, 40, 38, ink, 500), text("sample", "Aa", 0, 166, 96, blue),
-    text("detail-1", "Headlines, body", 0, 277, 28, muted), text("detail-2", "and captions", 0, 317, 28, muted),
-  ]),
-  component("diagram-specimen", "diagram", 462, 360, 296, 360, "Diagram: entities and their relationships.", [
-    text("label", "Diagram", 0, 40, 38, ink, 500), rect("node-1", 4, 112, 94, 78, blue), rect("node-2", 195, 112, 94, 78, blue), arrow("edge", 112, 151, 181),
-    text("detail-1", "Entities and", 0, 277, 28, muted), text("detail-2", "relationships", 0, 317, 28, muted),
-  ]),
-  component("chart-specimen", "chart", 812, 360, 296, 400, "Chart specimen with illustrative values A 2 and B 3; not product measurements.", [
-    text("label", "Chart", 0, 40, 38, ink, 500), path("axis", "M5 84V209H285", line, 2),
-    rect("bar-a", 54, 129, 66, 80, blue, blue), rect("bar-b", 188, 89, 66, 120, blue, blue),
-    text("value-a", "2", 77, 117, 24), text("value-b", "3", 209, 77, 24), text("axis-a", "A", 77, 240, 22, muted), text("axis-b", "B", 209, 240, 22, muted),
-    text("detail-1", "Quantitative", 0, 297, 28, muted), text("detail-2", "comparisons", 0, 337, 28, muted), text("caveat", "Illustrative values", 0, 388, 26, ink),
-  ]),
-  component("image-specimen", "image", 1162, 360, 296, 360, "Image: a visual asset or illustration, represented here by original vector artwork.", [
-    text("label", "Image", 0, 40, 38, ink, 500), rect("frame", 4, 91, 278, 135),
-    { id: "sun", kind: "circle", attributes: { cx: 227, cy: 126, r: 17, fill: blue } },
-    path("landscape", "M24 205L88 135L151 194L193 159L264 205", blue, 4),
-    text("detail-1", "Visual assets", 0, 277, 28, muted), text("detail-2", "and illustrations", 0, 317, 28, muted),
-  ]),
-  component("table-specimen", "table", 1512, 360, 296, 360, "Table: structured comparisons with clear row and column associations.", [
-    text("label", "Table", 0, 40, 38, ink, 500),
-    text("col-a", "Stage", 0, 120, 26, ink, 500), text("col-b", "Owner", 157, 120, 26, ink, 500),
-    path("rules", "M0 136H285M0 190H285M0 244H285", line, 2),
-    text("row-a", "Create", 0, 174, 25), text("row-a-owner", "Agent", 157, 174, 25), text("row-b", "Review", 0, 228, 25), text("row-b-owner", "You", 157, 228, 25),
-    text("detail", "Structured detail", 0, 317, 28, muted),
-  ]),
-  copy("component-note", 112, 848, 1696, ["Diagram, Chart and Table previews are structural drafts.", "Give the agent real data and sources for finished artwork."], 32, ink),
-]));
-
-slides.push(slide("editing", "Keep the detail editable", "What remains editable after an agent finishes?", [
-  ...heading("editing", "Keep editing—or ask your agent", "Change text, shapes and layout directly. Undo and redo stay available."),
-  component("editable-diagram", "diagram", 112, 340, 980, 475, "Explanatory illustration: a selected Review node inside its owning Diagram component. The shape keeps stable ID review-node.", [
-    rect("owner", 5, 5, 965, 390), text("owner-label", "Diagram · review-flow", 35, 53, 27, muted),
-    rect("draft", 55, 158, 220, 120), rect("review-node", 385, 158, 220, 120, blue), rect("present", 715, 158, 220, 120),
-    text("draft-label", "Draft", 113, 232, 38), text("review-label", "Review", 433, 232, 38, blue, 500), text("present-label", "Present", 753, 232, 38),
-    arrow("draft-review", 293, 218, 367), arrow("review-present", 623, 218, 697),
-    ...[[380,153],[600,153],[380,273],[600,273]].map(([x,y], i) => rect(`handle-${i}`,x,y,10,10,blue)),
-    text("stable-id", "Selected element: review-node", 36, 450, 32, blue),
-  ]),
-  copy("editing-actions-title", 1210, 343, 580, ["Ask for a targeted revision"], 35, ink, 500),
-  copy("editing-actions", 1210, 440, 580, ["Select a component or element.", "Add a Revision note in Notes.", "Choose Build it to submit.", "Agent revises the same file."], 31, muted),
-  copy("editing-note", 112, 852, 1696, ["Notes and Build it are available in the agent-opened editor, not the browser playground.", "Build it cannot wake an idle agent. Use Copy prompt to resume it."], 32, ink),
-]));
-
-slides.push(slide("today", "Browser or agent editor", "What can I do here, and what needs a coding agent?", [
-  ...heading("today", "Try the browser. Continue with your agent.", "The same editable format, with different saving and generation paths."),
-  copy("available-heading", 112, 350, 790, ["Browser playground"], 42, blue, 500),
-  copy("available-1", 112, 451, 790, ["Edit an example or start blank.", "Import editable composition JSON."], 33),
-  copy("available-2", 112, 605, 790, ["Saved only in this browser.", "No connected agent or cloud sync."], 33),
-  copy("available-3", 112, 790, 790, ["Download JSON to keep your work.", "Export PNG or use Present."], 32, ink),
-  copy("limits-heading", 1020, 350, 788, ["With your coding agent"], 42, ink, 500),
-  copy("limits-1", 1020, 451, 788, ["The agent creates and revises visuals.", "Its preview saves to a local JSON file."], 33),
-  copy("limits-2", 1020, 605, 788, ["Bring downloaded JSON to your agent.", "Continue in its file-backed editor."], 33),
-  copy("limits-3", 1020, 790, 788, ["Playground and file copies do not sync.", "Review generated facts and visuals."], 32, ink),
-]));
-
-slides.push(slide("start", "Try a real brief", "How do I start?", [
-  ...heading("start", "Install the skill. Bring a real brief.", "Ask for a cover, social graphic, chart, diagram or presentation."),
-  copy("setup-heading", 112, 350, 710, ["Install the Konpeki skill"], 40, ink, 500),
-  copy("repository", 112, 435, 850, ["github.com/vcfgdev/konpeki"], 38, blue, 500),
-  copy("commands", 112, 543, 840, ["Use your agent’s skill installer.", "Choose skills/konpeki in the repo."], 34),
-  copy("requirements", 112, 696, 780, ["Node.js 24+ · npm", "An agent with file + command access", "A browser for the editable preview"], 32, ink),
-  copy("brief-heading", 1020, 350, 788, ["Then give it one sentence"], 40, ink, 500),
-  copy("brief", 1020, 450, 788, ["“Use Konpeki to turn these launch", "notes into a product announcement.”"], 35),
-  copy("next-step", 1020, 696, 788, ["Need an empty canvas? Ask for init.", "A creation brief selects generate."], 32, blue, 500),
-  copy("closing", 112, 906, 1696, ["Attach your materials; the agent opens and checks the editable result. No separate init needed."], 30, muted),
-]));
-
-const document: CompositionDocument = { schema: compositionSchema, title: "Introducing Konpeki", authoringMode: "default", theme: { id: "precision", mode: "paper" }, slides };
-const result = validateComposition(document);
-if (!result.ok) throw new Error(JSON.stringify(result.issues, null, 2));
-await writeFile(new URL("./composition.json", import.meta.url), canonicalJSON(result.document) + "\n");
-console.log(`Authored ${slides.length} editable slides.`);