// Reusable UI primitives + icon set
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ---------- Icons (Lucide-style, hand-tuned) ---------- */
const Ic = {
folder: (p) => ,
folderPlus: (p) => ,
upload: (p) => ,
cloud: (p) => ,
search: (p) => ,
info: (p) => ,
help: (p) => ,
bell: (p) => ,
user: (p) => ,
clock: (p) => ,
share: (p) => ,
download: (p) => ,
more: (p) => ,
x: (p) => ,
check: (p) => ,
chev: (p) => ,
arrow: (p) => ,
plus: (p) => ,
send: (p) => ,
chat: (p) => ,
trash: (p) => ,
star: (p) => ,
lock: (p) => ,
mail: (p) => ,
eye: (p) => ,
eyeOff: (p) => ,
sparkle: (p) => ,
archive: (p) => ,
pencil: (p) => ,
};
/* ---------- Button ---------- */
function Button({ variant, size, block, icon, iconRight, children, ...rest }) {
return (
);
}
/* ---------- Tooltip ---------- */
function Info({ children }) {
const [open, setOpen] = useState(false);
return (
setOpen(true)}
onMouseLeave={() => setOpen(false)}
onFocus={() => setOpen(true)}
onBlur={() => setOpen(false)}>
{open && {children}}
);
}
/* ---------- Modal ---------- */
function Modal({ open, onClose, title, sub, footer, width, children }) {
useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") onClose?.(); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()}>
{children}
{footer &&
{footer}
}
);
}
/* ---------- File type → color + label ---------- */
function fileMeta(ext) {
const e = ext.toLowerCase();
if (["mp4","mov","mxf","prores","avi","mkv","webm","m4v","wmv","3gp","3g2","mpg","mpeg","ogv","ogg","flv","mts","m2ts"].includes(e)) return { c: "#7A3DB8", l: "MOV" };
if (["jpg","jpeg","png","tiff","tif","raw","webp","heic","heif","dng","arw","cr2","nef","avif","gif","bmp","ico","apng","jfif"].includes(e)) return { c: "#1F7A4D", l: "IMG" };
if (e === "pdf") return { c: "#B23A3A", l: "PDF" };
if (["doc","docx"].includes(e)) return { c: "#1F4FA5", l: "DOC" };
if (["xls","xlsx","csv"].includes(e)) return { c: "#1F7A4D", l: "XLS" };
if (["ppt","pptx","key"].includes(e)) return { c: "#D45D1B", l: "PPT" };
if (e === "txt") return { c: "#6B7280", l: "TXT" };
if (["zip","rar","7z","tar","gz"].includes(e)) return { c: "#4A5562", l: "ZIP" };
if (["psd","ai","indd","eps","svg","ase"].includes(e)) return { c: "#0E2A47", l: e.toUpperCase() };
return { c: "#6B7280", l: e.toUpperCase().slice(0,3) };
}
function FileIcon({ ext }) {
const { c, l } = fileMeta(ext);
return {l};
}
window.UI = { Button, Info, Modal, FileIcon, fileMeta, Ic };