@adaas/a-frame 0.1.1 → 0.1.2

package/examples/components.ts

@@ -0,0 +1,660 @@
+/**
+ * Terminal UI Component Library
+ *
+ * 20 stateless, visually rich terminal components designed for semantic
+ * matching via A_Frame's embedding index. Each component has:
+ *
+ *   - A detailed `description` for accurate vector search matching
+ *   - Typed `metadata.params` for structured param extraction
+ *   - A static `render(params)` method that writes directly to stdout
+ *
+ * Components are grouped by purpose:
+ *
+ *   Typography      Title, Heading, Paragraph, Blockquote, CodeBlock
+ *   Data            BarChart, ProgressBars, ComparisonTable, StatsRow, Timeline
+ *   Cards           ProfileCard, FeatureCard, TestimonialCard, PricingCard
+ *   Lists           BulletList, NumberedList, CheckList
+ *   Media & CTA     ImageBlock, Divider, CallToAction
+ *
+ * Usage:
+ *   import { ALL_COMPONENTS, RENDERERS } from './components';
+ */
+
+import { A_Component } from '@adaas/a-concept';
+import { A_Frame } from '@adaas/a-frame/core';
+
+// ─── Terminal primitives ──────────────────────────────────────────────────────
+
+const ESC = '\x1b[';
+const S = {
+    reset: `${ESC}0m`, bold: `${ESC}1m`, dim: `${ESC}2m`, italic: `${ESC}3m`,
+    underline: `${ESC}4m`,
+    cyan: `${ESC}36m`, bcyan: `${ESC}96m`, green: `${ESC}32m`, bgreen: `${ESC}92m`,
+    yellow: `${ESC}33m`, byellow: `${ESC}93m`, blue: `${ESC}34m`, bblue: `${ESC}94m`,
+    magenta: `${ESC}35m`, bmagenta: `${ESC}95m`,
+    red: `${ESC}31m`, gray: `${ESC}90m`, white: `${ESC}37m`, bwhite: `${ESC}97m`,
+};
+const c = (s: string, ...st: string[]) => st.join('') + s + S.reset;
+
+function wrap(text: string, width = 68): string[] {
+    const words = text.split(/\s+/);
+    const lines: string[] = [];
+    let line = '';
+    for (const w of words) {
+        const next = line ? `${line} ${w}` : w;
+        if (next.length > width) { if (line) lines.push(line); line = w; } else line = next;
+    }
+    if (line) lines.push(line);
+    return lines;
+}
+
+/** Standard draw-params shape shared by all components. */
+export type DrawParams = { content: string } & Record<string, string | undefined>;
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+//  TYPOGRAPHY
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+@A_Frame.Define({
+    description: 'A large centered article title or page headline (H1). The primary top-level heading that introduces an entire article, blog post, or page.',
+    metadata: { params: { headline: 'The headline text to display' } },
+})
+export class Title extends A_Component {
+    static render(p: DrawParams): void {
+        const t = (p.headline ?? p.content).slice(0, 68);
+        const pad = ' '.repeat(Math.max(0, Math.floor((72 - t.length) / 2)));
+        console.log();
+        console.log(c(`${pad}${t}`, S.bold, S.bcyan));
+        console.log(c('═'.repeat(72), S.cyan));
+        console.log();
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A section sub-heading (H2 or H3) that introduces a new topic, chapter, or content group within an article or page.',
+    metadata: { params: { heading: 'The sub-heading text' } },
+})
+export class Heading extends A_Component {
+    static render(p: DrawParams): void {
+        const t = (p.heading ?? p.content).slice(0, 68);
+        console.log();
+        console.log(c(`  ▎ ${t}`, S.bold, S.bblue));
+        console.log(c(`  ${'─'.repeat(Math.min(t.length + 3, 70))}`, S.blue));
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A block of narrative prose — a paragraph of descriptive text, explanation, introduction, body content, or conclusion. Use for any general-purpose running text.',
+    metadata: { params: { text: 'The paragraph text to display' } },
+})
+export class Paragraph extends A_Component {
+    static render(p: DrawParams): void {
+        console.log();
+        for (const l of wrap(p.text ?? p.content)) {
+            console.log(c(`  ${l}`, S.white));
+        }
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A styled block quote, pull quote, or highlighted excerpt. Use for notable quotes, testimonials without attribution, key takeaways, or emphasized passages pulled from content.',
+    metadata: { params: { quote: 'The quoted or highlighted text' } },
+})
+export class Blockquote extends A_Component {
+    static render(p: DrawParams): void {
+        const lines = wrap(p.quote ?? p.content, 64);
+        console.log();
+        console.log(c('  ┃', S.magenta));
+        for (const l of lines) {
+            console.log(c('  ┃ ', S.magenta) + c(l, S.italic, S.white));
+        }
+        console.log(c('  ┃', S.magenta));
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A formatted code block or code snippet with a language label. Use for source code examples, configuration samples, terminal commands, or technical code listings.',
+    metadata: {
+        params: {
+            code: 'The code or command text to display',
+            language: 'Programming language or context label (e.g. "python", "bash", "json")',
+        },
+    },
+})
+export class CodeBlock extends A_Component {
+    static render(p: DrawParams): void {
+        const lang = p.language ?? '';
+        const code = p.code ?? p.content;
+        const lines = code.split('\n').slice(0, 12);
+        const w = 70;
+        console.log();
+        console.log(c(`  ┌${'─'.repeat(w)}┐`, S.gray));
+        if (lang) {
+            console.log(c('  │ ', S.gray) + c(lang.toUpperCase(), S.dim, S.bold) + ' '.repeat(Math.max(0, w - lang.length - 2)) + c(' │', S.gray));
+            console.log(c(`  ├${'─'.repeat(w)}┤`, S.gray));
+        }
+        for (const line of lines) {
+            const display = line.slice(0, w - 2);
+            console.log(c('  │ ', S.gray) + c(display, S.green) + ' '.repeat(Math.max(0, w - display.length - 2)) + c(' │', S.gray));
+        }
+        console.log(c(`  └${'─'.repeat(w)}┘`, S.gray));
+    }
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+//  DATA VISUALIZATION
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+@A_Frame.Define({
+    description: 'A horizontal bar chart comparing numeric values across named categories. Use for rankings, popularity comparisons, survey results, scores, or any data where items are ranked or compared by magnitude.',
+    metadata: {
+        params: {
+            labels: 'Comma-separated category names (e.g. "JavaScript, Python, Rust")',
+            values: 'Comma-separated numeric values matching labels (e.g. "68, 55, 23")',
+            title: 'Optional chart title or caption',
+        },
+    },
+})
+export class BarChart extends A_Component {
+    static render(p: DrawParams): void {
+        const lbls = p.labels?.split(',').map(s => s.trim()).filter(Boolean) ?? [];
+        const vals = p.values?.split(',').map(s => parseFloat(s.trim())).filter(n => !isNaN(n)) ?? [];
+        const max = Math.max(...vals, 1);
+        const barW = 28;
+        console.log();
+        if (p.title) console.log(c(`  ${p.title}`, S.dim, S.bold));
+        console.log();
+        for (let i = 0; i < vals.length; i++) {
+            const filled = Math.round((vals[i] / max) * barW);
+            console.log(
+                `  ${(lbls[i] ?? `#${i + 1}`).slice(0, 16).padEnd(16)} ` +
+                c('█'.repeat(filled), S.magenta) +
+                c('░'.repeat(barW - filled), S.gray) +
+                c(` ${vals[i]}`, S.dim),
+            );
+        }
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A set of labeled progress bars showing completion percentages or skill levels. Use for skill ratings, project progress, completion metrics, or any percentage-based comparison.',
+    metadata: {
+        params: {
+            labels: 'Comma-separated item names (e.g. "Frontend, Backend, DevOps")',
+            percents: 'Comma-separated percentage values 0–100 (e.g. "90, 75, 60")',
+        },
+    },
+})
+export class ProgressBars extends A_Component {
+    static render(p: DrawParams): void {
+        const lbls = p.labels?.split(',').map(s => s.trim()).filter(Boolean) ?? [];
+        const pcts = p.percents?.split(',').map(s => parseInt(s.trim(), 10)).filter(n => !isNaN(n)) ?? [];
+        const barW = 24;
+        console.log();
+        for (let i = 0; i < pcts.length; i++) {
+            const pct = Math.min(100, Math.max(0, pcts[i]));
+            const filled = Math.round((pct / 100) * barW);
+            const color = pct >= 75 ? S.bgreen : pct >= 40 ? S.byellow : S.red;
+            console.log(
+                `  ${(lbls[i] ?? `Item ${i + 1}`).slice(0, 18).padEnd(18)} ` +
+                c('━'.repeat(filled), color) +
+                c('━'.repeat(barW - filled), S.gray) +
+                c(` ${pct}%`, S.dim),
+            );
+        }
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A structured data table with rows and columns for side-by-side comparisons, specifications, or attribute-value pairs. Use when information is best presented in tabular grid format.',
+    metadata: {
+        params: {
+            rows: 'JSON array of {attribute, value} objects (e.g. [{"attribute":"Size","value":"Large"}])',
+            caption: 'Optional table title or description',
+        },
+    },
+})
+export class ComparisonTable extends A_Component {
+    static render(p: DrawParams): void {
+        let data: Array<{ attribute: string; value: string }> = [];
+        try { if (p.rows) data = JSON.parse(p.rows); } catch { /* skip */ }
+        if (!data.length) {
+            // Fallback: parse "Key | Value" lines from content
+            p.content.split('\n').filter(l => l.includes('|')).forEach(l => {
+                const [a, v] = l.split('|').map(s => s.trim());
+                if (a && v) data.push({ attribute: a, value: v });
+            });
+        }
+        if (!data.length) return;
+
+        const c1 = 20, c2 = 38;
+        const hr = (l: string, m: string, r: string) =>
+            c(`  ${l}${'─'.repeat(c1 + 2)}${m}${'─'.repeat(c2 + 2)}${r}`, S.gray);
+
+        console.log();
+        if (p.caption) console.log(c(`  ${p.caption}`, S.dim, S.bold) + '\n');
+        console.log(hr('┌', '┬', '┐'));
+        for (const r of data.slice(0, 10)) {
+            const attr = String(r.attribute).slice(0, c1).padEnd(c1);
+            const val  = String(r.value).slice(0, c2).padEnd(c2);
+            console.log(c('  │ ', S.gray) + c(attr, S.bold, S.cyan) + c(' │ ', S.gray) + c(val, S.white) + c(' │', S.gray));
+        }
+        console.log(hr('└', '┴', '┘'));
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A row of 2–4 key statistics or metrics displayed side by side in a compact horizontal layout. Use for KPI dashboards, quick stats summaries, or highlighting multiple numbers at once.',
+    metadata: {
+        params: {
+            stats: 'Comma-separated "value label" pairs (e.g. "1.2M users, 99.9% uptime, 50ms latency")',
+        },
+    },
+})
+export class StatsRow extends A_Component {
+    static render(p: DrawParams): void {
+        const items = p.stats?.split(',').map(s => s.trim()).filter(Boolean).slice(0, 4) ?? [];
+        if (!items.length) return;
+
+        const cellW = Math.floor(70 / items.length);
+        console.log();
+        console.log(c(`  ${'┬'.padStart(1, '╶')}${'─'.repeat(cellW)}`.repeat(items.length).slice(0, 72), S.gray));
+
+        let valLine = '', lblLine = '';
+        for (const item of items) {
+            // Split on first whitespace: number + any non-whitespace suffix (e.g. "50ms", "99.9%") then label
+            const match = item.match(/^([\d.,]+\S*)\s+(.+)$/);
+            const val   = match ? match[1] : item;
+            const label = match ? match[2] : '';
+            valLine += c(`  ${val.slice(0, cellW - 2).padEnd(cellW - 2)}`, S.bold, S.bgreen);
+            lblLine += c(`  ${label.slice(0, cellW - 2).padEnd(cellW - 2)}`, S.dim);
+        }
+        console.log(valLine);
+        console.log(lblLine);
+        console.log(c(`  ${'┴'.padStart(1, '╶')}${'─'.repeat(cellW)}`.repeat(items.length).slice(0, 72), S.gray));
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A vertical timeline showing events, milestones, or steps in chronological or sequential order. Use for history, roadmaps, project phases, step-by-step processes, or event sequences.',
+    metadata: {
+        params: {
+            events: 'Comma-separated "date/label: description" pairs (e.g. "2020: Founded the company, 2022: Series A funding, 2024: IPO")',
+        },
+    },
+})
+export class Timeline extends A_Component {
+    static render(p: DrawParams): void {
+        const items = p.events?.split(',').map(s => s.trim()).filter(Boolean) ?? [];
+        console.log();
+        for (let i = 0; i < items.length; i++) {
+            const isLast = i === items.length - 1;
+            const [label, ...rest] = items[i].split(':');
+            const desc = rest.join(':').trim();
+            const connector = isLast ? '╰' : '├';
+            const pipe      = isLast ? ' ' : '│';
+
+            console.log(c(`  ${connector}──`, S.cyan) + c(' ● ', S.bcyan, S.bold) + c(label.trim(), S.bold, S.white));
+            if (desc) {
+                console.log(c(`  ${pipe}`, S.cyan) + c(`     ${desc.slice(0, 62)}`, S.dim));
+            }
+            if (!isLast) console.log(c('  │', S.cyan));
+        }
+    }
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+//  CARDS
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+@A_Frame.Define({
+    description: 'A compact profile or identity card showing labeled attributes for a person, breed, product, city, or any entity with key properties. Displays a name/title and a structured list of traits.',
+    metadata: {
+        params: {
+            name: 'The entity name or title',
+            traits: 'Comma-separated "Label: value" pairs (e.g. "Founded: 1998, HQ: Berlin, Employees: 450")',
+        },
+    },
+})
+export class ProfileCard extends A_Component {
+    static render(p: DrawParams): void {
+        const name = p.name ?? 'Profile';
+        const traits = p.traits?.split(',').map(s => s.trim()).filter(Boolean) ?? [];
+        const w = 62;
+
+        console.log();
+        console.log(c(`  ╭${'─'.repeat(w)}╮`, S.yellow));
+        console.log(c('  │ ', S.yellow) + c(name.slice(0, w - 2).padEnd(w - 2), S.bold, S.bwhite) + c(' │', S.yellow));
+        console.log(c(`  ├${'─'.repeat(w)}┤`, S.yellow));
+        for (const t of traits.slice(0, 6)) {
+            const [lbl, ...valParts] = t.split(':');
+            const val = valParts.join(':').trim();
+            if (val) {
+                // Compute padding from raw string lengths (ANSI codes must not influence padEnd)
+                const lbW = 16;
+                const lbl_raw = lbl.trim().slice(0, lbW).padEnd(lbW);
+                const val_raw = val.slice(0, w - lbW - 4);  // w - lbl - '  ' - ' │'
+                const padding = ' '.repeat(Math.max(0, w - 2 - lbW - 2 - val_raw.length));
+                console.log(c('  │ ', S.yellow) + c(lbl_raw, S.dim) + '  ' + c(val_raw, S.white) + padding + c(' │', S.yellow));
+            } else {
+                console.log(c('  │ ', S.yellow) + c(t.slice(0, w - 2).padEnd(w - 2), S.white) + c(' │', S.yellow));
+            }
+        }
+        console.log(c(`  ╰${'─'.repeat(w)}╯`, S.yellow));
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A feature highlight card with an emoji icon, title, and short description. Use for showcasing product features, service benefits, capabilities, or key selling points.',
+    metadata: {
+        params: {
+            icon: 'An emoji representing the feature (e.g. "🚀", "🔒", "⚡")',
+            title: 'Short feature name or benefit',
+            description: 'One or two sentences explaining the feature',
+        },
+    },
+})
+export class FeatureCard extends A_Component {
+    static render(p: DrawParams): void {
+        const icon = p.icon ?? '◆';
+        const title = p.title ?? p.content.split('.')[0] ?? '';
+        const desc = p.description ?? p.content;
+        const w = 62;
+
+        console.log();
+        console.log(c(`  ┌${'─'.repeat(w)}┐`, S.bblue));
+        // icon is assumed 2 terminal columns wide (emoji); add 2 spaces → 4 visual cols total
+        const iconBlock = `${icon.charAt(0)}  `;
+        const titleRaw = title.slice(0, w - 6);  // w - 2 (inner margin) - 4 (iconBlock visual)
+        const titlePad = ' '.repeat(Math.max(0, w - 2 - 4 - titleRaw.length));
+        console.log(c('  │ ', S.bblue) + iconBlock + c(titleRaw, S.bold, S.bwhite) + titlePad + c(' │', S.bblue));
+        console.log(c(`  ├${'─'.repeat(w)}┤`, S.bblue));
+        for (const l of wrap(desc, w - 4).slice(0, 3)) {
+            console.log(c('  │ ', S.bblue) + c(l, S.dim) + ' '.repeat(Math.max(0, w - l.length - 2)) + c(' │', S.bblue));
+        }
+        console.log(c(`  └${'─'.repeat(w)}┘`, S.bblue));
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A testimonial card displaying a quote with attribution — the person\'s name and role. Use for customer reviews, endorsements, user feedback, expert opinions, or any attributed quote.',
+    metadata: {
+        params: {
+            quote: 'The testimonial or review text',
+            author: 'Name of the person giving the testimonial',
+            role: 'Title, company, or context of the author (e.g. "CEO at Acme Corp")',
+        },
+    },
+})
+export class TestimonialCard extends A_Component {
+    static render(p: DrawParams): void {
+        const quote  = p.quote ?? p.content;
+        const author = p.author ?? '';
+        const role   = p.role ?? '';
+        const w = 62;
+
+        console.log();
+        console.log(c(`  ┌${'─'.repeat(w)}┐`, S.magenta));
+        console.log(c('  │ ', S.magenta) + c('❝', S.bmagenta, S.bold) + ' '.repeat(w - 3) + c(' │', S.magenta));
+        for (const l of wrap(quote, w - 6).slice(0, 4)) {
+            console.log(c('  │ ', S.magenta) + c(`  ${l}`, S.italic, S.white) + ' '.repeat(Math.max(0, w - l.length - 4)) + c(' │', S.magenta));
+        }
+        console.log(c('  │ ', S.magenta) + ' '.repeat(w - 2) + c(' │', S.magenta));
+        const attribution = author ? `— ${author}${role ? `, ${role}` : ''}` : '';
+        if (attribution) {
+            console.log(c('  │ ', S.magenta) + ' '.repeat(Math.max(0, w - attribution.length - 4)) + c(attribution.slice(0, w - 4), S.dim, S.bold) + '  ' + c(' │', S.magenta));
+        }
+        console.log(c(`  └${'─'.repeat(w)}┘`, S.magenta));
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A pricing tier or plan card showing a plan name, price, and list of included features. Use for SaaS pricing pages, subscription tiers, plan comparisons, or package offerings.',
+    metadata: {
+        params: {
+            plan: 'Plan name (e.g. "Pro", "Enterprise")',
+            price: 'Price string (e.g. "$29/mo", "Free", "$199/year")',
+            features: 'Comma-separated feature list (e.g. "Unlimited users, Priority support, API access")',
+        },
+    },
+})
+export class PricingCard extends A_Component {
+    static render(p: DrawParams): void {
+        const plan = p.plan ?? 'Plan';
+        const price = p.price ?? '';
+        const features = p.features?.split(',').map(s => s.trim()).filter(Boolean) ?? [];
+        const w = 40;
+
+        console.log();
+        console.log(c(`  ╔${'═'.repeat(w)}╗`, S.bcyan));
+        const planPad = ' '.repeat(Math.max(0, Math.floor((w - plan.length) / 2)));
+        console.log(c('  ║', S.bcyan) + c(`${planPad}${plan.slice(0, w)}`, S.bold, S.bwhite) + ' '.repeat(Math.max(0, w - planPad.length - plan.length)) + c('║', S.bcyan));
+        if (price) {
+            const pricePad = ' '.repeat(Math.max(0, Math.floor((w - price.length) / 2)));
+            console.log(c('  ║', S.bcyan) + c(`${pricePad}${price.slice(0, w)}`, S.bold, S.bgreen) + ' '.repeat(Math.max(0, w - pricePad.length - price.length)) + c('║', S.bcyan));
+        }
+        console.log(c(`  ╠${'═'.repeat(w)}╣`, S.bcyan));
+        for (const f of features.slice(0, 6)) {
+            console.log(c('  ║', S.bcyan) + c(' ✓ ', S.green) + c(f.slice(0, w - 4), S.white) + ' '.repeat(Math.max(0, w - f.length - 4)) + c(' ║', S.bcyan));
+        }
+        console.log(c(`  ╚${'═'.repeat(w)}╝`, S.bcyan));
+    }
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+//  LISTS
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+@A_Frame.Define({
+    description: 'A bulleted list of items, traits, tips, characteristics, or enumerated points. Use when content is a set of parallel items without inherent ordering.',
+    metadata: { params: { items: 'Comma-separated list items (max 8)' } },
+})
+export class BulletList extends A_Component {
+    static render(p: DrawParams): void {
+        const items = p.items?.split(',').map(s => s.trim()).filter(Boolean) ?? [];
+        console.log();
+        for (const item of items.slice(0, 8)) {
+            console.log(c('  •', S.cyan) + c(` ${item.slice(0, 66)}`, S.white));
+        }
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A numbered list showing ordered steps, a ranked sequence, instructions, or a procedure. Use when the order or ranking of items matters.',
+    metadata: { params: { items: 'Comma-separated list items in order (max 8)' } },
+})
+export class NumberedList extends A_Component {
+    static render(p: DrawParams): void {
+        const items = p.items?.split(',').map(s => s.trim()).filter(Boolean) ?? [];
+        console.log();
+        for (let i = 0; i < Math.min(items.length, 8); i++) {
+            const num = c(`  ${String(i + 1).padStart(2)}.`, S.bcyan, S.bold);
+            console.log(`${num} ${c(items[i].slice(0, 64), S.white)}`);
+        }
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A checklist with completed and pending items. Use for task lists, requirements, feature comparisons showing what is and isn\'t included, or prerequisite checklists.',
+    metadata: {
+        params: {
+            done: 'Comma-separated completed items',
+            pending: 'Comma-separated pending or missing items',
+        },
+    },
+})
+export class CheckList extends A_Component {
+    static render(p: DrawParams): void {
+        const done    = p.done?.split(',').map(s => s.trim()).filter(Boolean) ?? [];
+        const pending = p.pending?.split(',').map(s => s.trim()).filter(Boolean) ?? [];
+        console.log();
+        for (const item of done.slice(0, 6)) {
+            console.log(c('  ✔ ', S.green) + c(item.slice(0, 64), S.white));
+        }
+        for (const item of pending.slice(0, 4)) {
+            console.log(c('  ○ ', S.gray) + c(item.slice(0, 64), S.dim));
+        }
+    }
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+//  MEDIA & CALL-TO-ACTION
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+@A_Frame.Define({
+    description: 'An image placeholder with a descriptive caption. Use when content references a photo, illustration, diagram, screenshot, map, or any visual asset.',
+    metadata: { params: { caption: 'Descriptive caption for the image' } },
+})
+export class ImageBlock extends A_Component {
+    static render(p: DrawParams): void {
+        const caption = (p.caption ?? p.content).slice(0, 56);
+        const w = 66;
+        console.log();
+        console.log(c(`  ╭${'─'.repeat(w)}╮`, S.gray));
+        console.log(c('  │', S.gray) + ' '.repeat(w) + c('│', S.gray));
+        // Compute padding from raw string (never call padEnd on a colored string)
+        const captionRaw = `  ◻  ${caption}`;
+        console.log(c('  │', S.gray) + c(captionRaw, S.dim) + ' '.repeat(Math.max(0, w - captionRaw.length)) + c('│', S.gray));
+        console.log(c('  │', S.gray) + ' '.repeat(w) + c('│', S.gray));
+        console.log(c(`  ╰${'─'.repeat(w)}╯`, S.gray));
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A visual divider or separator between content sections, optionally with a centered label. Use to create visual breaks or transitions between major parts of an article.',
+    metadata: { params: { label: 'Optional centered label text (e.g. "• • •", "Part Two")' } },
+})
+export class Divider extends A_Component {
+    static render(p: DrawParams): void {
+        const label = p.label ?? '';
+        console.log();
+        if (label) {
+            const side = Math.max(0, Math.floor((68 - label.length) / 2));
+            console.log(
+                c(`  ${'─'.repeat(side)}`, S.gray) +
+                c(` ${label} `, S.dim) +
+                c('─'.repeat(Math.max(0, 68 - side - label.length)), S.gray),
+            );
+        } else {
+            console.log(c(`  ${'· '.repeat(36)}`, S.gray));
+        }
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+@A_Frame.Define({
+    description: 'A prominent call-to-action button or banner with a short action label. Use for "Learn More", "Sign Up", "Get Started", "View Details", download links, or any clickable action prompt.',
+    metadata: {
+        params: {
+            label: 'Short action text (e.g. "Get Started Free", max 5 words)',
+            url: 'Optional URL or link target',
+        },
+    },
+})
+export class CallToAction extends A_Component {
+    static render(p: DrawParams): void {
+        const label = (p.label ?? p.content).slice(0, 36).trim();
+        const url   = p.url ?? '';
+        const inner = `  ${label}  `;
+        const w = inner.length;
+        const pad = ' '.repeat(Math.max(0, Math.floor((70 - w) / 2)));
+
+        console.log();
+        console.log(`${pad}${c(`╔${'═'.repeat(w)}╗`, S.bgreen)}`);
+        console.log(`${pad}${c('║', S.bgreen)}${c(inner, S.bold, S.bwhite)}${c('║', S.bgreen)}`);
+        console.log(`${pad}${c(`╚${'═'.repeat(w)}╝`, S.bgreen)}`);
+        if (url) {
+            console.log(`${pad}${c(`  → ${url}`, S.dim)}`);
+        }
+    }
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+//  STAT CALLOUT (standalone)
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+@A_Frame.Define({
+    description: 'A highlighted callout box for a single notable statistic, surprising number, fun fact, or key metric. Draws attention to one prominent data point with brief context.',
+    metadata: {
+        params: {
+            stat: 'The key number, percentage, or fact (e.g. "4.7 billion", "73%", "30 years")',
+            context: 'A brief label explaining what the stat means',
+        },
+    },
+})
+export class StatCallout extends A_Component {
+    static render(p: DrawParams): void {
+        const stat = (p.stat ?? '★').slice(0, 20);
+        const ctx  = (p.context ?? p.content).slice(0, 48);
+        const w = 64;
+
+        console.log();
+        console.log(c(`  ╔${'═'.repeat(w)}╗`, S.bgreen));
+        console.log(
+            c('  ║  ', S.bgreen) +
+            c(stat, S.bold, S.bwhite) +
+            c('  │  ', S.bgreen) +
+            c(ctx, S.dim) +
+            ' '.repeat(Math.max(0, w - stat.length - ctx.length - 7)) +
+            c('║', S.bgreen),
+        );
+        console.log(c(`  ╚${'═'.repeat(w)}╝`, S.bgreen));
+    }
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+//  EXPORTS
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+/** All component classes — pass to A_Container({ components: ALL_COMPONENTS }) */
+export const ALL_COMPONENTS = [
+    // Typography
+    Title, Heading, Paragraph, Blockquote, CodeBlock,
+    // Data
+    BarChart, ProgressBars, ComparisonTable, StatsRow, Timeline,
+    // Cards
+    ProfileCard, FeatureCard, TestimonialCard, PricingCard,
+    // Lists
+    BulletList, NumberedList, CheckList,
+    // Media & CTA
+    ImageBlock, Divider, CallToAction,
+    // Standalone
+    StatCallout,
+];
+
+/** Map of component name → render function for quick dispatch */
+export const RENDERERS = new Map<string, (p: DrawParams) => void>(
+    ALL_COMPONENTS.map(Comp => [
+        Comp.name,
+        (p: DrawParams) => (Comp as any).render(p),
+    ]),
+);