@kolkrabbi/kol-resume 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,30 @@
-# Temporary Holding Version
+# @kolkrabbi/kol-resume
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The resume kit: a resume in three treatments, the cover, letter, portfolio and back pages, the A4 and continuous kit, and its PDF export. The person comes through `ResumeProvider`, and nobody's details ship.
+
+```jsx
+import { ResumeProvider, ResumeLibrary, ResumeSource, ResumeTreatment } from '@kolkrabbi/kol-resume'
+
+<ResumeProvider person={{ BIO, SKILLS, LANGUAGES }} records={{ WORK, EDUCATION }} contact={BRAND_INFO}
+  letters={import.meta.glob('./letters/*.md', { query: '?raw', import: 'default', eager: true })}
+  portfolio={import.meta.glob('./portfolio/*.md', { query: '?raw', import: 'default', eager: true })}
+  assetUrl={(key) => `/bucket/${key}`} portrait="portraits/me.jpg" fileStem="ada-lovelace">
+  <Routes>
+    <Route path="/resume/library" element={<ResumeLibrary />} />
+    <Route path="/resume/source" element={<ResumeSource />} />
+    <Route path="/resume/t/:slug" element={<ResumeTreatment />} />
+  </Routes>
+</ResumeProvider>
+```
+
+```js
+// vite.config.js
+import { kitExportPlugin } from '@kolkrabbi/kol-resume/vite'
+plugins: [react(), tailwindcss(), kitExportPlugin({ name: 'ada-lovelace' })]
+```
+
+```css
+@import "@kolkrabbi/kol-resume/kol-resume.css"; /* the print rules, after kol-theme */
+```
+
+The host checklist and the provider's props: ui.kolkrabbi.io, Compositions › Resume.

package/bin/export-kit.sh

@@ -0,0 +1,208 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# Export the job-application kit to PDF — one combined file per theme.
+#
+# Builds the app and serves the static output with `vite preview` on a
+# DEDICATED port (not the user's 5173), renders each route with headless
+# Chrome, and merges them in kit order (Cover → Résumé → Letter → Portfolio →
+# Back) with pdfunite. Kills only its own server on exit; never touches a live
+# dev session. A production build (not the dev server) is what keeps Chrome's
+# network-idle from hanging — see the preview note below.
+#
+# Rendering goes through puppeteer-core (app/scripts/render-pdf.mjs), which waits
+# for fonts + images before printing — see that file. Never reintroduce the
+# legacy --virtual-time-budget flag; it hangs forever under --headless=new.
+#
+# Usage: scripts/export-kit.sh [theme ...]      (default: light dark)
+#        scripts/export-kit.sh --v2             (light only, no background
+#                                                colors, downscaled images →
+#                                                out/$NAME-kit-light-v2.pdf)
+#
+# Flags (combinable with explicit themes):
+#   --plain      render with ?plain=1 — strips every background fill so the kit
+#                prints ink-on-white (light theme only; dark text needs a light bg)
+#   --downscale  shrink the printed images (portrait + portfolio heroes) in the
+#                BUILT dist/ before previewing — originals in public/ are untouched
+#   --icelandic  render every route with ?lang=is (Icelandic kit), output suffix
+#                -icelandic
+#   --svg        export each section as a self-contained SVG with editable <text>
+#                (out/svg/*.svg) + a vector PDF merged from them — for Illustrator
+#   --v2         shorthand: light only + --plain + --downscale, output suffix -v2
+#   --continuous fit-to-length PDF from /resume/t/kit-continuous — one page per
+#                section at its natural height (not A4-paginated) → out/…-continuous.pdf
+#
+# Env: KIT_QUERY — extra URL query appended to every rendered route, e.g.
+#      "&pages=cover,resume&role=Art%20Director&company=Acme". Set by the
+#      /api/export endpoint from the preview's own options overlay; it narrows
+#      which kit sections compile and fills the cover letter's Role/Company.
+
+# CARRIED INTO @kolkrabbi/kol-resume (ResumeKit, 2026-10-28): the app is the caller's working directory (the vite
+# plugin spawns this with cwd = the app root), render-pdf.mjs is the package's own, and the file stem is $KIT_NAME —
+# nobody's name is baked in.
+HERE="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT="${KIT_APP:-$PWD}"
+APP="$ROOT"
+NAME="${KIT_NAME:-kit}"
+OUT="$ROOT/out"
+PORT=5180
+BASE="http://localhost:$PORT"
+CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+
+PLAIN=0; DOWNSCALE=0; SVG=0; CONTINUOUS=0; SINGLE=0; ROUTE_SINGLE=""; NAME_SINGLE=""; SUFFIX=""; KIT_LANG="en"; THEME_ARGS=()
+for a in "$@"; do
+  case "$a" in
+    --v2)        PLAIN=1; DOWNSCALE=1; SUFFIX="-v2"; THEME_ARGS=(light) ;;
+    --continuous) CONTINUOUS=1; PLAIN=1; DOWNSCALE=1; THEME_ARGS=(light) ;;  # fit-to-length PDF from /resume/t/kit-continuous (light plain, like --v2)
+    --single=*)  SINGLE=1; PLAIN=1; THEME_ARGS=(light)  # one route → one ink-on-white A4 PDF (the layout treatments' download buttons)
+                 rest="${a#--single=}"; ROUTE_SINGLE="${rest%%:*}"; NAME_SINGLE="${rest#*:}" ;;
+    --plain)     PLAIN=1 ;;
+    --downscale) DOWNSCALE=1 ;;
+    --icelandic) KIT_LANG="is" ;;   # render every route with ?lang=is
+    --svg)       SVG=1; DOWNSCALE=1 ;;  # editable-text SVG per section (implies downscale — images inline as data URIs)
+    light|dark)  THEME_ARGS+=("$a") ;;
+    *) echo "unknown arg: $a" >&2; exit 2 ;;
+  esac
+done
+if [ "${#THEME_ARGS[@]}" -gt 0 ]; then THEMES=("${THEME_ARGS[@]}"); else THEMES=(light dark); fi
+QUERY=""; [ "$PLAIN" -eq 1 ] && QUERY="&plain=1"
+[ "$KIT_LANG" = "is" ] && { QUERY="$QUERY&lang=is"; LANGSUF="-icelandic"; } || LANGSUF=""
+# Kit options from the caller (vite's /api/export sets this) — already a
+# URL-encoded "&pages=…&role=…&company=…" fragment. Env, so it never hits the shell.
+QUERY="$QUERY${KIT_QUERY:-}"
+DOWNSCALE_MAX=1400   # longest side; heroes show thumbnail-size, portrait smaller
+
+# Render one URL to PDF through puppeteer-core (CDP) — app/scripts/render-pdf.mjs.
+# It waits for document.fonts.ready + image decode before the snapshot, so the
+# PDF can't bake a fallback font or drop an image, then closes Chrome itself.
+# (Replaces a bare `chrome --print-to-pdf`, which raced the fonts and lingered.)
+print_pdf() {  # $1 (unused)  $2 out.pdf  $3 url
+  local out="$2" url="$3"
+  rm -f "$out"
+  CHROME="$CHROME" node "$HERE/render-pdf.mjs" "$url" "$out" >>"$TMP/render.log" 2>&1
+  [ -s "$out" ]
+}
+
+# The whole kit is ONE route — the /resume/t/kit-a4 treatment the user actually
+# sees, where A4Page lays each section onto real A4 sheets with proper margins.
+# (The old per-section routes printed the wide screen layout, so the portfolio
+# overflowed the page.) Language rides $QUERY (&lang=is). label = temp filename.
+ROUTES=( "kit:/resume/t/kit-a4" )
+
+mkdir -p "$OUT"
+TMP="$(mktemp -d)"
+
+echo "▸ building app (production)"
+( cd "$APP" && VITE_BUCKET_LOCAL=1 node_modules/.bin/vite build >"$TMP/build.log" 2>&1 ) \
+  || { echo "build failed:"; cat "$TMP/build.log"; exit 1; }
+
+# The images the kit prints, fetched into the build's own dist/bucket/ (VITE_BUCKET_LOCAL=1 points the app there): the
+# buckets are the only copy (2026-10-28), and a remote image is not reliably decoded before Chrome prints. The cover
+# photo comes from the private bucket through wrangler's login, the portfolio heroes from the public R2.
+# THE IMAGES ARE THE APP'S (ResumeKit, 2026-10-28): record fetched its cover from a private bucket through wrangler and
+# its heroes from R2 here. In the package that is the app's own step — `scripts/fetch-kit-images.sh`, run with APP and
+# TMP set, if the app has one; record's block is that file now (its RecordOnKolResume ticket).
+if [ -x "$APP/scripts/fetch-kit-images.sh" ]; then
+  echo "▸ fetching kit images ($APP/scripts/fetch-kit-images.sh)"
+  APP="$APP" TMP="$TMP" "$APP/scripts/fetch-kit-images.sh" || { echo "image fetch failed"; exit 1; }
+fi
+
+# Downscale the images that actually print (cover photo + portfolio heroes) inside
+# the built dist/ — fetched above; the buckets keep the full-size originals. Heroes render at thumbnail size in the grid and
+# the portrait small, so a 1400px cap is invisible but slashes the PDF weight.
+if [ "$DOWNSCALE" -eq 1 ]; then
+  echo "▸ downscaling kit images (cap ${DOWNSCALE_MAX}px)"
+  shopt -s nullglob
+  # every image the app's fetch step put under dist/bucket (record's cover and heroes were named here; $COVER went with
+  # its fetch block)
+  { find "$APP/dist/bucket" -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" -o -iname "*.webp" \) 2>/dev/null || true; } | while IFS= read -r f; do
+    [ -f "$f" ] || continue
+    before=$(stat -f%z "$f" 2>/dev/null || echo 0)
+    # Downscale ONLY — sips -Z upsamples images already under the cap (softens
+    # the portrait, bloats the file), so resize only when the long side exceeds it.
+    w=$(sips -g pixelWidth "$f" 2>/dev/null | awk '/pixelWidth/{print $2}')
+    h=$(sips -g pixelHeight "$f" 2>/dev/null | awk '/pixelHeight/{print $2}')
+    long=$(( w > h ? w : h ))
+    [ "$long" -gt "$DOWNSCALE_MAX" ] && sips -Z "$DOWNSCALE_MAX" "$f" >/dev/null 2>&1
+    case "$f" in *.jpg|*.jpeg) sips -s formatOptions 78 "$f" >/dev/null 2>&1 || true ;; esac
+    after=$(stat -f%z "$f" 2>/dev/null || echo 0)
+    echo "    · ${f#"$APP"/dist/}  ${long}px  $((before/1024))K → $((after/1024))K"
+  done
+  shopt -u nullglob
+fi
+
+# Serve the STATIC build, not the dev server: vite preview has no HMR websocket
+# and streams no module requests, so headless Chrome's "network idle" fires
+# immediately. The dev server never reaches idle on heavier routes → Chrome hangs.
+echo "▸ starting preview server on :$PORT"
+( cd "$APP" && exec node_modules/.bin/vite preview --port "$PORT" --strictPort >"$TMP/serve.log" 2>&1 ) &
+VITE_PID=$!
+trap 'kill "$VITE_PID" 2>/dev/null; rm -rf "$TMP"' EXIT
+
+for i in $(seq 1 80); do
+  curl -sf "$BASE/" >/dev/null 2>&1 && break
+  if ! kill -0 "$VITE_PID" 2>/dev/null; then echo "preview died:"; cat "$TMP/serve.log"; exit 1; fi
+  sleep 0.5
+done
+
+# Single layout treatment → one ink-on-white A4 PDF (the /resume/t/<slug> download
+# buttons hit this via /api/export?layout=<slug>). Renders that one route only.
+if [ "$SINGLE" -eq 1 ]; then
+  echo "▸ rendering single route $ROUTE_SINGLE"
+  out="$OUT/$NAME_SINGLE.pdf"
+  print_pdf "$TMP/chrome-single" "$out" "$BASE$ROUTE_SINGLE?theme=light$QUERY" \
+    || { echo "single render failed:"; cat "$TMP/render.log"; exit 1; }
+  echo "  → $out  ($(du -h "$out" | cut -f1 | tr -d ' '), $(qpdf --show-npages "$out") pp)"
+  echo "✓ done"
+  exit 0
+fi
+
+# SVG export — one self-contained SVG per kit section (continuous mode), with
+# live <text> + embedded fonts + inlined images: editable type in Illustrator.
+# No rsvg→PDF here: librsvg ignores the embedded webfonts (falls back to system
+# fonts), so that PDF would be font-unfaithful — the faithful flat PDF is the
+# default (non-SVG) export. SVGs are the editable deliverable.
+if [ "$SVG" -eq 1 ]; then
+  echo "▸ rendering SVG (editable text)"
+  SVGROUTE="/resume/t/kit-continuous?theme=light$QUERY"
+  SVGDIR="$OUT/svg"; rm -rf "$SVGDIR"
+  CHROME="$CHROME" node "$APP/scripts/render-svg.mjs" "$BASE" "$SVGROUTE" "$SVGDIR"
+  echo "  → $SVGDIR/*.svg  (open in Illustrator)"
+  echo "✓ done"
+  exit 0
+fi
+
+# Continuous PDF — one page per section, each sized to fit its own content length
+# (the /resume/t/kit-continuous look), instead of the A4-paginated employer PDF.
+# render-pdf.mjs writes a numbered PDF per section; pdfunite merges them in order.
+if [ "$CONTINUOUS" -eq 1 ]; then
+  echo "▸ rendering continuous PDF (fit-to-length pages)"
+  CDIR="$TMP/continuous"; rm -rf "$CDIR"
+  CHROME="$CHROME" node "$HERE/render-pdf.mjs" "$BASE/resume/t/kit-continuous?theme=light$QUERY" "$CDIR" continuous >>"$TMP/render.log" 2>&1 \
+    || { echo "continuous render failed:"; cat "$TMP/render.log"; exit 1; }
+  out="$OUT/$NAME-kit-continuous$LANGSUF.pdf"
+  pdfunite "$CDIR"/*.pdf "$out"
+  echo "  → $out  ($(du -h "$out" | cut -f1 | tr -d ' '), $(qpdf --show-npages "$out") pp)"
+  echo "✓ done"
+  exit 0
+fi
+
+for theme in "${THEMES[@]}"; do
+  echo "▸ rendering $theme"
+  parts=()
+  for entry in "${ROUTES[@]}"; do
+    label="${entry%%:*}"; path="${entry#*:}"
+    pdf="$TMP/$theme-$label.pdf"
+    if print_pdf "$TMP/chrome-$theme-$label" "$pdf" "$BASE$path?theme=$theme$QUERY"; then
+      echo "    · $label"
+      parts+=("$pdf")
+    else
+      echo "    · $label  ⚠ render failed — skipped (see $TMP/render.log)"
+    fi
+  done
+  out="$OUT/$NAME-kit-$theme$SUFFIX$LANGSUF.pdf"
+  pdfunite "${parts[@]}" "$out"
+  echo "  → $out  ($(du -h "$out" | cut -f1 | tr -d ' '), $(qpdf --show-npages "$out") pp)"
+done
+
+echo "✓ done"

package/bin/render-pdf.mjs

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+/**
+ * Render one URL to a PDF via the installed Chrome (puppeteer-core / CDP).
+ *
+ * The point of going through CDP instead of `chrome --print-to-pdf`: we can wait
+ * for document.fonts.ready and image decode BEFORE the print snapshot, so the PDF
+ * never bakes a fallback font (the Right Grotesk cuts use font-display:swap and
+ * lose the load race under a bare --print-to-pdf) or drops a half-loaded image.
+ *
+ * Two modes:
+ *   a4 (default) — honors the page's own @page CSS (A4 portrait, margin:0 — the
+ *                  kit sets its own inner sheet margins) and prints backgrounds.
+ *                  <out> is the PDF file.
+ *   continuous   — one page per .kol-kit-page sheet, each sized to fit its own
+ *                  content length (no A4 pagination). Renders the SCREEN layout
+ *                  the /resume/t/kit-continuous treatment shows, isolating one sheet at a
+ *                  time. <out> is a DIRECTORY of numbered per-section PDFs (merge
+ *                  with pdfunite downstream, like render-svg.mjs).
+ *
+ * Usage: node render-pdf.mjs <url> <out> [a4|continuous]
+ */
+import puppeteer from 'puppeteer-core'
+import { mkdirSync } from 'node:fs'
+import { join } from 'node:path'
+
+const [url, out, mode = 'a4'] = process.argv.slice(2)
+const CHROME = process.env.CHROME || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
+
+if (!url || !out) {
+  console.error('usage: render-pdf.mjs <url> <out> [a4|continuous]')
+  process.exit(2)
+}
+
+const browser = await puppeteer.launch({
+  executablePath: CHROME,
+  headless: true,
+  args: ['--hide-scrollbars', '--disable-gpu'],
+})
+try {
+  const page = await browser.newPage()
+  await page.setViewport({ width: 1200, height: 1600 })
+  await page.goto(url, { waitUntil: 'networkidle0', timeout: 60000 })
+  // Block on the things --print-to-pdf won't wait for: web fonts and image bytes.
+  await page.evaluate(async () => {
+    await document.fonts.ready
+    await Promise.all([...document.images].map((img) => (img.complete ? null : img.decode().catch(() => {}))))
+  })
+
+  if (mode === 'continuous') {
+    // Match the on-screen continuous preview (not print media, whose @page would
+    // force uniform A4 pages). Screen media means the app shell renders too, so
+    // replicate what kol-print.css does: hide the sidenav chrome + the download
+    // toolbar, and collapse the shell grid to one full-width column (else its
+    // sidenav gutter column offsets the sheet). Then measure every sheet.
+    const rects = await page.emulateMediaType('screen').then(() =>
+      page.evaluate(() => {
+        document
+          .querySelectorAll('.kol-sidenav, .kol-sidenav-hamburger, .kol-sidenav-backdrop, .kol-kit-preview .print\\:hidden')
+          .forEach((el) => (el.style.display = 'none'))
+        const layout = document.querySelector('.kol-brand-layout')
+        if (layout) layout.style.display = 'block'
+        const prev = document.querySelector('.kol-kit-preview')
+        Object.assign(prev.style, { background: '#fff', padding: '0', gap: '0', minHeight: '0' })
+        return [...document.querySelectorAll('.kol-kit-page')].map((el) => {
+          const r = el.getBoundingClientRect()
+          return { w: Math.ceil(r.width), h: Math.ceil(r.height), label: el.getAttribute('aria-label') || 'page' }
+        })
+      }),
+    )
+    if (!rects.length) { console.error('no .kol-kit-page sections found'); process.exit(1) }
+    mkdirSync(out, { recursive: true })
+    for (let i = 0; i < rects.length; i++) {
+      // Show only sheet i; page.pdf sized to it → exactly one fit-to-length page.
+      await page.evaluate((idx) => {
+        document.querySelectorAll('.kol-kit-page').forEach((el, k) => { el.style.display = k === idx ? '' : 'none' })
+      }, i)
+      const { w, h, label } = rects[i]
+      const slug = label.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
+      const name = `${String(i + 1).padStart(2, '0')}-${slug}.pdf`
+      // pageRanges:'1' guards against a phantom trailing page from sub-px rounding
+      // (h is ceil'd, so page 1 always contains the whole sheet).
+      await page.pdf({ path: join(out, name), printBackground: true, width: `${w}px`, height: `${h}px`, pageRanges: '1' })
+      console.log(`  · ${name}  (${w}×${h}px)`)
+    }
+  } else {
+    await page.pdf({ path: out, printBackground: true, preferCSSPageSize: true })
+  }
+} finally {
+  await browser.close()
+}

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@kolkrabbi/kol-resume",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "The resume kit: a resume in three treatments, cover, letter, portfolio and back pages, the A4 kit and its PDF export",
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./vite": "./src/vite.js",
+    "./kol-resume.css": "./src/kol-resume.css",
+    "./styles/*": "./src/styles/*"
+  },
+  "bin": {
+    "kol-resume-pdf": "./bin/render-pdf.mjs"
+  },
+  "files": [
+    "src",
+    "bin",
+    "README.md"
+  ],
+  "dependencies": {
+    "yaml": "^2.9.0"
+  },
+  "peerDependencies": {
+    "@kolkrabbi/kol-component": ">=0.300.0",
+    "@kolkrabbi/kol-styleguide": ">=0.14.0",
+    "@kolkrabbi/kol-theme": ">=0.196.0",
+    "puppeteer-core": ">=22.0.0",
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0",
+    "react-router-dom": ">=6.20.0"
+  },
+  "peerDependenciesMeta": {
+    "puppeteer-core": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@kolkrabbi/kol-component": "^0.311.0",
+    "@kolkrabbi/kol-styleguide": "^0.14.0",
+    "@kolkrabbi/kol-theme": "^0.196.0"
+  },
+  "keywords": [
+    "kol",
+    "kolkrabbi",
+    "design-system",
+    "resume",
+    "cv",
+    "print",
+    "a4"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Tor-Grimsson/kol-ds.git",
+    "directory": "packages/resume"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/components/ContactLine.jsx

@@ -0,0 +1,34 @@
+import { useResume } from '../data.jsx'
+
+/**
+ * The kit's contact footer — the identical strip that closes both the Cover and
+ * the Back page. Every entry is a real link: Chrome's headless printToPDF keeps
+ * <a href> as a clickable annotation, so the exported PDF is live off the page.
+ *
+ * Display text is the data string verbatim (example.com, linkedin.com/name);
+ * only the href is synthesised, so the printed line reads the same as before.
+ */
+/* the contact is the person's (the seam): the entries are built from the provider's BRAND_INFO inside the component */
+const entriesOf = ({ contact = {}, social = {} } = {}) => [
+  [contact.emailJobs, `mailto:${contact.emailJobs}`],
+  [contact.phone, `tel:${String(contact.phone ?? '').replace(/\s/g, '')}`],
+  [contact.web, `https://${contact.web}`],
+  [social.linkedin, `https://${social.linkedin}`],
+  [social.github, `https://${social.github}`],
+].filter(([label]) => label)
+
+export default function ContactLine({ className = '' }) {
+  const ENTRIES = entriesOf(useResume().BRAND_INFO)
+  return (
+    <p className={`kol-mono-10 text-meta mt-auto pt-6 border-t border-fg-08 ${className}`}>
+      {ENTRIES.map(([label, href], i) => (
+        <span key={label}>
+          {i > 0 && '  ·  '}
+          <a href={href} target="_blank" rel="noreferrer" className="no-underline text-inherit">
+            {label}
+          </a>
+        </span>
+      ))}
+    </p>
+  )
+}

package/src/components/ExportButtons.jsx

@@ -0,0 +1,41 @@
+import { useExportDownload } from '../lib/exportDownload'
+import { exportRequest } from '../lib/treatments'
+import { useResume } from '../data.jsx'
+
+/**
+ * Fixed top-right download controls for a treatment preview. Kit treatments
+ * offer the flat PDF and the editable-text SVG zip; layouts the PDF only. Both
+ * go through /api/export (~30–45s: build + headless render), so the running
+ * button shows progress. `print:hidden` keeps the chrome out of the file.
+ */
+export default function ExportButtons({ treatment, lang = 'en', options }) {
+  const { busy, err, download } = useExportDownload()
+  const { FILE_STEM } = useResume()
+  const run = (format) => {
+    const { url, filename } = exportRequest(treatment, { lang, format, options, name: FILE_STEM })
+    download(format, url, filename)
+  }
+
+  const btn =
+    'kol-mono-12 px-3 py-1.5 rounded bg-[#121215] text-white cursor-pointer transition-colors disabled:opacity-60 disabled:cursor-wait'
+
+  return (
+    <div className="fixed top-4 right-4 z-50 print:hidden flex flex-col items-end gap-2">
+      <div className="flex gap-2">
+        <button type="button" disabled={!!busy} onClick={() => run('pdf')} className={btn}>
+          {busy === 'pdf' ? 'Generating…' : 'Download PDF'}
+        </button>
+        {treatment.kind === 'kit' && (
+          <button type="button" disabled={!!busy} onClick={() => run('svg')} className={btn}>
+            {busy === 'svg' ? 'Generating…' : 'SVG (.zip)'}
+          </button>
+        )}
+      </div>
+      {err && (
+        <pre className="kol-mono-10 max-w-xs whitespace-pre-wrap text-right text-red-700 bg-white/95 border border-red-200 rounded p-2">
+          {err}
+        </pre>
+      )}
+    </div>
+  )
+}

package/src/components/KitOptions.jsx

@@ -0,0 +1,98 @@
+import { useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { KIT_PAGES, KIT_PAGE_IDS, readKitOptions } from '../lib/kitOptions'
+import LangToggle from './LangToggle'
+
+/**
+ * The export options — language, which numbered sections compile into the
+ * kit, and the Role / Company the cover letter is addressed to.
+ *
+ * Everything writes straight to the URL query (lib/kitOptions.js, `?lang`):
+ * the preview re-renders live, the Library's Open links carry the same query,
+ * and the headless export reloads the very same URL — so what is set here is
+ * exactly what compiles. `kit` = false (a layout treatment) shows language only.
+ *
+ * Two shells: `KitOptionsFields` is the bare form (the Library renders it
+ * inline); the default export floats it as a light-scoped overlay over a
+ * treatment preview.
+ */
+export function KitOptionsFields({ kit = true }) {
+  const [params, setParams] = useSearchParams()
+  const { pages, role, company } = readKitOptions(params)
+
+  // Always write every field, so a cleared input actually clears in the URL.
+  const set = (next) => {
+    const p = new URLSearchParams(params)
+    const v = { pages, role, company, ...next }
+    v.pages.length === KIT_PAGE_IDS.length ? p.delete('pages') : p.set('pages', v.pages.join(','))
+    v.role ? p.set('role', v.role) : p.delete('role')
+    v.company ? p.set('company', v.company) : p.delete('company')
+    setParams(p, { replace: true })
+  }
+
+  const togglePage = (id) =>
+    set({ pages: KIT_PAGE_IDS.filter((p) => (p === id ? !pages.includes(id) : pages.includes(p))) })
+
+  const head = 'kol-helper-10 text-meta uppercase'
+  const field =
+    'kol-mono-12 w-full bg-surface-primary text-emphasis border border-fg-16 rounded px-2 py-1 outline-none focus:border-fg-64'
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1.5">
+        <p className={head}>Language</p>
+        <LangToggle className="max-w-[8rem]" />
+      </div>
+
+      {kit && (
+        <>
+          <div className="flex flex-col gap-1.5">
+            <p className={head}>Pages in PDF</p>
+            {KIT_PAGES.map((p, i) => (
+              <label key={p.id} className="kol-mono-12 flex items-center gap-2 text-emphasis cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={pages.includes(p.id)}
+                  onChange={() => togglePage(p.id)}
+                  className="accent-current"
+                />
+                <span className="text-subtle">{String(i + 1).padStart(2, '0')}</span>
+                {p.label}
+              </label>
+            ))}
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <p className={head}>Cover letter</p>
+            <input className={field} placeholder="Role" value={role} onChange={(e) => set({ role: e.target.value })} />
+            <input className={field} placeholder="Company" value={company} onChange={(e) => set({ company: e.target.value })} />
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default function KitOptions({ kit = true }) {
+  const [params] = useSearchParams()
+  const { pages } = readKitOptions(params)
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="fixed top-16 right-4 z-50 print:hidden flex flex-col items-end gap-2" data-theme="light">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="kol-mono-12 px-3 py-1.5 rounded bg-[#121215] text-white cursor-pointer"
+      >
+        {open ? 'Close options' : kit ? `Options · ${pages.length}/${KIT_PAGE_IDS.length}` : 'Options'}
+      </button>
+
+      {open && (
+        <div className="w-64 bg-surface-tertiary border border-fg-08 rounded p-3 shadow-lg">
+          <KitOptionsFields kit={kit} />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/LangToggle.jsx

@@ -0,0 +1,27 @@
+import { useSearchParams } from 'react-router-dom'
+import { SegmentedToggle } from '@kolkrabbi/kol-component'
+import { readLang } from '../lib/i18n'
+
+/** EN / IS, written to `?lang` — the one value every resume surface (source,
+ * library, treatment preview, headless export) reads. English clears the param. */
+export default function LangToggle({ className = '' }) {
+  const [params, setParams] = useSearchParams()
+  const set = (v) => {
+    const p = new URLSearchParams(params)
+    v === 'is' ? p.set('lang', 'is') : p.delete('lang')
+    setParams(p, { replace: true })
+  }
+  return (
+    <SegmentedToggle
+      value={readLang(params)}
+      onChange={set}
+      size="sm"
+      ariaLabel="Language"
+      options={[
+        { value: 'en', label: 'EN' },
+        { value: 'is', label: 'IS' },
+      ]}
+      className={className}
+    />
+  )
+}

package/src/data.jsx

@@ -0,0 +1,60 @@
+import { createContext, useContext, useMemo } from 'react'
+import { sortedWork, cvEducation, contactLines } from './lib/resume.js'
+import { parseLetters } from './lib/letters.js'
+import { parsePortfolio } from './lib/portfolio.js'
+
+/**
+ * ResumeProvider — the kit's ONE SEAM (ResumeKit, kol-website 2026-10-28: *"Nobody's details ship in the package"*). Every
+ * page, component and selector read `@data/business-data.js`, `@data/info.js`, `@data/records`, `data/letters/*.md`,
+ * `data/portfolio/*.md` and a bucket helper; they read this instead, under the same names, so the carried code is
+ * unchanged but for one `useResume()` line.
+ *
+ *   person      `{ BIO, SKILLS, LANGUAGES }` — the shape of record's `data/business-data.js` (bio with `_is` twins,
+ *               skill groups, languages)
+ *   records     `{ WORK, EDUCATION }` — record's `data/records`
+ *   contact     record's `data/info.js` `BRAND_INFO` — `{ contact: { phone, emailJobs, web }, social: { linkedin, github } }`
+ *   letters     `{ [path]: raw markdown }` — the app's glob of its cover letters (`NN-<id>.md`, frontmatter + paragraphs)
+ *   portfolio   `{ [path]: raw markdown }` — the app's glob of its projects
+ *   media       the portfolio's downloaded shots by project id (record's `portfolio-manifest.json`)
+ *   workBase    where those shots load from (`<workBase>/<id>/hero.jpg`)
+ *   workUrl     `(id) => url` — a project's public case study, when its frontmatter has no `work:`
+ *   assetUrl    `(key) => url` — an image by bucket key (the cover's portrait)
+ *   portrait    the cover portrait's key (record's `portraits/portrait-bw-street-sunglasses-02.jpg`)
+ *   copy        the page words, per page and language: `{ back: { en: { kicker, title, blurb, current }, is }, portfolio:
+ *               { en: { kicker, title, intro }, is } }` — each key overrides the kit's default
+ *   fileStem    the exports' file stem (`<stem>-kit.pdf`); defaults to the person's name, slugged
+ */
+const ResumeContext = createContext(null)
+
+export function ResumeProvider({ person = {}, records = {}, contact = {}, letters = {}, portfolio = {}, media = {}, workBase = '', workUrl, assetUrl = (k) => k, portrait, fileStem, copy = {}, children }) {
+  const value = useMemo(() => {
+    const { BIO = {}, SKILLS = [], LANGUAGES = [] } = person
+    const { WORK = [], EDUCATION = [] } = records
+    const LETTERS = parseLetters(letters)
+    const PROJECTS = parsePortfolio(portfolio, { media, workBase, workUrl })
+    return {
+      BIO, SKILLS, LANGUAGES, WORK, EDUCATION, BRAND_INFO: contact,
+      LETTERS,
+      DEFAULT_LETTER: LETTERS[0],
+      getLetter: (id) => LETTERS.find((l) => l.id === id) ?? LETTERS[0],
+      PROJECTS,
+      getProject: (id) => PROJECTS.find((p) => p.id === id),
+      getMedia: (id) => media[id] ?? [],
+      PORTFOLIO_BASE: workBase,
+      bucketUrl: assetUrl,
+      PORTRAIT: portrait,
+      COPY: copy,
+      FILE_STEM: fileStem ?? (String(BIO.displayName ?? 'kit').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'kit'),
+      sortedWork: () => sortedWork(WORK),
+      cvEducation: () => cvEducation(EDUCATION),
+      contactLines: () => contactLines(BIO, contact),
+    }
+  }, [person, records, contact, letters, portfolio, media, workBase, workUrl, assetUrl, portrait, fileStem, copy])
+  return <ResumeContext.Provider value={value}>{children}</ResumeContext.Provider>
+}
+
+export function useResume() {
+  const v = useContext(ResumeContext)
+  if (!v) throw new Error('kol-resume: wrap the kit in <ResumeProvider> — its pages read the person from it')
+  return v
+}