/* global React, Card, CardHeader, Button, Badge, Icon, PageHeader,
stack, phases, accents, automationDomains, healthCategories,
orgRolePhases, personalDevAreas */
// ===========================================================================
// Small shared visual atoms
// ===========================================================================
function AccentRule({ tone = "neutral", style }) {
return (
);
}
function LayerLabel({ children }) {
return (
{children}
);
}
function MetaLine({ children }) {
return (
{children}
);
}
// Connector arrow between layers (subtle)
function Connector({ count = 1 }) {
return (
{Array.from({ length: count }).map((_, i) => (
))}
{title}
{badge && {badge}}
{italic &&
{italic}
}
{lines.length > 0 && (
{lines.map((l, i) => - {l}
)}
)}
{children}
);
}
const pad = dense ? "10px 10px 8px" : "14px 14px 12px";
const titleSize = dense ? "var(--text-xs)" : "var(--text-sm)";
const lineSize = dense ? "var(--text-xs)" : "var(--text-sm)";
return (
{title}
{badge && {badge}}
{italic && (
{italic}
)}
{lines.length > 0 && (
{lines.map((l, i) => (
- {l}
))}
)}
{children}
{cadence && (
{cadence}
)}
{source &&
{source}}
{meta &&
{meta}}
);
}
// ===========================================================================
// Layer renderers (one per shape pattern in the diagram)
// ===========================================================================
function SourcesLayer({ layer, dense }) {
const gap = dense ? 8 : 10;
const cols = dense ? "repeat(3, minmax(0, 1fr))" : "repeat(6, 1fr)";
return (
{layer.cards.map((c, i) => )}
);
}
function DashboardLayer({ layer, dense }) {
const gap = dense ? 8 : 10;
const cols = layer.cards.length >= 6 || dense
? "repeat(3, minmax(0, 1fr))"
: "repeat(5, 1fr)";
return (
{layer.cards.map((c, i) => )}
);
}
function ETLLayer({ layer, dense }) {
const gap = dense ? 8 : 10;
return (
{layer.splitCards.map((card, i) => (
))}
);
}
function ETLPanel({ title, accent, inner, footer, rules, dense }) {
const pad = dense ? 10 : 14;
return (
{title}
{inner.map((p, i) => (
{p.name}
{p.sub}
{p.meta &&
{p.meta}}
))}
{footer && (
{footer[0]}
{footer[1].map((chip, i) => (
{chip}
))}
)}
{rules && (
{rules.map((r, i) => (
- {r}
))}
)}
);
}
function StoreLayer({ layer, dense }) {
const gap = dense ? 8 : 10;
const n = layer.threeCol?.length || 3;
const cols = dense
? "minmax(0, 1fr)"
: `repeat(${n}, minmax(0, 1fr))`;
return (
{layer.threeCol.map((card, i) => )}
);
}
function StoreCard({ title, accent, sub, cols, rules, dense }) {
const pad = dense ? 10 : 14;
return (
{title}
{sub}
{cols && (
{cols.map((col, i) => (
{col.name}
{col.items.map((it, j) => (
- {it}
))}
))}
)}
{rules && (
{rules.map((r, i) => (
-
{r.rule}
{r.label}
))}
)}
);
}
function AILayer({ layer, dense }) {
const gap = dense ? 8 : 10;
const cols = dense ? "minmax(0, 1fr)" : "minmax(0, 1fr) minmax(0, 1.8fr)";
return (
{layer.splitCards.map((card, i) => (
card.channels ? :
))}
);
}
function ChannelsPanel({ title, accent, channels, dense }) {
const pad = dense ? 10 : 14;
const channelCols = dense ? "repeat(2, minmax(0, 1fr))" : "repeat(4, 1fr)";
return (
{title}
{channels.map((c, i) => (
{c.name}
{c.lines.map((l, j) => (
- {l}
))}
{c.meta}
))}
);
}
// ===========================================================================
// Main: stack diagram
// ===========================================================================
function StackDiagram({ dense }) {
const layers = stack.map((layer, idx) => (
{idx !== stack.length - 1 && (
)}
));
if (dense) {
return {layers}
;
}
return (
Operating intelligence stack
{layers}
);
}
function StackLayer({ layer, dense }) {
return (
{layer.label}
{layer.note &&
{layer.note}
}
{layer.id === "sources" &&
}
{layer.id === "etl" &&
}
{layer.id === "store" &&
}
{layer.id === "dashboard" &&
}
{layer.id === "ai" &&
}
);
}
// ===========================================================================
// Where automation applies — domain cards
// ===========================================================================
const levelStyle = {
"Fully automatable": { fg: "var(--positive)", bg: "var(--positive-bg)" },
"High leverage": { fg: "var(--fg)", bg: "var(--neutral-100)" },
"Mostly automatable": { fg: "var(--fg-muted)", bg: "var(--neutral-100)" },
};
function AutomationDomains({ dense }) {
return (
{!dense &&
Standard operations
}
{automationDomains.map((d, i) => (
))}
{dense ? (
{domain.title}
) : (
<>
{String(index + 1).padStart(2, "0")}
{domain.title}
{domain.level}
)}
{domain.summary}
{domain.groups ? (
{domain.groups.map((g, i) => (
))}
) : (
)}
);
}
function DomainGroup({ label, items }) {
return (
{label}
{items.map((it, j) => - {it}
)}
);
}
function DomainItems({ items }) {
return (
{items.map((it, j) => - {it}
)}
);
}
// ===========================================================================
// Administrative layer health
// ===========================================================================
function HealthGrid() {
return (
Core health lenses
Four lenses · always-on
{healthCategories.map((h, i) => (
))}
);
}
function HealthCard({ h, index }) {
return (
{String(index + 1).padStart(2, "0")}
{h.title}
{h.cadence}
{h.items.map((it, j) => - {it}
)}
);
}
// ===========================================================================
// Systems evolution — assignment (shared Q&A layout with Approach)
// ===========================================================================
/* global QAPage, QASectionList, QAVisual, QAGrid, QATile, QAMatrix, QARefPage */
function DomainTile({ domain }) {
const tone = levelStyle[domain.level];
return (
{domain.title}
{domain.level}
{domain.summary}
{domain.items && (
{domain.items.slice(0, 4).map((it, j) => - {it}
)}
)}
);
}
function HealthTile({ h }) {
return (
{h.title}
{h.cadence}
{h.items.map((it, j) => - {it}
)}
);
}
function SystemsAnswerVisual({ visual }) {
if (!visual) return null;
if (visual.stackLayer) {
const layer = stack.find((l) => l.id === visual.stackLayer);
if (!layer) return null;
const cols = visual.cols || Math.min(layer.cards?.length || 3, 3);
return (
{layer.cards && (
{layer.cards.map((c, i) => )}
)}
{layer.splitCards && visual.stackLayer === "etl" && (
{layer.splitCards.map((card, i) => (
{card.inner.map((p, j) => (
{p.name} — {p.sub}
))}
))}
)}
{layer.splitCards && visual.stackLayer === "ai" && (
{layer.splitCards[0].inner.map((p, j) => (
{p.name}: {p.sub}
))}
{layer.splitCards[1].channels.map((c, j) => (
{c.lines.slice(0, 2).map((l, k) => {l}
)}
))}
)}
);
}
if (visual.stackPath) {
const layers = ["sources", "etl", "store", "dashboard", "ai"];
return (
{layers.map((id) => {
const layer = stack.find((l) => l.id === id);
if (!layer) return null;
return (
{layer.label}
{layer.note}
);
})}
{p.phase}
{p.desc}
{p.focus.map((f, j) => - {f}
)}
))}
);
}
if (visual.personalDev) {
return (
);
}
if (visual.alerts) {
const store = stack.find((l) => l.id === "store");
const rules = store?.threeCol?.find((c) => c.rules)?.rules || [];
return (
{rules.map((r, i) => (
{r.rule}
))}