@bytesbrains/weblocks 0.5.0 → 0.6.1

package/AGENT.md

@@ -46,10 +46,11 @@ its exact config schema:
 - `catalogPrompt()` — a compact text menu for a system prompt.
 - `CATALOG.md` — the same, human-readable.
 
-The 42 block types, by group:
+The 45 block types, by group:
 
 - **Chrome/app-shell:** `nav`, `app-shell`, `sidebar`, `announcement-bar`, `footer`
 - **Heroes:** `hero`, `hero-app`
+- **Résumé / profile:** `profile-header` (avatar, name, contacts, Download-PDF/Share buttons), `experience` (dated entries — reuse for Education/Certifications by changing its title), `skills` (tags or level bars)
 - **Content:** `features`, `about`, `rich-text`, `split`, `steps`, `stats`,
   `services-catalogue`, `pricing`, `logos`, `team`
 - **Media:** `gallery`, `carousel`, `video`, `video-gallery`, `map`
@@ -166,6 +167,15 @@ capability it needs; the **host** wires the endpoint. If no runtime is wired, th
 block renders inert-but-valid — that is expected, not an error. Never put secrets,
 endpoints, captcha keys, or backend logic in the config.
 
+## Favicon & hero banner
+
+- **Favicon:** set `meta.favicon` to an icon **URL** or a single **emoji** (e.g.
+  `"🍞"`) — the engine emits the browser-tab `<link rel="icon">`.
+- **Hero image banner:** give the `hero` block an `image` for a full-bleed
+  background banner; add `overlay` (`scrim`/`dark`/`light`/`none`) for text
+  legibility and `minHeight` (`sm`/`md`/`lg`/`full`). Text colour auto-flips over
+  dark overlays.
+
 ## PWA & SEO (optional, additive)
 
 Add top-level fields to make the app installable / discoverable:

package/CATALOG.md

@@ -1,8 +1,8 @@
-# @bytesbrains/weblocks — Block Catalog (v0.5.0)
+# @bytesbrains/weblocks — Block Catalog (v0.6.1)
 
 The AI composes a `SiteManifest` (`{ meta, design, blocks[] }`) using **only** the block types below, then the engine validates + renders it to static HTML. This file is generated from the code (`npm run emit:catalog`) — do not edit by hand.
 
-**Block types:** `app-shell` · `nav` · `announcement-bar` · `sidebar` · `hero` · `hero-app` · `features` · `about` · `rich-text` · `split` · `steps` · `stats` · `services-catalogue` · `pricing` · `logos` · `team` · `gallery` · `carousel` · `video` · `video-gallery` · `map` · `timeline` · `tabs` · `accordion` · `testimonials` · `faq` · `blog-list` · `blog-post` · `feed` · `contact-form` · `newsletter` · `search` · `auth` · `cta` · `social-links` · `contact-details` · `directions` · `legal` · `divider` · `spacer` · `copyright` · `footer`
+**Block types:** `app-shell` · `nav` · `announcement-bar` · `sidebar` · `hero` · `hero-app` · `profile-header` · `experience` · `skills` · `features` · `about` · `rich-text` · `split` · `steps` · `stats` · `services-catalogue` · `pricing` · `logos` · `team` · `gallery` · `carousel` · `video` · `video-gallery` · `map` · `timeline` · `tabs` · `accordion` · `testimonials` · `faq` · `blog-list` · `blog-post` · `feed` · `contact-form` · `newsletter` · `search` · `auth` · `cta` · `social-links` · `contact-details` · `directions` · `legal` · `divider` · `spacer` · `copyright` · `footer`
 
 ## `app-shell`
 
@@ -47,7 +47,7 @@ A vertical section/drawer navigation for multi-view apps: an optional title over
 
 ## `hero`
 
-Top-of-page banner: a big headline with an optional eyebrow, subheading, and one call-to-action button.
+Top-of-page hero: a big headline with optional eyebrow, subheading, and CTA — optionally over a full-bleed background image banner with a legibility overlay.
 
 | field | type | required | notes |
 |---|---|---|---|
@@ -55,6 +55,9 @@ Top-of-page banner: a big headline with an optional eyebrow, subheading, and one
 | `headline` | string | yes |  |
 | `subhead` | string |  |  |
 | `align` | undefined (center\|left) |  |  |
+| `image` | string |  |  |
+| `overlay` | undefined (scrim\|dark\|light\|none) |  |  |
+| `minHeight` | undefined (auto\|sm\|md\|lg\|full) |  |  |
 | `cta` | object |  |  |
 
 ## `hero-app`
@@ -69,6 +72,42 @@ An app landing hero: a headline and subhead over a primary install button, with
 | `installHref` | string |  |  |
 | `screenshots` | array |  |  |
 
+## `profile-header`
+
+A résumé/CV header: avatar, name, role, location, a contact + social row, and optional Download-PDF and Share buttons.
+
+| field | type | required | notes |
+|---|---|---|---|
+| `name` | string | yes |  |
+| `headline` | string |  |  |
+| `location` | string |  |  |
+| `avatar` | string |  |  |
+| `summary` | string |  |  |
+| `contacts` | array |  |  |
+| `showDownload` | boolean |  |  |
+| `downloadLabel` | string |  |  |
+| `showShare` | boolean |  |  |
+| `shareLabel` | string |  |  |
+
+## `experience`
+
+A résumé section of dated entries (role, org, period, location, bullets). Reuse for Experience, Education, Certifications by changing the title.
+
+| field | type | required | notes |
+|---|---|---|---|
+| `title` | string |  |  |
+| `items` | array |  |  |
+
+## `skills`
+
+Grouped skills shown as tags (with optional proficiency dots) or labelled level bars; also for languages and tools.
+
+| field | type | required | notes |
+|---|---|---|---|
+| `title` | string |  |  |
+| `display` | undefined (tags\|bars) |  |  |
+| `groups` | array |  |  |
+
 ## `features`
 
 A grid of value propositions, each with an optional icon/emoji, a title, and a short line of text.

package/CHANGELOG.md

@@ -5,6 +5,42 @@ follows [semantic versioning](https://semver.org): the **block catalog** and the
 **`SiteManifest` shape** are the public contract — additive block/field changes
 are minor, breaking changes to either are major.
 
+## 0.6.1 — 2026-07-16
+
+Docs only — no engine changes.
+
+### Added
+- A runnable **résumé example** (`npm run example:resume` → `resume-output.html`)
+  demonstrating the résumé pack + print-to-PDF end to end, and a README pointer
+  to it.
+
+## 0.6.0 — 2026-07-16
+
+A résumé/CV builder, hero image banners, and favicons. Additive and
+**non-breaking** — every `0.5.0` manifest still validates and renders identically.
+Catalog 42 → 45.
+
+### Added
+- **Résumé / CV pack** — turn the engine into a live-resume builder:
+  - **`profile-header`** — avatar (or initials), name, role, location, a contact +
+    social row (brand icons), and optional **Download-PDF** and **Share** buttons.
+  - **`experience`** — dated, structured entries (role, org, period, location,
+    summary, achievement bullets). Reuse for Experience / Education /
+    Certifications by changing its title.
+  - **`skills`** — grouped skills as tags (with proficiency dots) or level bars.
+  - **Print styles** — `renderSite` now emits an `@media print` stylesheet so any
+    page (especially a résumé) exports cleanly to PDF; the **`resume.js` island**
+    wires the header's Download (`window.print()`) and Share (Web Share API +
+    copy-link) buttons. `data-wl-noprint` elements are hidden from the printout.
+- **`hero` image banner** — the `hero` block gains optional `image`, `overlay`
+  (scrim / dark / light / none), and `minHeight` (sm / md / lg / full). With an
+  image, the photo sits behind the content (an `<img>` + scrim) with a legibility
+  overlay and the text flips to a readable colour; with no image it renders
+  exactly as before.
+- **`meta.favicon`** — a browser-tab favicon: a URL (svg/png/ico) **or a single
+  emoji** (rendered as an inline SVG data URI). `renderSite` emits a scheme-
+  sanitized `<link rel="icon">` in `<head>` when set.
+
 ## 0.5.0 — 2026-07-16
 
 More media & footer blocks, brand icons, and shipped interactivity. Additive and

package/README.md

@@ -101,7 +101,7 @@ is never raw HTML:
 
 ```ts
 type SiteManifest = {
-  meta:    { title: string; description: string; lang: string };
+  meta:    { title: string; description: string; lang: string; favicon?: string };
   design:  DesignTokens;   // the shared baseplate (CSS custom properties)
   blocks:  Block[];        // ordered, typed page sections
   version: number;         // bumped per accepted edit → undo / history / diff
@@ -139,12 +139,13 @@ import catalogJson from '@bytesbrains/weblocks/catalog.json' with { type: 'json'
 
 ## Block catalog
 
-**42 typed blocks.** Full field reference in [`CATALOG.md`](./CATALOG.md).
+**45 typed blocks.** Full field reference in [`CATALOG.md`](./CATALOG.md).
 
 | Group | Blocks |
 |---|---|
 | Chrome / app-shell | `nav` · `app-shell` · `sidebar` · `announcement-bar` · `footer` |
 | Heroes | `hero` · `hero-app` |
+| Résumé / profile | `profile-header` · `experience` · `skills` (live CV — avatar, dated entries, skills, Download-PDF/Share) |
 | Content | `features` · `about` · `rich-text` · `split` · `steps` · `stats` · `services-catalogue` · `pricing` · `logos` · `team` |
 | Media | `gallery` · `carousel` · `video` · `video-gallery` · `map` |
 | Location | `directions` (deep links to the visitor’s map app) |
@@ -246,6 +247,7 @@ island scripts** (zero-dependency, ~6 KB each) under a subpath:
 | `gallery` (`lightbox: true`) | `lightbox.js` | click-to-zoom, prev/next, keyboard, swipe, Esc |
 | `carousel` | `carousel.js` | arrows, dots, keyboard, optional autoplay |
 | `video-gallery` | `video.js` | click-to-play cards (load the real player inline on press) |
+| `profile-header` (Download/Share on) | `resume.js` | print-to-PDF (`window.print()`) + Web Share / copy-link |
 
 Serve them at the island URL. Copy from the package's `./islands/*.js` export, e.g.:
 
@@ -296,8 +298,9 @@ typed schema (no raw-HTML field), consumes shared tokens, renders totally
 npm install          # dev deps only (typescript, @types/node)
 npm run build        # tsc → lib/
 npm test             # block definition-of-done + engine invariants
-npm run example      # render a sample → example-output.html
-npm run emit:catalog # regenerate catalog.json + CATALOG.md from code
+npm run example         # render a sample landing page → example-output.html
+npm run example:resume  # render a live résumé/CV → resume-output.html (try its Download-PDF)
+npm run emit:catalog    # regenerate catalog.json + CATALOG.md from code
 ```
 
 Drive it end-to-end with a real model (dev harness — provider is env, not code):

package/catalog.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "package": "@bytesbrains/weblocks",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Block catalog for @bytesbrains/weblocks. Send this to the model as its API reference; it composes a SiteManifest ({ meta, design, blocks[] }) using ONLY these block types. The engine then validates and renders it.",
   "blockTypes": [
     "app-shell",
@@ -10,6 +10,9 @@
     "sidebar",
     "hero",
     "hero-app",
+    "profile-header",
+    "experience",
+    "skills",
     "features",
     "about",
     "rich-text",
@@ -237,7 +240,7 @@
     },
     {
       "type": "hero",
-      "description": "Top-of-page banner: a big headline with an optional eyebrow, subheading, and one call-to-action button.",
+      "description": "Top-of-page hero: a big headline with optional eyebrow, subheading, and CTA — optionally over a full-bleed background image banner with a legibility overlay.",
       "schema": {
         "type": "object",
         "properties": {
@@ -263,6 +266,30 @@
             ],
             "default": "center"
           },
+          "image": {
+            "type": "string",
+            "maxLength": 500,
+            "default": ""
+          },
+          "overlay": {
+            "enum": [
+              "scrim",
+              "dark",
+              "light",
+              "none"
+            ],
+            "default": "scrim"
+          },
+          "minHeight": {
+            "enum": [
+              "auto",
+              "sm",
+              "md",
+              "lg",
+              "full"
+            ],
+            "default": "auto"
+          },
           "cta": {
             "type": "object",
             "properties": {
@@ -342,6 +369,227 @@
         "additionalProperties": false
       }
     },
+    {
+      "type": "profile-header",
+      "description": "A résumé/CV header: avatar, name, role, location, a contact + social row, and optional Download-PDF and Share buttons.",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string",
+            "maxLength": 120,
+            "default": ""
+          },
+          "headline": {
+            "type": "string",
+            "maxLength": 160,
+            "default": ""
+          },
+          "location": {
+            "type": "string",
+            "maxLength": 120,
+            "default": ""
+          },
+          "avatar": {
+            "type": "string",
+            "maxLength": 500,
+            "default": ""
+          },
+          "summary": {
+            "type": "string",
+            "maxLength": 400,
+            "default": ""
+          },
+          "contacts": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "type": {
+                  "enum": [
+                    "email",
+                    "phone",
+                    "website",
+                    "location",
+                    "linkedin",
+                    "github",
+                    "twitter",
+                    "x",
+                    "custom"
+                  ],
+                  "default": "custom"
+                },
+                "value": {
+                  "type": "string",
+                  "maxLength": 300,
+                  "default": ""
+                },
+                "label": {
+                  "type": "string",
+                  "maxLength": 80,
+                  "default": ""
+                }
+              },
+              "required": [
+                "value"
+              ],
+              "additionalProperties": false
+            },
+            "maxItems": 10
+          },
+          "showDownload": {
+            "type": "boolean",
+            "default": false
+          },
+          "downloadLabel": {
+            "type": "string",
+            "maxLength": 40,
+            "default": "Download PDF"
+          },
+          "showShare": {
+            "type": "boolean",
+            "default": false
+          },
+          "shareLabel": {
+            "type": "string",
+            "maxLength": 40,
+            "default": "Share"
+          }
+        },
+        "required": [
+          "name"
+        ],
+        "additionalProperties": false
+      }
+    },
+    {
+      "type": "experience",
+      "description": "A résumé section of dated entries (role, org, period, location, bullets). Reuse for Experience, Education, Certifications by changing the title.",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "maxLength": 120,
+            "default": "Experience"
+          },
+          "items": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "role": {
+                  "type": "string",
+                  "maxLength": 120,
+                  "default": ""
+                },
+                "org": {
+                  "type": "string",
+                  "maxLength": 120,
+                  "default": ""
+                },
+                "period": {
+                  "type": "string",
+                  "maxLength": 60,
+                  "default": ""
+                },
+                "location": {
+                  "type": "string",
+                  "maxLength": 80,
+                  "default": ""
+                },
+                "url": {
+                  "type": "string",
+                  "maxLength": 500,
+                  "default": ""
+                },
+                "summary": {
+                  "type": "string",
+                  "maxLength": 300,
+                  "default": ""
+                },
+                "bullets": {
+                  "type": "array",
+                  "items": {
+                    "type": "string",
+                    "maxLength": 300,
+                    "default": ""
+                  },
+                  "maxItems": 12
+                }
+              },
+              "required": [
+                "role"
+              ],
+              "additionalProperties": false
+            },
+            "maxItems": 24
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    {
+      "type": "skills",
+      "description": "Grouped skills shown as tags (with optional proficiency dots) or labelled level bars; also for languages and tools.",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "maxLength": 120,
+            "default": "Skills"
+          },
+          "display": {
+            "enum": [
+              "tags",
+              "bars"
+            ],
+            "default": "tags"
+          },
+          "groups": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "maxLength": 60,
+                  "default": ""
+                },
+                "items": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                      "label": {
+                        "type": "string",
+                        "maxLength": 60,
+                        "default": ""
+                      },
+                      "level": {
+                        "type": "integer",
+                        "minimum": 0,
+                        "maximum": 5,
+                        "default": 0
+                      }
+                    },
+                    "required": [
+                      "label"
+                    ],
+                    "additionalProperties": false
+                  },
+                  "maxItems": 40
+                }
+              },
+              "additionalProperties": false
+            },
+            "maxItems": 10
+          }
+        },
+        "additionalProperties": false
+      }
+    },
     {
       "type": "features",
       "description": "A grid of value propositions, each with an optional icon/emoji, a title, and a short line of text.",

package/lib/blocks/experience.d.ts

@@ -0,0 +1,2 @@
+import type { BlockSpec } from '../registry.js';
+export declare const experience: BlockSpec;

package/lib/blocks/experience.js

@@ -0,0 +1,78 @@
+/**
+ * `experience` — a résumé section of dated, structured entries: role, org,
+ * period, location, an optional summary, and achievement bullets. One block for
+ * the whole family: set its `title` to "Experience", "Education",
+ * "Certifications", "Volunteering", etc. Print-friendly (entries avoid page
+ * breaks). Static brick.
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: 'Experience', max: 120 },
+    items: {
+        kind: 'array', max: 24,
+        of: {
+            kind: 'object',
+            fields: {
+                role: { kind: 'string', required: true, default: '', max: 120 }, // role / degree / title
+                org: { kind: 'string', default: '', max: 120 }, // company / school
+                period: { kind: 'string', default: '', max: 60 }, // e.g. "2021 – Present"
+                location: { kind: 'string', default: '', max: 80 },
+                url: { kind: 'string', default: '', max: 500 }, // org link
+                summary: { kind: 'string', default: '', max: 300 },
+                bullets: { kind: 'array', max: 12, of: { kind: 'string', default: '', max: 300 } },
+            },
+        },
+    },
+};
+const css = `
+.blk-experience{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-experience .wrap{max-width:820px;margin:0 auto}
+.blk-experience h2{font-size:var(--fs-xl);margin:0 0 var(--space);font-weight:800}
+.blk-experience .entry{padding:0 0 calc(var(--space)*1.3);margin-bottom:calc(var(--space)*1.3);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
+.blk-experience .entry:last-child{border-bottom:0;margin-bottom:0}
+.blk-experience .top{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap;align-items:baseline}
+.blk-experience .role{font-weight:700;font-size:var(--fs-lg)}
+.blk-experience .org{color:var(--primary);font-weight:600}
+.blk-experience .org a{color:inherit;text-decoration:none}
+.blk-experience .org a:hover{text-decoration:underline}
+.blk-experience .period{color:var(--muted);font-size:var(--fs-base);font-variant-numeric:tabular-nums;white-space:nowrap}
+.blk-experience .loc{color:var(--muted);font-size:var(--fs-base);margin:.1em 0 0}
+.blk-experience .summary{margin:.5em 0 0;color:var(--muted)}
+.blk-experience ul{margin:.5em 0 0;padding-left:1.3em}
+.blk-experience li{margin:.25em 0;line-height:1.5}
+`.trim();
+function entry(it) {
+    if (!it.role)
+        return '';
+    const url = sanitizeUrl(it.url);
+    const org = it.org
+        ? `<span class="org">${(url !== '#' && it.url) ? `<a href="${escapeAttr(url)}" rel="noopener">${escapeHtml(it.org)}</a>` : escapeHtml(it.org)}</span>`
+        : '';
+    const bullets = (it.bullets ?? []).filter(Boolean).map((b) => `<li>${escapeHtml(b)}</li>`).join('');
+    return `<div class="entry">
+      <div class="top">
+        <div><span class="role">${escapeHtml(it.role)}</span>${org ? ` · ${org}` : ''}</div>
+        ${it.period ? `<span class="period">${escapeHtml(it.period)}</span>` : ''}
+      </div>
+      ${it.location ? `<p class="loc">${escapeHtml(it.location)}</p>` : ''}
+      ${it.summary ? `<p class="summary">${escapeHtml(it.summary)}</p>` : ''}
+      ${bullets ? `<ul>${bullets}</ul>` : ''}
+    </div>`;
+}
+function render(config) {
+    const title = config.title;
+    const items = (config.items ?? []).map(entry).filter(Boolean);
+    return `<section class="blk-experience" aria-label="${escapeAttr(title || 'Experience')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    ${items.join('\n    ')}
+  </div>
+</section>`;
+}
+export const experience = {
+    type: 'experience',
+    description: 'A résumé section of dated entries (role, org, period, location, bullets). Reuse for Experience, Education, Certifications by changing the title.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/hero.js

@@ -1,10 +1,18 @@
-/** `hero` — headline + optional eyebrow/subhead/CTA. Static brick. */
+/**
+ * `hero` — headline + optional eyebrow/subhead/CTA, optionally over a background
+ * **image banner**. When `image` is set the photo sits behind the content with a
+ * legibility overlay (scrim/dark/light) and the text flips to a readable colour;
+ * with no image it renders exactly as a plain text hero. Static brick.
+ */
 import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
 const schema = {
     eyebrow: { kind: 'string', default: '', max: 80 },
     headline: { kind: 'string', required: true, default: 'Your headline here', max: 160 },
     subhead: { kind: 'string', default: '', max: 320 },
     align: { kind: 'enum', values: ['center', 'left'], default: 'center' },
+    image: { kind: 'string', default: '', max: 500 }, // background banner image
+    overlay: { kind: 'enum', values: ['scrim', 'dark', 'light', 'none'], default: 'scrim' }, // legibility layer (with image)
+    minHeight: { kind: 'enum', values: ['auto', 'sm', 'md', 'lg', 'full'], default: 'auto' },
     cta: {
         kind: 'object',
         fields: {
@@ -22,6 +30,19 @@ const css = `
 .blk-hero p{font-size:var(--fs-lg);color:var(--muted);margin:0;max-width:60ch}
 .blk-hero .cta{display:inline-block;background:var(--primary);color:var(--on-primary);padding:.7em 1.4em;border-radius:var(--radius);text-decoration:none;font-weight:600;transition:transform var(--motion)}
 .blk-hero .cta:hover{transform:translateY(-1px)}
+/* Image banner */
+.blk-hero.has-image{position:relative;isolation:isolate;color:#fff}
+.blk-hero.has-image .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
+.blk-hero.has-image .scrim{position:absolute;inset:0;z-index:-1}
+.blk-hero.overlay-dark .scrim{background:rgba(0,0,0,.55)}
+.blk-hero.overlay-scrim .scrim{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.6))}
+.blk-hero.overlay-light{color:var(--text)}
+.blk-hero.overlay-light .scrim{background:rgba(255,255,255,.62)}
+.blk-hero.has-image.overlay-none{color:var(--text)}
+.blk-hero.overlay-none .scrim{display:none}
+.blk-hero.has-image .eyebrow,.blk-hero.has-image p{color:inherit;opacity:.9}
+.blk-hero.mh-sm{min-height:36vh}.blk-hero.mh-md{min-height:52vh}.blk-hero.mh-lg{min-height:72vh}.blk-hero.mh-full{min-height:100vh}
+.blk-hero.mh-sm,.blk-hero.mh-md,.blk-hero.mh-lg,.blk-hero.mh-full{display:flex;flex-direction:column;justify-content:center}
 `.trim();
 function render(config) {
     const eyebrow = config.eyebrow;
@@ -29,20 +50,32 @@ function render(config) {
     const subhead = config.subhead;
     const align = config.align;
     const cta = config.cta;
+    const imageUrl = sanitizeUrl(config.image);
+    const hasImg = imageUrl !== '#' && !!config.image;
+    const overlay = ['scrim', 'dark', 'light', 'none'].includes(config.overlay) ? config.overlay : 'scrim';
+    const minHeight = ['auto', 'sm', 'md', 'lg', 'full'].includes(config.minHeight) ? config.minHeight : 'auto';
+    const classes = ['blk-hero'];
+    if (hasImg)
+        classes.push('has-image', `overlay-${overlay}`);
+    if (minHeight !== 'auto')
+        classes.push(`mh-${minHeight}`);
+    const banner = hasImg
+        ? `<img class="bg" src="${escapeAttr(imageUrl)}" alt="" aria-hidden="true">\n  <div class="scrim"></div>\n  `
+        : '';
     const parts = [
         eyebrow ? `<p class="eyebrow">${escapeHtml(eyebrow)}</p>` : '',
         `<h1>${escapeHtml(headline)}</h1>`,
         subhead ? `<p>${escapeHtml(subhead)}</p>` : '',
         cta.label ? `<a class="cta" href="${escapeAttr(sanitizeUrl(cta.href))}">${escapeHtml(cta.label)}</a>` : '',
     ].filter(Boolean).join('\n    ');
-    return `<section class="blk-hero" data-align="${escapeAttr(align)}" aria-label="Hero">
-  <div class="wrap">
+    return `<section class="${classes.join(' ')}" data-align="${escapeAttr(align)}" aria-label="Hero">
+  ${banner}<div class="wrap">
     ${parts}
   </div>
 </section>`;
 }
 export const hero = {
     type: 'hero',
-    description: 'Top-of-page banner: a big headline with an optional eyebrow, subheading, and one call-to-action button.',
+    description: 'Top-of-page hero: a big headline with optional eyebrow, subheading, and CTA — optionally over a full-bleed background image banner with a legibility overlay.',
     schema, css, render,
 };

package/lib/blocks/profileHeader.d.ts

@@ -0,0 +1,2 @@
+import type { BlockSpec } from '../registry.js';
+export declare const profileHeader: BlockSpec;

package/lib/blocks/profileHeader.js

@@ -0,0 +1,124 @@
+/**
+ * `profile-header` — the résumé/CV header: avatar, name, role/headline, location,
+ * a contact + social row (brand icons), an optional short summary, and optional
+ * **Download-PDF** (print) and **Share** action buttons. The buttons are wired by
+ * the `resume` island (print → `window.print()` with the engine's print styles;
+ * share → Web Share API + copy-link fallback) and are hidden from the printout.
+ * Static markup; island only ships when an action button is enabled.
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+import { BRAND_ICON_PATHS } from './brandIcons.js';
+// Generic (non-brand) contact glyphs — filled, 24×24.
+const GENERIC = {
+    email: 'M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v.5l-10 6.25L2 6.5V6zm0 2.85V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8.85l-9.47 5.92a1 1 0 0 1-1.06 0L2 8.85z',
+    phone: 'M6.62 2.53c.5-.2 1.08.02 1.36.49l1.7 3.01c.24.42.18.95-.15 1.3L8.06 9.03a12 12 0 0 0 6.9 6.9l1.7-1.47c.35-.33.88-.39 1.3-.15l3.01 1.7c.47.28.69.86.49 1.36l-.98 2.4c-.22.55-.79.9-1.4.83C10.7 20.1 3.9 13.3 3.1 5.9c-.07-.6.28-1.18.83-1.4l2.69-1.97z',
+    website: 'M14 3h7v7h-2V6.41l-8.29 8.3-1.42-1.42L17.59 5H14V3zM5 5h5v2H5v12h12v-5h2v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z',
+    location: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z',
+};
+const CONTACT_TYPES = ['email', 'phone', 'website', 'location', 'linkedin', 'github', 'twitter', 'x', 'custom'];
+const schema = {
+    name: { kind: 'string', required: true, default: '', max: 120 },
+    headline: { kind: 'string', default: '', max: 160 }, // role / tagline
+    location: { kind: 'string', default: '', max: 120 },
+    avatar: { kind: 'string', default: '', max: 500 },
+    summary: { kind: 'string', default: '', max: 400 },
+    contacts: {
+        kind: 'array', max: 10,
+        of: {
+            kind: 'object',
+            fields: {
+                type: { kind: 'enum', values: CONTACT_TYPES, default: 'custom' },
+                value: { kind: 'string', required: true, default: '', max: 300 }, // email / phone / url / text
+                label: { kind: 'string', default: '', max: 80 }, // shown text (defaults to value)
+            },
+        },
+    },
+    showDownload: { kind: 'boolean', default: false },
+    downloadLabel: { kind: 'string', default: 'Download PDF', max: 40 },
+    showShare: { kind: 'boolean', default: false },
+    shareLabel: { kind: 'string', default: 'Share', max: 40 },
+};
+const css = `
+.blk-profile-header{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-profile-header .wrap{max-width:900px;margin:0 auto;display:flex;gap:calc(var(--space)*1.4);align-items:center;flex-wrap:wrap}
+.blk-profile-header .avatar,.blk-profile-header .initials{width:112px;height:112px;border-radius:999px;flex:0 0 auto;object-fit:cover;display:flex;align-items:center;justify-content:center}
+.blk-profile-header .initials{background:color-mix(in srgb,var(--primary) 18%,var(--surface));color:var(--primary);font-weight:800;font-size:var(--fs-xl)}
+.blk-profile-header .info{flex:1;min-width:min(280px,100%)}
+.blk-profile-header h1{margin:0;font-size:var(--fs-xl);font-weight:800;line-height:1.1}
+.blk-profile-header .role{margin:.2em 0 0;color:var(--primary);font-weight:600;font-size:var(--fs-lg)}
+.blk-profile-header .summary{margin:.5em 0 0;color:var(--muted)}
+.blk-profile-header .contacts{display:flex;flex-wrap:wrap;gap:.4em 1.1em;margin:.8em 0 0}
+.blk-profile-header .contacts a,.blk-profile-header .contacts span.c{display:inline-flex;align-items:center;gap:.4em;color:var(--muted);text-decoration:none;font-size:var(--fs-base)}
+.blk-profile-header .contacts a:hover{color:var(--primary)}
+.blk-profile-header .contacts svg{width:1.05em;height:1.05em;flex:0 0 auto}
+.blk-profile-header .actions{display:flex;gap:.6em;flex-wrap:wrap;margin:calc(var(--space)*1.1) 0 0;flex-basis:100%}
+.blk-profile-header .btn{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:var(--radius);padding:.6em 1.2em;background:var(--primary);color:var(--on-primary)}
+.blk-profile-header .btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)}
+@media(max-width:560px){.blk-profile-header .wrap{justify-content:center;text-align:center}.blk-profile-header .contacts{justify-content:center}}
+`.trim();
+function svg(path) {
+    return `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="${path}"></path></svg>`;
+}
+function initials(name) {
+    return name.trim().split(/\s+/).slice(0, 2).map((w) => w[0] ?? '').join('').toUpperCase() || '?';
+}
+function contact(c) {
+    const type = CONTACT_TYPES.includes(c.type) ? c.type : 'custom';
+    const value = c.value;
+    if (!value)
+        return '';
+    const text = escapeHtml(c.label || value);
+    const iconPath = type === 'twitter' || type === 'x' ? BRAND_ICON_PATHS.x
+        : (BRAND_ICON_PATHS[type] ?? GENERIC[type]);
+    const icon = iconPath ? svg(iconPath) : '';
+    if (type === 'location')
+        return `<span class="c">${icon}${text}</span>`;
+    let href = value;
+    if (type === 'email')
+        href = `mailto:${value}`;
+    else if (type === 'phone')
+        href = `tel:${value.replace(/[^0-9+]/g, '')}`;
+    const safe = sanitizeUrl(href);
+    if (safe === '#')
+        return `<span class="c">${icon}${text}</span>`;
+    return `<a href="${escapeAttr(safe)}" rel="noopener">${icon}${text}</a>`;
+}
+function render(config) {
+    const name = config.name;
+    const headline = config.headline;
+    const summary = config.summary;
+    const avatarUrl = sanitizeUrl(config.avatar);
+    const hasAvatar = avatarUrl !== '#' && !!config.avatar;
+    const contacts = (config.contacts ?? []).map(contact).filter(Boolean);
+    const showDownload = config.showDownload === true;
+    const showShare = config.showShare === true;
+    const avatar = hasAvatar
+        ? `<img class="avatar" src="${escapeAttr(avatarUrl)}" alt="${escapeAttr(name)}">`
+        : `<div class="initials" aria-hidden="true">${escapeHtml(initials(name))}</div>`;
+    const actions = (showDownload || showShare)
+        ? `<div class="actions" data-wl-noprint>
+      ${showDownload ? `<button class="btn" type="button" data-wl-print>${escapeHtml(config.downloadLabel || 'Download PDF')}</button>` : ''}
+      ${showShare ? `<button class="btn ghost" type="button" data-wl-share>${escapeHtml(config.shareLabel || 'Share')}</button>` : ''}
+    </div>`
+        : '';
+    return `<section class="blk-profile-header" aria-label="${escapeAttr(name || 'Profile')}">
+  <div class="wrap">
+    ${avatar}
+    <div class="info">
+      <h1>${escapeHtml(name)}</h1>
+      ${headline ? `<p class="role">${escapeHtml(headline)}</p>` : ''}
+      ${summary ? `<p class="summary">${escapeHtml(summary)}</p>` : ''}
+      ${contacts.length ? `<div class="contacts">${contacts.join('')}</div>` : ''}
+    </div>
+    ${actions}
+  </div>
+</section>`;
+}
+export const profileHeader = {
+    type: 'profile-header',
+    description: 'A résumé/CV header: avatar, name, role, location, a contact + social row, and optional Download-PDF and Share buttons.',
+    schema,
+    css,
+    render,
+    island: 'resume',
+};

package/lib/blocks/skills.d.ts

@@ -0,0 +1,2 @@
+import type { BlockSpec } from '../registry.js';
+export declare const skills: BlockSpec;

package/lib/blocks/skills.js

@@ -0,0 +1,91 @@
+/**
+ * `skills` — grouped skills shown as **tags** (chips, with optional proficiency
+ * dots) or **bars** (labelled level bars). Doubles for Languages, Tools, etc.
+ * Static brick.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: 'Skills', max: 120 },
+    display: { kind: 'enum', values: ['tags', 'bars'], default: 'tags' },
+    groups: {
+        kind: 'array', max: 10,
+        of: {
+            kind: 'object',
+            fields: {
+                name: { kind: 'string', default: '', max: 60 }, // e.g. "Languages"
+                items: {
+                    kind: 'array', max: 40,
+                    of: {
+                        kind: 'object',
+                        fields: {
+                            label: { kind: 'string', required: true, default: '', max: 60 },
+                            level: { kind: 'int', min: 0, max: 5, default: 0 }, // 0 = unrated
+                        },
+                    },
+                },
+            },
+        },
+    },
+};
+const css = `
+.blk-skills{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-skills .wrap{max-width:820px;margin:0 auto}
+.blk-skills h2{font-size:var(--fs-xl);margin:0 0 var(--space);font-weight:800}
+.blk-skills .group{margin-bottom:calc(var(--space)*1.1)}
+.blk-skills .group:last-child{margin-bottom:0}
+.blk-skills .gname{font-weight:700;font-size:var(--fs-base);margin:0 0 .5em;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
+.blk-skills .tags{display:flex;flex-wrap:wrap;gap:.5em}
+.blk-skills .tag{display:inline-flex;align-items:center;gap:.5em;padding:.4em .8em;border-radius:999px;background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);font-size:var(--fs-base);font-weight:600}
+.blk-skills .dots{display:inline-flex;gap:2px}
+.blk-skills .dots i{width:6px;height:6px;border-radius:999px;background:color-mix(in srgb,var(--text) 25%,transparent)}
+.blk-skills .dots i.on{background:var(--primary)}
+.blk-skills .bars{display:grid;gap:.6em}
+.blk-skills .bar{display:grid;grid-template-columns:minmax(90px,180px) 1fr;gap:.8em;align-items:center}
+.blk-skills .bar .blabel{font-weight:600;font-size:var(--fs-base)}
+.blk-skills .track{height:8px;border-radius:999px;background:color-mix(in srgb,var(--text) 12%,transparent);overflow:hidden}
+.blk-skills .fill{height:100%;background:var(--primary);border-radius:999px}
+@media(max-width:480px){.blk-skills .bar{grid-template-columns:1fr}}
+`.trim();
+function dots(level) {
+    const n = Math.max(0, Math.min(5, level | 0));
+    if (!n)
+        return '';
+    return `<span class="dots" aria-hidden="true">${Array.from({ length: 5 }, (_v, i) => `<i class="${i < n ? 'on' : ''}"></i>`).join('')}</span>`;
+}
+function group(g, display) {
+    const items = (g.items ?? []).filter((s) => s && s.label);
+    if (!items.length)
+        return '';
+    let body;
+    if (display === 'bars') {
+        body = `<div class="bars">${items.map((s) => {
+            const pct = Math.max(0, Math.min(5, s.level | 0)) * 20;
+            return `<div class="bar"><span class="blabel">${escapeHtml(s.label)}</span><span class="track"><span class="fill" style="width:${pct}%"></span></span></div>`;
+        }).join('')}</div>`;
+    }
+    else {
+        body = `<div class="tags">${items.map((s) => `<span class="tag">${escapeHtml(s.label)}${dots(s.level)}</span>`).join('')}</div>`;
+    }
+    return `<div class="group">
+      ${g.name ? `<p class="gname">${escapeHtml(g.name)}</p>` : ''}
+      ${body}
+    </div>`;
+}
+function render(config) {
+    const title = config.title;
+    const display = config.display === 'bars' ? 'bars' : 'tags';
+    const groups = (config.groups ?? []).map((g) => group(g, display)).filter(Boolean);
+    return `<section class="blk-skills" aria-label="${escapeAttr(title || 'Skills')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    ${groups.join('\n    ')}
+  </div>
+</section>`;
+}
+export const skills = {
+    type: 'skills',
+    description: 'Grouped skills shown as tags (with optional proficiency dots) or labelled level bars; also for languages and tools.',
+    schema,
+    css,
+    render,
+};

package/lib/islands/resume.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/islands/resume.js

@@ -0,0 +1,42 @@
+/**
+ * `resume` island — wires the `profile-header` action buttons.
+ *
+ * Shipped from `@bytesbrains/weblocks/islands/resume.js`; served at the island
+ * URL the renderer emits (default `/_island/resume.js`). Zero dependencies,
+ * self-executing, idempotent, guarded by `typeof document`.
+ *
+ * - `[data-wl-print]` → `window.print()`. The engine's `@media print` styles turn
+ *   the page into a clean one-column résumé, so "Save as PDF" in the print dialog
+ *   produces the downloadable CV.
+ * - `[data-wl-share]` → the Web Share API (native share sheet) with a
+ *   copy-link-to-clipboard fallback.
+ */
+if (typeof document !== 'undefined') {
+    const ready = (fn) => document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', fn) : fn();
+    ready(() => {
+        document.querySelectorAll('[data-wl-print]').forEach((btn) => {
+            btn.addEventListener('click', () => window.print());
+        });
+        document.querySelectorAll('[data-wl-share]').forEach((btn) => {
+            btn.addEventListener('click', async () => {
+                const url = location.href;
+                const nav = navigator;
+                if (typeof nav.share === 'function') {
+                    try {
+                        await nav.share({ title: document.title, url });
+                    }
+                    catch { /* dismissed */ }
+                    return;
+                }
+                try {
+                    await navigator.clipboard.writeText(url);
+                    const prev = btn.textContent;
+                    btn.textContent = 'Link copied';
+                    setTimeout(() => { btn.textContent = prev; }, 1800);
+                }
+                catch { /* clipboard blocked */ }
+            });
+        });
+    });
+}
+export {};

package/lib/registry.js

@@ -2,6 +2,9 @@ import { nav } from './blocks/nav.js';
 import { announcementBar } from './blocks/announcementBar.js';
 import { hero } from './blocks/hero.js';
 import { heroApp } from './blocks/heroApp.js';
+import { profileHeader } from './blocks/profileHeader.js';
+import { experience } from './blocks/experience.js';
+import { skills } from './blocks/skills.js';
 import { features } from './blocks/features.js';
 import { about } from './blocks/about.js';
 import { richText } from './blocks/richText.js';
@@ -47,6 +50,8 @@ const SPECS = [
     appShell, nav, announcementBar, sidebar,
     // heroes
     hero, heroApp,
+    // résumé / profile
+    profileHeader, experience, skills,
     // content
     features, about, richText, split, steps, stats,
     services, pricing, logos, team,
@@ -82,5 +87,8 @@ export function needsIsland(spec, config) {
         return false;
     if (spec.type === 'gallery')
         return config.lightbox === true;
+    // profile-header only needs the resume island when an action button is shown.
+    if (spec.type === 'profile-header')
+        return config.showDownload === true || config.showShare === true;
     return true;
 }

package/lib/render.js

@@ -9,7 +9,7 @@
  * options and speak the §6 contract; with the default no-op runtime they render
  * inert-but-valid. PWA/SEO head tags are emitted only when the manifest opts in.
  */
-import { escapeAttr, escapeHtml, parse } from './schema.js';
+import { escapeAttr, escapeHtml, parse, sanitizeUrl } from './schema.js';
 import { getSpec, needsIsland, REGISTRY } from './registry.js';
 import { normalizeTokens, sectionOverrideCss, tokensToCss } from './tokens.js';
 import { NOOP_RUNTIME } from './runtime.js';
@@ -20,6 +20,10 @@ img{max-width:100%}
 .blk-scope{display:block}
 @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
 `.trim().replace(/\n/g, '');
+// Print styles — makes any page (especially a résumé) export cleanly to PDF via
+// the browser's print dialog: keep colours, hide `data-wl-noprint` controls,
+// un-stick fixed chrome, and avoid splitting entries across pages.
+const PRINT_CSS = `@media print{*{-webkit-print-color-adjust:exact;print-color-adjust:exact}[data-wl-noprint]{display:none!important}.blk-nav,.blk-app-shell,.blk-announcement-bar,.blk-sidebar{position:static!important}.blk-profile-header,.blk-experience .entry,.blk-skills .group,.blk-timeline li{break-inside:avoid}a[href]{text-decoration:none}@page{margin:1.4cm}}`;
 /** Render one block: normalize its config, then hand markup to the brick. */
 function renderBlock(block, manifest, runtime) {
     const spec = getSpec(block.type);
@@ -67,13 +71,26 @@ export function renderSite(manifest, options = {}) {
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>${escapeHtml(meta.title || 'Untitled site')}</title>${meta.description ? `\n<meta name="description" content="${escapeAttr(meta.description)}">` : ''}${headExtras(manifest, tokens.palette.primary)}
-<style>${tokensToCss(tokens)}\n${RESET_CSS}\n${blockCss}</style>
+<style>${tokensToCss(tokens)}\n${RESET_CSS}\n${blockCss}\n${PRINT_CSS}</style>
 </head>
 <body>
 ${body}${islandTags ? '\n' + islandTags : ''}
 </body>
 </html>`;
 }
+/** A browser-tab favicon link from meta.favicon (emoji → data URI, else a URL). */
+function faviconTag(fav) {
+    const s = String(fav ?? '').trim();
+    if (!s)
+        return '';
+    // A short glyph with no scheme/slash/dot → treat as an emoji favicon.
+    if ([...s].length <= 2 && !/[/:.]/.test(s)) {
+        const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">${escapeHtml(s)}</text></svg>`;
+        return `<link rel="icon" href="data:image/svg+xml,${encodeURIComponent(svg)}">`;
+    }
+    const url = sanitizeUrl(s);
+    return url === '#' ? '' : `<link rel="icon" href="${escapeAttr(url)}">`;
+}
 /** SEO + PWA <head> tags, emitted only when the manifest opts in. */
 function headExtras(manifest, primary) {
     const out = [];
@@ -81,6 +98,9 @@ function headExtras(manifest, primary) {
     const pwa = manifest?.pwa;
     const title = manifest?.meta?.title ?? '';
     const desc = manifest?.meta?.description ?? '';
+    const favicon = faviconTag(manifest?.meta?.favicon);
+    if (favicon)
+        out.push(favicon);
     if (seo) {
         if (seo.canonical)
             out.push(`<link rel="canonical" href="${escapeAttr(seo.canonical)}">`);

package/lib/types.d.ts

@@ -62,6 +62,11 @@ export interface SiteMeta {
     title: string;
     description: string;
     lang: string;
+    /**
+     * Optional browser-tab favicon: a URL to an icon (svg/png/ico), OR a single
+     * emoji/glyph (rendered as an inline SVG data URI). Absent = no icon link.
+     */
+    favicon?: string;
 }
 /**
  * Optional PWA descriptor. When present the engine can emit a Web App Manifest

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytesbrains/weblocks",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Block engine for AI-composable web apps — the AI composes a SiteManifest from a fixed block catalog; the engine validates and renders it to static HTML. Snap-together \"Lego\" web building blocks, shareable across repos.",
   "keywords": [
     "ai",
@@ -37,7 +37,7 @@
     "lib",
     "!lib/**/*.test.js",
     "!lib/**/*.test.d.ts",
-    "!lib/example.*",
+    "!lib/example*",
     "catalog.json",
     "CATALOG.md",
     "AGENT.md",
@@ -61,6 +61,7 @@
     "emit:catalog": "node scripts/emit-catalog.mjs",
     "test": "npm run build && node --test lib/*.test.js test/*.mjs",
     "example": "tsc -p tsconfig.json && node lib/example.js",
+    "example:resume": "tsc -p tsconfig.json && node lib/example-resume.js",
     "ai": "tsc -p tsconfig.json && node scripts/ai-run.mjs",
     "prepare": "npm run build",
     "prepublishOnly": "npm run build && npm run emit:catalog && npm test"