domma-cms 0.9.6 → 0.10.0

package/server/services/markdown.js

@@ -20,7 +20,7 @@ const BUILTIN_SHORTCODES = new Set([
     'accordion', 'item', 'carousel', 'slide', 'countdown', 'timeline',
     'event', 'spacer', 'center', 'icon', 'form', 'hero', 'table', 'badge',
     'text', 'button', 'link', 'cta', 'grid', 'row', 'col', 'card',
-    'slideover', 'counter', 'celebrate', 'firework', 'fireworks', 'scribe',
+    'banner', 'slideover', 'counter', 'celebrate', 'firework', 'fireworks', 'scribe',
     'reveal', 'breathe', 'pulse', 'shake', 'scramble', 'ripple', 'twinkle',
     'animate', 'ambient', 'list-group',
 ]);
@@ -819,100 +819,630 @@ export function escapeAttr(str) {
     .replace(/>/g, '>');
 }
 
+// ---------------------------------------------------------------------------
+// Card shared helpers
+// ---------------------------------------------------------------------------
+
 /**
- * Pre-process [card] shortcodes before running through marked.
+ * Returns the full class array for a card root element, incorporating variant,
+ * gradient, hover, collapsible, and custom class attributes.
  *
- * Syntax:
- *   [card title="Optional Title" collapsible="true"]
- *   Body content (supports Markdown).
- *   [/card]
+ * @param {object} attrs
+ * @returns {string[]}
+ */
+function cardVariantClasses(attrs) {
+    const variant = typeof attrs.variant === 'string' ? attrs.variant.trim() : '';
+    const gradient = typeof attrs.gradient === 'string' ? attrs.gradient.trim() : 'indigo';
+    const classes = ['card', 'mb-4'];
+    const valid = ['clean', 'gradient', 'glass', 'accent', 'dark', 'glow'];
+    if (valid.includes(variant)) {
+        classes.push(`dm-card-${variant}`);
+        if (variant === 'gradient') classes.push(`card-gradient-${gradient}`);
+    }
+    if ('hover' in attrs) classes.push('card-hover');
+    if (attrs.collapsible === 'true') classes.push('card-collapsible');
+    if (typeof attrs.class === 'string') classes.push(attrs.class.trim());
+    const font = typeof attrs.font === 'string' ? attrs.font.trim() : '';
+    if (['serif', 'mono'].includes(font)) classes.push(`card-font-${font}`);
+    const fontSize = typeof attrs['font-size'] === 'string' ? attrs['font-size'].trim() : '';
+    if (['sm', 'lg', 'xl'].includes(fontSize)) classes.push(`card-text-${fontSize}`);
+    if ('borderless' in attrs) classes.push('card-borderless');
+    const shadow = typeof attrs.shadow === 'string' ? attrs.shadow.trim() : '';
+    if (['none', 'md', 'lg'].includes(shadow)) classes.push(`card-shadow-${shadow}`);
+    const rounded = typeof attrs.rounded === 'string' ? attrs.rounded.trim() : '';
+    if (['none', 'sm', 'lg', 'full'].includes(rounded)) classes.push(`card-rounded-${rounded}`);
+    const textAlign = typeof attrs['text-align'] === 'string' ? attrs['text-align'].trim() : '';
+    if (['center', 'right'].includes(textAlign)) classes.push(`card-align-${textAlign}`);
+    const padding = typeof attrs.padding === 'string' ? attrs.padding.trim() : '';
+    if (['compact', 'spacious'].includes(padding)) classes.push(`card-pad-${padding}`);
+    return classes;
+}
+
+/**
+ * Builds the opening `<div>` tag for a card root element.
  *
- * Supported attributes:
- *   title        - Card header title (omit for no header)
- *   collapsible  - "true" to make the card body toggle on header click
+ * @param {object}   attrs
+ * @param {string[]} [extraClasses=[]]
+ * @returns {string}
+ */
+function cardRoot(attrs, extraClasses = []) {
+    const classes = [...cardVariantClasses(attrs), ...extraClasses];
+    const id = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
+    const coll = attrs.collapsible === 'true' ? ' data-collapsible="true"' : '';
+    return `<div class="${classes.join(' ')}"${id}${coll}>`;
+}
+
+/**
+ * Returns a card-footer div from the `footer` attribute, or an empty string.
  *
- * @param {string} markdown
+ * @param {object} attrs
  * @returns {string}
  */
-function processCardBlocks(markdown) {
-  const {scrubbed, restore} = scrubCodeRegions(markdown);
-  return restore(scrubbed.replace(
-    /\[card([^\]]*)\]([\s\S]*?)\[\/card\]/gi,
-    (_, attrStr, body) => {
-      const attrs = parseShortcodeAttrs(attrStr);
-        const strAttr = (key) => typeof attrs[key] === 'string' ? attrs[key].trim() : '';
-        const title = strAttr('title');
-        const subtitle = strAttr('subtitle');
-        const icon = strAttr('icon');
-        const footer = strAttr('footer');
-      const collapsible = attrs.collapsible === 'true';
-      const hover = 'hover' in attrs;
-        const variant = strAttr('variant');
-        const extraClass = strAttr('class');
-
-      // Root class list
-      const classes = ['card', 'mb-4'];
-      if (variant === 'primary') classes.push('card-primary');
-      if (hover) classes.push('card-hover');
-      if (collapsible) classes.push('card-collapsible');
-      if (extraClass) classes.push(extraClass);
+function cardFooterAttr(attrs) {
+    return attrs.footer ? `<div class="card-footer">${escapeAttr(attrs.footer)}</div>` : '';
+}
 
-      const id = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
-      const coll = collapsible ? ' data-collapsible="true"' : '';
-
-      const iconLayout = (attrs['icon-layout'] || 'inline').trim(); // 'inline' | 'stacked'
-
-        // Extract [header]...[/header] and [footer]...[/footer] sub-tags (Pattern B)
-        let headerContent = null;
-        let footerContent = null;
-        let remaining = body;
-        remaining = remaining.replace(
-            /\[header\]([\s\S]*?)\[\/header\]/i,
-            (_, inner) => {
-                headerContent = inner.trim();
-                return '';
-            }
-        );
-        remaining = remaining.replace(
-            /\[footer\]([\s\S]*?)\[\/footer\]/i,
-            (_, inner) => {
-                footerContent = inner.trim();
-                return '';
-            }
-        );
+/**
+ * Returns an inline `style` attribute with a background-image from the `image` attribute.
+ *
+ * @param {object} attrs
+ * @returns {string}
+ */
+function imgStyle(attrs) {
+    const img = typeof attrs.image === 'string' ? attrs.image.trim() : '';
+    return img ? ` style="background-image:url('${escapeAttr(img)}')"` : '';
+}
+
+/**
+ * Parses all occurrences of `[tagName attrs]body[/tagName]` from a body string.
+ *
+ * @param {string} body
+ * @param {string} tagName
+ * @returns {{ attrs: object, content: string }[]}
+ */
+function parseSubTagList(body, tagName) {
+    const re = new RegExp(`\\[${tagName}([^\\]]*)\\]([\\s\\S]*?)\\[\\/${tagName}\\]`, 'gi');
+    const items = [];
+    body.replace(re, (_, attrStr, inner) => {
+        items.push({attrs: parseShortcodeAttrs(attrStr), content: inner.trim()});
+    });
+    return items;
+}
+
+/**
+ * Returns the inner content of the first `[tagName]body[/tagName]` found, or null.
+ *
+ * @param {string} body
+ * @param {string} tagName
+ * @returns {string|null}
+ */
+function parseSubTag(body, tagName) {
+    const re = new RegExp(`\\[${tagName}([^\\]]*)\\]([\\s\\S]*?)\\[\\/${tagName}\\]`, 'i');
+    const m = body.match(re);
+    return m ? m[2].trim() : null;
+}
+
+/**
+ * Returns a cycling inline style string for tag/badge colours.
+ *
+ * @param {number} i
+ * @returns {string}
+ */
+function tagColorStyle(i) {
+    const p = [
+        'background:#ede9fe;color:#7c3aed',
+        'background:#dbeafe;color:#1d4ed8',
+        'background:#d1fae5;color:#065f46',
+        'background:#fef3c7;color:#92400e',
+        'background:#fce7f3;color:#9d174d',
+    ];
+    return p[i % p.length];
+}
+
+// ---------------------------------------------------------------------------
+// Card layout renderers registry (populated by layout-specific tasks)
+// ---------------------------------------------------------------------------
 
-        // Header — sub-tag wins over attributes; attributes only used when no sub-tag
-      let headerHtml = '';
-        if (headerContent !== null) {
-            headerHtml = `<div class="card-header">${marked.parse(headerContent)}</div>`;
-        } else if (title || icon) {
+const LAYOUT_RENDERERS = {};
+
+LAYOUT_RENDERERS['basic'] = (attrs, body) => {
+    const bodyHtml = marked.parse(body.trim());
+    return `${cardRoot(attrs)}<div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['header-body'] = (attrs, body) => {
+    const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+    const hdr = title ? `<div class="card-header"><div class="card-title">${escapeAttr(title)}</div></div>` : '';
+    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    return `${cardRoot(attrs)}${hdr}<div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['header-body-footer'] = (attrs, body) => {
+    const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+    const footer = typeof attrs.footer === 'string' ? attrs.footer.trim() : '';
+    const hdr = title ? `<div class="card-header"><div class="card-title">${escapeAttr(title)}</div></div>` : '';
+    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const ftr = footer ? `<div class="card-footer">${escapeAttr(footer)}</div>` : '';
+    return `${cardRoot(attrs)}${hdr}<div class="card-body">${bodyHtml}</div>${ftr}</div>\n`;
+};
+
+LAYOUT_RENDERERS['no-header-footer'] = (attrs, body) => {
+    const footer = typeof attrs.footer === 'string' ? attrs.footer.trim() : '';
+    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const ftr = footer ? `<div class="card-footer">${escapeAttr(footer)}</div>` : '';
+    return `${cardRoot(attrs)}<div class="card-body">${bodyHtml}</div>${ftr}</div>\n`;
+};
+
+LAYOUT_RENDERERS['icon-top'] = (attrs, body) => {
+    const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+    const subtitle = typeof attrs.subtitle === 'string' ? attrs.subtitle.trim() : '';
+    const icon = typeof attrs.icon === 'string' ? attrs.icon.trim() : '';
+    const iconHtml = icon ? `<span data-icon="${escapeAttr(icon)}" class="card-icon"></span>` : '';
+    const subHtml = subtitle ? `<div class="card-subtitle">${escapeAttr(subtitle)}</div>` : '';
+    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    return `${cardRoot(attrs)}
+    <div class="card-header card-header-icon-stacked">
+      <div class="card-avatar-wrap">${iconHtml}<div class="card-title">${escapeAttr(title)}</div>${subHtml}</div>
+    </div>
+    <div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['icon-inline'] = (attrs, body) => {
+    const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+    const subtitle = typeof attrs.subtitle === 'string' ? attrs.subtitle.trim() : '';
+    const icon = typeof attrs.icon === 'string' ? attrs.icon.trim() : '';
+    const iconHtml = icon ? `<span data-icon="${escapeAttr(icon)}"></span>` : '';
+    const subHtml = subtitle ? `<div class="card-subtitle">${escapeAttr(subtitle)}</div>` : '';
+    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    return `${cardRoot(attrs)}
+    <div class="card-header card-header-icon-inline">
+      ${iconHtml}<div class="card-header-content"><div class="card-title">${escapeAttr(title)}</div>${subHtml}</div>
+    </div>
+    <div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['image-top'] = (attrs, body) => {
+    const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+    const hdr = title ? `<div class="card-header"><div class="card-title">${escapeAttr(title)}</div></div>` : '';
+    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    return `${cardRoot(attrs)}<div class="card-img-top"${imgStyle(attrs)}></div>${hdr}<div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['image-overlay'] = (attrs, body) => {
+    const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    return `${cardRoot(attrs)}
+    <div class="card-img-overlay"${imgStyle(attrs)}>
+      <div class="card-overlay-text"><div class="card-title">${escapeAttr(title)}</div></div>
+    </div>
+    <div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['thumb-left'] = (attrs, body) => {
+    const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    return `${cardRoot(attrs, ['card-layout-thumb-left'])}<div class="card-img-left"${imgStyle(attrs)}></div>
+    <div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['thumb-right'] = (attrs, body) => {
+    const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    return `${cardRoot(attrs, ['card-layout-thumb-right'])}
+    <div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}</div>
+    <div class="card-img-right"${imgStyle(attrs)}></div></div>\n`;
+};
+
+LAYOUT_RENDERERS['wide-left-image'] = (attrs, body) => {
+    const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    return `${cardRoot(attrs, ['card-layout-horizontal'])}<div class="card-img-wide"${imgStyle(attrs)}></div>
+    <div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}${cardFooterAttr(attrs)}</div></div>\n`;
+};
+
+LAYOUT_RENDERERS['full-bg'] = (attrs, body) => {
+    const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    return `${cardRoot(attrs, ['dm-card-full-bg'])}<div class="card-img-top"${imgStyle(attrs)}></div>
+    <div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['split-half'] = (attrs, body) => {
+    const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+    const gradient = typeof attrs.gradient === 'string' ? attrs.gradient.trim() : 'indigo';
+    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    return `${cardRoot(attrs, ['card-layout-split'])}<div class="card-split-left card-gradient-${escapeAttr(gradient)}"${imgStyle(attrs)}></div>
+    <div class="card-split-right"><div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}</div></div></div>\n`;
+};
+
+// ---------------------------------------------------------------------------
+// Tier 1 content-specific layout renderers
+// ---------------------------------------------------------------------------
+
+LAYOUT_RENDERERS['avatar-profile'] = (attrs, body) => {
+    const title = escapeAttr(attrs.title || '');
+    const subtitle = escapeAttr(attrs.subtitle || '');
+    const icon = escapeAttr(attrs.icon || '');
+    const tags = typeof attrs.tags === 'string' ? attrs.tags.split(',').map(t => t.trim()).filter(Boolean) : [];
+    const tagHtml = tags.length ? `<div class="card-tag-pills">${tags.map(t => `<span class="card-pill">${escapeAttr(t)}</span>`).join('')}</div>` : '';
+    const iconHtml = icon ? `<span data-icon="${icon}"></span>` : '';
+    const bodyHtml = body.trim() ? `<div class="card-body">${marked.parse(body.trim())}</div>` : '';
+    return `${cardRoot(attrs)}<div class="card-avatar-wrap">
+    <div class="card-avatar">${iconHtml}</div>
+    ${title ? `<div class="card-title">${title}</div>` : ''}
+    ${subtitle ? `<div class="card-subtitle">${subtitle}</div>` : ''}${tagHtml}
+  </div>${bodyHtml}${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['stat-metric'] = (attrs, _body) => {
+    const title = escapeAttr(attrs.title || '');
+    const value = escapeAttr(attrs.value || '—');
+    const delta = escapeAttr(attrs.delta || '');
+    const progress = Math.min(100, Math.max(0, parseInt(attrs.progress || '0', 10)));
+    const isPos = delta && !delta.startsWith('-') && !delta.startsWith('↓');
+    const deltaHtml = delta ? `<div class="card-stat-delta ${isPos ? 'positive' : 'negative'}">${delta}</div>` : '';
+    const barHtml = progress > 0 ? `<div class="card-stat-bar"><div class="card-stat-fill" style="width:${progress}%"></div></div>` : '';
+    return `${cardRoot(attrs)}<div class="card-body">
+    ${title ? `<div class="card-subtitle">${title}</div>` : ''}
+    <div class="card-stat-value">${value}</div>${deltaHtml}${barHtml}
+  </div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['quote-testimonial'] = (attrs, body) => {
+    const author = escapeAttr(attrs.title || '');
+    const role = escapeAttr(attrs.subtitle || '');
+    const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+    return `${cardRoot(attrs)}<span class="card-quote-mark">\u201c</span>
+    <div class="card-quote-text">${bodyHtml}</div>
+    <div class="card-footer card-quote-attr">
+      <div class="card-quote-avatar"></div>
+      <div>${author ? `<div style="font-weight:700;font-size:.85rem">${author}</div>` : ''}${role ? `<div class="card-subtitle">${role}</div>` : ''}</div>
+    </div></div>\n`;
+};
+
+LAYOUT_RENDERERS['callout'] = (attrs, body) => {
+    const type = typeof attrs['callout-type'] === 'string' ? attrs['callout-type'].trim() : 'info';
+    const defaults = {info: '💡', warn: '⚠️', success: '✅', error: '❌'};
+    const icon = escapeAttr(attrs.icon || defaults[type] || '💡');
+    const title = escapeAttr(attrs.title || '');
+    const bodyHtml = marked.parse(body.trim());
+    return `${cardRoot(attrs, ['card-callout', type])}<div class="card-callout-inner card-body">
+    <div class="card-callout-icon"><span data-icon="${icon}"></span></div>
+    <div>${title ? `<div class="card-title">${title}</div>` : ''}${bodyHtml}</div>
+  </div></div>\n`;
+};
+
+LAYOUT_RENDERERS['video-media'] = (attrs, body) => {
+    const title = escapeAttr(attrs.title || '');
+    const duration = escapeAttr(attrs.duration || '');
+    const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+    const dur = duration ? `<div class="card-video-duration">${duration}</div>` : '';
+    return `${cardRoot(attrs)}<div class="card-video-thumb"${imgStyle(attrs)}>
+    <div class="card-play-btn">\u25B6</div>${dur}
+  </div>${title ? `<div class="card-header"><div class="card-title">${title}</div></div>` : ''}
+  <div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['location-map'] = (attrs, body) => {
+    const address = escapeAttr(attrs.address || '');
+    const title = escapeAttr(attrs.title || '');
+    const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+    return `${cardRoot(attrs)}<div class="card-map-placeholder">
+    <div class="card-map-grid"></div><div class="card-map-pin">📍</div>
+  </div>${title || address ? `<div class="card-body">${title ? `<div class="card-title">${title}</div>` : ''}${address ? `<div class="card-subtitle">${address}</div>` : ''}${bodyHtml}</div>` : ''}</div>\n`;
+};
+
+LAYOUT_RENDERERS['step-numbered'] = (attrs, body) => {
+    const step = escapeAttr(String(attrs.step || '1'));
+    const title = escapeAttr(attrs.title || '');
+    const gradient = escapeAttr(attrs.gradient || 'indigo');
+    const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+    return `${cardRoot(attrs)}<div class="card-step-bg card-gradient-${gradient}">
+    <div class="card-step-badge">${step}</div>
+    <div class="card-step-ghost">${step}</div>
+  </div>${title ? `<div class="card-header"><div class="card-title">${title}</div></div>` : ''}
+  <div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['corner-badge'] = (attrs, body) => {
+    const badge = escapeAttr(attrs.badge || 'New');
+    const title = escapeAttr(attrs.title || '');
+    const icon = escapeAttr(attrs.icon || '');
+    const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+    return `${cardRoot(attrs, ['card-corner-badge-wrap'])}<span class="card-corner-badge">${badge}</span>
+    ${icon ? `<div style="display:flex;justify-content:center;padding:18px 16px 4px"><span data-icon="${icon}" style="font-size:2rem"></span></div>` : ''}
+    <div class="card-body" style="text-align:center">${title ? `<div class="card-title">${title}</div>` : ''}${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['badge-band'] = (attrs, body) => {
+    const badge = escapeAttr(attrs.badge || 'New');
+    const icon = escapeAttr(attrs.icon || '');
+    const gradient = escapeAttr(attrs.gradient || 'indigo');
+    const title = escapeAttr(attrs.title || '');
+    const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+    return `${cardRoot(attrs)}<div class="card-badge-band card-gradient-${gradient}">
+    <span class="card-badge-band-label">${badge}</span>
+    ${icon ? `<span class="card-badge-band-icon" data-icon="${icon}"></span>` : ''}
+  </div>${title ? `<div class="card-header"><div class="card-title">${title}</div></div>` : ''}
+  <div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['glass-gradient-border'] = (attrs, body) => {
+    const title = escapeAttr(attrs.title || '');
+    const bodyHtml = marked.parse(body.trim());
+    return `<div class="card-glass-outer mb-4">
+    <div class="card-glass-inner">
+      ${title ? `<div class="card-title">${title}</div>` : ''}<div>${bodyHtml}</div>
+    </div></div>\n`;
+};
+
+LAYOUT_RENDERERS['rating-review'] = (attrs, body) => {
+    const rating = Math.min(5, Math.max(0, parseInt(attrs.rating || '5', 10)));
+    const stars = '\u2605'.repeat(rating) + '\u2606'.repeat(5 - rating);
+    const author = escapeAttr(attrs.title || '');
+    const role = escapeAttr(attrs.subtitle || '');
+    const verified = 'verified' in attrs;
+    const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+    return `${cardRoot(attrs)}<span class="card-stars">${stars}</span>
+    <div class="card-quote-text">${bodyHtml}</div>
+    <div class="card-footer card-quote-attr">
+      <div class="card-quote-avatar"></div>
+      <div>${author ? `<div style="font-weight:700;font-size:.82rem">${author}${verified ? '<span class="card-verified">Verified</span>' : ''}</div>` : ''}
+      ${role ? `<div class="card-subtitle">${role}</div>` : ''}</div>
+    </div></div>\n`;
+};
+
+LAYOUT_RENDERERS['tag-cloud'] = (attrs, body) => {
+    const title = escapeAttr(attrs.title || '');
+    const tagAttr = typeof attrs.tags === 'string' ? attrs.tags.split(',').map(t => t.trim()).filter(Boolean) : [];
+    const tagHtml = tagAttr.map((t, i) => `<span class="card-tag" style="${tagColorStyle(i)}">${escapeAttr(t)}</span>`).join('');
+    const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+    return `${cardRoot(attrs)}${title ? `<div class="card-header"><div class="card-title">${title}</div></div>` : ''}
+    <div class="card-tag-cloud">${tagHtml}${bodyHtml}</div></div>\n`;
+};
+
+LAYOUT_RENDERERS['timeline-entry'] = (attrs, body) => {
+    const date = escapeAttr(attrs.subtitle || '');
+    const title = escapeAttr(attrs.title || '');
+    const tag = escapeAttr(attrs.badge || '');
+    const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+    return `${cardRoot(attrs)}<div class="card-timeline-row">
+    <div class="card-timeline-side"><div class="card-timeline-dot"></div><div class="card-timeline-line"></div></div>
+    <div class="card-timeline-body">
+      ${date ? `<div class="card-timeline-date">${date}</div>` : ''}
+      ${title ? `<div class="card-title">${title}</div>` : ''}
+      ${bodyHtml}
+      ${tag ? `<span class="card-timeline-tag">${tag}</span>` : ''}
+    </div>
+  </div></div>\n`;
+};
+
+LAYOUT_RENDERERS['code-snippet'] = (attrs, body) => {
+    const lang = escapeAttr(attrs.lang || 'Code');
+    const code = body.trim()
+        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return `${cardRoot(attrs)}<div class="card-code-header">
+    <span class="card-code-lang">${lang}</span>
+  </div><div class="card-code-body"><pre><code>${code}</code></pre></div></div>\n`;
+};
+
+LAYOUT_RENDERERS['before-after'] = (attrs, body) => {
+    const title = escapeAttr(attrs.title || '');
+    const beforeRaw = parseSubTag(body, 'before') || '';
+    const afterRaw = parseSubTag(body, 'after') || '';
+    const beforeItems = beforeRaw.split(/[·\n]/).map(s => s.trim()).filter(Boolean);
+    const afterItems = afterRaw.split(/[·\n]/).map(s => s.trim()).filter(Boolean);
+    const colBefore = beforeItems.map(i => `<div class="card-compare-item"><span class="card-compare-x">\u2717</span>${escapeAttr(i)}</div>`).join('');
+    const colAfter = afterItems.map(i => `<div class="card-compare-item"><span class="card-compare-check">\u2713</span>${escapeAttr(i)}</div>`).join('');
+    return `${cardRoot(attrs)}${title ? `<div class="card-header"><div class="card-title">${title}</div></div>` : ''}
+    <div class="card-compare-grid">
+      <div class="card-compare-col"><span class="card-compare-label before">Before</span>${colBefore}</div>
+      <div class="card-compare-col"><span class="card-compare-label after">After</span>${colAfter}</div>
+    </div></div>\n`;
+};
+
+LAYOUT_RENDERERS['pricing'] = (attrs, body) => {
+    const title = escapeAttr(attrs.title || '');
+    const price = escapeAttr(attrs.price || '');
+    const period = escapeAttr(attrs.period || '');
+    const gradient = escapeAttr(attrs.gradient || 'indigo');
+    const cta = escapeAttr(attrs.footer || 'Get started');
+    const features = parseSubTagList(body, 'feature');
+    const featHtml = features.map(f => `<div class="card-pricing-feature"><span class="card-pricing-check">\u2713</span>${escapeAttr(f.content)}</div>`).join('');
+    return `${cardRoot(attrs)}<div class="card-header card-gradient-${gradient}">
+    <div class="card-subtitle">${title}</div>
+    <div class="card-stat-value" style="color:#fff">${price}</div>
+    ${period ? `<div style="opacity:.75;font-size:.8rem">${period}</div>` : ''}
+  </div><div class="card-pricing-features">${featHtml}</div>
+  <a class="card-pricing-cta" href="#">${cta}</a></div>\n`;
+};
+
+LAYOUT_RENDERERS['feature-comparison'] = (attrs, body) => {
+    const title = escapeAttr(attrs.title || '');
+    const plan = escapeAttr(attrs.subtitle || '');
+    const gradient = escapeAttr(attrs.gradient || 'indigo');
+    const features = parseSubTagList(body, 'feature');
+    const rows = features.map(f => {
+        const included = !('excluded' in f.attrs);
+        return `<div class="card-fc-row"><span>${escapeAttr(f.content)}</span><span class="${included ? 'card-fc-yes' : 'card-fc-no'}">${included ? '\u2713' : '\u2717'}</span></div>`;
+    }).join('');
+    return `${cardRoot(attrs)}<div class="card-header card-gradient-${gradient}">
+    ${plan ? `<div class="card-subtitle" style="opacity:.8;font-size:.75rem">${plan}</div>` : ''}
+    <div class="card-title">${title}</div>
+  </div>${rows}</div>\n`;
+};
+
+LAYOUT_RENDERERS['activity-feed'] = (attrs, body) => {
+    const title = escapeAttr(attrs.title || 'Activity');
+    // [activity] is self-closing: [activity user="..." action="..." time="..."]
+    const actRe = /\[activity([^\]]*)\]/gi;
+    const activities = [];
+    body.replace(actRe, (_, attrStr) => activities.push(parseShortcodeAttrs(attrStr)));
+    const items = activities.map(a => {
+        const userRaw = a.user || '';
+        const user = escapeAttr(userRaw);
+        const action = escapeAttr(a.action || '');
+        const time = escapeAttr(a.time || '');
+        const initial = userRaw.charAt(0).toUpperCase();
+        return `<div class="card-activity-item">
+      <div class="card-activity-avatar">${initial}</div>
+      <div><div style="font-size:.82rem"><strong>${user}</strong> ${action}</div>${time ? `<div style="font-size:.7rem;color:var(--dm-text-muted,#9ca3af);margin-top:2px">${time}</div>` : ''}</div>
+    </div>`;
+    }).join('');
+    return `${cardRoot(attrs)}<div class="card-header"><div class="card-title">${title}</div></div>
+    <div>${items}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['progress-goal'] = (attrs, body) => {
+    const title = escapeAttr(attrs.title || '');
+    const subtitle = escapeAttr(attrs.subtitle || '');
+    const progress = Math.min(100, Math.max(0, parseInt(attrs.progress || '0', 10)));
+    const milestones = parseSubTagList(body, 'milestone');
+    const msHtml = milestones.map(m => {
+        const done = 'done' in m.attrs;
+        return `<div class="card-milestone"><div class="card-milestone-dot ${done ? 'done' : 'pending'}"></div>${escapeAttr(m.content)}</div>`;
+    }).join('');
+    return `${cardRoot(attrs)}<div class="card-body">
+    ${title ? `<div class="card-title">${title}</div>` : ''}
+    <div style="display:flex;justify-content:space-between;font-size:.82rem;margin-top:8px">
+      <span>${subtitle}</span><strong style="color:var(--dm-primary,#6366f1)">${progress}%</strong>
+    </div>
+    <div class="card-progress-bar"><div class="card-progress-fill" style="width:${progress}%"></div></div>
+    ${msHtml}
+  </div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['file-document'] = (attrs, _body) => {
+    const filename = escapeAttr(attrs.filename || 'document');
+    const filesize = escapeAttr(attrs.filesize || '');
+    const filetype = escapeAttr((attrs.filetype || '').toUpperCase());
+    const title = escapeAttr(attrs.title || filename);
+    return `${cardRoot(attrs)}<div class="card-file-row">
+    <div class="card-file-icon">\uD83D\uDCC4<div class="card-file-ext">${filetype}</div></div>
+    <div><div class="card-title" style="font-size:.9rem">${title}</div>
+    ${filesize ? `<div class="card-subtitle">${filesize}</div>` : ''}
+    <a class="card-file-dl" href="#">\u2193 Download</a></div>
+  </div></div>\n`;
+};
+
+// ---------------------------------------------------------------------------
+// Legacy card renderer (used when no `layout` attribute is present)
+// ---------------------------------------------------------------------------
+
+/**
+ * Renders a card using the original/legacy logic. Receives pre-parsed attrs.
+ *
+ * @param {object} attrs
+ * @param {string} body
+ * @param {object} markedInstance
+ * @param {Function} escAttr
+ * @returns {string}
+ */
+function renderLegacyCard(attrs, body, markedInstance, escAttr) {
+    const strAttr = (key) => typeof attrs[key] === 'string' ? attrs[key].trim() : '';
+    const title = strAttr('title');
+    const subtitle = strAttr('subtitle');
+    const icon = strAttr('icon');
+    const footer = strAttr('footer');
+    const collapsible = attrs.collapsible === 'true';
+    const hover = 'hover' in attrs;
+    const variant = strAttr('variant');
+    const extraClass = strAttr('class');
+
+    // Root class list
+    const classes = ['card', 'mb-4'];
+    if (variant === 'primary') classes.push('card-primary');
+    if (hover) classes.push('card-hover');
+    if (collapsible) classes.push('card-collapsible');
+    if (extraClass) classes.push(extraClass);
+
+    const id = attrs.id ? ` id="${escAttr(attrs.id)}"` : '';
+    const coll = collapsible ? ' data-collapsible="true"' : '';
+
+    const iconLayout = (attrs['icon-layout'] || 'inline').trim(); // 'inline' | 'stacked'
+
+    // Extract [header]...[/header] and [footer]...[/footer] sub-tags (Pattern B)
+    let headerContent = null;
+    let footerContent = null;
+    let remaining = body;
+    remaining = remaining.replace(
+        /\[header\]([\s\S]*?)\[\/header\]/i,
+        (_, inner) => {
+            headerContent = inner.trim();
+            return '';
+        }
+    );
+    remaining = remaining.replace(
+        /\[footer\]([\s\S]*?)\[\/footer\]/i,
+        (_, inner) => {
+            footerContent = inner.trim();
+            return '';
+        }
+    );
+
+    // Header — sub-tag wins over attributes; attributes only used when no sub-tag
+    let headerHtml = '';
+    if (headerContent !== null) {
+        headerHtml = `<div class="card-header">${markedInstance.parse(headerContent)}</div>`;
+    } else if (title || icon) {
         let inner = '';
         if (icon && iconLayout === 'stacked') {
-          // Stacked: icon centred above title, all centred
-          const subtitleHtml = subtitle ? `<div class="card-subtitle">${subtitle}</div>` : '';
-          inner = `<span data-icon="${escapeAttr(icon)}"></span>` +
-            `<div class="card-title">${title}</div>${subtitleHtml}`;
-          headerHtml = `<div class="card-header card-header-icon-stacked">${inner}</div>`;
+            // Stacked: icon centred above title, all centred
+            const subtitleHtml = subtitle ? `<div class="card-subtitle">${subtitle}</div>` : '';
+            inner = `<span data-icon="${escAttr(icon)}"></span>` +
+                `<div class="card-title">${title}</div>${subtitleHtml}`;
+            headerHtml = `<div class="card-header card-header-icon-stacked">${inner}</div>`;
         } else if (icon && title) {
-          // Inline: icon left, title to its right in a flex row
-          const subtitleHtml = subtitle ? `<div class="card-subtitle">${subtitle}</div>` : '';
-          inner = `<span data-icon="${escapeAttr(icon)}"></span>` +
-            `<div class="card-header-content"><div class="card-title">${title}</div>${subtitleHtml}</div>`;
-          headerHtml = `<div class="card-header card-header-icon-inline">${inner}</div>`;
+            // Inline: icon left, title to its right in a flex row
+            const subtitleHtml = subtitle ? `<div class="card-subtitle">${subtitle}</div>` : '';
+            inner = `<span data-icon="${escAttr(icon)}"></span>` +
+                `<div class="card-header-content"><div class="card-title">${title}</div>${subtitleHtml}</div>`;
+            headerHtml = `<div class="card-header card-header-icon-inline">${inner}</div>`;
         } else {
-          // Title only (no icon)
-          inner = `<div class="card-title">${title}</div>`;
-          if (subtitle) inner += `<div class="card-subtitle">${subtitle}</div>`;
-          headerHtml = `<div class="card-header">${inner}</div>`;
+            // Title only (no icon)
+            inner = `<div class="card-title">${title}</div>`;
+            if (subtitle) inner += `<div class="card-subtitle">${subtitle}</div>`;
+            headerHtml = `<div class="card-header">${inner}</div>`;
         }
-      }
+    }
+
+    const bodyHtml = `<div class="card-body">${markedInstance.parse(remaining.trim())}</div>`;
+    const footerHtml = footerContent !== null
+        ? `<div class="card-footer">${markedInstance.parse(footerContent)}</div>`
+        : footer ? `<div class="card-footer">${footer}</div>` : '';
+
+    return `<div class="${classes.join(' ')}"${coll}${id}>${headerHtml}${bodyHtml}${footerHtml}</div>\n`;
+}
 
-        const bodyHtml = `<div class="card-body">${marked.parse(remaining.trim())}</div>`;
-        const footerHtml = footerContent !== null
-            ? `<div class="card-footer">${marked.parse(footerContent)}</div>`
-            : footer ? `<div class="card-footer">${footer}</div>` : '';
+// ---------------------------------------------------------------------------
+// processCardBlocks — routing entry point
+// ---------------------------------------------------------------------------
 
-      return `<div class="${classes.join(' ')}"${coll}${id}>${headerHtml}${bodyHtml}${footerHtml}</div>\n`;
+/**
+ * Pre-process [card] shortcodes before running through marked.
+ *
+ * Syntax:
+ *   [card title="Optional Title" collapsible="true"]
+ *   Body content (supports Markdown).
+ *   [/card]
+ *
+ * Cards with a `layout` attribute are dispatched to LAYOUT_RENDERERS[layout].
+ * Cards without (or with an unknown) layout fall back to renderLegacyCard.
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processCardBlocks(markdown) {
+    const {scrubbed, restore} = scrubCodeRegions(markdown);
+    return restore(scrubbed.replace(
+        /\[card([^\]]*)\]([\s\S]*?)\[\/card\]/gi,
+        (_, attrStr, body) => {
+            const attrs = parseShortcodeAttrs(attrStr);
+            const layout = typeof attrs.layout === 'string' ? attrs.layout.trim() : '';
+            const renderer = LAYOUT_RENDERERS[layout];
+            return renderer
+                ? renderer(attrs, body, marked, escapeAttr)
+                : renderLegacyCard(attrs, body, marked, escapeAttr);
     }
   ));
 }
@@ -943,7 +1473,10 @@ function processTabsBlocks(markdown) {
       const prefix = `dm-tab-${counter}`;
       const attrs = parseShortcodeAttrs(attrStr);
       const pillsClass = attrs.style === 'pills' ? ' tabs-pills' : '';
+        const borderedClass = attrs.style === 'bordered' ? ' tabs--bordered' : '';
+        const fadeClass = 'fade' in attrs ? ' tabs--fade' : '';
         const centeredClass = attrs.align === 'center' ? ' tabs-centered' : '';
+        const rightClass = attrs.align === 'right' ? ' tabs--right' : '';
       const idAttr = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
 
       // Parse inner [tab title="..."] items
@@ -959,20 +1492,22 @@ function processTabsBlocks(markdown) {
         // that would confuse subsequent scrubCodeRegions calls.
         const restoredBody = restore(tabBody.trim());
         const bodyHtml = marked.parse(processCardBlocks(processGridBlocks(restoredBody)));
-        items.push({title, paneId, bodyHtml, first: tabIdx === 1});
+          const icon = tabAttrs.icon ? tabAttrs.icon.trim() : '';
+          items.push({title, icon, paneId, bodyHtml, first: tabIdx === 1});
       });
 
       if (!items.length) return '';
 
-      const navItems = items.map(t =>
-        `<button class="tab-item${t.first ? ' active' : ''}">${escapeAttr(t.title)}</button>`
-      ).join('\n    ');
+        const navItems = items.map(t => {
+            const iconHtml = t.icon ? `<span data-icon="${escapeAttr(t.icon)}"></span>` : '';
+            return `<button class="tab-item${t.first ? ' active' : ''}">${iconHtml}${escapeAttr(t.title)}</button>`;
+        }).join('\n    ');
       const panes = items.map(t =>
         `<div class="tab-panel${t.first ? ' active' : ''}">${t.bodyHtml}</div>`
       ).join('\n    ');
 
       return (
-          `<div class="tabs${pillsClass}${centeredClass}"${idAttr}>\n` +
+          `<div class="tabs${pillsClass}${borderedClass}${fadeClass}${centeredClass}${rightClass}"${idAttr}>\n` +
         `  <div class="tab-list">\n    ${navItems}\n  </div>\n` +
         `  <div class="tab-content">\n    ${panes}\n  </div>\n` +
         `</div>\n`
@@ -1749,6 +2284,8 @@ function processHeroBlocks(markdown) {
       const cls = attrs.class || '';
       const id = attrs.id || '';
       const bg = attrs.bg || '';
+        const heroColor = attrs.color ? String(attrs.color) : '';
+        const minHeight = attrs['min-height'] ? String(attrs['min-height']) : '';
 
       const twinkle = 'twinkle' in attrs;
       const twinkleCount = attrs['twinkle-count'] || '';
@@ -1769,7 +2306,11 @@ function processHeroBlocks(markdown) {
 
       const styleParts = [];
       if (image) styleParts.push(`background-image:url('${escapeAttr(image)}')`);
-      if (bg) styleParts.push(`background-color:${escapeAttr(bg)}`);
+        const resolvedBg = heroColor || bg;
+        const safeBg = resolvedBg && /^[a-zA-Z0-9#(),.\s%/-]+$/.test(resolvedBg) ? resolvedBg : '';
+        if (safeBg) styleParts.push(`background-color:${safeBg}`);
+        const safeMinHeight = minHeight && /^[0-9]+(?:px|em|rem|vh|vw|%)$/.test(minHeight) ? minHeight : '';
+        if (safeMinHeight) styleParts.push(`min-height:${safeMinHeight}`);
       const style = styleParts.length ? ` style="${styleParts.join(';')}"` : '';
       const idAttr = id ? ` id="${escapeAttr(id)}"` : '';
 
@@ -1807,6 +2348,61 @@ function processHeroBlocks(markdown) {
  * @param {string} markdown
  * @returns {string}
  */
+/**
+ * Pre-process [banner] shortcodes before running through marked.
+ *
+ * Syntax:
+ *   [banner type="info" title="Note" icon="info" dismissible]
+ *   Body content (Markdown parsed).
+ *   [/banner]
+ *
+ * Supported attributes:
+ *   type        - info (default) / success / warning / danger / neutral
+ *   title       - optional heading text
+ *   icon        - Domma icon name (renders <span data-icon="...">)
+ *   dismissible - bare flag; adds dismiss button
+ *   class       - extra CSS class on the wrapper
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processBannerBlocks(markdown) {
+    return markdown.replace(
+        /\[banner([^\]]*)\]([\s\S]*?)\[\/banner\]/gi,
+        (_, attrStr, body) => {
+            const attrs = parseShortcodeAttrs(attrStr);
+            const VALID_BANNER_TYPES = new Set(['info', 'success', 'warning', 'danger', 'neutral']);
+            const type = VALID_BANNER_TYPES.has(attrs.type) ? attrs.type : 'info';
+            const title = attrs.title || '';
+            const icon = attrs.icon || '';
+            const dismissible = 'dismissible' in attrs;
+            const extraClass = attrs.class || '';
+
+            const classes = [`dm-banner`, `dm-banner--${type}`];
+            if (extraClass) classes.push(extraClass);
+
+            const iconHtml = icon
+                ? `<span class="dm-banner__icon" data-icon="${escapeAttr(icon)}"></span>\n  `
+                : '';
+            const titleHtml = title
+                ? `<strong class="dm-banner__title">${escapeAttr(title)}</strong>\n    `
+                : '';
+            const bodyHtml = marked.parse(body.trim());
+            const dismissHtml = dismissible
+                ? `\n  <button class="dm-banner__dismiss" aria-label="Dismiss">×</button>`
+                : '';
+
+            return (
+                `<div class="${classes.join(' ')}">\n` +
+                `  ${iconHtml}<div class="dm-banner__body">\n` +
+                `    ${titleHtml}${bodyHtml}` +
+                `  </div>${dismissHtml}\n` +
+                `</div>\n`
+            );
+        }
+    );
+}
+
 function processSlideoverBlocks(markdown) {
   const {scrubbed, restore} = scrubCodeRegions(markdown);
   let counter = 0;
@@ -1948,7 +2544,8 @@ export async function parseMarkdown(raw) {
     const withCta = processCtaBlocks(withLink);
   const withGrid = processGridBlocks(withCta);
   const withCard = processCardBlocks(withGrid);
-  const withSlideover = processSlideoverBlocks(withCard);
+    const withBanner = processBannerBlocks(withCard);
+    const withSlideover = processSlideoverBlocks(withBanner);
   const rendered = marked.parse(withSlideover);
 
   const sanitized = sanitizeHtml(rendered, {
@@ -1971,7 +2568,7 @@ export async function parseMarkdown(raw) {
       select: ['name', 'required', 'disabled', 'multiple'],
       option: ['value', 'selected', 'disabled'],
       optgroup: ['label', 'disabled'],
-      button: ['type', 'disabled', 'data-action', 'data-entry', 'data-confirm'],
+        button: ['type', 'disabled', 'aria-label', 'data-action', 'data-entry', 'data-confirm'],
       label: ['for'],
       fieldset: ['disabled'],
       ...extensions.attributes