@ryanyahya/opendoc 0.4.0

package/starter/templates/monthly-report/index.tsx

@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react';
+import { Document, Pages, Paragraph, Section, TitleBlock, DataTable, Heading, TextSlot, Block, View, type TextFieldPath, type DocumentMeta } from 'opendoc';
+import { defineTemplate } from 'opendoc/template';
+import type { DocTheme } from 'opendoc/themes';
+import { parseMonthlyReport, type MonthlyReportData, type ReportMetric } from './schema';
+
+export { parseMonthlyReport } from './schema';
+export type { MonthlyReportData, NarrativeItem, ReportMetric, ReportRisk, ReportAction } from './schema';
+
+const dateLabel = (value: string) => {
+  const [year, month, day] = value.split('-').map(Number);
+  return `${day} ${['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][month - 1]} ${year}`;
+};
+const metricValue = (value: number | undefined, metric: ReportMetric) => value === undefined ? '—' :
+  `${value.toLocaleString('en-US', { minimumFractionDigits: metric.precision, maximumFractionDigits: metric.precision })}${metric.unit ? `${metric.unit === '%' ? '' : ' '}${metric.unit}` : ''}`;
+const statusLabel = { planned: 'Planned', 'in-progress': 'In progress', complete: 'Complete' };
+// Length-prefixing separates record IDs from reserved child suffixes such as -heading.
+const recordBlock = (kind: string, id: string) => `${kind}-${id.length}-${id}`;
+
+/** Keep only a short opening with its heading; arbitrary data prose remains free to flow. */
+function Narrative({ id, title, body, field, sectionHeading, level = 3, children }: {
+  id: string; title: ReactNode; body: string; field: TextFieldPath; sectionHeading?: ReactNode; level?: 2 | 3; children?: ReactNode;
+}) {
+  const opening = (lead: ReactNode) => <View wrap={false}>
+    {sectionHeading}<Section id={id} title={title} level={level} lead={lead} />
+  </View>;
+  if (body.length <= 420) return <>{opening(<TextSlot slot="body" field={field}>{body}</TextSlot>)}{children}</>;
+  const sentence = body.match(/^.{1,420}?[.!?](?=\s|$)/s)?.[0];
+  const boundary = sentence?.length ?? body.lastIndexOf(' ', 420);
+  // Never alter a supplied word by cutting it to fit the opening.
+  if (boundary < 1) return <>
+    {sectionHeading}
+    <Heading id={`${id}-heading`} level={level}>{title}</Heading>
+    <Paragraph id={`${id}-body`}><TextSlot slot="body" field={field}>{body}</TextSlot></Paragraph>{children}
+  </>;
+  const reason = 'This narrative flows in multiple blocks. Ask your agent to edit its full text in data.json.';
+  return <>{opening(<TextSlot slot="body-opening" reason={reason}>{body.slice(0, boundary)}</TextSlot>)}
+    <Paragraph id={`${id}-body`}><TextSlot slot="body-continuation" reason={reason}>{body.slice(boundary).trimStart()}</TextSlot></Paragraph>{children}
+  </>;
+}
+
+export const monthlyReportTemplate = (theme: DocTheme) => defineTemplate<MonthlyReportData>({
+  parse: parseMonthlyReport,
+  meta: data => ({
+    title: data.title,
+    description: `An operational review for ${data.organization}, ${dateLabel(data.period.start)} to ${dateLabel(data.period.end)}.`,
+    kind: 'report', theme: theme.id, author: data.preparedBy ?? data.organization,
+  } satisfies DocumentMeta),
+  render: data => <Document title={data.title} author={data.preparedBy ?? data.organization} theme={theme}>
+    <Pages title={`${data.organization} / ${data.title}`}>
+      <TitleBlock id="report-title" eyebrow="Monthly review" title={<TextSlot slot="title" field={['title']}>{data.title}</TextSlot>}
+        subtitle={`${dateLabel(data.period.start)} – ${dateLabel(data.period.end)}`}
+        byline={<><TextSlot slot="organization" field={['organization']}>{data.organization}</TextSlot>{data.preparedBy ? <> · Prepared by <TextSlot slot="preparedBy" field={['preparedBy']}>{data.preparedBy}</TextSlot></> : ''} · Issued {dateLabel(data.issuedOn)}</>} />
+      {data.synthetic && <Paragraph id="sample-notice" role="small" baseStyle={{ fontSize: 9, color: theme.muted, marginBottom: 16 }}>
+        Illustrative report. All names, activities, and figures are synthetic; this example is not a performance record.
+      </Paragraph>}
+      <Narrative id="summary" title="The month in view" body={data.summary} field={['summary']} level={2} />
+      {!!data.metrics.length && <DataTable id="performance-table" columns={[
+          { label: 'Measure', width: 2.3 }, { label: 'Actual', width: 1.15, align: 'right' },
+          { label: 'Target', width: 1.15, align: 'right' }, { label: 'Context', width: 3 },
+        ]} rowIds={data.metrics.map(metric => metric.id)} rows={data.metrics.map(metric => [
+          <TextSlot slot={`${recordBlock('metric', metric.id)}-label`} field={['metrics', { id: metric.id }, 'label']}>{metric.label}</TextSlot>,
+          <TextSlot slot={`${recordBlock('metric', metric.id)}-actual`} reason="Formatted numeric value. Ask your agent to change its inputs.">{metricValue(metric.value, metric)}</TextSlot>,
+          <TextSlot slot={`${recordBlock('metric', metric.id)}-target`} reason="Formatted numeric value. Ask your agent to change its inputs.">{metricValue(metric.target, metric)}</TextSlot>,
+          <TextSlot slot={`${recordBlock('metric', metric.id)}-note`} field={['metrics', { id: metric.id }, 'note']}>{metric.note ?? '—'}</TextSlot>,
+        ])} caption="Performance at a glance" />}
+      {!!data.highlights.length && <Block id="highlights">
+        {data.highlights.map((item, index) => <Narrative key={item.id} id={recordBlock('highlight', item.id)} sectionHeading={index === 0 && <Heading id="highlights-heading">What changed</Heading>} title={<TextSlot slot="title" field={['highlights', { id: item.id }, 'title']}>{item.title}</TextSlot>} body={item.body} field={['highlights', { id: item.id }, 'body']} />)}
+      </Block>}
+      {!!data.risks.length && <Block id="risks">
+        {data.risks.map((risk, index) => <Narrative key={risk.id} id={recordBlock('risk', risk.id)} sectionHeading={index === 0 && <Heading id="risks-heading">Risks and responses</Heading>} title={<><TextSlot slot="title" field={['risks', { id: risk.id }, 'title']}>{risk.title}</TextSlot> / {risk.level.charAt(0).toUpperCase()}{risk.level.slice(1)}</>}
+          body={risk.mitigation} field={['risks', { id: risk.id }, 'mitigation']}>
+          <Paragraph id={`${recordBlock('risk', risk.id)}-owner`} role="small" baseStyle={{ fontSize: 9, color: theme.muted }}>Owner: <TextSlot slot="owner" field={['risks', { id: risk.id }, 'owner']}>{risk.owner}</TextSlot></Paragraph>
+        </Narrative>)}
+      </Block>}
+      {!!data.actions.length && <DataTable id="actions-table" columns={[
+          { label: 'Commitment', width: 4 }, { label: 'Owner', width: 1.4 }, { label: 'Due', width: 1.4 }, { label: 'Status', width: 1.3 },
+        ]} rowIds={data.actions.map(action => action.id)} rows={data.actions.map(action => [
+          <TextSlot slot={`${recordBlock('action', action.id)}-title`} field={['actions', { id: action.id }, 'title']}>{action.title}</TextSlot>,
+          <TextSlot slot={`${recordBlock('action', action.id)}-owner`} field={['actions', { id: action.id }, 'owner']}>{action.owner}</TextSlot>,
+          <TextSlot slot={`${recordBlock('action', action.id)}-due`} reason="Formatted date. Ask your agent to change its input.">{dateLabel(action.due)}</TextSlot>,
+          <TextSlot slot={`${recordBlock('action', action.id)}-status`} reason="Reported status. Ask your agent to change its input.">{statusLabel[action.status]}</TextSlot>,
+        ])} caption="Next commitments" />}
+      {!!data.notes.length && <Block id="notes">
+        {data.notes.map((note, index) => <Narrative key={note.id} id={recordBlock('note', note.id)} sectionHeading={index === 0 && <Heading id="notes-heading">Reading the report</Heading>} title={<TextSlot slot="title" field={['notes', { id: note.id }, 'title']}>{note.title}</TextSlot>} body={note.body} field={['notes', { id: note.id }, 'body']} />)}
+      </Block>}
+      <Paragraph id="source-note" role="small" baseStyle={{ fontSize: 9, color: theme.muted, marginTop: 16 }}>
+        Basis of this report. <TextSlot slot="sourceNote" field={['sourceNote']}>{data.sourceNote}</TextSlot>
+      </Paragraph>
+    </Pages>
+  </Document>,
+});

package/starter/templates/monthly-report/preview.tsx

@@ -0,0 +1,14 @@
+import { monthlyReportTemplate } from './index';
+import { bindTemplate } from 'opendoc/template';
+import { neutral } from '../../themes';
+import { type DocTheme } from 'opendoc/themes';
+import example from './examples/typical.json';
+
+export const meta = { title: 'Monthly report specimen', description: 'A synthetic operational review showing the repeatable report template.', kind: 'report' as const, theme: neutral.id };
+
+export function Specimen({ theme = neutral }: { theme?: DocTheme }) {
+  const bound = bindTemplate(monthlyReportTemplate(theme), example);
+  return <bound.Document />;
+}
+
+export default function Preview() { return <Specimen />; }

package/starter/templates/monthly-report/schema.ts

@@ -0,0 +1,127 @@
+export interface NarrativeItem { id: string; title: string; body: string }
+export interface ReportMetric {
+  id: string; label: string; value: number; target?: number; unit?: string; precision: number; note?: string;
+}
+export interface ReportRisk {
+  id: string; title: string; level: 'low' | 'medium' | 'high'; owner: string; mitigation: string;
+}
+export interface ReportAction {
+  id: string; title: string; owner: string; due: string; status: 'planned' | 'in-progress' | 'complete';
+}
+export interface MonthlyReportData {
+  schemaVersion: 1;
+  title: string;
+  organization: string;
+  preparedBy?: string;
+  period: { start: string; end: string };
+  issuedOn: string;
+  synthetic: boolean;
+  sourceNote: string;
+  summary: string;
+  metrics: ReportMetric[];
+  highlights: NarrativeItem[];
+  risks: ReportRisk[];
+  actions: ReportAction[];
+  notes: NarrativeItem[];
+}
+
+/** Validate the report at its data boundary, before any PDF is rendered. */
+export function parseMonthlyReport(input: unknown): MonthlyReportData {
+  const errors: string[] = [];
+  const fail = (path: string, message: string) => { errors.push(`${path}: ${message}`); };
+  const object = (value: unknown, path: string): Record<string, unknown> => {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) { fail(path, 'expected an object'); return {}; }
+    return value as Record<string, unknown>;
+  };
+  const fields = (value: Record<string, unknown>, allowed: readonly string[], path: string) => {
+    for (const key of Object.keys(value)) if (!allowed.includes(key)) fail(`${path}.${key}`, 'unknown field');
+  };
+  const text = (value: unknown, path: string): string => {
+    if (typeof value !== 'string' || !value.trim()) { fail(path, 'expected non-empty text'); return ''; }
+    return value.trim();
+  };
+  const optionalText = (value: unknown, path: string): string | undefined => {
+    if (value === undefined || value === null || typeof value === 'string' && !value.trim()) return undefined;
+    return text(value, path);
+  };
+  const number = (value: unknown, path: string): number => {
+    if (typeof value !== 'number' || !Number.isFinite(value)) { fail(path, 'expected a finite number'); return 0; }
+    return value;
+  };
+  const date = (value: unknown, path: string): string => {
+    if (typeof value !== 'string' || !/^\d{4}-\d{2}-\d{2}$/.test(value)) { fail(path, 'use a real date in YYYY-MM-DD format'); return ''; }
+    const [year, month, day] = value.split('-').map(Number);
+    const leap = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+    const days = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+    if (year < 1 || month < 1 || month > 12 || day < 1 || day > (days[month - 1] ?? 0)) {
+      fail(path, 'use a real calendar date'); return '';
+    }
+    return value;
+  };
+  const oneOf = <T extends string>(value: unknown, choices: readonly T[], path: string): T => {
+    if (typeof value !== 'string' || !choices.includes(value as T)) { fail(path, `choose ${choices.join(', ')}`); return choices[0]; }
+    return value as T;
+  };
+  const items = <T>(value: unknown, path: string, parse: (item: Record<string, unknown>, path: string, id: string) => T): T[] => {
+    if (value === undefined || value === null) return [];
+    if (!Array.isArray(value)) { fail(path, 'expected an array, or null for no entries'); return []; }
+    const seen = new Set<string>();
+    return value.map((entry, index) => {
+      const itemPath = `${path}[${index}]`;
+      const item = object(entry, itemPath);
+      const id = text(item.id, `${itemPath}.id`);
+      if (id && !/^[a-zA-Z0-9][a-zA-Z0-9._-]*$/.test(id)) fail(`${itemPath}.id`, 'use a stable ID with letters, numbers, dots, hyphens, or underscores');
+      if (seen.has(id)) fail(`${itemPath}.id`, `duplicate ID "${id}" in ${path}`);
+      seen.add(id);
+      return parse(item, itemPath, id);
+    });
+  };
+  const narrative = (item: Record<string, unknown>, path: string, id: string): NarrativeItem => {
+    fields(item, ['id', 'title', 'body'], path);
+    return { id, title: text(item.title, `${path}.title`), body: text(item.body, `${path}.body`) };
+  };
+
+  const data = object(input, 'report');
+  fields(data, ['schemaVersion', 'title', 'organization', 'preparedBy', 'period', 'issuedOn', 'synthetic', 'sourceNote', 'summary', 'metrics', 'highlights', 'risks', 'actions', 'notes'], 'report');
+  if (data.schemaVersion !== 1) fail('report.schemaVersion', 'expected 1');
+  const period = object(data.period, 'report.period');
+  fields(period, ['start', 'end'], 'report.period');
+  const start = date(period.start, 'report.period.start');
+  const end = date(period.end, 'report.period.end');
+  if (start && end && start > end) fail('report.period.end', 'must be on or after period.start');
+  if (typeof data.synthetic !== 'boolean') fail('report.synthetic', 'expected true or false; explicitly identify illustrative data');
+
+  const result: MonthlyReportData = {
+    schemaVersion: 1,
+    title: text(data.title, 'report.title'),
+    organization: text(data.organization, 'report.organization'),
+    preparedBy: optionalText(data.preparedBy, 'report.preparedBy'),
+    period: { start, end },
+    issuedOn: date(data.issuedOn, 'report.issuedOn'),
+    synthetic: data.synthetic === true,
+    sourceNote: text(data.sourceNote, 'report.sourceNote'),
+    summary: text(data.summary, 'report.summary'),
+    metrics: items(data.metrics, 'report.metrics', (item, path, id) => {
+      fields(item, ['id', 'label', 'value', 'target', 'unit', 'precision', 'note'], path);
+      const precision = item.precision === undefined || item.precision === null ? 0 : number(item.precision, `${path}.precision`);
+      if (!Number.isInteger(precision) || precision < 0 || precision > 3) fail(`${path}.precision`, 'use a whole number from 0 to 3');
+      return { id, label: text(item.label, `${path}.label`), value: number(item.value, `${path}.value`),
+        target: item.target === undefined || item.target === null ? undefined : number(item.target, `${path}.target`),
+        unit: optionalText(item.unit, `${path}.unit`), precision, note: optionalText(item.note, `${path}.note`) };
+    }),
+    highlights: items(data.highlights, 'report.highlights', narrative),
+    risks: items(data.risks, 'report.risks', (item, path, id) => {
+      fields(item, ['id', 'title', 'level', 'owner', 'mitigation'], path);
+      return { id, title: text(item.title, `${path}.title`), level: oneOf(item.level, ['low', 'medium', 'high'], `${path}.level`),
+        owner: text(item.owner, `${path}.owner`), mitigation: text(item.mitigation, `${path}.mitigation`) };
+    }),
+    actions: items(data.actions, 'report.actions', (item, path, id) => {
+      fields(item, ['id', 'title', 'owner', 'due', 'status'], path);
+      return { id, title: text(item.title, `${path}.title`), owner: text(item.owner, `${path}.owner`),
+        due: date(item.due, `${path}.due`), status: oneOf(item.status, ['planned', 'in-progress', 'complete'], `${path}.status`) };
+    }),
+    notes: items(data.notes, 'report.notes', narrative),
+  };
+  if (errors.length) throw new Error(`Monthly report data needs attention:\n${errors.map(error => `- ${error}`).join('\n')}`);
+  return result;
+}

package/starter/templates/monthly-report/starter.tsx

@@ -0,0 +1,13 @@
+import { bindTemplate } from 'opendoc/template';
+import { monthlyReportTemplate } from '../../templates/monthly-report';
+// @ts-ignore The selected local theme module is inserted when this starter becomes a document.
+import { theme } from "__OPENDOC_THEME_MODULE__";
+import data from './data.json';
+
+const documentId = "__OPENDOC_DOCUMENT_ID__";
+const themeId = "__OPENDOC_THEME__";
+// This copied dataset is illustrative. Replace it with verified information before sharing.
+const bound = bindTemplate(monthlyReportTemplate(theme), data);
+export const meta = { ...bound.meta, theme: themeId };
+export const provenance = { template: 'templates/monthly-report/index.tsx', dataFile: `documents/${documentId}/data.json` };
+export default bound.Document;

package/starter/templates/monthly-report/template.json

@@ -0,0 +1,11 @@
+{
+  "name": "Monthly report",
+  "description": "A repeatable operational review with validated local data, period measures, narrative highlights, risks, and dated actions. Empty sections are omitted and long reports flow naturally.",
+  "format": "A4 · Data-driven report",
+  "structure": [
+    "The title, organization, reporting period, and preparation details share the first page with an opening summary.",
+    "Optional performance measures use explicit units and targets. Tables repeat their headers across pages.",
+    "Highlights, risks, actions, and reading notes retain stable record identities as their data changes or moves.",
+    "Each document owns its JSON input. A visible source note records the evidence basis; synthetic examples are identified in the PDF."
+  ]
+}

package/starter/templates/pitch-deck/AGENTS.md

@@ -0,0 +1,32 @@
+# Pitch deck
+
+A clear venture story with visual conviction: large statements, before/after contrast, an expansive product position, honest evidence, a readable market calculation and a concrete funding ask. This is a replaceable placeholder skeleton, not a fictional company or a claim that every founder needs fourteen slides.
+
+## Research basis
+
+Primary sources read on September 11, 2026:
+
+- [Kevin Hale, How to Design a Better Pitch Deck, Y Combinator](https://www.ycombinator.com/blog/how-to-design-a-better-pitch-deck/) (2015). The design uses large type, high contrast, one principal idea per slide and explicit takeaways. Product visuals should show a single understandable result; simplify or crop a complex screenshot. Hale's short Demo Day context calls for roughly five to seven remembered ideas, not a full investor-meeting deck. Select a short sequence for that use rather than presenting every slide here.
+- [Team Sequoia, Writing a Business Plan](https://sequoiacap.com/article/writing-a-business-plan) (2019). The skeleton covers company purpose, customer pain, solution, timing, market, alternatives, business model, team, financials when available and future vision. Its distinctive concern is clarity about the company and opportunity. These subjects are starting questions; their order and depth should follow the actual venture.
+
+The fourteen-slide meeting skeleton, evidence-chart frame, bottom-up market calculation, dedicated go-to-market slide, actuals/assumptions separation and milestone-based ask are this template's synthesis. Neither source prescribes this exact sequence, these layouts or a universal page count. No affiliation or endorsement is implied.
+
+## Editable story and sensible variations
+
+`starter.tsx` copies every slide, text prompt, image position and local layout choice into the instance. `index.tsx` supplies only native composition helpers. Change the story in `documents/<id>/index.tsx`; do not edit the shared template to correct one company.
+
+The starting order is purpose → pain → solution → product → timing → evidence → market → model → acquisition → alternatives → team → financial position → ask → vision. Move exceptional traction or uniquely relevant founders earlier. Merge pain and solution for a simple product. An unlaunched venture should show customer learning, a test or a real commitment instead of pretending to have commercial traction. Remove unavailable financial history; make planning assumptions explicit. Add appendix slides for financial detail, cohort evidence, market calculations, technical diligence or source records when needed.
+
+For a short stage pitch, select about five to seven key ideas, increase secondary copy sizes and remove footer detail that belongs in the leave-behind. For an investor meeting or emailed deck, keep the narrative understandable without a presenter and retain useful source notes. Avoid universal market-percentage claims and charts that imply observations where none exist.
+
+## Composition contract
+
+- `PitchDeck` wraps `Presentation`; `PitchSlide` is one explicit 960 × 540 page. Header titles generally use 38 pt; hero statements use 48–64 pt. These are adaptable presentation sizes, not automatic fitting rules.
+- `PitchText` places a bounded native paragraph with a transparent `body` slot. Its `x`, `y`, `w`, `h`, `size` and color are ordinary caller-controlled choices. A long title may use a smaller explicit size, a wider measure or a different composition. Keep a readable hierarchy; split a crowded slide instead of shrinking all copy.
+- `PitchPanel` supplies structural paper/dark surfaces and rules. `PitchImage` takes an optional managed `image={{item:'id',fit:'contain'}}` source. Use contain for charts and UI that must remain whole; cover with an intentional position for photography. Omitted media shows a labeled empty state; a named missing item is an error.
+- Catalog artwork stays empty. Import each company's actual media into that document's managed library, following [Media](../../docs/MEDIA.md). Use permissioned portraits and product images, and label concepts. The template includes no bundled brand logos or invented customer endorsements.
+- Caller theme fonts, paper, ink and role styles remain live. The geometry and explicit display sizes serve a slide canvas. Dark slides pair theme ink with theme paper; review contrast if adapting to an unusual palette.
+- Keep slide IDs, block IDs and `TextSlot` names stable when reordering or rewriting the same idea. All actual narrative props belong to the instance. New ideas receive new IDs.
+- Each bounded box declares clipping so excess content is rejected rather than silently discarded. Rendering must produce exactly one page per slide. Review every slide after substantial text or theme changes.
+
+The Neutral specimen shows the complete layout family. Sparse and long-title render checks, a second McKinsey Consulting theme and disposable creation checks exercise the contract. The current PDF remains the authority for visual review.

package/starter/templates/pitch-deck/index.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import * as F from '@formepdf/react';
+import { Block, Heading, MediaFrame, Paragraph, Presentation, Slide, TextSlot, type ImageFrameOptions } from 'opendoc';
+import { themePage, themeType, type DocTheme } from 'opendoc/themes';
+
+type Box = { x: number; y: number; w: number; h: number };
+const at = ({x,y,w,h}: Box): F.Style => ({position:'absolute',left:x,top:y,width:w,height:h,overflow:'hidden'});
+export type PitchImageSource = Pick<ImageFrameOptions,'fit'|'position'|'radius'> & {item:string;alt?:string};
+
+export function PitchDeck(props: Parameters<typeof Presentation>[0]) { return <Presentation {...props}/>; }
+
+/** A fixed slide canvas with an optional claim-led header. All narrative stays with the caller. */
+export function PitchSlide({id,theme,title,eyebrow,children,dark=false,titleSize=38,titleWidth=864,footer}: {
+  id:string;theme:DocTheme;title?:ReactNode;eyebrow?:ReactNode;children?:ReactNode;
+  dark?:boolean;titleSize?:number;titleWidth?:number;footer?:ReactNode;
+}) {
+  const ink=dark?theme.paper:theme.ink;
+  return <Slide id={id} padding={0} style={{...themePage(theme).style,backgroundColor:dark?theme.ink:theme.paper,lineBreaking:'greedy'}}>
+    {eyebrow && <F.View style={at({x:48,y:32,w:864,h:22})}><Paragraph id={`${id}-eyebrow`} role="label" style={{fontFamily:theme.body,fontSize:11,lineHeight:1.2,marginBottom:0,color:ink}}><TextSlot slot="eyebrow" from="eyebrow">{eyebrow}</TextSlot></Paragraph></F.View>}
+    {title && <F.View style={at({x:48,y:66,w:titleWidth,h:102})}><Heading id={`${id}-title`} level={2} style={{fontSize:titleSize,lineHeight:1.12,marginTop:0,marginBottom:0,color:ink}}><TextSlot slot="title" from="title">{title}</TextSlot></Heading></F.View>}
+    {children}
+    {footer && <F.View style={at({x:48,y:502,w:802,h:20})}><Paragraph id={`${id}-footer`} role="caption" style={{fontFamily:theme.body,fontSize:10,lineHeight:1.15,marginBottom:0,color:ink}}><TextSlot slot="footer" from="footer">{footer}</TextSlot></Paragraph></F.View>}
+    <F.View style={at({x:888,y:502,w:24,h:20})}><F.Text style={{...themeType(theme,'small'),fontFamily:theme.body,fontSize:10,lineHeight:1.15,textAlign:'left',color:ink}}>{'{{pageNumber}}'}</F.Text></F.View>
+  </Slide>;
+}
+
+/** Bounded, native, caller-owned copy. Explicit sizes are for presentation distance. */
+export function PitchText({id,theme,body,size=22,weight=400,color,role='body',...box}: Box & {
+  id:string;theme:DocTheme;body:ReactNode;size?:number;weight?:400|600;color?:string;role?:'body'|'label'|'caption'|'display';
+}) {
+  const typography = role==='display'?themeType(theme,'h1'):role==='body'?{fontFamily:theme.body}:themeType(theme,role);
+  return <F.View style={at(box)}><Paragraph id={id} style={{...typography,fontFamily:role==='display'?theme.heading:theme.body,fontSize:size,fontWeight:weight,lineHeight:role==='display'?1.06:1.25,marginTop:0,marginBottom:0,color:color??theme.ink}}><TextSlot slot="body" from="body">{body}</TextSlot></Paragraph></F.View>;
+}
+
+/** Structural surfaces do not introduce content or identities based on page order. */
+export function PitchPanel({id,theme,dark=false,rule=false,children,...box}:Box & {id:string;theme:DocTheme;dark?:boolean;rule?:boolean;children?:ReactNode}) {
+  return <Block id={id} style={{...at(box),backgroundColor:dark?theme.ink:theme.paper,...(rule?{borderWidth:1,borderColor:theme.line}:{})}}>{children}</Block>;
+}
+
+/** An omitted source is an intentional placeholder; a named missing item must fail normally. */
+export function PitchImage({id,theme,image,label,detail,...box}:Box & {id:string;theme:DocTheme;image?:PitchImageSource;label:string;detail?:string}) {
+  return <Block id={id} style={at(box)}>{image ? <MediaFrame {...image} width={box.w} height={box.h}/> : <F.View style={{width:box.w,height:box.h,borderWidth:1,borderColor:theme.line,backgroundColor:theme.paper,justifyContent:'center',padding:24}}>
+    <Paragraph id={`${id}-label`} style={{fontFamily:theme.body,fontSize:18,fontWeight:600,lineHeight:1.2,textAlign:'center',marginBottom:detail?10:0,color:theme.ink}}><TextSlot slot="label" from="label">{label}</TextSlot></Paragraph>
+    {detail && <Paragraph id={`${id}-detail`} role="caption" style={{fontFamily:theme.body,fontSize:12,lineHeight:1.3,textAlign:'center',marginBottom:0,color:theme.muted}}><TextSlot slot="detail" from="detail">{detail}</TextSlot></Paragraph>}
+  </F.View>}</Block>;
+}

package/starter/templates/pitch-deck/preview.tsx

@@ -0,0 +1,142 @@
+import { PitchDeck, PitchSlide, PitchText, PitchPanel, PitchImage } from './index';
+import { neutral } from '../../themes';
+import { type DocTheme } from 'opendoc/themes';
+
+const title = "Your company.\nOne clear promise.";
+export const meta = { title, description:'A venture pitch. Replace all prompts with supported company material.', kind:'pitch deck', theme:"neutral" };
+export const provenance = {template:'templates/pitch-deck/index.tsx'};
+
+// This is your editable story, not a required slide order. Keep stable IDs when reordering.
+// Add managed image={{item:'your-media-id'}} to a PitchImage after importing and reviewing media.
+// Sources, dates and assumptions belong beside the relevant evidence. Move detail to explicit appendix slides.
+export function Specimen({theme=neutral}: {theme?:DocTheme} = {}) {
+  return <PitchDeck title={title} theme={theme}>
+    <PitchSlide id="purpose" theme={theme} dark eyebrow="COMPANY PURPOSE" footer="[Founder name]  /  [Contact]  /  [Date]">
+      <PitchText id="company-name" theme={theme} x={48} y={108} w={680} h={150} body={title} role="display" size={64} weight={600} color={theme.paper}/>
+      <PitchText id="company-promise" theme={theme} x={48} y={290} w={720} h={112} body="We help [specific customer] achieve [valuable outcome]." size={32} color={theme.paper}/>
+      <PitchText id="round-context" theme={theme} x={48} y={448} w={760} h={30} body="[Fundraising stage]  /  One plain sentence. No category jargon." size={16} color={theme.paper}/>
+    </PitchSlide>
+
+    <PitchSlide id="problem" theme={theme} eyebrow="THE CUSTOMER PAIN" title="A real person. An expensive problem." footer="Evidence placeholder: source, date and customer context.">
+      <PitchText id="customer-situation" theme={theme} x={48} y={186} w={390} h={90} body="[Customer] struggles to [important job]." role="display" size={32} weight={600}/>
+      <PitchText id="customer-consequence" theme={theme} x={48} y={312} w={360} h={118} body="Describe the cost of the current workaround in time, money or lost opportunity." size={23}/>
+      <PitchPanel id="pain-evidence-panel" theme={theme} dark x={492} y={177} w={420} h={291}/>
+      <PitchText id="pain-evidence-label" theme={theme} x={524} y={208} w={356} h={25} body="VOICE OF THE CUSTOMER" role="label" size={11} color={theme.paper}/>
+      <PitchText id="pain-evidence" theme={theme} x={524} y={258} w={350} h={128} body="[A short, permissioned customer quote or measured observation.]" size={28} color={theme.paper}/>
+      <PitchText id="pain-attribution" theme={theme} x={524} y={425} w={350} h={25} body="[Attribution / study / interview date]" size={13} color={theme.paper}/>
+    </PitchSlide>
+
+    <PitchSlide id="solution" theme={theme} eyebrow="THE SOLUTION" title="Show the change your product makes." footer="Replace these prompts with one concrete customer outcome.">
+      <PitchPanel id="before-panel" theme={theme} rule x={48} y={178} w={416} h={286}/>
+      <PitchPanel id="after-panel" theme={theme} dark x={484} y={178} w={428} h={286}/>
+      <PitchText id="before-label" theme={theme} x={76} y={205} w={360} h={24} body="TODAY" role="label" size={12}/>
+      <PitchText id="before-outcome" theme={theme} x={76} y={252} w={360} h={110} body="[The frustrating status quo]" role="display" size={34} weight={600}/>
+      <PitchText id="before-detail" theme={theme} x={76} y={390} w={360} h={52} body="Describe the workaround, not a straw man." size={18}/>
+      <PitchText id="after-label" theme={theme} x={512} y={205} w={372} h={24} body="WITH YOUR PRODUCT" role="label" size={12} color={theme.paper}/>
+      <PitchText id="after-outcome" theme={theme} x={512} y={252} w={372} h={110} body="[A clear, valuable improvement]" role="display" size={34} weight={600} color={theme.paper}/>
+      <PitchText id="after-detail" theme={theme} x={512} y={390} w={372} h={52} body="Explain the unique insight that makes it possible." size={18} color={theme.paper}/>
+    </PitchSlide>
+
+    <PitchSlide id="product" theme={theme} eyebrow="THE PRODUCT" title="Make the experience immediately clear." footer="Product visual placeholder. Show the real experience; label concept work as a concept.">
+      <PitchImage id="product-visual" theme={theme} x={48} y={175} w={558} h={291} label="Product demonstration" detail="Use one cropped product view, physical product photograph or simplified demonstration."/>
+      <PitchText id="product-first" theme={theme} x={646} y={188} w={266} h={70} body="01  [Start with the customer's action]" size={23} weight={600}/>
+      <PitchText id="product-second" theme={theme} x={646} y={286} w={266} h={70} body="02  [Show the useful transformation]" size={23} weight={600}/>
+      <PitchText id="product-third" theme={theme} x={646} y={384} w={266} h={70} body="03  [End with the result]" size={23} weight={600}/>
+    </PitchSlide>
+
+    <PitchSlide id="why-now" theme={theme} dark eyebrow="WHY NOW" footer="Evidence placeholder: dates and sources for the enabling changes.">
+      <PitchText id="timing-claim" theme={theme} x={48} y={96} w={820} h={148} body={"What changed\nthat makes this possible now?"} role="display" size={53} weight={600} color={theme.paper}/>
+      <PitchText id="timing-shift" theme={theme} x={48} y={302} w={254} h={122} body={"[Technology shift]\nWhat became possible?"} size={25} color={theme.paper}/>
+      <PitchText id="timing-behavior" theme={theme} x={350} y={302} w={254} h={122} body={"[Behavior shift]\nWhat do customers now expect?"} size={25} color={theme.paper}/>
+      <PitchText id="timing-window" theme={theme} x={652} y={302} w={260} h={122} body={"[Market opening]\nWhy act in this window?"} size={25} color={theme.paper}/>
+    </PitchSlide>
+
+    <PitchSlide id="traction" theme={theme} eyebrow="TRACTION / VALIDATION" title="Lead with your strongest honest evidence." footer="Evidence placeholder: unit, period, cohort, source and whether observed or estimated.">
+      <PitchText id="traction-primary" theme={theme} x={48} y={190} w={304} h={93} body="[Metric]" role="display" size={60} weight={600}/>
+      <PitchText id="traction-definition" theme={theme} x={48} y={302} w={294} h={100} body="State what it measures and why it shows customers value the product." size={23}/>
+      <PitchText id="traction-stage-note" theme={theme} x={48} y={426} w={294} h={45} body="Pre-launch? Use validated learning or committed pilots." size={14}/>
+      <PitchImage id="traction-chart" theme={theme} x={400} y={180} w={512} h={285} label="Evidence chart or customer proof" detail="Add actual data with readable axes and a period. No invented growth curve."/>
+    </PitchSlide>
+
+    <PitchSlide id="market" theme={theme} eyebrow="MARKET POTENTIAL" title="Start with a customer you can actually reach." footer="Sizing placeholder: show source dates, assumptions, calculation and currency.">
+      <PitchText id="market-beachhead" theme={theme} x={48} y={177} w={830} h={55} body="[Specific initial customer segment + geography]" size={27} weight={600}/>
+      <PitchPanel id="market-formula-panel" theme={theme} dark x={48} y={255} w={864} h={122}/>
+      <PitchText id="market-count" theme={theme} x={76} y={276} w={244} h={77} body={"[Customers]\nReachable accounts"} size={24} color={theme.paper}/>
+      <PitchText id="market-multiply" theme={theme} x={338} y={289} w={40} h={50} body="×" size={36} color={theme.paper}/>
+      <PitchText id="market-value" theme={theme} x={398} y={276} w={224} h={77} body={"[Annual value]\nPer account"} size={24} color={theme.paper}/>
+      <PitchText id="market-equals" theme={theme} x={640} y={289} w={40} h={50} body="=" size={36} color={theme.paper}/>
+      <PitchText id="market-result" theme={theme} x={704} y={276} w={180} h={77} body={"[Market]\nAnnual value"} size={24} color={theme.paper}/>
+      <PitchText id="market-expansion" theme={theme} x={48} y={415} w={850} h={52} body="Then explain the credible path into adjacent customers or new uses." size={23}/>
+    </PitchSlide>
+
+    <PitchSlide id="business-model" theme={theme} eyebrow="BUSINESS MODEL" title="Who pays, for what, and why it works." footer="Economics placeholder: separate measured performance from assumptions.">
+      <PitchPanel id="business-pricing-panel" theme={theme} dark x={48} y={178} w={328} h={288}/>
+      <PitchText id="business-pricing-label" theme={theme} x={76} y={206} w={270} h={25} body="PRICING UNIT" role="label" size={12} color={theme.paper}/>
+      <PitchText id="business-pricing" theme={theme} x={76} y={256} w={270} h={116} body={"[Price]\nper [unit]"} role="display" size={42} weight={600} color={theme.paper}/>
+      <PitchText id="business-payer" theme={theme} x={76} y={404} w={270} h={42} body="[Buyer / budget owner]" size={19} color={theme.paper}/>
+      <PitchText id="business-value" theme={theme} x={424} y={192} w={472} h={98} body={"[Why this is worth paying for]\nConnect price with the buyer's value."} size={25} weight={600}/>
+      <PitchText id="business-economics" theme={theme} x={424} y={326} w={472} h={125} body={"[Economics that matter]\nExplain cost to serve, margin or repeat behavior using the measures relevant to your business."} size={23}/>
+    </PitchSlide>
+
+    <PitchSlide id="go-to-market" theme={theme} eyebrow="GO TO MARKET" title="A focused route to the first repeatable growth." footer="Channel evidence placeholder. Distinguish tested acquisition from the plan.">
+      <PitchText id="gtm-entry-label" theme={theme} x={48} y={185} w={252} h={40} body="01 / FIND" role="label" size={15}/>
+      <PitchText id="gtm-entry" theme={theme} x={48} y={247} w={252} h={170} body={"[Entry channel]\nWhere does your first audience already gather?"} size={25}/>
+      <PitchText id="gtm-convert-label" theme={theme} x={352} y={185} w={252} h={40} body="02 / CONVERT" role="label" size={15}/>
+      <PitchText id="gtm-convert" theme={theme} x={352} y={247} w={252} h={170} body={"[First value moment]\nWhat moves a prospect from interest into use?"} size={25}/>
+      <PitchText id="gtm-repeat-label" theme={theme} x={656} y={185} w={256} h={40} body="03 / REPEAT" role="label" size={15}/>
+      <PitchText id="gtm-repeat" theme={theme} x={656} y={247} w={256} h={170} body={"[Repeatable engine]\nWhat evidence makes you believe this can scale?"} size={25}/>
+      <PitchText id="gtm-learning" theme={theme} x={48} y={438} w={850} h={36} body="[One next experiment and the success criterion that earns more investment.]" size={18}/>
+    </PitchSlide>
+
+    <PitchSlide id="alternatives" theme={theme} eyebrow="COMPETITION / ALTERNATIVES" title="Show the trade-off that lets you win." footer="Comparison placeholder: verify alternatives, criteria and dates. Include doing nothing.">
+      <PitchText id="alternatives-column" theme={theme} x={48} y={174} w={254} h={27} body="CUSTOMER CHOICE" role="label" size={11}/>
+      <PitchText id="alternatives-strength-column" theme={theme} x={348} y={174} w={242} h={27} body="WHY THEY CHOOSE IT" role="label" size={11}/>
+      <PitchText id="alternatives-gap-column" theme={theme} x={642} y={174} w={270} h={27} body="WHERE YOU DIFFER" role="label" size={11}/>
+      <PitchPanel id="alternatives-current-rule" theme={theme} rule x={48} y={211} w={864} h={1}/>
+      <PitchText id="alternatives-current" theme={theme} x={48} y={228} w={254} h={65} body="[Current workaround]" size={23} weight={600}/>
+      <PitchText id="alternatives-current-strength" theme={theme} x={348} y={228} w={242} h={65} body="[Its genuine strength]" size={21}/>
+      <PitchText id="alternatives-current-gap" theme={theme} x={642} y={228} w={270} h={65} body="[Your relevant advantage]" size={21}/>
+      <PitchPanel id="alternatives-direct-rule" theme={theme} rule x={48} y={307} w={864} h={1}/>
+      <PitchText id="alternatives-direct" theme={theme} x={48} y={326} w={254} h={65} body="[Direct competitor]" size={23} weight={600}/>
+      <PitchText id="alternatives-direct-strength" theme={theme} x={348} y={326} w={242} h={65} body="[Its genuine strength]" size={21}/>
+      <PitchText id="alternatives-direct-gap" theme={theme} x={642} y={326} w={270} h={65} body="[Your relevant advantage]" size={21}/>
+      <PitchText id="alternatives-durability" theme={theme} x={48} y={429} w={840} h={47} body="[Explain why the advantage can endure as alternatives improve.]" size={22} weight={600}/>
+    </PitchSlide>
+
+    <PitchSlide id="team" theme={theme} eyebrow="THE TEAM" title="Why this team is right for this problem." footer="Team placeholders. Include relevant experience and real roles; use permissioned portraits.">
+      <PitchImage id="founder-one-portrait" theme={theme} x={48} y={178} w={178} h={180} label="Founder portrait"/>
+      <PitchImage id="founder-two-portrait" theme={theme} x={354} y={178} w={178} h={180} label="Founder portrait"/>
+      <PitchText id="founder-one-name" theme={theme} x={48} y={381} w={274} h={42} body="[Name / role]" size={25} weight={600}/>
+      <PitchText id="founder-one-fit" theme={theme} x={48} y={428} w={274} h={52} body="[One specific reason this person belongs here.]" size={18}/>
+      <PitchText id="founder-two-name" theme={theme} x={354} y={381} w={274} h={42} body="[Name / role]" size={25} weight={600}/>
+      <PitchText id="founder-two-fit" theme={theme} x={354} y={428} w={274} h={52} body="[One specific reason this person belongs here.]" size={18}/>
+      <PitchPanel id="team-insight-panel" theme={theme} dark x={660} y={178} w={252} h={302}/>
+      <PitchText id="team-insight" theme={theme} x={686} y={212} w={200} h={226} body={"[The earned insight]\nWhat have you learned together that others miss?"} size={28} color={theme.paper}/>
+    </PitchSlide>
+
+    <PitchSlide id="financial-position" theme={theme} eyebrow="FINANCIAL POSITION" title="Make the current position easy to understand." footer="Financial placeholders: currency, as-of date, period and basis. Label projections explicitly.">
+      <PitchText id="financial-actuals-label" theme={theme} x={48} y={185} w={386} h={26} body="ACTUALS / AS OF [DATE]" role="label" size={12}/>
+      <PitchText id="financial-actuals" theme={theme} x={48} y={238} w={386} h={184} body={"[Revenue, if any]\n[Cash and burn]\n[Runway at current plan]"} size={29}/>
+      <PitchPanel id="financial-plan-panel" theme={theme} rule x={484} y={177} w={428} h={287}/>
+      <PitchText id="financial-plan-label" theme={theme} x={512} y={205} w={372} h={26} body="PLAN / KEY ASSUMPTIONS" role="label" size={12}/>
+      <PitchText id="financial-plan" theme={theme} x={512} y={258} w={372} h={149} body={"[What drives the model]\nName the assumptions that matter and the next evidence needed."} size={27}/>
+      <PitchText id="financial-detail" theme={theme} x={48} y={441} w={386} h={38} body="Put detailed schedules in an appendix." size={17}/>
+    </PitchSlide>
+
+    <PitchSlide id="funding-ask" theme={theme} eyebrow="THE RAISE" title="Fund the next proof point." footer="Funding placeholders: currency, intended runway, milestone dates and dependencies.">
+      <PitchText id="raise-amount" theme={theme} x={48} y={185} w={348} h={120} body={"[Raise\namount]"} role="display" size={48} weight={600}/>
+      <PitchText id="raise-purpose" theme={theme} x={48} y={344} w={328} h={112} body={"[Runway / use of funds]\nExplain what this capital allows you to prove."} size={24}/>
+      <PitchText id="milestone-product" theme={theme} x={452} y={190} w={460} h={74} body={"01  [Product milestone]\n[Success criterion + target date]"} size={23}/>
+      <PitchText id="milestone-market" theme={theme} x={452} y={293} w={460} h={74} body={"02  [Customer milestone]\n[Success criterion + target date]"} size={23}/>
+      <PitchText id="milestone-business" theme={theme} x={452} y={396} w={460} h={74} body={"03  [Business milestone]\n[Success criterion + target date]"} size={23}/>
+    </PitchSlide>
+
+    <PitchSlide id="vision" theme={theme} dark eyebrow="THE VISION" footer="[Founder name]  /  [Email]  /  [Website]">
+      <PitchText id="vision-promise" theme={theme} x={48} y={106} w={822} h={220} body={"If this works,\nwhat becomes possible?"} role="display" size={62} weight={600} color={theme.paper}/>
+      <PitchText id="vision-future" theme={theme} x={48} y={347} w={750} h={85} body="[Describe the company you intend to build in five years.]" size={28} color={theme.paper}/>
+      <PitchText id="vision-next-step" theme={theme} x={48} y={449} w={800} h={35} body="[Clear next step for the investor]" size={20} color={theme.paper}/>
+    </PitchSlide>
+  </PitchDeck>;
+}
+
+export default Specimen;