/* global React */ const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React; /* ============================================================ ICONS — outline, Lucide-style, 24×24 viewbox ============================================================ */ const Ico = ({ d, size = 16, stroke = 2, className = "", fill = "none", viewBox = "0 0 24 24", style }) => ( ); const Icons = { Home: (p) => } />, Layout: (p) => } />, Calendar: (p) => } />, Sunrise: (p) => } />, Target: (p) => } />, ListChecks: (p) => } />, Star: (p) => , Check: (p) => , CheckSquare: (p) => } />, Grid: (p) => } />, Flame: (p) => , Shield: (p) => , BarChart: (p) => } />, Activity: (p) => , Settings: (p) => } />, Plus: (p) => , Minus: (p) => , Search: (p) => } />, Bell: (p) => , Filter: (p) => , ChevronLeft: (p) => , ChevronRight: (p) => , ChevronDown: (p) => , ChevronUp: (p) => , X: (p) => , Menu: (p) => , Moon: (p) => , Sun: (p) => } />, Clock: (p) => } />, Zap: (p) => , Play: (p) => , Pause: (p) => , SkipForward: (p) => , SkipBack: (p) => , Music: (p) => } />, Volume: (p) => } />, VolumeX: (p) => } />, Headphones: (p) => } />, Plug: (p) => } />, More: (p) => } />, Drag: (p) => } />, Sparkles: (p) => , Cloud: (p) => , Mail: (p) => } />, Lock: (p) => } />, Github: (p) => , Apple: (p) => ( ), Building: (p) => } />, Google: (p) => ( ), Microsoft: (p) => ( ), Spotify: (p) => ( ), Todoist: (p) => ( ), Notion: (p) => ( ), Zoom: (p) => ( ), Slack: (p) => ( ), Trash: (p) => , Edit: (p) => , Copy: (p) => } />, Share: (p) => } />, Send: (p) => , Download: (p) => , AlertTriangle: (p) => , Inbox: (p) => , Refresh: (p) => , LogOut: (p) => }/>, ArrowRight: (p) => , ArrowUp: (p) => , ArrowDown: (p) => , Heart: (p) => , Book: (p) => , Run: (p) => } />, Pen: (p) => , Coffee: (p) => , Brain: (p) => , Bird: (p) => , Owl: (p) => } />, CornerDown: (p) => , Trending: (p) => , Eye: (p) => } />, EyeOff: (p) => } />, PlusCircle: (p) => } />, Save: (p) => , Mic: (p) => } />, HelpCircle: (p) => } />, PlayCircle: (p) => } />, Users: (p) => } />, Smartphone: (p) => } />, Compass: (p) => } />, Layers: (p) => } />, Globe: (p) => } />, Briefcase: (p) => } />, GraduationCap: (p) => } />, Plane: (p) => , Home2: (p) => } />, Maximize: (p) => , Minimize: (p) => , }; /* ============================================================ UI Primitives ============================================================ */ const cn = (...args) => args.filter(Boolean).join(" "); function Button({ variant = "primary", size = "md", className = "", children, icon: Icon, iconRight: IconR, ...props }) { const base = "inline-flex items-center justify-center gap-2 font-medium transition-all duration-150 rounded-[8px] focus-ring disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98] whitespace-nowrap"; const sizes = { sm: "h-8 px-3 text-[13px]", md: "h-10 px-4 text-[14px]", lg: "h-12 px-5 text-[14px]", icon: "h-9 w-9", iconSm: "h-8 w-8", }; const variants = { primary: "bg-[hsl(var(--primary))] text-white hover:bg-[hsl(var(--primary)/0.9)] shadow-sm", secondary: "bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted)/0.7)]", outline: "border border-[hsl(var(--border))] hover:bg-[hsl(var(--accent))] text-[hsl(var(--foreground))]", ghost: "hover:bg-[hsl(var(--accent))] text-[hsl(var(--foreground))]", destructive: "bg-[hsl(var(--destructive)/0.15)] text-[hsl(0_84%_70%)] border border-[hsl(var(--destructive)/0.3)] hover:bg-[hsl(var(--destructive)/0.25)]", link: "text-[hsl(var(--primary))] hover:underline", }; delete props.icon; delete props.iconRight; return ( ); } function Card({ className = "", children, padding = "p-5", interactive = false, ...props }) { return (
{children}
); } function SectionTitle({ children, action, className = "" }) { return (

{children}

{action}
); } function Badge({ children, variant = "muted", className = "", dot = false }) { const variants = { muted: "bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]", primary: "bg-[hsl(var(--primary)/0.12)] text-[hsl(263_70%_75%)]", success: "bg-[hsl(142_70%_45%/0.12)] text-[hsl(142_70%_60%)]", warning: "bg-[hsl(38_92%_50%/0.12)] text-[hsl(38_92%_60%)]", danger: "bg-[hsl(0_84%_60%/0.12)] text-[hsl(0_84%_70%)]", orange: "bg-[hsl(20_90%_55%/0.12)] text-[hsl(20_90%_65%)]", info: "bg-[hsl(217_91%_60%/0.12)] text-[hsl(217_91%_70%)]", }; const dotColors = { muted: "bg-[hsl(var(--muted-foreground))]", primary: "bg-[hsl(var(--primary))]", success: "bg-[hsl(142_70%_50%)]", warning: "bg-[hsl(38_92%_55%)]", danger: "bg-[hsl(0_84%_60%)]", orange: "bg-[hsl(20_90%_55%)]", info: "bg-[hsl(217_91%_60%)]", }; return ( {dot && } {children} ); } function Input({ className = "", icon: Icon, ...props }) { delete props.icon; return (
{Icon && }
); } function Checkbox({ checked, onChange, className = "" }) { return ( ); } function Switch({ checked, onChange, size = "md" }) { const dims = size === "sm" ? { track: "h-4 w-7", thumb: "h-3 w-3", trans: checked ? "translate-x-3" : "translate-x-0" } : { track: "h-5 w-9", thumb: "h-4 w-4", trans: checked ? "translate-x-4" : "translate-x-0" }; return ( ); } function Avatar({ name = "RG", size = 32, className = "" }) { return (
{name}
); } function Logo({ size = 32, withText = true }) { return (
DPM Elevate {withText && (
DPM
Elevate
)}
); } function ProgressBar({ value, max = 100, color = "primary", height = "h-2", className = "" }) { const colors = { primary: "bg-[hsl(var(--primary))]", success: "bg-[hsl(142_70%_50%)]", warning: "bg-[hsl(38_92%_55%)]", danger: "bg-[hsl(0_84%_60%)]", info: "bg-[hsl(217_91%_60%)]", }; const pct = Math.min(100, Math.max(0, (value / max) * 100)); return (
); } function Ring({ value = 0, size = 120, stroke = 8, color = "var(--primary)", trackColor = "var(--muted)", children }) { const r = (size - stroke) / 2; const c = 2 * Math.PI * r; const offset = c - (value / 100) * c; return (
{children}
); } function ViewToggle({ value, onChange, options }) { return (
{options.map(o => ( ))}
); } function EmptyState({ icon: Icon = Icons.Inbox, title, subtitle, cta, ctaIcon = Icons.Plus, onCta }) { return (

{title}

{subtitle}

{cta && }
); } /* ============================================================ EditableTitle — double-click a label to inline-rename. - `value` current value - `onCommit(next)` called with trimmed new value when the user confirms - `className` passes through to the rendered AND - `multiline` if true, uses textarea - `placeholder` placeholder for the input The element stays in view while editing — Enter commits, Esc cancels, blur commits. The user never has to "click somewhere else" to save. ============================================================ */ function EditableTitle({ value, onCommit, className = "", multiline = false, placeholder = "", title }) { const [editing, setEditing] = useState(false); const [draft, setDraft] = useState(value); const inputRef = useRef(null); useEffect(() => { setDraft(value); }, [value]); useEffect(() => { if (!editing) return; requestAnimationFrame(() => { inputRef.current?.focus(); if (inputRef.current?.select) inputRef.current.select(); }); }, [editing]); const commit = () => { const next = (draft || "").trim(); if (next && next !== value) onCommit?.(next); else setDraft(value); setEditing(false); }; const cancel = () => { setDraft(value); setEditing(false); }; if (editing) { if (multiline) { return (