shadcn-labs/pdfcn

Summary Add a Barcode component to the pdfcn registry -- Code 128, Code 39, or EAN-13 barcodes with caption. Qrcode exists; there is no linear-barcode equivalent, and receipts, packing slips, tickets, and shipping labels need one. Design reference: the barcode block in orbit (blocks.ts, create-pdf): { data, format, caption } with Code128 / Code39 / EAN13, e.g. Order ORB-2026-0042, Receipt RC004812. Orbit renders it as a native engine node at 44pt height. Component Spec interface BarcodeProps { data: string; format?: "Code128" | "Code39" | "EAN13"; caption?: string; height?: number; accentColor?: string; renderingBase?: "takumi" | "forme"; } Bars rendered with PDF-safe SVG primitives (same approach as Graph), foreground color on transparent/white. Caption line below in small muted text. Validation: EAN-13 needs 12-13 digits (show a clear fallback/placeholder when invalid rather than silently rendering garbage); Code39 uppercases input and supports its charset. Suggested app

Summary Add a Timeline component to the pdfcn registry -- dated milestones in a vertical spine (roadmap, work history, event schedule, project phases). Design reference: the timeline block in orbit (blocks.ts, create-pdf): { items: [{ date, title, body }] }, e.g. Mar 2026 Kick-off / Goals and scope agreed. Component Spec interface TimelineProps { items: { date: string; title: string; body?: string }[]; accentColor?: string; renderingBase?: "takumi" | "forme"; } Vertical accent spine with dot markers; date (muted, fixed width), title (semibold), body (muted) per milestone. Used by resume (experience), event-agenda (schedule), proposal (phases). Example Usage <Timeline items={[ { date: "2022 to now", title: "Lead Designer, Tidewave", body: "Led the redesign of the mobile banking app; activation up 23%." }, { date: "2019 to 2022", title: "Product Designer, Loom & Co", body: "Built the design system used by 40 engineers across 6 teams." }, ]} /> <Timeline items={[

Summary Add a Progress component to the pdfcn registry -- labeled percentage bars for skills, goals, and initiative tracking in reports, proposals, resumes, and lesson plans. Design reference: the progress block in orbit (blocks.ts, create-pdf): { items: [{ label, value }] } with 0-100 values, e.g. Design 90 / Build 65 / Launch 20. Component Spec interface ProgressProps { items: { label: string; value: number }[]; showValues?: boolean; accentColor?: string; renderingBase?: "takumi" | "forme"; } Label row (name + % value) above a track with a filled bar (theme primary by default). Values clamped to 0-100. Bar rendered with PDF-safe primitives (View backgrounds, no CSS gradients). Example Usage <Progress items={[ { label: "Self-serve onboarding", value: 70 }, { label: "SOC 2 Type II", value: 45 }, { label: "Mobile app beta", value: 20 }, ]} /> Acceptance Criteria Component at apps/web/registry/ following existing component patterns (*.tsx, *.styles.ts, *.types

Summary Add a Stats component to the pdfcn registry -- big metric tiles in a row (KPI label, large value, delta note) for reports and proposals. Design reference: the stats block in orbit (blocks.ts, create-pdf): { items: [{ label, value, note }] }, e.g. Revenue $1.2M +18% vs Q2 / Customers 3,480 +412 new / Churn 1.9% -0.4 pts. Component Spec interface StatsProps { items: { label: string; value: string; note?: string }[]; columns?: 2 | 3 | 4; accentColor?: string; renderingBase?: "takumi" | "forme"; } Evenly spaced tiles: small uppercase label, large semibold value, muted note line. Responsive column count (default 3, wraps on overflow). Used by quarterly-report and project-proposal blocks. Example Usage <Stats items={[ { label: "Revenue", value: "$1.2M", note: "+18% vs Q2" }, { label: "Customers", value: "3,480", note: "+412 new" }, { label: "Churn", value: "1.9%", note: "-0.4 pts" }, ]} /> <Stats items={[{ label: "Timeline", value: "14 weeks", note: "Oct to

Summary Add a Totals component to the pdfcn registry -- subtotal lines plus a grand total row (tax, discounts, shipping, "Paid by" total). Every invoice/quote/receipt block needs this and none of the table components provide the emphasized-total pattern. Design reference: the totals block in orbit (blocks.ts, create-pdf): { items: [{ label, value }], totalLabel, total }, e.g. Subtotal $8,250 / Tax (20%) $1,650 / Total due $9,900. Component Spec interface TotalsProps { items: { label: string; value: string }[]; totalLabel: string; total: string; align?: "right" | "full"; accentColor?: string; renderingBase?: "takumi" | "forme"; } Right-aligned label/value rows for the breakdown lines. Emphasized grand-total row (larger/bold, top border, theme primary). Right-aligned block or full-width row layout. Example Usage <Totals items={[{ label: "Subtotal", value: "$8,250" }, { label: "Tax (20%)", value: "$1,650" }]} totalLabel="Total due" total="$9,900" /> <Totals items={[{ label: