@bytesbrains/weblocks 0.3.0 → 0.5.0

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/markdown.d.ts

@@ -0,0 +1,2 @@
+/** Render a Markdown-subset string to safe HTML. */
+export declare function renderMarkdown(src: unknown): string;

package/lib/markdown.js

@@ -0,0 +1,90 @@
+/**
+ * A tiny, SAFE Markdown-subset renderer — escape-first, whitelist-only.
+ *
+ * This is NOT a raw-HTML passthrough (that would break the engine's no-injection
+ * invariant, see VISION.md §3). Every character of the source is HTML-escaped
+ * BEFORE any formatting is applied, so a literal `<script>` renders as text,
+ * never markup. Only a fixed set of safe elements is ever produced, and link
+ * hrefs are scheme-sanitized. Total: it never throws.
+ *
+ * Supported:
+ *   #, ##, ###…        headings (→ h2…h6)
+ *   -  or  *           unordered list        1.  ordered list
+ *   >                  blockquote            --- / *** / ___  horizontal rule
+ *   blank line         paragraph break
+ *   **bold**  *italic*  _italic_  `code`  [text](url)
+ */
+import { escapeHtml, sanitizeUrl } from './schema.js';
+/** Inline formatting. Operates on ALREADY-ESCAPED text; only adds safe tags. */
+function inline(escaped) {
+    let s = escaped;
+    // `code` first, so its contents aren't touched by the emphasis rules.
+    s = s.replace(/`([^`]+)`/g, (_m, c) => `<code>${c}</code>`);
+    // [text](url) — url is taken from escaped text (already attribute-safe) and
+    // scheme-sanitized; not re-escaped (that would double-encode `&`).
+    s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_m, text, url) => `<a href="${sanitizeUrl(url)}" rel="noopener">${text}</a>`);
+    s = s.replace(/\*\*([^*]+)\*\*/g, (_m, t) => `<strong>${t}</strong>`);
+    s = s.replace(/(^|[^*])\*([^*\s][^*]*?)\*/g, (_m, pre, t) => `${pre}<em>${t}</em>`);
+    s = s.replace(/(^|[^_\w])_([^_]+)_/g, (_m, pre, t) => `${pre}<em>${t}</em>`);
+    return s;
+}
+const esc = (raw) => inline(escapeHtml(raw));
+/** Render a Markdown-subset string to safe HTML. */
+export function renderMarkdown(src) {
+    const lines = String(src ?? '').replace(/\r\n?/g, '\n').split('\n');
+    const out = [];
+    let para = [];
+    const flush = () => { if (para.length) {
+        out.push(`<p>${esc(para.join(' '))}</p>`);
+        para = [];
+    } };
+    for (let i = 0; i < lines.length;) {
+        const t = lines[i].trim();
+        if (!t) {
+            flush();
+            i++;
+            continue;
+        }
+        if (/^(-{3,}|\*{3,}|_{3,})$/.test(t)) {
+            flush();
+            out.push('<hr>');
+            i++;
+            continue;
+        }
+        const h = /^(#{1,6})\s+(.*)$/.exec(t);
+        if (h) {
+            flush();
+            out.push(`<h${Math.min(h[1].length + 1, 6)}>${esc(h[2].trim())}</h${Math.min(h[1].length + 1, 6)}>`);
+            i++;
+            continue;
+        }
+        if (/^>\s?/.test(t)) {
+            flush();
+            const q = [];
+            for (; i < lines.length && /^>\s?/.test(lines[i].trim()); i++)
+                q.push(lines[i].trim().replace(/^>\s?/, ''));
+            out.push(`<blockquote>${esc(q.join(' '))}</blockquote>`);
+            continue;
+        }
+        if (/^[-*]\s+/.test(t)) {
+            flush();
+            const items = [];
+            for (; i < lines.length && /^[-*]\s+/.test(lines[i].trim()); i++)
+                items.push(lines[i].trim().replace(/^[-*]\s+/, ''));
+            out.push(`<ul>${items.map((it) => `<li>${esc(it)}</li>`).join('')}</ul>`);
+            continue;
+        }
+        if (/^\d+\.\s+/.test(t)) {
+            flush();
+            const items = [];
+            for (; i < lines.length && /^\d+\.\s+/.test(lines[i].trim()); i++)
+                items.push(lines[i].trim().replace(/^\d+\.\s+/, ''));
+            out.push(`<ol>${items.map((it) => `<li>${esc(it)}</li>`).join('')}</ol>`);
+            continue;
+        }
+        para.push(t);
+        i++;
+    }
+    flush();
+    return out.join('\n');
+}

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';
@@ -32,8 +33,10 @@ import { cta } from './blocks/cta.js';
 import { socialLinks } from './blocks/socialLinks.js';
 import { contactDetails } from './blocks/contactDetails.js';
 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';
@@ -48,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
@@ -56,10 +59,10 @@ const SPECS = [
     // dynamic / powered
     contactForm, newsletter, search, auth,
     // conversion / contact
-    cta, socialLinks, contactDetails, directions,
+    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.3.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"
   }
 }