// OrchestAI — shared UI primitives, icons, helpers
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ---------- Helpers ----------
function classNames(...xs) { return xs.filter(Boolean).join(" "); }
function fmt(n, opts = {}) {
if (n === null || n === undefined || isNaN(n)) return "—";
const { decimals = 1, prefix = "", suffix = "", abbr = false } = opts;
if (abbr) {
const abs = Math.abs(n);
if (abs >= 1e9) return prefix + (n / 1e9).toFixed(decimals) + "B" + suffix;
if (abs >= 1e6) return prefix + (n / 1e6).toFixed(decimals) + "M" + suffix;
if (abs >= 1e3) return prefix + (n / 1e3).toFixed(decimals) + "k" + suffix;
}
return prefix + Number(n).toLocaleString("es-AR", { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) + suffix;
}
function pct(n, decimals = 1) { return (n * 100).toFixed(decimals) + "%"; }
function greeting() {
const h = new Date().getHours();
if (h < 12) return "greeting_morning";
if (h < 19) return "greeting_afternoon";
return "greeting_evening";
}
function initials(name) {
if (!name) return "?";
const parts = name.trim().split(/\s+/);
if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}
// i18n factory
function makeT(lang) {
const dict = window.I18N[lang] || window.I18N.es;
return (key) => {
const parts = key.split(".");
let cur = dict;
for (const p of parts) { cur = cur?.[p]; if (cur === undefined) return key; }
return cur;
};
}
function useI18n(lang) {
return useMemo(() => {
const dict = window.I18N[lang] || window.I18N.es;
const t = (key) => {
const parts = key.split(".");
let cur = dict;
for (const p of parts) { cur = cur?.[p]; if (cur === undefined) return key; }
return cur;
};
return { t, dict, lang };
}, [lang]);
}
// DB hook — syncs with oai:db event
function useDB() {
const [data, setData] = useState(() => window.DB.get());
useEffect(() => {
const handler = (e) => setData({ ...e.detail });
window.addEventListener("oai:db", handler);
return () => window.removeEventListener("oai:db", handler);
}, []);
return data;
}
// ---------- Icons ----------
const Icon = {
plus: (p) => ,
search: (p) => ,
upload: (p) => ,
folder: (p) => ,
doc: (p) => ,
book: (p) => ,
graph: (p) => ,
chart: (p) => ,
bolt: (p) => ,
settings: (p) => ,
check: (p) => ,
x: (p) => ,
chevdown: (p) => ,
chevright:(p) => ,
ai: (p) => ,
send: (p) => ,
sparkle: (p) => ,
export: (p) => ,
globe: (p) => ,
dot: (p) => ,
pin: (p) => ,
filter: (p) => ,
link: (p) => ,
more: (p) => ,
home: (p) => ,
bell: (p) => ,
trash: (p) => ,
user: (p) =>
};
// ---------- Primitives ----------
function Button({ kind = "ghost", size = "md", icon, children, className, ...rest }) {
const base = "oai-btn oai-btn--" + kind + " oai-btn--" + size;
return (
);
}
function Pill({ tone = "neutral", children, icon }) {
return
{icon ? React.createElement(icon, { className: "oai-pill__icon" }) : null}
{children}
;
}
function Card({ children, className, padded = true, ...rest }) {
return {children}
;
}
function Field({ label, hint, children }) {
return (
);
}
function Input(props) { return ; }
function Select({ children, ...props }) { return ; }
function Textarea(props) { return ; }
function Toggle({ checked, onChange, label }) {
return (
);
}
function Segmented({ options, value, onChange }) {
return (
{options.map(o => (
))}
);
}
function Avatar({ initials: ini, size = 28 }) {
return {ini}
;
}
function EmptyState({ icon, title, sub, action }) {
return (
{icon && React.createElement(icon, { style: { width: 40, height: 40, margin: "0 auto 12px", opacity: 0.35 } })}
{title}
{sub &&
{sub}
}
{action &&
{action}
}