// Shared primitives: Avatar, Button, Chip, Field, Modal, etc. const { useState, useEffect, useRef, useMemo, useLayoutEffect } = React; // ---- Avatar ---------------------------------------------------------------- function Avatar({ person, size = 40, ring = false }) { const initials = person.name.split(" ").map((s) => s[0]).slice(0, 2).join(""); const style = { width: size, height: size, borderRadius: "50%", background: `linear-gradient(135deg, ${person.accent}, ${shade(person.accent, -20)})`, color: "white", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--serif)", fontWeight: 400, fontSize: size * 0.38, letterSpacing: "-0.02em", flexShrink: 0, boxShadow: ring ? `0 0 0 4px var(--bg), 0 0 0 5px var(--line)` : "none", userSelect: "none", }; return {initials}; } function shade(hex, percent) { const num = parseInt(hex.replace("#", ""), 16); const r = Math.max(0, Math.min(255, (num >> 16) + percent)); const g = Math.max(0, Math.min(255, ((num >> 8) & 0xff) + percent)); const b = Math.max(0, Math.min(255, (num & 0xff) + percent)); return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`; } // ---- Button ---------------------------------------------------------------- function Button({ children, variant = "primary", size = "md", onClick, icon, type, full, disabled }) { const cls = `btn btn-${variant} btn-${size}${full ? " btn-full" : ""}`; return ( ); } // ---- Chip / Pill ----------------------------------------------------------- function Chip({ children, active, onClick }) { return ( ); } // ---- Icons (line) ---------------------------------------------------------- const I = { search: , bell: , message:, edit: , plus: , check: , arrow: , ext: , back: , more: , heart: , dot: , globe: , pin: , user: , home: , compass:, grid: , list: , settings:, close: , drag: , slash: , }; // ---- Field (input wrapper) ------------------------------------------------- function Field({ label, hint, children, suffix }) { return ( ); } // ---- Cover swatch (placeholder for project art) ---------------------------- function Cover({ background, ratio = "4/3", label, year }) { return (
{label && (
{label} {year && {year}}
)}
); } // ---- Section header -------------------------------------------------------- function SectionH({ children, action, count }) { return (

{children} {count != null && {count}}

{action}
); } // ---- Person row ------------------------------------------------------------ function PersonRow({ person, onOpen, dense }) { return (
onOpen?.(person)}>
{person.name} @{person.handle}
{person.role} ยท {person.location}
); } // ---- Stat ------------------------------------------------------------------ function Stat({ value, label }) { return (
{value}
{label}
); } Object.assign(window, { Avatar, Button, Chip, Field, Cover, SectionH, PersonRow, Stat, I, shade });