@albionlabs/brochure-templates 0.0.1

package/dist/templates/investor-pitch/components/KeyPartners.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { Partner } from '../types.js';
+
+	interface Props {
+		title: string;
+		partners: Partner[];
+	}
+
+	let { title, partners }: Props = $props();
+</script>
+
+<section class="card">
+	<h2 class="section-title">{title}</h2>
+	<div class="partners-grid">
+		{#each partners as partner}
+			<div class="partner-cell">
+				<span class="partner-name">{partner.name}</span>
+				<span class="partner-desc">{partner.description}</span>
+			</div>
+		{/each}
+	</div>
+</section>
+
+<style>
+	.card {
+		background: #fff;
+		border: 1px solid #e2e8f0;
+		border-radius: 8px;
+		padding: 20px 24px;
+	}
+
+	.section-title {
+		font-size: 14px;
+		font-weight: 700;
+		color: #0f172a;
+		letter-spacing: 0.5px;
+		text-transform: uppercase;
+		margin: 0 0 14px;
+	}
+
+	.partners-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1px;
+		background: #e2e8f0;
+		border: 1px solid #e2e8f0;
+		border-radius: 6px;
+		overflow: hidden;
+	}
+
+	.partner-cell {
+		background: #fff;
+		padding: 12px 14px;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.partner-name {
+		font-size: 13px;
+		font-weight: 600;
+		color: #0f172a;
+	}
+
+	.partner-desc {
+		font-size: 11.5px;
+		color: #64748b;
+	}
+</style>

package/dist/templates/investor-pitch/components/KeyPartners.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Partner } from '../types.js';
+interface Props {
+    title: string;
+    partners: Partner[];
+}
+declare const KeyPartners: import("svelte").Component<Props, {}, "">;
+type KeyPartners = ReturnType<typeof KeyPartners>;
+export default KeyPartners;

package/dist/templates/investor-pitch/components/KeyRisks.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	interface Props {
+		title: string;
+		risks: string[];
+	}
+
+	let { title, risks }: Props = $props();
+</script>
+
+<section class="card">
+	<h2 class="section-title">{title}</h2>
+	<p class="risks-text">
+		{#each risks as risk, i}
+			{#if i > 0}
+				<span class="bullet"> &middot; </span>
+			{/if}{risk}{/each}
+	</p>
+</section>
+
+<style>
+	.card {
+		background: #fff;
+		border: 1px solid #e2e8f0;
+		border-radius: 8px;
+		padding: 20px 24px;
+	}
+
+	.section-title {
+		font-size: 14px;
+		font-weight: 700;
+		color: #0f172a;
+		letter-spacing: 0.5px;
+		text-transform: uppercase;
+		margin: 0 0 12px;
+	}
+
+	.risks-text {
+		font-size: 13px;
+		line-height: 1.6;
+		color: #374151;
+		margin: 0;
+	}
+
+	.bullet {
+		color: #94a3b8;
+		margin: 0 2px;
+	}
+</style>

package/dist/templates/investor-pitch/components/KeyRisks.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    title: string;
+    risks: string[];
+}
+declare const KeyRisks: import("svelte").Component<Props, {}, "">;
+type KeyRisks = ReturnType<typeof KeyRisks>;
+export default KeyRisks;

package/dist/templates/investor-pitch/components/PortfolioValueChart.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import type { PortfolioAsset, DevProbability } from '../types.js';
+
+	interface Props {
+		title: string;
+		assets: PortfolioAsset[];
+		maxValue: number;
+		gridLines: number[];
+		developmentProbabilities: DevProbability[];
+	}
+
+	let { title, assets, maxValue, gridLines, developmentProbabilities }: Props = $props();
+
+	const chartLeft = 110;
+	const chartRight = 480;
+	const chartTop = 10;
+	const barHeight = 18;
+	const barGap = 4;
+	const groupGap = 16;
+	const chartWidth = chartRight - chartLeft;
+
+	function xPos(val: number): number {
+		return chartLeft + (val / maxValue) * chartWidth;
+	}
+
+	function getBarGroups() {
+		let y = chartTop;
+		const groups: Array<{
+			name: string;
+			labelY: number;
+			bars: Array<{ x: number; width: number; y: number; height: number; color: string }>;
+		}> = [];
+
+		for (const asset of assets) {
+			const groupStart = y;
+			const bars = asset.bars.map((bar) => {
+				const barY = y;
+				y += barHeight + barGap;
+				return {
+					x: chartLeft,
+					width: (bar.value / maxValue) * chartWidth,
+					y: barY,
+					height: barHeight,
+					color: bar.color
+				};
+			});
+			const labelY = groupStart + ((y - barGap - groupStart) / 2);
+			groups.push({ name: asset.name, labelY, bars });
+			y += groupGap;
+		}
+
+		return { groups, totalHeight: y };
+	}
+
+	const { groups, totalHeight } = getBarGroups();
+	const svgHeight = totalHeight + 30;
+</script>
+
+<section class="card">
+	<h2 class="section-title">{title}</h2>
+	<svg viewBox="0 0 500 {svgHeight}" class="chart-svg" xmlns="http://www.w3.org/2000/svg">
+		<!-- Grid lines -->
+		{#each gridLines as val}
+			<line
+				x1={xPos(val)}
+				y1={chartTop - 4}
+				x2={xPos(val)}
+				y2={totalHeight}
+				stroke="#e2e8f0"
+				stroke-width="0.5"
+			/>
+			<text
+				x={xPos(val)}
+				y={totalHeight + 14}
+				text-anchor="middle"
+				font-size="9"
+				fill="#94a3b8">${val}m</text
+			>
+		{/each}
+
+		<!-- Bars -->
+		{#each groups as group}
+			<text
+				x={chartLeft - 8}
+				y={group.labelY + 5}
+				text-anchor="end"
+				font-size="10"
+				fill="#374151">{group.name}</text
+			>
+			{#each group.bars as bar}
+				<rect
+					x={bar.x}
+					y={bar.y}
+					width={bar.width}
+					height={bar.height}
+					fill={bar.color}
+					rx="2"
+				/>
+			{/each}
+		{/each}
+	</svg>
+	<div class="probabilities">
+		<span class="prob-label">Development Probabilities:</span>
+		{#each developmentProbabilities as prob}
+			<span class="prob-item" style="color: {prob.color}"
+				>{prob.name}: {prob.percentage}%</span
+			>
+		{/each}
+	</div>
+</section>
+
+<style>
+	.card {
+		background: #fff;
+		border: 1px solid #e2e8f0;
+		border-radius: 8px;
+		padding: 20px 24px;
+	}
+
+	.section-title {
+		font-size: 14px;
+		font-weight: 700;
+		color: #0f172a;
+		letter-spacing: 0.5px;
+		text-transform: uppercase;
+		margin: 0 0 10px;
+	}
+
+	.chart-svg {
+		width: 100%;
+		height: auto;
+	}
+
+	.probabilities {
+		margin-top: 8px;
+		font-size: 11px;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 12px;
+	}
+
+	.prob-label {
+		font-weight: 600;
+		color: #0f172a;
+	}
+
+	.prob-item {
+		font-weight: 600;
+	}
+</style>

package/dist/templates/investor-pitch/components/PortfolioValueChart.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { PortfolioAsset, DevProbability } from '../types.js';
+interface Props {
+    title: string;
+    assets: PortfolioAsset[];
+    maxValue: number;
+    gridLines: number[];
+    developmentProbabilities: DevProbability[];
+}
+declare const PortfolioValueChart: import("svelte").Component<Props, {}, "">;
+type PortfolioValueChart = ReturnType<typeof PortfolioValueChart>;
+export default PortfolioValueChart;

package/dist/templates/investor-pitch/components/SensitivitySection.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+	import type { InvestorPitch } from '../types.js';
+
+	interface Props {
+		data: InvestorPitch['priceSensitivity'];
+	}
+
+	let { data }: Props = $props();
+
+	const { chart, table, footnote } = $derived(data);
+
+	// Chart dimensions
+	const svgW = 460;
+	const svgH = 220;
+	const padLeft = 52;
+	const padRight = 10;
+	const padTop = 12;
+	const padBottom = 30;
+	const plotW = svgW - padLeft - padRight;
+	const plotH = svgH - padTop - padBottom;
+
+	function scaleX(val: number): number {
+		return padLeft + ((val - chart.xRange[0]) / (chart.xRange[1] - chart.xRange[0])) * plotW;
+	}
+
+	function scaleY(val: number): number {
+		return padTop + plotH - ((val - chart.yRange[0]) / (chart.yRange[1] - chart.yRange[0])) * plotH;
+	}
+
+	const linePath = $derived(
+		chart.dataPoints
+			.map((p, i) => `${i === 0 ? 'M' : 'L'} ${scaleX(p.x)} ${scaleY(p.y)}`)
+			.join(' ')
+	);
+
+	const xTicks = $derived(() => {
+		const ticks: number[] = [];
+		for (let v = chart.xRange[0]; v <= chart.xRange[1]; v += chart.xStep) {
+			ticks.push(v);
+		}
+		return ticks;
+	});
+
+	const yTicks = $derived(() => {
+		const ticks: number[] = [];
+		for (let v = chart.yRange[0]; v <= chart.yRange[1]; v += chart.yStep) {
+			ticks.push(v);
+		}
+		return ticks;
+	});
+</script>
+
+<section class="card">
+	<h2 class="section-title">{data.title}</h2>
+
+	<!-- Line Chart -->
+	<svg viewBox="0 0 {svgW} {svgH}" class="line-chart" xmlns="http://www.w3.org/2000/svg">
+		<!-- Y grid lines and labels -->
+		{#each yTicks() as val}
+			<line
+				x1={padLeft}
+				y1={scaleY(val)}
+				x2={svgW - padRight}
+				y2={scaleY(val)}
+				stroke="#e2e8f0"
+				stroke-width="0.5"
+			/>
+			<text
+				x={padLeft - 6}
+				y={scaleY(val) + 3}
+				text-anchor="end"
+				font-size="9"
+				fill="#94a3b8">${val}m</text
+			>
+		{/each}
+
+		<!-- X labels -->
+		{#each xTicks() as val}
+			<text
+				x={scaleX(val)}
+				y={svgH - 6}
+				text-anchor="middle"
+				font-size="9"
+				fill="#94a3b8">${val}</text
+			>
+		{/each}
+
+		<!-- Base case dashed line -->
+		<line
+			x1={scaleX(chart.baseCaseX)}
+			y1={padTop}
+			x2={scaleX(chart.baseCaseX)}
+			y2={padTop + plotH}
+			stroke="#94a3b8"
+			stroke-width="0.8"
+			stroke-dasharray="4,3"
+		/>
+		<text
+			x={scaleX(chart.baseCaseX)}
+			y={scaleY(chart.dataPoints.find((p) => p.x === chart.baseCaseX)?.y ?? 44) + 14}
+			text-anchor="middle"
+			font-size="8.5"
+			fill="#64748b"
+			font-weight="500">{chart.baseCaseLabel}</text
+		>
+
+		<!-- Area fill under line -->
+		<path
+			d="{linePath} L {scaleX(chart.dataPoints[chart.dataPoints.length - 1].x)} {padTop + plotH} L {scaleX(chart.dataPoints[0].x)} {padTop + plotH} Z"
+			fill="#0d9488"
+			fill-opacity="0.06"
+		/>
+
+		<!-- Line -->
+		<path d={linePath} fill="none" stroke="#0d9488" stroke-width="2" />
+
+		<!-- Data points -->
+		{#each chart.dataPoints as point}
+			<circle
+				cx={scaleX(point.x)}
+				cy={scaleY(point.y)}
+				r="3"
+				fill="#fff"
+				stroke="#0d9488"
+				stroke-width="1.5"
+			/>
+		{/each}
+	</svg>
+
+	<!-- Data Table -->
+	<table class="data-table">
+		<thead>
+			<tr>
+				{#each table.columns as col}
+					<th>{col.label}</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#each table.rows as row, rowIdx}
+				<tr class:highlight-row={rowIdx === table.highlightRowIndex}>
+					{#each table.columns as col}
+						<td
+							style={col.highlightColor ? `color: ${col.highlightColor}; font-weight: 600` : ''}
+						>
+							{row[col.key]}
+						</td>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+
+	{#if footnote}
+		<p class="footnote">{footnote}</p>
+	{/if}
+</section>
+
+<style>
+	.card {
+		background: #fff;
+		border: 1px solid #e2e8f0;
+		border-radius: 8px;
+		padding: 20px 24px;
+	}
+
+	.section-title {
+		font-size: 14px;
+		font-weight: 700;
+		color: #0f172a;
+		letter-spacing: 0.5px;
+		text-transform: uppercase;
+		margin: 0 0 10px;
+	}
+
+	.line-chart {
+		width: 100%;
+		height: auto;
+	}
+
+	.data-table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 12px;
+		margin-top: 12px;
+	}
+
+	.data-table th {
+		text-align: left;
+		font-weight: 600;
+		color: #374151;
+		padding: 6px 8px;
+		border-bottom: 1.5px solid #cbd5e1;
+		font-size: 11px;
+	}
+
+	.data-table td {
+		padding: 5px 8px;
+		color: #374151;
+		border-bottom: 1px solid #f1f5f9;
+	}
+
+	.highlight-row td {
+		font-weight: 700;
+		color: #0f172a;
+	}
+
+	.footnote {
+		font-size: 10.5px;
+		color: #94a3b8;
+		margin: 8px 0 0;
+		font-style: italic;
+	}
+</style>

package/dist/templates/investor-pitch/components/SensitivitySection.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { InvestorPitch } from '../types.js';
+interface Props {
+    data: InvestorPitch['priceSensitivity'];
+}
+declare const SensitivitySection: import("svelte").Component<Props, {}, "">;
+type SensitivitySection = ReturnType<typeof SensitivitySection>;
+export default SensitivitySection;

package/dist/templates/investor-pitch/components/ValuePropositions.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { ValueProposition } from '../types.js';
+
+	interface Props {
+		title: string;
+		items: ValueProposition[];
+	}
+
+	let { title, items }: Props = $props();
+</script>
+
+<section class="card">
+	<h2 class="section-title">{title}</h2>
+	<ul class="prop-list">
+		{#each items as item}
+			<li class="prop-item">
+				<span class="check">&#10003;</span>
+				<span class="prop-text">{@html item.text}</span>
+			</li>
+		{/each}
+	</ul>
+</section>
+
+<style>
+	.card {
+		background: #fff;
+		border: 1px solid #e2e8f0;
+		border-radius: 8px;
+		padding: 20px 24px;
+	}
+
+	.section-title {
+		font-size: 14px;
+		font-weight: 700;
+		color: #0f172a;
+		letter-spacing: 0.5px;
+		text-transform: uppercase;
+		margin: 0 0 14px;
+	}
+
+	.prop-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	.prop-item {
+		display: flex;
+		align-items: flex-start;
+		gap: 10px;
+		font-size: 13.5px;
+		line-height: 1.5;
+		color: #374151;
+	}
+
+	.check {
+		color: #10b981;
+		font-weight: 700;
+		font-size: 15px;
+		flex-shrink: 0;
+		margin-top: 1px;
+	}
+
+	.prop-text :global(strong) {
+		color: #0f172a;
+		font-weight: 600;
+	}
+</style>

package/dist/templates/investor-pitch/components/ValuePropositions.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ValueProposition } from '../types.js';
+interface Props {
+    title: string;
+    items: ValueProposition[];
+}
+declare const ValuePropositions: import("svelte").Component<Props, {}, "">;
+type ValuePropositions = ReturnType<typeof ValuePropositions>;
+export default ValuePropositions;

package/dist/templates/investor-pitch/index.d.ts

@@ -0,0 +1,5 @@
+export { default as InvestorPitchRenderer } from './InvestorPitchRenderer.svelte';
+export { investorPitchMeta } from './meta.js';
+export { default as investorPitchSchema } from './schema.json';
+export { default as investorPitchSampleData } from './sample.json';
+export type * from './types.js';

package/dist/templates/investor-pitch/index.js

@@ -0,0 +1,4 @@
+export { default as InvestorPitchRenderer } from './InvestorPitchRenderer.svelte';
+export { investorPitchMeta } from './meta.js';
+export { default as investorPitchSchema } from './schema.json';
+export { default as investorPitchSampleData } from './sample.json';

package/dist/templates/investor-pitch/meta.d.ts

@@ -0,0 +1,2 @@
+import type { TemplateMeta } from '../../types.js';
+export declare const investorPitchMeta: TemplateMeta;

package/dist/templates/investor-pitch/meta.js

@@ -0,0 +1,7 @@
+export const investorPitchMeta = {
+    id: 'investor-pitch',
+    name: 'Investor Pitch',
+    description: 'Single-page investor summary with key metrics, charts, and risk analysis',
+    version: '1.0.0',
+    category: 'investor-relations'
+};

package/dist/templates/investor-pitch/print.css

@@ -0,0 +1,12 @@
+@media print {
+	.pitch-page {
+		max-width: none;
+		border-radius: 0;
+		box-shadow: none;
+	}
+
+	@page {
+		size: A4 landscape;
+		margin: 10mm;
+	}
+}