/* global React, PageShell, AGGIE_CATALOG, LucideIcon */
/*
* AggieAIStudio.jsx — INF-3 batch: new TUX components for AI + dashboard surfaces.
*
* Adaptive card — structured response card for AI/agent output, structured
* tool results, and chat-embedded information. Sits inside
* conversational surfaces (tti-ai-studio) or as inline
* results in research apps. Distinct from `card-groups` (an
* editorial card collection) and from `callouts` (inline body
* highlight): adaptive-card is content rendered FROM tool
* output or an agent action, not authored editorial copy.
* Metric tile — single-statistic dashboard tile. Title + 1–3 data points
* with descriptive labels + optional trend delta + optional
* CTA. Distinct from `factoids` (a hero row of giant numbers
* for marketing) and `stat-comparison` (side-by-side hero
* stats): metric-tile is small enough to tile in a
* dashboard grid, with hover affordance and a "view details"
* drill-in.
*
* Lineage (INF-3):
* • Adaptive card — anatomy informed by Microsoft Teams Adaptive Cards
* (16 frames: Anatomy, Behavior, Starter-Cards,
* Inspiration-Gallery). Teams ships a "container with
* stacked elements + action row" pattern; TUX adopts
* the structure and swaps in: TTI editorial typography
* for the title, JetBrains Mono for inline numbers,
* maroon ghost-link CTA, signature-rule under the title
* on hero variants.
* • Metric tile — anatomy informed by Teams Data-visualization Number
* chart (25 frames in the Data-visualization page).
* Teams uses a 296×304 card with title, 1–3 stacked
* numbers, and a "View details" link. TUX adopts the
* anatomy and adds: trend delta with arrow + tone,
* tabular-nums numerics, JetBrains Mono labels, maroon
* primary numbers.
*
* Identity stays TUX: maroon brand, Work Sans 700 caps for labels, JetBrains
* Mono for numerics, two-ring focus. Never lift Segoe UI or Teams purple.
*
* Helper prefix: AC (AICard). Local helpers — never import a generic
* SectionLabel/Box/Spec from another batch (Babel scope collisions).
*/
// ════════════════════════════════════════════════════════════════════════
// Shared helpers (AC prefix)
// ════════════════════════════════════════════════════════════════════════
function ACBox({ dark = false, label, padded = true, children }) {
return (
{label}on {dark ? "dark" : "light"}
{children}
);
}
function ACSectionLabel({ children }) {
return (
);
}
// ════════════════════════════════════════════════════════════════════════
// ADAPTIVE CARD PAGE
// ════════════════════════════════════════════════════════════════════════
function AdaptiveCardPage() {
const item = (window.AGGIE_CATALOG || []).find(c => c.id === "adaptive-card");
return (
Structured response card for AI agents and tool output, rendered inside
conversational surfaces (tti-ai-studio) or as inline results in research apps.
Composes from five slots: source header (sender + timestamp + menu),
title, body (rich content), attachments (file/data references), and an action
row. Tones map the alerts vocabulary — use sparingly; most cards are{" "}
default (no accent).
1 · Minimal — title + body + action
);
}
// ════════════════════════════════════════════════════════════════════════
// METRIC TILE PAGE
// ════════════════════════════════════════════════════════════════════════
function MetricTilePage() {
const item = (window.AGGIE_CATALOG || []).find(c => c.id === "metric-tile");
return (
Small dashboard tile for a single statistic — title + 1–3 data points +
optional trend delta + optional drill-in CTA. Tile-sized for grid composition
(typically 4-up across a 1280px dashboard width). Distinct from{" "}
factoids, which is a hero row of giant numbers for marketing
landing pages, and stat-comparison, which is the side-by-side
before/after treatment. Use metric-tile for operational dashboards.
1 · Single point — the canonical KPI tile
{} }}
/>
{} }}
/>
{} }}
/>
2 · Multiple points — stacked metrics under one title