konpeki 0.3.0 → 0.4.0

package/design/themes/README.md

@@ -1,40 +0,0 @@
-# Themes
-
-Document appearance has independent **Typography**, **Color palette**, and
-**Background** controls. These do not choose a layout or change font sizes.
-
-Use [authoring guidance](../../AUTHORING.md#taste-and-creative-freedom) for theme
-selection, font defaults and deck-wide consistency.
-
-```ts
-import { getTheme } from './design/themes/index.ts';
-const theme = getTheme('Green', 'paper', 'noto-sans');
-// theme.body, theme.headline, theme.typography, theme.palette
-```
-
-Eight palettes retain their existing names: Plex, Precision, Editorial,
-Blue–cyan, Orange–coral, Yellow, Green and Graphite. Each supports Paper and Night.
-Choose any palette with any of these typography presets:
-
-| Typography ID | Headings | Body |
-| --- | --- | --- |
-| `plex-sans` | IBM Plex Sans | IBM Plex Sans |
-| `noto-sans` | Noto Sans | Noto Sans |
-| `plex-serif` | IBM Plex Serif | IBM Plex Sans |
-| `hanken-grotesk` | Hanken Grotesk | Hanken Grotesk |
-
-Composition JSON stores the optional choice in `theme.typography`, independently
-of `theme.id` (palette) and `theme.mode` (background). Omitted typography preserves
-legacy appearance: Precision uses Noto Sans, Editorial uses Plex Serif headings
-with Plex Sans body, and all other palettes use Plex Sans. Changing the palette
-in the editor records the current typography so colors no longer change fonts.
-Two-argument `getTheme` callers retain those legacy pairings too.
-
-Font loading remains the author's responsibility; load the required Fontsource
-Latin weights before measuring or rendering text. Theme-linked native text and
-vectors follow the selection; literal font/color overrides remain fixed.
-Different fonts can change wrapping or overflow, so inspect the result.
-
-Mineral and Botanical are light-only palette candidates in
-[palettes/candidates.ts](../palettes/candidates.ts).
-A theme does not impose geometry, density or supporting-text sizes.

package/design/themes/index.ts

@@ -1,24 +0,0 @@
-import { typography } from '../../lib/taste.ts';
-import { paletteNames, resolvePalette, type PaletteName, type PaletteMode } from '../palettes/index.ts';
-import type { TypographyId } from '../../composition/types.ts';
-
-export const themeNames = paletteNames;
-export type ThemeName = PaletteName;
-export type ThemeMode = PaletteMode;
-export const typographyLabels: Record<TypographyId, string> = {
-  'plex-sans': 'IBM Plex Sans',
-  'noto-sans': 'Noto Sans',
-  'plex-serif': 'Plex Serif + Plex Sans',
-  'hanken-grotesk': 'Hanken Grotesk',
-};
-
-// Themes combine typography with a palette; they do not choose a composition.
-// Omitted typography retains the original pairing for older documents/callers.
-export function getTheme(name: ThemeName, mode: ThemeMode,
-  typographyId: TypographyId = name === 'Precision' ? 'noto-sans' : name === 'Editorial' ? 'plex-serif' : 'plex-sans',
-) {
-  const body = typographyId === 'noto-sans' ? '"Noto Sans", sans-serif'
-    : typographyId === 'hanken-grotesk' ? '"Hanken Grotesk", sans-serif' : typography.family;
-  const headline = typographyId === 'plex-serif' ? '"IBM Plex Serif", serif' : body;
-  return { name, typographyId, body, headline, typography: { ...typography, family: body }, palette: resolvePalette(name, mode) };
-}

package/design/visual-languages/technical-product.md

@@ -1,17 +0,0 @@
-# Technical product
-
-Use for product explanations, processes and comparisons where a concrete visual
-can carry the argument. This is art direction, not a palette or a fixed template.
-
-- Give the product/interface/output enough space to explain the claim.
-- Apply the selected mode's framing and emphasis rules; do not flatten
-  unrelated content into equally prominent boxes.
-- Connect a process to its tangible output. Keep labels near their connectors.
-- Make selection/recommendation distinct without obscuring alternatives.
-- Keep diagrams and annotations readable at the intended viewing size. Shared
-  card headers round outer top corners only, not the internal bottom seam.
-- Avoid importing website density, tiny gray labels, ubiquitous registration
-  marks, or scroll effects into slides.
-
-Works with Blue–cyan light or Graphite dark; these are examples, not limits.
-Reference: [user-supplied website video](https://video.twimg.com/amplify_video/2097350430993072128/vid/avc1/2306x2160/IgjnX7Duukk4W54G.mp4).

package/design/visual-review.md

@@ -1,88 +0,0 @@
-# Focused visual review
-
-Choose the relevant categories for the work. Each owns its checks; shared
-requirements remain in [AUTHORING](../AUTHORING.md). Apply judgment to the
-content; no automatic bans or aesthetic score.
-
-All categories apply the selected [authoring mode](../AUTHORING.md#authoring-mode)
-and explicit brief. Default uses the original visual restrictions; dynamic
-relaxes only the rules named in the mode table. That table takes precedence over
-general suggestions below and in category guides. Do not impose default-only
-restrictions on dynamic work or require dynamic work to add effects. Judge
-explanation structure and depth against the source, audience and brief.
-Correctness, readability and source fidelity remain non-negotiable in both modes.
-Report a mode mismatch separately from a factual/access defect or taste preference.
-
-| Category | Scope |
-| --- | --- |
-| [Text](review/text.md) | Meaning, claims, repetition and writing tone |
-| [Typography](review/typography.md) | Font rendering, text hierarchy and reading comfort |
-| [Layout](review/layout.md) | Composition, grouping, spacing and comparisons |
-| [Color / theme](review/color-theme.md) | Deck-wide direction, contrast and semantic color roles |
-| [Visuals](review/visuals.md) | Diagrams, charts, imagery and meaningful boundaries |
-
-## Independent review
-
-For a small change, review directly. When useful and subagents are available,
-assign independent categories concurrently. Give each reviewer the same brief,
-chosen direction, source and full/half-size renders, plus its category file.
-Reviewers inspect their scope without editing files or reading each other's findings.
-
-Return only meaningful findings: **priority · page/element · evidence · reader
-impact · suggested fix**. Distinguish observed defects from design suggestions;
-list checks not performed as **Not verified**, not as defects or passes.
-An empty finding list is valid.
-The coordinator deduplicates cross-category issues, resolves conflicting fixes
-against the brief, and checks narrative flow and deck coherence. Report a shared
-root cause once, naming affected pages. Apply fixes in one editing pass,
-then re-render affected pages and repeat relevant checks.
-
-## Repair order
-
-1. **Accuracy:** factual errors, misleading scales, missing qualifications and
-   incorrect relationships.
-2. **Access to content:** unreadable, missing or clipped essential content,
-   color-only meaning and inaccessible interactions when present.
-3. **Understanding:** grouping, reading order, hierarchy and deck coherence.
-4. **Polish:** optical alignment, decorative details and surface consistency.
-
-Judge whether the treatment helps the audience, not whether it could be removed.
-A repair may add a diagram, color field or annotation, or remove competing
-material. Reuse existing primitives where useful; never delete required evidence to improve fit.
-Repair upstream causes first: a cramped region may need recomposition rather
-than separate font-size, line-break and padding changes.
-
-### Repair examples
-
-These are diagnostic examples, not measured findings or mandatory layouts.
-Render the repair with real content to judge whether it helps.
-
-| Before | After | Why |
-| --- | --- | --- |
-| A heading sits equally far from the preceding section and its own paragraph. | Move it nearer its paragraph and increase separation from the preceding section. | Proximity makes ownership clear without another box. |
-| A wide diagram leaves its evidence and caveat in tiny side text. | Give the evidence a larger region or split the page while retaining the qualification. | Essential context becomes readable without shrinking the diagram's labels. |
-| A large value dominates a faint unit and denominator. | Keep unit and denominator adjacent and readable; reduce the value's dominance if needed. | The reader can interpret the number rather than just notice it. |
-| Every sentence sits in an equally prominent nested panel. | Reduce competing layers; retain surfaces that support grouping, emphasis or the chosen direction. | The audience can distinguish the main point from supporting material. |
-| A prose list makes readers reconstruct a request journey. | Draw the named participants and labeled connections, retaining useful explanatory copy. | Relationships become easier to follow even though words already describe them. |
-
-## Accessibility and delivery
-
-Apply checks to the requested format, at its actual viewing size. These are
-delivery checks, not a claim of full accessibility conformance.
-The author (or coordinator when review is delegated) owns this checklist and
-records evidence or **Not verified** for every applicable check.
-
-- Check captions, sources, units and caveats as carefully as the headline.
-  Keep category and state meanings available through labels, shapes or patterns,
-  not color alone. Measure contrast on actual surfaces; see [color review](review/color-theme.md).
-- For browser slides, provide meaningful accessible descriptions or a text
-  equivalent for visual content. Check reading order and that chart alternatives
-  convey the conclusion and relevant values, not merely “chart.” Confirm the
-  content is exposed in the accessibility tree; source markup alone is insufficient.
-- When controls or motion are included, exercise keyboard navigation, visible
-  focus and accessible control names. Check the reduced-motion path and ensure
-  state changes remain understandable without animation. Keep runtime fixes
-  upstream rather than building a second navigation or export system.
-- Inspect each requested export for text, fonts, reading order and alternatives
-  as applicable. Browser/PNG success does not establish accessible PDF/PPTX or
-  cross-application fidelity. Report unsupported or untested delivery properties.

package/lib/assets.d.ts

@@ -1,8 +0,0 @@
-declare module '*?url' {
-  const url: string;
-  export default url;
-}
-declare module '*?raw' {
-  const text: string;
-  export default text;
-}

package/lib/charts.ts

@@ -1,18 +0,0 @@
-import { typography, type Palette } from './taste.ts';
-
-// Shared presentation defaults for Nivo SVG components, not a chart wrapper.
-// Decks still own data, dimensions, scales, labels and semantic color assignments.
-export function chartDefaults(p: Palette) {
-  return {
-    animate: false,
-    isInteractive: false,
-    renderWrapper: false,
-    colors: [p.accent, p.emphasis],
-    theme: {
-      text: { fontFamily: typography.family, fontSize: typography.caption, fill: p.fg },
-      axis: { ticks: { text: { fill: p.fg, fontSize: typography.caption } }, domain: { line: { stroke: p.line } } },
-      grid: { line: { stroke: p.line, strokeWidth: 1 } },
-      labels: { text: { fontSize: typography.caption, fill: p.fg } },
-    },
-  };
-}

package/lib/contrast.ts

@@ -1,16 +0,0 @@
-// WCAG relative luminance for opaque, six-digit sRGB hex colors only.
-// Callers must establish the actual rendered pair; this does not inspect a DOM.
-export function contrastRatio(foreground: string, background: string): number {
-  const luminance = (color: string) => {
-    if (!/^#[0-9a-f]{6}$/i.test(color)) {
-      throw new Error('Contrast requires opaque six-digit sRGB hex colors (#RRGGBB).');
-    }
-    const channels = [1, 3, 5].map(offset => {
-      const value = Number.parseInt(color.slice(offset, offset + 2), 16) / 255;
-      return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
-    });
-    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2];
-  };
-  const fg = luminance(foreground), bg = luminance(background);
-  return (Math.max(fg, bg) + 0.05) / (Math.min(fg, bg) + 0.05);
-}

package/lib/layouts.ts

@@ -1,50 +0,0 @@
-export type Region = { x: number; y: number; width: number; height: number };
-export type RelationshipSlot = { x: number; y: number; axis: 'horizontal' | 'vertical' };
-export const layoutKinds = ['two-columns', 'main-aside', 'three-columns', 'four-grid', 'one-left', 'one-right', 'one-top', 'one-bottom'] as const;
-export type LayoutKind = typeof layoutKinds[number];
-export const contentRegion: Region = { x: 112, y: 404, width: 1696, height: 520 };
-
-function split(area: Region, axis: 'horizontal' | 'vertical', weights: number[], gap: number): Region[] {
-  const length = axis === 'horizontal' ? area.width : area.height;
-  const available = length - gap * (weights.length - 1);
-  const total = weights.reduce((a, b) => a + b, 0);
-  let offset = 0;
-  return weights.map(weight => {
-    const size = available * weight / total;
-    const region = axis === 'horizontal'
-      ? { ...area, x: area.x + offset, width: size }
-      : { ...area, y: area.y + offset, height: size };
-    offset += size + gap;
-    return region;
-  });
-}
-
-function between(a: Region, b: Region, axis: RelationshipSlot['axis']): RelationshipSlot {
-  return axis === 'horizontal'
-    ? { x: (a.x + a.width + b.x) / 2, y: a.y + a.height / 2, axis }
-    : { x: a.x + a.width / 2, y: (a.y + a.height + b.y) / 2, axis };
-}
-
-// Regions and relationship gutters, not an automatic layout/diagram solver.
-// A slot is available space; the author decides whether an arrow belongs there.
-export function arrange(kind: LayoutKind, area: Region = contentRegion, gap = 80): { panels: Region[]; slots: RelationshipSlot[] } {
-  if (kind === 'two-columns' || kind === 'main-aside' || kind === 'three-columns') {
-    const weights = kind === 'main-aside' ? [2, 1] : kind === 'three-columns' ? [1, 1, 1] : [1, 1];
-    const panels = split(area, 'horizontal', weights, gap);
-    return { panels, slots: panels.slice(1).map((panel, i) => between(panels[i], panel, 'horizontal')) };
-  }
-  if (kind === 'four-grid') {
-    const rows = split(area, 'vertical', [1, 1], gap);
-    const panels = rows.flatMap(row => split(row, 'horizontal', [1, 1], gap));
-    return { panels, slots: [between(panels[0], panels[1], 'horizontal'), between(panels[2], panels[3], 'horizontal'), between(panels[0], panels[2], 'vertical'), between(panels[1], panels[3], 'vertical')] };
-  }
-  const axis = kind === 'one-top' || kind === 'one-bottom' ? 'vertical' : 'horizontal';
-  const halves = split(area, axis, [1, 1], gap);
-  const reversed = kind === 'one-right' || kind === 'one-bottom';
-  const single = halves[reversed ? 1 : 0], group = halves[reversed ? 0 : 1];
-  // Single panel is always index 0; the three siblings follow in reading order.
-  return {
-    panels: [single, ...split(group, axis === 'horizontal' ? 'vertical' : 'horizontal', [1, 1, 1], 32)],
-    slots: [between(halves[0], halves[1], axis)],
-  };
-}

package/lib/slide.tsx

@@ -1,42 +0,0 @@
-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

@@ -1,17 +0,0 @@
-// 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

@@ -1,89 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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/scripts/migrate-react-page.ts

@@ -1,120 +0,0 @@
-import { mkdir, writeFile } from "node:fs/promises";
-import { dirname, relative, resolve } from "node:path";
-import { createElement, type ComponentType } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { createServer } from "vite";
-import { compositionSchema } from "../composition/types.ts";
-import { validateComposition } from "../composition/validate.ts";
-import { parseEditableSvg } from "../composition/vector.ts";
-
-if (process.argv.includes("--help")) {
-  console.log("Usage: pnpm example:migrate-page [trusted-react-file] [all|zero-based-page] [output.json]\nExecutes trusted local React source; imports its supported SVG primitives as editable composition vectors.");
-  process.exit(0);
-}
-
-const root = process.cwd();
-const input = resolve(root, process.argv[2] ?? "slides/architecture/index.tsx");
-const pageSelection = process.argv[3] ?? "all";
-const output = resolve(
-  root,
-  process.argv[4] ?? "src/lib/examples/react-page-migration.json",
-);
-const moduleId = `/${relative(root, input).replaceAll("\\", "/")}`;
-
-if (
-  pageSelection !== "all" &&
-  (!Number.isInteger(Number(pageSelection)) || Number(pageSelection) < 0)
-)
-  throw new Error('Page selection must be "all" or a non-negative index.');
-
-const server = await createServer({
-  root,
-  appType: "custom",
-  server: { middlewareMode: true },
-  plugins: [
-    {
-      name: "konpeki-react-page-migration",
-      enforce: "pre",
-      resolveId(source) {
-        if (source.endsWith("/lib/typeface.ts")) return "\0konpeki-typeface";
-      },
-      load(id) {
-        if (id === "\0konpeki-typeface")
-          return "export const fontsReady = Promise.resolve([]);";
-      },
-    },
-  ],
-});
-
-try {
-  const loaded = await server.ssrLoadModule(moduleId) as {
-    default?: ComponentType[];
-    meta?: { title?: string };
-  };
-  const pages = loaded.default ?? [];
-  const indexes = pageSelection === "all"
-    ? pages.map((_, index) => index)
-    : [Number(pageSelection)];
-  if (!indexes.length || indexes.some((index) => !pages[index]))
-    throw new Error(`No selected page exported by ${moduleId}.`);
-  const title = loaded.meta?.title ?? "Migrated React page";
-  const document = {
-    schema: compositionSchema,
-    title: `${title} — migrated React deck`,
-    theme: { id: "plex", mode: "paper" },
-    slides: indexes.map((pageIndex, outputIndex) => {
-      const source = renderToStaticMarkup(createElement(pages[pageIndex]));
-      const parsed = parseEditableSvg(source);
-      const id = `migrated-page-${outputIndex + 1}`;
-      const slotId = `${id}-content`;
-      return {
-        id: `slide-${outputIndex + 1}`,
-        name: `Migrated page ${pageIndex + 1}`,
-        canvas: { width: 1920, height: 1080 },
-        innerPadding: { top: 72, right: 112, bottom: 0, left: 112 },
-        pageNumber: { style: "none", color: "muted" },
-        audience: "Reviewers of the migrated slide",
-        question: "Does the former React page survive in the shared canvas?",
-        intendedViewingSize: "presentation",
-        contentSlots: [
-          {
-            id: slotId,
-            label: "Migrated page",
-            required: true,
-            instruction: "Preserve the trusted React page as editable vector elements.",
-            role: "entity",
-          },
-        ],
-        components: [
-          {
-            id,
-            kind: "diagram",
-            preferredRect: { x: 0, y: 0, width: 1920, height: 1080 },
-            slotIds: [slotId],
-            intent: "A former React page converted to editable vector elements.",
-            appearance: { type: "architecture", border: "none" },
-            customVisual: {
-              format: "vector",
-              elements: parsed.elements,
-              viewBox: parsed.viewBox,
-              description: `Migrated page ${pageIndex + 1} from ${title}`,
-              fit: "stretch",
-            },
-          },
-        ],
-        groups: [],
-        readingOrder: [{ kind: "component", id }],
-        paintOrder: [id],
-        relationships: [],
-      };
-    }),
-  };
-  const validation = validateComposition(document);
-  if (!validation.ok)
-    throw new Error(`Generated composition is invalid: ${JSON.stringify(validation.issues)}`);
-  await mkdir(dirname(output), { recursive: true });
-  await writeFile(output, `${JSON.stringify(validation.document, null, 2)}\n`);
-  console.log(`${relative(root, input)} (${indexes.length} pages) → ${relative(root, output)}`);
-} finally {
-  await server.close();
-}

package/skills/konpeki/assets/blank.json

@@ -1,23 +0,0 @@
-{
-  "schema": "konpeki-composition/v1",
-  "title": "Untitled composition",
-  "theme": { "id": "plex", "mode": "paper" },
-  "slides": [
-    {
-      "id": "slide-1",
-      "name": "Page 01",
-      "canvas": { "width": 1920, "height": 1080 },
-      "innerPadding": { "top": 72, "right": 112, "bottom": 0, "left": 112 },
-      "pageNumber": { "style": "none", "color": "muted" },
-      "audience": "Decision makers",
-      "question": "What should the audience understand or decide?",
-      "intendedViewingSize": "presentation",
-      "contentSlots": [],
-      "components": [],
-      "groups": [],
-      "readingOrder": [],
-      "paintOrder": [],
-      "relationships": []
-    }
-  ]
-}