@the-syllabus/analysis-renderers 0.2.0

package/dist/renderers/TableRenderer.js

@@ -0,0 +1,273 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TableRenderer — Multi-table display with LLM-driven table design.
+ *
+ * When receiving prose-mode data, requests table-format extraction from the LLM.
+ * The LLM decides how many tables to create, what dimensions/columns to use,
+ * and what data to put in rows — producing 3-5 meaningful analytical tables.
+ *
+ * Also supports config-driven single-table mode for structured data.
+ *
+ * renderer_config keys:
+ *   columns: (string | {key, label, width?})[]  — column definitions (single-table mode)
+ *   sortable: boolean                            — click column headers to sort (default: true)
+ *   filterable: boolean                          — text filter input above tables
+ *   items_path: string                           — dotted path to extract array from data
+ *   prose_endpoint: string                       — base section name (auto-appends _table)
+ */
+import { useState, useMemo } from 'react';
+import { useProseExtraction } from '../hooks/useProseExtraction';
+function isMultiTableData(data) {
+    return (data != null &&
+        typeof data === 'object' &&
+        Array.isArray(data.tables) &&
+        data.tables.length > 0);
+}
+function normalizeToArray(data) {
+    if (Array.isArray(data))
+        return data;
+    if (data && typeof data === 'object' && !Array.isArray(data)) {
+        return Object.entries(data).map(([key, value]) => {
+            if (value && typeof value === 'object') {
+                return { _key: key, ...value };
+            }
+            return { _key: key, value };
+        });
+    }
+    return [];
+}
+function getPath(obj, path) {
+    if (!path)
+        return obj;
+    const parts = path.split('.');
+    let current = obj;
+    for (const part of parts) {
+        if (current == null || typeof current !== 'object')
+            return undefined;
+        current = current[part];
+    }
+    return current;
+}
+function formatCellValue(value) {
+    if (value == null)
+        return '\u2014';
+    if (typeof value === 'number')
+        return String(value);
+    if (typeof value === 'boolean')
+        return value ? 'Yes' : 'No';
+    if (Array.isArray(value))
+        return value.map(String).join(', ');
+    if (typeof value === 'object')
+        return JSON.stringify(value);
+    return String(value);
+}
+// ── Single Table Component ──────────────────────────────
+function SingleTable({ table, sortable, tableIndex, }) {
+    const [sortCol, setSortCol] = useState(null);
+    const [sortAsc, setSortAsc] = useState(true);
+    const columns = useMemo(() => {
+        if (table.columns && table.columns.length > 0) {
+            return table.columns.map(col => typeof col === 'string'
+                ? { key: col, label: col.replace(/_/g, ' ') }
+                : col);
+        }
+        if (table.rows.length === 0)
+            return [];
+        return Object.keys(table.rows[0])
+            .filter(k => !k.startsWith('_'))
+            .map(k => ({ key: k, label: k.replace(/_/g, ' ') }));
+    }, [table.columns, table.rows]);
+    const sortedRows = useMemo(() => {
+        if (!sortable || !sortCol)
+            return table.rows;
+        return [...table.rows].sort((a, b) => {
+            const aVal = a[sortCol] ?? '';
+            const bVal = b[sortCol] ?? '';
+            if (typeof aVal === 'number' && typeof bVal === 'number') {
+                return sortAsc ? aVal - bVal : bVal - aVal;
+            }
+            const cmp = String(aVal).localeCompare(String(bVal));
+            return sortAsc ? cmp : -cmp;
+        });
+    }, [table.rows, sortCol, sortAsc, sortable]);
+    const handleSort = (colKey) => {
+        if (!sortable)
+            return;
+        if (sortCol === colKey) {
+            setSortAsc(!sortAsc);
+        }
+        else {
+            setSortCol(colKey);
+            setSortAsc(true);
+        }
+    };
+    if (columns.length === 0 || table.rows.length === 0)
+        return null;
+    // Alternate subtle row tints per table
+    const accentHues = [0, 210, 35, 280, 150]; // red, blue, amber, purple, teal
+    const hue = accentHues[tableIndex % accentHues.length];
+    return (_jsxs("div", { style: {
+            background: 'var(--color-surface-elev, #f5f3f0)',
+            border: '1px solid var(--color-border, #e2e5e9)',
+            borderRadius: '10px',
+            overflow: 'hidden',
+        }, children: [_jsxs("div", { style: {
+                    padding: '14px 18px 10px',
+                    borderBottom: '1px solid var(--color-border, #e2e5e9)',
+                }, children: [_jsx("h4", { style: {
+                            margin: '0 0 2px 0',
+                            fontSize: '14px',
+                            fontWeight: 700,
+                            color: 'var(--dt-text-default)',
+                            letterSpacing: '-0.01em',
+                        }, children: table.title }), table.description ? (_jsx("p", { style: {
+                            margin: 0,
+                            fontSize: '12px',
+                            color: 'var(--dt-text-muted)',
+                            lineHeight: '1.4',
+                        }, children: table.description })) : null] }), _jsx("div", { style: { overflowX: 'auto' }, children: _jsxs("table", { style: {
+                        width: '100%',
+                        borderCollapse: 'collapse',
+                        fontSize: '13px',
+                    }, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map(col => (_jsxs("th", { onClick: () => handleSort(col.key), style: {
+                                        textAlign: 'left',
+                                        padding: '10px 14px',
+                                        borderBottom: `2px solid hsla(${hue}, 40%, 50%, 0.25)`,
+                                        color: 'var(--dt-text-muted)',
+                                        fontSize: '11px',
+                                        fontWeight: 700,
+                                        textTransform: 'uppercase',
+                                        letterSpacing: '0.06em',
+                                        cursor: sortable ? 'pointer' : 'default',
+                                        userSelect: 'none',
+                                        whiteSpace: 'nowrap',
+                                        width: col.width || 'auto',
+                                        background: `hsla(${hue}, 30%, 50%, 0.04)`,
+                                        transition: 'background 0.15s',
+                                    }, children: [col.label, sortable && sortCol === col.key ? (_jsx("span", { style: { marginLeft: '4px', fontSize: '9px' }, children: sortAsc ? '\u25B2' : '\u25BC' })) : sortable ? (_jsx("span", { style: { marginLeft: '4px', fontSize: '9px', opacity: 0.3 }, children: '\u25B2' })) : null] }, col.key))) }) }), _jsx("tbody", { children: sortedRows.map((row, idx) => (_jsx("tr", { style: {
+                                    borderBottom: idx < sortedRows.length - 1
+                                        ? '1px solid var(--color-border, #e2e5e9)'
+                                        : 'none',
+                                    background: idx % 2 === 1
+                                        ? `hsla(${hue}, 20%, 50%, 0.03)`
+                                        : 'transparent',
+                                }, children: columns.map((col, colIdx) => (_jsx("td", { style: {
+                                        padding: '10px 14px',
+                                        color: colIdx === 0 ? 'var(--dt-text-default)' : 'var(--dt-text-muted)',
+                                        fontWeight: colIdx === 0 ? 600 : 400,
+                                        lineHeight: '1.45',
+                                        verticalAlign: 'top',
+                                        maxWidth: '400px',
+                                    }, children: formatCellValue(row[col.key]) }, col.key))) }, idx))) })] }) }), _jsxs("div", { style: {
+                    padding: '6px 14px',
+                    fontSize: '11px',
+                    color: 'var(--dt-text-faint)',
+                    textAlign: 'right',
+                    borderTop: '1px solid var(--color-border, #e2e5e9)',
+                    background: `hsla(${hue}, 20%, 50%, 0.02)`,
+                }, children: [table.rows.length, " row", table.rows.length !== 1 ? 's' : ''] })] }));
+}
+// ── Main TableRenderer ──────────────────────────────────
+export function TableRenderer({ data, config }) {
+    const rawColumns = config.columns;
+    const sortable = config.sortable ?? true;
+    const filterable = config.filterable ?? false;
+    const itemsPath = config.items_path;
+    const proseEndpoint = config.prose_endpoint;
+    // For table rendering, use the _table variant of the prose endpoint
+    // so the LLM produces multi-table structured output
+    const tableEndpoint = proseEndpoint ? `${proseEndpoint}_table` : 'data';
+    const { data: extractedData, loading, error, isProseMode } = useProseExtraction(data, config._jobId, tableEndpoint, { apiPathPrefix: config._apiPathPrefix });
+    const workingData = isProseMode ? extractedData : data;
+    const [filterText, setFilterText] = useState('');
+    // ── Multi-table mode (LLM-generated tables) ──
+    if (loading) {
+        return (_jsxs("div", { style: { padding: '2rem', textAlign: 'center' }, children: [_jsx("div", { className: "gen-extracting-spinner" }), _jsx("p", { style: { color: 'var(--dt-text-muted)', fontSize: '13px' }, children: "Designing analytical tables..." })] }));
+    }
+    if (error) {
+        return (_jsx("div", { className: "gen-extraction-error", style: { padding: '1rem' }, children: _jsxs("p", { children: ["Could not load table data: ", error] }) }));
+    }
+    if (!workingData) {
+        return _jsx("p", { className: "gen-empty", children: "No data available for table display." });
+    }
+    // Check if we got multi-table format from the LLM
+    if (isMultiTableData(workingData)) {
+        const { tables, summary_note } = workingData;
+        // Filter across all tables if filterable
+        const filteredTables = filterable && filterText.trim()
+            ? tables.map(t => ({
+                ...t,
+                rows: t.rows.filter(row => t.columns.some(col => {
+                    const val = row[col.key];
+                    return val != null && String(val).toLowerCase().includes(filterText.toLowerCase());
+                })),
+            })).filter(t => t.rows.length > 0)
+            : tables;
+        return (_jsxs("div", { className: "gen-table-renderer", children: [isProseMode ? (_jsx("div", { className: "gen-prose-badge", children: _jsx("span", { className: "gen-prose-indicator", children: "Extracted from analytical prose" }) })) : null, filterable ? (_jsx("div", { style: { marginBottom: '16px' }, children: _jsx("input", { type: "text", placeholder: "Filter across all tables...", value: filterText, onChange: e => setFilterText(e.target.value), style: {
+                            width: '100%',
+                            padding: '8px 12px',
+                            border: '1px solid var(--color-border, #e2e5e9)',
+                            borderRadius: '6px',
+                            fontSize: '13px',
+                            background: 'var(--color-surface-elev, #f5f3f0)',
+                            color: 'var(--dt-text-default)',
+                            boxSizing: 'border-box',
+                        } }) })) : null, _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: filteredTables.map((table, idx) => (_jsx(SingleTable, { table: table, sortable: sortable, tableIndex: idx }, idx))) }), summary_note ? (_jsx("div", { style: {
+                        marginTop: '16px',
+                        padding: '12px 16px',
+                        background: 'var(--dt-surface-alt, rgba(100, 116, 139, 0.06))',
+                        borderRadius: '8px',
+                        borderLeft: '3px solid var(--dt-border-light, rgba(100, 116, 139, 0.25))',
+                    }, children: _jsx("p", { style: {
+                            margin: 0,
+                            fontSize: '13px',
+                            color: 'var(--dt-text-muted)',
+                            lineHeight: '1.55',
+                            fontStyle: 'italic',
+                        }, children: summary_note }) })) : null, _jsxs("div", { style: {
+                        marginTop: '8px',
+                        fontSize: '11px',
+                        color: 'var(--dt-text-faint)',
+                        textAlign: 'right',
+                    }, children: [filteredTables.length, " table", filteredTables.length !== 1 ? 's' : '', ' \u00B7 ', filteredTables.reduce((sum, t) => sum + t.rows.length, 0), " total rows"] })] }));
+    }
+    // ── Single-table fallback (config-driven for structured data) ──
+    const columns = rawColumns
+        ? rawColumns.map(col => typeof col === 'string' ? { key: col, label: col.replace(/_/g, ' ') } : col)
+        : [];
+    const extracted = itemsPath ? getPath(workingData, itemsPath) : workingData;
+    const rows = normalizeToArray(extracted);
+    if (rows.length === 0) {
+        return _jsx("p", { className: "gen-empty", children: "No data available for this table." });
+    }
+    // Build a single TableDef and delegate to SingleTable
+    const autoColumns = columns.length > 0
+        ? columns
+        : Object.keys(rows[0])
+            .filter(k => !k.startsWith('_'))
+            .map(k => ({ key: k, label: k.replace(/_/g, ' ') }));
+    const singleTable = {
+        title: '',
+        columns: autoColumns,
+        rows,
+    };
+    return (_jsxs("div", { className: "gen-table-renderer", children: [filterable ? (_jsx("div", { style: { marginBottom: '12px' }, children: _jsx("input", { type: "text", placeholder: "Filter rows...", value: filterText, onChange: e => setFilterText(e.target.value), style: {
+                        width: '100%',
+                        padding: '6px 10px',
+                        border: '1px solid var(--color-border, #e2e5e9)',
+                        borderRadius: '4px',
+                        fontSize: '13px',
+                        background: 'var(--color-surface-elev, #f5f3f0)',
+                        color: 'var(--dt-text-default)',
+                        boxSizing: 'border-box',
+                    } }) })) : null, _jsx(SingleTable, { table: filterable && filterText.trim()
+                    ? {
+                        ...singleTable,
+                        rows: singleTable.rows.filter(row => autoColumns.some(col => {
+                            const val = row[col.key];
+                            return val != null && String(val).toLowerCase().includes(filterText.toLowerCase());
+                        })),
+                    }
+                    : singleTable, sortable: sortable, tableIndex: 0 })] }));
+}
+//# sourceMappingURL=TableRenderer.js.map

package/dist/renderers/TableRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRenderer.js","sourceRoot":"","sources":["../../src/renderers/TableRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/styles/accordion.css

@@ -0,0 +1,376 @@
+/* =============================================
+ * AccordionRenderer.css
+ * Collapsible section styling for the Humanist
+ * Data Craft design system.
+ *
+ * Uses --dt-* design tokens from DesignTokenContext
+ * and --type, --space, --weight vars from GenealogyPage.css
+ * ============================================= */
+
+/* === Section Wrapper === */
+.gen-accordion-section {
+  margin-bottom: var(--space-sm, 0.5rem);
+}
+
+/* === Deep-link highlight pulse === */
+.gen-accordion-section--highlighted {
+  animation: deeplink-pulse 2s ease-out;
+}
+
+@keyframes deeplink-pulse {
+  0% { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5); }
+  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
+}
+
+/* === Clickable Header === */
+.gen-accordion-header {
+  background: var(--dt-surface-elevated, var(--color-surface-alt, #f9f7f4));
+  border-left: 3px solid var(--dt-border-default, var(--color-border, #e2e5e9));
+  border-radius: var(--radius-md, 8px);
+  padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
+  cursor: pointer;
+  user-select: none;
+  transition: background 150ms ease-out,
+              border-color 150ms ease-out,
+              box-shadow 150ms ease-out;
+}
+
+.gen-accordion-header:hover {
+  background: var(--dt-surface-alt, #f4f1ec);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+
+.gen-accordion-section--expanded > .gen-accordion-header {
+  border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
+  border-left-color: var(--dt-page-accent, #b5343a);
+}
+
+/* === Header Row (chevron + title + badge + controls) === */
+.gen-accordion-header-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm, 0.5rem);
+  min-height: 2.25rem;
+}
+
+/* === Chevron with rotation === */
+.gen-accordion-chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  color: var(--dt-text-faint, var(--color-text-muted, #6b7280));
+  transition: transform 150ms ease-out,
+              color 150ms ease-out;
+  flex-shrink: 0;
+  width: 1.25rem;
+}
+
+.gen-accordion-chevron--open {
+  transform: rotate(90deg);
+  color: var(--dt-page-accent, #b5343a);
+}
+
+/* === Title === */
+.gen-accordion-title {
+  font-size: var(--type-subheading, 1.0625rem);
+  font-weight: var(--weight-medium, 500);
+  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
+  color: var(--dt-text-default, var(--color-text, #1a1d23));
+  line-height: var(--leading-snug, 1.35);
+  flex: 1;
+  min-width: 0;
+}
+
+/* === Count Badge (pill) === */
+.gen-accordion-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.375rem;
+  height: 1.375rem;
+  padding: 0 var(--space-xs, 0.375rem);
+  border-radius: var(--radius-pill, 9999px);
+  font-size: 0.6875rem;
+  font-weight: var(--weight-bold, 700);
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  background: var(--dt-text-faint, #94a3b8);
+  color: var(--dt-surface-default, #fff);
+  flex-shrink: 0;
+  letter-spacing: 0.02em;
+}
+
+.gen-accordion-section--expanded .gen-accordion-count {
+  background: var(--dt-page-accent, #b5343a);
+}
+
+/* === Section Description (italic subtitle below title) === */
+.gen-accordion-description {
+  font-size: var(--type-caption, 0.8125rem);
+  color: var(--dt-text-muted, var(--color-text-muted, #6b7280));
+  font-style: italic;
+  line-height: var(--leading-normal, 1.5);
+  margin-top: var(--space-2xs, 0.25rem);
+  padding-left: 1.75rem; /* align with title (chevron width + gap) */
+  max-width: 72ch;
+}
+
+/* === Preview Text (collapsed only) === */
+.gen-accordion-preview {
+  font-size: var(--type-caption, 0.8125rem);
+  color: var(--dt-text-faint, var(--color-text-faint, #9ca3af));
+  line-height: var(--leading-normal, 1.5);
+  margin-top: var(--space-2xs, 0.125rem);
+  padding-left: 1.75rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+/* === Collapse Animation (CSS Grid trick) === */
+.gen-section-collapse {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.gen-section-collapse.gen-section-expanded {
+  grid-template-rows: 1fr;
+}
+
+.gen-section-collapse-inner {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.gen-section-collapse .gen-section-content {
+  padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
+  border: 1px solid var(--dt-border-light, var(--color-border-light, #eef0f2));
+  border-top: none;
+  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
+  background: var(--dt-surface-default, #ffffff);
+}
+
+/* === Capture status dots (always visible) === */
+.capture-status-dots {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  margin-left: 6px;
+}
+
+.capture-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.capture-status-dot--arsenal { background: #f59e0b; }    /* amber */
+.capture-status-dot--research { background: #6366f1; }    /* indigo */
+.capture-status-dot--answered { background: #22c55e; }    /* green */
+
+/* === Polish pencil hover === */
+.gen-accordion-section:hover .section-polish-pencil {
+  opacity: 1;
+  color: var(--dt-page-accent, #b5343a);
+}
+
+/* =============================================
+ * GenericMiniCard — Used by SubRenderers for
+ * individual items in mini_card_list, etc.
+ * ============================================= */
+
+.gen-mini-card {
+  padding: var(--space-md, 1rem);
+  border-radius: var(--radius-md, 8px);
+  background: var(--dt-surface-default, #ffffff);
+  border: 1px solid var(--dt-border-light, var(--color-border-light, #eef0f2));
+  transition: box-shadow 150ms ease-out,
+              transform 150ms ease-out;
+}
+
+.gen-mini-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transform: translateY(-1px);
+}
+
+.gen-mini-card-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm, 0.5rem);
+  margin-bottom: var(--space-xs, 0.375rem);
+}
+
+.gen-mini-card-name {
+  font-size: var(--type-body, 0.9375rem);
+  font-weight: var(--weight-semibold, 600);
+  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
+  color: var(--dt-text-default, var(--color-text, #1a1d23));
+  line-height: var(--leading-snug, 1.35);
+}
+
+.gen-mini-card-field {
+  margin-bottom: var(--space-xs, 0.25rem);
+}
+
+.gen-mini-card-label {
+  font-size: 0.6875rem;
+  font-weight: var(--weight-medium, 500);
+  color: var(--dt-text-faint, var(--color-text-faint, #9ca3af));
+  text-transform: capitalize;
+  letter-spacing: 0.02em;
+  font-family: 'Inter', -apple-system, sans-serif;
+}
+
+.gen-mini-card-value {
+  font-size: var(--type-caption, 0.8125rem);
+  color: var(--dt-text-muted, var(--color-text-muted, #6b7280));
+  line-height: var(--leading-normal, 1.5);
+}
+
+/* =============================================
+ * GenericSectionRenderer — Fallback renderer
+ * for arbitrary structured data in accordion sections
+ * ============================================= */
+
+.gen-field-label {
+  font-size: 0.6875rem;
+  font-weight: var(--weight-medium, 500);
+  color: var(--dt-text-muted, var(--color-text-muted, #6b7280));
+  text-transform: capitalize;
+  letter-spacing: 0.02em;
+  font-family: 'Inter', -apple-system, sans-serif;
+}
+
+.gen-field-text p {
+  margin: var(--space-xs, 0.25rem) 0;
+  font-size: var(--type-body, 0.9375rem);
+  line-height: var(--leading-relaxed, 1.65);
+  color: var(--dt-text-default, var(--color-text, #1a1d23));
+  max-width: 72ch;
+}
+
+.gen-enum-badge {
+  display: inline-block;
+  padding: 2px var(--space-sm, 0.5rem);
+  border-radius: var(--radius-sm, 4px);
+  font-size: 0.6875rem;
+  font-weight: var(--weight-semibold, 600);
+  font-family: 'Inter', -apple-system, sans-serif;
+}
+
+.gen-chip-grid {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin: var(--space-xs, 0.25rem) 0;
+}
+
+.gen-chip-inline {
+  display: inline-block;
+  padding: 3px var(--space-sm, 0.5rem);
+  border-radius: var(--radius-sm, 4px);
+  font-size: 0.6875rem;
+  background: var(--dt-surface-elevated, #f1f5f9);
+  color: var(--dt-text-muted, #475569);
+  border: 1px solid var(--dt-border-light, #e2e8f0);
+  font-family: 'Inter', -apple-system, sans-serif;
+}
+
+.gen-nested-content {
+  padding-left: var(--space-md, 1rem);
+  border-left: 2px solid var(--dt-border-light, #e2e8f0);
+  margin-top: var(--space-xs, 0.25rem);
+}
+
+.gen-field-row {
+  margin-bottom: var(--space-sm, 0.5rem);
+}
+
+.gen-field-value-inline {
+  margin-left: var(--space-sm, 0.5rem);
+  font-size: var(--type-body, 0.9375rem);
+}
+
+.gen-field-value-block {
+  margin-top: var(--space-2xs, 0.125rem);
+}
+
+.gen-empty-list {
+  font-size: var(--type-caption, 0.8125rem);
+  color: var(--dt-text-faint, var(--color-text-faint, #9ca3af));
+  font-style: italic;
+}
+
+.gen-number-value {
+  font-size: var(--type-body, 0.9375rem);
+  font-weight: var(--weight-medium, 500);
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  color: var(--dt-text-default, #1a1d23);
+}
+
+/* === "show more" / "show less" link styling === */
+.gen-show-more-link {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-size: var(--type-label, 0.6875rem);
+  font-weight: var(--weight-medium, 500);
+  color: var(--dt-page-accent, var(--color-accent, #b5343a));
+  letter-spacing: 0.02em;
+  transition: color 150ms ease;
+}
+
+.gen-show-more-link:hover {
+  color: var(--dt-page-accent-hover, var(--color-accent-hover, #9a2c32));
+  text-decoration: underline;
+}
+
+/* === Subsection heading inside card/accordion (softer) === */
+.gen-subsection-heading {
+  font-size: 0.75rem;
+  font-weight: var(--weight-medium, 500);
+  color: var(--dt-text-muted, var(--color-text-muted, #6b7280));
+  letter-spacing: 0.02em;
+  margin: 0 0 6px 0;
+  text-transform: capitalize;
+}
+
+/* === Keyword tag badge (softer pill) === */
+.gen-keyword-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill, 9999px);
+  font-size: var(--type-label, 0.6875rem);
+  font-weight: var(--weight-medium, 500);
+  background: var(--dt-surface-alt, #f8f9fa);
+  color: var(--dt-text-muted, #6b7280);
+  border: 1px solid var(--dt-border-light, #eef0f2);
+  font-family: 'Inter', -apple-system, sans-serif;
+  letter-spacing: 0.01em;
+}
+
+/* === Inline field label (for METHODOLOGICAL SIGNATURE etc.) === */
+.gen-inline-label {
+  font-size: var(--type-label, 0.6875rem);
+  font-weight: var(--weight-medium, 500);
+  color: var(--dt-text-faint, var(--color-text-faint, #9ca3af));
+  text-transform: capitalize;
+  letter-spacing: 0.02em;
+}
+
+/* === Card grid equal heights === */
+.gen-card-grid-equal {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-md, 1rem);
+  align-items: stretch;
+}
+
+.gen-card-grid-equal > * {
+  display: flex;
+  flex-direction: column;
+}

package/dist/styles/index.css

@@ -0,0 +1,5 @@
+/* @caii/analysis-renderers — Aggregate CSS entry point */
+/* Import this as: import '@caii/analysis-renderers/styles' */
+
+@import './accordion.css';
+@import './renderers.css';