konpeki 0.1.0

package/lib/slide.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { layout, palettes, typography as type, type Palette } from './taste.ts';
+import type { Region, RelationshipSlot } from './layouts.ts';
+import { Paragraphs, Text, type TextContent } from './text.tsx';
+
+export function Panel({ region, title, body, palette: p }: { region: Region; title: string; body: TextContent; palette: Palette }) {
+  const padding = 20;
+  return <g data-panel="true" data-region={JSON.stringify(region)}>
+    <rect {...region} rx={layout.radius} fill={p.bg} stroke={p.line} />
+    <Paragraphs verticalAlign="top" region={{ x: region.x + padding, y: region.y + padding, width: region.width - 2 * padding, height: region.height - 2 * padding }}
+      items={[{ text: title, color: p.fg, weight: 500 }, { text: body, color: p.muted }]} />
+  </g>;
+}
+
+export function Relationship({ slot, kind = 'forward', reverse = false, color }: {
+  slot: RelationshipSlot; kind?: 'forward' | 'both' | 'cycle'; reverse?: boolean; color: string;
+}) {
+  const angle = (slot.axis === 'vertical' ? 90 : 0) + (reverse ? 180 : 0);
+  const d = kind === 'cycle'
+    ? 'M-20 -5 A21 21 0 0 1 20 -5 M11 -10 L20 -5 L23 -15 M20 5 A21 21 0 0 1 -20 5 M-11 10 L-20 5 L-23 15'
+    : `M-24 0 H24 M12 -8 L24 0 L12 8${kind === 'both' ? ' M-12 -8 L-24 0 L-12 8' : ''}`;
+  return <g data-relationship={kind} role="img" aria-label={kind === 'cycle' ? 'Feedback cycle' : kind === 'both' ? 'Bidirectional relationship' : 'Directional relationship'}
+    transform={`translate(${slot.x} ${slot.y}) rotate(${angle})`}>
+    <path d={d} fill="none" stroke={color} strokeWidth={layout.stroke} strokeLinejoin="round" />
+  </g>;
+}
+
+export function Sheet({ id, number, title, caption, state, children, total = '06', palette }: {
+  id: string; number: string; title: string; caption: string; state: { theme: keyof typeof palettes };
+  children: (p: Palette) => ReactNode; total?: string; palette?: Palette;
+}) {
+  const p = palette ?? palettes[state.theme];
+  return <svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"
+    fontFamily={type.family} role="img" aria-label={title} data-visual={id}>
+    <rect width="1920" height="1080" fill={p.bg} />
+    <Text x={layout.inset} y={164} width={layout.contentWidth} size={type.display} weight={500} color={p.fg} maxLines={2} leading={1.12}>{title}</Text>
+    <g transform="translate(0 -56)" data-slide-content="true">{children(p)}</g>
+    <line x1={layout.inset} y1="982" x2="1808" y2="982" stroke={p.line} />
+    <text x={layout.inset} y="1026" fontSize={type.meta} fill={p.muted}>{caption}</text>
+    <text x="1808" y="1026" textAnchor="end" fontSize={type.meta} fill={p.muted} data-page-number="true">{number} / {total}</text>
+  </svg>;
+}

package/lib/taste.ts

@@ -0,0 +1,17 @@
+// Three independent choices: typography, surface/style, and relationship geometry.
+// Layouts consume these roles; colors are never assigned by item index.
+export const typography = {
+  family: '"IBM Plex Sans", sans-serif',
+  display: 72,
+  heading: 40,
+  body: 32,
+  caption: 24,
+  meta: 20,
+  leading: 1.3,
+};
+
+export const cornerRadii = { square: 0, soft: 16 };
+export const layout = { inset: 112, contentWidth: 1696, gap: 32, stroke: 4, radius: cornerRadii.soft };
+
+// Existing runtime consumers retain their imports; color definitions live in design/.
+export { palettes, type Palette } from '../design/palettes/base.ts';

package/lib/text.tsx

@@ -0,0 +1,89 @@
+import { typography as type } from './taste.ts';
+import type { Region } from './layouts.ts';
+import { useLayoutEffect, useRef, useState } from 'react';
+
+export type TextRun = { text: string; bold?: boolean; italic?: boolean; color?: string };
+export type TextContent = string | readonly TextRun[];
+
+// Segment the complete copy, so a style boundary cannot introduce a word break.
+function measureLines(copy: TextContent, width: number, size: number, weight: number, family = type.family) {
+  const ctx = document.createElement('canvas').getContext('2d')!;
+  const runs = typeof copy === 'string' ? [{ text: copy }] : copy;
+  const plain = runs.map(run => run.text).join('');
+  const slice = (start: number, end: number) => {
+    let position = 0;
+    return runs.flatMap(run => {
+      const text = run.text.slice(Math.max(0, start - position), Math.max(0, end - position));
+      position += run.text.length;
+      return text ? [{ ...run, text }] : [];
+    });
+  };
+  const measure = (line: readonly TextRun[]) => line.reduce((sum, run) => {
+    ctx.font = `${run.italic ? 'italic' : 'normal'} ${run.bold ? 600 : weight} ${size}px ${family}`;
+    return sum + ctx.measureText(run.text).width;
+  }, 0);
+  const lines: TextRun[][] = [];
+  let paragraphStart = 0;
+  for (const paragraph of plain.split('\n')) {
+    let start = paragraphStart, end = start;
+    const push = () => {
+      const raw = plain.slice(start, end);
+      lines.push(slice(start + raw.length - raw.trimStart().length, end - (raw.length - raw.trimEnd().length)));
+    };
+    const segments: string[] = [];
+    for (const { segment } of new Intl.Segmenter(undefined, { granularity: 'word' }).segment(paragraph)) {
+      if (segments.length && /^[.,!?;:%…\)\]}»”’]+$/u.test(segment)) segments[segments.length - 1] += segment;
+      else segments.push(segment);
+    }
+    for (const segment of segments) {
+      const next = end + segment.length;
+      if (plain.slice(start, end).trim() && measure(slice(start, next)) > width) {
+        push();
+        start = end + segment.length - segment.trimStart().length;
+      }
+      end = next;
+    }
+    push();
+    paragraphStart += paragraph.length + 1;
+  }
+  return { lines, tooWide: lines.some(line => measure(line) > width), plain };
+}
+
+export function Text({ children, x, y, width, size = type.body, weight = 400, color, maxLines = 3, leading = type.leading, align = 'start', family = type.family }: {
+  children: TextContent; x: number; y: number; width: number; size?: number; weight?: number; color: string; maxLines?: number; leading?: number; align?: 'start' | 'end'; family?: string;
+}) {
+  const { lines, tooWide, plain } = measureLines(children, width, size, weight, family);
+  const overflow = lines.length > maxLines || tooWide;
+  return <text fill={color} fontFamily={family} fontSize={size} fontWeight={weight} textAnchor={align} data-copy={plain} data-overflow={overflow}>
+    {lines.map((line, i) => <tspan key={i} x={x} y={y + i * size * leading} data-line="true">
+      {typeof children === 'string' ? line.map(run => run.text).join('') : line.map((run, j) =>
+        <tspan key={j} data-run="true" fontWeight={run.bold ? 600 : weight} fontStyle={run.italic ? 'italic' : 'normal'} fill={run.color ?? color}>{run.text}</tspan>)}
+    </tspan>)}
+  </text>;
+}
+
+export function Paragraphs({ region, items, size = type.body, gap = size * type.leading / 2, verticalAlign = 'center' }: {
+  region: Region; items: { text: TextContent; color: string; weight?: number }[]; size?: number; gap?: number; verticalAlign?: 'top' | 'center';
+}) {
+  const ref = useRef<SVGGElement>(null);
+  const [offset, setOffset] = useState(0);
+  useLayoutEffect(() => {
+    const box = ref.current!.getBBox();
+    // Upstream also mounts hidden slides whose SVG bounds are not measurable.
+    if (box.height === 0) return;
+    // Align rendered bounds, including wrapped lines and paragraph gaps.
+    // Overset copy stays top-aligned and flagged; centering must not hide it.
+    const delta = box.height <= region.height
+      ? verticalAlign === 'top' ? region.y - box.y : region.y + region.height / 2 - (box.y + box.height / 2)
+      : -offset;
+    if (Math.abs(delta) > 0.01) setOffset(offset + delta);
+  }, [items, region.y, region.height, region.width, size, gap, offset, verticalAlign]);
+  let baseline = region.y + size * 1.1 + offset;
+  return <g ref={ref} data-prose="true" data-vertical-align={verticalAlign} data-region={JSON.stringify(region)}>{items.map(({ text, color, weight = 400 }, i) => {
+    const y = baseline;
+    const { lines } = measureLines(text, region.width, size, weight);
+    baseline += lines.length * size * type.leading + gap;
+    const maxLines = Math.max(0, 1 + Math.floor((region.y + region.height - y - size * 0.3) / (size * type.leading)));
+    return <Text key={i} x={region.x} y={y} width={region.width} size={size} color={color} weight={weight} maxLines={maxLines}>{text}</Text>;
+  })}</g>;
+}

package/lib/typeface.ts

@@ -0,0 +1,44 @@
+import '@fontsource/ibm-plex-sans/latin-400.css';
+import '@fontsource/ibm-plex-sans/latin-500.css';
+import '@fontsource/ibm-plex-sans/latin-600.css';
+import '@fontsource/ibm-plex-sans/latin-400-italic.css';
+import '@fontsource/ibm-plex-sans/latin-500-italic.css';
+import '@fontsource/ibm-plex-sans/latin-600-italic.css';
+import regular from '@fontsource/ibm-plex-sans/files/ibm-plex-sans-latin-400-normal.woff2?url';
+import medium from '@fontsource/ibm-plex-sans/files/ibm-plex-sans-latin-500-normal.woff2?url';
+import semibold from '@fontsource/ibm-plex-sans/files/ibm-plex-sans-latin-600-normal.woff2?url';
+import italic from '@fontsource/ibm-plex-sans/files/ibm-plex-sans-latin-400-italic.woff2?url';
+import mediumItalic from '@fontsource/ibm-plex-sans/files/ibm-plex-sans-latin-500-italic.woff2?url';
+import semiboldItalic from '@fontsource/ibm-plex-sans/files/ibm-plex-sans-latin-600-italic.woff2?url';
+import license from '@fontsource/ibm-plex-sans/LICENSE?raw';
+
+const faces = [
+  { url: regular, weight: 400, style: 'normal' },
+  { url: medium, weight: 500, style: 'normal' },
+  { url: semibold, weight: 600, style: 'normal' },
+  { url: italic, weight: 400, style: 'italic' },
+  { url: mediumItalic, weight: 500, style: 'italic' },
+  { url: semiboldItalic, weight: 600, style: 'italic' },
+];
+export const fontsReady = Promise.all(faces.map(({ weight, style }) =>
+  document.fonts.load(`${style} ${weight} 32px "IBM Plex Sans"`),
+));
+
+// Our existing SVG/PNG experiment must retain the newly selected typeface.
+// Latin font files and their OFL notice travel with the SVG.
+export async function embedTypeface(source: string) {
+  const css = await Promise.all(faces.map(async ({ url, weight, style }) => {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error('Unable to load export typeface.');
+    const bytes = new Uint8Array(await response.arrayBuffer());
+    const data = btoa(Array.from(bytes, byte => String.fromCharCode(byte)).join(''));
+    return `@font-face{font-family:'IBM Plex Sans';font-style:${style};font-weight:${weight};src:url(data:font/woff2;base64,${data}) format('woff2')}`;
+  }));
+  const xml = new DOMParser().parseFromString(source, 'image/svg+xml');
+  const style = xml.createElementNS('http://www.w3.org/2000/svg', 'style');
+  style.textContent = css.join('\n');
+  const metadata = xml.createElementNS('http://www.w3.org/2000/svg', 'metadata');
+  metadata.textContent = license;
+  xml.documentElement.prepend(style, metadata);
+  return new XMLSerializer().serializeToString(xml);
+}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "konpeki",
+  "version": "0.1.0",
+  "description": "A shared editable canvas for agent-made visuals",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vcfgdev/konpeki.git"
+  },
+  "homepage": "https://github.com/vcfgdev/konpeki#readme",
+  "bugs": "https://github.com/vcfgdev/konpeki/issues",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "bin": {
+    "konpeki": "runtime/konpeki.mjs"
+  },
+  "files": [
+    "AGENTS.md",
+    "AUTHORING.md",
+    "SETUP.md",
+    "docs/workflow.md",
+    "docs/development.md",
+    ".agents/skills/authoring-visuals/SKILL.md",
+    "runtime/konpeki.mjs",
+    "index.html",
+    "vite.config.ts",
+    "src/main.tsx",
+    "src/app/*.tsx",
+    "src/components/*.tsx",
+    "src/lib/*.ts",
+    "src/lib/examples/react-page-migration.json",
+    "src/styles/*.css",
+    "src/assets/konpeki-mark.png",
+    "composition/{README.md,compile.ts,document.ts,schema.json,schema.ts,theme-tokens.ts,types.ts,validate.ts,vector.ts,visualizations.ts}",
+    "design/*.md",
+    "design/{palettes,themes}/*.{md,ts}",
+    "design/review/*.md",
+    "design/visual-languages/technical-product.md",
+    "lib/{assets.d.ts,charts.ts,contrast.ts,layouts.ts,slide.tsx,taste.ts,text.tsx,typeface.ts}",
+    "scripts/migrate-react-page.ts",
+    "slides/README.md",
+    "slides/{architecture,article-brief,bar-chart,comparison,decision-memo,delivery-plan,experiment,incident-workflow,line-chart,migration,og-images,product-introduction,research-brief,results-explanation,retrospective,sankey,teaching,vertical-bar-charts}/{PROMPT.md,index.tsx}",
+    "slides/introducing-konpeki/{README.md,PROMPT.md,SOURCE.md,composition.json,author.ts}",
+    "!**/*.test.ts"
+  ],
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "dev": "vite --host 0.0.0.0 --port 4318",
+    "build": "vite build",
+    "prepack": "node scripts/build-cli.mjs",
+    "preview": "vite preview --host 0.0.0.0 --port 4318",
+    "check": "tsc --noEmit",
+    "test": "node --test lib/*.test.ts composition/*.test.ts src/lib/*.test.ts bin/*.test.ts",
+    "check:package": "node scripts/check-package.mjs",
+    "konpeki": "node bin/konpeki.mjs",
+    "composition:generate": "node composition/generate.ts",
+    "example:migrate-page": "node scripts/migrate-react-page.ts"
+  },
+  "dependencies": {
+    "@fontsource/hanken-grotesk": "5.3.0",
+    "@fontsource/ibm-plex-sans": "5.3.0",
+    "@fontsource/ibm-plex-serif": "5.3.0",
+    "@fontsource/newsreader": "5.3.0",
+    "@fontsource/noto-sans": "5.3.0",
+    "@nivo/bar": "0.99.0",
+    "@nivo/line": "0.99.0",
+    "@nivo/sankey": "0.99.0",
+    "@xmldom/xmldom": "0.9.12",
+    "ajv": "^8.20.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "vite": "^8.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "typescript": "^5.9.3"
+  }
+}