/* JRNI UI primitives — buttons, fields, pills, avatars, tables, toast, modal.
* Exported to window: Button, IconBtn, Pill, Chip, Avatar, Field, Input, Textarea,
* Select, Toggle, Checkbox, Radio, Modal, Toast, Drawer, Tabs, Card, KV, Empty.
*/
const { useState, useEffect, useRef } = React;
/* ─── Buttons ──────────────────────────────────────────────────────────── */
function Button({ children, variant = "primary", size = "md", icon, iconRight, onClick, disabled, type = "button", fullWidth, style }) {
const sizes = {
sm: { height: 28, padding: "0 10px", fontSize: 13 },
md: { height: 36, padding: "0 14px", fontSize: 14 },
lg: { height: 44, padding: "0 18px", fontSize: 15 },
};
const variants = {
primary: {
background: "var(--jrni-color-primary-1)", color: "white", border: "1px solid var(--jrni-color-primary-1)",
fontWeight: 600,
},
secondary: {
background: "white", color: "var(--jrni-color-neutral-1)", border: "1px solid var(--jrni-color-neutral-4)",
fontWeight: 500, boxShadow: "var(--jrni-shadow-chrome)",
},
tertiary: {
background: "transparent", color: "var(--jrni-color-primary-1)", border: "1px solid transparent",
fontWeight: 500,
},
danger: {
background: "var(--jrni-color-semantic-red-1)", color: "white", border: "1px solid var(--jrni-color-semantic-red-1)",
fontWeight: 600,
},
"danger-outline": {
background: "white", color: "var(--jrni-color-semantic-red-1)", border: "1px solid var(--jrni-color-semantic-red-1)",
fontWeight: 500,
},
};
return (
);
}
function IconBtn({ children, label, onClick, active, size = "md", style }) {
const h = size === "sm" ? 28 : 36;
return (
);
}
/* ─── Pills, chips, badges ─────────────────────────────────────────────── */
function Pill({ children, tone = "neutral", style }) {
const tones = {
neutral: { bg: "var(--jrni-color-neutral-5)", fg: "var(--jrni-color-neutral-1)" },
primary: { bg: "var(--jrni-color-primary-3)", fg: "var(--jrni-color-primary-1)" },
success: { bg: "var(--jrni-color-semantic-green-2)", fg: "var(--jrni-color-semantic-green-1)" },
warning: { bg: "var(--jrni-color-semantic-orange-2)",fg: "var(--jrni-color-semantic-orange-1)" },
danger: { bg: "var(--jrni-color-semantic-red-2)", fg: "var(--jrni-color-semantic-red-1)" },
info: { bg: "var(--jrni-color-semantic-blue-2)", fg: "var(--jrni-color-semantic-blue-1)" },
};
const t = tones[tone];
return {children};
}
function StatusDot({ tone }) {
const colors = {
live: "var(--jrni-color-semantic-green-1)",
upcoming: "var(--jrni-color-primary-1)",
draft: "var(--jrni-color-neutral-3)",
past: "var(--jrni-color-neutral-3)",
cancelled: "var(--jrni-color-semantic-red-1)",
};
return ;
}
function StatusPill({ status }) {
const map = {
live: { tone: "success", label: "Live" },
upcoming: { tone: "info", label: "Upcoming" },
draft: { tone: "neutral", label: "Draft" },
past: { tone: "neutral", label: "Past" },
cancelled: { tone: "danger", label: "Cancelled" },
soldout: { tone: "warning", label: "Sold out" },
};
const s = map[status] || map.upcoming;
return {s.label};
}
function Chip({ children, active, onClick, count }) {
return (
);
}
/* ─── Avatar ───────────────────────────────────────────────────────────── */
function Avatar({ initials, color = "var(--jrni-color-primary-1)", size = 32, ring }) {
return (
{initials}
);
}
function AvatarStack({ people, max = 4, size = 28 }) {
const visible = people.slice(0, max);
const extra = people.length - visible.length;
return (
{visible.map((p, i) => (
))}
{extra > 0 ? (
) : null}
);
}
/* ─── Form fields ──────────────────────────────────────────────────────── */
function Field({ label, hint, error, children, optional, width }) {
return (
);
}
const fieldBase = {
height: 36, padding: "0 12px", borderRadius: 4,
border: "1px solid var(--jrni-color-neutral-4)", background: "white",
fontSize: 14, fontFamily: "var(--jrni-font-family-sans)", color: "var(--jrni-color-neutral-1)",
outline: "none", width: "100%", boxSizing: "border-box",
};
function Input(props) {
return ;
}
function Textarea(props) {
return ;
}
function Select({ value, onChange, options, style }) {
return (
);
}
function Toggle({ checked, onChange, label }) {
return (
);
}
function Checkbox({ checked, onChange, label, indeterminate }) {
return (
);
}
function Radio({ checked, onChange, label }) {
return (
);
}
/* ─── Layout / containers ──────────────────────────────────────────────── */
function Card({ children, padding = 20, style, onClick }) {
return (
{children}
);
}
function SectionLabel({ children, action }) {
return (
{children}
{action ? {action} : null}
);
}
function KV({ k, v, vColor }) {
return (
{k}
{v}
);
}
function Empty({ icon, title, body, action }) {
return (
{icon ?
{icon} : null}
{title}
{body ?
{body}
: null}
{action ?
{action}
: null}
{tabs.map(t => {
const isActive = active === t.id;
return (
);
})}
);
}
/* ─── Modal / drawer ───────────────────────────────────────────────────── */
function Modal({ open, onClose, title, subtitle, children, footer, width = 540, hideCloseInHeader }) {
if (!open) return null;
return (
e.stopPropagation()} style={{
width, maxWidth: "100%", maxHeight: "calc(100vh - 48px)", background: "white", borderRadius: 8,
boxShadow: "var(--jrni-shadow-lg)", display: "flex", flexDirection: "column", overflow: "hidden",
}}>
{title}
{subtitle ?
{subtitle}
: null}
{hideCloseInHeader ? null : (
)}
{children}
{footer ? (
{footer}
) : null}
);
}
function Drawer({ open, onClose, title, eyebrow, children, footer, width = 520, headerRight }) {
if (!open) return null;
return (
e.stopPropagation()} style={{
width, maxWidth: "100%", background: "white", height: "100%", boxShadow: "var(--jrni-shadow-lg)",
display: "flex", flexDirection: "column", overflow: "hidden",
}}>
{eyebrow ?
{eyebrow}
: null}
{title}
{headerRight}
{children}
{footer ? (
{footer}
) : null}
);
}
/* ─── Toast ────────────────────────────────────────────────────────────── */
function Toast({ toast, onDismiss }) {
useEffect(() => {
if (!toast) return;
const t = setTimeout(() => onDismiss && onDismiss(), 4500);
return () => clearTimeout(t);
}, [toast]);
if (!toast) return null;
const tones = {
success: { bg: "var(--jrni-color-semantic-green-1)", icon: },
info: { bg: "var(--jrni-color-neutral-1)", icon: },
error: { bg: "var(--jrni-color-semantic-red-1)", icon: },
};
const c = tones[toast.tone || "info"];
return (
{c.icon}
{toast.text}
{toast.action ? : null}
);
}
/* ─── Progress ─────────────────────────────────────────────────────────── */
function ProgressBar({ value, max = 100, color = "var(--jrni-color-primary-1)", height = 6 }) {
const pct = Math.min(100, Math.round((value / max) * 100));
return (
);
}
/* ─── Popover anchor ───────────────────────────────────────────────────── */
function useOutsideClick(ref, onClose) {
useEffect(() => {
function handle(e) { if (ref.current && !ref.current.contains(e.target)) onClose(); }
document.addEventListener("mousedown", handle);
return () => document.removeEventListener("mousedown", handle);
}, [ref, onClose]);
}
function Popover({ open, onClose, anchor, children, align = "right", width = 240, offsetY = 8 }) {
const ref = useRef(null);
useOutsideClick(ref, () => open && onClose && onClose());
if (!open || !anchor) return null;
const rect = anchor.getBoundingClientRect();
const top = rect.bottom + offsetY;
const left = align === "left" ? rect.left : rect.right - width;
return (
{children}
);
}
function MenuItem({ icon, children, onClick, danger, hint, disabled }) {
return (
);
}
/* ════════════════════════════════════════════════════════════════════════
* FLEET-SPECIFIC COMPONENTS
* Domain primitives layered on top of the ANVOS base set.
* ════════════════════════════════════════════════════════════════════════ */
/* ─── Drift severity pill ──────────────────────────────────────────────── */
function DriftPill({ level, count }) {
const map = {
none: { tone: "success", label: "Up to date" },
patch: { tone: "info", label: "Patch behind" },
minor: { tone: "warning", label: "Minor behind" },
major: { tone: "danger", label: "Major behind" },
};
const m = map[level] || map.none;
return {m.label}{count ? · {count} : null};
}
/* ─── Component version chip (a single @voyage/* module's pinned version) ── */
function VersionChip({ version, drift }) {
const colors = {
none: { bg: "var(--jrni-color-semantic-green-2)", fg: "var(--jrni-color-semantic-green-1)", dot: "var(--jrni-color-semantic-green-1)" },
patch: { bg: "var(--jrni-color-semantic-blue-2)", fg: "var(--jrni-color-semantic-blue-1)", dot: "var(--jrni-color-semantic-blue-1)" },
minor: { bg: "var(--jrni-color-semantic-orange-2)", fg: "var(--jrni-color-semantic-orange-1)", dot: "var(--jrni-color-semantic-orange-1)" },
major: { bg: "var(--jrni-color-semantic-red-2)", fg: "var(--jrni-color-semantic-red-1)", dot: "var(--jrni-color-semantic-red-1)" },
};
const c = colors[drift] || colors.none;
return (
{version}
);
}
/* ─── Composition cell — a tenant's set of component pins at a glance ───── */
function CompositionCell({ tenant }) {
const behind = tenant.modulesBehind || 0;
return (
{tenant.moduleCount}
components
{behind > 0 ? {behind} behind
: current}
);
}
/* ─── CI/CD status pill ────────────────────────────────────────────────── */
function CiPill({ status, small }) {
const map = {
passing: { tone: "success", label: "Passing" },
failing: { tone: "danger", label: "Failing" },
running: { tone: "info", label: "Running" },
unknown: { tone: "neutral", label: "Unknown" },
};
const m = map[status] || map.unknown;
return (
{m.label}
);
}
/* ─── Tenant status pill ───────────────────────────────────────────────── */
function TenantStatusPill({ status }) {
const map = {
healthy: { tone: "success", label: "Healthy" },
drift: { tone: "warning", label: "Drift" },
"failed-deploy":{ tone: "danger", label: "Failed deploy" },
paused: { tone: "neutral", label: "Paused" },
archived: { tone: "neutral", label: "Archived" },
};
const m = map[status] || map.healthy;
return {m.label};
}
/* ─── Actor chip — distinguishes automation (bots) from human operators ── */
function ActorChip({ name, isBot, size = "md", onClick }) {
const bot = isBot || name === "GitHub Actions" || name === "auto-merge bot";
if (bot) {
return (
{name === "GitHub Actions" ? : }
{name || "GitHub Actions"}
);
}
const initials = (name || "?").split(" ").map(w => w[0]).slice(0, 2).join("");
return (
{name}
);
}
/* ─── Module chip list with overflow ───────────────────────────────────── */
function ModuleChips({ modules, max = 3, modName }) {
const visible = modules.slice(0, max);
const extra = modules.length - visible.length;
return (
{visible.map(id => (
{id}
))}
{extra > 0 ? +{extra} : null}
);
}
/* ─── KPI tile ─────────────────────────────────────────────────────────── */
function KpiTile({ label, value, sub, tone = "neutral", icon, active, onClick }) {
const tones = {
neutral: "var(--jrni-color-neutral-1)",
success: "var(--jrni-color-semantic-green-1)",
warning: "var(--jrni-color-semantic-orange-1)",
danger: "var(--jrni-color-semantic-red-1)",
info: "var(--jrni-color-semantic-blue-1)",
primary: "var(--jrni-color-primary-1)",
};
return (
);
}
/* ─── Skeleton ─────────────────────────────────────────────────────────── */
function Skeleton({ w = "100%", h = 12, r = 4, style }) {
return ;
}
/* ─── Segmented control ────────────────────────────────────────────────── */
function Segmented({ options, value, onChange, size = "md" }) {
return (
{options.map(o => {
const active = value === o.value;
return (
);
})}
);
}
/* ─── Mono code / SHA ──────────────────────────────────────────────────── */
function Mono({ children, color }) {
return {children};
}
/* ─── Risk indicator ───────────────────────────────────────────────────── */
function RiskBadge({ level }) {
const map = { low: { tone: "success", label: "Low" }, medium: { tone: "warning", label: "Medium" }, high: { tone: "danger", label: "High" } };
const m = map[level] || map.low;
return {m.label} risk;
}
/* ─── Stage status icon (for provisioning / progress) ──────────────────── */
function StageIcon({ status, size = 18 }) {
if (status === "success") return ;
if (status === "failed") return ;
if (status === "running") return ;
return ;
}
/* ─── Tooltip (lightweight hover) ──────────────────────────────────────── */
function Tooltip({ label, children, width = 220 }) {
const [show, setShow] = useState(false);
return (
setShow(true)} onMouseLeave={() => setShow(false)}>
{children}
{show && label ? (
{label}
) : null}
);
}
/* ─── Claude Code handoff ──────────────────────────────────────────────────
* The UI never authors platform artifacts and never executes a pipeline.
* Both cases hand off to a Claude Code session: deep-link + copy the command.
* - `path` → opens a file (platform authoring: module source, release notes)
* - `command` → a runnable invocation (execution: provision/rev/migrate/rotate/publish)
* ─────────────────────────────────────────────────────────────────────────── */
function ClaudeCodeLink({ path, command, label, variant = "link", size = "sm", icon, tone }) {
const [copied, setCopied] = useState(false);
const isCmd = !!command;
const clip = isCmd ? command : ("claude code " + path);
const deep = isCmd ? ("claude-code://run?cmd=" + encodeURIComponent(command)) : ("claude-code://open?file=" + encodeURIComponent(path));
const onClick = (e) => {
e.stopPropagation();
try { window.location.href = deep; } catch (err) {}
try { navigator.clipboard && navigator.clipboard.writeText(clip); } catch (err) {}
setCopied(true); setTimeout(() => setCopied(false), 1800);
};
const defaultLabel = isCmd ? "Open in Claude Code" : "Edit in Claude Code";
const text = copied ? (isCmd ? "Copied command" : "Copied command") : (label || defaultLabel);
const tip = isCmd ? `Runs in a Claude Code session — click to copy: ${command}` : `Opens ${path} in Claude Code · click to copy the command`;
const glyph = icon || ;
if (variant === "button") {
return (
: glyph} onClick={onClick}>{text}
);
}
return (
);
}
/* ─── Gated handoff (Pattern A — disabled + tooltip when no perm) ───────── */
function GatedButton({ cap, reason, children, ...props }) {
const allowed = !cap || window.FLEET.can(cap);
if (allowed) return ;
return (
);
}
/* ─── Permission-denied screen (Pattern B) ─────────────────────────────── */
function PermissionDenied({ screen, requiredRole }) {
return (
You don't have access to {screen}
This is a {requiredRole}-only surface. Ask your admin to grant access if you need it.
} onClick={() => navigate("/")}>Back to Fleet Overview
);
}
/* ─── Not-found card (404) ─────────────────────────────────────────────── */
function NotFound({ title, body, actions }) {
return (
?
{title}
{body}
{actions}
);
}
/* ─── Skeleton helpers ─────────────────────────────────────────────────── */
function SkeletonRows({ n = 8, h = 44 }) {
return {Array.from({ length: n }, (_, i) => (
))}
; }
/* Brief boot shimmer so list/detail screens render a skeleton at first paint.
* Pin it open for design review with ?loading=1. */
function useBoot(params, ms = 520) {
const [booting, setBooting] = useState(true);
useEffect(() => {
if (params && params.loading === "1") { setBooting(true); return; }
setBooting(true);
const t = setTimeout(() => setBooting(false), ms);
return () => clearTimeout(t);
}, [params && params.loading]);
return params && params.loading === "1" ? true : booting;
}
/* ─── Export ───────────────────────────────────────────────────────────── */
Object.assign(window, {
Button, IconBtn, Pill, StatusDot, StatusPill, Chip, Avatar, AvatarStack,
Field, Input, Textarea, Select, Toggle, Checkbox, Radio,
Card, SectionLabel, KV, Empty, Tabs, Modal, Drawer, Toast,
ProgressBar, Popover, MenuItem,
useOutsideClick,
// fleet
DriftPill, VersionChip, CompositionCell, CiPill, TenantStatusPill, ActorChip,
ModuleChips, KpiTile, Skeleton, Segmented, Mono, RiskBadge, StageIcon,
// v1.1
Tooltip, ClaudeCodeLink, GatedButton, PermissionDenied, NotFound, SkeletonRows, SkeletonTile, useBoot,
});