@bytesbrains/weblocks 0.4.0 → 0.5.0

package/AGENT.md

@@ -46,20 +46,26 @@ 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 42 block types, by group:
 
 - **Chrome/app-shell:** `nav`, `app-shell`, `sidebar`, `announcement-bar`, `footer`
 - **Heroes:** `hero`, `hero-app`
 - **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):

package/CATALOG.md

@@ -1,8 +1,8 @@
-# @bytesbrains/weblocks — Block Catalog (v0.4.0)
+# @bytesbrains/weblocks — Block Catalog (v0.5.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` · `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`
 
@@ -203,6 +203,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 +363,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 +427,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,41 @@ 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.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

@@ -139,19 +139,19 @@ import catalogJson from '@bytesbrains/weblocks/catalog.json' with { type: 'json'
 
 ## Block catalog
 
-**40 typed blocks.** Full field reference in [`CATALOG.md`](./CATALOG.md).
+**42 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` |
 | 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 +234,30 @@ 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) |
+
+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`).

package/catalog.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "package": "@bytesbrains/weblocks",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "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",
@@ -23,6 +23,7 @@
     "gallery",
     "carousel",
     "video",
+    "video-gallery",
     "map",
     "timeline",
     "tabs",
@@ -43,6 +44,7 @@
     "legal",
     "divider",
     "spacer",
+    "copyright",
     "footer"
   ],
   "blocks": [
@@ -1030,6 +1032,73 @@
         "additionalProperties": false
       }
     },
+    {
+      "type": "video-gallery",
+      "description": "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).",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "maxLength": 120,
+            "default": ""
+          },
+          "layout": {
+            "enum": [
+              "grid",
+              "carousel"
+            ],
+            "default": "grid"
+          },
+          "columns": {
+            "type": "integer",
+            "enum": [
+              2,
+              3,
+              4
+            ],
+            "default": 3
+          },
+          "items": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "provider": {
+                  "enum": [
+                    "youtube",
+                    "vimeo",
+                    "file"
+                  ],
+                  "default": "youtube"
+                },
+                "src": {
+                  "type": "string",
+                  "maxLength": 500,
+                  "default": ""
+                },
+                "title": {
+                  "type": "string",
+                  "maxLength": 160,
+                  "default": ""
+                },
+                "poster": {
+                  "type": "string",
+                  "maxLength": 500,
+                  "default": ""
+                }
+              },
+              "required": [
+                "src"
+              ],
+              "additionalProperties": false
+            },
+            "maxItems": 24
+          }
+        },
+        "additionalProperties": false
+      }
+    },
     {
       "type": "map",
       "description": "An embedded location map for a place or address query, with configurable zoom and height and a link to the full map.",
@@ -1737,7 +1806,7 @@
     },
     {
       "type": "social-links",
-      "description": "A centered row of links to social or external profiles, each an optional icon plus a label.",
+      "description": "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.",
       "schema": {
         "type": "object",
         "properties": {
@@ -1746,21 +1815,65 @@
             "maxLength": 120,
             "default": ""
           },
+          "layout": {
+            "enum": [
+              "row",
+              "grid"
+            ],
+            "default": "row"
+          },
+          "variant": {
+            "enum": [
+              "labeled",
+              "icon"
+            ],
+            "default": "labeled"
+          },
+          "align": {
+            "enum": [
+              "start",
+              "center",
+              "end"
+            ],
+            "default": "center"
+          },
           "links": {
             "type": "array",
             "items": {
               "type": "object",
               "properties": {
-                "label": {
-                  "type": "string",
-                  "maxLength": 40,
-                  "default": ""
+                "platform": {
+                  "enum": [
+                    "x",
+                    "twitter",
+                    "instagram",
+                    "facebook",
+                    "linkedin",
+                    "youtube",
+                    "github",
+                    "tiktok",
+                    "whatsapp",
+                    "telegram",
+                    "discord",
+                    "mastodon",
+                    "rss",
+                    "email",
+                    "website",
+                    "phone",
+                    "custom"
+                  ],
+                  "default": "custom"
                 },
                 "href": {
                   "type": "string",
                   "maxLength": 500,
                   "default": ""
                 },
+                "label": {
+                  "type": "string",
+                  "maxLength": 60,
+                  "default": ""
+                },
                 "icon": {
                   "type": "string",
                   "maxLength": 8,
@@ -1768,12 +1881,11 @@
                 }
               },
               "required": [
-                "label",
                 "href"
               ],
               "additionalProperties": false
             },
-            "maxItems": 12
+            "maxItems": 20
           }
         },
         "additionalProperties": false
@@ -1956,6 +2068,43 @@
         "additionalProperties": false
       }
     },
+    {
+      "type": "copyright",
+      "description": "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.",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "holder": {
+            "type": "string",
+            "maxLength": 120,
+            "default": ""
+          },
+          "year": {
+            "type": "string",
+            "maxLength": 24,
+            "default": ""
+          },
+          "text": {
+            "type": "string",
+            "maxLength": 160,
+            "default": "All rights reserved."
+          },
+          "showSymbol": {
+            "type": "boolean",
+            "default": true
+          },
+          "align": {
+            "enum": [
+              "start",
+              "center",
+              "end"
+            ],
+            "default": "center"
+          }
+        },
+        "additionalProperties": false
+      }
+    },
     {
       "type": "footer",
       "description": "Page footer: brand, tagline, a row of links, and a copyright line. Place last.",

package/lib/blocks/brandIcons.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Brand icon path data (24×24 viewBox, fill=currentColor). Sourced from
+ * simple-icons (CC0 / public domain). Generated from source — do not edit by hand.
+ */
+export declare const BRAND_ICON_PATHS: Record<string, string>;

package/lib/blocks/brandIcons.js

@@ -0,0 +1,18 @@
+/**
+ * Brand icon path data (24×24 viewBox, fill=currentColor). Sourced from
+ * simple-icons (CC0 / public domain). Generated from source — do not edit by hand.
+ */
+export const BRAND_ICON_PATHS = {
+    discord: "M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z",
+    facebook: "M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z",
+    github: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12",
+    instagram: "M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077",
+    linkedin: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
+    mastodon: "M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z",
+    rss: "M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z",
+    telegram: "M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
+    tiktok: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z",
+    whatsapp: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
+    x: "M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z",
+    youtube: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z",
+};

package/lib/blocks/copyright.d.ts

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

package/lib/blocks/copyright.js

@@ -0,0 +1,48 @@
+/**
+ * `copyright` — a small "© year holder · rights" bar for the very bottom of a
+ * page. A standalone alternative to the `footer` block's copyright line: pair it
+ * with `legal` and `social-links` for a lightweight footer, or use it under the
+ * full `footer`. The year auto-fills to the current year when left blank (or give
+ * an explicit year / range like "2020–2026"). Static brick.
+ */
+import { escapeHtml } from '../schema.js';
+const schema = {
+    holder: { kind: 'string', default: '', max: 120 }, // e.g. "Acme Inc."
+    year: { kind: 'string', default: '', max: 24 }, // blank → current year
+    text: { kind: 'string', default: 'All rights reserved.', max: 160 }, // trailing note
+    showSymbol: { kind: 'boolean', default: true }, // the © symbol
+    align: { kind: 'enum', values: ['start', 'center', 'end'], default: 'center' },
+};
+const css = `
+.blk-copyright{padding:var(--space) var(--space);background:var(--bg);color:var(--muted);border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
+.blk-copyright .wrap{max-width:1080px;margin:0 auto;font-size:var(--fs-base)}
+.blk-copyright.align-center .wrap{text-align:center}
+.blk-copyright.align-end .wrap{text-align:right}
+.blk-copyright p{margin:0}
+`.trim();
+function render(config) {
+    const holder = config.holder;
+    const yearIn = String(config.year ?? '').trim();
+    const year = yearIn || String(new Date().getFullYear()); // blank → current year
+    const text = config.text;
+    const symbol = config.showSymbol !== false;
+    const align = ['start', 'center', 'end'].includes(config.align) ? config.align : 'center';
+    let line = `${symbol ? '© ' : ''}${escapeHtml(year)}`;
+    if (holder)
+        line += ` ${escapeHtml(holder)}`;
+    // Add the note, but don't double punctuation when the holder ends in "." (Inc./Co./Ltd.).
+    if (text)
+        line += `${/[.!?]$/.test(line) ? ' ' : '. '}${escapeHtml(text)}`;
+    return `<footer class="blk-copyright align-${align}" aria-label="Copyright">
+  <div class="wrap">
+    <p>${line}</p>
+  </div>
+</footer>`;
+}
+export const copyright = {
+    type: 'copyright',
+    description: '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.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/gallery.js

@@ -44,8 +44,9 @@ function figure(it) {
 function render(config) {
     const columns = Number.isInteger(config.columns) ? config.columns : 3;
     const gap = GAP_REM[config.gap] ?? GAP_REM.md;
+    const lightbox = config.lightbox === true; // flag for the `lightbox` island
     const items = (config.items ?? []).map(figure).filter(Boolean);
-    return `<section class="blk-gallery" aria-label="Gallery">
+    return `<section class="blk-gallery" aria-label="Gallery"${lightbox ? ' data-wl-lightbox="true"' : ''}>
   <div class="wrap">
     <div class="grid" style="--cols:${columns};--gap:${gap}">
       ${items.join('\n      ')}

package/lib/blocks/socialLinks.js

@@ -1,44 +1,94 @@
-/** `social-links` — a centered icon row linking out to profiles. Static brick. */
+/**
+ * `social-links` — one row/grid of links to social or contact profiles.
+ *
+ * A single generic block (not one per network): you add only the accounts you
+ * have, so unset ones are simply absent. Each link's `platform` selects a
+ * built-in monochrome brand icon (from simple-icons, themed via `currentColor`)
+ * and a default accessible label; `custom` (or an unknown platform) falls back to
+ * your own emoji/glyph `icon`. Layout adapts via `layout` (row/grid) and
+ * `variant` (labeled/icon-only). Static brick.
+ */
 import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+import { BRAND_ICON_PATHS } from './brandIcons.js';
+const PLATFORMS = [
+    'x', 'twitter', 'instagram', 'facebook', 'linkedin', 'youtube', 'github', 'tiktok',
+    'whatsapp', 'telegram', 'discord', 'mastodon', 'rss', 'email', 'website', 'phone', 'custom',
+];
+/** Default accessible label per platform (author `label` overrides). */
+const LABELS = {
+    x: 'X', twitter: 'X', instagram: 'Instagram', facebook: 'Facebook', linkedin: 'LinkedIn',
+    youtube: 'YouTube', github: 'GitHub', tiktok: 'TikTok', whatsapp: 'WhatsApp',
+    telegram: 'Telegram', discord: 'Discord', mastodon: 'Mastodon', rss: 'RSS',
+    email: 'Email', website: 'Website', phone: 'Phone',
+};
+/** Simple monochrome (non-brand) contact icons — filled, 24×24. */
+const GENERIC_ICONS = {
+    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',
+    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',
+    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',
+};
 const schema = {
     title: { kind: 'string', default: '', max: 120 },
+    layout: { kind: 'enum', values: ['row', 'grid'], default: 'row' },
+    variant: { kind: 'enum', values: ['labeled', 'icon'], default: 'labeled' },
+    align: { kind: 'enum', values: ['start', 'center', 'end'], default: 'center' },
     links: {
-        kind: 'array', max: 12,
+        kind: 'array', max: 20,
         of: {
             kind: 'object',
             fields: {
-                label: { kind: 'string', required: true, default: '', max: 40 },
+                platform: { kind: 'enum', values: PLATFORMS, default: 'custom' },
                 href: { kind: 'string', required: true, default: '', max: 500 },
-                icon: { kind: 'string', default: '', max: 8 }, // emoji or a single glyph
+                label: { kind: 'string', default: '', max: 60 }, // overrides the platform default
+                icon: { kind: 'string', default: '', max: 8 }, // emoji/glyph for `custom`
             },
         },
     },
 };
 const css = `
-.blk-social-links{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text);text-align:center}
-.blk-social-links .wrap{max-width:800px;margin:0 auto}
-.blk-social-links h2{font-size:var(--fs-lg);font-weight:700;margin:0 0 var(--space)}
-.blk-social-links .row{display:flex;flex-wrap:wrap;justify-content:center;gap:.8em}
-.blk-social-links a{display:inline-flex;align-items:center;gap:.4em;padding:.5em .9em;border-radius:var(--radius);text-decoration:none;color:var(--text);background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 15%,transparent);font-size:var(--fs-base);font-weight:600;transition:color var(--motion),border-color var(--motion)}
-.blk-social-links a:hover,.blk-social-links a:focus-visible{color:var(--primary);border-color:var(--primary)}
-.blk-social-links .ico{font-size:1.15em;line-height:1}
+.blk-social-links{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-social-links .wrap{max-width:900px;margin:0 auto}
+.blk-social-links h2{text-align:center;font-size:var(--fs-lg);font-weight:700;margin:0 0 var(--space)}
+.blk-social-links .items{display:flex;flex-wrap:wrap;gap:.7em}
+.blk-social-links.layout-grid .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
+.blk-social-links.align-center .items{justify-content:center}
+.blk-social-links.align-end .items{justify-content:flex-end}
+.blk-social-links .s-item{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.55em .95em;border-radius:var(--radius);text-decoration:none;color:var(--text);background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);font-size:var(--fs-base);font-weight:600;transition:color var(--motion),border-color var(--motion),transform var(--motion)}
+.blk-social-links .s-item:hover,.blk-social-links .s-item:focus-visible{color:var(--primary);border-color:var(--primary);transform:translateY(-1px)}
+.blk-social-links .s-item.icon-only{padding:0;width:2.9em;height:2.9em;border-radius:999px}
+.blk-social-links .ico{flex:0 0 auto;width:1.2em;height:1.2em;display:block}
+.blk-social-links .ico.emoji{font-size:1.15em;line-height:1;width:auto;height:auto}
 `.trim();
-function link(l) {
+function iconMarkup(platform, emoji) {
+    const path = platform === 'twitter' ? BRAND_ICON_PATHS.x : (BRAND_ICON_PATHS[platform] ?? GENERIC_ICONS[platform]);
+    if (path)
+        return `<svg class="ico" viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="${path}"></path></svg>`;
+    return emoji ? `<span class="ico emoji" aria-hidden="true">${escapeHtml(emoji)}</span>` : '';
+}
+function item(l, iconOnly) {
     const href = sanitizeUrl(l.href);
-    if (!l.label || href === '#' || !l.href)
-        return '';
-    return `<a href="${escapeAttr(href)}" rel="noopener">
-        ${l.icon ? `<span class="ico" aria-hidden="true">${escapeHtml(l.icon)}</span>` : ''}
-        <span>${escapeHtml(l.label)}</span>
+    if (href === '#' || !l.href)
+        return ''; // no destination → drop (unset stays hidden)
+    const platform = String(l.platform || 'custom');
+    const label = l.label || LABELS[platform] || 'Link';
+    const icon = iconMarkup(platform, l.icon);
+    // icon-only mode needs the label as the accessible name; labeled mode shows it.
+    return `<a class="s-item${iconOnly ? ' icon-only' : ''}" href="${escapeAttr(href)}" rel="noopener"${iconOnly ? ` aria-label="${escapeAttr(label)}"` : ''}>
+        ${icon}
+        ${iconOnly ? '' : `<span class="lbl">${escapeHtml(label)}</span>`}
       </a>`;
 }
 function render(config) {
     const title = config.title;
-    const links = (config.links ?? []).map(link).filter(Boolean);
-    return `<section class="blk-social-links" aria-label="${escapeAttr(title || 'Social links')}">
+    const layout = config.layout === 'grid' ? 'grid' : 'row';
+    const variant = config.variant === 'icon' ? 'icon' : 'labeled';
+    const align = ['start', 'center', 'end'].includes(config.align) ? config.align : 'center';
+    const iconOnly = variant === 'icon';
+    const links = (config.links ?? []).map((l) => item(l, iconOnly)).filter(Boolean);
+    return `<section class="blk-social-links layout-${layout} align-${align}" aria-label="${escapeAttr(title || 'Social links')}">
   <div class="wrap">
     ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
-    <div class="row">
+    <div class="items">
       ${links.join('\n      ')}
     </div>
   </div>
@@ -46,7 +96,7 @@ function render(config) {
 }
 export const socialLinks = {
     type: 'social-links',
-    description: 'A centered row of links to social or external profiles, each an optional icon plus a label.',
+    description: '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.',
     schema,
     css,
     render,

package/lib/blocks/videoGallery.d.ts

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

package/lib/blocks/videoGallery.js

@@ -0,0 +1,110 @@
+/**
+ * `video-gallery` — a grid or carousel of **click-to-play video cards**
+ * (YouTube / Vimeo / self-hosted). Each card is a lightweight *facade*: a
+ * thumbnail + play button, so no heavy player iframe loads until the visitor
+ * presses play — then the `video` island swaps in the real player inline.
+ *
+ * Progressive enhancement: with no JavaScript each card is a link that opens the
+ * video on its platform; with the island, it plays inline. YouTube thumbnails are
+ * derived from the id automatically (give a `poster` for Vimeo/file). Static-first
+ * brick — the island only adds inline playback.
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+import { youtubeId, vimeoId, youtubeThumb, youtubeEmbed, youtubeWatch, vimeoEmbed, vimeoWatch, PLAY_ICON, } from './videoUtil.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    layout: { kind: 'enum', values: ['grid', 'carousel'], default: 'grid' },
+    columns: { kind: 'int', oneOf: [2, 3, 4], default: 3 },
+    items: {
+        kind: 'array', max: 24,
+        of: {
+            kind: 'object',
+            fields: {
+                provider: { kind: 'enum', values: ['youtube', 'vimeo', 'file'], default: 'youtube' },
+                src: { kind: 'string', required: true, default: '', max: 500 }, // id or url
+                title: { kind: 'string', default: '', max: 160 },
+                poster: { kind: 'string', default: '', max: 500 }, // thumbnail (auto for youtube)
+            },
+        },
+    },
+};
+const css = `
+.blk-video-gallery{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-video-gallery .wrap{max-width:1120px;margin:0 auto}
+.blk-video-gallery h2{font-size:var(--fs-xl);margin:0 0 var(--space-lg);font-weight:800;text-align:center}
+.blk-video-gallery .grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:calc(var(--space)*1.2)}
+.blk-video-gallery.layout-carousel .grid{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5em}
+.blk-video-gallery.layout-carousel .v-card{flex:0 0 min(88%,440px);scroll-snap-align:center}
+.blk-video-gallery .v-card{display:block;text-decoration:none;color:inherit;background:var(--surface);border-radius:var(--radius);overflow:hidden;transition:transform var(--motion)}
+.blk-video-gallery .v-card:hover{transform:translateY(-3px)}
+.blk-video-gallery .v-media{position:relative;display:block;aspect-ratio:16/9;background:#000}
+.blk-video-gallery .v-media img{width:100%;height:100%;object-fit:cover;display:block}
+.blk-video-gallery .v-play{position:absolute;inset:0;margin:auto;width:62px;height:62px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;transition:background var(--motion),transform var(--motion)}
+.blk-video-gallery .v-card:hover .v-play{background:var(--primary);color:var(--on-primary);transform:scale(1.06)}
+.blk-video-gallery .v-play svg{margin-left:3px}
+.blk-video-gallery .v-title{display:block;padding:.7em .9em;font-weight:600;font-size:var(--fs-base)}
+.blk-video-gallery .v-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
+@media(max-width:720px){.blk-video-gallery .grid{grid-template-columns:1fr 1fr}}
+@media(max-width:440px){.blk-video-gallery .grid{grid-template-columns:1fr}}
+`.trim();
+function card(it) {
+    const provider = ['youtube', 'vimeo', 'file'].includes(it.provider) ? it.provider : 'youtube';
+    const title = it.title;
+    const posterUrl = sanitizeUrl(it.poster);
+    const poster = (posterUrl !== '#' && it.poster) ? posterUrl : '';
+    let thumb = '', embed = '', watch = '';
+    if (provider === 'youtube') {
+        const id = youtubeId(it.src);
+        if (!id)
+            return '';
+        thumb = poster || youtubeThumb(id);
+        embed = youtubeEmbed(id, true);
+        watch = youtubeWatch(id);
+    }
+    else if (provider === 'vimeo') {
+        const id = vimeoId(it.src);
+        if (!id)
+            return '';
+        thumb = poster;
+        embed = vimeoEmbed(id, true);
+        watch = vimeoWatch(id);
+    }
+    else {
+        const url = sanitizeUrl(it.src);
+        if (url === '#' || !it.src)
+            return '';
+        thumb = poster;
+        embed = url;
+        watch = url;
+    }
+    const media = `<span class="v-media">
+        ${thumb ? `<img src="${escapeAttr(thumb)}" alt="${escapeAttr(title)}" loading="lazy">` : ''}
+        <span class="v-play" aria-hidden="true">${PLAY_ICON}</span>
+      </span>`;
+    return `<a class="v-card" href="${escapeAttr(watch)}" target="_blank" rel="noopener" data-wl-video data-wl-provider="${provider}" data-wl-embed="${escapeAttr(embed)}" data-wl-title="${escapeAttr(title || 'Video')}" aria-label="Play video: ${escapeAttr(title || 'video')}">
+      ${media}
+      ${title ? `<span class="v-title">${escapeHtml(title)}</span>` : ''}
+    </a>`;
+}
+function render(config) {
+    const title = config.title;
+    const layout = config.layout === 'carousel' ? 'carousel' : 'grid';
+    const columns = Number.isInteger(config.columns) ? config.columns : 3;
+    const items = (config.items ?? []).map(card).filter(Boolean);
+    return `<section class="blk-video-gallery layout-${layout}" aria-label="${escapeAttr(title || 'Videos')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    <div class="grid" style="--cols:${columns}">
+      ${items.join('\n      ')}
+    </div>
+  </div>
+</section>`;
+}
+export const videoGallery = {
+    type: 'video-gallery',
+    description: '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).',
+    schema,
+    css,
+    render,
+    island: 'video',
+};

package/lib/blocks/videoUtil.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Shared helpers for the video blocks — extract provider ids from an id-or-URL
+ * and build SAFE provider URLs. Ids are reduced to their allowed charset first,
+ * so the returned URLs are built from trusted fragments (no injection).
+ */
+export declare function youtubeId(src: unknown): string;
+export declare function vimeoId(src: unknown): string;
+export declare function youtubeThumb(id: string): string;
+export declare function youtubeEmbed(id: string, autoplay?: boolean): string;
+export declare function youtubeWatch(id: string): string;
+export declare function vimeoEmbed(id: string, autoplay?: boolean): string;
+export declare function vimeoWatch(id: string): string;
+/** A filled play-triangle glyph (24×24, fill=currentColor). */
+export declare const PLAY_ICON = "<svg viewBox=\"0 0 24 24\" width=\"30\" height=\"30\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"></path></svg>";

package/lib/blocks/videoUtil.js

@@ -0,0 +1,30 @@
+/**
+ * Shared helpers for the video blocks — extract provider ids from an id-or-URL
+ * and build SAFE provider URLs. Ids are reduced to their allowed charset first,
+ * so the returned URLs are built from trusted fragments (no injection).
+ */
+export function youtubeId(src) {
+    const s = String(src ?? '');
+    const m = /(?:v=|youtu\.be\/|embed\/|shorts\/)([A-Za-z0-9_-]{6,})/.exec(s);
+    return (m ? m[1] : s).replace(/[^A-Za-z0-9_-]/g, '');
+}
+export function vimeoId(src) {
+    return String(src ?? '').replace(/[^0-9]/g, '');
+}
+export function youtubeThumb(id) {
+    return `https://i.ytimg.com/vi/${id}/hqdefault.jpg`;
+}
+export function youtubeEmbed(id, autoplay = false) {
+    return `https://www.youtube-nocookie.com/embed/${id}${autoplay ? '?autoplay=1' : ''}`;
+}
+export function youtubeWatch(id) {
+    return `https://www.youtube.com/watch?v=${id}`;
+}
+export function vimeoEmbed(id, autoplay = false) {
+    return `https://player.vimeo.com/video/${id}${autoplay ? '?autoplay=1' : ''}`;
+}
+export function vimeoWatch(id) {
+    return `https://vimeo.com/${id}`;
+}
+/** A filled play-triangle glyph (24×24, fill=currentColor). */
+export const PLAY_ICON = '<svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>';

package/lib/islands/carousel.d.ts

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

package/lib/islands/carousel.js

@@ -0,0 +1,122 @@
+/**
+ * `carousel` island — arrows, dot indicators, keyboard nav, and optional
+ * autoplay for the `carousel` block.
+ *
+ * Shipped from `@bytesbrains/weblocks/islands/carousel.js`; served at the island
+ * URL the renderer emits (default `/_island/carousel.js`). Zero dependencies,
+ * self-executing, idempotent. Enhances the native scroll-snap track (the block
+ * already works without JS); a no-op without a DOM or with fewer than 2 slides.
+ * Autoplay honours `prefers-reduced-motion` and pauses on hover/focus.
+ */
+if (typeof document !== 'undefined') {
+    const mkBtn = (cls, glyph, label) => {
+        const b = document.createElement('button');
+        b.type = 'button';
+        b.className = 'wl-car-btn ' + cls;
+        b.textContent = glyph;
+        b.setAttribute('aria-label', label);
+        return b;
+    };
+    const setup = (root) => {
+        if (root.dataset.wlReady)
+            return;
+        const track = root.querySelector('.track');
+        if (!track)
+            return;
+        const slides = Array.from(track.children);
+        if (slides.length < 2)
+            return;
+        root.dataset.wlReady = '1';
+        const prev = mkBtn('wl-car-prev', '‹', 'Previous slide');
+        const next = mkBtn('wl-car-next', '›', 'Next slide');
+        root.append(prev, next);
+        const dotsWrap = document.createElement('div');
+        dotsWrap.className = 'wl-car-dots';
+        const dots = slides.map((_, i) => {
+            const d = document.createElement('button');
+            d.type = 'button';
+            d.setAttribute('aria-label', 'Go to slide ' + (i + 1));
+            d.addEventListener('click', () => go(i));
+            dotsWrap.appendChild(d);
+            return d;
+        });
+        root.appendChild(dotsWrap);
+        let current = 0;
+        const go = (i) => {
+            const target = slides[Math.max(0, Math.min(slides.length - 1, i))];
+            const r = target.getBoundingClientRect();
+            const t = track.getBoundingClientRect();
+            track.scrollBy({ left: r.left - t.left - (t.width - r.width) / 2, behavior: 'smooth' });
+        };
+        const update = () => {
+            dots.forEach((d, i) => d.setAttribute('aria-current', i === current ? 'true' : 'false'));
+            prev.toggleAttribute('disabled', current === 0);
+            next.toggleAttribute('disabled', current === slides.length - 1);
+        };
+        prev.addEventListener('click', () => go(current - 1));
+        next.addEventListener('click', () => go(current + 1));
+        root.setAttribute('tabindex', '0');
+        root.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                go(current - 1);
+            }
+            else if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                go(current + 1);
+            }
+        });
+        const io = new IntersectionObserver((entries) => {
+            for (const en of entries) {
+                if (en.isIntersecting) {
+                    const i = slides.indexOf(en.target);
+                    if (i >= 0) {
+                        current = i;
+                        update();
+                    }
+                }
+            }
+        }, { root: track, threshold: 0.6 });
+        slides.forEach((s) => io.observe(s));
+        update();
+        const reduce = typeof window !== 'undefined' && window.matchMedia
+            && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (root.dataset.wlAutoplay === 'true' && !reduce) {
+            let timer = 0;
+            const tick = () => go((current + 1) % slides.length);
+            const start = () => { timer = window.setInterval(tick, 5000); };
+            const stop = () => { window.clearInterval(timer); };
+            start();
+            root.addEventListener('mouseenter', stop);
+            root.addEventListener('mouseleave', start);
+            root.addEventListener('focusin', stop);
+            root.addEventListener('focusout', start);
+        }
+    };
+    const ready = (fn) => document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', fn) : fn();
+    ready(() => {
+        const roots = Array.from(document.querySelectorAll('.blk-carousel'));
+        if (!roots.length)
+            return;
+        if (!document.getElementById('wl-carousel-css')) {
+            const s = document.createElement('style');
+            s.id = 'wl-carousel-css';
+            s.textContent = [
+                '.blk-carousel{position:relative}',
+                '.blk-carousel .track{scroll-behavior:smooth}',
+                '.wl-car-btn{position:absolute;top:calc(50% - 22px);z-index:2;width:44px;height:44px;border-radius:999px;border:0;cursor:pointer;background:var(--surface,#fff);color:var(--text,#111);box-shadow:0 2px 12px rgba(0,0,0,.22);font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.94;transition:opacity .15s}',
+                '.wl-car-btn:hover{opacity:1}',
+                '.wl-car-btn[disabled]{opacity:.35;cursor:default}',
+                '.wl-car-prev{left:8px}',
+                '.wl-car-next{right:8px}',
+                '.wl-car-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}',
+                '.wl-car-dots button{width:9px;height:9px;padding:0;border:0;border-radius:999px;cursor:pointer;background:color-mix(in srgb,var(--text,#111) 30%,transparent);transition:width .2s,background .2s}',
+                '.wl-car-dots button[aria-current="true"]{background:var(--primary,#333);width:22px}',
+                '@media(prefers-reduced-motion:reduce){.blk-carousel .track{scroll-behavior:auto}}',
+            ].join('');
+            document.head.appendChild(s);
+        }
+        roots.forEach(setup);
+    });
+}
+export {};

package/lib/islands/lightbox.d.ts

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

package/lib/islands/lightbox.js

@@ -0,0 +1,139 @@
+/**
+ * `lightbox` island — click-to-zoom viewer for `gallery` images.
+ *
+ * Shipped from `@bytesbrains/weblocks/islands/lightbox.js`; the host serves it at
+ * the island URL the renderer emits (default `/_island/lightbox.js`). Zero
+ * dependencies, self-executing on load, idempotent. Enhances only galleries the
+ * renderer flagged with `data-wl-lightbox`; a no-op without a DOM (safe to
+ * import in Node/SSR).
+ *
+ * Features: open on click / Enter, prev–next within the gallery, arrow-key nav,
+ * Escape + backdrop to close, touch swipe, caption, background scroll lock, and
+ * focus returned to the opener.
+ */
+if (typeof document !== 'undefined') {
+    const ready = (fn) => document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', fn) : fn();
+    ready(() => {
+        const galleries = Array.from(document.querySelectorAll('.blk-gallery[data-wl-lightbox]'));
+        if (!galleries.length)
+            return;
+        if (!document.getElementById('wl-lightbox-css')) {
+            const s = document.createElement('style');
+            s.id = 'wl-lightbox-css';
+            s.textContent = [
+                '.wl-lb{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.9)}',
+                '.wl-lb[data-open]{display:flex}',
+                '.wl-lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.7rem}',
+                '.wl-lb img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:6px;user-select:none}',
+                '.wl-lb figcaption{color:#eee;font:500 14px system-ui,sans-serif;text-align:center;max-width:60ch;padding:0 1rem}',
+                '.wl-lb button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;cursor:pointer;border-radius:999px;width:48px;height:48px;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s}',
+                '.wl-lb button:hover,.wl-lb button:focus-visible{background:rgba(255,255,255,.28);outline:2px solid #fff}',
+                '.wl-lb .wl-close{top:14px;right:14px}',
+                '.wl-lb .wl-prev{left:14px;top:50%;transform:translateY(-50%)}',
+                '.wl-lb .wl-next{right:14px;top:50%;transform:translateY(-50%)}',
+                'html.wl-lb-lock{overflow:hidden}',
+                '@media(max-width:520px){.wl-lb button{width:40px;height:40px;font-size:22px}}',
+            ].join('');
+            document.head.appendChild(s);
+        }
+        // Built with createElement (no innerHTML) — the overlay chrome is static, but
+        // constructing nodes keeps the "no HTML strings into the DOM" rule absolute.
+        const mkBtn = (cls, glyph, label) => {
+            const b = document.createElement('button');
+            b.type = 'button';
+            b.className = cls;
+            b.textContent = glyph;
+            b.setAttribute('aria-label', label);
+            return b;
+        };
+        const ov = document.createElement('div');
+        ov.className = 'wl-lb';
+        ov.setAttribute('role', 'dialog');
+        ov.setAttribute('aria-modal', 'true');
+        ov.setAttribute('aria-label', 'Image viewer');
+        const btnClose = mkBtn('wl-close', '×', 'Close');
+        const btnPrev = mkBtn('wl-prev', '‹', 'Previous image');
+        const btnNext = mkBtn('wl-next', '›', 'Next image');
+        const fig = document.createElement('figure');
+        const bigImg = document.createElement('img');
+        bigImg.alt = '';
+        const cap = document.createElement('figcaption');
+        fig.append(bigImg, cap);
+        ov.append(btnClose, btnPrev, btnNext, fig);
+        document.body.appendChild(ov);
+        let items = [];
+        let idx = 0;
+        let opener = null;
+        const show = () => {
+            const img = items[idx];
+            if (!img)
+                return;
+            bigImg.src = img.currentSrc || img.src;
+            bigImg.alt = img.alt || '';
+            const c = img.closest('figure')?.querySelector('figcaption')?.textContent || '';
+            cap.textContent = c;
+            cap.style.display = c ? '' : 'none';
+            const multi = items.length > 1;
+            btnPrev.style.display = multi ? '' : 'none';
+            btnNext.style.display = multi ? '' : 'none';
+        };
+        const open = (list, i, from) => {
+            items = list;
+            idx = i;
+            opener = from;
+            show();
+            ov.setAttribute('data-open', '');
+            document.documentElement.classList.add('wl-lb-lock');
+            btnClose.focus();
+        };
+        const close = () => {
+            ov.removeAttribute('data-open');
+            document.documentElement.classList.remove('wl-lb-lock');
+            bigImg.removeAttribute('src');
+            opener?.focus();
+        };
+        const nav = (d) => { if (items.length) {
+            idx = (idx + d + items.length) % items.length;
+            show();
+        } };
+        btnClose.addEventListener('click', close);
+        btnPrev.addEventListener('click', () => nav(-1));
+        btnNext.addEventListener('click', () => nav(1));
+        ov.addEventListener('click', (e) => { if (e.target === ov)
+            close(); });
+        document.addEventListener('keydown', (e) => {
+            if (!ov.hasAttribute('data-open'))
+                return;
+            if (e.key === 'Escape')
+                close();
+            else if (e.key === 'ArrowLeft')
+                nav(-1);
+            else if (e.key === 'ArrowRight')
+                nav(1);
+        });
+        let sx = 0;
+        ov.addEventListener('touchstart', (e) => { sx = e.changedTouches[0].clientX; }, { passive: true });
+        ov.addEventListener('touchend', (e) => {
+            const dx = e.changedTouches[0].clientX - sx;
+            if (Math.abs(dx) > 40)
+                nav(dx < 0 ? 1 : -1);
+        });
+        galleries.forEach((g) => {
+            const imgs = Array.from(g.querySelectorAll('figure img'));
+            imgs.forEach((img, i) => {
+                img.style.cursor = 'zoom-in';
+                img.setAttribute('role', 'button');
+                img.setAttribute('tabindex', '0');
+                const go = () => open(imgs, i, img);
+                img.addEventListener('click', go);
+                img.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        go();
+                    }
+                });
+            });
+        });
+    });
+}
+export {};

package/lib/islands/video.d.ts

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

package/lib/islands/video.js

@@ -0,0 +1,48 @@
+/**
+ * `video` island — click-to-play for `video-gallery` cards.
+ *
+ * Shipped from `@bytesbrains/weblocks/islands/video.js`; served at the island URL
+ * the renderer emits (default `/_island/video.js`). Zero dependencies,
+ * self-executing, idempotent, guarded by `typeof document`. Each card is an
+ * `<a>` facade (thumbnail + play button) that links to the video on its platform;
+ * this island intercepts the click and swaps the thumbnail for the real,
+ * autoplaying player inline. Built with `createElement`/`replaceChildren` — no
+ * HTML strings into the DOM.
+ */
+if (typeof document !== 'undefined') {
+    const play = (card) => {
+        if (card.dataset.wlPlaying)
+            return;
+        const embed = card.dataset.wlEmbed;
+        const media = card.querySelector('.v-media');
+        if (!embed || !media)
+            return;
+        card.dataset.wlPlaying = '1';
+        let el;
+        if (card.dataset.wlProvider === 'file') {
+            const v = document.createElement('video');
+            v.src = embed;
+            v.controls = true;
+            v.autoplay = true;
+            v.setAttribute('playsinline', '');
+            el = v;
+        }
+        else {
+            const f = document.createElement('iframe');
+            f.src = embed;
+            f.title = card.dataset.wlTitle || 'Video';
+            f.setAttribute('allow', 'autoplay; encrypted-media; picture-in-picture; fullscreen');
+            f.setAttribute('allowfullscreen', '');
+            el = f;
+        }
+        el.className = 'v-frame';
+        media.replaceChildren(el);
+    };
+    const ready = (fn) => document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', fn) : fn();
+    ready(() => {
+        document.querySelectorAll('.blk-video-gallery [data-wl-video]').forEach((card) => {
+            card.addEventListener('click', (e) => { e.preventDefault(); play(card); });
+        });
+    });
+}
+export {};

package/lib/registry.js

@@ -15,6 +15,7 @@ import { team } from './blocks/team.js';
 import { gallery } from './blocks/gallery.js';
 import { carousel } from './blocks/carousel.js';
 import { video } from './blocks/video.js';
+import { videoGallery } from './blocks/videoGallery.js';
 import { map } from './blocks/map.js';
 import { timeline } from './blocks/timeline.js';
 import { tabs } from './blocks/tabs.js';
@@ -35,6 +36,7 @@ import { directions } from './blocks/directions.js';
 import { legal } from './blocks/legal.js';
 import { divider } from './blocks/divider.js';
 import { spacer } from './blocks/spacer.js';
+import { copyright } from './blocks/copyright.js';
 import { appShell } from './blocks/appShell.js';
 import { sidebar } from './blocks/sidebar.js';
 import { footer } from './blocks/footer.js';
@@ -49,7 +51,7 @@ const SPECS = [
     features, about, richText, split, steps, stats,
     services, pricing, logos, team,
     // media
-    gallery, carousel, video, map,
+    gallery, carousel, video, videoGallery, map,
     // structured content
     timeline, tabs, accordion, testimonials, faq,
     // collections
@@ -60,7 +62,7 @@ const SPECS = [
     cta, socialLinks, contactDetails, directions, legal,
     // rhythm
     divider, spacer,
-    footer,
+    copyright, footer,
 ];
 export const REGISTRY = new Map(SPECS.map((s) => [s.type, s]));
 export function getSpec(type) {

package/lib/render.d.ts

@@ -3,6 +3,12 @@ import type { SiteManifest } from './types.js';
 export interface RenderOptions {
     /** Host runtime for powered bricks (§6). Defaults to the inert no-op adapter. */
     runtime?: RuntimeAdapter;
+    /**
+     * URL prefix where the host serves island scripts (from the package's
+     * `./islands/*.js` subpath). Defaults to `/_island`, so a `lightbox` island is
+     * emitted as `<script src="/_island/lightbox.js">`.
+     */
+    islandBase?: string;
 }
 /** The full document. */
 export declare function renderSite(manifest: SiteManifest, options?: RenderOptions): string;

package/lib/render.js

@@ -57,8 +57,9 @@ export function renderSite(manifest, options = {}) {
         if (needsIsland(spec, value))
             islands.add(spec.island);
     }
+    const islandBase = (options.islandBase ?? '/_island').replace(/\/+$/, '');
     const islandTags = [...islands]
-        .map((name) => `<script type="module" src="/_island/${escapeAttr(name)}.js" data-island="${escapeAttr(name)}"></script>`)
+        .map((name) => `<script type="module" src="${escapeAttr(islandBase)}/${escapeAttr(name)}.js" data-island="${escapeAttr(name)}"></script>`)
         .join('\n');
     return `<!doctype html>
 <html lang="${escapeAttr(meta.lang || 'en')}">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytesbrains/weblocks",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "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",
@@ -30,6 +30,7 @@
       "types": "./lib/index.d.ts",
       "import": "./lib/index.js"
     },
+    "./islands/*.js": "./lib/islands/*.js",
     "./catalog.json": "./catalog.json"
   },
   "files": [
@@ -56,9 +57,9 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.json && tsc -p tsconfig.islands.json",
     "emit:catalog": "node scripts/emit-catalog.mjs",
-    "test": "tsc -p tsconfig.json && node --test lib/*.test.js",
+    "test": "npm run build && node --test lib/*.test.js test/*.mjs",
     "example": "tsc -p tsconfig.json && node lib/example.js",
     "ai": "tsc -p tsconfig.json && node scripts/ai-run.mjs",
     "prepare": "npm run build",
@@ -66,6 +67,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
+    "jsdom": "^29.1.1",
     "typescript": "^5.6.0"
   }
 }