@refrakt-md/runes 0.17.0 → 0.19.0

package/dist/config.js

@@ -1,4 +1,4 @@
-import { isTag, makeTag, findByDataName, readMeta, resolveGap, ratioToFr, resolveOffset, resolveValign, parsePlacement } from '@refrakt-md/transform';
+import { isTag, readField, resolveGap, ratioToFr, resolveOffset, resolveValign, parsePlacement } from '@refrakt-md/transform';
 import Markdoc from '@markdoc/markdoc';
 const { Tag } = Markdoc;
 import { createComponentRenderable } from './lib/index.js';
@@ -15,58 +15,6 @@ import { resolveExpands } from './expand-pipeline.js';
 import { resolveCollections } from './collection-resolve.js';
 import { resolveRelationships } from './relationships-resolve.js';
 import { resolveAggregates } from './aggregate-resolve.js';
-// ─── Budget postTransform helpers ───
-const BUDGET_CURRENCY_SYMBOLS = {
-    USD: '$', EUR: '€', GBP: '£', JPY: '¥', CNY: '¥',
-    AUD: 'A$', CAD: 'C$', CHF: 'CHF ', SEK: 'kr', NOK: 'kr', DKK: 'kr',
-    INR: '₹', KRW: '₩', BRL: 'R$', MXN: 'MX$', ZAR: 'R',
-};
-function formatBudgetAmount(amount, symbol) {
-    const parts = (amount % 1 === 0 ? String(amount) : amount.toFixed(2)).split('.');
-    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    return symbol + parts.join('.');
-}
-function parseBudgetDays(duration) {
-    let days = 0;
-    const dayMatch = duration.match(/(\d+)\s*day/i);
-    const weekMatch = duration.match(/(\d+)\s*week/i);
-    const monthMatch = duration.match(/(\d+)\s*month/i);
-    if (dayMatch)
-        days += parseInt(dayMatch[1]);
-    if (weekMatch)
-        days += parseInt(weekMatch[1]) * 7;
-    if (monthMatch)
-        days += parseInt(monthMatch[1]) * 30;
-    if (days === 0) {
-        const num = parseInt(duration);
-        if (!isNaN(num))
-            days = num;
-    }
-    return days;
-}
-function parseBudgetAmount(str) {
-    const cleaned = str.replace(/[€$£¥₹₩\s]/g, '').replace(/,/g, '');
-    const range = cleaned.match(/^([\d.]+)\s*[-–]\s*([\d.]+)/);
-    if (range)
-        return (parseFloat(range[1]) + parseFloat(range[2])) / 2;
-    const num = parseFloat(cleaned);
-    return isNaN(num) ? 0 : num;
-}
-/** Recursively find all nodes with a specific data-rune attribute */
-function collectByRune(children, typeName) {
-    const results = [];
-    for (const c of children) {
-        if (isTag(c)) {
-            if (c.attributes?.['data-rune'] === typeName) {
-                results.push(c);
-            }
-            else {
-                results.push(...collectByRune(c.children, typeName));
-            }
-        }
-    }
-    return results;
-}
 /** Read text content from a property span child */
 function readPropText(node, prop) {
     for (const c of node.children) {
@@ -93,7 +41,7 @@ export const coreConfig = {
     runes: {
         // ─── Simple runes (block name only, engine adds BEM classes) ───
         Accordion: { block: 'accordion', defaultDensity: 'full', sections: { preamble: 'preamble', headline: 'title', blurb: 'description' }, autoLabel: pageSectionAutoLabel, editHints: { headline: 'inline', eyebrow: 'inline', blurb: 'inline' } },
-        AccordionItem: { block: 'accordion-item', parent: 'Accordion', rootAttributes: { 'data-state': 'closed' }, autoLabel: { name: 'header' }, editHints: { header: 'inline', body: 'none' } },
+        AccordionItem: { block: 'accordion-item', parent: 'Accordion', requiresParent: 'Accordion', rootAttributes: { 'data-state': 'closed' }, autoLabel: { name: 'header' }, editHints: { header: 'inline', body: 'none' } },
         Details: { block: 'details', autoLabel: { summary: 'summary' }, editHints: { summary: 'inline', body: 'none' } },
         Grid: {
             block: 'grid',
@@ -135,12 +83,13 @@ export const coreConfig = {
             },
             layout: { root: ['topbar'] },
             sections: { topbar: 'header' },
+            // Opt in to the highlight transform's `theme.code.colorScheme` cascade
+            // (topbar + tab chrome flip with the inner code). Static flag → declared
+            // via rootAttributes rather than a postTransform. The `data-code-host`
+            // consumer reads it truthily, so `"true"` is equivalent to the old
+            // valueless boolean.
+            rootAttributes: { 'data-code-host': 'true' },
             editHints: { panel: 'code' },
-            postTransform(node) {
-                // Opt in to the highlight transform's `theme.code.colorScheme`
-                // cascade so the topbar + tab chrome flip with the inner code.
-                return { ...node, attributes: { ...node.attributes, 'data-code-host': true } };
-            },
         },
         PageSection: { block: 'page-section' },
         TableOfContents: { block: 'toc' },
@@ -188,59 +137,41 @@ export const coreConfig = {
             block: 'progress',
             modifiers: { sentiment: { source: 'meta' } },
         },
-        /* card — generic content card. The `layout` meta drives the shared
-         * split layout (split.css, data-attribute-keyed); data-media-position
-         * hoists the media to a full-bleed header on mobile. Named parts
+        /* card — generic content card. The shared `media-position` modifier
+         * places the media zone above, below, or beside the content; `media-ratio`
+         * controls media's share of the row in beside layouts. Named parts
          * (media/content/body/footer/link) get rf-card__* from data-name. */
         Card: {
             block: 'card',
-            rootAttributes: { 'data-media-position': 'top' },
             modifiers: {
-                layout: { source: 'meta', default: 'stacked' },
+                'media-position': { source: 'meta', default: 'top', noBemClass: true },
+                'media-ratio': { source: 'meta', noBemClass: true },
+                valign: { source: 'meta', noBemClass: true },
+                collapse: { source: 'meta', noBemClass: true },
+            },
+            sections: { media: 'media' },
+            // SPEC-081/091: the transform emits flat slots; `layout` builds the
+            // skeleton — media beside a `content` wrapper grouping eyebrow/body/
+            // footer. A base `layout` is the prerequisite for the cover variant
+            // ({% ref "SPEC-089" /%}).
+            layout: {
+                root: ['media', 'content'],
+                content: { tag: 'div', children: ['eyebrow', 'body', 'footer'] },
+            },
+            styles: {
+                valign: { prop: '--split-valign', transform: resolveValign },
             },
         },
         Embed: {
             block: 'embed',
             defaultDensity: 'compact',
-            editHints: { fallback: 'none' },
-            postTransform(node) {
-                const block = node.attributes.class?.split(' ')[0] || 'rf-embed';
-                const embedUrl = readMeta(node, 'embedUrl') || readMeta(node, 'url') || '';
-                const title = readMeta(node, 'title') || 'Embedded content';
-                const aspect = readMeta(node, 'aspect') || '16:9';
-                const provider = readMeta(node, 'provider') || '';
-                const [w, h] = aspect.split(':').map(Number);
-                const paddingPercent = h && w ? (h / w) * 100 : 56.25;
-                // Filter out consumed meta tags
-                const contentChildren = node.children.filter(child => {
-                    if (!isTag(child) || child.name !== 'meta')
-                        return true;
-                    const prop = child.attributes['data-field'];
-                    return !['embedUrl', 'url', 'title', 'aspect', 'provider', 'type'].includes(prop);
-                });
-                const children = [];
-                if (embedUrl) {
-                    children.push(makeTag('div', { class: `${block}__wrapper`, style: `padding-bottom: ${paddingPercent}%` }, [
-                        makeTag('iframe', {
-                            src: embedUrl,
-                            title,
-                            frameborder: '0',
-                            allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
-                            allowfullscreen: '',
-                            loading: 'lazy',
-                        }, []),
-                    ]));
-                }
-                children.push(makeTag('div', { class: `${block}__fallback` }, contentChildren));
-                return {
-                    ...node,
-                    attributes: {
-                        ...node.attributes,
-                        ...(provider ? { 'data-provider': provider } : {}),
-                    },
-                    children,
-                };
+            // SPEC-081: the rune transform builds the wrapper/iframe/fallback
+            // structure directly; `provider` is a bag-only modifier that surfaces
+            // as `data-provider`. No postTransform.
+            modifiers: {
+                provider: { source: 'meta', default: 'generic', noBemClass: true },
             },
+            editHints: { fallback: 'none' },
         },
         Breadcrumb: {
             block: 'breadcrumb',
@@ -253,7 +184,7 @@ export const coreConfig = {
                 separator: { prop: '--separator', template: '"{}"' },
             },
         },
-        BreadcrumbItem: { block: 'breadcrumb-item', parent: 'Breadcrumb' },
+        BreadcrumbItem: { block: 'breadcrumb-item', parent: 'Breadcrumb', requiresParent: 'Breadcrumb' },
         Blog: {
             block: 'blog',
             defaultDensity: 'full',
@@ -290,53 +221,12 @@ export const coreConfig = {
             blocks: {
                 meta: { fields: ['duration', { field: 'currency', align: 'end' }], layout: 'bar' },
             },
-            layout: { root: ['meta', 'preamble'] },
-            postTransform(node) {
-                const block = 'rf-budget';
-                const catBlock = 'rf-budget-category';
-                // Read from data-* attributes (set by engine after consuming meta tags)
-                const currency = node.attributes['data-currency'] || 'USD';
-                const duration = node.attributes['data-duration'] || '';
-                const showPerDay = node.attributes['data-show-per-day'] !== 'false';
-                const symbol = BUDGET_CURRENCY_SYMBOLS[currency.toUpperCase()] || currency + ' ';
-                // Find all BudgetCategory children and compute totals
-                const categories = collectByRune(node.children, 'budget-category');
-                let grandTotal = 0;
-                for (const cat of categories) {
-                    // Read from data attributes set by engine from label/subtotal modifiers
-                    const label = cat.attributes['data-label'] || '';
-                    const subtotalStr = cat.attributes['data-subtotal'] || '0';
-                    const subtotal = parseFloat(subtotalStr) || 0;
-                    grandTotal += subtotal;
-                    // Inject category header with label and formatted subtotal
-                    const catHeader = makeTag('div', { class: `${catBlock}__header` }, [
-                        makeTag('span', { class: `${catBlock}__label` }, [label]),
-                        makeTag('span', { class: `${catBlock}__subtotal` }, [formatBudgetAmount(subtotal, symbol)]),
-                    ]);
-                    cat.children.unshift(catHeader);
-                }
-                // Build footer with totals
-                const footerChildren = [
-                    makeTag('div', { class: `${block}__total` }, [
-                        makeTag('span', { class: `${block}__total-label` }, ['Total']),
-                        makeTag('span', { class: `${block}__total-amount` }, [formatBudgetAmount(grandTotal, symbol)]),
-                    ]),
-                ];
-                if (duration && showPerDay) {
-                    const days = parseBudgetDays(duration);
-                    if (days > 0) {
-                        const perDay = grandTotal / days;
-                        footerChildren.push(makeTag('div', { class: `${block}__per-day` }, [
-                            makeTag('span', { class: `${block}__per-day-label` }, ['Per day']),
-                            makeTag('span', { class: `${block}__per-day-amount` }, [formatBudgetAmount(perDay, symbol)]),
-                        ]));
-                    }
-                }
-                const footer = makeTag('div', { class: `${block}__footer` }, footerChildren);
-                return {
-                    ...node,
-                    children: [...node.children, footer],
-                };
+            // SPEC-081: the transform emits flat header slots and derives the
+            // totals (footer + category headers built there); `layout` builds the
+            // preamble <header>, and the categories / footer append after it.
+            layout: {
+                root: ['meta', 'preamble'],
+                preamble: { tag: 'header', children: ['headline', 'blurb', 'image'] },
             },
         },
         BudgetCategory: {
@@ -396,12 +286,10 @@ export const coreConfig = {
             modifiers: {
                 layout: { source: 'meta', default: 'grid' },
                 lightbox: { source: 'meta', default: 'true', noBemClass: true },
-                gap: { source: 'meta', default: 'default', noBemClass: true },
                 columns: { source: 'meta', noBemClass: true },
             },
             styles: {
                 columns: '--gallery-columns',
-                gap: { prop: '--gallery-gap', transform: resolveGap },
             },
             editHints: { items: 'none' },
         },
@@ -493,115 +381,14 @@ export const coreConfig = {
         Chart: {
             block: 'chart',
             defaultDensity: 'compact',
-            editHints: { data: 'none' },
-            postTransform(node) {
-                const block = node.attributes.class?.split(' ')[0] || 'rf-chart';
-                const chartType = readMeta(node, 'type') || 'bar';
-                const title = readMeta(node, 'title') || '';
-                const dataJson = findByDataName(node, 'data')?.attributes?.content || '{}';
-                let chartData = { headers: [], rows: [] };
-                try {
-                    chartData = JSON.parse(dataJson);
-                }
-                catch { /* fallback */ }
-                const colors = [
-                    'var(--rf-color-info)', 'var(--rf-color-success)',
-                    'var(--rf-color-warning)', 'var(--rf-color-danger)',
-                    '#7c3aed', '#0891b2',
-                ];
-                const svgW = 600, svgH = 300;
-                const pad = { top: 30, right: 20, bottom: 40, left: 50 };
-                const cw = svgW - pad.left - pad.right;
-                const ch = svgH - pad.top - pad.bottom;
-                const labels = chartData.rows.map(r => r[0] || '');
-                const series = chartData.headers.slice(1);
-                const values = chartData.rows.map(r => r.slice(1).map(v => parseFloat(v) || 0));
-                const maxVal = Math.max(...values.flat(), 1);
-                const bgw = cw / Math.max(labels.length, 1);
-                const bw = bgw / Math.max(series.length + 1, 2);
-                // Build SVG children
-                const svgChildren = [];
-                // Axes
-                svgChildren.push(makeTag('line', {
-                    x1: String(pad.left), y1: String(pad.top),
-                    x2: String(pad.left), y2: String(svgH - pad.bottom),
-                    stroke: 'var(--rf-color-border)', 'stroke-width': '1',
-                }, []));
-                svgChildren.push(makeTag('line', {
-                    x1: String(pad.left), y1: String(svgH - pad.bottom),
-                    x2: String(svgW - pad.right), y2: String(svgH - pad.bottom),
-                    stroke: 'var(--rf-color-border)', 'stroke-width': '1',
-                }, []));
-                if (chartType === 'bar') {
-                    for (let i = 0; i < labels.length; i++) {
-                        for (let si = 0; si < series.length; si++) {
-                            const h = (values[i][si] / maxVal) * ch;
-                            svgChildren.push(makeTag('rect', {
-                                x: String(pad.left + i * bgw + si * bw + bw * 0.25),
-                                y: String(pad.top + ch - h),
-                                width: String(bw * 0.75),
-                                height: String(h),
-                                style: `fill: ${colors[si % colors.length]}`,
-                                rx: '2',
-                            }, []));
-                        }
-                        svgChildren.push(makeTag('text', {
-                            x: String(pad.left + i * bgw + bgw / 2),
-                            y: String(svgH - pad.bottom + 20),
-                            'text-anchor': 'middle', 'font-size': '12',
-                            fill: 'var(--rf-color-muted)',
-                        }, [labels[i]]));
-                    }
-                }
-                else if (chartType === 'line') {
-                    for (let si = 0; si < series.length; si++) {
-                        const pts = labels.map((_, i) => `${pad.left + i * bgw + bgw / 2},${pad.top + ch - (values[i][si] / maxVal) * ch}`).join(' ');
-                        svgChildren.push(makeTag('polyline', {
-                            points: pts, fill: 'none',
-                            style: `stroke: ${colors[si % colors.length]}`,
-                            'stroke-width': '2',
-                        }, []));
-                        for (let i = 0; i < labels.length; i++) {
-                            svgChildren.push(makeTag('circle', {
-                                cx: String(pad.left + i * bgw + bgw / 2),
-                                cy: String(pad.top + ch - (values[i][si] / maxVal) * ch),
-                                r: '4',
-                                style: `fill: ${colors[si % colors.length]}`,
-                            }, []));
-                        }
-                    }
-                    for (let i = 0; i < labels.length; i++) {
-                        svgChildren.push(makeTag('text', {
-                            x: String(pad.left + i * bgw + bgw / 2),
-                            y: String(svgH - pad.bottom + 20),
-                            'text-anchor': 'middle', 'font-size': '12',
-                            fill: 'var(--rf-color-muted)',
-                        }, [labels[i]]));
-                    }
-                }
-                const children = [];
-                if (title) {
-                    children.push(makeTag('figcaption', { class: `${block}__title` }, [title]));
-                }
-                children.push(makeTag('div', { class: `${block}__container` }, [
-                    makeTag('svg', {
-                        viewBox: `0 0 ${svgW} ${svgH}`,
-                        class: `${block}__svg`,
-                    }, svgChildren),
-                ]));
-                // Legend
-                if (series.length > 1) {
-                    const legendItems = series.map((name, i) => makeTag('span', { class: `${block}__legend-item` }, [
-                        makeTag('span', {
-                            class: `${block}__legend-color`,
-                            style: `background: ${colors[i % colors.length]};`,
-                        }, []),
-                        name,
-                    ]));
-                    children.push(makeTag('div', { class: `${block}__legend` }, legendItems));
-                }
-                return { ...node, children };
+            // SPEC-083: the transform emits the rf-chart element wrapping the data
+            // `<table>`; `type` / `stacked` are bag-only modifiers (→ data-type /
+            // data-stacked) the web component reads. No postTransform.
+            modifiers: {
+                type: { source: 'meta', default: 'bar', noBemClass: true },
+                stacked: { source: 'meta', noBemClass: true },
             },
+            editHints: { data: 'none' },
         },
         // ─── Text formatting & layout runes ───
         PullQuote: {
@@ -669,8 +456,8 @@ export const coreConfig = {
         },
         // ─── Interactive runes (still get BEM classes, components add behavior) ───
         TabGroup: { block: 'tabs', defaultDensity: 'full', sections: { preamble: 'preamble', headline: 'title', blurb: 'description' }, autoLabel: pageSectionAutoLabel, editHints: { headline: 'inline', eyebrow: 'inline', blurb: 'inline' } },
-        Tab: { block: 'tab', parent: 'TabGroup', rootAttributes: { 'data-state': 'inactive' }, editHints: { name: 'inline' } },
-        TabPanel: { block: 'tab-panel', parent: 'TabGroup', rootAttributes: { 'data-state': 'inactive' } },
+        Tab: { block: 'tab', parent: 'TabGroup', requiresParent: 'TabGroup', rootAttributes: { 'data-state': 'inactive' }, editHints: { name: 'inline' } },
+        TabPanel: { block: 'tab-panel', parent: 'TabGroup', requiresParent: 'TabGroup', rootAttributes: { 'data-state': 'inactive' } },
         DataTable: {
             block: 'datatable',
             defaultDensity: 'compact',
@@ -730,36 +517,15 @@ export const coreConfig = {
             },
             editHints: { panels: 'none' },
         },
-        JuxtaposePanel: { block: 'juxtapose-panel', parent: 'Juxtapose', rootAttributes: { 'data-state': 'inactive' }, editHints: { body: 'none' } },
+        JuxtaposePanel: { block: 'juxtapose-panel', parent: 'Juxtapose', requiresParent: 'Juxtapose', rootAttributes: { 'data-state': 'inactive' }, editHints: { body: 'none' } },
         Diagram: {
             block: 'diagram',
             defaultDensity: 'compact',
             editHints: { source: 'code' },
-            postTransform(node) {
-                const block = node.attributes.class?.split(' ')[0] || 'rf-diagram';
-                const language = readMeta(node, 'language') || 'mermaid';
-                const title = readMeta(node, 'title') || '';
-                const sourceMeta = findByDataName(node, 'source');
-                const source = sourceMeta?.attributes?.content || '';
-                // Build fallback HTML (visible in SSR, replaced by web component)
-                const children = [];
-                if (title) {
-                    children.push(makeTag('figcaption', { class: `${block}__title` }, [title]));
-                }
-                const containerChildren = source
-                    ? [makeTag('pre', { class: `${block}__source` }, [makeTag('code', {}, [source])])]
-                    : [];
-                children.push(makeTag('div', { class: `${block}__container` }, containerChildren));
-                // Hidden source for web component to read
-                if (source) {
-                    children.push(makeTag('div', { 'data-content': 'source', style: 'display:none' }, [source]));
-                }
-                return {
-                    ...node,
-                    name: 'rf-diagram',
-                    attributes: { ...node.attributes, 'data-language': language },
-                    children,
-                };
+            // SPEC-081: the rune transform emits the `rf-diagram` element + SSR
+            // fallback; `language` is a bag-only modifier (→ data-language).
+            modifiers: {
+                language: { source: 'meta', default: 'mermaid', noBemClass: true },
             },
         },
         Tint: { block: 'tint', parent: '*' },
@@ -769,64 +535,6 @@ export const coreConfig = {
             block: 'sandbox',
             defaultDensity: 'compact',
             editHints: { source: 'code' },
-            postTransform(node) {
-                // Read meta values
-                const content = readMeta(node, 'content') || '';
-                const framework = readMeta(node, 'framework') || '';
-                const dependencies = readMeta(node, 'dependencies') || '';
-                const label = readMeta(node, 'label') || '';
-                const height = readMeta(node, 'height') || 'auto';
-                const designTokens = readMeta(node, 'design-tokens') || '';
-                const securityMode = readMeta(node, 'security-mode') || 'trusted';
-                const allowJs = readMeta(node, 'allow-js') || 'true';
-                const sandboxOrigin = readMeta(node, 'sandbox-origin') || '';
-                // Keep non-meta children (fallback pre) and extract source panels
-                const fallbackChildren = [];
-                const sourcePanelOrigins = [];
-                for (const child of node.children) {
-                    if (!isTag(child)) {
-                        fallbackChildren.push(child);
-                        continue;
-                    }
-                    if (child.name === 'meta') {
-                        // Collect origin data from source panels
-                        if (child.attributes?.['data-field'] === 'source-panel' && child.attributes?.['data-origin']) {
-                            sourcePanelOrigins.push(`${child.attributes['data-label'] || ''}\t${child.attributes['data-origin']}`);
-                        }
-                        continue;
-                    }
-                    fallbackChildren.push(child);
-                }
-                // Wrap fallback and source in <template> tags (inert/invisible).
-                // Using <template> instead of <div> avoids HTML parser issues:
-                // when <rf-sandbox> is inside <p>, block elements like <pre> or
-                // <div> cause <p> to auto-close, pushing children out of the
-                // custom element. <template> is parsed but never rendered.
-                const children = [
-                    ...(fallbackChildren.length > 0
-                        ? [makeTag('template', { 'data-content': 'fallback' }, fallbackChildren)]
-                        : []),
-                    makeTag('template', { 'data-content': 'source' }, [content]),
-                ];
-                return {
-                    ...node,
-                    name: 'rf-sandbox',
-                    attributes: {
-                        ...node.attributes,
-                        'data-source-content': content,
-                        ...(framework ? { 'data-framework': framework } : {}),
-                        ...(dependencies ? { 'data-dependencies': dependencies } : {}),
-                        ...(label ? { 'data-label': label } : {}),
-                        'data-height': height,
-                        ...(designTokens ? { 'data-design-tokens': designTokens } : {}),
-                        ...(sourcePanelOrigins.length > 0 ? { 'data-source-origins': sourcePanelOrigins.join('\n') } : {}),
-                        'data-security-mode': securityMode,
-                        'data-allow-js': allowJs,
-                        ...(sandboxOrigin ? { 'data-sandbox-origin': sandboxOrigin } : {}),
-                    },
-                    children,
-                };
-            },
         },
     },
 };
@@ -2007,14 +1715,12 @@ function resolveBlogPosts(renderable, allPosts, ctx, pageUrl) {
     const result = mapBlogTags(renderable, (tag) => {
         if (tag.attributes['data-rune'] !== 'blog')
             return tag;
-        const folderMeta = tag.children.find((c) => Tag.isTag(c) && c.attributes['data-field'] === 'folder');
-        const sortMeta = tag.children.find((c) => Tag.isTag(c) && c.attributes['data-field'] === 'sort');
-        const filterMeta = tag.children.find((c) => Tag.isTag(c) && c.attributes['data-field'] === 'filter');
-        const limitMeta = tag.children.find((c) => Tag.isTag(c) && c.attributes['data-field'] === 'limit');
-        const folder = Tag.isTag(folderMeta) ? folderMeta.attributes.content : '';
-        const sort = Tag.isTag(sortMeta) ? sortMeta.attributes.content : 'date-desc';
-        const filterStr = Tag.isTag(filterMeta) ? filterMeta.attributes.content : '';
-        const limitStr = Tag.isTag(limitMeta) ? limitMeta.attributes.content : '';
+        // SPEC-082: read field values from the bag (bag-first, meta-fallback).
+        // The cross-page tree still carries the `data-rune-fields` attribute.
+        const folder = readField(tag, 'folder') ?? '';
+        const sort = readField(tag, 'sort') || 'date-desc';
+        const filterStr = readField(tag, 'filter') ?? '';
+        const limitStr = readField(tag, 'limit') ?? '';
         const limit = limitStr ? parseInt(limitStr, 10) : undefined;
         if (!folder) {
             ctx.warn('Blog rune missing folder attribute', pageUrl);