konpeki 0.1.0

package/slides/line-chart/PROMPT.md

@@ -0,0 +1,40 @@
+Make a two-page briefing for the engineering lead at Tide about eight weeks
+of service latency. Use a line chart to explain the trend, then explain what
+the team can conclude and what it should investigate next.
+
+Show both series on the same millisecond axis, with direct labels at their
+last observations and a horizontal target line at 700 ms. Show the missing
+observation as a gap rather than connecting across it or substituting zero.
+
+---
+
+Tide is a fictional document service. The following weekly p95 request latencies
+are synthetic, hand-authored data. Each value describes that endpoint's requests
+for the whole week, not an average of daily percentiles. Lower is better.
+
+Week starting | Search p95 (ms) | Document-open p95 (ms)
+1 June 2026 | 920 | 620
+8 June 2026 | 860 | 610
+15 June 2026 | 810 | 640
+22 June 2026 | missing | 630
+29 June 2026 | 740 | 650
+6 July 2026 | 690 | 670
+13 July 2026 | 660 | 660
+20 July 2026 | 640 | 680
+
+Search telemetry was unavailable for the week starting 22 June; its latency
+is unknown. The team's weekly p95 target is at most 700 ms for each endpoint.
+An index change was enabled at the start of 29 June. Mark that event without
+presenting it as the cause of the trend: search was already improving before it.
+
+---
+
+The last three observed search weeks meet the target, and all eight observed
+document-open weeks meet it. Search's first-to-last observed p95 falls from
+920 to 640 ms. This does not establish continuous target compliance, individual
+request latency or the effect of the index change.
+
+Request counts, traffic mix, error rates and uncertainty estimates are unavailable.
+There was no control group. Recommend restoring reliable telemetry and checking
+traffic mix and errors before attributing the improvement or declaring the work
+finished. Keep the distinction between observed progress and causal evidence clear.

package/slides/line-chart/index.tsx

@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react';
+import '../../lib/typeface.ts';
+
+const ink = '#182B36', muted = '#52636E', accent = '#006D77';
+const dates = ['1 Jun', '8 Jun', '15 Jun', '22 Jun', '29 Jun', '6 Jul', '13 Jul', '20 Jul'];
+const search = [920, 860, 810, null, 740, 690, 660, 640];
+const documentOpen = [620, 610, 640, 630, 650, 670, 660, 680];
+const x = (i: number) => 180 + i * 185;
+const y = (value: number) => 800 - (value - 600) * 1.3;
+function Label({ x, y, children, size = 32, color = ink, weight = 400 }: {
+  x: number; y: number; children: ReactNode; size?: number; color?: string; weight?: number;
+}) { return <text x={x} y={y} fontSize={size} fill={color} fontWeight={weight}>{children}</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-label={`${title}. ${description}`} data-page={page}>
+    <rect width="1920" height="1080" fill="#FFFFFF" />
+    <Label x={110} y={143} size={64} weight={600}>{title}</Label>
+    {children}
+    <Label x={1765} y={1020} size={26} color={muted}>{page} / 2</Label>
+  </svg>;
+}
+const Trend = () => <Frame page={1} title="Search reaches Tide’s weekly latency target"
+  description="Synthetic weekly p95 milliseconds, lower is better. Weeks starting 1 June through 20 July 2026. Search: 920, 860, 810, unknown, 740, 690, 660, 640. Document-open: 620, 610, 640, 630, 650, 670, 660, 680. Target at most 700. Search telemetry missing 22 June. Index change enabled 29 June; search was already improving.">
+  <Label x={110} y={210} size={30} color={muted}>Tide · fictional document service · synthetic weekly data · June–July 2026</Label>
+  <Label x={180} y={299} size={28} color={muted}>Weekly p95 (ms) · lower is better</Label>
+  {[600, 700, 800, 900, 1000].map(v => <g key={v}>
+    <line x1={180} x2={1475} y1={y(v)} y2={y(v)} stroke={v === 700 ? muted : '#DCE2E5'} strokeWidth={v === 700 ? 3 : 2} strokeDasharray={v === 700 ? '12 9' : undefined} />
+    <text x={152} y={y(v) + 9} textAnchor="end" fontSize={28} fill={muted}>{v}</text>
+  </g>)}
+  <Label x={1510} y={y(700) - 8} size={28} color={muted}>Target ≤700 ms</Label>
+  <line x1={x(4)} x2={x(4)} y1={355} y2={810} stroke={muted} strokeWidth={2} strokeDasharray="4 7" />
+  <Label x={x(4) + 20} y={357} size={28} color={muted}>29 Jun · index change enabled</Label>
+  <Label x={x(4) + 20} y={396} size={28} color={muted}>Search was already improving</Label>
+  <path data-series="search" d={`M${x(0)},${y(920)} L${x(1)},${y(860)} L${x(2)},${y(810)} M${x(4)},${y(740)} L${x(5)},${y(690)} L${x(6)},${y(660)} L${x(7)},${y(640)}`} fill="none" stroke={accent} strokeWidth={6} />
+  <polyline data-series="document-open" points={documentOpen.map((v, i) => `${x(i)},${y(v)}`).join(' ')} fill="none" stroke={ink} strokeWidth={4} strokeDasharray="13 8" />
+  {documentOpen.map((v, i) => <rect key={i} data-value={v} data-week={i} x={x(i)-7} y={y(v)-7} width={14} height={14} fill="white" stroke={ink} strokeWidth={3} />)}
+  {search.map((v, i) => v === null ? null : <circle key={i} data-value={v} data-week={i} cx={x(i)} cy={y(v)} r={8} fill={accent} />)}
+  <Label x={1510} y={y(680) + 13} size={30} weight={500}>Document-open 680</Label>
+  <Label x={1510} y={y(640) + 19} size={30} color={accent} weight={600}>Search 640</Label>
+  <Label x={648} y={510} size={28} color={accent}>Telemetry missing</Label>
+  <Label x={648} y={548} size={28} color={accent}>22 Jun · latency unknown</Label>
+  {dates.map((date, i) => <text key={date} x={x(i)} y={858} textAnchor="middle" fontSize={28} fill={muted}>{date}</text>)}
+  <Label x={180} y={908} size={26} color={muted}>Week starting · each p95 covers the whole week, not an average of daily percentiles</Label>
+  <Label x={110} y={995} size={34} weight={500}>Search meets target in its last 3 observed weeks; document-open meets it in all 8.</Label>
+</Frame>;
+
+const Decision = () => <Frame page={2} title="Verify the improvement before closing the work"
+  description="Search first-to-last observed weekly p95 fell 280 milliseconds, from 920 to 640. This does not prove continuous compliance, individual request latency or causality. Request counts, traffic mix, errors and uncertainty estimates are unavailable, with no control group. Restore telemetry and inspect traffic mix and errors before attribution.">
+  <Label x={110} y={224} size={34} color={muted}>Observed progress is clear. The effect of the index change is still unknown.</Label>
+  <Label x={110} y={352} size={38} weight={600}>What the observations support</Label>
+  <Label x={110} y={438} size={72} color={accent} weight={600}>920 → 640 ms</Label>
+  <Label x={110} y={494} size={32}>Search’s first-to-last observed weekly p95</Label>
+  <Label x={110} y={541} size={32}>fell 280 ms across the eight-week window.</Label>
+  <Label x={110} y={637} size={32}>Weekly p95 does not establish continuous</Label>
+  <Label x={110} y={683} size={32}>target compliance or individual request latency.</Label>
+  <Label x={110} y={779} size={32}>Search was improving before 29 June.</Label>
+  <Label x={110} y={825} size={32}>There was no control group, so the index</Label>
+  <Label x={110} y={871} size={32}>change’s effect cannot be isolated.</Label>
+  <Label x={1010} y={352} size={38} weight={600}>What the engineering lead should do next</Label>
+  <Label x={1010} y={437} size={34} weight={600} color={accent}>Restore reliable telemetry</Label>
+  <Label x={1010} y={487} size={32}>The 22 June search week is unknown.</Label>
+  <Label x={1010} y={533} size={32}>Check collection coverage before calling it stable.</Label>
+  <Label x={1010} y={631} size={34} weight={600} color={accent}>Check traffic mix and errors</Label>
+  <Label x={1010} y={681} size={32}>Request counts, mix, error rates and uncertainty</Label>
+  <Label x={1010} y={727} size={32}>estimates are unavailable. Gather them to test</Label>
+  <Label x={1010} y={773} size={32}>whether the observed weeks are comparable.</Label>
+  <Label x={1010} y={871} size={32} weight={500}>Hold off on attribution and declaring the work finished.</Label>
+</Frame>;
+
+export const meta = { title: 'Tide — Eight weeks of service latency' };
+export const notes = ['Synthetic hand-authored data; exact source and prompt accompany this entry.', 'Observational evidence only. No causal estimate is available.'];
+export default [Trend, Decision];

package/slides/migration/PROMPT.md

@@ -0,0 +1,38 @@
+Make a three-page presentation explaining a database-field migration to the
+engineers maintaining Juniper. Show how old and new application versions can
+coexist, when reads can switch, and where rollback stops being simple.
+
+---
+
+Juniper is a fictional team directory. It is renaming the database column
+full_name to display_name without changing the stored value or the public API.
+The table has an immutable numeric primary key. There is one primary database;
+all application reads and writes in this scenario use it.
+
+The old application reads and writes only full_name. First add a nullable
+display_name column. Deploy a bridge version that still reads full_name but
+writes both columns in the same transaction. Old versions may coexist during
+this deployment, so display_name is not yet authoritative.
+
+After all old writers and their in-flight transactions have drained, backfill
+in primary-key batches. Each batch uses a database UPDATE to copy the current
+full_name into display_name where they differ, including null differences.
+Updates lock the affected rows; no values are read into application memory
+and written back later. Bridge writes continue during the backfill.
+
+Switch reads to display_name only after the backfill finishes and a full-table
+comparison finds zero differences. Keep dual writes during the read switch
+and a seven-day observation period.
+
+---
+
+Before cleanup, a read-switch rollback uses the bridge version. Returning to
+the original old writer would require repeating writer drain and reconciliation
+before attempting another read switch.
+
+After the observation period, remove full_name access from the application,
+then drop the column only after no running version depends on it. Once dropped,
+rolling back to those older versions requires restoring and repopulating the
+column first. The seven days are a proposed policy, not proof of safety. No
+database engine or measured lock duration is supplied; test DDL and batch size
+on representative data before scheduling the migration.

package/slides/migration/index.tsx

@@ -0,0 +1,89 @@
+import type { ReactNode } from 'react';
+import '../../lib/typeface.ts';
+
+const ink = '#172D32', muted = '#4A6065', accent = '#00796B', line = '#CDD8D8';
+function Copy({ x, y, lines, size = 36, color = ink, weight = 400 }: {
+  x: number; y: number; lines: string[]; size?: number; color?: string; weight?: number;
+}) {
+  return <text x={x} y={y} fontSize={size} fill={color} fontWeight={weight} aria-label={lines.join(' ')}>
+    {lines.map((text, i) => <tspan key={i} x={x} dy={i ? size * 1.3 : 0}>{text}</tspan>)}
+  </text>;
+}
+function Frame({ number, title, description, children }: {
+  number: number; title: string; description: string; 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-${number} desc-${number}`} data-page={number}>
+    <title id={`title-${number}`}>{title}</title><desc id={`desc-${number}`}>{description}</desc>
+    <rect width="1920" height="1080" fill="#FFFFFF" />
+    <Copy x={100} y={145} lines={[title]} size={64} weight={600} />
+    {children}
+    <Copy x={1710} y={1026} lines={[`${number} / 3`]} size={28} color={muted} />
+  </svg>;
+}
+function Coexistence() {
+  return <Frame number={1} title="Keep full_name authoritative during rollout"
+    description="Juniper renames full_name to display_name without changing values or the public API. Add a nullable column, then deploy the bridge. Old applications read and write full_name only. The bridge reads full_name and writes both columns in one transaction. While old writers coexist, display_name is not authoritative. All reads and writes use one primary database.">
+    <Copy x={100} y={230} lines={['Rename full_name → display_name. Stored values and the public API stay unchanged.']} size={34} color={muted} />
+    <Copy x={100} y={280} lines={['Juniper · Fictional migration example']} size={28} color={muted} />
+    <Copy x={100} y={340} lines={['Add nullable display_name, then deploy the bridge.']} size={40} weight={500} color={accent} />
+    <Copy x={100} y={450} lines={['Running version']} size={30} color={muted} />
+    <Copy x={690} y={450} lines={['Reads']} size={30} color={muted} />
+    <Copy x={1170} y={450} lines={['Writes']} size={30} color={muted} />
+    <line x1={100} x2={1820} y1={480} y2={480} stroke={line} strokeWidth={2} />
+    <Copy x={100} y={552} lines={['Old application']} size={40} weight={500} />
+    <Copy x={690} y={552} lines={['full_name']} size={40} />
+    <Copy x={1170} y={552} lines={['full_name only']} size={40} />
+    <line x1={100} x2={1820} y1={595} y2={595} stroke={line} />
+    <Copy x={100} y={666} lines={['Bridge version']} size={40} weight={500} />
+    <Copy x={690} y={666} lines={['full_name']} size={40} />
+    <Copy x={1170} y={666} lines={['full_name + display_name']} size={36} />
+    <Copy x={1170} y={720} lines={['In the same transaction']} size={30} color={accent} />
+    <Copy x={100} y={825} lines={['Old writers can leave display_name stale.']} size={44} weight={500} color={accent} />
+    <Copy x={100} y={887} lines={['Do not switch reads yet. All application traffic uses one primary database.']} size={34} color={muted} />
+  </Frame>;
+}
+function Reconcile() {
+  return <Frame number={2} title="Gate the read switch on zero differences"
+    description="First drain all old writers and their in-flight transactions. Then backfill in immutable numeric primary-key batches with database UPDATEs copying current full_name to display_name wherever they differ, including null differences. Row locks protect affected rows; no application-memory read and write-back. Bridge writes continue. Only after completion and a full-table comparison finding zero differences may reads switch; keep dual writes.">
+    <Copy x={100} y={230} lines={['Bridge writes continue while the database reconciles current values.']} size={36} color={muted} />
+    <line x1={955} x2={955} y1={315} y2={905} stroke={line} strokeWidth={2} />
+    <Copy x={100} y={355} lines={['1  Drain old writers']} size={44} weight={500} color={accent} />
+    <Copy x={155} y={417} lines={['Wait for every old writer and its', 'in-flight transactions to finish.']} />
+    <Copy x={100} y={555} lines={['2  Backfill in primary-key batches']} size={40} weight={500} color={accent} />
+    <Copy x={155} y={617} lines={['Use the immutable numeric key.', 'Finish every batch before validation.']} />
+    <Copy x={100} y={755} lines={['3  Compare the full table']} size={44} weight={500} color={accent} />
+    <Copy x={155} y={817} lines={['Require zero differences.', 'Then switch reads; keep dual writes.']} />
+    <Copy x={1040} y={355} lines={['Inside each database UPDATE']} size={40} weight={500} />
+    <Copy x={1040} y={440} lines={['Current full_name → display_name', 'Only where values differ,', 'including null differences.']} size={36} />
+    <Copy x={1040} y={635} lines={['Updates lock the affected rows.']} size={36} weight={500} />
+    <Copy x={1040} y={705} lines={['No values are read into application', 'memory and written back later.']} size={34} color={muted} />
+    <Copy x={1040} y={845} lines={['The bridge keeps both columns in sync.']} size={32} color={accent} />
+  </Frame>;
+}
+function Rollback() {
+  return <Frame number={3} title="Dropping full_name changes the rollback path"
+    description="Read display_name and retain dual writes for a proposed seven-day observation period. Before cleanup, roll a read switch back to the bridge. Returning to the original old writer requires repeating writer drain and reconciliation before another read switch. After observation remove full_name access from the application, then drop only after no running version depends on it. After drop, older versions require restoring and repopulating full_name. Seven days is policy, not safety proof. No database engine or measured lock duration is supplied; test DDL and batch size on representative data before scheduling.">
+    <Copy x={100} y={230} lines={['Preserve a simple read rollback through observation; remove dependencies before DDL.']} size={34} color={muted} />
+    <Copy x={100} y={350} lines={['Observe for 7 days']} size={40} weight={500} color={accent} />
+    <Copy x={720} y={350} lines={['Remove old access']} size={40} weight={500} color={accent} />
+    <Copy x={1350} y={350} lines={['Drop full_name']} size={40} weight={500} color={accent} />
+    <path d="M475 337 H660 L648 327 M660 337 L648 347 M1085 337 H1290 L1278 327 M1290 337 L1278 347" fill="none" stroke={accent} strokeWidth={3} />
+    <Copy x={100} y={420} lines={['Read display_name.', 'Keep dual writes.']} size={34} />
+    <Copy x={720} y={420} lines={['After observation, remove', 'full_name access from the app.']} size={34} />
+    <Copy x={1350} y={420} lines={['Only when no running', 'version depends on it.']} size={34} />
+    <line x1={1250} x2={1250} y1={530} y2={808} stroke={ink} strokeWidth={3} strokeDasharray="10 10" />
+    <Copy x={100} y={590} lines={['Before cleanup: return to the bridge']} size={38} weight={500} />
+    <Copy x={100} y={655} lines={['For read-switch rollback, use the bridge version.', 'Returning to the original old writer means repeating', 'writer drain + reconciliation before another read switch.']} size={34} />
+    <Copy x={1350} y={590} lines={['After drop']} size={38} weight={500} />
+    <Copy x={1350} y={655} lines={['Restore and repopulate', 'full_name before rolling', 'back to older versions.']} size={34} />
+    <Copy x={100} y={870} lines={['Seven days is proposed policy, not proof of safety. No engine or lock duration is supplied.', 'Test DDL and batch size on representative data before scheduling the migration.']} size={32} color={muted} />
+  </Frame>;
+}
+export const meta = { title: 'Juniper · Rename a field safely', createdAt: '2026-09-12T00:00:00Z' };
+export const notes = [
+  'This is a fictional, single-primary scenario. Adding the nullable column precedes bridge rollout. Old writers are allowed during rollout but prevent treating the new column as authoritative.',
+  'The UPDATE is conceptual, not engine-specific SQL. Null-aware comparison must include null/value differences. Row locking and current database values avoid a stale application-memory copy. No lock-duration guarantee is implied.',
+  'The read-switch rollback described here is before cleanup. Once application access is removed, compatibility must be checked for the actual running versions. After the column is dropped, older versions require schema restoration and repopulation first.',
+];
+export default [Coexistence, Reconcile, Rollback];

package/slides/og-images/PROMPT.md

@@ -0,0 +1,21 @@
+Make three 1200×630 link-preview images for the fictional developer-tools project
+Clearpath: one for an article, one for a release and one for its repository.
+Make each subject understandable at a glance and keep them recognizable as
+one family when shown together.
+
+---
+
+Use these exact titles and supporting lines:
+
+- Article title: “A green build is not a release”. Supporting line: “Separate
+  checks, approval and publication.”
+- Release title: “Clearpath 0.4”. Supporting line: “Preview release notes before
+  exporting Markdown.”
+- Repository title: “Clearpath”. Supporting line: “A local release checklist
+  for small software teams.”
+
+Clearpath is a fictional command-line tool that reads a local checklist and
+prepares a release-note preview. A person reviews it before Markdown export;
+the tool does not publish releases. There is no supplied logo, website address,
+repository URL, adoption count or performance evidence. These images illustrate
+three link types rather than announcing a real project or release.

package/slides/og-images/index.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from 'react';
+import '../../lib/typeface.ts';
+
+const ink = '#172D28';
+const green = '#16704A';
+const muted = '#52625D';
+
+function Canvas({ name, description, children }: { name: string; description: string; children: ReactNode }) {
+  return <div style={{ width: 1920, height: 1080, background: '#FFFFFF', display: 'flex', alignItems: 'center' }}>
+    <svg data-artwork={name} xmlns="http://www.w3.org/2000/svg" width="1920" height="1008" viewBox="0 0 1200 630" role="img" aria-label={description} fontFamily="IBM Plex Sans" fill={ink}>
+      <rect width="1200" height="630" fill="#FFFFFF" />
+      {children}
+    </svg>
+  </div>;
+}
+
+function Check({ x, y }: { x: number; y: number }) {
+  return <g transform={`translate(${x} ${y})`} fill="none" stroke={green} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round">
+    <rect width="36" height="36" rx="8" />
+    <path d="M9 18l6 6 13-14" />
+  </g>;
+}
+
+const Article = () => <Canvas name="article" description="A green build is not a release. Separate checks, approval and publication. Article illustration: checks complete, human approval and publication remain distinct. Fictional Clearpath example.">
+  <text x="72" y="132" fontSize="76" fontWeight="600">A green build</text>
+  <text x="72" y="218" fontSize="76" fontWeight="600">is not a release</text>
+  <text x="74" y="287" fontSize="32" fill={muted}>Separate checks, approval and publication.</text>
+  <g transform="translate(74 384)">
+    <Check x={0} y={0} />
+    <text x="0" y="85" fontSize="30" fontWeight="500">Checks</text>
+    <circle cx="383" cy="18" r="18" fill="none" stroke={ink} strokeWidth="3" />
+    <text x="365" y="85" fontSize="30" fontWeight="500">Approval</text>
+    <rect x="730" y="0" width="36" height="36" rx="4" fill="none" stroke={ink} strokeWidth="3" />
+    <text x="730" y="85" fontSize="30" fontWeight="500">Publication</text>
+  </g>
+  <text x="74" y="569" fontSize="22" fill={muted}>Clearpath · Fictional project</text>
+</Canvas>;
+
+const Release = () => <Canvas name="release" description="Clearpath 0.4. Preview release notes before exporting Markdown. Release illustration: a person reviews a local preview before Markdown export; the tool does not publish releases. Fictional release.">
+  <text x="72" y="148" fontSize="96" fontWeight="600">Clearpath <tspan fill={green}>0.4</tspan></text>
+  <text x="74" y="219" fontSize="32" fill={muted}>Preview release notes before</text>
+  <text x="74" y="262" fontSize="32" fill={muted}>exporting Markdown.</text>
+  <g transform="translate(74 338)">
+    <rect width="650" height="153" rx="12" fill="none" stroke="#B5C5BE" strokeWidth="2" />
+    <text x="28" y="49" fontSize="28" fontWeight="500">Release-note preview</text>
+    <path d="M28 79H450 M28 104H370 M28 129H490" stroke="#B5C5BE" strokeWidth="6" />
+    <Check x={720} y={16} />
+    <text x="720" y="90" fontSize="28" fontWeight="500">Human review</text>
+    <text x="720" y="129" fontSize="24" fill={muted}>before export</text>
+  </g>
+  <text x="74" y="569" fontSize="22" fill={muted}>Fictional release · Does not publish releases</text>
+</Canvas>;
+
+const Repository = () => <Canvas name="repository" description="Clearpath. A local release checklist for small software teams. Repository illustration: a local checklist prepares a release-note preview for human review and Markdown export, without publishing. Fictional project.">
+  <text x="72" y="156" fontSize="110" fontWeight="600">Clearpath</text>
+  <text x="74" y="237" fontSize="34" fill={muted}>A local release checklist</text>
+  <text x="74" y="283" fontSize="34" fill={muted}>for small software teams.</text>
+  <g transform="translate(840 98)">
+    <rect width="270" height="340" rx="16" fill="none" stroke="#B5C5BE" strokeWidth="3" />
+    <Check x={32} y={46} /><path d="M94 64H230" stroke={green} strokeWidth="7" />
+    <Check x={32} y={130} /><path d="M94 148H203" stroke={green} strokeWidth="7" />
+    <rect x="32" y="214" width="36" height="36" rx="8" fill="none" stroke={muted} strokeWidth="3" />
+    <path d="M94 232H219" stroke="#B5C5BE" strokeWidth="7" />
+  </g>
+  <text x="74" y="425" fontSize="28" fontWeight="500" fill={green}>Review the release-note preview.</text>
+  <text x="74" y="469" fontSize="28" fill={muted}>Markdown export. No publishing.</text>
+  <text x="74" y="569" fontSize="22" fill={muted}>Fictional project</text>
+</Canvas>;
+
+export const meta = { title: 'Clearpath — link-preview images', createdAt: '2026-09-12T14:20:00Z' };
+export const notes = [
+  'Article link preview. Checks, human approval and publication are separate concerns. Clearpath does not publish releases.',
+  'Fictional release link preview, not a real release announcement. The preview must be reviewed by a person before Markdown export.',
+  'Fictional repository link preview. No repository URL, logo or adoption claims were supplied or invented.',
+];
+export default [Article, Release, Repository];

package/slides/product-introduction/PROMPT.md

@@ -0,0 +1,24 @@
+Make a three-page presentation introducing Patchnote to engineers and product
+managers at a small software team. Show how they can turn selected pull-request
+descriptions into a release-note draft, review it and export it. Use an
+illustrative interface to make the workflow concrete.
+
+---
+
+Patchnote is a fictional release-note drafting tool. A user pastes pull-request
+titles and descriptions into a release workspace and selects the entries to
+include. Patchnote groups them into Added, Changed and Fixed, then proposes a
+plain-English draft. A person edits and approves the draft before exporting it
+as Markdown.
+
+The draft can contain mistakes. Patchnote does not verify changes, connect to a
+repository or publish releases. We have no customer telemetry or measured time
+savings.
+
+For the illustrative release 0.8, use these inputs:
+- PR #142: Add CSV export for filtered results.
+- PR #147: Remember the selected date range between visits.
+- PR #153: Fix duplicate notification emails when a job is retried.
+- PR #155: Refactor internal test helpers.
+
+The first three are selected for the release. PR #155 is left out.

package/slides/product-introduction/index.tsx

@@ -0,0 +1,105 @@
+import type { ReactNode } from 'react';
+import { fontsReady } from '../../lib/typeface.ts';
+
+await fontsReady;
+
+const ink = '#172B35', muted = '#50616B', accent = '#006D77', line = '#CBD5DA';
+function Copy({ x, y, children, size = 34, color = ink, weight = 400 }: {
+  x: number; y: number; children: ReactNode; size?: number; color?: string; weight?: number;
+}) {
+  return <text x={x} y={y} fill={color} fontSize={size} fontWeight={weight}>{children}</text>;
+}
+function Frame({ title, subtitle, page, description, children }: {
+  title: string; subtitle: string; page: number; description: string; 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-label={`${title}. ${description}`} data-page={page}>
+    <rect width="1920" height="1080" fill="#FFFFFF" />
+    <Copy x={100} y={145} size={70} weight={600}>{title}</Copy>
+    <Copy x={100} y={216} size={36} color={muted}>{subtitle}</Copy>
+    {children}
+    <Copy x={1710} y={1030} size={28} color={muted}>{page} / 3</Copy>
+  </svg>;
+}
+function Window({ x, y, width, height, title, children }: {
+  x: number; y: number; width: number; height: number; title: string; children: ReactNode;
+}) {
+  return <g transform={`translate(${x} ${y})`}>
+    <rect width={width} height={height} rx={16} fill="#FFFFFF" stroke={line} strokeWidth={2} />
+    <Copy x={32} y={53} size={30} weight={500}>{title}</Copy>
+    <line x1={0} x2={width} y1={80} y2={80} stroke={line} />
+    {children}
+  </g>;
+}
+const Select = () => <Frame page={1} title="Patchnote turns selected PRs into a draft"
+  subtitle="Paste pull-request titles and descriptions, then choose what belongs in the release."
+  description="Release 0.8 selects PRs 142, 147 and 153; PR 155, refactoring internal test helpers, is left out. No repository connection.">
+  <Copy x={100} y={260} size={26} color={muted}>Fictional product · Illustrative interface</Copy>
+  <Window x={100} y={292} width={1180} height={613} title="Release 0.8 / Pasted entries">
+    {[
+      ['#142', 'Add CSV export for filtered results.', true],
+      ['#147', 'Remember the selected date range between visits.', true],
+      ['#153', 'Fix duplicate notification emails', true],
+      ['#155', 'Refactor internal test helpers.', false],
+    ].map(([id, title, selected], i) => <g key={String(id)} transform={`translate(32 ${115 + i * 111})`}>
+      <rect x={0} y={0} width={34} height={34} rx={5} fill={selected ? accent : '#FFFFFF'} stroke={selected ? accent : muted} strokeWidth={2} />
+      {selected && <path d="M8 17 L14 24 L27 10" stroke="#FFFFFF" strokeWidth={3} fill="none" />}
+      <Copy x={58} y={28} size={30} color={muted}>{id}</Copy>
+      <Copy x={161} y={28} size={32}>{title}</Copy>
+      {i === 2 && <Copy x={161} y={68} size={32}>when a job is retried.</Copy>}
+      {i === 3 && <Copy x={161} y={69} size={28} color={muted}>Left out of this release</Copy>}
+    </g>)}
+  </Window>
+  <Copy x={1370} y={361} size={48} weight={600}>3 selected</Copy>
+  <Copy x={1370} y={421} size={34} color={muted}>1 left out</Copy>
+  <rect x={1370} y={475} width={420} height={84} rx={10} fill={accent} />
+  <Copy x={1407} y={529} size={34} color="#FFFFFF" weight={500}>Generate draft →</Copy>
+  <Copy x={1370} y={700} size={34} weight={500}>You supply the inputs.</Copy>
+  <Copy x={1370} y={756} size={32} color={muted}>No repository connection.</Copy>
+</Frame>;
+
+const Review = () => <Frame page={2} title="Review the draft before approving it"
+  subtitle="Patchnote groups selected entries into Added, Changed and Fixed, then proposes plain English."
+  description="The proposed draft maps Added to PR 142, Changed to PR 147 and Fixed to PR 153. A person checks the input, edits the wording and approves. Drafts can contain mistakes; Patchnote does not verify changes.">
+  <Window x={100} y={292} width={1080} height={613} title="Release 0.8 / Proposed draft">
+    {[
+      ['Added', 'You can now export your filtered results', '#142'],
+      ['Changed', 'Your selected date range is remembered', '#147'],
+      ['Fixed', 'Fixed duplicate notification emails', '#153'],
+    ].map(([category, text, pr], i) => <g key={category} transform={`translate(36 ${142 + i * 155})`}>
+      <Copy x={0} y={0} size={30} color={accent} weight={600}>{category}</Copy>
+      <Copy x={900} y={0} size={28} color={muted}>{pr}</Copy>
+      <Copy x={0} y={52} size={36}>{text}</Copy>
+      {i === 0 && <Copy x={0} y={98} size={36}>in CSV format.</Copy>}
+      {i === 1 && <Copy x={0} y={98} size={36}>between visits.</Copy>}
+      {i === 2 && <Copy x={0} y={98} size={36}>when a job is retried.</Copy>}
+    </g>)}
+  </Window>
+  <Copy x={1280} y={343} size={40} weight={500}>A person decides</Copy>
+  <Copy x={1280} y={422} size={34}>Check against the inputs.</Copy>
+  <Copy x={1280} y={480} size={34}>Edit the wording.</Copy>
+  <Copy x={1280} y={538} size={34}>Approve the draft.</Copy>
+  <line x1={1280} y1={600} x2={1820} y2={600} stroke={line} />
+  <Copy x={1280} y={673} size={36} weight={500}>Drafts can contain mistakes.</Copy>
+  <Copy x={1280} y={736} size={32} color={muted}>Patchnote does not verify</Copy>
+  <Copy x={1280} y={782} size={32} color={muted}>the changes described.</Copy>
+</Frame>;
+
+const Export = () => <Frame page={3} title="Export the approved draft as Markdown"
+  subtitle="The reviewed release note leaves the workspace as text. Publishing remains outside Patchnote."
+  description="Illustrative approved release 0.8 Markdown contains Added: export filtered results as CSV; Changed: remember the selected date range between visits; Fixed: duplicate notification emails on job retry. PR 155 is absent. Patchnote does not publish releases. No customer telemetry or measured time savings.">
+  <Copy x={100} y={357} size={44} weight={600}>Ready after human review</Copy>
+  <Copy x={100} y={430} size={34}>The selected changes are included.</Copy>
+  <Copy x={100} y={485} size={34}>Internal test helpers stay out.</Copy>
+  <rect x={100} y={552} width={490} height={86} rx={10} fill={accent} />
+  <Copy x={140} y={607} size={34} color="#FFFFFF" weight={500}>Export Markdown →</Copy>
+  <Copy x={100} y={766} size={32} color={muted}>No customer telemetry or</Copy>
+  <Copy x={100} y={813} size={32} color={muted}>measured time savings.</Copy>
+  <Window x={770} y={292} width={1050} height={613} title="Release 0.8 / Markdown output">
+    {['# Release 0.8', '## Added', '- Export filtered results as CSV.', '## Changed', '- Remember the selected date range', '  between visits.', '## Fixed', '- Fix duplicate notification emails', '  when a job is retried.'].map((text, i) =>
+      <Copy key={i} x={38} y={139 + i * 51} size={34} weight={text.startsWith('#') ? 500 : 400} color={text.startsWith('#') ? accent : ink}>{text}</Copy>)}
+  </Window>
+</Frame>;
+
+export const meta = { title: 'Patchnote — from PRs to release notes', description: 'A fictional product introduction in three pages.' };
+export default [Select, Review, Export];

package/slides/research-brief/PROMPT.md

@@ -0,0 +1,40 @@
+Turn the research report below into a three-page briefing for the product
+and design team at Fern. Explain the observed problems, distinguish them
+from the team's interpretations and propose what to investigate next.
+
+Include a horizontal stacked-bar chart comparing completion before and after
+a hint for each task. Label the counts directly, with each bar totaling eight
+participants.
+
+---
+
+This is the complete fictional research report for this example. Fern is a
+shared workspace-booking product; all study records are hand-authored.
+
+The question was whether first-time users could reserve a desk and understand
+what to do if their plans changed. Eight volunteers from one company tried
+the same desktop prototype in individual moderated sessions. None had used
+Fern before. Everyone first booked a desk for a supplied date, then changed
+the booking date, then looked for cancellation. There was no comparison design.
+For each task, the moderator waited up to three minutes before offering a hint.
+
+Six of eight completed booking before a hint; two completed it after a hint.
+Four of eight changed the date before a hint; four completed it after a hint.
+Three of eight found cancellation before a hint; five found it after a hint.
+These are task counts for the same participants, not separate groups. Everyone
+eventually completed all three tasks. No task-time distribution was recorded.
+
+Session notes recorded that five participants looked in the calendar for a
+way to change a booking, while the prototype put that action under “My visits”.
+Four said “My visits” sounded like past activity. These observations can overlap;
+the notes do not provide a participant-by-participant mapping between them.
+
+The researchers interpret the navigation label and action placement as likely
+sources of confusion. The sessions do not separate their effects, and the
+fixed task order may have influenced later tasks. A proposed next study would
+compare clearer labels and calendar-based actions, vary task order and recruit
+people from more than one company. No alternative has been tested yet.
+
+This small volunteer sample cannot establish population completion rates,
+production adoption or mobile usability. The report supports investigating
+booking management, not claiming that a particular redesign will solve it.

package/slides/research-brief/index.tsx

@@ -0,0 +1,104 @@
+import type { ReactNode } from 'react';
+import '../../lib/typeface.ts';
+
+const ink = '#182B27';
+const muted = '#4F625C';
+const green = '#17634A';
+const pale = '#DAE9E1';
+
+function Copy({ x = 112, y, lines, size = 36, weight = 400, color = ink }: {
+  x?: number; y: number; lines: string[]; size?: number; weight?: number; color?: string;
+}) {
+  return <text x={x} y={y} fontSize={size} fontWeight={weight} fill={color}>
+    {lines.map((line, i) => <tspan key={i} x={x} dy={i ? size * 1.32 : 0}>{line}</tspan>)}
+  </text>;
+}
+
+function Frame({ title, page, description, children }: {
+  title: string; page: number; description: string; 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-label={`${title}. ${description}`}>
+    <rect width="1920" height="1080" fill="#FFFFFF" />
+    <Copy y={150} lines={[title]} size={64} weight={600} />
+    {children}
+    <Copy x={1770} y={1020} lines={[`${page} / 3`]} size={28} color={muted} />
+  </svg>;
+}
+
+const tasks = [
+  { label: 'Book a desk', before: 6, after: 2 },
+  { label: 'Change the date', before: 4, after: 4 },
+  { label: 'Find cancellation', before: 3, after: 5 },
+];
+
+function Completion() {
+  return <Frame title="Booking management needed more hints" page={1}
+    description="Fictional Fern research. Of the same eight participants, booking: six before a hint, two after; date change: four before, four after; cancellation: three before, five after. Everyone eventually completed all tasks.">
+    <Copy y={235} lines={['Fern · shared workspace booking · fictional, hand-authored study']} color={muted} />
+    <Copy y={320} lines={['8 first-time users from one company; individual moderated desktop sessions.']} />
+    <rect x={540} y={385} width={28} height={28} fill={green} />
+    <Copy x={585} y={410} lines={['Before a hint']} size={32} />
+    <rect x={930} y={385} width={28} height={28} fill={pale} />
+    <Copy x={975} y={410} lines={['After a hint']} size={32} />
+    <Copy x={1610} y={410} lines={['Total: 8']} size={32} color={muted} />
+    {tasks.map((task, i) => {
+      const y = 466 + i * 122;
+      return <g key={task.label} data-task={task.label}>
+        <Copy y={y + 53} lines={[task.label]} size={38} weight={500} />
+        <rect x={540} y={y} width={task.before * 150} height={80} fill={green} />
+        <rect x={540 + task.before * 150} y={y} width={task.after * 150} height={80} fill={pale} />
+        <text x={540 + task.before * 75} y={y + 53} textAnchor="middle" fontSize={38} fontWeight={600} fill="#FFFFFF">{task.before}</text>
+        <text x={540 + task.before * 150 + task.after * 75} y={y + 53} textAnchor="middle" fontSize={38} fontWeight={600} fill={ink}>{task.after}</text>
+      </g>;
+    })}
+    <Copy y={870} lines={['Same people, fixed order: book → change date → find cancellation.',
+      'Hints were offered after up to 3 minutes. All 8 eventually completed every task.',
+      'No task-time distribution or comparison design was recorded.']} size={34} color={muted} />
+  </Frame>;
+}
+
+function Observations() {
+  return <Frame title="The notes point to a navigation mismatch" page={2}
+    description="Five participants looked in the calendar to change a booking. Four said My visits sounded like past activity. These observations may overlap; no participant mapping is available. Researchers suspect both the label and placement, but cannot separate their effects.">
+    <Copy y={270} lines={['Observed in the sessions']} size={40} weight={600} color={green} />
+    <Copy x={1050} y={270} lines={['Researchers’ interpretation']} size={40} weight={600} color={green} />
+    <Copy y={380} lines={['5 of 8 looked in the calendar']} size={42} weight={500} />
+    <Copy y={444} lines={['to change a booking. The prototype', 'put that action under “My visits”.']} />
+    <Copy y={610} lines={['4 of 8 questioned “My visits”']} size={42} weight={500} />
+    <Copy y={674} lines={['They said it sounded like past activity.']} />
+    <Copy x={1050} y={380} lines={['The label and action placement', 'are likely sources of confusion.']} size={40} weight={500} />
+    <Copy x={1050} y={535} lines={['The sessions cannot separate', 'their effects. Fixed task order may', 'also have influenced later tasks.']} />
+    <Copy y={850} lines={['The two observations can overlap; the notes do not map them to individuals.']} size={34} color={muted} />
+    <Copy y={913} lines={['Fictional study evidence, not proof that either factor caused the difficulty.']} size={34} color={muted} />
+  </Frame>;
+}
+
+function NextStudy() {
+  return <Frame title="Test labels and placement before choosing a fix" page={3}
+    description="Proposed study, not tested: compare clearer labels and calendar-based actions, vary task order, and recruit from multiple companies. The small volunteer study supports investigating booking management, not claiming a redesign will solve it or estimating population completion, adoption, or mobile usability.">
+    <Copy y={255} lines={['Proposed next study · no alternative has been tested yet']} color={green} weight={500} />
+    <Copy y={366} lines={['Question to investigate']} size={34} weight={600} color={muted} />
+    <Copy x={850} y={366} lines={['What the comparison needs']} size={34} weight={600} color={muted} />
+    <line x1={112} x2={1808} y1={400} y2={400} stroke="#BAC9C2" strokeWidth={2} />
+    <Copy y={466} lines={['Does clearer wording help?']} size={38} weight={500} />
+    <Copy x={850} y={466} lines={['Compare clearer labels with “My visits”;', 'hold action placement constant.*']} />
+    <line x1={112} x2={1808} y1={558} y2={558} stroke="#BAC9C2" strokeWidth={2} />
+    <Copy y={622} lines={['Does calendar access help?']} size={38} weight={500} />
+    <Copy x={850} y={622} lines={['Compare calendar-based actions with the', 'current placement; hold wording constant.*']} />
+    <line x1={112} x2={1808} y1={715} y2={715} stroke="#BAC9C2" strokeWidth={2} />
+    <Copy y={774} lines={['Vary task order and recruit from more than one company.']} size={38} weight={500} />
+    <Copy y={834} lines={['*Suggested comparison structure; the report proposes testing labels and calendar actions.']} size={30} color={muted} />
+    <Copy y={909} lines={['Scope: investigate booking management. This small volunteer sample cannot establish',
+      'population completion rates, production adoption, mobile usability or a proven fix.']} size={34} color={muted} />
+  </Frame>;
+}
+
+export const meta = { title: 'Fern — Research briefing', createdAt: '2026-09-12T14:20:00Z' };
+export const notes = [
+  'Source: the complete fictional report in PROMPT.md. Counts are mutually exclusive before/after-hint outcomes for each task, for the same eight people.',
+  'Observations and interpretations are deliberately separated. No unique combined participant count can be derived.',
+  'Holding one variable constant is an author-proposed operationalization, explicitly marked on the page; no redesign efficacy is claimed.',
+];
+const pages = [Completion, Observations, NextStudy];
+export default pages;