/* eslint-disable */
// ============================================================
// PRIMITIVES — building blocks used everywhere
// ============================================================
const { useState: useP_useState, useEffect: useP_useEffect, useRef: useP_useRef } = React;
// ---------- Formatting ----------
const MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
function fmtDate(iso, format) {
if (!iso) return "";
const d = new Date(iso);
if (isNaN(d.getTime())) return String(iso);
const pad = (n, w = 2) => String(n).padStart(w, "0");
const y = d.getFullYear(), mo = d.getMonth(), da = d.getDate();
let h = d.getHours(); const mi = d.getMinutes();
const tt = h >= 12 ? "PM" : "AM"; const h12 = ((h % 12) || 12);
const f = format || "{0:MMM d, yyyy}";
return f
.replace(/\{0:|}/g, "")
.replace(/yyyy/g, y)
.replace(/MMMM/g, ["January","February","March","April","May","June","July","August","September","October","November","December"][mo])
.replace(/MMM/g, MONTHS[mo])
.replace(/MM/g, pad(mo + 1))
.replace(/(? {
const base = "inline-flex items-center justify-center gap-1.5 font-medium rounded-md transition-all disabled:opacity-40 disabled:cursor-not-allowed select-none whitespace-nowrap shrink-0";
const sizes = { xs: "h-7 px-2 text-[12px]", sm: "h-8 px-2.5 text-[13px]", md: "h-9 px-3 text-sm", lg: "h-10 px-4 text-sm", icon: "h-8 w-8" };
const styleByVariant = {
primary: { background: "var(--primary)", color: "white", border: "1px solid var(--primary)" },
accent: { background: "var(--accent)", color: "white", border: "1px solid var(--accent)" },
secondary: { background: "var(--surface)", color: "var(--ink)", border: "1px solid var(--border)" },
ghost: { background: "transparent", color: "var(--muted)", border: "1px solid transparent" },
soft: { background: "var(--surface-3)", color: "var(--ink)", border: "1px solid transparent" },
danger: { background: "var(--danger)", color: "white", border: "1px solid var(--danger)" },
dangerGhost:{ background: "transparent", color: "var(--danger)", border: "1px solid transparent" },
};
const hoverClass = {
primary: "hover:brightness-110",
accent: "hover:brightness-110",
secondary: "hover:bg-[var(--surface-2)]",
ghost: "hover:bg-[var(--surface-2)] hover:text-[var(--ink)]",
soft: "hover:bg-[var(--border)]",
danger: "hover:brightness-110",
dangerGhost: "hover:bg-[var(--danger-bg)]",
};
return (
);
};
// ---------- Form primitives ----------
const Field = ({ label, hint, children, className = "" }) => (
);
const inputStyle = {
background: "var(--surface)",
color: "var(--ink)",
border: "1px solid var(--border)",
borderRadius: "7px",
};
const TextInput = ({ value, onChange, className = "", placeholder, disabled, onBlur, onKeyDown, autoFocus }) => (
onChange(e.target.value)}
onBlur={onBlur}
onKeyDown={onKeyDown}
autoFocus={autoFocus}
placeholder={placeholder}
disabled={disabled}
className={`w-full h-8 px-2.5 text-[13px] focus:outline-none focus:border-[var(--primary)] ${className}`}
style={inputStyle}
/>
);
const NumberInput = ({ value, onChange, min, max, step, disabled, className = "" }) => (
onChange(e.target.value === "" ? "" : Number(e.target.value))}
min={min} max={max} step={step} disabled={disabled}
className={`w-full h-8 px-2.5 text-[13px] focus:outline-none focus:border-[var(--primary)] ${className}`}
style={inputStyle}
/>
);
const Check = ({ checked, onChange, label, disabled }) => (
);
const Toggle = ({ checked, onChange, disabled }) => (
);
const Select = ({ value, onChange, options, className = "", disabled }) => (
);
// ---------- Avatar ----------
const Avatar = ({ persona, size = 28, ring }) => {
const dim = { width: size, height: size, fontSize: Math.round(size * 0.42), background: persona.accent };
return (
{persona.initials}
);
};
// ---------- Role badge ----------
const RoleBadge = ({ role, size = "sm" }) => {
const c = ENUM_COLORS[role] || { bg: "var(--surface-3)", text: "var(--muted)", dot: "var(--subtle)" };
const cls = size === "xs" ? "px-1.5 py-0.5 text-[10px]" : "px-2 py-0.5 text-[11px]";
return (
{role}
);
};
// ---------- Enum pill (used for cell rendering & filters) ----------
const EnumPill = ({ value, size = "sm" }) => {
const c = ENUM_COLORS[value] || { bg: "var(--surface-3)", text: "var(--muted)", dot: "var(--subtle)" };
const cls = size === "xs" ? "px-1.5 py-0.5 text-[10px]" : "px-2 py-0.5 text-[12px]";
return (
{value}
);
};
// ---------- Toast ----------
const Toast = ({ t, onClose }) => {
useP_useEffect(() => {
const id = setTimeout(onClose, 2800);
return () => clearTimeout(id);
}, []);
const cfg = {
ok: { bg: "var(--success)", icon: "check" },
warn: { bg: "var(--warning)", icon: "alertTriangle" },
err: { bg: "var(--danger)", icon: "alert" },
info: { bg: "var(--ink-2)", icon: "info" },
}[t.kind] || { bg: "var(--ink-2)", icon: "check" };
return (
{t.text}
);
};
const ToastTray = ({ toasts, remove }) => (
{toasts.map((t) => (
remove(t.id)} />
))}
{title}
{subtitle &&
{subtitle}
}
{children &&
{children}
}
{footer &&
{footer}
}
);
};
// ---------- Page Header ----------
const PageHeader = ({ title, subtitle, badge, right, eyebrow }) => (
{eyebrow && (
{eyebrow}
)}
{title}
{badge}
{subtitle &&
{subtitle}
}
{right}
);
// ---------- Skeleton ----------
const Skeleton = ({ className = "", style }) => (
);
// ---------- Empty state ----------
const Empty = ({ icon = "search", title, subtitle, action }) => (
{title}
{subtitle &&
{subtitle}
}
{action &&
{action}
}
);
// ---------- Popover (positioned dropdown anchored to a ref) ----------
const Popover = ({ open, onClose, anchorRef, children, align = "right", className = "", offset = 4 }) => {
const ref = useP_useRef(null);
const [pos, setPos] = useP_useState(null);
useP_useEffect(() => {
if (!open) return;
const place = () => {
const a = anchorRef?.current;
if (!a) return;
const r = a.getBoundingClientRect();
setPos({
top: r.bottom + offset,
left: align === "left" ? r.left : align === "center" ? r.left + r.width / 2 : r.right,
});
};
place();
window.addEventListener("resize", place);
window.addEventListener("scroll", place, true);
const onDown = (e) => {
if (!ref.current) return;
if (ref.current.contains(e.target)) return;
if (anchorRef?.current?.contains(e.target)) return;
onClose();
};
const t = setTimeout(() => document.addEventListener("mousedown", onDown), 0);
return () => {
clearTimeout(t);
document.removeEventListener("mousedown", onDown);
window.removeEventListener("resize", place);
window.removeEventListener("scroll", place, true);
};
}, [open, anchorRef]);
if (!open || !pos) return null;
const transform = align === "center" ? "translateX(-50%)" : align === "right" ? "translateX(-100%)" : undefined;
return (
{children}
);
};
// ---------- Json highlighter ----------
function highlightJson(jsonString) {
const escaped = jsonString.replace(/&/g, "&").replace(//g, ">");
return escaped.replace(
/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
(match) => {
let cls = "jn";
if (/^"/.test(match)) cls = /:$/.test(match) ? "jk" : "js";
else if (/true|false/.test(match)) cls = "jb";
else if (/null/.test(match)) cls = "ju";
return `${match}`;
}
);
}
// ---------- Compare for sort ----------
const cmp = (a, b, dir, type) => {
const sign = (dir === "desc" || dir === "0" || dir === 0) ? -1 : 1;
if (a == null && b == null) return 0;
if (a == null) return 1;
if (b == null) return -1;
if (type === "int" || type === "decimal" || type === "number") return sign * (Number(a) - Number(b));
if (type === "datetime" || type === "date") return sign * (new Date(a).getTime() - new Date(b).getTime());
// For enums with a known order set, sort by index
return sign * String(a).localeCompare(String(b), undefined, { sensitivity: "base" });
};
// ---------- Helpers ----------
function classNames(...xs) { return xs.filter(Boolean).join(" "); }
// Resolve a column array by intersecting the action's Columns with the data row keys.
function resolveColumns(mergedParams, sampleRow) {
const cols = mergedParams?.Columns || [];
if (!sampleRow) return [...cols].sort((a, b) => a.ColOrder - b.ColOrder);
const present = new Set(Object.keys(sampleRow));
return cols.filter((c) => present.has(c.PropertyName)).sort((a, b) => a.ColOrder - b.ColOrder);
}
// Sort + filter rows according to a Sort[] / Filter[] payload (matches spec)
function applyFilter(rows, filterArr) {
if (!filterArr || filterArr.length === 0) return rows;
return rows.filter((row) => {
return filterArr.every((f) => {
const value = row[f.PropertyName];
const op = f.LogicalOperator === "OR" ? "some" : "every";
return (f.Filters || [])[op]((c) => evalOperator(value, c.Operator, c.Value));
});
});
}
function evalOperator(v, op, target) {
if (op == null) return true;
const sv = v == null ? "" : String(v).toLowerCase();
const st = target == null ? "" : String(target).toLowerCase();
const nv = Number(v), nt = Number(target);
switch (op) {
case "Eq": return String(v) === String(target);
case "Neq": return String(v) !== String(target);
case "Contains": return sv.includes(st);
case "DoesNotContain": return !sv.includes(st);
case "StartsWith": return sv.startsWith(st);
case "EndsWith": return sv.endsWith(st);
case "IsEmpty": return v == null || String(v) === "";
case "IsNotEmpty": return v != null && String(v) !== "";
case "IsGreaterThan": return nv > nt;
case "IsGreaterThanOrEqualTo": return nv >= nt;
case "IsLessThan": return nv < nt;
case "IsLessThanOrEqualTo":return nv <= nt;
default: return true;
}
}
function applySort(rows, sortArr, columns) {
if (!sortArr || sortArr.length === 0) return rows;
const ordered = [...sortArr].sort((a, b) => Number(a.ColOrder) - Number(b.ColOrder));
return [...rows].sort((a, b) => {
for (const s of ordered) {
const col = columns.find((c) => c.PropertyName === s.PropertyName);
const type = col?.DataType || "string";
// Spec: SortDirection 0=Descending, 1=Ascending. We also accept "asc"/"desc".
const dir = (s.SortDirection === "1" || s.SortDirection === 1 || s.SortDirection === "asc") ? "asc" : "desc";
const c = cmp(a[s.PropertyName], b[s.PropertyName], dir, type);
if (c !== 0) return c;
}
return 0;
});
}
Object.assign(window, {
fmtDate, fmtNumber, fmtCell, fmtAgo,
Btn, Field, TextInput, NumberInput, Check, Toggle, Select,
Avatar, RoleBadge, EnumPill,
Toast, ToastTray, Modal, PageHeader, Skeleton, Empty, Popover,
highlightJson, cmp, classNames,
resolveColumns, applyFilter, applySort, evalOperator,
});