@bytesbrains/weblocks 0.4.0 → 0.6.0

package/lib/blocks/experience.js

@@ -0,0 +1,78 @@
+/**
+ * `experience` — a résumé section of dated, structured entries: role, org,
+ * period, location, an optional summary, and achievement bullets. One block for
+ * the whole family: set its `title` to "Experience", "Education",
+ * "Certifications", "Volunteering", etc. Print-friendly (entries avoid page
+ * breaks). Static brick.
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: 'Experience', max: 120 },
+    items: {
+        kind: 'array', max: 24,
+        of: {
+            kind: 'object',
+            fields: {
+                role: { kind: 'string', required: true, default: '', max: 120 }, // role / degree / title
+                org: { kind: 'string', default: '', max: 120 }, // company / school
+                period: { kind: 'string', default: '', max: 60 }, // e.g. "2021 – Present"
+                location: { kind: 'string', default: '', max: 80 },
+                url: { kind: 'string', default: '', max: 500 }, // org link
+                summary: { kind: 'string', default: '', max: 300 },
+                bullets: { kind: 'array', max: 12, of: { kind: 'string', default: '', max: 300 } },
+            },
+        },
+    },
+};
+const css = `
+.blk-experience{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-experience .wrap{max-width:820px;margin:0 auto}
+.blk-experience h2{font-size:var(--fs-xl);margin:0 0 var(--space);font-weight:800}
+.blk-experience .entry{padding:0 0 calc(var(--space)*1.3);margin-bottom:calc(var(--space)*1.3);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
+.blk-experience .entry:last-child{border-bottom:0;margin-bottom:0}
+.blk-experience .top{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap;align-items:baseline}
+.blk-experience .role{font-weight:700;font-size:var(--fs-lg)}
+.blk-experience .org{color:var(--primary);font-weight:600}
+.blk-experience .org a{color:inherit;text-decoration:none}
+.blk-experience .org a:hover{text-decoration:underline}
+.blk-experience .period{color:var(--muted);font-size:var(--fs-base);font-variant-numeric:tabular-nums;white-space:nowrap}
+.blk-experience .loc{color:var(--muted);font-size:var(--fs-base);margin:.1em 0 0}
+.blk-experience .summary{margin:.5em 0 0;color:var(--muted)}
+.blk-experience ul{margin:.5em 0 0;padding-left:1.3em}
+.blk-experience li{margin:.25em 0;line-height:1.5}
+`.trim();
+function entry(it) {
+    if (!it.role)
+        return '';
+    const url = sanitizeUrl(it.url);
+    const org = it.org
+        ? `<span class="org">${(url !== '#' && it.url) ? `<a href="${escapeAttr(url)}" rel="noopener">${escapeHtml(it.org)}</a>` : escapeHtml(it.org)}</span>`
+        : '';
+    const bullets = (it.bullets ?? []).filter(Boolean).map((b) => `<li>${escapeHtml(b)}</li>`).join('');
+    return `<div class="entry">
+      <div class="top">
+        <div><span class="role">${escapeHtml(it.role)}</span>${org ? ` · ${org}` : ''}</div>
+        ${it.period ? `<span class="period">${escapeHtml(it.period)}</span>` : ''}
+      </div>
+      ${it.location ? `<p class="loc">${escapeHtml(it.location)}</p>` : ''}
+      ${it.summary ? `<p class="summary">${escapeHtml(it.summary)}</p>` : ''}
+      ${bullets ? `<ul>${bullets}</ul>` : ''}
+    </div>`;
+}
+function render(config) {
+    const title = config.title;
+    const items = (config.items ?? []).map(entry).filter(Boolean);
+    return `<section class="blk-experience" aria-label="${escapeAttr(title || 'Experience')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    ${items.join('\n    ')}
+  </div>
+</section>`;
+}
+export const experience = {
+    type: 'experience',
+    description: 'A résumé section of dated entries (role, org, period, location, bullets). Reuse for Experience, Education, Certifications by changing the title.',
+    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/hero.js

@@ -1,10 +1,18 @@
-/** `hero` — headline + optional eyebrow/subhead/CTA. Static brick. */
+/**
+ * `hero` — headline + optional eyebrow/subhead/CTA, optionally over a background
+ * **image banner**. When `image` is set the photo sits behind the content with a
+ * legibility overlay (scrim/dark/light) and the text flips to a readable colour;
+ * with no image it renders exactly as a plain text hero. Static brick.
+ */
 import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
 const schema = {
     eyebrow: { kind: 'string', default: '', max: 80 },
     headline: { kind: 'string', required: true, default: 'Your headline here', max: 160 },
     subhead: { kind: 'string', default: '', max: 320 },
     align: { kind: 'enum', values: ['center', 'left'], default: 'center' },
+    image: { kind: 'string', default: '', max: 500 }, // background banner image
+    overlay: { kind: 'enum', values: ['scrim', 'dark', 'light', 'none'], default: 'scrim' }, // legibility layer (with image)
+    minHeight: { kind: 'enum', values: ['auto', 'sm', 'md', 'lg', 'full'], default: 'auto' },
     cta: {
         kind: 'object',
         fields: {
@@ -22,6 +30,19 @@ const css = `
 .blk-hero p{font-size:var(--fs-lg);color:var(--muted);margin:0;max-width:60ch}
 .blk-hero .cta{display:inline-block;background:var(--primary);color:var(--on-primary);padding:.7em 1.4em;border-radius:var(--radius);text-decoration:none;font-weight:600;transition:transform var(--motion)}
 .blk-hero .cta:hover{transform:translateY(-1px)}
+/* Image banner */
+.blk-hero.has-image{position:relative;isolation:isolate;color:#fff}
+.blk-hero.has-image .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
+.blk-hero.has-image .scrim{position:absolute;inset:0;z-index:-1}
+.blk-hero.overlay-dark .scrim{background:rgba(0,0,0,.55)}
+.blk-hero.overlay-scrim .scrim{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.6))}
+.blk-hero.overlay-light{color:var(--text)}
+.blk-hero.overlay-light .scrim{background:rgba(255,255,255,.62)}
+.blk-hero.has-image.overlay-none{color:var(--text)}
+.blk-hero.overlay-none .scrim{display:none}
+.blk-hero.has-image .eyebrow,.blk-hero.has-image p{color:inherit;opacity:.9}
+.blk-hero.mh-sm{min-height:36vh}.blk-hero.mh-md{min-height:52vh}.blk-hero.mh-lg{min-height:72vh}.blk-hero.mh-full{min-height:100vh}
+.blk-hero.mh-sm,.blk-hero.mh-md,.blk-hero.mh-lg,.blk-hero.mh-full{display:flex;flex-direction:column;justify-content:center}
 `.trim();
 function render(config) {
     const eyebrow = config.eyebrow;
@@ -29,20 +50,32 @@ function render(config) {
     const subhead = config.subhead;
     const align = config.align;
     const cta = config.cta;
+    const imageUrl = sanitizeUrl(config.image);
+    const hasImg = imageUrl !== '#' && !!config.image;
+    const overlay = ['scrim', 'dark', 'light', 'none'].includes(config.overlay) ? config.overlay : 'scrim';
+    const minHeight = ['auto', 'sm', 'md', 'lg', 'full'].includes(config.minHeight) ? config.minHeight : 'auto';
+    const classes = ['blk-hero'];
+    if (hasImg)
+        classes.push('has-image', `overlay-${overlay}`);
+    if (minHeight !== 'auto')
+        classes.push(`mh-${minHeight}`);
+    const banner = hasImg
+        ? `<img class="bg" src="${escapeAttr(imageUrl)}" alt="" aria-hidden="true">\n  <div class="scrim"></div>\n  `
+        : '';
     const parts = [
         eyebrow ? `<p class="eyebrow">${escapeHtml(eyebrow)}</p>` : '',
         `<h1>${escapeHtml(headline)}</h1>`,
         subhead ? `<p>${escapeHtml(subhead)}</p>` : '',
         cta.label ? `<a class="cta" href="${escapeAttr(sanitizeUrl(cta.href))}">${escapeHtml(cta.label)}</a>` : '',
     ].filter(Boolean).join('\n    ');
-    return `<section class="blk-hero" data-align="${escapeAttr(align)}" aria-label="Hero">
-  <div class="wrap">
+    return `<section class="${classes.join(' ')}" data-align="${escapeAttr(align)}" aria-label="Hero">
+  ${banner}<div class="wrap">
     ${parts}
   </div>
 </section>`;
 }
 export const hero = {
     type: 'hero',
-    description: 'Top-of-page banner: a big headline with an optional eyebrow, subheading, and one call-to-action button.',
+    description: 'Top-of-page hero: a big headline with optional eyebrow, subheading, and CTA — optionally over a full-bleed background image banner with a legibility overlay.',
     schema, css, render,
 };

package/lib/blocks/profileHeader.d.ts

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

package/lib/blocks/profileHeader.js

@@ -0,0 +1,124 @@
+/**
+ * `profile-header` — the résumé/CV header: avatar, name, role/headline, location,
+ * a contact + social row (brand icons), an optional short summary, and optional
+ * **Download-PDF** (print) and **Share** action buttons. The buttons are wired by
+ * the `resume` island (print → `window.print()` with the engine's print styles;
+ * share → Web Share API + copy-link fallback) and are hidden from the printout.
+ * Static markup; island only ships when an action button is enabled.
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+import { BRAND_ICON_PATHS } from './brandIcons.js';
+// Generic (non-brand) contact glyphs — filled, 24×24.
+const GENERIC = {
+    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',
+    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',
+    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',
+    location: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z',
+};
+const CONTACT_TYPES = ['email', 'phone', 'website', 'location', 'linkedin', 'github', 'twitter', 'x', 'custom'];
+const schema = {
+    name: { kind: 'string', required: true, default: '', max: 120 },
+    headline: { kind: 'string', default: '', max: 160 }, // role / tagline
+    location: { kind: 'string', default: '', max: 120 },
+    avatar: { kind: 'string', default: '', max: 500 },
+    summary: { kind: 'string', default: '', max: 400 },
+    contacts: {
+        kind: 'array', max: 10,
+        of: {
+            kind: 'object',
+            fields: {
+                type: { kind: 'enum', values: CONTACT_TYPES, default: 'custom' },
+                value: { kind: 'string', required: true, default: '', max: 300 }, // email / phone / url / text
+                label: { kind: 'string', default: '', max: 80 }, // shown text (defaults to value)
+            },
+        },
+    },
+    showDownload: { kind: 'boolean', default: false },
+    downloadLabel: { kind: 'string', default: 'Download PDF', max: 40 },
+    showShare: { kind: 'boolean', default: false },
+    shareLabel: { kind: 'string', default: 'Share', max: 40 },
+};
+const css = `
+.blk-profile-header{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-profile-header .wrap{max-width:900px;margin:0 auto;display:flex;gap:calc(var(--space)*1.4);align-items:center;flex-wrap:wrap}
+.blk-profile-header .avatar,.blk-profile-header .initials{width:112px;height:112px;border-radius:999px;flex:0 0 auto;object-fit:cover;display:flex;align-items:center;justify-content:center}
+.blk-profile-header .initials{background:color-mix(in srgb,var(--primary) 18%,var(--surface));color:var(--primary);font-weight:800;font-size:var(--fs-xl)}
+.blk-profile-header .info{flex:1;min-width:min(280px,100%)}
+.blk-profile-header h1{margin:0;font-size:var(--fs-xl);font-weight:800;line-height:1.1}
+.blk-profile-header .role{margin:.2em 0 0;color:var(--primary);font-weight:600;font-size:var(--fs-lg)}
+.blk-profile-header .summary{margin:.5em 0 0;color:var(--muted)}
+.blk-profile-header .contacts{display:flex;flex-wrap:wrap;gap:.4em 1.1em;margin:.8em 0 0}
+.blk-profile-header .contacts a,.blk-profile-header .contacts span.c{display:inline-flex;align-items:center;gap:.4em;color:var(--muted);text-decoration:none;font-size:var(--fs-base)}
+.blk-profile-header .contacts a:hover{color:var(--primary)}
+.blk-profile-header .contacts svg{width:1.05em;height:1.05em;flex:0 0 auto}
+.blk-profile-header .actions{display:flex;gap:.6em;flex-wrap:wrap;margin:calc(var(--space)*1.1) 0 0;flex-basis:100%}
+.blk-profile-header .btn{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:var(--radius);padding:.6em 1.2em;background:var(--primary);color:var(--on-primary)}
+.blk-profile-header .btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)}
+@media(max-width:560px){.blk-profile-header .wrap{justify-content:center;text-align:center}.blk-profile-header .contacts{justify-content:center}}
+`.trim();
+function svg(path) {
+    return `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="${path}"></path></svg>`;
+}
+function initials(name) {
+    return name.trim().split(/\s+/).slice(0, 2).map((w) => w[0] ?? '').join('').toUpperCase() || '?';
+}
+function contact(c) {
+    const type = CONTACT_TYPES.includes(c.type) ? c.type : 'custom';
+    const value = c.value;
+    if (!value)
+        return '';
+    const text = escapeHtml(c.label || value);
+    const iconPath = type === 'twitter' || type === 'x' ? BRAND_ICON_PATHS.x
+        : (BRAND_ICON_PATHS[type] ?? GENERIC[type]);
+    const icon = iconPath ? svg(iconPath) : '';
+    if (type === 'location')
+        return `<span class="c">${icon}${text}</span>`;
+    let href = value;
+    if (type === 'email')
+        href = `mailto:${value}`;
+    else if (type === 'phone')
+        href = `tel:${value.replace(/[^0-9+]/g, '')}`;
+    const safe = sanitizeUrl(href);
+    if (safe === '#')
+        return `<span class="c">${icon}${text}</span>`;
+    return `<a href="${escapeAttr(safe)}" rel="noopener">${icon}${text}</a>`;
+}
+function render(config) {
+    const name = config.name;
+    const headline = config.headline;
+    const summary = config.summary;
+    const avatarUrl = sanitizeUrl(config.avatar);
+    const hasAvatar = avatarUrl !== '#' && !!config.avatar;
+    const contacts = (config.contacts ?? []).map(contact).filter(Boolean);
+    const showDownload = config.showDownload === true;
+    const showShare = config.showShare === true;
+    const avatar = hasAvatar
+        ? `<img class="avatar" src="${escapeAttr(avatarUrl)}" alt="${escapeAttr(name)}">`
+        : `<div class="initials" aria-hidden="true">${escapeHtml(initials(name))}</div>`;
+    const actions = (showDownload || showShare)
+        ? `<div class="actions" data-wl-noprint>
+      ${showDownload ? `<button class="btn" type="button" data-wl-print>${escapeHtml(config.downloadLabel || 'Download PDF')}</button>` : ''}
+      ${showShare ? `<button class="btn ghost" type="button" data-wl-share>${escapeHtml(config.shareLabel || 'Share')}</button>` : ''}
+    </div>`
+        : '';
+    return `<section class="blk-profile-header" aria-label="${escapeAttr(name || 'Profile')}">
+  <div class="wrap">
+    ${avatar}
+    <div class="info">
+      <h1>${escapeHtml(name)}</h1>
+      ${headline ? `<p class="role">${escapeHtml(headline)}</p>` : ''}
+      ${summary ? `<p class="summary">${escapeHtml(summary)}</p>` : ''}
+      ${contacts.length ? `<div class="contacts">${contacts.join('')}</div>` : ''}
+    </div>
+    ${actions}
+  </div>
+</section>`;
+}
+export const profileHeader = {
+    type: 'profile-header',
+    description: 'A résumé/CV header: avatar, name, role, location, a contact + social row, and optional Download-PDF and Share buttons.',
+    schema,
+    css,
+    render,
+    island: 'resume',
+};

package/lib/blocks/skills.d.ts

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

package/lib/blocks/skills.js

@@ -0,0 +1,91 @@
+/**
+ * `skills` — grouped skills shown as **tags** (chips, with optional proficiency
+ * dots) or **bars** (labelled level bars). Doubles for Languages, Tools, etc.
+ * Static brick.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: 'Skills', max: 120 },
+    display: { kind: 'enum', values: ['tags', 'bars'], default: 'tags' },
+    groups: {
+        kind: 'array', max: 10,
+        of: {
+            kind: 'object',
+            fields: {
+                name: { kind: 'string', default: '', max: 60 }, // e.g. "Languages"
+                items: {
+                    kind: 'array', max: 40,
+                    of: {
+                        kind: 'object',
+                        fields: {
+                            label: { kind: 'string', required: true, default: '', max: 60 },
+                            level: { kind: 'int', min: 0, max: 5, default: 0 }, // 0 = unrated
+                        },
+                    },
+                },
+            },
+        },
+    },
+};
+const css = `
+.blk-skills{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-skills .wrap{max-width:820px;margin:0 auto}
+.blk-skills h2{font-size:var(--fs-xl);margin:0 0 var(--space);font-weight:800}
+.blk-skills .group{margin-bottom:calc(var(--space)*1.1)}
+.blk-skills .group:last-child{margin-bottom:0}
+.blk-skills .gname{font-weight:700;font-size:var(--fs-base);margin:0 0 .5em;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
+.blk-skills .tags{display:flex;flex-wrap:wrap;gap:.5em}
+.blk-skills .tag{display:inline-flex;align-items:center;gap:.5em;padding:.4em .8em;border-radius:999px;background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);font-size:var(--fs-base);font-weight:600}
+.blk-skills .dots{display:inline-flex;gap:2px}
+.blk-skills .dots i{width:6px;height:6px;border-radius:999px;background:color-mix(in srgb,var(--text) 25%,transparent)}
+.blk-skills .dots i.on{background:var(--primary)}
+.blk-skills .bars{display:grid;gap:.6em}
+.blk-skills .bar{display:grid;grid-template-columns:minmax(90px,180px) 1fr;gap:.8em;align-items:center}
+.blk-skills .bar .blabel{font-weight:600;font-size:var(--fs-base)}
+.blk-skills .track{height:8px;border-radius:999px;background:color-mix(in srgb,var(--text) 12%,transparent);overflow:hidden}
+.blk-skills .fill{height:100%;background:var(--primary);border-radius:999px}
+@media(max-width:480px){.blk-skills .bar{grid-template-columns:1fr}}
+`.trim();
+function dots(level) {
+    const n = Math.max(0, Math.min(5, level | 0));
+    if (!n)
+        return '';
+    return `<span class="dots" aria-hidden="true">${Array.from({ length: 5 }, (_v, i) => `<i class="${i < n ? 'on' : ''}"></i>`).join('')}</span>`;
+}
+function group(g, display) {
+    const items = (g.items ?? []).filter((s) => s && s.label);
+    if (!items.length)
+        return '';
+    let body;
+    if (display === 'bars') {
+        body = `<div class="bars">${items.map((s) => {
+            const pct = Math.max(0, Math.min(5, s.level | 0)) * 20;
+            return `<div class="bar"><span class="blabel">${escapeHtml(s.label)}</span><span class="track"><span class="fill" style="width:${pct}%"></span></span></div>`;
+        }).join('')}</div>`;
+    }
+    else {
+        body = `<div class="tags">${items.map((s) => `<span class="tag">${escapeHtml(s.label)}${dots(s.level)}</span>`).join('')}</div>`;
+    }
+    return `<div class="group">
+      ${g.name ? `<p class="gname">${escapeHtml(g.name)}</p>` : ''}
+      ${body}
+    </div>`;
+}
+function render(config) {
+    const title = config.title;
+    const display = config.display === 'bars' ? 'bars' : 'tags';
+    const groups = (config.groups ?? []).map((g) => group(g, display)).filter(Boolean);
+    return `<section class="blk-skills" aria-label="${escapeAttr(title || 'Skills')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    ${groups.join('\n    ')}
+  </div>
+</section>`;
+}
+export const skills = {
+    type: 'skills',
+    description: 'Grouped skills shown as tags (with optional proficiency dots) or labelled level bars; also for languages and tools.',
+    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',
+};