@the-syllabus/analysis-renderers 0.2.0

package/dist/sub-renderers/SubRenderers.js

@@ -0,0 +1,2462 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * SubRenderers — Section-level rendering components for accordion sections.
+ *
+ * These are small, focused renderers that handle one section's data within
+ * an accordion. The AccordionRenderer dispatches to these based on
+ * config.section_renderers[sectionKey].renderer_type.
+ *
+ * Available sub-renderers:
+ *   chip_grid        — Array of strings/objects → weighted chip cloud
+ *   definition_list  — Array of "Term: Definition" strings or objects → glossary layout
+ *   mini_card_list   — Array of objects → hero + grid insight cards
+ *   key_value_table  — Object or [{key, value}] → styled two-column table
+ *   prose_block      — String → formatted analysis with lede, blockquotes
+ *   stat_row         — Object → monospace stat cards
+ *   comparison_panel — Array of objects → side-by-side comparison with headers
+ *   timeline_strip   — Array of objects with stages → evolution arc with progression
+ *   evidence_trail   — Vertical chain of evidence steps with dot markers and connectors
+ *   ordered_flow     — Ordered sequence of content units with connecting line and category badges
+ *   intensity_matrix      — Dashboard rows with horizontal intensity bars for quantitative dimensions
+ *   move_repertoire       — Grouped card list with collapsible category headers and count badges
+ *   dialectical_pair      — Two-panel tension visualization for thesis/antithesis contrasts
+ *   rich_description_list — Stacked items with colored borders for paragraph-length descriptions
+ *   phase_timeline        — Connected timeline with prominent phase nodes for temporal data
+ *   distribution_summary  — Visual bar chart with dominant highlight, counts, and optional narrative
+ */
+import React, { useState } from 'react';
+import { EvidenceTrailSubRenderer } from '../components/EvidenceTrail';
+import { EnableConditionsSubRenderer, ConstrainConditionsSubRenderer } from '../components/ConditionCards';
+import { getSO } from '../types/styles';
+import { useDesignTokens } from '../tokens/DesignTokenContext';
+// ── Registry ─────────────────────────────────────────────
+const SUB_RENDERER_MAP = {
+    chip_grid: ChipGrid,
+    definition_list: DefinitionList,
+    mini_card_list: MiniCardList,
+    key_value_table: KeyValueTable,
+    prose_block: ProseBlock,
+    stat_row: StatRow,
+    comparison_panel: ComparisonPanel,
+    timeline_strip: TimelineStrip,
+    evidence_trail: EvidenceTrailSubRenderer,
+    enabling_conditions: EnableConditionsSubRenderer,
+    constraining_conditions: ConstrainConditionsSubRenderer,
+    ordered_flow: OrderedFlow,
+    intensity_matrix: IntensityMatrix,
+    move_repertoire: MoveRepertoire,
+    grouped_card_list: MoveRepertoire, // alias for generic usage
+    dialectical_pair: DialecticalPair,
+    rich_description_list: RichDescriptionList,
+    phase_timeline: PhaseTimeline,
+    distribution_summary: DistributionSummary,
+};
+export function resolveSubRenderer(rendererType) {
+    return SUB_RENDERER_MAP[rendererType] || null;
+}
+/**
+ * Auto-detect the best sub-renderer for a data shape.
+ * Used by AccordionRenderer when no section_renderer is explicitly configured.
+ *
+ * Decision tree:
+ *   string → prose_block
+ *   string[] → chip_grid
+ *   object[] with nested array fields → timeline_strip (concept evolution, stage progressions)
+ *   object[] with title+description → mini_card_list
+ *   object[] short items (≤3 fields, all short) → chip_grid
+ *   flat object (no nested arrays) → key_value_table
+ *   object with only numeric values → stat_row
+ */
+export function autoDetectSubRenderer(data) {
+    if (data === null || data === undefined)
+        return null;
+    if (typeof data === 'string')
+        return 'prose_block';
+    if (Array.isArray(data) && data.length > 0) {
+        if (data.every(d => typeof d === 'string')) {
+            // Check if strings look like "Term: Definition" → use definition_list
+            const strs = data;
+            const defCount = strs.filter(s => {
+                const colonIdx = s.indexOf(':');
+                // Term before colon (1-60 chars), definition after colon (10+ chars)
+                return colonIdx > 1 && colonIdx < 60 && s.length > colonIdx + 10;
+            }).length;
+            if (defCount >= strs.length * 0.5)
+                return 'definition_list';
+            return 'chip_grid';
+        }
+        const firstObj = data.find(d => typeof d === 'object' && d !== null);
+        if (firstObj) {
+            const entries = Object.entries(firstObj);
+            const hasArrayField = entries.some(([, v]) => Array.isArray(v) && v.length > 0);
+            const fieldCount = entries.length;
+            const shortStringCount = entries.filter(([, v]) => typeof v === 'string' && v.length < 60).length;
+            const longStringCount = entries.filter(([, v]) => typeof v === 'string' && v.length >= 60).length;
+            if (hasArrayField)
+                return 'timeline_strip';
+            if (fieldCount <= 3 && shortStringCount >= fieldCount - 1 && longStringCount === 0)
+                return 'chip_grid';
+            if (longStringCount > 0)
+                return 'mini_card_list';
+            return 'mini_card_list';
+        }
+    }
+    if (typeof data === 'object' && !Array.isArray(data)) {
+        const obj = data;
+        const entries = Object.entries(obj).filter(([, v]) => v !== null && v !== undefined);
+        if (entries.length > 0 && entries.every(([, v]) => typeof v === 'number'))
+            return 'stat_row';
+        const allScalar = entries.every(([, v]) => typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean');
+        if (allScalar)
+            return 'key_value_table';
+    }
+    return null;
+}
+// ── Helpers ──────────────────────────────────────────────
+function getField(obj, field) {
+    if (!field)
+        return '';
+    const val = obj[field];
+    if (val === null || val === undefined)
+        return '';
+    return String(val);
+}
+function getNumField(obj, field) {
+    if (!field)
+        return null;
+    const val = obj[field];
+    if (typeof val === 'number')
+        return val;
+    if (typeof val === 'string') {
+        const n = parseFloat(val);
+        return isNaN(n) ? null : n;
+    }
+    return null;
+}
+const TITLE_HINTS = ['name', 'title', 'label', 'term', 'concept', 'framework_name', 'heading'];
+const SUBTITLE_HINTS = ['type', 'category', 'kind', 'centrality', 'status', 'role', 'level'];
+const DESC_HINTS = ['description', 'summary', 'definition', 'explanation', 'text', 'content', 'methodological_signature'];
+const KEY_HINTS = ['key', 'term', 'concept', 'name', 'label'];
+const VALUE_HINTS = ['value', 'definition', 'meaning', 'description', 'explanation'];
+function autoDetectFields(sample) {
+    const result = {};
+    const entries = Object.entries(sample);
+    const shortStrings = [];
+    const longStrings = [];
+    const numericFields = [];
+    for (const [k, v] of entries) {
+        if (typeof v === 'string') {
+            if (v.length > 80)
+                longStrings.push(k);
+            else
+                shortStrings.push(k);
+        }
+        else if (typeof v === 'number') {
+            numericFields.push(k);
+        }
+    }
+    result.title = shortStrings.find(k => TITLE_HINTS.includes(k)) || shortStrings[0];
+    result.label = result.title;
+    const remaining = shortStrings.filter(k => k !== result.title);
+    result.subtitle = remaining.find(k => SUBTITLE_HINTS.includes(k)) || remaining[0];
+    result.description = longStrings.find(k => DESC_HINTS.includes(k)) || longStrings[0];
+    result.badge = numericFields[0];
+    result.count = numericFields[0];
+    result.key = shortStrings.find(k => KEY_HINTS.includes(k)) || shortStrings[0];
+    const valCandidates = [...longStrings, ...shortStrings.filter(k => k !== result.key)];
+    result.value = valCandidates.find(k => VALUE_HINTS.includes(k)) || valCandidates[0];
+    return result;
+}
+function resolveField(config, configKey, auto, autoKey) {
+    return config[configKey] || auto[autoKey];
+}
+// ── Color Utilities ──────────────────────────────────────
+function parseAccentHSL(hex) {
+    if (!hex || !hex.startsWith('#') || hex.length < 7)
+        return { h: 220, s: 55, l: 45 };
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h = 0, s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        if (max === r)
+            h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        else if (max === g)
+            h = ((b - r) / d + 2) / 6;
+        else
+            h = ((r - g) / d + 4) / 6;
+    }
+    return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+/** Render inline markdown: **bold** → accent-underlined bold, *italic* → em */
+function renderInlineMarkdown(text, accentColor) {
+    const parts = [];
+    let lastIndex = 0;
+    const regex = /(\*\*(.+?)\*\*|\*(.+?)\*)/g;
+    let match;
+    while ((match = regex.exec(text)) !== null) {
+        if (match.index > lastIndex) {
+            parts.push(text.slice(lastIndex, match.index));
+        }
+        if (match[2]) {
+            parts.push(_jsx("strong", { style: {
+                    fontWeight: 'var(--weight-semibold, 600)',
+                    textDecoration: 'underline',
+                    textDecorationColor: accentColor,
+                    textUnderlineOffset: '3px',
+                    textDecorationThickness: '2px',
+                }, children: match[2] }, match.index));
+        }
+        else if (match[3]) {
+            parts.push(_jsx("em", { children: match[3] }, match.index));
+        }
+        lastIndex = match.index + match[0].length;
+    }
+    if (lastIndex < text.length) {
+        parts.push(text.slice(lastIndex));
+    }
+    return parts.length > 0 ? parts : [text];
+}
+// ── ChipGrid ─────────────────────────────────────────────
+function ChipGrid({ data, config }) {
+    const [expandedIdx, setExpandedIdx] = React.useState(null);
+    const { getChipWeight, tokens } = useDesignTokens();
+    const so = getSO(config);
+    if (!data || !Array.isArray(data))
+        return null;
+    const firstObj = data.find(d => typeof d === 'object' && d !== null);
+    const auto = firstObj ? autoDetectFields(firstObj) : {};
+    const labelField = resolveField(config, 'label_field', auto, 'label');
+    const countField = resolveField(config, 'count_field', auto, 'count');
+    const subtitleField = resolveField(config, 'subtitle_field', auto, 'subtitle');
+    const descField = resolveField(config, 'description_field', auto, 'description');
+    const hasDetails = firstObj && ((descField && getField(firstObj, descField).length > 0) ||
+        Object.values(firstObj).some(v => Array.isArray(v)));
+    // Collect numeric values for size variation
+    const numericValues = [];
+    if (countField) {
+        data.forEach(item => {
+            if (typeof item === 'object' && item !== null) {
+                const n = getNumField(item, countField);
+                if (n !== null)
+                    numericValues.push(n);
+            }
+        });
+    }
+    const hasNumeric = numericValues.length > 0;
+    const minVal = hasNumeric ? Math.min(...numericValues) : 0;
+    const maxVal = hasNumeric ? Math.max(...numericValues) : 1;
+    const valRange = maxVal - minVal || 1;
+    // Build chip items with weight for sorting
+    const chipItems = data.map((item, i) => {
+        const label = typeof item === 'string'
+            ? item
+            : typeof item === 'object' && item !== null
+                ? getField(item, labelField)
+                    || String(Object.values(item).find(v => typeof v === 'string' && v.length < 80) || `Item ${i + 1}`)
+                : String(item);
+        const subtitle = typeof item === 'object' && item !== null && subtitleField
+            ? getField(item, subtitleField)
+            : '';
+        const count = typeof item === 'object' && item !== null && countField
+            ? getNumField(item, countField)
+            : null;
+        const weight = hasNumeric && count !== null
+            ? (count - minVal) / valRange
+            : 0.5;
+        return { item, label, subtitle, count, weight, originalIndex: i };
+    });
+    // Sort by weight descending for weighted cloud layout
+    const sortedChips = [...chipItems].sort((a, b) => b.weight - a.weight);
+    return (_jsxs("div", { children: [_jsx("div", { style: {
+                    display: 'flex', gap: 'var(--space-sm, 0.5rem)', flexWrap: 'wrap',
+                    padding: 'var(--space-md, 0.75rem)',
+                    backgroundColor: 'var(--color-surface-alt, #f8f9fa)',
+                    borderRadius: 'var(--radius-lg, 12px)',
+                    border: '1px solid var(--color-border-light, #eef0f2)',
+                    ...so?.items_container,
+                }, children: sortedChips.map(({ item, label, subtitle, count, weight, originalIndex }) => {
+                    const chipColors = getChipWeight(weight);
+                    const colors = { ...chipColors, headerBg: tokens.components.chip_header_bg, headerText: tokens.components.chip_header_text };
+                    const isExpanded = expandedIdx === originalIndex;
+                    const isClickable = hasDetails && typeof item === 'object' && item !== null;
+                    // Size variation: large chips (weight > 0.7) get bigger padding/font
+                    const sizeClass = weight > 0.7 ? 'large' : weight > 0.3 ? 'medium' : 'small';
+                    const padH = sizeClass === 'large' ? '18px' : sizeClass === 'medium' ? '14px' : '10px';
+                    const padV = sizeClass === 'large' ? '8px' : sizeClass === 'medium' ? '6px' : '5px';
+                    const fontSize = sizeClass === 'large'
+                        ? 'var(--type-body, 0.9375rem)'
+                        : sizeClass === 'medium'
+                            ? 'var(--type-caption, 0.8125rem)'
+                            : 'var(--type-label, 0.6875rem)';
+                    return (_jsxs("span", { onClick: isClickable ? () => setExpandedIdx(isExpanded ? null : originalIndex) : undefined, title: isClickable ? 'Click to expand details' : undefined, style: {
+                            display: 'inline-flex', alignItems: 'center',
+                            gap: 'var(--space-xs, 0.25rem)',
+                            padding: `${padV} ${padH}`,
+                            borderRadius: 'var(--radius-pill, 9999px)',
+                            fontSize,
+                            fontWeight: 'var(--weight-semibold, 600)',
+                            backgroundColor: isExpanded ? colors.headerBg : colors.bg,
+                            color: isExpanded ? colors.headerText : colors.text,
+                            border: `1.5px solid ${isExpanded ? colors.headerBg : colors.border}`,
+                            boxShadow: isExpanded
+                                ? 'var(--shadow-md, 0 4px 6px rgba(0,0,0,0.05))'
+                                : 'var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04))',
+                            cursor: isClickable ? 'pointer' : 'default',
+                            transition: `all var(--duration-fast, 150ms) var(--ease-out, ease)`,
+                            ...so?.chip,
+                        }, children: [_jsx("span", { style: so?.chip_label, children: label }), subtitle && (_jsx("span", { style: {
+                                    fontSize: 'var(--type-label, 0.6875rem)',
+                                    fontWeight: 'var(--weight-medium, 500)',
+                                    padding: '1px 7px', borderRadius: 'var(--radius-pill, 9999px)',
+                                    backgroundColor: isExpanded ? 'rgba(255,255,255,0.25)' : colors.headerBg,
+                                    color: colors.headerText,
+                                    letterSpacing: '0.02em',
+                                    ...so?.badge,
+                                }, children: subtitle })), count !== null && (_jsx("span", { style: {
+                                    fontSize: 'var(--type-label, 0.6875rem)',
+                                    fontWeight: 'var(--weight-bold, 700)',
+                                    backgroundColor: isExpanded ? 'rgba(255,255,255,0.25)' : colors.headerBg,
+                                    color: colors.headerText,
+                                    borderRadius: 'var(--radius-pill, 9999px)',
+                                    padding: '1px 6px',
+                                    ...so?.badge,
+                                }, children: count }))] }, originalIndex));
+                }) }), expandedIdx !== null && typeof data[expandedIdx] === 'object' && data[expandedIdx] !== null && (() => {
+                const obj = data[expandedIdx];
+                const label = getField(obj, labelField);
+                const subtitle = getField(obj, subtitleField);
+                const desc = descField ? getField(obj, descField) : '';
+                const expandChipColors = getChipWeight(0.6);
+                const colors = { ...expandChipColors, headerBg: tokens.components.chip_header_bg, headerText: tokens.components.chip_header_text };
+                const skipKeys = new Set([labelField, subtitleField, descField].filter(Boolean));
+                const remaining = Object.entries(obj).filter(([k, v]) => !skipKeys.has(k) && v !== null && v !== undefined && v !== '');
+                const arrayFields = remaining.filter(([, v]) => Array.isArray(v));
+                const scalarFields = remaining.filter(([, v]) => !Array.isArray(v) && typeof v === 'string' && v.length > 40);
+                const shortFields = remaining.filter(([, v]) => !Array.isArray(v) && (typeof v !== 'string' || v.length <= 40));
+                return (_jsxs("div", { style: {
+                        margin: 'var(--space-sm, 0.5rem) 0',
+                        borderRadius: 'var(--radius-md, 8px)',
+                        overflow: 'hidden',
+                        border: `1.5px solid ${colors.border}`,
+                        boxShadow: 'var(--shadow-md, 0 4px 6px rgba(0,0,0,0.05))',
+                        ...so?.chip_expanded,
+                    }, children: [_jsxs("div", { style: {
+                                padding: 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                                backgroundColor: colors.headerBg,
+                                display: 'flex', alignItems: 'center', gap: 'var(--space-sm, 0.5rem)',
+                            }, children: [_jsx("strong", { style: {
+                                        fontSize: 'var(--type-subheading, 1.125rem)',
+                                        color: colors.headerText,
+                                    }, children: label }), subtitle && (_jsx("span", { style: {
+                                        fontSize: 'var(--type-label, 0.6875rem)',
+                                        fontWeight: 'var(--weight-medium, 500)',
+                                        padding: '2px 8px', borderRadius: 'var(--radius-pill, 9999px)',
+                                        backgroundColor: 'rgba(255,255,255,0.2)',
+                                        color: colors.headerText,
+                                        letterSpacing: '0.02em',
+                                    }, children: subtitle })), _jsx("span", { onClick: () => setExpandedIdx(null), style: {
+                                        marginLeft: 'auto', cursor: 'pointer',
+                                        fontSize: 'var(--type-label, 0.6875rem)',
+                                        color: 'rgba(255,255,255,0.7)',
+                                        padding: '2px 8px', borderRadius: 'var(--radius-sm, 4px)',
+                                        transition: `opacity var(--duration-fast, 150ms)`,
+                                    }, children: "close" })] }), _jsxs("div", { style: {
+                                padding: 'var(--space-md, 1rem)',
+                                backgroundColor: colors.bg,
+                            }, children: [desc && (_jsx("p", { style: {
+                                        margin: '0 0 var(--space-sm, 0.5rem) 0',
+                                        fontSize: 'var(--type-body, 0.9375rem)',
+                                        color: 'var(--color-text, #1a1d23)',
+                                        lineHeight: 'var(--leading-relaxed, 1.65)',
+                                    }, children: desc })), shortFields.length > 0 && (_jsx("div", { style: {
+                                        display: 'flex', gap: 'var(--space-md, 0.75rem)', flexWrap: 'wrap',
+                                        marginBottom: arrayFields.length > 0 || scalarFields.length > 0 ? 'var(--space-sm, 0.5rem)' : 0,
+                                    }, children: shortFields.map(([k, v]) => (_jsxs("span", { style: { fontSize: 'var(--type-caption, 0.8125rem)', color: 'var(--color-text-muted, #6b7280)' }, children: [_jsxs("span", { className: "gen-inline-label", children: [k.replace(/_/g, ' '), ":"] }), ' ', String(v)] }, k))) })), scalarFields.map(([k, v]) => (_jsxs("div", { style: { marginBottom: 'var(--space-xs, 0.375rem)' }, children: [_jsx("span", { className: "gen-inline-label", style: { display: 'block', marginBottom: 'var(--space-2xs, 0.125rem)' }, children: k.replace(/_/g, ' ') }), _jsx("span", { style: {
+                                                fontSize: 'var(--type-caption, 0.8125rem)',
+                                                color: 'var(--color-text-muted, #6b7280)',
+                                                lineHeight: 'var(--leading-normal, 1.5)',
+                                            }, children: String(v) })] }, k))), arrayFields.map(([k, v]) => (_jsxs("div", { style: { marginTop: 'var(--space-xs, 0.375rem)' }, children: [_jsxs("span", { className: "gen-inline-label", style: { marginRight: 'var(--space-xs, 0.375rem)' }, children: [k.replace(/_/g, ' '), ":"] }), _jsx("span", { style: { display: 'inline-flex', gap: 'var(--space-xs, 0.25rem)', flexWrap: 'wrap' }, children: v.map((chip, ci) => (_jsx("span", { className: "gen-keyword-tag", children: String(chip) }, ci))) })] }, k)))] })] }));
+            })()] }));
+}
+// ── DefinitionList → Glossary/Vocabulary ─────────────────
+/**
+ * Purpose-built renderer for glossary/vocabulary data.
+ * Handles:
+ *   - Array of "Term: Definition" strings (splits on first colon)
+ *   - Array of objects with term/definition fields
+ * Renders as a visually rich definition list with:
+ *   - Prominent term styling with accent color
+ *   - Clear definition text
+ *   - Alternating subtle backgrounds
+ *   - Compact, scannable layout
+ */
+function DefinitionList({ data, config }) {
+    const [expandedIdx, setExpandedIdx] = React.useState(null);
+    const { tokens } = useDesignTokens();
+    const so = getSO(config);
+    // Capture mode support (threaded from AccordionRenderer)
+    const captureMode = config._captureMode;
+    const onCapture = config._onCapture;
+    const captureJobId = config._captureJobId;
+    const captureViewKey = config._captureViewKey;
+    const captureSourceType = config._captureSourceType;
+    const captureEntityId = config._captureEntityId;
+    const parentSectionKey = config._parentSectionKey;
+    const parentSectionTitle = config._parentSectionTitle;
+    if (!data || !Array.isArray(data) || data.length === 0)
+        return null;
+    // Parse items into {term, definition} pairs
+    const termField = config.term_field;
+    const defField = config.definition_field;
+    const items = data.map((item, i) => {
+        if (typeof item === 'string') {
+            // Split "Term: Definition" on first colon
+            const colonIdx = item.indexOf(':');
+            if (colonIdx > 0 && colonIdx < 80) {
+                return {
+                    term: item.slice(0, colonIdx).trim(),
+                    definition: item.slice(colonIdx + 1).trim(),
+                };
+            }
+            return { term: `Entry ${i + 1}`, definition: item };
+        }
+        if (typeof item === 'object' && item !== null) {
+            const obj = item;
+            const t = getField(obj, termField) || getField(obj, 'term') || getField(obj, 'name') || getField(obj, 'concept') || getField(obj, 'label') || '';
+            const d = getField(obj, defField) || getField(obj, 'definition') || getField(obj, 'description') || getField(obj, 'meaning') || '';
+            return { term: t || `Entry ${i + 1}`, definition: d || JSON.stringify(obj) };
+        }
+        return { term: `Entry ${i + 1}`, definition: String(item) };
+    });
+    // Color rotation for visual variety using series palette
+    const palette = tokens.primitives.series_palette;
+    const termColor = (idx) => {
+        const color = palette[idx % palette.length];
+        return {
+            termBg: color,
+            termText: 'var(--dt-text-inverse)',
+            dotColor: color,
+            hoverBg: tokens.surfaces.surface_alt,
+        };
+    };
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '2px',
+            borderRadius: 'var(--radius-lg, 12px)',
+            overflow: 'hidden',
+            border: '1px solid var(--color-border-light, #eef0f2)',
+            boxShadow: 'var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04))',
+            ...so?.items_container,
+        }, children: items.map((item, i) => {
+            const colors = termColor(i);
+            const isExpanded = expandedIdx === i;
+            const isLong = item.definition.length > 180;
+            const displayDef = !isLong || isExpanded
+                ? item.definition
+                : item.definition.slice(0, 180) + '...';
+            return (_jsxs("div", { onClick: isLong ? () => setExpandedIdx(isExpanded ? null : i) : undefined, style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'auto 1fr',
+                    gap: 0,
+                    backgroundColor: i % 2 === 0
+                        ? 'var(--color-surface, #ffffff)'
+                        : 'var(--color-surface-alt, #f8f9fa)',
+                    cursor: isLong ? 'pointer' : 'default',
+                    transition: 'background-color 150ms ease',
+                }, children: [_jsxs("div", { style: {
+                            padding: '10px 14px',
+                            display: 'flex',
+                            alignItems: 'flex-start',
+                            gap: '8px',
+                            minWidth: '200px',
+                            maxWidth: '280px',
+                            borderRight: `3px solid ${colors.dotColor}`,
+                            backgroundColor: i % 2 === 0 ? tokens.surfaces.surface_alt : tokens.surfaces.surface_inset,
+                        }, children: [_jsx("span", { style: {
+                                    display: 'inline-block',
+                                    width: '7px',
+                                    height: '7px',
+                                    borderRadius: '50%',
+                                    backgroundColor: colors.dotColor,
+                                    marginTop: '6px',
+                                    flexShrink: 0,
+                                } }), _jsx("span", { style: {
+                                    fontSize: 'var(--type-caption, 0.8125rem)',
+                                    fontWeight: 'var(--weight-bold, 700)',
+                                    color: tokens.surfaces.text_default,
+                                    lineHeight: '1.3',
+                                    letterSpacing: '0.01em',
+                                    ...so?.stat_label,
+                                }, children: item.term })] }), _jsxs("div", { style: {
+                            padding: '10px 16px',
+                            fontSize: 'var(--type-body, 0.9375rem)',
+                            fontWeight: 'var(--weight-normal, 400)',
+                            color: 'var(--color-text, #1a1d23)',
+                            lineHeight: 'var(--leading-relaxed, 1.6)',
+                            display: 'flex',
+                            alignItems: 'flex-start',
+                            gap: '8px',
+                        }, children: [_jsxs("div", { style: { flex: 1 }, children: [renderInlineMarkdown(displayDef, colors.dotColor), isLong && (_jsx("span", { className: "gen-show-more-link", style: { marginLeft: '6px' }, children: isExpanded ? 'show less' : 'show more' }))] }), captureMode && onCapture && (_jsx("button", { title: "Capture this item", onClick: e => {
+                                    e.stopPropagation();
+                                    onCapture({
+                                        source_view_key: captureViewKey || '',
+                                        source_section_key: parentSectionKey,
+                                        source_item_index: i,
+                                        source_renderer_type: 'definition_list',
+                                        content_type: 'item',
+                                        selected_text: `${item.term}: ${item.definition}`.slice(0, 500),
+                                        structured_data: data[i],
+                                        context_title: parentSectionKey
+                                            ? `${captureViewKey || 'Analysis'} > ${parentSectionTitle || ''} > ${item.term}`
+                                            : `${captureViewKey || 'Analysis'} > ${item.term}`,
+                                        source_type: (captureSourceType || 'analysis'),
+                                        entity_id: captureEntityId || captureJobId || '',
+                                        depth_level: parentSectionKey ? 'L2_element' : 'L1_section',
+                                        parent_context: parentSectionKey ? {
+                                            section_key: parentSectionKey,
+                                            section_title: parentSectionTitle || '',
+                                        } : undefined,
+                                    });
+                                }, style: {
+                                    flexShrink: 0,
+                                    background: 'none',
+                                    border: '1px solid var(--color-border, #ccc)',
+                                    borderRadius: '4px',
+                                    color: 'var(--dt-text-faint, #94a3b8)',
+                                    cursor: 'pointer',
+                                    padding: '2px 6px',
+                                    fontSize: '0.7rem',
+                                    lineHeight: 1,
+                                    marginTop: '2px',
+                                }, children: "\uD83D\uDCCC" }))] })] }, i));
+        }) }));
+}
+// ── MiniCardList → Insight Cards ─────────────────────────
+function MiniCardList({ data, config }) {
+    const [expandedCards, setExpandedCards] = React.useState(new Set());
+    const [hoveredIdx, setHoveredIdx] = React.useState(null);
+    const { tokens } = useDesignTokens();
+    // Capture mode support (threaded from AccordionRenderer)
+    const captureMode = config._captureMode;
+    const onCapture = config._onCapture;
+    const captureJobId = config._captureJobId;
+    const captureViewKey = config._captureViewKey;
+    const captureSourceType = config._captureSourceType;
+    const captureEntityId = config._captureEntityId;
+    const parentSectionKey = config._parentSectionKey;
+    const parentSectionTitle = config._parentSectionTitle;
+    if (!data || !Array.isArray(data))
+        return null;
+    const so = getSO(config);
+    const firstObj = data.find(d => typeof d === 'object' && d !== null);
+    const auto = firstObj ? autoDetectFields(firstObj) : {};
+    const titleField = resolveField(config, 'title_field', auto, 'title');
+    const subtitleField = resolveField(config, 'subtitle_field', auto, 'subtitle');
+    const badgeField = resolveField(config, 'badge_field', auto, 'badge');
+    const descriptionField = resolveField(config, 'description_field', auto, 'description');
+    // Hero card is opt-in: set hero:true in config to enable the hero pattern
+    const useHero = config.hero === true;
+    // Determine hero card: highest significance/importance/priority, or first
+    const SIGNIFICANCE_KEYS = ['significance', 'importance', 'priority', 'weight', 'relevance'];
+    let heroIdx = useHero ? 0 : -1;
+    if (useHero && data.length > 1 && firstObj) {
+        const sigField = Object.keys(firstObj).find(k => SIGNIFICANCE_KEYS.includes(k));
+        if (sigField) {
+            let maxVal = -Infinity;
+            data.forEach((item, i) => {
+                if (typeof item === 'object' && item !== null) {
+                    const val = getNumField(item, sigField);
+                    if (val !== null && val > maxVal) {
+                        maxVal = val;
+                        heroIdx = i;
+                    }
+                }
+            });
+        }
+    }
+    const toggleExpand = (idx) => {
+        setExpandedCards(prev => {
+            const next = new Set(prev);
+            if (next.has(idx))
+                next.delete(idx);
+            else
+                next.add(idx);
+            return next;
+        });
+    };
+    const DESC_TRUNCATE_LEN = Infinity; // Show full text — no truncation
+    const renderCard = (item, idx, isHero) => {
+        if (typeof item !== 'object' || item === null)
+            return null;
+        const obj = item;
+        const title = getField(obj, titleField);
+        const subtitle = getField(obj, subtitleField);
+        const badge = getField(obj, badgeField);
+        const description = getField(obj, descriptionField);
+        const shownFields = new Set([titleField, subtitleField, badgeField, descriptionField]);
+        const remaining = Object.entries(obj).filter(([k, v]) => !shownFields.has(k) && v !== null && v !== undefined && v !== '');
+        const chipFields = remaining.filter(([, v]) => Array.isArray(v) && v.every(x => typeof x === 'string'));
+        const scalarFields = remaining.filter(([, v]) => !Array.isArray(v) || !v.every(x => typeof x === 'string'));
+        const seriesColor = tokens.primitives.series_palette[idx % tokens.primitives.series_palette.length];
+        const colors = {
+            headerBg: seriesColor,
+            headerText: tokens.surfaces.text_on_accent,
+            accent: seriesColor,
+            lightBg: tokens.surfaces.surface_alt,
+            darkText: tokens.surfaces.text_default,
+            border: tokens.surfaces.border_default,
+        };
+        const isHovered = hoveredIdx === idx;
+        const isContentExpanded = expandedCards.has(idx);
+        const needsTruncation = !isHero && description.length > DESC_TRUNCATE_LEN;
+        return (_jsxs("div", { onMouseEnter: () => setHoveredIdx(idx), onMouseLeave: () => setHoveredIdx(null), style: {
+                borderRadius: 'var(--radius-md, 8px)',
+                overflow: 'hidden',
+                borderLeft: `4px solid ${colors.accent}`,
+                border: `1px solid var(--color-border, #e2e5e9)`,
+                borderLeftWidth: '4px',
+                borderLeftColor: colors.accent,
+                boxShadow: isHovered
+                    ? 'var(--shadow-md, 0 4px 6px rgba(0,0,0,0.05))'
+                    : 'var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06))',
+                transform: isHovered ? 'translateY(-2px)' : 'none',
+                transition: `box-shadow var(--duration-fast, 150ms) var(--ease-out, ease), transform var(--duration-fast, 150ms) var(--ease-out, ease)`,
+                backgroundColor: 'var(--color-surface, #ffffff)',
+                ...(isHero ? so?.hero_card : {}),
+                ...so?.card,
+            }, children: [_jsxs("div", { style: {
+                        padding: isHero
+                            ? 'var(--space-md, 1rem) var(--space-lg, 1.5rem)'
+                            : 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                        display: 'flex', alignItems: 'center', gap: 'var(--space-sm, 0.5rem)', flexWrap: 'wrap',
+                        ...so?.card_header,
+                    }, children: [title && (_jsx("strong", { style: {
+                                fontSize: isHero
+                                    ? 'var(--type-heading, 1.375rem)'
+                                    : 'var(--type-body, 0.9375rem)',
+                                fontWeight: 'var(--weight-semibold, 600)',
+                                color: 'var(--color-text, #1a1d23)',
+                                lineHeight: 'var(--leading-tight, 1.2)',
+                            }, children: title })), subtitle && (_jsx("span", { style: {
+                                fontSize: 'var(--type-label, 0.6875rem)',
+                                fontWeight: 'var(--weight-medium, 500)',
+                                color: colors.headerBg,
+                                padding: '2px 10px',
+                                borderRadius: 'var(--radius-pill, 9999px)',
+                                backgroundColor: colors.lightBg,
+                                letterSpacing: '0.02em',
+                                ...so?.badge,
+                            }, children: subtitle })), badge && (_jsx("span", { style: {
+                                fontSize: 'var(--type-label, 0.6875rem)',
+                                fontWeight: 'var(--weight-bold, 700)',
+                                padding: '2px 8px',
+                                borderRadius: 'var(--radius-pill, 9999px)',
+                                backgroundColor: colors.lightBg,
+                                color: colors.darkText,
+                                marginLeft: 'auto',
+                                ...so?.badge,
+                            }, children: badge })), captureMode && onCapture && (_jsx("button", { title: "Capture this card", onClick: e => {
+                                e.stopPropagation();
+                                onCapture({
+                                    source_view_key: captureViewKey || '',
+                                    source_item_index: idx,
+                                    source_renderer_type: 'mini_card_list',
+                                    content_type: 'card',
+                                    selected_text: `${title}: ${description}`.slice(0, 500),
+                                    structured_data: obj,
+                                    context_title: parentSectionKey
+                                        ? `${captureViewKey || 'Analysis'} > ${parentSectionTitle || ''} > ${title || `Card ${idx + 1}`}`
+                                        : `${captureViewKey || 'Analysis'} > ${title || `Card ${idx + 1}`}`,
+                                    source_type: (captureSourceType || 'analysis'),
+                                    entity_id: captureEntityId || captureJobId || '',
+                                    depth_level: parentSectionKey ? 'L2_element' : 'L1_section',
+                                    parent_context: parentSectionKey ? {
+                                        section_key: parentSectionKey,
+                                        section_title: parentSectionTitle || '',
+                                    } : undefined,
+                                });
+                            }, style: {
+                                background: 'none',
+                                border: '1px solid var(--color-border, #ccc)',
+                                borderRadius: '4px',
+                                color: 'var(--dt-text-faint, #94a3b8)',
+                                cursor: 'pointer',
+                                padding: '2px 6px',
+                                fontSize: '0.7rem',
+                                lineHeight: 1,
+                                marginLeft: badge ? '0' : 'auto',
+                            }, children: "\uD83D\uDCCC" }))] }), description && (_jsxs("div", { style: {
+                        padding: isHero
+                            ? '0 var(--space-lg, 1.5rem) var(--space-md, 1rem)'
+                            : '0 var(--space-md, 1rem) var(--space-sm, 0.5rem)',
+                        ...so?.card_body,
+                    }, children: [_jsx("p", { style: {
+                                fontSize: isHero
+                                    ? 'var(--type-body, 0.9375rem)'
+                                    : 'var(--type-caption, 0.8125rem)',
+                                color: 'var(--color-text, #1a1d23)',
+                                lineHeight: 'var(--leading-relaxed, 1.65)',
+                                margin: 0,
+                                ...so?.prose,
+                            }, children: needsTruncation && !isContentExpanded
+                                ? description.slice(0, DESC_TRUNCATE_LEN) + '...'
+                                : description }), needsTruncation && (_jsx("button", { className: "gen-show-more-link", onClick: (e) => { e.stopPropagation(); toggleExpand(idx); }, style: {
+                                marginTop: 'var(--space-xs, 0.25rem)',
+                            }, children: isContentExpanded ? 'show less' : 'show more' }))] })), scalarFields.length > 0 && (_jsx("div", { style: {
+                        padding: 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                        backgroundColor: 'var(--color-surface-alt, #f8f9fa)',
+                        borderTop: '1px solid var(--color-border-light, #eef0f2)',
+                    }, children: scalarFields.map(([key, value]) => (_jsxs("div", { style: { marginBottom: 'var(--space-2xs, 0.25rem)' }, children: [_jsxs("span", { className: "gen-inline-label", children: [key.replace(/_/g, ' '), ":"] }), _jsx("span", { style: {
+                                    marginLeft: 'var(--space-xs, 0.375rem)',
+                                    fontSize: 'var(--type-caption, 0.8125rem)',
+                                    color: 'var(--color-text-muted, #6b7280)',
+                                }, children: typeof value === 'object' ? JSON.stringify(value) : String(value) })] }, key))) })), chipFields.length > 0 && (_jsx("div", { style: {
+                        padding: 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                        backgroundColor: colors.lightBg,
+                        borderTop: '1px solid var(--color-border-light, #eef0f2)',
+                    }, children: chipFields.map(([key, value]) => (_jsxs("div", { style: { marginBottom: 'var(--space-xs, 0.375rem)' }, children: [_jsx("span", { className: "gen-inline-label", style: {
+                                    display: 'block',
+                                    marginBottom: 'var(--space-2xs, 0.25rem)',
+                                }, children: key.replace(/_/g, ' ') }), _jsx("div", { style: { display: 'flex', gap: 'var(--space-xs, 0.25rem)', flexWrap: 'wrap' }, children: value.map((v, vi) => (_jsx("span", { className: "gen-keyword-tag", children: String(v) }, vi))) })] }, key))) }))] }, idx));
+    };
+    // Single card → render as hero only if hero mode enabled
+    if (data.length === 1) {
+        return (_jsx("div", { style: { ...so?.items_container }, children: renderCard(data[0], 0, useHero) }));
+    }
+    // Default: uniform grid layout
+    if (!useHero) {
+        return (_jsx("div", { style: {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+                gap: 'var(--space-md, 1rem)',
+                ...so?.items_container,
+            }, children: data.map((item, i) => renderCard(item, i, false)) }));
+    }
+    // Multi-card layout: hero on top, rest in 2-column grid
+    return (_jsxs("div", { style: {
+            display: 'flex', flexDirection: 'column',
+            gap: 'var(--space-md, 1rem)',
+            ...so?.items_container,
+        }, children: [renderCard(data[heroIdx], heroIdx, true), data.length > 1 && (_jsx("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+                    gap: 'var(--space-md, 1rem)',
+                }, children: data.map((item, i) => {
+                    if (i === heroIdx)
+                        return null;
+                    return renderCard(item, i, false);
+                }) }))] }));
+}
+// ── KeyValueTable ────────────────────────────────────────
+function KeyValueTable({ data, config }) {
+    const { tokens } = useDesignTokens();
+    const so = getSO(config);
+    const firstObj = Array.isArray(data)
+        ? data.find(d => typeof d === 'object' && d !== null)
+        : undefined;
+    const auto = firstObj ? autoDetectFields(firstObj) : {};
+    const keyField = resolveField(config, 'key_field', auto, 'key');
+    const valueField = resolveField(config, 'value_field', auto, 'value');
+    let rows = [];
+    if (Array.isArray(data)) {
+        rows = data.map(item => {
+            if (typeof item !== 'object' || item === null)
+                return { key: '', value: String(item) };
+            const obj = item;
+            return {
+                key: getField(obj, keyField) || Object.keys(obj)[0] || '',
+                value: getField(obj, valueField) || String(Object.values(obj).find(v => typeof v === 'string' && v.length > 20) ?? Object.values(obj)[1] ?? ''),
+            };
+        });
+    }
+    else if (typeof data === 'object' && data !== null) {
+        rows = Object.entries(data).map(([k, v]) => ({
+            key: k,
+            value: typeof v === 'object' ? JSON.stringify(v) : String(v ?? ''),
+        }));
+    }
+    if (rows.length === 0)
+        return null;
+    const isNumeric = (val) => /^[\d,.]+%?$/.test(val.trim());
+    return (_jsx("div", { style: {
+            borderRadius: 'var(--radius-md, 8px)',
+            overflow: 'hidden',
+            border: '1px solid var(--color-border, #e2e5e9)',
+            boxShadow: 'var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04))',
+            ...so?.card,
+        }, children: _jsx("table", { style: { width: '100%', borderCollapse: 'collapse' }, children: _jsx("tbody", { children: rows.map((row, i) => (_jsxs("tr", { style: {
+                        backgroundColor: i % 2 === 0
+                            ? 'var(--color-surface, #ffffff)'
+                            : 'var(--color-surface-alt, #f8f9fa)',
+                    }, children: [_jsx("td", { style: {
+                                padding: 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                                fontSize: 'var(--type-label, 0.6875rem)',
+                                fontWeight: 'var(--weight-medium, 500)',
+                                color: tokens.surfaces.text_default,
+                                width: '30%', verticalAlign: 'top',
+                                textTransform: 'capitalize',
+                                letterSpacing: '0.02em',
+                                borderRight: `2px solid ${tokens.surfaces.border_accent}`,
+                                backgroundColor: i % 2 === 0
+                                    ? tokens.surfaces.surface_alt
+                                    : tokens.surfaces.surface_inset,
+                                ...so?.stat_label,
+                            }, children: row.key.replace(/_/g, ' ') }), _jsx("td", { style: {
+                                padding: 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                                fontSize: 'var(--type-body, 0.9375rem)',
+                                fontWeight: isNumeric(row.value)
+                                    ? 'var(--weight-semibold, 600)'
+                                    : 'var(--weight-normal, 400)',
+                                fontFamily: isNumeric(row.value) ? 'var(--font-mono, monospace)' : 'inherit',
+                                color: 'var(--color-text, #1a1d23)',
+                                lineHeight: 'var(--leading-normal, 1.5)',
+                                ...(isNumeric(row.value) ? so?.stat_number : {}),
+                            }, children: row.value })] }, i))) }) }) }));
+}
+function parseProseContent(text) {
+    const lines = text.split('\n');
+    const segments = [];
+    let currentParagraph = [];
+    let currentBlockquote = [];
+    function flushParagraph() {
+        if (currentParagraph.length > 0) {
+            const joined = currentParagraph.join(' ').trim();
+            if (joined)
+                segments.push({ type: 'paragraph', content: joined });
+            currentParagraph = [];
+        }
+    }
+    function flushBlockquote() {
+        if (currentBlockquote.length > 0) {
+            const joined = currentBlockquote.join(' ').trim();
+            if (joined)
+                segments.push({ type: 'blockquote', content: joined });
+            currentBlockquote = [];
+        }
+    }
+    for (const line of lines) {
+        const trimmed = line.trim();
+        if (/^(---+|\*\*\*+)$/.test(trimmed)) {
+            flushParagraph();
+            flushBlockquote();
+            segments.push({ type: 'hr', content: '' });
+            continue;
+        }
+        const headingMatch = trimmed.match(/^(#{1,3})\s+(.+)/);
+        if (headingMatch) {
+            flushParagraph();
+            flushBlockquote();
+            segments.push({ type: 'heading', content: headingMatch[2], level: headingMatch[1].length });
+            continue;
+        }
+        if (trimmed.startsWith('>')) {
+            flushParagraph();
+            currentBlockquote.push(trimmed.replace(/^>\s*/, ''));
+            continue;
+        }
+        if (!trimmed) {
+            flushBlockquote();
+            flushParagraph();
+            continue;
+        }
+        flushBlockquote();
+        currentParagraph.push(trimmed);
+    }
+    flushParagraph();
+    flushBlockquote();
+    return segments;
+}
+function ProseBlock({ data, config }) {
+    const { tokens } = useDesignTokens();
+    const so = getSO(config);
+    if (!data)
+        return null;
+    const text = typeof data === 'string'
+        ? data
+        : typeof data === 'object' && data !== null
+            ? Object.values(data).filter(v => typeof v === 'string').join('\n\n')
+            : String(data);
+    if (!text.trim())
+        return null;
+    const accentHex = so?.accent_color || tokens.components.page_accent;
+    const segments = parseProseContent(text);
+    let paragraphIndex = 0;
+    return (_jsx("div", { style: {
+            fontSize: 'var(--type-body, 0.9375rem)',
+            lineHeight: 'var(--leading-relaxed, 1.65)',
+            color: 'var(--color-text, #1a1d23)',
+            ...so?.prose,
+        }, children: segments.map((segment, i) => {
+            if (segment.type === 'hr') {
+                return (_jsx("hr", { style: {
+                        border: 'none',
+                        height: '1px',
+                        backgroundColor: 'var(--color-border, #e2e5e9)',
+                        margin: 'var(--space-lg, 1.5rem) var(--space-xl, 2rem)',
+                    } }, i));
+            }
+            if (segment.type === 'heading') {
+                const headingSizes = {
+                    1: 'var(--type-heading, 1.375rem)',
+                    2: 'var(--type-subheading, 1.125rem)',
+                    3: 'var(--type-body, 0.9375rem)',
+                };
+                return (_jsx("p", { style: {
+                        fontSize: headingSizes[segment.level || 3],
+                        fontWeight: 'var(--weight-bold, 700)',
+                        color: tokens.surfaces.text_default,
+                        marginTop: 'var(--space-lg, 1.5rem)',
+                        marginBottom: 'var(--space-sm, 0.5rem)',
+                        lineHeight: 'var(--leading-tight, 1.2)',
+                    }, children: segment.content }, i));
+            }
+            if (segment.type === 'blockquote') {
+                return (_jsx("blockquote", { style: {
+                        margin: 'var(--space-md, 1rem) 0',
+                        padding: 'var(--space-md, 1rem) var(--space-lg, 1.5rem)',
+                        borderLeft: `4px solid ${accentHex}`,
+                        backgroundColor: tokens.components.prose_blockquote_bg,
+                        borderRadius: '0 var(--radius-md, 8px) var(--radius-md, 8px) 0',
+                        fontStyle: 'italic',
+                        color: 'var(--color-text-muted, #6b7280)',
+                        lineHeight: 'var(--leading-loose, 1.8)',
+                        ...so?.prose_quote,
+                    }, children: renderInlineMarkdown(segment.content, accentHex) }, i));
+            }
+            // Paragraph: first paragraph is lede
+            const isLede = paragraphIndex === 0;
+            paragraphIndex++;
+            if (isLede) {
+                return (_jsx("p", { style: {
+                        fontSize: 'var(--type-subheading, 1.125rem)',
+                        fontWeight: 'var(--weight-medium, 500)',
+                        lineHeight: 'var(--leading-snug, 1.35)',
+                        color: 'var(--color-text, #1a1d23)',
+                        marginTop: 0,
+                        marginBottom: 'var(--space-md, 1rem)',
+                        ...so?.prose_lede,
+                    }, children: renderInlineMarkdown(segment.content, accentHex) }, i));
+            }
+            return (_jsx("p", { style: {
+                    fontSize: 'var(--type-body, 0.9375rem)',
+                    fontWeight: 'var(--weight-normal, 400)',
+                    lineHeight: 'var(--leading-relaxed, 1.65)',
+                    color: 'var(--color-text, #1a1d23)',
+                    marginTop: 0,
+                    marginBottom: 'var(--space-md, 1rem)',
+                    ...so?.prose_body,
+                }, children: renderInlineMarkdown(segment.content, accentHex) }, i));
+        }) }));
+}
+// ── StatRow ──────────────────────────────────────────────
+function StatRow({ data, config }) {
+    const { tokens } = useDesignTokens();
+    if (!data || typeof data !== 'object')
+        return null;
+    const so = getSO(config);
+    const obj = data;
+    const entries = Object.entries(obj).filter(([, v]) => v !== null && v !== undefined);
+    if (entries.length === 0)
+        return null;
+    return (_jsx("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: `repeat(${Math.min(entries.length, 4)}, 1fr)`,
+            gap: 'var(--space-md, 0.75rem)',
+            ...so?.items_container,
+        }, children: entries.map(([key, value]) => (_jsxs("div", { style: {
+                padding: 'var(--space-md, 1rem)',
+                borderRadius: 'var(--radius-md, 8px)',
+                backgroundColor: 'var(--color-surface, #ffffff)',
+                border: '1px solid var(--color-border-light, #eef0f2)',
+                boxShadow: 'var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04))',
+                textAlign: 'center',
+                ...so?.card,
+            }, children: [_jsx("div", { style: {
+                        fontSize: 'var(--type-number, 1.25rem)',
+                        fontFamily: 'var(--font-mono, monospace)',
+                        fontWeight: 'var(--weight-bold, 700)',
+                        color: tokens.components.stat_number_color,
+                        lineHeight: 'var(--leading-tight, 1.2)',
+                        ...so?.stat_number,
+                    }, children: typeof value === 'number' ? value.toLocaleString() : String(value) }), _jsx("div", { className: "gen-inline-label", style: {
+                        marginTop: 'var(--space-xs, 0.25rem)',
+                        ...so?.stat_label,
+                    }, children: key.replace(/_/g, ' ') })] }, key))) }));
+}
+// ── ComparisonPanel ──────────────────────────────────────
+function ComparisonPanel({ data, config }) {
+    const { tokens } = useDesignTokens();
+    if (!data || !Array.isArray(data))
+        return null;
+    const so = getSO(config);
+    // Capture mode support (threaded from AccordionRenderer)
+    const captureMode = config._captureMode;
+    const onCapture = config._onCapture;
+    const captureJobId = config._captureJobId;
+    const captureViewKey = config._captureViewKey;
+    const captureSourceType = config._captureSourceType;
+    const captureEntityId = config._captureEntityId;
+    const parentSectionKey = config._parentSectionKey;
+    const parentSectionTitle = config._parentSectionTitle;
+    const firstObj = data.find(d => typeof d === 'object' && d !== null);
+    const longStrings = firstObj
+        ? Object.entries(firstObj).filter(([, v]) => typeof v === 'string' && v.length > 20).map(([k]) => k)
+        : [];
+    const leftField = config.left_field || longStrings[0];
+    const rightField = config.right_field || longStrings[1];
+    const leftLabel = leftField ? leftField.replace(/_/g, ' ') : 'Left';
+    const rightLabel = rightField ? rightField.replace(/_/g, ' ') : 'Right';
+    return (_jsxs("div", { style: {
+            display: 'flex', flexDirection: 'column',
+            gap: 'var(--space-md, 0.75rem)',
+            ...so?.items_container,
+        }, children: [_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1px' }, children: [_jsx("div", { style: {
+                            padding: 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                            backgroundColor: tokens.primitives.series_palette[0],
+                            color: tokens.surfaces.text_on_accent,
+                            fontSize: 'var(--type-caption, 0.8125rem)',
+                            fontWeight: 'var(--weight-semibold, 600)',
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.06em',
+                            borderRadius: 'var(--radius-md, 8px) 0 0 0',
+                            ...so?.card_header,
+                        }, children: leftLabel }), _jsx("div", { style: {
+                            padding: 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                            backgroundColor: tokens.primitives.series_palette[1],
+                            color: 'var(--dt-text-inverse)',
+                            fontSize: 'var(--type-caption, 0.8125rem)',
+                            fontWeight: 'var(--weight-semibold, 600)',
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.06em',
+                            borderRadius: '0 var(--radius-md, 8px) 0 0',
+                            ...so?.card_header,
+                        }, children: rightLabel })] }), data.map((item, i) => {
+                if (typeof item !== 'object' || item === null)
+                    return null;
+                const obj = item;
+                const left = getField(obj, leftField);
+                const right = getField(obj, rightField);
+                const otherFields = Object.entries(obj).filter(([k, v]) => k !== leftField && k !== rightField && v !== null && v !== undefined && v !== '');
+                // Build a label for this comparison row
+                const rowLabel = otherFields.length > 0
+                    ? otherFields.map(([k, v]) => `${k.replace(/_/g, ' ')}: ${String(v)}`).join(', ')
+                    : `Row ${i + 1}`;
+                return (_jsxs("div", { style: {
+                        borderRadius: 'var(--radius-md, 8px)',
+                        border: '1px solid var(--color-border, #e2e5e9)',
+                        overflow: 'hidden',
+                        boxShadow: 'var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04))',
+                    }, children: [(otherFields.length > 0 || (captureMode && onCapture)) && (_jsxs("div", { style: {
+                                padding: 'var(--space-xs, 0.375rem) var(--space-md, 0.75rem)',
+                                backgroundColor: 'var(--color-surface-alt, #f8f9fa)',
+                                fontSize: 'var(--type-label, 0.6875rem)',
+                                color: 'var(--color-text-muted, #6b7280)',
+                                borderBottom: '1px solid var(--color-border-light, #eef0f2)',
+                                display: 'flex', gap: 'var(--space-sm, 0.5rem)', flexWrap: 'wrap',
+                                alignItems: 'center',
+                            }, children: [otherFields.map(([k, v]) => (_jsxs("span", { children: [_jsx("strong", { style: { textTransform: 'capitalize' }, children: k.replace(/_/g, ' ') }), ": ", String(v)] }, k))), captureMode && onCapture && (_jsx("button", { title: "Capture this comparison", onClick: e => {
+                                        e.stopPropagation();
+                                        onCapture({
+                                            source_view_key: captureViewKey || '',
+                                            source_section_key: parentSectionKey,
+                                            source_item_index: i,
+                                            source_renderer_type: 'comparison_panel',
+                                            content_type: 'item',
+                                            selected_text: `${leftLabel}: ${left || '—'} vs ${rightLabel}: ${right || '—'}`.slice(0, 500),
+                                            structured_data: obj,
+                                            context_title: parentSectionKey
+                                                ? `${captureViewKey || 'Analysis'} > ${parentSectionTitle || ''} > ${rowLabel}`
+                                                : `${captureViewKey || 'Analysis'} > ${rowLabel}`,
+                                            source_type: (captureSourceType || 'analysis'),
+                                            entity_id: captureEntityId || captureJobId || '',
+                                            depth_level: parentSectionKey ? 'L2_element' : 'L1_section',
+                                            parent_context: parentSectionKey ? {
+                                                section_key: parentSectionKey,
+                                                section_title: parentSectionTitle || '',
+                                            } : undefined,
+                                        });
+                                    }, style: {
+                                        marginLeft: 'auto',
+                                        flexShrink: 0,
+                                        background: 'none',
+                                        border: '1px solid var(--color-border, #ccc)',
+                                        borderRadius: '4px',
+                                        color: 'var(--dt-text-faint, #94a3b8)',
+                                        cursor: 'pointer',
+                                        padding: '2px 6px',
+                                        fontSize: '0.7rem',
+                                        lineHeight: 1,
+                                    }, children: "\uD83D\uDCCC" }))] })), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr auto 1fr' }, children: [_jsx("div", { style: {
+                                        padding: 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                                        fontSize: 'var(--type-body, 0.9375rem)',
+                                        color: 'var(--color-text, #1a1d23)',
+                                        lineHeight: 'var(--leading-normal, 1.5)',
+                                        ...so?.card_body,
+                                    }, children: left || _jsx("span", { style: { color: 'var(--color-text-faint, #9ca3af)', fontStyle: 'italic' }, children: "\u2014" }) }), _jsx("div", { style: {
+                                        width: '2px',
+                                        background: `linear-gradient(to bottom, ${tokens.surfaces.border_light}, ${tokens.surfaces.border_accent}, ${tokens.surfaces.border_light})`,
+                                    } }), _jsx("div", { style: {
+                                        padding: 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                                        fontSize: 'var(--type-body, 0.9375rem)',
+                                        color: 'var(--color-text, #1a1d23)',
+                                        lineHeight: 'var(--leading-normal, 1.5)',
+                                        ...so?.card_body,
+                                    }, children: right || _jsx("span", { style: { color: 'var(--color-text-faint, #9ca3af)', fontStyle: 'italic' }, children: "\u2014" }) })] })] }, i));
+            })] }));
+}
+// ── TimelineStrip → Evolution Arc ────────────────────────
+function TimelineStrip({ data, config }) {
+    const { tokens } = useDesignTokens();
+    const so = getSO(config);
+    const [expandedCard, setExpandedCard] = React.useState(null);
+    if (!data || !Array.isArray(data))
+        return null;
+    // TimelineStrip uses HSL-derived progressive coloring for evolution arcs.
+    // Derive accent HSL from the token system's accent color.
+    const accent = parseAccentHSL(so?.accent_color || tokens.components.page_accent);
+    const firstObj = data.find(d => typeof d === 'object' && d !== null);
+    const auto = firstObj ? autoDetectFields(firstObj) : {};
+    const labelField = resolveField(config, 'label_field', auto, 'label');
+    const stagesField = config.stages_field
+        || (firstObj ? Object.entries(firstObj).find(([, v]) => Array.isArray(v))?.[0] : undefined);
+    function renderStageNode(stage, j, totalStages) {
+        // Visual progression: size and saturation increase from left to right
+        const progress = totalStages > 1 ? j / (totalStages - 1) : 0.5;
+        const saturation = Math.max(accent.s * 0.3, 12) + progress * 30;
+        const bgLightness = 96 - progress * 8;
+        const textLightness = 30 - progress * 10;
+        const borderSat = Math.max(accent.s * 0.4, 15) + progress * 20;
+        // Size increases with progress
+        const padV = `${0.4 + progress * 0.3}rem`;
+        const padH = `${0.6 + progress * 0.4}rem`;
+        const fontSize = progress > 0.6
+            ? 'var(--type-caption, 0.8125rem)'
+            : 'var(--type-label, 0.6875rem)';
+        if (typeof stage === 'string') {
+            return (_jsx("div", { style: {
+                    padding: `${padV} ${padH}`,
+                    borderRadius: 'var(--radius-md, 8px)',
+                    backgroundColor: `hsl(${accent.h}, ${saturation}%, ${bgLightness}%)`,
+                    border: `1.5px solid hsl(${accent.h}, ${borderSat}%, ${78 - progress * 10}%)`,
+                    fontSize,
+                    fontWeight: 'var(--weight-medium, 500)',
+                    lineHeight: 'var(--leading-snug, 1.35)',
+                    color: `hsl(${accent.h}, ${Math.min(accent.s + 10, 75)}%, ${textLightness}%)`,
+                    minWidth: `${130 + progress * 40}px`,
+                    maxWidth: '280px',
+                    flexShrink: 0,
+                    boxShadow: 'var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04))',
+                    ...so?.timeline_node,
+                }, children: stage }));
+        }
+        if (typeof stage === 'object' && stage !== null) {
+            const obj = stage;
+            const stageAuto = autoDetectFields(obj);
+            const primaryLabel = getField(obj, 'form') || getField(obj, stageAuto.title)
+                || getField(obj, 'label') || getField(obj, 'name');
+            const periodLabel = getField(obj, 'period') || getField(obj, 'era') || getField(obj, 'date') || getField(obj, 'year');
+            const secondaryFields = Object.entries(obj).filter(([k, v]) => !['form', 'name', 'title', 'label', 'period', 'era', 'date', 'year'].includes(k)
+                && typeof v === 'string' && v.length > 0);
+            return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }, children: [periodLabel && (_jsx("div", { style: {
+                            fontSize: 'var(--type-label, 0.6875rem)',
+                            fontFamily: 'var(--font-mono, monospace)',
+                            fontWeight: 'var(--weight-semibold, 600)',
+                            color: `hsl(${accent.h}, ${Math.min(accent.s + 10, 70)}%, 45%)`,
+                            letterSpacing: '0.04em',
+                            marginBottom: 'var(--space-xs, 0.25rem)',
+                            textAlign: 'center',
+                        }, children: periodLabel })), _jsxs("div", { style: {
+                            padding: `${padV} ${padH}`,
+                            borderRadius: 'var(--radius-md, 8px)',
+                            backgroundColor: `hsl(${accent.h}, ${saturation}%, ${bgLightness}%)`,
+                            border: `1.5px solid hsl(${accent.h}, ${borderSat}%, ${78 - progress * 10}%)`,
+                            fontSize,
+                            lineHeight: 'var(--leading-snug, 1.35)',
+                            color: `hsl(${accent.h}, ${Math.min(accent.s + 10, 75)}%, ${textLightness}%)`,
+                            minWidth: `${130 + progress * 40}px`,
+                            maxWidth: '280px',
+                            boxShadow: 'var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04))',
+                            ...so?.timeline_node,
+                        }, children: [_jsx("div", { style: {
+                                    fontWeight: 'var(--weight-semibold, 600)',
+                                    marginBottom: secondaryFields.length > 0 ? 'var(--space-2xs, 0.25rem)' : 0,
+                                }, children: primaryLabel || 'Stage ' + (j + 1) }), secondaryFields.slice(0, 2).map(([k, v]) => (_jsxs("div", { style: {
+                                    fontSize: 'var(--type-label, 0.6875rem)',
+                                    color: `hsl(${accent.h}, ${Math.max(accent.s * 0.5, 15)}%, ${40 - progress * 5}%)`,
+                                    marginTop: 'var(--space-2xs, 0.15rem)',
+                                }, children: [_jsxs("span", { className: "gen-inline-label", children: [k.replace(/_/g, ' '), ":"] }), ' ', String(v).length > 80 ? String(v).slice(0, 77) + '...' : String(v)] }, k)))] })] }));
+        }
+        return (_jsx("div", { style: {
+                padding: `${padV} ${padH}`,
+                borderRadius: 'var(--radius-md, 8px)',
+                backgroundColor: `hsl(${accent.h}, ${saturation}%, ${bgLightness}%)`,
+                border: `1px solid hsl(${accent.h}, ${borderSat}%, ${80 - progress * 8}%)`,
+                fontSize: 'var(--type-label, 0.6875rem)',
+                color: `hsl(${accent.h}, ${Math.min(accent.s + 10, 70)}%, ${textLightness}%)`,
+                flexShrink: 0,
+                ...so?.timeline_node,
+            }, children: String(stage) }));
+    }
+    /** Render the connecting arrow between stages with gradient */
+    function renderConnector(j, totalStages) {
+        const progress = totalStages > 1 ? j / (totalStages - 1) : 0;
+        const nextProgress = totalStages > 1 ? (j + 1) / (totalStages - 1) : 1;
+        const startLight = 82 - progress * 25;
+        const endLight = 82 - nextProgress * 25;
+        const startSat = Math.max(accent.s * 0.3, 12) + progress * 25;
+        const endSat = Math.max(accent.s * 0.3, 12) + nextProgress * 25;
+        return (_jsx("div", { style: {
+                display: 'flex', alignItems: 'center',
+                flexShrink: 0, padding: '0 2px',
+                alignSelf: 'center',
+                ...so?.timeline_connector,
+            }, children: _jsx("div", { style: {
+                    width: '24px', height: '3px',
+                    background: `linear-gradient(to right, hsl(${accent.h}, ${startSat}%, ${startLight}%), hsl(${accent.h}, ${endSat}%, ${endLight}%))`,
+                    borderRadius: '2px',
+                    position: 'relative',
+                }, children: _jsx("div", { style: {
+                        position: 'absolute', right: '-5px', top: '-4px',
+                        width: 0, height: 0,
+                        borderTop: '5.5px solid transparent',
+                        borderBottom: '5.5px solid transparent',
+                        borderLeft: `8px solid hsl(${accent.h}, ${endSat}%, ${endLight}%)`,
+                    } }) }) }));
+    }
+    return (_jsx("div", { style: {
+            display: 'flex', flexDirection: 'column',
+            gap: 'var(--space-lg, 1.25rem)',
+            ...so?.items_container,
+        }, children: data.map((item, i) => {
+            if (typeof item !== 'object' || item === null)
+                return null;
+            const obj = item;
+            const label = getField(obj, labelField);
+            const stages = stagesField ? obj[stagesField] : null;
+            const cardId = `${label || i}`;
+            const isExpanded = expandedCard === cardId;
+            const metaFields = Object.entries(obj).filter(([k, v]) => k !== labelField && k !== stagesField && v !== null && v !== undefined && v !== '');
+            return (_jsxs("div", { style: {
+                    minWidth: 0, overflow: 'hidden',
+                    borderRadius: 'var(--radius-lg, 12px)',
+                    border: '1px solid var(--color-border, #e2e5e9)',
+                    backgroundColor: 'var(--color-surface, #ffffff)',
+                    boxShadow: 'var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06))',
+                    ...so?.card,
+                }, children: [label && (_jsxs("div", { onClick: () => setExpandedCard(isExpanded ? null : cardId), style: {
+                            fontSize: 'var(--type-body, 0.9375rem)',
+                            fontWeight: 'var(--weight-semibold, 600)',
+                            color: 'var(--color-text, #1a1d23)',
+                            padding: 'var(--space-sm, 0.625rem) var(--space-md, 1rem)',
+                            backgroundColor: 'var(--color-surface-alt, #f8f9fa)',
+                            borderBottom: '1px solid var(--color-border-light, #eef0f2)',
+                            cursor: metaFields.length > 0 ? 'pointer' : 'default',
+                            display: 'flex', alignItems: 'center',
+                            gap: 'var(--space-sm, 0.5rem)',
+                            ...so?.card_header,
+                        }, children: [label, Array.isArray(stages) && (_jsxs("span", { style: {
+                                    fontSize: 'var(--type-label, 0.6875rem)',
+                                    fontWeight: 'var(--weight-medium, 500)',
+                                    color: 'var(--color-text-faint, #9ca3af)',
+                                    backgroundColor: tokens.surfaces.surface_inset,
+                                    padding: '2px 8px',
+                                    borderRadius: 'var(--radius-pill, 9999px)',
+                                    ...so?.badge,
+                                }, children: [stages.length, " stages"] }))] })), Array.isArray(stages) && stages.length > 0 && (_jsx("div", { style: {
+                            padding: 'var(--space-md, 0.75rem)',
+                            overflowX: 'auto',
+                        }, children: _jsx("div", { style: {
+                                display: 'flex', alignItems: 'flex-end',
+                                gap: 0,
+                                minWidth: 'min-content',
+                            }, children: stages.map((stage, j) => (_jsxs(React.Fragment, { children: [renderStageNode(stage, j, stages.length), j < stages.length - 1 && renderConnector(j, stages.length)] }, j))) }) })), isExpanded && metaFields.length > 0 && (_jsx("div", { style: {
+                            padding: 'var(--space-sm, 0.625rem) var(--space-md, 1rem)',
+                            borderTop: '1px solid var(--color-border-light, #eef0f2)',
+                            backgroundColor: 'var(--color-surface, #ffffff)',
+                        }, children: metaFields.map(([k, v]) => (_jsxs("div", { style: { marginBottom: 'var(--space-2xs, 0.25rem)' }, children: [_jsxs("span", { className: "gen-inline-label", children: [k.replace(/_/g, ' '), ":"] }), _jsx("span", { style: {
+                                        marginLeft: 'var(--space-xs, 0.375rem)',
+                                        fontSize: 'var(--type-caption, 0.8125rem)',
+                                        color: 'var(--color-text, #1a1d23)',
+                                    }, children: typeof v === 'object' ? JSON.stringify(v, null, 2) : String(v) })] }, k))) })), (!stages || !Array.isArray(stages) || stages.length === 0) && metaFields.length > 0 && (_jsx("div", { style: {
+                            padding: 'var(--space-sm, 0.625rem) var(--space-md, 1rem)',
+                            fontSize: 'var(--type-caption, 0.8125rem)',
+                            color: 'var(--color-text-muted, #6b7280)',
+                        }, children: metaFields.map(([k, v]) => (_jsxs("div", { style: { marginBottom: 'var(--space-2xs, 0.25rem)' }, children: [_jsxs("strong", { style: {
+                                        textTransform: 'capitalize',
+                                        fontSize: 'var(--type-label, 0.6875rem)',
+                                        color: 'var(--color-text-muted, #6b7280)',
+                                    }, children: [k.replace(/_/g, ' '), ":"] }), ' ', typeof v === 'string' ? v : JSON.stringify(v)] }, k))) }))] }, i));
+        }) }));
+}
+// ── IntensityMatrix → Dashboard-style Intensity Bars ────────
+//
+// Each row: title + category badge + horizontal bar + expandable description.
+// Bars width proportional to ordinal intensity level. Sorted by intensity (highest first).
+//
+// Config:
+//   title_field       — row title
+//   subtitle_field    — category badge
+//   intensity_field   — ordinal intensity value
+//   intensity_scale   — ordered levels, e.g. ['low', 'medium', 'high']
+//   description_field — expandable text
+//   sort_by_intensity — sort by intensity descending (default true)
+function IntensityMatrix({ data, config }) {
+    const [expandedIdx, setExpandedIdx] = React.useState(new Set());
+    const { tokens, getSemanticColor } = useDesignTokens();
+    const captureMode = config._captureMode;
+    const onCapture = config._onCapture;
+    const captureJobId = config._captureJobId;
+    const captureViewKey = config._captureViewKey;
+    const captureSourceType = config._captureSourceType;
+    const captureEntityId = config._captureEntityId;
+    const parentSectionKey = config._parentSectionKey;
+    const parentSectionTitle = config._parentSectionTitle;
+    if (!data || !Array.isArray(data) || data.length === 0)
+        return null;
+    const titleField = config.title_field || 'name';
+    const subtitleField = config.subtitle_field || undefined;
+    const intensityField = config.intensity_field || 'intensity';
+    const descField = config.description_field || 'description';
+    const sortByIntensity = config.sort_by_intensity !== false;
+    // Build intensity scale from config or infer from data
+    const configScale = config.intensity_scale;
+    const intensityScale = configScale
+        || (() => {
+            const vals = new Set();
+            data.forEach(item => {
+                if (typeof item === 'object' && item !== null) {
+                    const v = item[intensityField];
+                    if (typeof v === 'string')
+                        vals.add(v.toLowerCase());
+                }
+            });
+            // Default ordering heuristic
+            const ordered = ['rare', 'low', 'minimal', 'occasional', 'moderate', 'medium', 'frequent', 'significant', 'high', 'very_high', 'critical'];
+            const found = ordered.filter(l => vals.has(l));
+            return found.length > 0 ? found : Array.from(vals);
+        })();
+    // Map intensity value to 0–1 fraction
+    const getIntensityFraction = (val) => {
+        const lower = val.toLowerCase().replace(/\s+/g, '_');
+        const idx = intensityScale.findIndex(s => s.toLowerCase().replace(/\s+/g, '_') === lower);
+        if (idx === -1)
+            return 0.5;
+        if (intensityScale.length <= 1)
+            return 1;
+        return (idx + 1) / intensityScale.length;
+    };
+    // Color for intensity bar — use semantic severity or series palette
+    const getBarColor = (fraction) => {
+        const palette = tokens.primitives.series_palette;
+        if (fraction >= 0.8) {
+            const sem = getSemanticColor('severity', 'high');
+            return sem?.bg || palette[0];
+        }
+        if (fraction >= 0.5) {
+            const sem = getSemanticColor('severity', 'medium');
+            return sem?.bg || palette[4];
+        }
+        const sem = getSemanticColor('severity', 'low');
+        return sem?.bg || palette[2];
+    };
+    const getBarTextColor = (fraction) => {
+        if (fraction >= 0.8) {
+            const sem = getSemanticColor('severity', 'high');
+            return sem?.text || tokens.surfaces.text_default;
+        }
+        if (fraction >= 0.5) {
+            const sem = getSemanticColor('severity', 'medium');
+            return sem?.text || tokens.surfaces.text_default;
+        }
+        const sem = getSemanticColor('severity', 'low');
+        return sem?.text || tokens.surfaces.text_default;
+    };
+    // Prepare and optionally sort items
+    const items = data
+        .map((item, origIdx) => {
+        if (typeof item !== 'object' || item === null)
+            return null;
+        const obj = item;
+        const intensityVal = getField(obj, intensityField);
+        const fraction = getIntensityFraction(intensityVal);
+        return { obj, origIdx, intensityVal, fraction };
+    })
+        .filter(Boolean);
+    if (sortByIntensity) {
+        items.sort((a, b) => b.fraction - a.fraction);
+    }
+    const toggleExpand = (idx) => {
+        setExpandedIdx(prev => {
+            const next = new Set(prev);
+            if (next.has(idx))
+                next.delete(idx);
+            else
+                next.add(idx);
+            return next;
+        });
+    };
+    const DESC_LIMIT = Infinity; // Show full text — no truncation
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: items.map((item, displayIdx) => {
+            const { obj, origIdx, intensityVal, fraction } = item;
+            const title = getField(obj, titleField);
+            const subtitle = subtitleField ? getField(obj, subtitleField) : '';
+            const desc = getField(obj, descField);
+            const isExpanded = expandedIdx.has(displayIdx);
+            const needsTruncation = desc.length > DESC_LIMIT;
+            const barColor = getBarColor(fraction);
+            const barTextColor = getBarTextColor(fraction);
+            const barWidth = Math.max(fraction * 100, 8); // minimum 8% for visibility
+            return (_jsxs("div", { style: {
+                    backgroundColor: 'var(--color-surface, #ffffff)',
+                    borderLeft: `3px solid ${barColor}`,
+                    padding: '0',
+                    borderRadius: '0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0',
+                }, children: [_jsxs("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: '1fr auto minmax(80px, 160px)',
+                            gap: 'var(--space-sm, 0.5rem)',
+                            alignItems: 'center',
+                            padding: 'var(--space-xs, 0.375rem) var(--space-md, 1rem)',
+                            cursor: desc ? 'pointer' : 'default',
+                        }, onClick: () => desc && toggleExpand(displayIdx), children: [_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', gap: 'var(--space-sm, 0.5rem)', flexWrap: 'wrap', minWidth: 0 }, children: [_jsx("span", { style: {
+                                            fontWeight: 600,
+                                            fontSize: 'var(--type-body, 0.9375rem)',
+                                            color: 'var(--color-text, #1a1d23)',
+                                            lineHeight: 'var(--leading-snug, 1.4)',
+                                        }, children: title }), subtitle && (_jsx("span", { style: {
+                                            fontSize: 'var(--type-label, 0.6875rem)',
+                                            fontWeight: 500,
+                                            color: 'var(--color-text-muted, #6b7280)',
+                                            padding: '1px 8px',
+                                            borderRadius: 'var(--radius-pill, 9999px)',
+                                            backgroundColor: 'var(--color-surface-alt, #f8f9fa)',
+                                            whiteSpace: 'nowrap',
+                                        }, children: subtitle })), captureMode && onCapture && (_jsx("button", { title: "Capture this item", onClick: e => {
+                                            e.stopPropagation();
+                                            onCapture({
+                                                source_view_key: captureViewKey || '',
+                                                source_item_index: origIdx,
+                                                source_renderer_type: 'intensity_matrix',
+                                                content_type: 'item',
+                                                selected_text: `${title} [${intensityVal}]: ${desc}`.slice(0, 500),
+                                                structured_data: obj,
+                                                context_title: parentSectionKey
+                                                    ? `${captureViewKey || 'Analysis'} > ${parentSectionTitle || ''} > ${title}`
+                                                    : `${captureViewKey || 'Analysis'} > ${title}`,
+                                                source_type: (captureSourceType || 'analysis'),
+                                                entity_id: captureEntityId || captureJobId || '',
+                                                depth_level: parentSectionKey ? 'L2_element' : 'L1_section',
+                                                parent_context: parentSectionKey ? {
+                                                    section_key: parentSectionKey,
+                                                    section_title: parentSectionTitle || '',
+                                                } : undefined,
+                                            });
+                                        }, style: {
+                                            background: 'none',
+                                            border: '1px solid var(--color-border, #ccc)',
+                                            borderRadius: '4px',
+                                            color: 'var(--dt-text-faint, #94a3b8)',
+                                            cursor: 'pointer',
+                                            padding: '2px 6px',
+                                            fontSize: '0.7rem',
+                                            lineHeight: 1,
+                                        }, children: "\uD83D\uDCCC" }))] }), _jsx("span", { style: {
+                                    fontSize: 'var(--type-label, 0.6875rem)',
+                                    fontWeight: 700,
+                                    color: barTextColor,
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.04em',
+                                    whiteSpace: 'nowrap',
+                                }, children: intensityVal.replace(/_/g, ' ') }), _jsx("div", { style: {
+                                    height: '8px',
+                                    backgroundColor: 'var(--color-surface-alt, #f0f1f3)',
+                                    borderRadius: '4px',
+                                    overflow: 'hidden',
+                                }, children: _jsx("div", { style: {
+                                        width: `${barWidth}%`,
+                                        height: '100%',
+                                        backgroundColor: barColor,
+                                        borderRadius: '4px',
+                                        transition: 'width 300ms ease',
+                                    } }) })] }), desc && isExpanded && (_jsx("div", { style: {
+                            padding: '0 var(--space-md, 1rem) var(--space-sm, 0.5rem)',
+                            fontSize: 'var(--type-caption, 0.8125rem)',
+                            color: 'var(--color-text-muted, #6b7280)',
+                            lineHeight: 'var(--leading-relaxed, 1.65)',
+                            borderTop: '1px solid var(--color-border-light, #eef0f2)',
+                            marginTop: '2px',
+                            paddingTop: 'var(--space-xs, 0.375rem)',
+                        }, children: desc })), desc && !isExpanded && needsTruncation && (_jsxs("div", { style: {
+                            padding: '0 var(--space-md, 1rem) var(--space-xs, 0.25rem)',
+                            fontSize: 'var(--type-label, 0.6875rem)',
+                            color: 'var(--color-text-faint, #9ca3af)',
+                        }, children: [desc.slice(0, DESC_LIMIT), "..."] }))] }, origIdx));
+        }) }));
+}
+// ── MoveRepertoire → Grouped Intellectual Gestures ──────────
+//
+// Items grouped by a category field. Each group has a colored header with
+// count badge. Items within groups are compact rows. Groups are collapsible.
+//
+// Config:
+//   title_field       — item title
+//   group_field       — field to group by
+//   description_field — item description
+//   badge_field       — optional extra badge per item
+//   collapse_groups   — start collapsed (default false)
+function MoveRepertoire({ data, config }) {
+    const { tokens } = useDesignTokens();
+    const [collapsedGroups, setCollapsedGroups] = React.useState(new Set());
+    const [expandedDescs, setExpandedDescs] = React.useState(new Set());
+    const [initialized, setInitialized] = React.useState(false);
+    const captureMode = config._captureMode;
+    const onCapture = config._onCapture;
+    const captureJobId = config._captureJobId;
+    const captureViewKey = config._captureViewKey;
+    const captureSourceType = config._captureSourceType;
+    const captureEntityId = config._captureEntityId;
+    const parentSectionKey = config._parentSectionKey;
+    const parentSectionTitle = config._parentSectionTitle;
+    if (!data || !Array.isArray(data) || data.length === 0)
+        return null;
+    const titleField = config.title_field || 'name';
+    const groupField = config.group_field || 'type';
+    const descField = config.description_field || 'description';
+    const badgeField = config.badge_field || undefined;
+    const startCollapsed = config.collapse_groups === true;
+    // Group items
+    const groups = new Map();
+    data.forEach((item, idx) => {
+        if (typeof item !== 'object' || item === null)
+            return;
+        const obj = item;
+        const groupVal = getField(obj, groupField) || 'Other';
+        if (!groups.has(groupVal))
+            groups.set(groupVal, []);
+        groups.get(groupVal).push({ obj, origIdx: idx });
+    });
+    // Initialize collapsed state on first render with data
+    if (!initialized && startCollapsed && groups.size > 0) {
+        setCollapsedGroups(new Set(groups.keys()));
+        setInitialized(true);
+    }
+    const toggleGroup = (group) => {
+        setCollapsedGroups(prev => {
+            const next = new Set(prev);
+            if (next.has(group))
+                next.delete(group);
+            else
+                next.add(group);
+            return next;
+        });
+    };
+    const toggleDesc = (key) => {
+        setExpandedDescs(prev => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    };
+    const palette = tokens.primitives.series_palette;
+    const DESC_LIMIT = Infinity; // Show full text — no truncation
+    const groupEntries = Array.from(groups.entries());
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-md, 1rem)' }, children: groupEntries.map(([groupName, items], groupIdx) => {
+            const isCollapsed = collapsedGroups.has(groupName);
+            const groupColor = palette[groupIdx % palette.length];
+            return (_jsxs("div", { style: {
+                    borderRadius: 'var(--radius-md, 8px)',
+                    border: '1px solid var(--color-border, #e2e5e9)',
+                    overflow: 'hidden',
+                }, children: [_jsxs("div", { onClick: () => toggleGroup(groupName), style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 'var(--space-sm, 0.5rem)',
+                            padding: 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                            backgroundColor: groupColor,
+                            color: tokens.surfaces.text_on_accent,
+                            cursor: 'pointer',
+                            userSelect: 'none',
+                        }, children: [_jsx("span", { style: {
+                                    fontSize: '11px',
+                                    transition: 'transform 150ms ease',
+                                    transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
+                                    display: 'inline-block',
+                                }, children: "\u25BE" }), _jsx("span", { style: {
+                                    fontWeight: 600,
+                                    fontSize: 'var(--type-body, 0.9375rem)',
+                                    textTransform: 'capitalize',
+                                }, children: groupName.replace(/_/g, ' ') }), _jsx("span", { style: {
+                                    marginLeft: 'auto',
+                                    fontSize: 'var(--type-label, 0.6875rem)',
+                                    fontWeight: 700,
+                                    backgroundColor: 'rgba(255,255,255,0.25)',
+                                    padding: '1px 8px',
+                                    borderRadius: 'var(--radius-pill, 9999px)',
+                                }, children: items.length })] }), !isCollapsed && (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: items.map(({ obj, origIdx }, itemIdx) => {
+                            const title = getField(obj, titleField);
+                            const desc = getField(obj, descField);
+                            const badge = badgeField ? getField(obj, badgeField) : '';
+                            const descKey = `${groupName}-${itemIdx}`;
+                            const isDescExpanded = expandedDescs.has(descKey);
+                            const needsTruncation = desc.length > DESC_LIMIT;
+                            return (_jsxs("div", { style: {
+                                    padding: 'var(--space-xs, 0.375rem) var(--space-md, 1rem)',
+                                    borderBottom: itemIdx < items.length - 1 ? '1px solid var(--color-border-light, #eef0f2)' : 'none',
+                                    backgroundColor: itemIdx % 2 === 0 ? 'var(--color-surface, #ffffff)' : 'var(--color-surface-alt, #fafbfc)',
+                                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', gap: 'var(--space-sm, 0.5rem)', flexWrap: 'wrap' }, children: [_jsx("span", { style: {
+                                                    fontWeight: 600,
+                                                    fontSize: 'var(--type-body, 0.9375rem)',
+                                                    color: 'var(--color-text, #1a1d23)',
+                                                    lineHeight: 'var(--leading-snug, 1.4)',
+                                                }, children: title }), badge && (_jsx("span", { style: {
+                                                    fontSize: 'var(--type-label, 0.6875rem)',
+                                                    fontWeight: 500,
+                                                    color: groupColor,
+                                                    padding: '1px 8px',
+                                                    borderRadius: 'var(--radius-pill, 9999px)',
+                                                    backgroundColor: 'var(--color-surface-alt, #f8f9fa)',
+                                                }, children: badge })), captureMode && onCapture && (_jsx("button", { title: "Capture this item", onClick: e => {
+                                                    e.stopPropagation();
+                                                    onCapture({
+                                                        source_view_key: captureViewKey || '',
+                                                        source_item_index: origIdx,
+                                                        source_renderer_type: 'move_repertoire',
+                                                        content_type: 'item',
+                                                        selected_text: `[${groupName}] ${title}: ${desc}`.slice(0, 500),
+                                                        structured_data: obj,
+                                                        context_title: parentSectionKey
+                                                            ? `${captureViewKey || 'Analysis'} > ${parentSectionTitle || ''} > ${groupName} > ${title}`
+                                                            : `${captureViewKey || 'Analysis'} > ${groupName} > ${title}`,
+                                                        source_type: (captureSourceType || 'analysis'),
+                                                        entity_id: captureEntityId || captureJobId || '',
+                                                        depth_level: 'L2_element',
+                                                        parent_context: parentSectionKey ? {
+                                                            section_key: parentSectionKey,
+                                                            section_title: parentSectionTitle || '',
+                                                        } : undefined,
+                                                    });
+                                                }, style: {
+                                                    background: 'none',
+                                                    border: '1px solid var(--color-border, #ccc)',
+                                                    borderRadius: '4px',
+                                                    color: 'var(--dt-text-faint, #94a3b8)',
+                                                    cursor: 'pointer',
+                                                    padding: '2px 6px',
+                                                    fontSize: '0.7rem',
+                                                    lineHeight: 1,
+                                                    marginLeft: 'auto',
+                                                }, children: "\uD83D\uDCCC" }))] }), desc && (_jsx("div", { style: {
+                                            marginTop: '2px',
+                                            fontSize: 'var(--type-caption, 0.8125rem)',
+                                            color: 'var(--color-text-muted, #6b7280)',
+                                            lineHeight: 'var(--leading-relaxed, 1.6)',
+                                            cursor: needsTruncation ? 'pointer' : 'default',
+                                        }, onClick: () => needsTruncation && toggleDesc(descKey), children: needsTruncation && !isDescExpanded
+                                            ? desc.slice(0, DESC_LIMIT) + '...'
+                                            : desc }))] }, itemIdx));
+                        }) }))] }, groupName));
+        }) }));
+}
+// ── DialecticalPair → Tension/Contrast Visualization ────────
+//
+// Two panels with a central tension indicator. Left = thesis/foregrounded,
+// right = antithesis/suppressed. Central node shows relationship type.
+//
+// Config:
+//   left_key, right_key         — field names or sub-section keys for left/right
+//   left_label, right_label     — panel headers
+//   relationship_label          — central node text (default "vs")
+//   left_title_field, right_title_field — title fields within items
+//   left_description_field, right_description_field — description fields
+function DialecticalPair({ data, config }) {
+    const { tokens } = useDesignTokens();
+    const [expandedLeft, setExpandedLeft] = React.useState(new Set());
+    const [expandedRight, setExpandedRight] = React.useState(new Set());
+    const captureMode = config._captureMode;
+    const onCapture = config._onCapture;
+    const captureJobId = config._captureJobId;
+    const captureViewKey = config._captureViewKey;
+    const captureSourceType = config._captureSourceType;
+    const captureEntityId = config._captureEntityId;
+    const parentSectionKey = config._parentSectionKey;
+    const parentSectionTitle = config._parentSectionTitle;
+    const leftKey = config.left_key || 'left';
+    const rightKey = config.right_key || 'right';
+    const leftLabel = config.left_label || leftKey.replace(/_/g, ' ');
+    const rightLabel = config.right_label || rightKey.replace(/_/g, ' ');
+    const relationshipLabel = config.relationship_label || 'vs';
+    const leftTitleField = config.left_title_field || undefined;
+    const rightTitleField = config.right_title_field || undefined;
+    const leftDescField = config.left_description_field || undefined;
+    const rightDescField = config.right_description_field || undefined;
+    // Resolve data shape: could be {left_key: [...], right_key: [...]} or [{left_field, right_field}, ...]
+    let leftItems = [];
+    let rightItems = [];
+    if (data && typeof data === 'object' && !Array.isArray(data)) {
+        // Object with left/right sub-arrays
+        const obj = data;
+        const rawLeft = obj[leftKey];
+        const rawRight = obj[rightKey];
+        if (Array.isArray(rawLeft))
+            leftItems = rawLeft.filter(x => typeof x === 'object' && x !== null);
+        if (Array.isArray(rawRight))
+            rightItems = rawRight.filter(x => typeof x === 'object' && x !== null);
+    }
+    else if (Array.isArray(data)) {
+        // Array of paired objects — split using left_key/right_key as field names
+        data.forEach(item => {
+            if (typeof item !== 'object' || item === null)
+                return;
+            const obj = item;
+            // If fields exist, treat as paired data
+            const leftVal = obj[leftKey];
+            const rightVal = obj[rightKey];
+            if (leftVal !== undefined || rightVal !== undefined) {
+                leftItems.push({ text: leftVal, ...obj });
+                rightItems.push({ text: rightVal, ...obj });
+            }
+        });
+    }
+    if (leftItems.length === 0 && rightItems.length === 0)
+        return null;
+    const palette = tokens.primitives.series_palette;
+    const leftColor = palette[0];
+    const rightColor = palette[1];
+    const DESC_LIMIT = Infinity; // Show full text — no truncation
+    const autoFindTitle = (obj, explicitField) => {
+        if (explicitField && obj[explicitField])
+            return String(obj[explicitField]);
+        for (const k of TITLE_HINTS) {
+            if (obj[k] && typeof obj[k] === 'string')
+                return String(obj[k]);
+        }
+        // Fallback: first short string
+        const firstShort = Object.entries(obj).find(([, v]) => typeof v === 'string' && v.length < 80);
+        return firstShort ? String(firstShort[1]) : '';
+    };
+    const autoFindDesc = (obj, explicitField) => {
+        if (explicitField && obj[explicitField])
+            return String(obj[explicitField]);
+        for (const k of DESC_HINTS) {
+            if (obj[k] && typeof obj[k] === 'string')
+                return String(obj[k]);
+        }
+        // Fallback: longest string
+        let longest = '';
+        Object.values(obj).forEach(v => {
+            if (typeof v === 'string' && v.length > longest.length)
+                longest = v;
+        });
+        return longest;
+    };
+    const toggleLeft = (idx) => {
+        setExpandedLeft(prev => {
+            const next = new Set(prev);
+            if (next.has(idx))
+                next.delete(idx);
+            else
+                next.add(idx);
+            return next;
+        });
+    };
+    const toggleRight = (idx) => {
+        setExpandedRight(prev => {
+            const next = new Set(prev);
+            if (next.has(idx))
+                next.delete(idx);
+            else
+                next.add(idx);
+            return next;
+        });
+    };
+    const renderPanel = (items, side, color, titleFieldOverride, descFieldOverride, expandedSet, toggleFn) => (_jsx("div", { style: {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            maxHeight: '400px',
+            overflowY: 'auto',
+        }, children: items.map((obj, idx) => {
+            const title = autoFindTitle(obj, titleFieldOverride);
+            const desc = autoFindDesc(obj, descFieldOverride);
+            const isExpanded = expandedSet.has(idx);
+            const needsTruncation = desc.length > DESC_LIMIT;
+            return (_jsxs("div", { style: {
+                    padding: 'var(--space-xs, 0.375rem) var(--space-sm, 0.5rem)',
+                    borderBottom: idx < items.length - 1 ? '1px solid var(--color-border-light, #eef0f2)' : 'none',
+                    cursor: needsTruncation ? 'pointer' : 'default',
+                }, onClick: () => needsTruncation && toggleFn(idx), children: [_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', gap: 'var(--space-xs, 0.25rem)' }, children: [_jsx("span", { style: {
+                                    fontWeight: 600,
+                                    fontSize: 'var(--type-caption, 0.8125rem)',
+                                    color: 'var(--color-text, #1a1d23)',
+                                    lineHeight: 'var(--leading-snug, 1.4)',
+                                }, children: title }), captureMode && onCapture && (_jsx("button", { title: `Capture ${side} item`, onClick: e => {
+                                    e.stopPropagation();
+                                    onCapture({
+                                        source_view_key: captureViewKey || '',
+                                        source_item_index: idx,
+                                        source_renderer_type: 'dialectical_pair',
+                                        content_type: 'item',
+                                        selected_text: `[${side === 'left' ? leftLabel : rightLabel}] ${title}: ${desc}`.slice(0, 500),
+                                        structured_data: obj,
+                                        context_title: parentSectionKey
+                                            ? `${captureViewKey || 'Analysis'} > ${parentSectionTitle || ''} > ${side === 'left' ? leftLabel : rightLabel} > ${title}`
+                                            : `${captureViewKey || 'Analysis'} > ${side === 'left' ? leftLabel : rightLabel} > ${title}`,
+                                        source_type: (captureSourceType || 'analysis'),
+                                        entity_id: captureEntityId || captureJobId || '',
+                                        depth_level: 'L2_element',
+                                        parent_context: parentSectionKey ? {
+                                            section_key: parentSectionKey,
+                                            section_title: parentSectionTitle || '',
+                                        } : undefined,
+                                    });
+                                }, style: {
+                                    background: 'none',
+                                    border: '1px solid var(--color-border, #ccc)',
+                                    borderRadius: '4px',
+                                    color: 'var(--dt-text-faint, #94a3b8)',
+                                    cursor: 'pointer',
+                                    padding: '2px 6px',
+                                    fontSize: '0.7rem',
+                                    lineHeight: 1,
+                                    marginLeft: 'auto',
+                                    flexShrink: 0,
+                                }, children: "\uD83D\uDCCC" }))] }), desc && (_jsx("div", { style: {
+                            marginTop: '2px',
+                            fontSize: 'var(--type-label, 0.6875rem)',
+                            color: 'var(--color-text-muted, #6b7280)',
+                            lineHeight: 'var(--leading-relaxed, 1.6)',
+                        }, children: needsTruncation && !isExpanded
+                            ? desc.slice(0, DESC_LIMIT) + '...'
+                            : desc }))] }, idx));
+        }) }));
+    return (_jsxs("div", { style: {
+            borderRadius: 'var(--radius-md, 8px)',
+            border: '1px solid var(--color-border, #e2e5e9)',
+            overflow: 'hidden',
+        }, children: [_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr auto 1fr' }, children: [_jsx("div", { style: {
+                            padding: 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                            backgroundColor: leftColor,
+                            color: tokens.surfaces.text_on_accent,
+                            fontSize: 'var(--type-caption, 0.8125rem)',
+                            fontWeight: 600,
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.06em',
+                            textAlign: 'center',
+                        }, children: leftLabel }), _jsx("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            padding: '0 var(--space-sm, 0.5rem)',
+                            backgroundColor: tokens.surfaces.surface_alt,
+                            position: 'relative',
+                        }, children: _jsx("span", { style: {
+                                fontSize: 'var(--type-label, 0.6875rem)',
+                                fontWeight: 800,
+                                color: tokens.surfaces.text_muted,
+                                textTransform: 'uppercase',
+                                letterSpacing: '0.1em',
+                                padding: '2px 10px',
+                                borderRadius: 'var(--radius-pill, 9999px)',
+                                border: `2px solid ${tokens.surfaces.border_accent}`,
+                                backgroundColor: tokens.surfaces.surface_default,
+                                whiteSpace: 'nowrap',
+                            }, children: relationshipLabel }) }), _jsx("div", { style: {
+                            padding: 'var(--space-sm, 0.5rem) var(--space-md, 1rem)',
+                            backgroundColor: rightColor,
+                            color: tokens.surfaces.text_on_accent,
+                            fontSize: 'var(--type-caption, 0.8125rem)',
+                            fontWeight: 600,
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.06em',
+                            textAlign: 'center',
+                        }, children: rightLabel })] }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr auto 1fr' }, children: [renderPanel(leftItems, 'left', leftColor, leftTitleField, leftDescField, expandedLeft, toggleLeft), _jsx("div", { style: {
+                            width: '3px',
+                            background: `linear-gradient(to bottom, ${leftColor}, ${tokens.surfaces.border_accent}, ${rightColor})`,
+                        } }), renderPanel(rightItems, 'right', rightColor, rightTitleField, rightDescField, expandedRight, toggleRight)] })] }));
+}
+// ── OrderedFlow → Sequential Content Units ───────────────
+//
+// Generic renderer for any ordered sequence of content units:
+// chapters, argument steps, methodology phases, dialectical moves,
+// policy stages, evidence links, etc.
+//
+// Config:
+//   title_field       — primary label (auto-strips "Chapter N:" / "Step N:" prefixes)
+//   subtitle_field    — category/role badge (colored by design token semantic lookup)
+//   description_field — expandable detail text
+//   number_field      — explicit numbering field (falls back to extracting from title or index)
+//   strip_prefix      — regex to strip from title (default: /^(Chapter|Step|Phase|Stage)\s+\d+[.:]\s*/i)
+function OrderedFlow({ data, config }) {
+    const [expandedIdx, setExpandedIdx] = React.useState(null);
+    const { tokens, getCategoryColor } = useDesignTokens();
+    if (!data || !Array.isArray(data) || data.length === 0)
+        return null;
+    const titleField = config.title_field || 'title';
+    const subtitleField = config.subtitle_field || 'type';
+    const descriptionField = config.description_field || 'description';
+    const numberField = config.number_field || undefined;
+    const stripPrefix = config.strip_prefix;
+    const prefixRegex = stripPrefix
+        ? new RegExp(stripPrefix, 'i')
+        : /^(Chapter|Step|Phase|Stage|Part|Section|Move)\s+\d+[.:]\s*/i;
+    const lineColor = tokens.surfaces?.border_default || '#e2e5e9';
+    return (_jsxs("div", { style: { position: 'relative', paddingLeft: '36px' }, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    left: '11px',
+                    top: '12px',
+                    bottom: '12px',
+                    width: '2px',
+                    backgroundColor: lineColor,
+                } }), data.map((item, idx) => {
+                if (typeof item !== 'object' || item === null)
+                    return null;
+                const obj = item;
+                const title = getField(obj, titleField);
+                const category = getField(obj, subtitleField);
+                const categoryLower = category.toLowerCase();
+                const desc = getField(obj, descriptionField);
+                const isExpanded = expandedIdx === idx;
+                const isLast = idx === data.length - 1;
+                // Resolve step number: explicit field → extract from title → index
+                let stepLabel;
+                if (numberField && obj[numberField] !== undefined) {
+                    stepLabel = String(obj[numberField]);
+                }
+                else {
+                    const numMatch = title.match(/(\d+)/);
+                    stepLabel = numMatch ? numMatch[1] : String(idx + 1);
+                }
+                // Strip common prefixes for cleaner display
+                const cleanTitle = title.replace(prefixRegex, '');
+                // Color from design tokens: try categorical lookup, then series palette fallback
+                const catColor = getCategoryColor?.(subtitleField, categoryLower);
+                const dotColor = catColor?.text
+                    || tokens.primitives.series_palette[idx % tokens.primitives.series_palette.length];
+                const DESC_LIMIT = Infinity; // Show full text — no truncation
+                const needsTruncation = desc.length > DESC_LIMIT;
+                const displayDesc = isExpanded || !needsTruncation
+                    ? desc
+                    : desc.slice(0, DESC_LIMIT) + '...';
+                return (_jsxs("div", { onClick: () => needsTruncation && setExpandedIdx(isExpanded ? null : idx), style: {
+                        position: 'relative',
+                        paddingBottom: isLast ? 0 : 'var(--space-xs, 0.375rem)',
+                        marginBottom: isLast ? 0 : 'var(--space-xs, 0.375rem)',
+                        cursor: needsTruncation ? 'pointer' : 'default',
+                    }, children: [_jsx("div", { style: {
+                                position: 'absolute',
+                                left: '-36px',
+                                top: '2px',
+                                width: '24px',
+                                height: '24px',
+                                borderRadius: '50%',
+                                backgroundColor: dotColor,
+                                color: '#fff',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                fontSize: '11px',
+                                fontWeight: 700,
+                                zIndex: 1,
+                                fontFamily: 'var(--font-mono, monospace)',
+                            }, children: stepLabel }), _jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'baseline',
+                                gap: 'var(--space-sm, 0.5rem)',
+                                flexWrap: 'wrap',
+                                lineHeight: 'var(--leading-snug, 1.4)',
+                            }, children: [_jsx("span", { style: {
+                                        fontWeight: 600,
+                                        fontSize: 'var(--type-body, 0.9375rem)',
+                                        color: 'var(--color-text, #1a1d23)',
+                                    }, children: cleanTitle }), category && (_jsx("span", { style: {
+                                        fontSize: '10px',
+                                        fontWeight: 600,
+                                        textTransform: 'uppercase',
+                                        letterSpacing: '0.06em',
+                                        color: dotColor,
+                                        opacity: 0.85,
+                                    }, children: category }))] }), desc && (_jsx("div", { style: {
+                                marginTop: '2px',
+                                fontSize: 'var(--type-caption, 0.8125rem)',
+                                color: 'var(--color-text-muted, #6b7280)',
+                                lineHeight: 'var(--leading-relaxed, 1.6)',
+                            }, children: displayDesc }))] }, idx));
+            })] }));
+}
+// ── RichDescriptionList → Readable Stacked Items ──────────
+//
+// Vertically-stacked list where each item gets room to breathe.
+// Handles BOTH string arrays ("Label: description") and object arrays.
+//
+// Config:
+//   title_field        — For object arrays: field name for label
+//   description_field  — For object arrays: field name for description
+//   separator          — For string arrays: split label from description (default ":")
+//   max_visible_chars  — Auto-collapse longer descriptions (default 200)
+//   badge_fields       — Optional extra fields to show as badges
+function RichDescriptionList({ data, config }) {
+    const [expandedIdx, setExpandedIdx] = React.useState(new Set());
+    const { tokens } = useDesignTokens();
+    const captureMode = config._captureMode;
+    const onCapture = config._onCapture;
+    const captureJobId = config._captureJobId;
+    const captureViewKey = config._captureViewKey;
+    const captureSourceType = config._captureSourceType;
+    const captureEntityId = config._captureEntityId;
+    const parentSectionKey = config._parentSectionKey;
+    const parentSectionTitle = config._parentSectionTitle;
+    if (!data || !Array.isArray(data) || data.length === 0)
+        return null;
+    const titleField = config.title_field;
+    const descriptionField = config.description_field;
+    const separator = config.separator || ':';
+    const maxChars = config.max_visible_chars || Infinity; // Show full text — no truncation
+    const badgeFields = config.badge_fields || [];
+    const palette = tokens.primitives.series_palette;
+    // Parse items — handle string arrays and object arrays
+    const items = data.map(item => {
+        if (typeof item === 'string') {
+            // Parse "Label: description..." format
+            const sepIdx = item.indexOf(separator);
+            if (sepIdx > 0 && sepIdx < 60) {
+                return {
+                    label: item.slice(0, sepIdx).trim(),
+                    description: item.slice(sepIdx + separator.length).trim(),
+                    badges: [],
+                    raw: item,
+                };
+            }
+            // No separator found — use first ~40 chars as label
+            const firstSpace = item.indexOf(' ', 30);
+            if (firstSpace > 0) {
+                return { label: item.slice(0, firstSpace), description: item.slice(firstSpace + 1), badges: [], raw: item };
+            }
+            return { label: item, description: '', badges: [], raw: item };
+        }
+        if (typeof item === 'object' && item !== null) {
+            const obj = item;
+            const label = titleField ? getField(obj, titleField) : '';
+            const desc = descriptionField ? getField(obj, descriptionField) : '';
+            const badges = badgeFields.map(f => getField(obj, f)).filter(Boolean);
+            // If no explicit fields, auto-detect
+            if (!label && !desc) {
+                const auto = autoDetectFields(obj);
+                return {
+                    label: auto.title ? getField(obj, auto.title) : '',
+                    description: auto.description ? getField(obj, auto.description) : '',
+                    badges,
+                    raw: item,
+                };
+            }
+            return { label, description: desc, badges, raw: item };
+        }
+        return { label: String(item), description: '', badges: [], raw: item };
+    });
+    const toggleExpand = (idx) => {
+        setExpandedIdx(prev => {
+            const next = new Set(prev);
+            if (next.has(idx))
+                next.delete(idx);
+            else
+                next.add(idx);
+            return next;
+        });
+    };
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0,
+            borderRadius: 'var(--radius-md, 8px)',
+            border: '1px solid var(--color-border, #e2e5e9)',
+            overflow: 'hidden',
+        }, children: items.map((item, idx) => {
+            const color = palette[idx % palette.length];
+            const isExpanded = expandedIdx.has(idx);
+            const needsTruncation = item.description.length > maxChars;
+            const isLast = idx === items.length - 1;
+            return (_jsxs("div", { style: {
+                    display: 'flex',
+                    borderBottom: isLast ? 'none' : '1px solid var(--color-border-light, #eef0f2)',
+                }, children: [_jsx("div", { style: {
+                            width: '4px',
+                            backgroundColor: color,
+                            flexShrink: 0,
+                        } }), _jsxs("div", { style: {
+                            flex: 1,
+                            padding: 'var(--space-sm, 0.75rem) var(--space-md, 1rem)',
+                        }, children: [_jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'baseline',
+                                    gap: 'var(--space-xs, 0.25rem)',
+                                }, children: [_jsx("span", { style: {
+                                            color,
+                                            fontSize: '14px',
+                                            lineHeight: 1,
+                                            flexShrink: 0,
+                                        }, children: "\u25CF" }), _jsx("span", { style: {
+                                            fontWeight: 700,
+                                            fontSize: 'var(--type-caption, 0.8125rem)',
+                                            textTransform: 'uppercase',
+                                            letterSpacing: '0.04em',
+                                            color: 'var(--color-text, #1a1d23)',
+                                            lineHeight: 'var(--leading-snug, 1.4)',
+                                        }, children: item.label || `Item ${idx + 1}` }), item.badges.map((badge, bi) => (_jsx("span", { style: {
+                                            fontSize: '10px',
+                                            fontWeight: 600,
+                                            textTransform: 'uppercase',
+                                            letterSpacing: '0.05em',
+                                            padding: '1px 6px',
+                                            borderRadius: 'var(--radius-pill, 9999px)',
+                                            backgroundColor: `${palette[(idx + bi + 1) % palette.length]}22`,
+                                            color: palette[(idx + bi + 1) % palette.length],
+                                        }, children: badge }, bi))), _jsxs("span", { style: {
+                                            marginLeft: 'auto',
+                                            fontSize: '10px',
+                                            fontWeight: 500,
+                                            color: 'var(--dt-text-faint, #94a3b8)',
+                                            flexShrink: 0,
+                                        }, children: ["[", idx + 1, "/", items.length, "]"] }), captureMode && onCapture && (_jsx("button", { title: "Capture this item", onClick: e => {
+                                            e.stopPropagation();
+                                            onCapture({
+                                                source_view_key: captureViewKey || '',
+                                                source_item_index: idx,
+                                                source_renderer_type: 'rich_description_list',
+                                                content_type: 'item',
+                                                selected_text: `${item.label}: ${item.description}`.slice(0, 500),
+                                                structured_data: item.raw,
+                                                context_title: parentSectionKey
+                                                    ? `${captureViewKey || 'Analysis'} > ${parentSectionTitle || ''} > ${item.label}`
+                                                    : `${captureViewKey || 'Analysis'} > ${item.label}`,
+                                                source_type: (captureSourceType || 'analysis'),
+                                                entity_id: captureEntityId || captureJobId || '',
+                                                depth_level: parentSectionKey ? 'L2_element' : 'L1_section',
+                                                parent_context: parentSectionKey ? {
+                                                    section_key: parentSectionKey,
+                                                    section_title: parentSectionTitle || '',
+                                                } : undefined,
+                                            });
+                                        }, style: {
+                                            background: 'none',
+                                            border: '1px solid var(--color-border, #ccc)',
+                                            borderRadius: '4px',
+                                            color: 'var(--dt-text-faint, #94a3b8)',
+                                            cursor: 'pointer',
+                                            padding: '2px 6px',
+                                            fontSize: '0.7rem',
+                                            lineHeight: 1,
+                                            flexShrink: 0,
+                                        }, children: "\uD83D\uDCCC" }))] }), item.description && (_jsxs("div", { style: {
+                                    marginTop: 'var(--space-2xs, 0.25rem)',
+                                    fontSize: 'var(--type-caption, 0.8125rem)',
+                                    color: 'var(--color-text-muted, #6b7280)',
+                                    lineHeight: 'var(--leading-relaxed, 1.6)',
+                                }, children: [needsTruncation && !isExpanded
+                                        ? item.description.slice(0, maxChars) + '...'
+                                        : item.description, needsTruncation && (_jsx("button", { onClick: (e) => { e.stopPropagation(); toggleExpand(idx); }, className: "gen-show-more-link", style: {
+                                            background: 'none',
+                                            border: 'none',
+                                            color,
+                                            cursor: 'pointer',
+                                            fontSize: '0.75rem',
+                                            padding: '0 4px',
+                                            marginLeft: '4px',
+                                            fontWeight: 600,
+                                        }, children: isExpanded ? 'collapse ▴' : 'expand ▾' }))] }))] })] }, idx));
+        }) }));
+}
+// ── PhaseTimeline → Connected Phase Nodes ──────────────────
+//
+// Horizontal connected timeline with prominent phase nodes. Designed for
+// temporal/sequential data stored as an OBJECT with a phases array and
+// optional mode badge.
+//
+// Config:
+//   phases_field      — key containing the phases array (default "phases")
+//   label_field       — field within each phase for the label (default "label")
+//   description_field — field within each phase for the description (default "description")
+//   mode_field        — optional top-level field for a mode badge (default "mode")
+function PhaseTimeline({ data, config }) {
+    const [expandedIdx, setExpandedIdx] = React.useState(new Set());
+    const { tokens } = useDesignTokens();
+    const captureMode = config._captureMode;
+    const onCapture = config._onCapture;
+    const captureJobId = config._captureJobId;
+    const captureViewKey = config._captureViewKey;
+    const captureSourceType = config._captureSourceType;
+    const captureEntityId = config._captureEntityId;
+    const parentSectionKey = config._parentSectionKey;
+    const parentSectionTitle = config._parentSectionTitle;
+    if (!data || typeof data !== 'object' || Array.isArray(data))
+        return null;
+    const obj = data;
+    const phasesField = config.phases_field || 'phases';
+    const labelField = config.label_field || 'label';
+    const descField = config.description_field || 'description';
+    const modeField = config.mode_field || 'mode';
+    const rawPhases = obj[phasesField];
+    if (!Array.isArray(rawPhases) || rawPhases.length === 0)
+        return null;
+    const mode = obj[modeField];
+    const palette = tokens.primitives.series_palette;
+    const DESC_LIMIT = Infinity; // Show full text — no truncation
+    const phases = rawPhases
+        .filter(p => typeof p === 'object' && p !== null)
+        .map(p => p);
+    const toggleExpand = (idx) => {
+        setExpandedIdx(prev => {
+            const next = new Set(prev);
+            if (next.has(idx))
+                next.delete(idx);
+            else
+                next.add(idx);
+            return next;
+        });
+    };
+    return (_jsxs("div", { children: [mode && (_jsx("div", { style: {
+                    marginBottom: 'var(--space-sm, 0.75rem)',
+                    display: 'flex',
+                    justifyContent: 'center',
+                }, children: _jsxs("span", { style: {
+                        fontSize: '10px',
+                        fontWeight: 700,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.08em',
+                        padding: '3px 12px',
+                        borderRadius: 'var(--radius-pill, 9999px)',
+                        backgroundColor: `${palette[0]}18`,
+                        color: palette[0],
+                        border: `1px solid ${palette[0]}40`,
+                    }, children: [mode, " temporality"] }) })), _jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    gap: 0,
+                    overflow: 'hidden',
+                }, children: phases.map((phase, idx) => {
+                    const label = getField(phase, labelField);
+                    const desc = getField(phase, descField);
+                    const color = palette[idx % palette.length];
+                    const isExpanded = expandedIdx.has(idx);
+                    const needsTruncation = desc.length > DESC_LIMIT;
+                    const isLast = idx === phases.length - 1;
+                    return (_jsxs(React.Fragment, { children: [_jsxs("div", { style: {
+                                    flex: 1,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    minWidth: 0,
+                                }, children: [_jsx("div", { style: {
+                                            width: '36px',
+                                            height: '36px',
+                                            borderRadius: '50%',
+                                            backgroundColor: color,
+                                            color: '#fff',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            fontSize: '14px',
+                                            fontWeight: 700,
+                                            flexShrink: 0,
+                                            zIndex: 1,
+                                            fontFamily: 'var(--font-mono, monospace)',
+                                            boxShadow: `0 0 0 3px ${color}30`,
+                                        }, children: idx + 1 }), _jsx("div", { style: {
+                                            marginTop: 'var(--space-xs, 0.375rem)',
+                                            textAlign: 'center',
+                                            padding: 'var(--space-xs, 0.375rem) var(--space-sm, 0.5rem)',
+                                            borderRadius: 'var(--radius-md, 8px)',
+                                            border: `1px solid ${color}40`,
+                                            backgroundColor: `${color}08`,
+                                            width: '100%',
+                                            minHeight: '44px',
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                        }, children: _jsx("span", { style: {
+                                                fontWeight: 700,
+                                                fontSize: 'var(--type-label, 0.6875rem)',
+                                                textTransform: 'uppercase',
+                                                letterSpacing: '0.04em',
+                                                color: 'var(--color-text, #1a1d23)',
+                                                lineHeight: 'var(--leading-snug, 1.3)',
+                                            }, children: label || `Phase ${idx + 1}` }) }), desc && (_jsxs("div", { onClick: () => needsTruncation && toggleExpand(idx), style: {
+                                            marginTop: 'var(--space-2xs, 0.25rem)',
+                                            fontSize: 'var(--type-label, 0.6875rem)',
+                                            color: 'var(--color-text-muted, #6b7280)',
+                                            lineHeight: 'var(--leading-relaxed, 1.6)',
+                                            textAlign: 'center',
+                                            padding: '0 var(--space-2xs, 0.125rem)',
+                                            cursor: needsTruncation ? 'pointer' : 'default',
+                                        }, children: [needsTruncation && !isExpanded
+                                                ? desc.slice(0, DESC_LIMIT) + '...'
+                                                : desc, needsTruncation && (_jsx("button", { onClick: e => { e.stopPropagation(); toggleExpand(idx); }, style: {
+                                                    background: 'none',
+                                                    border: 'none',
+                                                    color,
+                                                    cursor: 'pointer',
+                                                    fontSize: '0.7rem',
+                                                    padding: '0 3px',
+                                                    marginLeft: '2px',
+                                                    fontWeight: 600,
+                                                }, children: isExpanded ? '▴' : '▾' }))] })), captureMode && onCapture && (_jsx("button", { title: "Capture this phase", onClick: e => {
+                                            e.stopPropagation();
+                                            onCapture({
+                                                source_view_key: captureViewKey || '',
+                                                source_item_index: idx,
+                                                source_renderer_type: 'phase_timeline',
+                                                content_type: 'item',
+                                                selected_text: `[Phase ${idx + 1}] ${label}: ${desc}`.slice(0, 500),
+                                                structured_data: phase,
+                                                context_title: parentSectionKey
+                                                    ? `${captureViewKey || 'Analysis'} > ${parentSectionTitle || ''} > Phase: ${label}`
+                                                    : `${captureViewKey || 'Analysis'} > Phase: ${label}`,
+                                                source_type: (captureSourceType || 'analysis'),
+                                                entity_id: captureEntityId || captureJobId || '',
+                                                depth_level: parentSectionKey ? 'L2_element' : 'L1_section',
+                                                parent_context: parentSectionKey ? {
+                                                    section_key: parentSectionKey,
+                                                    section_title: parentSectionTitle || '',
+                                                } : undefined,
+                                            });
+                                        }, style: {
+                                            marginTop: 'var(--space-2xs, 0.25rem)',
+                                            background: 'none',
+                                            border: '1px solid var(--color-border, #ccc)',
+                                            borderRadius: '4px',
+                                            color: 'var(--dt-text-faint, #94a3b8)',
+                                            cursor: 'pointer',
+                                            padding: '2px 6px',
+                                            fontSize: '0.7rem',
+                                            lineHeight: 1,
+                                        }, children: "\uD83D\uDCCC" }))] }), !isLast && (_jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    paddingTop: '18px',
+                                    flexShrink: 0,
+                                }, children: [_jsx("div", { style: {
+                                            width: '28px',
+                                            height: '2px',
+                                            background: `linear-gradient(to right, ${color}, ${palette[(idx + 1) % palette.length]})`,
+                                        } }), _jsx("div", { style: {
+                                            width: 0,
+                                            height: 0,
+                                            borderTop: '4px solid transparent',
+                                            borderBottom: '4px solid transparent',
+                                            borderLeft: `6px solid ${palette[(idx + 1) % palette.length]}`,
+                                        } })] }))] }, idx));
+                }) })] }));
+}
+// ── Distribution Summary ────────────────────────────────
+/**
+ * Visual distribution bar chart with optional dominant pattern highlight
+ * and collapsible narrative. Configurable via JSON view definitions.
+ *
+ * Data shape (object):
+ *   {
+ *     distribution: Record<string, number> | Array<{ key: string; count: number; major_count?: number }>
+ *     dominant?: string
+ *     narrative?: string
+ *   }
+ *
+ * Field mapping config (for data that doesn't use these exact field names):
+ *   distribution_field?: string   -- field name for distribution data (default: "distribution")
+ *   dominant_field?: string       -- field name for dominant item (default: "dominant")
+ *   narrative_field?: string      -- field name for narrative text (default: "narrative")
+ *
+ * Display config:
+ *   category?: string            -- design token category for colors (e.g., "tactic", "relationship")
+ *   dominant_label?: string       -- label above dominant value (default: "Dominant")
+ *   count_noun?: string           -- noun for total count (default: "items")
+ *   type_noun?: string            -- noun for type count (default: "types")
+ *   severity_value?: string       -- label for severity badges (default: "major")
+ *
+ * Interactive mode (passed by CardGridRenderer via _ prefix):
+ *   _onFilterClick?: (key: string) => void   -- makes bars clickable
+ *   _activeFilter?: string | null            -- highlights active bar
+ *   _groups?: Group[]                        -- live groups (overrides distribution field)
+ */
+export function DistributionSummary({ data, config }) {
+    const { getCategoryColor, getLabel } = useDesignTokens();
+    const [narrativeExpanded, setNarrativeExpanded] = useState(false);
+    const obj = (data && typeof data === 'object' && !Array.isArray(data))
+        ? data
+        : null;
+    if (!obj)
+        return null;
+    // Config
+    const category = config.category;
+    const dominantLabel = config.dominant_label || 'Dominant';
+    const countNoun = config.count_noun || 'items';
+    const typeNoun = config.type_noun || 'types';
+    const severityValue = config.severity_value || 'major';
+    // Field mapping (allows data to use different field names)
+    const distField = config.distribution_field || 'distribution';
+    const domField = config.dominant_field || 'dominant';
+    const narrField = config.narrative_field || 'narrative';
+    // Interactive mode (injected by CardGridRenderer)
+    const onFilterClick = config._onFilterClick;
+    const activeFilter = config._activeFilter;
+    const liveGroups = config._groups;
+    // Build entries — prefer live groups (interactive) over static distribution
+    const formatName = (key) => (category ? getLabel(category, key) : null) || key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    let entries = [];
+    const fallbackColors = { bg: '#f1f5f9', text: '#64748b', border: '#e2e8f0' };
+    if (liveGroups && liveGroups.length > 0) {
+        entries = liveGroups.map(g => ({
+            key: g.key,
+            label: g.label,
+            count: g.items.length,
+            majorCount: g.items.filter(i => String(i.severity || '').toLowerCase() === severityValue).length,
+            colors: (category ? getCategoryColor(category, g.key) : null) || g.style || fallbackColors,
+        }));
+    }
+    else {
+        const rawDist = obj[distField];
+        if (rawDist && typeof rawDist === 'object' && !Array.isArray(rawDist)) {
+            entries = Object.entries(rawDist)
+                .map(([key, count]) => ({
+                key, count: Number(count) || 0, majorCount: 0,
+                label: formatName(key),
+                colors: (category ? getCategoryColor(category, key) : null) || fallbackColors,
+            }))
+                .sort((a, b) => b.count - a.count);
+        }
+        else if (Array.isArray(rawDist)) {
+            entries = rawDist.map(item => {
+                const key = String(item.key || '');
+                return {
+                    key, count: Number(item.count || 0), majorCount: Number(item.major_count || 0),
+                    label: String(item.label || '') || formatName(key),
+                    colors: (category ? getCategoryColor(category, key) : null) || fallbackColors,
+                };
+            }).sort((a, b) => b.count - a.count);
+        }
+    }
+    if (entries.length === 0)
+        return null;
+    const totalCount = entries.reduce((sum, e) => sum + e.count, 0);
+    const maxCount = Math.max(...entries.map(e => e.count));
+    const dominant = obj[domField];
+    const narrative = obj[narrField];
+    const isInteractive = Boolean(onFilterClick);
+    return (_jsxs("div", { className: "ar-dist-summary", children: [_jsxs("div", { className: "gen-summary-header", children: [dominant && (_jsxs("div", { className: "gen-summary-stat", children: [_jsx("span", { className: "gen-stat-label", children: dominantLabel }), _jsx("span", { className: "gen-stat-value", children: formatName(dominant) })] })), _jsxs("div", { className: "gen-summary-counts", children: [_jsx("span", { className: "gen-summary-count-big", children: totalCount }), _jsxs("span", { className: "gen-summary-count-label", children: [countNoun, " across ", entries.length, " ", typeNoun] })] })] }), _jsxs("div", { className: "gen-dist-bars", children: [entries.map(entry => {
+                        const pct = Math.max(8, (entry.count / maxCount) * 100);
+                        const isActive = activeFilter === entry.key;
+                        const BarTag = isInteractive ? 'button' : 'div';
+                        return (_jsxs(BarTag, { type: isInteractive ? 'button' : undefined, className: `gen-dist-bar-row ${isActive ? 'gen-dist-bar-row--active' : ''}`, onClick: isInteractive ? () => onFilterClick(entry.key) : undefined, children: [_jsx("span", { className: "gen-dist-bar-label", children: entry.label }), _jsx("span", { className: "gen-dist-bar-track", children: _jsx("span", { className: "gen-dist-bar-fill", style: {
+                                            width: `${pct}%`,
+                                            backgroundColor: entry.colors.text,
+                                            opacity: isActive ? 1 : 0.7,
+                                        } }) }), _jsx("span", { className: "gen-dist-bar-count", style: { color: entry.colors.text }, children: entry.count }), entry.majorCount > 0 && (_jsxs("span", { className: "gen-dist-bar-severity", children: [entry.majorCount, " ", severityValue] }))] }, entry.key));
+                    }), isInteractive && activeFilter && (_jsx("button", { type: "button", className: "gen-dist-bar-clear", onClick: () => onFilterClick(''), children: "Clear filter" }))] }), narrative && (_jsxs(_Fragment, { children: [_jsx("div", { className: `gen-pattern-narrative-wrap ${narrativeExpanded ? 'gen-pattern-narrative-wrap--expanded' : ''}`, children: _jsx("p", { className: "gen-pattern-narrative", children: narrative }) }), _jsx("button", { type: "button", className: "gen-narrative-toggle", onClick: () => setNarrativeExpanded(!narrativeExpanded), children: narrativeExpanded ? 'Show less' : 'Read full analysis' })] }))] }));
+}
+//# sourceMappingURL=SubRenderers.js.map