@bytesbrains/weblocks 0.4.0 → 0.6.0

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

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

package/lib/islands/resume.js

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

package/lib/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

@@ -2,6 +2,9 @@ import { nav } from './blocks/nav.js';
 import { announcementBar } from './blocks/announcementBar.js';
 import { hero } from './blocks/hero.js';
 import { heroApp } from './blocks/heroApp.js';
+import { profileHeader } from './blocks/profileHeader.js';
+import { experience } from './blocks/experience.js';
+import { skills } from './blocks/skills.js';
 import { features } from './blocks/features.js';
 import { about } from './blocks/about.js';
 import { richText } from './blocks/richText.js';
@@ -15,6 +18,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 +39,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';
@@ -45,11 +50,13 @@ const SPECS = [
     appShell, nav, announcementBar, sidebar,
     // heroes
     hero, heroApp,
+    // résumé / profile
+    profileHeader, experience, skills,
     // content
     features, about, richText, split, steps, stats,
     services, pricing, logos, team,
     // media
-    gallery, carousel, video, map,
+    gallery, carousel, video, videoGallery, map,
     // structured content
     timeline, tabs, accordion, testimonials, faq,
     // collections
@@ -60,7 +67,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) {
@@ -80,5 +87,8 @@ export function needsIsland(spec, config) {
         return false;
     if (spec.type === 'gallery')
         return config.lightbox === true;
+    // profile-header only needs the resume island when an action button is shown.
+    if (spec.type === 'profile-header')
+        return config.showDownload === true || config.showShare === true;
     return true;
 }

package/lib/render.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

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

package/lib/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytesbrains/weblocks",
-  "version": "0.4.0",
+  "version": "0.6.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"
   }
 }