@bytesbrains/weblocks 0.3.0 → 0.5.0

package/lib/blocks/legal.js

@@ -0,0 +1,100 @@
+/**
+ * `legal` — policy links (Terms, Privacy, Cookies, …) that open as **scrollable,
+ * dismissible dialogs**. Each document's body is authored in a SAFE Markdown
+ * subset (see markdown.ts) — rich formatting, but never raw HTML (any literal
+ * HTML is escaped, not executed). Static brick: the dialog is pure CSS
+ * (`:target`), so it works with zero JavaScript — click a link to open, click
+ * the ✕ or the backdrop to dismiss.
+ *
+ * Drop it near the `footer` for the familiar "Terms · Privacy" footer row.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+import { renderMarkdown } from '../markdown.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    align: { kind: 'enum', values: ['start', 'center', 'end'], default: 'center' },
+    separator: { kind: 'string', default: '·', max: 4 },
+    documents: {
+        kind: 'array', max: 8,
+        of: {
+            kind: 'object',
+            fields: {
+                label: { kind: 'string', required: true, default: '', max: 60 }, // link text
+                title: { kind: 'string', default: '', max: 120 }, // dialog heading (defaults to label)
+                content: { kind: 'string', default: '', max: 40000 }, // Markdown body
+            },
+        },
+    },
+};
+const css = `
+.blk-legal{padding:var(--space) var(--space);background:var(--bg);color:var(--text)}
+.blk-legal .links{display:flex;flex-wrap:wrap;align-items:center;gap:.35em .8em;max-width:1080px;margin:0 auto}
+.blk-legal.align-center .links{justify-content:center}
+.blk-legal.align-end .links{justify-content:flex-end}
+.blk-legal .lead{color:var(--muted);font-size:var(--fs-base)}
+.blk-legal .links a.open{color:var(--muted);text-decoration:none;font-size:var(--fs-base);border-bottom:1px solid transparent}
+.blk-legal .links a.open:hover,.blk-legal .links a.open:focus-visible{color:var(--primary);border-bottom-color:currentColor}
+.blk-legal .sep{color:var(--muted);opacity:.6;user-select:none}
+/* Dialog — hidden until its id is the URL :target. */
+.blk-legal .modal{position:fixed;inset:0;z-index:1000;display:none;padding:calc(var(--space)*1.2)}
+.blk-legal .modal:target{display:grid;place-items:center}
+.blk-legal .backdrop{position:absolute;inset:0;background:color-mix(in srgb,#000 55%,transparent);border:0;display:block}
+.blk-legal .panel{position:relative;display:flex;flex-direction:column;width:min(680px,100%);max-height:85vh;background:var(--surface);color:var(--text);border-radius:var(--radius);box-shadow:0 24px 60px -12px rgba(0,0,0,.5);overflow:hidden}
+.blk-legal .pbar{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:calc(var(--space)*1.1) calc(var(--space)*1.3);border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
+.blk-legal .pbar h2{margin:0;font-size:var(--fs-lg);font-weight:800}
+.blk-legal .close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2em;height:2em;border-radius:999px;text-decoration:none;color:var(--muted);font-size:1.3em;line-height:1;background:color-mix(in srgb,var(--text) 6%,transparent)}
+.blk-legal .close:hover,.blk-legal .close:focus-visible{color:var(--text);background:color-mix(in srgb,var(--text) 12%,transparent)}
+.blk-legal .body{overflow:auto;padding:calc(var(--space)*1.3);line-height:1.65;overscroll-behavior:contain}
+.blk-legal .body>:first-child{margin-top:0}
+.blk-legal .body>:last-child{margin-bottom:0}
+.blk-legal .body h2{font-size:var(--fs-lg);font-weight:800;margin:1.4em 0 .4em}
+.blk-legal .body h3{font-size:var(--fs-lg);font-weight:700;margin:1.2em 0 .3em}
+.blk-legal .body h4{font-size:var(--fs-base);font-weight:700;margin:1em 0 .3em;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
+.blk-legal .body p{margin:0 0 1em}
+.blk-legal .body ul,.blk-legal .body ol{margin:0 0 1em;padding-left:1.4em}
+.blk-legal .body li{margin:.3em 0}
+.blk-legal .body a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
+.blk-legal .body blockquote{margin:1em 0;padding:.2em 0 .2em 1em;border-left:3px solid var(--accent);color:var(--muted)}
+.blk-legal .body code{background:color-mix(in srgb,var(--text) 8%,transparent);padding:.1em .35em;border-radius:4px;font-size:.9em}
+.blk-legal .body hr{border:0;border-top:1px solid color-mix(in srgb,var(--text) 15%,transparent);margin:1.4em 0}
+/* Lock background scroll while a dialog is open (progressive; no-op if unsupported). */
+html:has(.blk-legal .modal:target){overflow:hidden}
+`.trim();
+function render(config, _tokens, ctx) {
+    const bid = String(ctx?.id ?? 'legal').replace(/[^A-Za-z0-9_-]/g, '') || 'legal';
+    const title = config.title;
+    const align = ['start', 'center', 'end'].includes(config.align) ? config.align : 'center';
+    const sep = escapeHtml(config.separator || '·');
+    const docs = (config.documents ?? []).filter((d) => d && d.label);
+    const links = docs
+        .map((d, i) => `<a class="open" id="open-${bid}-${i}" href="#${bid}-${i}">${escapeHtml(d.label)}</a>`)
+        .join(`<span class="sep" aria-hidden="true">${sep}</span>`);
+    const dialogs = docs.map((d, i) => {
+        const did = `${bid}-${i}`;
+        const heading = d.title || d.label;
+        return `<div class="modal" id="${did}" role="dialog" aria-modal="true" aria-labelledby="h-${did}">
+    <a class="backdrop" href="#open-${did}" aria-label="Close" tabindex="-1"></a>
+    <div class="panel">
+      <div class="pbar">
+        <h2 id="h-${did}">${escapeHtml(heading)}</h2>
+        <a class="close" href="#open-${did}" aria-label="Close dialog">&times;</a>
+      </div>
+      <div class="body">${renderMarkdown(d.content)}</div>
+    </div>
+  </div>`;
+    }).join('\n  ');
+    return `<section class="blk-legal align-${align}" aria-label="${escapeAttr(title || 'Legal')}">
+  <div class="links">
+    ${title ? `<span class="lead">${escapeHtml(title)}</span>` : ''}
+    ${links}
+  </div>
+  ${dialogs}
+</section>`;
+}
+export const legal = {
+    type: 'legal',
+    description: 'Policy links (terms, privacy, cookies, …) that open as scrollable, dismissible dialogs; each body is safe Markdown (never raw HTML). No JavaScript.',
+    schema,
+    css,
+    render,
+};

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

@@ -14,6 +14,7 @@ export { NOOP_RUNTIME, pathRuntime, runtimeNeeds, type RuntimeAdapter, type Runt
 export { buildWebManifest, buildWebManifestJson, buildServiceWorker, emitPwa, type WebAppManifest, } from './pwa.js';
 export { validateBlock, validateManifest, type Validation } from './validate.js';
 export { parse, escapeHtml, escapeAttr, sanitizeUrl, type Field, type Schema, type ParseResult } from './schema.js';
+export { renderMarkdown } from './markdown.js';
 export { catalog, catalogPrompt, type BlockCatalogEntry, type JsonSchema } from './catalog.js';
 export { applyOp, applyOps, type EditOp, type OpResult, type BatchResult } from './ops.js';
 export { generateSite, editSite, buildGenerationPrompt, buildEditPrompt, parseManifestResponse, parseOpsResponse, type ModelCall, type ComposeResult, type EditResult, } from './generate.js';

package/lib/index.js

@@ -6,6 +6,7 @@ export { NOOP_RUNTIME, pathRuntime, runtimeNeeds, } from './runtime.js';
 export { buildWebManifest, buildWebManifestJson, buildServiceWorker, emitPwa, } from './pwa.js';
 export { validateBlock, validateManifest } from './validate.js';
 export { parse, escapeHtml, escapeAttr, sanitizeUrl } from './schema.js';
+export { renderMarkdown } from './markdown.js';
 export { catalog, catalogPrompt } from './catalog.js';
 export { applyOp, applyOps } from './ops.js';
 export { generateSite, editSite, buildGenerationPrompt, buildEditPrompt, parseManifestResponse, parseOpsResponse, } from './generate.js';

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 {};