From f1cee5e25f598bc5dcff49c1fbe3a670b6626383 Mon Sep 17 00:00:00 2001 From: DemchaAV Date: Mon, 1 Jun 2026 18:20:40 +0100 Subject: [PATCH 1/6] =?UTF-8?q?chore(site):=20import=20Next.js=20showcase?= =?UTF-8?q?=20draft=20as=20site/=20(vanilla=20=E2=80=94=20pre-audit)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Imports the Next.js + TypeScript + Tailwind showcase site draft provided by the user (originally authored under C:\Users\Demch\Downloads\GraphCompose\nextjs) verbatim into the repo as a new top-level `site/` folder. No code changes yet — this commit is the baseline against which subsequent audit commits diff cleanly. Structure: site/app/ Next.js App Router entry (layout, page, globals.css) site/components/ 13 React components (TopBar, Hero, Playground, PdfPreview, Pipeline, Gallery, Positioning, Engineering, Cta, Footer, etc.) site/lib/ presets.tsx (3 playground code samples), gallery.ts (14 CV preset cards), deps.ts (Maven/Gradle snippets), highlight.ts (tiny Java highlighter) site/public/previews/ placeholder for real PDFs site/.github/workflows/ deploy.yml (static export → Pages) Build pipeline: Next.js 14 App Router, static export via `next build` → `./out`. Deployable to GitHub Pages. Known issues this baseline does NOT yet address (will be fixed in subsequent commits on this branch): 1. `lib/presets.tsx` — all 3 code samples (hello / invoice / cv) use API that does not match the actual GraphCompose surface: - `import io.github.demchaav.graphcompose.*` should be `com.demcha.compose.*` (groupId vs package mismatch) - `PdfRenderingSession.create()` does not exist; real entry is `DocumentSession` via `GraphCompose.document().create()` - `.compose(session).writeTo(Path.of(...))` not chainable; real terminals are `session.buildPdf()` / `toPdfBytes()` / `render(backend)` - `addSection(s -> s.addParagraph(...))` should be `module(...)` - `s.softPanel()` / `s.accentStrip()` require explicit args - `CvDocument.builder().name(...).title(...).summary(...)` has a different shape — real CvDocument is a record `(CvIdentity, List)` whose builder mirrors that 2. `lib/gallery.ts` — 14 entries; the actual cv/v2 lineup has 16 presets (boxed_sections, minimal_underlined, modern_professional, nordic_clean, centered_headline, blue_banner, editorial_blue, classic_serif, compact_mono, executive, panel, timeline_minimal, engineering_resume, monogram_sidebar, sidebar_portrait, mint_editorial). 3. `lib/deps.ts` — Maven/Gradle snippets need to pin `io.github.demchaav:graph-compose:1.6.8` (the hyphenated artifactId from the v1.6.6 cut). 4. `next build` not yet verified — first audit pass will run it. Tracked in the v1.6.8 readiness taskboard as Site-1..Site-6. --- site/.github/workflows/deploy.yml | 48 ++++ site/.gitignore | 25 ++ site/README.md | 84 ++++++ site/app/globals.css | 419 ++++++++++++++++++++++++++++++ site/app/layout.tsx | 47 ++++ site/app/page.tsx | 27 ++ site/components/Cta.tsx | 82 ++++++ site/components/Engineering.tsx | 72 +++++ site/components/Footer.tsx | 15 ++ site/components/Gallery.tsx | 83 ++++++ site/components/Hero.tsx | 104 ++++++++ site/components/PaperPage.tsx | 149 +++++++++++ site/components/PdfPreview.tsx | 117 +++++++++ site/components/Pipeline.tsx | 149 +++++++++++ site/components/Playground.tsx | 188 ++++++++++++++ site/components/Positioning.tsx | 38 +++ site/components/Reveal.tsx | 47 ++++ site/components/TopBar.tsx | 61 +++++ site/lib/deps.ts | 10 + site/lib/gallery.ts | 38 +++ site/lib/highlight.ts | 21 ++ site/lib/presets.tsx | 93 +++++++ site/next-env.d.ts | 5 + site/next.config.mjs | 14 + site/package.json | 28 ++ site/postcss.config.mjs | 7 + site/public/previews/README.md | 42 +++ site/public/previews/cv.png | Bin 0 -> 62916 bytes site/public/previews/hello.png | Bin 0 -> 62540 bytes site/public/previews/invoice.png | Bin 0 -> 61463 bytes site/tailwind.config.ts | 34 +++ site/tsconfig.json | 21 ++ 32 files changed, 2068 insertions(+) create mode 100644 site/.github/workflows/deploy.yml create mode 100644 site/.gitignore create mode 100644 site/README.md create mode 100644 site/app/globals.css create mode 100644 site/app/layout.tsx create mode 100644 site/app/page.tsx create mode 100644 site/components/Cta.tsx create mode 100644 site/components/Engineering.tsx create mode 100644 site/components/Footer.tsx create mode 100644 site/components/Gallery.tsx create mode 100644 site/components/Hero.tsx create mode 100644 site/components/PaperPage.tsx create mode 100644 site/components/PdfPreview.tsx create mode 100644 site/components/Pipeline.tsx create mode 100644 site/components/Playground.tsx create mode 100644 site/components/Positioning.tsx create mode 100644 site/components/Reveal.tsx create mode 100644 site/components/TopBar.tsx create mode 100644 site/lib/deps.ts create mode 100644 site/lib/gallery.ts create mode 100644 site/lib/highlight.ts create mode 100644 site/lib/presets.tsx create mode 100644 site/next-env.d.ts create mode 100644 site/next.config.mjs create mode 100644 site/package.json create mode 100644 site/postcss.config.mjs create mode 100644 site/public/previews/README.md create mode 100644 site/public/previews/cv.png create mode 100644 site/public/previews/hello.png create mode 100644 site/public/previews/invoice.png create mode 100644 site/tailwind.config.ts create mode 100644 site/tsconfig.json diff --git a/site/.github/workflows/deploy.yml b/site/.github/workflows/deploy.yml new file mode 100644 index 00000000..b4968db6 --- /dev/null +++ b/site/.github/workflows/deploy.yml @@ -0,0 +1,48 @@ +name: Deploy to GitHub Pages + +# Static export (next build → ./out) deployed to GitHub Pages. +# For a PROJECT page (user.github.io/), also uncomment basePath / +# assetPrefix in next.config.mjs so assets resolve under the sub-path. + +on: + push: + branches: [main] + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: pages + cancel-in-progress: true + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v4 + with: + version: 9 + - uses: actions/setup-node@v4 + with: + node-version: 20 + cache: pnpm + - run: pnpm install --frozen-lockfile + - run: pnpm build + - uses: actions/configure-pages@v5 + - uses: actions/upload-pages-artifact@v3 + with: + path: ./out + + deploy: + needs: build + runs-on: ubuntu-latest + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + steps: + - id: deployment + uses: actions/deploy-pages@v4 diff --git a/site/.gitignore b/site/.gitignore new file mode 100644 index 00000000..91279146 --- /dev/null +++ b/site/.gitignore @@ -0,0 +1,25 @@ +# dependencies +/node_modules + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# typescript +*.tsbuildinfo + +# env +.env*.local diff --git a/site/README.md b/site/README.md new file mode 100644 index 00000000..16af2912 --- /dev/null +++ b/site/README.md @@ -0,0 +1,84 @@ +# GraphCompose — showcase site + +One-page showcase for **GraphCompose**, a declarative Java DSL for business PDFs. +Built with Next.js (App Router) + TypeScript + Tailwind. Fully static — no SSR, +no trackers, no analytics. + +## Run it + +```bash +pnpm i # or: npm i / yarn +pnpm dev # http://localhost:3000 +``` + +Build a static bundle (emits `./out`, deployable to GitHub Pages / Vercel / any +static host): + +```bash +pnpm build +``` + +> Deploying under a sub-path on GitHub Pages (e.g. `user.github.io/graph-compose`)? +> Uncomment `basePath` / `assetPrefix` in `next.config.mjs`. + +## Where things live + +``` +app/ + layout.tsx fonts (next/font: Inter + JetBrains Mono), , theme-init + page.tsx section order + globals.css ← design tokens + all styles (see "Theming" below) +components/ + TopBar.tsx sticky nav + dark-mode toggle + Hero.tsx §1 code → PDF split, flowing arrow + Playground.tsx §2 Monaco editor + preset tabs + DSL-feature chips + PdfPreview.tsx pdf.js renderer (real PDFs) with CSS fallback + PaperPage.tsx CSS recreations of BusinessTheme output (the fallback) + Pipeline.tsx §3 scroll-driven 4-step pipeline + SVG diagrams + Gallery.tsx §4 14-template grid, paired-letter hover, modal + Positioning.tsx §5 comparison table + Engineering.tsx §6 culture cards + mini changelog + Cta.tsx §7 dependency snippet (copy) + contact + Footer.tsx + Reveal.tsx fade-in-on-scroll wrapper (respects reduced-motion) +lib/ + presets.tsx playground examples + which code lines each chip highlights + gallery.ts the 14 CV presets (name, accent, layout variant, blurb) + deps.ts Maven / Gradle snippets + highlight.ts tiny Java highlighter for static 
 blocks
+public/previews/    drop real PDFs here (see its README)
+```
+
+## PDF previews
+
+The playground shows **real PDFs** via pdf.js. Put them in `public/previews/`
+(`hello.pdf`, `invoice.pdf`, `cv.pdf`) — see `public/previews/README.md` for how
+to generate them with GraphCompose. Until a file is present, a CSS fallback page
+renders, so the site never looks broken.
+
+## Theming — change the accent in ONE place
+
+The whole palette is CSS variables in `app/globals.css`. To recolour the site,
+edit a single value:
+
+```css
+:root{
+  --ink: #1F2A44;   /* ← accent (charcoal-blue). Change this. */
+}
+```
+
+`--bg` (milky) and `--bg-2` (warm off-white) are the two neutral grounds. The
+dark theme overrides the same variables under `[data-theme="dark"]`. Tailwind
+reads these vars (`tailwind.config.ts`), so utilities and tokens never drift.
+
+## Accessibility & motion
+
+- Every interaction is keyboard-reachable; the modal traps Escape and restores focus.
+- All scroll-/loop-driven motion is disabled under `prefers-reduced-motion`
+  (the pipeline falls back to four static stills).
+
+## Notes
+
+- Monaco loads client-side only (`ssr: false`) and uses two custom themes
+  (`gc-light` / `gc-dark`) that track the page theme.
+- No external analytics or trackers by design.
diff --git a/site/app/globals.css b/site/app/globals.css
new file mode 100644
index 00000000..caa60689
--- /dev/null
+++ b/site/app/globals.css
@@ -0,0 +1,419 @@
+/* Tailwind layers — utilities available alongside the token system below.
+   The palette lives entirely in CSS variables; edit --ink to recolour the site. */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ===========================================================
+   GraphCompose showcase — design system
+   Inter (UI) · JetBrains Mono (code) · printed-paper aesthetic
+   Accent: charcoal-blue. No gradients / blur / glass.
+   =========================================================== */
+
+:root{
+  /* palette — light (default) */
+  --bg:        #FAF8F4;  /* milky */
+  --bg-2:      #F1ECE3;  /* warm off-white */
+  --paper:     #FFFFFF;
+  --ink:       #1F2A44;  /* accent charcoal-blue */
+  --ink-2:     #34405E;
+  --text:      #26282B;  /* warm charcoal body */
+  --muted:     #6B6B66;
+  --faint:     #97968F;
+  --line:      #E2DCCF;  /* hairline, warm */
+  --line-2:    #D3CCBC;
+  --panel:     #F6F3EC;  /* soft panel */
+  --accent-soft:#E7EAF0; /* tint of ink for fills */
+  --code-bg:   #FBFAF7;
+  --code-text: #2B3142;
+  --ok:        #3C6E47;
+  --shadow:    0 1px 0 rgba(31,42,68,.04);
+  --paper-shadow: 0 18px 40px -28px rgba(31,42,68,.45), 0 2px 8px -4px rgba(31,42,68,.18);
+
+  --maxw: 1200px;
+  --gut: 24px;
+  --air: 120px;            /* between-section air, desktop */
+
+  --mono: var(--font-mono), ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --sans: var(--font-inter), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+
+[data-theme="dark"]{
+  --bg:        #14161C;
+  --bg-2:      #181B22;
+  --paper:     #1E222B;
+  --ink:       #A9BCE2;
+  --ink-2:     #C2D0EE;
+  --text:      #E7E5DF;
+  --muted:     #9A9C9E;
+  --faint:     #6E7176;
+  --line:      #2A2F3A;
+  --line-2:    #353B47;
+  --panel:     #20242E;
+  --accent-soft:#262C3A;
+  --code-bg:   #181B22;
+  --code-text: #CBD3E6;
+  --ok:        #7FB58C;
+  --paper-shadow: 0 18px 40px -26px rgba(0,0,0,.7), 0 2px 10px -4px rgba(0,0,0,.5);
+}
+
+*{box-sizing:border-box;}
+html{scroll-behavior:smooth;}
+@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
+
+body{
+  margin:0;
+  background:var(--bg);
+  color:var(--text);
+  font-family:var(--sans);
+  font-size:17px;
+  line-height:1.55;
+  font-feature-settings:"cv05" 1,"ss01" 1;
+  -webkit-font-smoothing:antialiased;
+  text-rendering:optimizeLegibility;
+  transition:background .35s ease, color .35s ease;
+}
+h1,h2,h3{font-weight:600; color:var(--ink); letter-spacing:-.012em; line-height:1.12; margin:0;}
+h1{font-size:clamp(34px,4.4vw,56px); letter-spacing:-.02em;}
+h2{font-size:clamp(26px,3vw,38px);}
+h3{font-size:20px;}
+p{margin:0; text-wrap:pretty;}
+a{color:inherit; text-decoration:none;}
+code,kbd,pre,.mono{font-family:var(--mono);}
+::selection{background:var(--ink); color:var(--bg);}
+
+.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);}
+.section{padding:var(--air) 0;}
+.eyebrow{
+  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
+  color:var(--faint); display:flex; align-items:center; gap:10px; margin-bottom:22px;
+}
+.eyebrow::before{content:""; width:26px; height:1px; background:var(--line-2);}
+.lead{font-size:19px; color:var(--muted); line-height:1.5; max-width:62ch;}
+
+/* ---------- buttons ---------- */
+.btn{
+  font-family:var(--sans); font-size:15px; font-weight:500; line-height:1;
+  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
+  padding:14px 20px; border:1px solid var(--ink); border-radius:2px;
+  background:var(--ink); color:var(--bg);
+  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
+}
+.btn:hover{transform:translateY(-1px);}
+.btn:active{transform:translateY(0);}
+.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-2);}
+.btn.ghost:hover{border-color:var(--ink);}
+.btn svg{width:16px; height:16px;}
+:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px;}
+
+/* ---------- top bar ---------- */
+.topbar{
+  position:sticky; top:0; z-index:60;
+  background:color-mix(in srgb, var(--bg) 86%, transparent);
+  -webkit-backdrop-filter:saturate(1) blur(0px); /* no glass blur — kept crisp */
+  border-bottom:1px solid transparent;
+  transition:border-color .3s ease, background .3s ease;
+}
+.topbar.scrolled{border-bottom-color:var(--line);}
+.topbar .wrap{display:flex; align-items:center; height:62px; gap:28px;}
+.brand{font-family:var(--mono); font-weight:700; font-size:16px; letter-spacing:-.02em; color:var(--ink); display:flex; align-items:center; gap:9px;}
+.brand .mark{width:18px; height:18px; border:2px solid var(--ink); position:relative; border-radius:2px;}
+.brand .mark::after{content:""; position:absolute; inset:3px 3px auto 3px; height:2px; background:var(--ink);}
+.navlinks{display:flex; gap:22px; margin-left:auto; font-size:14px; color:var(--muted);}
+.navlinks a{position:relative; padding:4px 0; transition:color .2s ease;}
+.navlinks a:hover{color:var(--ink);}
+.navlinks a::after{content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--ink); transition:width .25s ease;}
+.navlinks a:hover::after{width:100%;}
+.topbar-actions{display:flex; align-items:center; gap:6px;}
+.iconbtn{
+  width:38px; height:38px; display:grid; place-items:center; border-radius:2px;
+  border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer;
+  transition:background .2s ease, color .2s ease, border-color .2s ease;
+}
+.iconbtn:hover{background:var(--bg-2); color:var(--ink); border-color:var(--line);}
+.iconbtn svg{width:18px; height:18px;}
+@media (max-width:820px){ .navlinks{display:none;} }
+
+/* ---------- generic panel / card ---------- */
+.panel{background:var(--paper); border:1px solid var(--line); border-radius:4px;}
+.softpanel{background:var(--panel); border:1px solid var(--line); border-radius:4px;}
+
+/* ---------- code block ---------- */
+.code{
+  background:var(--code-bg); border:1px solid var(--line); border-radius:4px;
+  font-family:var(--mono); font-size:13.5px; line-height:1.65; color:var(--code-text);
+  overflow:auto;
+}
+.code .tk-key{color:#9B5C2E;}      /* keyword     */
+.code .tk-type{color:#1F6F6B;}     /* type        */
+.code .tk-str{color:#3C6E47;}      /* string      */
+.code .tk-mth{color:var(--ink);}   /* method      */
+.code .tk-com{color:var(--faint); font-style:italic;}
+.code .tk-num{color:#9B5C2E;}
+[data-theme="dark"] .code .tk-key{color:#D6A06A;}
+[data-theme="dark"] .code .tk-type{color:#76C4BD;}
+[data-theme="dark"] .code .tk-str{color:#9FCBA8;}
+[data-theme="dark"] .code .tk-num{color:#D6A06A;}
+
+.win-dots{display:flex; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line); align-items:center;}
+.win-dots i{width:10px; height:10px; border-radius:50%; background:var(--line-2); display:block;}
+.win-title{font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-left:6px; letter-spacing:.03em;}
+
+/* ===========================================================
+   PDF "paper" page — recreation of BusinessTheme output
+   (in the shipped Next.js build these are real PDFs via pdf.js)
+   =========================================================== */
+.pdfframe{
+  position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:4px;
+  padding:26px; display:flex; justify-content:center; align-items:flex-start;
+}
+.pdf-badge{
+  position:absolute; top:12px; left:12px; z-index:3;
+  font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--muted);
+  background:var(--paper); border:1px solid var(--line); border-radius:2px; padding:4px 9px;
+  display:flex; align-items:center; gap:7px;
+}
+.pdf-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--ok);}
+.pageno{position:absolute; bottom:14px; right:18px; font-family:var(--mono); font-size:10.5px; color:var(--faint);}
+
+.paper-page{
+  background:#fff; width:100%; max-width:380px; aspect-ratio:1 / 1.414;
+  box-shadow:var(--paper-shadow); border-radius:1px; color:#222;
+  padding:9% 9% 9%; font-size:9px; line-height:1.5; overflow:hidden; position:relative;
+  transition:box-shadow .3s ease;
+}
+[data-theme="dark"] .paper-page{ color:#1c1c1c; }
+.paper-page *{transition:background .25s ease, outline-color .25s ease;}
+.pp-accent{height:6px; background:#1F2A44; width:46%; margin-bottom:14px;}
+.pp-h1{font-family:var(--sans); font-weight:700; font-size:17px; color:#1F2A44; letter-spacing:-.01em; line-height:1.05;}
+.pp-sub{font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:#8a8a82; margin-top:3px;}
+.pp-rule{height:1px; background:#e7e2d6; margin:11px 0;}
+.pp-soft{background:#F1ECE3; border-radius:2px; padding:9px 10px; margin:9px 0;}
+.pp-line{height:5px; background:#dedacf; border-radius:1px; margin:5px 0;}
+.pp-line.s{width:40%;} .pp-line.m{width:68%;} .pp-line.l{width:88%;}
+.pp-ey{font-family:var(--sans); font-weight:700; font-size:9px; color:#1F2A44; text-transform:uppercase; letter-spacing:.09em; margin:12px 0 6px;}
+.pp-row{display:flex; gap:8px; margin:5px 0; align-items:center;}
+.pp-tag{font-family:var(--mono); font-size:7px; background:#eceef3; color:#1F2A44; padding:2px 5px; border-radius:2px;}
+.pp-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
+.pp-table{width:100%; border-collapse:collapse; margin-top:4px;}
+.pp-table td{border-bottom:1px solid #ece8dc; padding:4px 2px; font-size:7.5px; color:#555;}
+.pp-table tr td:last-child{text-align:right; font-family:var(--mono); color:#1F2A44;}
+.pp-strip{position:absolute; top:0; left:0; bottom:0; width:6px; background:#1F2A44;}
+
+/* highlight wiring (playground chips) */
+.hl-soft .pp-soft{outline:2px solid #1F2A44; outline-offset:2px; background:#E7EAF0;}
+.hl-accent .pp-accent, .hl-accent .pp-strip{background:#9B5C2E; box-shadow:0 0 0 3px rgba(155,92,46,.18);}
+.hl-theme .pp-h1, .hl-theme .pp-ey{color:#9B5C2E;}
+.hl-theme .pp-accent, .hl-theme .pp-strip{background:#9B5C2E;}
+
+/* ===========================================================
+   §1 HERO
+   =========================================================== */
+.hero{padding-top:70px; padding-bottom:var(--air);}
+.hero-grid{display:grid; grid-template-columns:1.02fr 1.18fr; gap:56px; align-items:center;}
+.hero h1 .accentword{color:var(--ink); position:relative;}
+.hero .lead{margin-top:22px;}
+.hero-cta{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap;}
+.hero-meta{display:flex; gap:20px; margin-top:30px; flex-wrap:wrap; font-family:var(--mono); font-size:12.5px; color:var(--faint);}
+.hero-meta span{display:inline-flex; align-items:center; gap:7px;}
+.hero-meta b{color:var(--muted); font-weight:500;}
+
+.hero-split{position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0;}
+.hero-code{border-radius:4px 0 0 4px; min-height:300px;}
+.hero-code .code{border:none; border-radius:0; background:transparent;}
+.hero-codewrap{background:var(--code-bg); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
+.flowchan{width:62px; position:relative; align-self:stretch; display:grid; place-items:center;}
+@media (max-width:980px){
+  .hero-grid{grid-template-columns:1fr; gap:40px;}
+  .hero-split{grid-template-columns:1fr; gap:0;}
+  .flowchan{width:100%; height:54px; transform:rotate(90deg);}
+}
+
+/* ===========================================================
+   §2 PLAYGROUND
+   =========================================================== */
+.pg-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:26px;}
+.pg-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:18px; align-items:stretch;}
+.pg-editor-wrap{border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--code-bg); display:flex; flex-direction:column;}
+.pg-tabs{display:flex; gap:2px; padding:8px 8px 0; border-bottom:1px solid var(--line); background:var(--bg-2);}
+.pg-tab{
+  font-family:var(--mono); font-size:12.5px; color:var(--muted); cursor:pointer;
+  padding:9px 15px; border:1px solid transparent; border-bottom:none; border-radius:3px 3px 0 0;
+  background:transparent;
+  transition:background .15s ease, color .15s ease;
+}
+.pg-tab:hover{color:var(--ink);}
+.pg-tab.active{background:var(--code-bg); color:var(--ink); border-color:var(--line);}
+#monaco{height:420px; width:100%;}
+.pg-editor-fallback{height:420px; overflow:auto;}
+.pg-editor-fallback .code{height:100%; border:none; padding:16px 18px;}
+
+.pg-preview{display:flex; flex-direction:column; gap:0;}
+.pg-pdf{flex:1;}
+.pg-chips{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px;}
+.chip-feat{
+  text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:4px;
+  padding:15px 16px; cursor:default; transition:border-color .2s ease, transform .2s ease, background .2s ease;
+}
+.chip-feat:hover{border-color:var(--ink); transform:translateY(-2px);}
+.chip-feat h4{font-size:14.5px; color:var(--ink); margin:0 0 5px; font-weight:600;}
+.chip-feat p{font-size:12.5px; color:var(--muted); line-height:1.45;}
+.chip-feat .cf-token{font-family:var(--mono); font-size:11px; color:var(--faint); display:block; margin-top:8px;}
+@media (max-width:980px){ .pg-grid{grid-template-columns:1fr;} #monaco,.pg-editor-fallback{height:330px;} }
+
+/* code-line highlight in monaco fallback */
+.cl-hl{background:rgba(31,42,68,.09); display:block; border-left:2px solid var(--ink); margin-left:-18px; padding-left:16px;}
+
+/* ===========================================================
+   §3 PIPELINE
+   =========================================================== */
+.pipe-sticky{position:sticky; top:62px; height:calc(100vh - 62px); display:flex; flex-direction:column; justify-content:center; overflow:hidden;}
+.pipe-track{height:340vh;}
+.pipe-stage{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch;}
+.pipe-step{
+  border:1px solid var(--line); border-radius:5px; background:var(--paper); padding:22px;
+  opacity:.32; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease, border-color .5s ease, box-shadow .5s ease;
+  display:flex; flex-direction:column; min-height:340px;
+}
+.pipe-step.on{opacity:1; transform:none; border-color:var(--line-2);}
+.pipe-step.active{border-color:var(--ink); box-shadow:0 1px 0 rgba(31,42,68,.06);}
+.pipe-num{font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.1em;}
+.pipe-step h3{font-size:18px; margin:10px 0 8px;}
+.pipe-step p{font-size:13.5px; color:var(--muted); line-height:1.5;}
+.pipe-viz{flex:1; margin-top:16px; display:grid; place-items:center; min-height:130px;}
+.pipe-progress{display:flex; gap:8px; margin:0 auto 26px; align-items:center; justify-content:center;}
+.pipe-progress i{width:34px; height:3px; background:var(--line-2); border-radius:2px; transition:background .3s ease;}
+.pipe-progress i.on{background:var(--ink);}
+.pipe-head{text-align:center; margin-bottom:30px;}
+@media (max-width:980px){
+  .pipe-sticky{position:static; height:auto; padding:20px 0;}
+  .pipe-track{height:auto;}
+  .pipe-stage{grid-template-columns:1fr; gap:14px;}
+  .pipe-step{opacity:1; transform:none; min-height:0;}
+}
+
+/* ===========================================================
+   §4 GALLERY
+   =========================================================== */
+.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px;}
+.gal-card{
+  position:relative; cursor:pointer; border-radius:4px; background:var(--bg-2);
+  border:1px solid var(--line); padding:14px; aspect-ratio:1/1.32; overflow:hidden;
+  transition:border-color .25s ease, transform .25s ease;
+}
+.gal-card:hover{border-color:var(--ink); transform:translateY(-3px);}
+.gal-thumb{width:100%; height:100%; position:relative;}
+.gal-cv,.gal-cl{position:absolute; inset:0; transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .35s ease;}
+.gal-cl{transform:translateX(14%) rotate(2.5deg); opacity:0;}
+.gal-card:hover .gal-cv{transform:translateX(-8%) rotate(-2deg); }
+.gal-card:hover .gal-cl{transform:translateX(6%) rotate(3deg); opacity:1;}
+.gal-name{position:absolute; left:14px; bottom:11px; right:14px; z-index:4; font-family:var(--mono); font-size:11px; color:var(--ink); display:flex; justify-content:space-between; align-items:center;}
+.gal-name .pair{color:var(--faint); opacity:0; transition:opacity .3s ease;}
+.gal-card:hover .gal-name .pair{opacity:1;}
+.mini-page{position:absolute; inset:0; background:#fff; box-shadow:var(--paper-shadow); border-radius:1px; padding:13%; overflow:hidden;}
+@media (max-width:980px){ .gal-grid{grid-template-columns:repeat(2,1fr);} }
+
+/* modal */
+.modal-back{
+  position:fixed; inset:0; z-index:100; background:rgba(20,22,28,.55);
+  display:grid; place-items:center; padding:40px 24px; opacity:0; pointer-events:none; transition:opacity .25s ease;
+}
+.modal-back.open{opacity:1; pointer-events:auto;}
+.modal{
+  background:var(--bg); border:1px solid var(--line-2); border-radius:6px; max-width:880px; width:100%;
+  max-height:88vh; overflow:hidden; display:grid; grid-template-columns:1fr 1fr;
+  transform:translateY(10px) scale(.99); transition:transform .25s ease;
+}
+.modal-back.open .modal{transform:none;}
+.modal-pdf{background:var(--bg-2); padding:30px; display:grid; place-items:center; border-right:1px solid var(--line);}
+.modal-info{padding:34px 32px; display:flex; flex-direction:column; overflow:auto;}
+.modal-info .eyebrow{margin-bottom:14px;}
+.modal-info h3{font-size:24px; margin-bottom:6px;}
+.modal-info .desc{color:var(--muted); font-size:15px; margin:8px 0 22px; line-height:1.5;}
+.modal-close{position:absolute; top:14px; right:16px; z-index:110;}
+.modal-codeblock{margin-top:auto;}
+.modal-codeblock .label{font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; display:block;}
+@media (max-width:720px){ .modal{grid-template-columns:1fr; max-height:92vh; overflow:auto;} .modal-pdf{border-right:none; border-bottom:1px solid var(--line);} }
+
+/* ===========================================================
+   §5 POSITIONING TABLE
+   =========================================================== */
+.cmp{width:100%; border-collapse:collapse; font-size:14.5px; margin-top:34px; border:1px solid var(--line);}
+.cmp th,.cmp td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
+.cmp thead th{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--muted); font-weight:500; background:var(--bg-2); white-space:nowrap;}
+.cmp tbody th{font-family:var(--mono); font-size:12.5px; color:var(--faint); font-weight:500; text-transform:uppercase; letter-spacing:.06em; width:120px;}
+.cmp .col-gc{background:var(--accent-soft);}
+.cmp thead .col-gc{color:var(--ink); font-weight:700;}
+.cmp td.col-gc{color:var(--ink); font-weight:500;}
+.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:none;}
+.cmp-note{font-size:19px; color:var(--muted); max-width:60ch;}
+@media (max-width:820px){ .cmp{display:block; overflow-x:auto; white-space:nowrap;} }
+
+/* ===========================================================
+   §6 ENGINEERING CULTURE
+   =========================================================== */
+.eng-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px;}
+.eng-card{border:1px solid var(--line); border-radius:5px; background:var(--paper); padding:24px 22px; display:flex; flex-direction:column; transition:border-color .2s ease;}
+.eng-card:hover{border-color:var(--line-2);}
+.eng-card h3{font-size:17px; margin-bottom:10px; display:flex; align-items:flex-start; gap:10px;}
+.eng-card .glyph{width:22px; height:22px; flex:none; color:var(--ink); margin-top:1px;}
+.eng-card p{font-size:13.5px; color:var(--muted); line-height:1.5;}
+.eng-card .mini-code{font-family:var(--mono); font-size:11px; color:var(--code-text); background:var(--code-bg); border:1px solid var(--line); border-radius:3px; padding:11px 12px; margin-top:14px; line-height:1.6; overflow:auto;}
+.changelog{margin-top:14px; list-style:none; padding:0;}
+.changelog li{display:flex; gap:11px; padding:7px 0; border-top:1px dashed var(--line); font-size:12.5px;}
+.changelog li:first-child{border-top:none;}
+.changelog .ver{font-family:var(--mono); color:var(--ink); font-weight:600; flex:none; width:50px;}
+.changelog .msg{color:var(--muted);}
+.snap-viz{margin-top:14px; border:1px solid var(--line); border-radius:3px; overflow:hidden; font-family:var(--mono); font-size:11px;}
+.snap-viz .row{display:flex; align-items:center; gap:8px; padding:7px 11px; border-top:1px solid var(--line);}
+.snap-viz .row:first-child{border-top:none;}
+.snap-viz .ok{color:var(--ok);} .snap-viz .add{color:#9B5C2E;}
+.snap-viz .sign{width:14px; text-align:center;}
+@media (max-width:980px){ .eng-grid{grid-template-columns:repeat(2,1fr);} }
+@media (max-width:560px){ .eng-grid{grid-template-columns:1fr;} }
+
+/* ===========================================================
+   §7 CTA + footer
+   =========================================================== */
+.cta{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
+.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
+.cta-card{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:34px;}
+.cta-card h3{font-size:22px; margin-bottom:8px;}
+.cta-card .sub{color:var(--muted); font-size:15px; margin-bottom:22px;}
+.dep-tabs{display:flex; gap:4px; margin-bottom:0;}
+.dep-tab{font-family:var(--mono); font-size:12px; padding:7px 13px; border:1px solid var(--line); border-bottom:none; border-radius:3px 3px 0 0; cursor:pointer; color:var(--muted); background:var(--bg-2);}
+.dep-tab.active{background:var(--code-bg); color:var(--ink); border-color:var(--line);}
+.dep-box{position:relative; border:1px solid var(--line); border-radius:0 4px 4px 4px; background:var(--code-bg); padding:16px 18px; font-family:var(--mono); font-size:12.5px; color:var(--code-text); line-height:1.6; overflow:auto;}
+.copybtn{position:absolute; top:10px; right:10px; font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:5px 10px; cursor:pointer; transition:color .2s ease, border-color .2s ease;}
+.copybtn:hover{color:var(--ink); border-color:var(--line-2);}
+.cta-links{display:flex; flex-direction:column; gap:11px; margin-top:22px;}
+.cta-links a{display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-size:14.5px; width:fit-content;}
+.cta-links a:hover{text-decoration:underline; text-underline-offset:3px;}
+.person{display:flex; flex-direction:column; gap:6px; font-size:15px;}
+.person .name{font-weight:600; color:var(--ink); font-size:18px;}
+.person .row{display:flex; gap:10px; align-items:center; color:var(--muted); font-family:var(--mono); font-size:13px;}
+@media (max-width:820px){ .cta-grid{grid-template-columns:1fr;} }
+
+.footer{padding:44px 0;}
+.footer .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--faint); font-family:var(--mono);}
+.footer-links{display:flex; gap:20px; flex-wrap:wrap;}
+.footer-links a:hover{color:var(--ink);}
+
+/* reveal-on-scroll */
+.rv{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease;}
+.rv.in{opacity:1; transform:none;}
+@media (prefers-reduced-motion: reduce){
+  .rv{opacity:1 !important; transform:none !important;}
+  .pipe-step{opacity:1 !important; transform:none !important;}
+}
+
+
+/* ---- additions for the Next.js component build ---- */
+/* Monaco line-highlight decorations (chip hover) */
+.mono-hl{background:rgba(155,92,46,.16) !important;}
+.mono-hl-margin{background:#9B5C2E; width:3px !important; left:0 !important; margin-left:0;}
+/* gallery thumbnails: let paper pages fill the card */
+.gal-cv .paper-page,.gal-cl .paper-page{max-width:none !important; width:100%; height:100%; aspect-ratio:auto;}
+/* a no-op highlight class so hl-none is harmless */
+.hl-none{}
+.pdf-canvas{max-width:100%;}
diff --git a/site/app/layout.tsx b/site/app/layout.tsx
new file mode 100644
index 00000000..403a3f1e
--- /dev/null
+++ b/site/app/layout.tsx
@@ -0,0 +1,47 @@
+import type { Metadata } from "next";
+import { Inter, JetBrains_Mono } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-inter",
+  display: "swap",
+});
+const mono = JetBrains_Mono({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-mono",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "GraphCompose — Declarative Java DSL for business PDFs",
+  description:
+    "Declarative Java DSL for cinematic business PDFs. Two-pass deterministic layout, snapshot-tested in CI. MIT. Renders via Apache PDFBox 3.0.",
+  metadataBase: new URL("https://graphcompose.dev"),
+  openGraph: {
+    title: "GraphCompose",
+    description: "Declarative Java DSL for cinematic business PDFs.",
+    type: "website",
+  },
+};
+
+// Set the theme before first paint to avoid a flash of the wrong theme.
+const themeInit = `(function(){try{var t=localStorage.getItem('gc-theme');if(t)document.documentElement.setAttribute('data-theme',t);}catch(e){}})();`;
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    
+      
+