@bytesbrains/weblocks 0.4.0 → 0.6.0

package/AGENT.md

@@ -46,20 +46,27 @@ its exact config schema:
 - `catalogPrompt()` — a compact text menu for a system prompt.
 - `CATALOG.md` — the same, human-readable.
 
-The 40 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`, `map`
+- **Media:** `gallery`, `carousel`, `video`, `video-gallery`, `map`
 - **Location:** `directions` (deep links to open the visitor’s map app)
 - **Structured:** `timeline`, `tabs`, `accordion`, `testimonials`, `faq`
 - **Collections:** `blog-list`, `blog-post`, `feed`
 - **Dynamic (powered):** `contact-form`, `newsletter`, `search`, `auth`
-- **Conversion/rhythm:** `cta`, `social-links`, `contact-details`, `divider`, `spacer`
+- **Conversion/rhythm:** `cta`, `social-links`, `contact-details`, `divider`, `spacer`, `copyright`
 - **Legal:** `legal` (terms/privacy links that open safe-Markdown dialogs; content is Markdown, never raw HTML)
 
+Interactivity is safe to enable: `gallery` with `lightbox: true`, `carousel` with
+`autoplay: true`, `tabs`/`accordion`, etc. work out of the box — CSS-only where
+possible, and the host serves small shipped islands (`gallery` lightbox,
+`carousel` controls) for the rest. You just set the typed config; you never write
+the JavaScript.
+
 ## Composing a manifest
 
 Emit exactly this shape (a block’s `id` is optional — the engine assigns one):
@@ -160,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.4.0)
+# @bytesbrains/weblocks — Block Catalog (v0.6.0)
 
 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` · `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` · `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.
@@ -203,6 +242,17 @@ A responsive embedded video from YouTube or Vimeo (by id or URL) or a self-hoste
 | `poster` | string |  |  |
 | `caption` | string |  |  |
 
+## `video-gallery`
+
+A grid or carousel of click-to-play video cards (YouTube/Vimeo/file); each loads its player inline on click (a lightweight facade — no heavy iframes up front).
+
+| field | type | required | notes |
+|---|---|---|---|
+| `title` | string |  |  |
+| `layout` | undefined (grid\|carousel) |  |  |
+| `columns` | integer (2\|3\|4) |  |  |
+| `items` | array |  |  |
+
 ## `map`
 
 An embedded location map for a place or address query, with configurable zoom and height and a link to the full map.
@@ -352,11 +402,14 @@ A full-width call-to-action band: a headline, optional subheading, and one butto
 
 ## `social-links`
 
-A centered row of links to social or external profiles, each an optional icon plus a label.
+A row or grid of links to social/contact profiles; each link picks a built-in brand icon by platform (or a custom emoji), shown labeled or icon-only.
 
 | field | type | required | notes |
 |---|---|---|---|
 | `title` | string |  |  |
+| `layout` | undefined (row\|grid) |  |  |
+| `variant` | undefined (labeled\|icon) |  |  |
+| `align` | undefined (start\|center\|end) |  |  |
 | `links` | array |  |  |
 
 ## `contact-details`
@@ -413,6 +466,18 @@ Deliberate vertical whitespace between sections, in one of four sizes (sm, md, l
 |---|---|---|---|
 | `size` | undefined (sm\|md\|lg\|xl) |  |  |
 
+## `copyright`
+
+A small copyright bar (© year holder + rights text) for the bottom of a page; the year auto-fills to the current year when left blank.
+
+| field | type | required | notes |
+|---|---|---|---|
+| `holder` | string |  |  |
+| `year` | string |  |  |
+| `text` | string |  |  |
+| `showSymbol` | boolean |  |  |
+| `align` | undefined (start\|center\|end) |  |  |
+
 ## `footer`
 
 Page footer: brand, tagline, a row of links, and a copyright line. Place last.

package/CHANGELOG.md

@@ -5,6 +5,68 @@ 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.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
+**non-breaking** — every `0.4.0` manifest still validates and renders identically.
+Catalog 40 → 42.
+
+### Added
+- **`video-gallery` block** — a grid or carousel of **click-to-play video cards**
+  (YouTube / Vimeo / self-hosted). Each card is a lightweight *facade* (thumbnail
+  + play button); the new **`video.js` island** loads the real player inline on
+  click, so no heavy iframes load up front. YouTube thumbnails auto-derive from
+  the id; no-JS clicks open the platform.
+- **`copyright` block** — a small "© year holder · rights" bar for the bottom of
+  a page (a standalone alternative to the `footer` copyright line). The year
+  auto-fills to the current year when blank; configurable holder, note, symbol,
+  and alignment.
+- **`social-links` — built-in brand icons & layouts.** Each link takes a typed
+  `platform` (x/twitter, instagram, facebook, linkedin, youtube, github, tiktok,
+  whatsapp, telegram, discord, mastodon, rss, email, website, phone) that supplies
+  a monochrome brand icon (simple-icons, CC0; themed via `currentColor`) and a
+  default label — `custom` still takes your own emoji/glyph. New `layout`
+  (row/grid), `variant` (labeled/icon-only), and `align` options. Non-breaking.
+- **Shipped interactive islands** — the engine now ships the client scripts for
+  its interactive blocks (previously host-provided), as zero-dependency browser
+  modules under the `./islands/*.js` subpath export:
+  - `lightbox.js` — `gallery` click-to-zoom: prev/next, keyboard, swipe, Esc,
+    caption, scroll-lock, focus restore.
+  - `carousel.js` — `carousel` arrows, dot indicators, keyboard nav, and optional
+    autoplay (honours `prefers-reduced-motion`, pauses on hover/focus).
+- `renderSite(manifest, { islandBase })` to configure where island scripts are
+  served (default `/_island`).
+- Islands are built by a separate `tsconfig.islands.json` (DOM lib); the engine's
+  Node code stays DOM-free. `gallery` now marks `data-wl-lightbox` when its
+  lightbox is enabled.
+
 ## 0.4.0 — 2026-07-16
 
 Additive and non-breaking — every `0.3.0` manifest still validates and renders

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,19 +139,20 @@ import catalogJson from '@bytesbrains/weblocks/catalog.json' with { type: 'json'
 
 ## Block catalog
 
-**40 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` · `map` |
+| Media | `gallery` · `carousel` · `video` · `video-gallery` · `map` |
 | Location | `directions` (deep links to the visitor’s map app) |
 | Structured | `timeline` · `tabs` · `accordion` · `testimonials` · `faq` |
 | Collections | `blog-list` · `blog-post` · `feed` |
 | Dynamic (powered) | `contact-form` · `newsletter` · `search` · `auth` |
-| Conversion / rhythm | `cta` · `social-links` · `contact-details` · `divider` · `spacer` |
+| Conversion / rhythm | `cta` · `social-links` · `contact-details` · `divider` · `spacer` · `copyright` |
 | Legal | `legal` (terms/privacy links → safe-Markdown dialogs) |
 
 `rich-text` and `blog-post` carry **typed** content nodes (headings, paragraphs,
@@ -234,6 +235,31 @@ for (const [file, body] of Object.entries(emitPwa(manifest) ?? {})) writeFileSyn
 // → manifest.webmanifest + sw.js
 ```
 
+## Interactivity (islands)
+
+Pages are static-first: JavaScript ships only for the interactive blocks that need
+it, and only when their behaviour is on. `renderSite` emits a marker for each —
+`<script type="module" src="/_island/<name>.js">` — and the engine **ships the
+island scripts** (zero-dependency, ~6 KB each) under a subpath:
+
+| Block | Island | Behaviour |
+|---|---|---|
+| `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.:
+
+```ts
+import lightbox from '@bytesbrains/weblocks/islands/lightbox.js?url'; // bundler
+// or, for a static host, copy node_modules/@bytesbrains/weblocks/lib/islands/*.js
+// to /_island/  (change the base with renderSite(m, { islandBase: '/assets/js' }))
+```
+
+Blocks whose behaviour is off (e.g. `tabs`, `accordion` — CSS-only) ship no JS at
+all.
+
 ## API reference
 
 All exports are named; types are shipped (`lib/index.d.ts`).