@albionlabs/brochure-templates 0.0.1

package/README.md

@@ -0,0 +1,42 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv create --template minimal --types ts --no-install investor-pitch
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

package/dist/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { templateRegistry, getTemplate, listTemplates } from './registry.js';
+export type { TemplateMeta, TemplateDefinition } from './types.js';
+export { InvestorPitchRenderer, investorPitchMeta, investorPitchSchema, investorPitchSampleData } from './templates/investor-pitch/index.js';
+export type { InvestorPitch } from './templates/investor-pitch/types.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+// Registry
+export { templateRegistry, getTemplate, listTemplates } from './registry.js';
+// Investor Pitch template
+export { InvestorPitchRenderer, investorPitchMeta, investorPitchSchema, investorPitchSampleData } from './templates/investor-pitch/index.js';

package/dist/registry.d.ts

@@ -0,0 +1,4 @@
+import type { TemplateDefinition } from './types.js';
+export declare const templateRegistry: Map<string, TemplateDefinition<any>>;
+export declare function getTemplate(id: string): TemplateDefinition | undefined;
+export declare function listTemplates(): TemplateDefinition[];

package/dist/registry.js

@@ -0,0 +1,16 @@
+import { InvestorPitchRenderer, investorPitchMeta, investorPitchSchema, investorPitchSampleData } from './templates/investor-pitch/index.js';
+const investorPitchTemplate = {
+    meta: investorPitchMeta,
+    renderer: InvestorPitchRenderer,
+    schema: investorPitchSchema,
+    sampleData: investorPitchSampleData
+};
+export const templateRegistry = new Map([
+    ['investor-pitch', investorPitchTemplate]
+]);
+export function getTemplate(id) {
+    return templateRegistry.get(id);
+}
+export function listTemplates() {
+    return Array.from(templateRegistry.values());
+}

package/dist/shared/styles/print-base.css

@@ -0,0 +1,12 @@
+@media print {
+	*,
+	*::before,
+	*::after {
+		box-shadow: none !important;
+	}
+
+	body {
+		print-color-adjust: exact;
+		-webkit-print-color-adjust: exact;
+	}
+}

package/dist/templates/investor-pitch/InvestorPitchRenderer.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import type { InvestorPitch } from './types.js';
+	import Header from './components/Header.svelte';
+	import InvestmentThesis from './components/InvestmentThesis.svelte';
+	import ValuePropositions from './components/ValuePropositions.svelte';
+	import AssetLocation from './components/AssetLocation.svelte';
+	import PortfolioValueChart from './components/PortfolioValueChart.svelte';
+	import SensitivitySection from './components/SensitivitySection.svelte';
+	import DevelopmentTimeline from './components/DevelopmentTimeline.svelte';
+	import KeyPartners from './components/KeyPartners.svelte';
+	import KeyRisks from './components/KeyRisks.svelte';
+	import Footer from './components/Footer.svelte';
+
+	interface Props {
+		data: InvestorPitch;
+	}
+
+	let { data }: Props = $props();
+</script>
+
+<div class="pitch-page">
+	<Header
+		companyName={data.company.name}
+		subtitle={data.company.subtitle}
+		metrics={data.keyMetrics}
+	/>
+
+	<div class="content-grid">
+		<!-- Left Column -->
+		<div class="col-left">
+			<InvestmentThesis
+				title={data.investmentThesis.title}
+				content={data.investmentThesis.content}
+			/>
+			<ValuePropositions
+				title={data.valuePropositions.title}
+				items={data.valuePropositions.items}
+			/>
+			<AssetLocation
+				title={data.assetLocation.title}
+				assetLabels={data.assetLocation.assetLabels}
+				stats={data.assetLocation.stats}
+			/>
+			<PortfolioValueChart
+				title={data.portfolioValue.title}
+				assets={data.portfolioValue.assets}
+				maxValue={data.portfolioValue.maxValue}
+				gridLines={data.portfolioValue.gridLines}
+				developmentProbabilities={data.portfolioValue.developmentProbabilities}
+			/>
+		</div>
+
+		<!-- Right Column -->
+		<div class="col-right">
+			<SensitivitySection data={data.priceSensitivity} />
+			<DevelopmentTimeline
+				title={data.developmentTimeline.title}
+				milestones={data.developmentTimeline.milestones}
+			/>
+			<KeyPartners
+				title={data.keyPartners.title}
+				partners={data.keyPartners.partners}
+			/>
+			<KeyRisks title={data.keyRisks.title} risks={data.keyRisks.risks} />
+		</div>
+	</div>
+
+	<Footer items={data.footer.items} disclaimer={data.footer.disclaimer} />
+</div>
+
+<style>
+	@import '../../shared/styles/print-base.css';
+	@import '../investor-pitch/print.css';
+
+	.pitch-page {
+		width: 100%;
+		max-width: 1060px;
+		background: #fff;
+		border-radius: 8px;
+		overflow: hidden;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
+		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+		color: #0f172a;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	.content-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 16px;
+		padding: 16px 24px;
+	}
+
+	.col-left,
+	.col-right {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+</style>

package/dist/templates/investor-pitch/InvestorPitchRenderer.svelte.d.ts

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

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

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { AssetLabel, AssetStat } from '../types.js';
+
+	interface Props {
+		title: string;
+		assetLabels: AssetLabel[];
+		stats: AssetStat[];
+	}
+
+	let { title, assetLabels, stats }: Props = $props();
+</script>
+
+<section class="card">
+	<h2 class="section-title">{title}</h2>
+	<div class="location-grid">
+		<div class="map-container">
+			<svg viewBox="0 0 100 100" class="map-svg" xmlns="http://www.w3.org/2000/svg">
+				<!-- Simplified UK outline -->
+				<path
+					d="M 30,85 C 28,80 26,76 27,72 C 28,68 30,65 29,60 C 28,56 27,52 28,48
+					   C 29,44 30,40 31,36 C 32,32 31,28 32,24 C 33,20 34,16 36,14
+					   C 38,12 40,10 42,9 C 44,8 46,7 48,8 C 50,9 51,11 52,10
+					   C 53,9 54,7 56,8 C 58,9 57,12 56,14 C 55,16 54,18 55,20
+					   C 56,22 58,23 57,26 C 56,29 54,30 53,32 C 52,34 53,36 52,38
+					   C 51,40 50,41 49,43 C 48,45 49,48 48,50 C 47,52 45,53 44,55
+					   C 43,57 44,60 43,62 C 42,64 40,65 39,67 C 38,69 39,72 38,74
+					   C 37,76 35,78 34,80 C 33,82 32,84 30,85 Z"
+					fill="#e2e8f0"
+					stroke="#94a3b8"
+					stroke-width="0.5"
+				/>
+				<!-- Scotland top -->
+				<path
+					d="M 36,14 C 34,12 33,10 35,8 C 37,6 39,5 41,6 C 43,7 42,9 42,9"
+					fill="#e2e8f0"
+					stroke="#94a3b8"
+					stroke-width="0.5"
+				/>
+				<!-- UKCS dashed rectangle -->
+				<rect
+					x="48"
+					y="12"
+					width="35"
+					height="42"
+					fill="none"
+					stroke="#94a3b8"
+					stroke-width="0.6"
+					stroke-dasharray="2,1.5"
+					rx="1"
+				/>
+				<text x="52" y="17" font-size="4.5" fill="#64748b" font-weight="600">UKCS</text>
+
+				<!-- Asset markers -->
+				{#each assetLabels as asset}
+					<circle cx={asset.x} cy={asset.y} r="2" fill="#0d9488" opacity="0.8" />
+					<text
+						x={asset.x + 3}
+						y={asset.y + 1.5}
+						font-size="4"
+						fill="#374151"
+						font-weight="500">{asset.name}</text
+					>
+				{/each}
+			</svg>
+		</div>
+		<div class="stats-grid">
+			{#each stats as stat}
+				<div class="stat-item">
+					<span class="stat-label">{stat.label}</span>
+					<span class="stat-value">{stat.value}</span>
+					<span class="stat-desc">{stat.description}</span>
+				</div>
+			{/each}
+		</div>
+	</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;
+	}
+
+	.location-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 16px;
+		align-items: start;
+	}
+
+	.map-container {
+		display: flex;
+		justify-content: center;
+	}
+
+	.map-svg {
+		width: 100%;
+		max-width: 180px;
+		height: auto;
+	}
+
+	.stats-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 16px;
+	}
+
+	.stat-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+	}
+
+	.stat-label {
+		font-size: 11px;
+		color: #64748b;
+		font-weight: 500;
+	}
+
+	.stat-value {
+		font-size: 28px;
+		font-weight: 700;
+		color: #0f172a;
+		line-height: 1.2;
+	}
+
+	.stat-desc {
+		font-size: 11px;
+		color: #64748b;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { AssetLabel, AssetStat } from '../types.js';
+interface Props {
+    title: string;
+    assetLabels: AssetLabel[];
+    stats: AssetStat[];
+}
+declare const AssetLocation: import("svelte").Component<Props, {}, "">;
+type AssetLocation = ReturnType<typeof AssetLocation>;
+export default AssetLocation;

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { TimelineMilestone } from '../types.js';
+
+	interface Props {
+		title: string;
+		milestones: TimelineMilestone[];
+	}
+
+	let { title, milestones }: Props = $props();
+</script>
+
+<section class="card">
+	<h2 class="section-title">{title}</h2>
+	<div class="timeline">
+		<div class="timeline-track"></div>
+		{#each milestones as milestone, i}
+			<div class="milestone" style="left: {(i / (milestones.length - 1)) * 100}%">
+				<div class="dot" style="background: {milestone.color}"></div>
+				<div class="milestone-year">{milestone.year}</div>
+				<div class="milestone-label">{milestone.label}</div>
+			</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 20px;
+	}
+
+	.timeline {
+		position: relative;
+		height: 80px;
+		margin: 0 20px;
+	}
+
+	.timeline-track {
+		position: absolute;
+		top: 8px;
+		left: 0;
+		right: 0;
+		height: 2px;
+		background: #e2e8f0;
+	}
+
+	.milestone {
+		position: absolute;
+		transform: translateX(-50%);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: max-content;
+	}
+
+	.dot {
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+
+	.milestone-year {
+		font-size: 14px;
+		font-weight: 700;
+		color: #0f172a;
+		margin-top: 8px;
+	}
+
+	.milestone-label {
+		font-size: 10.5px;
+		color: #64748b;
+		text-align: center;
+		line-height: 1.3;
+		white-space: pre-line;
+	}
+</style>

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

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

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { FooterItem } from '../types.js';
+
+	interface Props {
+		items: FooterItem[];
+		disclaimer: string;
+	}
+
+	let { items, disclaimer }: Props = $props();
+</script>
+
+<footer class="footer">
+	<p class="footer-meta">
+		{#each items as item, i}{#if i > 0}<span class="sep">&nbsp;|&nbsp;</span>{/if}<strong>{item.label}:</strong>&nbsp;{item.value}{/each}
+	</p>
+	<p class="footer-disclaimer">{disclaimer}</p>
+</footer>
+
+<style>
+	.footer {
+		text-align: center;
+		padding: 20px 24px 16px;
+		border-top: 1px solid #e2e8f0;
+	}
+
+	.footer-meta {
+		font-size: 12px;
+		color: #374151;
+		margin: 0;
+	}
+
+	.footer-meta strong {
+		font-weight: 700;
+	}
+
+	.sep {
+		color: #94a3b8;
+	}
+
+	.footer-disclaimer {
+		font-size: 10.5px;
+		color: #94a3b8;
+		margin: 6px 0 0;
+		font-style: italic;
+	}
+</style>

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

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

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { KeyMetric } from '../types.js';
+
+	interface Props {
+		companyName: string;
+		subtitle: string;
+		metrics: KeyMetric[];
+	}
+
+	let { companyName, subtitle, metrics }: Props = $props();
+</script>
+
+<header class="header">
+	<h1 class="company-name">{companyName}</h1>
+	<p class="subtitle">{subtitle}</p>
+</header>
+
+<div class="metrics-bar">
+	{#each metrics as metric}
+		<div class="metric">
+			<span class="metric-label">{metric.label}</span>
+			<span class="metric-value" class:highlight={metric.highlight}>{metric.value}</span>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.header {
+		background: #1a2332;
+		padding: 24px 32px 20px;
+		text-align: center;
+	}
+
+	.company-name {
+		color: #fff;
+		font-size: 28px;
+		font-weight: 800;
+		letter-spacing: 1.5px;
+		margin: 0;
+	}
+
+	.subtitle {
+		color: #94a3b8;
+		font-size: 13px;
+		margin: 6px 0 0;
+		letter-spacing: 0.3px;
+	}
+
+	.metrics-bar {
+		display: grid;
+		grid-template-columns: repeat(6, 1fr);
+		gap: 0;
+		padding: 16px 24px;
+		background: #fff;
+		border-bottom: 1px solid #e2e8f0;
+	}
+
+	.metric {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 8px 12px;
+		border: 1px solid #e2e8f0;
+		border-radius: 8px;
+		margin: 0 4px;
+	}
+
+	.metric-label {
+		font-size: 10px;
+		font-weight: 500;
+		color: #64748b;
+		letter-spacing: 0.5px;
+		text-transform: uppercase;
+	}
+
+	.metric-value {
+		font-size: 22px;
+		font-weight: 700;
+		color: #0f172a;
+		margin-top: 2px;
+	}
+
+	.metric-value.highlight {
+		color: #10b981;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { KeyMetric } from '../types.js';
+interface Props {
+    companyName: string;
+    subtitle: string;
+    metrics: KeyMetric[];
+}
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+	interface Props {
+		title: string;
+		content: string;
+	}
+
+	let { title, content }: Props = $props();
+</script>
+
+<section class="card">
+	<h2 class="section-title">{title}</h2>
+	<p class="thesis-content">{@html content}</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 14px;
+	}
+
+	.thesis-content {
+		font-size: 14px;
+		line-height: 1.6;
+		color: #374151;
+		margin: 0;
+	}
+
+	.thesis-content :global(strong) {
+		color: #0f172a;
+		font-weight: 700;
+	}
+</style>

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

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