{label} {format(value)}{suffix}

onChange(Number(e.target.value))} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", margin: 0, opacity: 0, cursor: "pointer" }} />

{help &&

{help}

}

); }; /* ============================================================ Toast system */ const ToastContext = createContext(null); const ToastProvider = ({ children }) => { const [toasts, setToasts] = useState([]); const push = useCallback((t) => { const id = Math.random().toString(36).slice(2); setToasts((s) => [...s, { id, ...t }]); setTimeout(() => setToasts((s) => s.filter((x) => x.id !== id)), 4000); }, []); return ( {children}

{toasts.map((t) => (

{t.message}

))}

); }; const useToast = () => useContext(ToastContext); /* ============================================================ Modal */ const Modal = ({ open, onClose, children, width = 480 }) => { useEffect(() => { if (!open) return; const onKey = (e) => e.key === "Escape" && onClose?.(); window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; return (

e.stopPropagation()}>{children}

); }; /* ============================================================ Format helpers */ const fmtMoney = (v, ccy = "CAD") => { const sign = v < 0 ? "-" : ""; const abs = Math.abs(v); if (abs >= 1_000_000) return sign + (abs / 1_000_000).toFixed(1) + "M"; if (abs >= 10_000) return sign + Math.round(abs / 1000) + "k"; if (abs >= 1000) return sign + (abs / 1000).toFixed(1) + "k"; return sign + abs.toFixed(0); }; const fmtDollar = (v) => "$" + v.toLocaleString("fr-CA", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const fmtPct = (v) => v.toFixed(1) + "%"; /* ============================================================ Inline edit primitives */ /* EditableField — click-to-edit text/number with save on Enter/blur */ const EditableField = ({ value, onSave, type = "text", placeholder = "—", options = null, // [{value, label}] → renders a { setDraft(e.target.value); }} onBlur={commit} onKeyDown={(e) => { if (e.key === "Enter") commit(); if (e.key === "Escape") cancel(); }} style={{ height: 26, fontSize: 12.5, padding: "0 6px", width, ...inputStyle }} > {options.map((o) => )} ); } return ( setDraft(e.target.value)} onBlur={commit} onKeyDown={(e) => { if (e.key === "Enter") commit(); if (e.key === "Escape") cancel(); }} style={{ height: 26, fontSize: 12.5, padding: "0 6px", width: width === "auto" ? 120 : width, ...inputStyle }} /> ); }; /* EditableArea — multi-line, click-to-edit */ const EditableArea = ({ value, onSave, placeholder = "—", rows = 3, disabled = false }) => { const [editing, setEditing] = useState(false); const [draft, setDraft] = useState(value ?? ""); useEffect(() => { setDraft(value ?? ""); }, [value]); const commit = () => { setEditing(false); if (draft !== value) onSave?.(draft); }; if (disabled || !editing) { return (

!disabled && setEditing(true)} title={disabled ? "" : "Cliquer pour modifier"} > {value || {placeholder}}

); } return (

setDraft(e.target.value)}
      onBlur={commit}
      onKeyDown={(e) => { if (e.key === "Escape") { setDraft(value ?? ""); setEditing(false); } }}
      style={{ width: "100%", padding: 8, fontSize: 12.5, resize: "vertical" }}
    />
  );
};

// Lightweight Editable primitive used by settings.jsx (parity with the zip's ui.jsx).
// Click to edit, commit on Enter/blur, cancel on Escape.
const Editable = ({ value, onChange, type = "text", className = "", style = {}, prefix = "", suffix = "", placeholder = "—", options }) => {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(value);
  const ref = useRef(null);
  useEffect(() => { setDraft(value); }, [value]);
  useEffect(() => { if (editing) ref.current?.focus(); }, [editing]);
  const commit = () => {
    setEditing(false);
    if (draft !== value) onChange?.(type === "number" ? Number(draft) : draft);
  };
  const cancel = () => { setDraft(value); setEditing(false); };
  if (editing && options) {
    return (
      <select ref={ref} value={draft}
        onChange={(e) => setDraft(e.target.value)}
        onBlur={commit}
        onKeyDown={(e) => { if (e.key === "Enter") commit(); if (e.key === "Escape") cancel(); }}
        className={"editable-input " + className} style={style}>
        {options.map((o) => <option key={o.value ?? o} value={o.value ?? o}>{o.label ?? o}</option>)}
      </select>
    );
  }
  if (editing) {
    return (
      <input ref={ref} type={type === "number" ? "number" : "text"} value={draft}
        onChange={(e) => setDraft(e.target.value)}
        onBlur={commit}
        onKeyDown={(e) => { if (e.key === "Enter") commit(); if (e.key === "Escape") cancel(); }}
        className={"editable-input " + className} style={style}/>
    );
  }
  return (
    <span className={"editable " + className} style={style}
      onClick={(e) => { e.stopPropagation(); setEditing(true); }}
      title="Cliquer pour modifier">
      {prefix}{value === "" || value == null ? <span style={{ color: "var(--text-faint)" }}>{placeholder}</span> : value}{suffix}
    </span>
  );
};

Object.assign(window, {
  Icon, Avatar, Badge, StatusBadge, STATUS, Sparkline, KpiCard, Slider,
  ToastProvider, useToast, Modal,
  fmtMoney, fmtDollar, fmtPct,
  EditableField, EditableArea, Editable,
});