// Shared primitives + icons for Market-Options const { useState, useEffect, useRef, useMemo, createContext, useContext, Fragment } = React; // ===== Icons (line, 16px, currentColor) ===== const Icon = { Dashboard: (p) => , Docs: (p) => , Key: (p) => , Chart: (p) => , Settings: (p) => , Webhook: (p) => , Team: (p) => , Billing: (p) => , Search: (p) => , Copy: (p) => , Check: (p) => , X: (p) => , Plus: (p) => , Eye: (p) => , EyeOff: (p) => , Trash: (p) => , Refresh: (p) => , ArrowRight: (p) => , Bolt: (p) => , Logout: (p) => , Globe: (p) => , Shield: (p) => , Clock: (p) => , Stack: (p) => , Github: (p) => , Google: (p) => , Lightning: (p) => , ChainLink: (p) => , Calendar: (p) => , Quote: (p) => , Magnify: (p) => , }; // ===== Brand ===== function BrandMark({ size = 28 }) { return (

); } function Brand({ small }) { return (

Market-Options {!small && v1}

); } // ===== Sidebar ===== function Sidebar({ active, onNavigate, route }) { const items = [ { id: "dashboard", label: "Dashboard", icon: }, { id: "docs", label: "API Reference", icon: , badge: "v1" }, { id: "keys", label: "API Keys", icon: }, { id: "analytics", label: "Usage", icon: }, { id: "billing", label: "Billing", icon: }, ]; const spUser = (window.Auth && Auth.getUser()) || null; // Defensive null-checks: a partially-stored user object (e.g. mid-rotation // race, or a backend response missing the email) used to crash the whole // sidebar on spUser.email.split — fall back to safe placeholders instead. const spEmailRaw = spUser && typeof spUser.email === "string" ? spUser.email : ""; const spName = spUser ? (spUser.name || (spEmailRaw && spEmailRaw.split("@")[0]) || "User") : "Guest"; const spEmail = spEmailRaw || (spUser ? "—" : "Not signed in"); const spInitials = (function () { const src = (spUser && (spUser.name || spEmailRaw)) || "Guest"; const parts = String(src).split(/[\s@._-]+/).filter(Boolean); const a = (parts[0] && parts[0][0]) || ""; const b = (parts[1] && parts[1][0]) || ""; return (a + b).toUpperCase() || "G"; })(); return ( ); } // ===== Top bar inside content ===== function TopBar({ crumbs = [], status = "operational" }) { return (

{crumbs.map((c, i) => ( {i > 0 && /} {c} ))}

Market-Options API · operational

); } // ===== Code block with tabs + copy ===== function CodeBlock({ tabs, defaultTab, height }) { const [active, setActive] = useState(defaultTab || tabs[0].id); const [copied, setCopied] = useState(false); const cur = tabs.find((t) => t.id === active) || tabs[0]; const copy = () => { const text = cur.code .replace(/<[^>]+>/g, "") .replace(/</g, "<") .replace(/>/g, ">") .replace(/&/g, "&"); if (navigator.clipboard) navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 1400); }; return (

{tabs.map((t) => (

setActive(t.id)} > {t.label}

))}


  );
}

// Syntax highlighter — placeholder-based to avoid markup collisions
function escapeHtml(s) {
  return s.replace(/&/g, "&").replace(//g, ">");
}
function highlight(raw, rules) {
  // 1. Extract by-pattern tokens into placeholders so later rules don't see inside them.
  const slots = [];
  let work = raw;
  for (const r of rules) {
    work = work.replace(r.re, (m, ...args) => {
      // args last two are offset, string; the captures are args[0..n-1]
      const groups = args.slice(0, -2);
      const inner = r.capture ? groups[r.capture - 1] : m;
      slots.push({ cls: r.cls, text: inner, full: m });
      return `\x00${slots.length - 1}\x00`;
    });
  }
  // 2. HTML-escape what's left.
  work = escapeHtml(work);
  // 3. Swap placeholders for spans, escaping their inner text too.
  return work.replace(/\x00(\d+)\x00/g, (_, i) => {
    const s = slots[+i];
    // If the rule had a capture group, surround only the captured part with the span.
    if (s.full === s.text) {
      return `${escapeHtml(s.text)}`;
    }
    // Otherwise replace the captured substring within the full match.
    const idx = s.full.indexOf(s.text);
    const before = escapeHtml(s.full.slice(0, idx));
    const after = escapeHtml(s.full.slice(idx + s.text.length));
    return `${before}${escapeHtml(s.text)}${after}`;
  });
}

const H = {
  json: (raw) => highlight(raw, [
    { re: /"[^"]*"(?=\s*:)/g, cls: "tok-key" },           // object keys
    { re: /"[^"]*"/g, cls: "tok-str" },                    // string values
    { re: /\b(true|false|null)\b/g, cls: "tok-bool" },     // bool/null
    // numbers — the lookbehind/lookahead skip digits inside \x00 placeholders
    { re: /(? highlight(raw, [
    { re: /"[^"]*"/g, cls: "tok-str" },                    // strings first
    { re: /^curl\b/m, cls: "tok-method" },                 // curl keyword
    { re: /\b(GET|POST|DELETE|PUT)\b/g, cls: "tok-method" },
    { re: /https?:\/\/[^\s"]+/g, cls: "tok-path" },        // URLs
    { re: /(?:^|\s)(--?[a-zA-Z-]+)/g, cls: "tok-flag", capture: 1 }, // flags
  ]),
  js: (raw) => highlight(raw, [
    { re: /\/\/[^\n]*/g, cls: "tok-cmt" },
    { re: /"[^"]*"|'[^']*'|`[^`]*`/g, cls: "tok-str" },
    { re: /\b(const|let|var|async|await|function|return|new|import|from|export)\b/g, cls: "tok-bool" },
    { re: /\b(fetch|console|log)\b/g, cls: "tok-method" },
  ]),
  py: (raw) => highlight(raw, [
    { re: /#[^\n]*/g, cls: "tok-cmt" },
    { re: /"[^"]*"|'[^']*'/g, cls: "tok-str" },
    { re: /\b(import|from|def|return|if|else|None|True|False)\b/g, cls: "tok-bool" },
  ]),
};

// ===== Mini spark/area chart =====
function Sparkline({ data, color = "var(--green)", height = 36, fill = true }) {
  const w = 200, h = height;
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / range) * (h - 4) - 2;
    return [x, y];
  });
  const path = pts.map((p, i) => `${i === 0 ? "M" : "L"}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(" ");
  const area = `${path} L${w},${h} L0,${h} Z`;
  return (
    
  );
}

// ===== Tag =====
function Tag({ kind = "muted", children }) {
  return {children};
}

// ===== Loading / error states (console screens) =====
function LoadingScreen({ crumbs }) {
  return (
    <>
      
      
        Loading…
      
    
  );
}

function ErrorScreen({ crumbs, message, onRetry }) {
  return (
    <>
      
      
        
          
            
          
          Something went wrong
          {message || "Please try again."}
          {onRetry && }
        
      
    
  );
}

// Ensures a sparkline always has at least two data points.
function sparkData(arr) {
  const a = (arr || []).map((n) => Number(n) || 0);
  if (a.length === 0) return [0, 0];
  if (a.length === 1) return [0, a[0]];
  return a;
}

// ===== Re-auth (step-up password) modal + guard hook =====
// Sensitive actions (API keys, subscriptions) require a fresh password check.
function ReauthModal({ title, message, onAuthed, onClose }) {
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const overlay = {
    position: "fixed", inset: 0, zIndex: 70,
    background: "oklch(0.08 0.012 240 / 0.7)", backdropFilter: "blur(6px)",
    display: "grid", placeItems: "center",
  };

  const submit = (e) => {
    if (e) e.preventDefault();
    if (loading) return;
    if (!password) { setError("Enter your password to continue."); return; }
    setLoading(true);
    setError("");
    API.reauth(password)
      .then(() => { setLoading(false); onAuthed(); })
      .catch((err) => {
        setError((err && err.message) || "Could not confirm your password.");
        setLoading(false);
      });
  };

  return (
    
       e.stopPropagation()} onSubmit={submit}>
        
          
            
            {title || "Confirm it's you"}
          
          
        
        
          
            {message || "This is a sensitive action. Re-enter your password to continue."}
          
          
            Password
             setPassword(e.target.value)} />
          
          {error && (
            {error}
          )}
          
            
            
          
        
      
    
  );
}

// Returns { guard, reauthModal }. Call guard(fn, opts) to run a sensitive
// action: if a fresh step-up token exists it runs immediately, otherwise the
// password modal appears first. Render {reauthModal} somewhere in the screen.
function useReauthGuard() {
  const [pending, setPending] = useState(null);
  const guard = (fn, opts) => {
    if (window.Auth && Auth.hasReauth()) { fn(); return; }
    setPending({ fn: fn, title: opts && opts.title, message: opts && opts.message });
  };
  const reauthModal = pending ? (
     setPending(null)}
      onAuthed={() => { const fn = pending.fn; setPending(null); fn(); }}
    />
  ) : null;
  return { guard: guard, reauthModal: reauthModal };
}

/**
 * Copy `text` to the clipboard. Prefers the async Clipboard API (HTTPS only)
 * and falls back to a hidden textarea + execCommand so legacy browsers and
 * iframes without the Clipboard API still work. Resolves on success, rejects
 * on any failure — callers handle both states so the UI never lies about
 * whether the copy happened.
 */
function copyToClipboard(text) {
  if (!text || typeof text !== "string") {
    return Promise.reject(new Error("nothing to copy"));
  }
  if (navigator.clipboard && navigator.clipboard.writeText) {
    return navigator.clipboard.writeText(text);
  }
  return new Promise(function (resolve, reject) {
    try {
      var ta = document.createElement("textarea");
      ta.value = text;
      ta.setAttribute("readonly", "");
      ta.style.position = "fixed";
      ta.style.top = "0";
      ta.style.left = "-9999px";
      document.body.appendChild(ta);
      ta.focus();
      ta.select();
      var ok = document.execCommand("copy");
      document.body.removeChild(ta);
      if (ok) resolve();
      else reject(new Error("execCommand copy returned false"));
    } catch (err) {
      reject(err);
    }
  });
}

// Globally expose
Object.assign(window, {
  Icon, BrandMark, Brand, Sidebar, TopBar, CodeBlock, H, Sparkline, Tag,
  LoadingScreen, ErrorScreen, sparkData, ReauthModal, useReauthGuard,
  copyToClipboard,
});