@refrakt-md/runes 0.16.1 → 0.18.0

package/dist/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAA+B,MAAM,uBAAuB,CAAC;AAEtF,OAAO,KAAK,EAAE,mBAAmB,EAAmB,cAAc,EAAkB,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAS/H,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAkF9D;gFACgF;AAChF,eAAO,MAAM,UAAU,EAAE,WA6wBxB,CAAC;AAEF,sGAAsG;AACtG,eAAO,MAAM,UAAU,aAAa,CAAC;AAIrC,gEAAgE;AAChE,MAAM,WAAW,YAAY;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,YAAY,EAAE,CAAC;CACzB;AA0vCD,UAAU,YAAY;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC;AAiLD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CACnC,UAAU,EAAE,OAAO,EACnB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE;IACT,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACvC,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChI,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IACnC;;;uBAGmB;IACnB,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACrC,EACD,GAAG,EAAE,eAAe;AACpB;;yEAEyE;AACzE,cAAc,CAAC,EAAE,OAAO,EAAE,GACxB,OAAO,CAqBT;AAED,2DAA2D;AAC3D,MAAM,WAAW,wBAAwB;IACxC;;8DAE0D;IAC1D,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC;;kFAE8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;6CACyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;2EAIuE;IACvE,WAAW,CAAC,EAAE;QACb,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC/B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACpC;;;yEAGiE;QACjE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,WAAW,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;CACF;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,GAAE,wBAA6B,GAAG,mBAAmB,CA0ShG;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,EAAE,mBAA+C,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAA+B,MAAM,uBAAuB,CAAC;AAEtF,OAAO,KAAK,EAAE,mBAAmB,EAAmB,cAAc,EAAkB,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAS/H,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AA8B9D;gFACgF;AAChF,eAAO,MAAM,UAAU,EAAE,WAsfxB,CAAC;AAEF,sGAAsG;AACtG,eAAO,MAAM,UAAU,aAAa,CAAC;AAIrC,gEAAgE;AAChE,MAAM,WAAW,YAAY;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,YAAY,EAAE,CAAC;CACzB;AA0vCD,UAAU,YAAY;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC;AAsKD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CACnC,UAAU,EAAE,OAAO,EACnB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE;IACT,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACvC,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChI,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IACnC;;;uBAGmB;IACnB,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACrC,EACD,GAAG,EAAE,eAAe;AACpB;;yEAEyE;AACzE,cAAc,CAAC,EAAE,OAAO,EAAE,GACxB,OAAO,CAqBT;AAED,2DAA2D;AAC3D,MAAM,WAAW,wBAAwB;IACxC;;8DAE0D;IAC1D,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC;;kFAE8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;6CACyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;2EAIuE;IACvE,WAAW,CAAC,EAAE;QACb,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC/B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACpC;;;yEAGiE;QACjE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,WAAW,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;CACF;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,GAAE,wBAA6B,GAAG,mBAAmB,CA0ShG;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,EAAE,mBAA+C,CAAC"}

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) {
@@ -122,24 +70,26 @@ export const coreConfig = {
             block: 'codegroup',
             defaultDensity: 'compact',
             modifiers: { title: { source: 'meta', noBemClass: true }, overflow: { source: 'meta', default: 'scroll' } },
-            structure: {
-                topbar: {
-                    tag: 'div', before: true,
-                    children: [
-                        { tag: 'span', ref: 'dot' },
-                        { tag: 'span', ref: 'dot' },
-                        { tag: 'span', ref: 'dot' },
-                        { tag: 'span', ref: 'title', metaText: 'title', condition: 'title' },
-                    ],
-                },
+            // The window chrome (three dots) is pure decoration — drawn in CSS
+            // on `.rf-codegroup__topbar`. The only metadata is the optional
+            // filename `title`, a bare monospace field in the topbar bar.
+            // `renderWhenEmpty` lets `title=""` still project the topbar (window
+            // chrome, no filename); an absent title renders no topbar.
+            metaFields: {
+                title: { metaType: 'code', condition: 'title', renderWhenEmpty: true },
             },
-            sections: { topbar: 'header', title: 'title' },
-            editHints: { panel: 'code', title: 'none' },
-            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 } };
+            blocks: {
+                topbar: { fields: ['title'], layout: 'bar' },
             },
+            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' },
         },
         PageSection: { block: 'page-section' },
         TableOfContents: { block: 'toc' },
@@ -160,6 +110,12 @@ export const coreConfig = {
          * still needs an entry in the theme config so `computeUsedCssBlocks`
          * includes `badge.css` in CSS tree-shaking when a badge is rendered. */
         Badge: { block: 'badge' },
+        /* SPEC-079 composable rune handles — render the same DOM as the
+         * engine's `split` / `definition-list` layout primitives. CSS comes
+         * from the universal `[data-zone-layout=…]` selectors; per-rune
+         * blocks exist so CSS tree-shaking includes them. */
+        Bar: { block: 'bar' },
+        Deflist: { block: 'deflist' },
         /* Collection emits a sentinel during transform; the postProcess hook
          * (`resolveCollections`) fills it with queried entities. Engine config
          * provides the block name for CSS tree-shaking. */
@@ -195,45 +151,13 @@ export const coreConfig = {
         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',
@@ -265,75 +189,30 @@ export const coreConfig = {
         Budget: {
             block: 'budget',
             defaultDensity: 'full',
-            sections: { header: 'header', preamble: 'preamble', headline: 'title', footer: 'footer' },
-            editHints: { headline: 'inline', meta: 'none', 'meta-item': 'none' },
+            sections: { preamble: 'preamble', headline: 'title', footer: 'footer' },
+            editHints: { headline: 'inline' },
             modifiers: {
                 currency: { source: 'meta', default: 'USD' },
                 duration: { source: 'meta' },
                 showPerDay: { source: 'meta', default: 'true' },
                 variant: { source: 'meta', default: 'detailed' },
             },
-            structure: {
-                header: {
-                    tag: 'div', before: true,
-                    conditionAny: ['currency', 'duration'],
-                    children: [
-                        {
-                            tag: 'div', ref: 'meta',
-                            children: [
-                                { tag: 'span', ref: 'meta-item', metaText: 'currency', condition: 'currency', metaType: 'category', metaRank: 'primary' },
-                                { tag: 'span', ref: 'meta-item', metaText: 'duration', label: 'Duration:', condition: 'duration', metaType: 'temporal', metaRank: 'secondary' },
-                            ],
-                        },
-                    ],
-                },
+            // Duration reads first as a bare chip (self-evident, no label);
+            // currency is pushed to the right edge where it reads naturally
+            // against the budget breakdown below.
+            metaFields: {
+                duration: { metaType: 'category', condition: 'duration' },
+                currency: { metaType: 'category', condition: 'currency' },
             },
-            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],
-                };
+            blocks: {
+                meta: { fields: ['duration', { field: 'currency', align: 'end' }], layout: 'bar' },
+            },
+            // 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: {
@@ -354,16 +233,16 @@ export const coreConfig = {
             modifiers: { hintType: { source: 'meta', default: 'note' } },
             contextModifiers: { 'hero': 'in-hero', 'feature': 'in-feature' },
             sections: { header: 'header' },
-            editHints: { icon: 'none', title: 'none' },
-            structure: {
-                header: {
-                    tag: 'div', before: true,
-                    children: [
-                        { tag: 'span', ref: 'icon', icon: { group: 'hint', variant: 'hintType' } },
-                        { tag: 'span', ref: 'title', metaText: 'hintType' },
-                    ],
-                },
+            // Header is a single `hintType` field, icon-decorated: the value
+            // (note/warning/caution/check) selects both the glyph and the
+            // label text.
+            metaFields: {
+                hintType: { icon: { group: 'hint' } },
+            },
+            blocks: {
+                header: { fields: ['hintType'], layout: 'bar' },
             },
+            layout: { root: ['header'] },
         },
         Drawer: {
             block: 'drawer',
@@ -490,115 +369,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: {
@@ -732,31 +510,10 @@ export const coreConfig = {
             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: '*' },
@@ -766,64 +523,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,
-                };
-            },
         },
     },
 };
@@ -2004,14 +1703,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);