/* ============================================================ components.jsx — shared UI primitives + icon set Exposed on window for the other babel scripts. ============================================================ */ const { useState, useEffect, useRef, useCallback, useMemo } = React; /* ---------------- Icons ---------------- */ const I = { ring: (p) => (), search: (p) => (), sun: (p) => (), moon: (p) => (), github: (p) => (), menu: (p) => (), plus: (p) => (), grip: (p) => (), x: (p) => (), chevron: (p) => (), chevronR: (p) => (), arrowR: (p) => (), copy: (p) => (), check: (p) => (), hash: (p) => (), link: (p) => (), info: (p) => (), bulb: (p) => (), warn: (p) => (), flame: (p) => (), image: (p) => (), doc: (p) => (), // system glyphs run: (p) => (), gamepad: (p) => (), camera: (p) => (), anim: (p) => (), sword: (p) => (), heart: (p) => (), target: (p) => (), user: (p) => (), lock: (p) => (), network: (p) => (), save: (p) => (), hud: (p) => (), bag: (p) => (), cube: (p) => (), skull: (p) => (), book: (p) => (), layers: (p) => (), bolt: (p) => (), rocket: (p) => (), cog: (p) => (), flag: (p) => (), inbox: (p) => (), trash: (p) => (), }; /* ---------------- CodeBlock ---------------- */ function highlightCSharp(code) { try { if (window.Prism && Prism.languages.csharp) { return Prism.highlight(code, Prism.languages.csharp, "csharp"); } } catch (e) {} return code.replace(/&/g, "&").replace(//g, ">"); } function CodeBlock({ code, file, lang = "csharp", highlight = [] }) { const [copied, setCopied] = useState(false); const src = (code || "").replace(/\n$/, ""); const lines = src.split("\n"); const hlSet = useMemo(() => new Set(highlight), [highlight.join(",")]); const html = useMemo(() => { if (lang === "csharp" || lang === "cs") return highlightCSharp(src); return src.replace(/&/g, "&").replace(//g, ">"); }, [src, lang]); // split highlighted html back into lines (Prism keeps newlines as text nodes) const htmlLines = useMemo(() => html.split("\n"), [html]); const onCopy = () => { navigator.clipboard?.writeText(src).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1600); }).catch(() => {}); }; const dots = ["#ff5f57", "#febc2e", "#28c840"]; return (
{dots.map((c, i) => )}
{file && {file}} {lang === "csharp" || lang === "cs" ? "C#" : lang} 

          {htmlLines.map((ln, i) => (
            
              {i + 1}
              
              {"\n"}
            
          ))}
); } /* ---------------- Inline markdown-ish renderer ---------------- */ function RichText({ text }) { // supports **bold**, `code`, [link](url) const parts = []; let rest = text; let key = 0; const re = /(\*\*([^*]+)\*\*)|(`([^`]+)`)|(\[([^\]]+)\]\(([^)]+)\))/; while (rest.length) { const m = rest.match(re); if (!m) { parts.push(rest); break; } if (m.index > 0) parts.push(rest.slice(0, m.index)); if (m[1]) parts.push({m[2]}); else if (m[3]) parts.push({m[4]}); else if (m[5]) { const href = m[7]; const internal = href.startsWith("#"); parts.push({m[6]}); } rest = rest.slice(m.index + m[0].length); } return <>{parts}; } /* ---------------- Callout ---------------- */ function Callout({ variant = "note", title, children, text }) { const icon = { note: , tip: , warn: , gold: }[variant] || ; return (
{icon}
{title &&
{title}
} {text ?

: children}
); } /* ---------------- Tabs ---------------- */ function Tabs({ tabs }) { const [i, setI] = useState(0); const t = tabs[i] || tabs[0]; return (
{tabs.map((tb, idx) => ( ))}
{t.blocks ? : (t.code ? : (t.text ?

: null))}
); } /* ---------------- Steps ---------------- */ function Steps({ steps }) { return (
    {steps.map((s, i) => (
  1. {s.title}
    {s.blocks ? :

    }
    2. ))}
); } /* ---------------- Property table ---------------- */ function PropTable({ rows, cols = ["Field", "Type", "Description"] }) { return ( {cols.map((c, i) => )} {rows.map((r, i) => ( ))}
{c}
{r.name} {r.type}
); } /* ---------------- Placeholder / image ---------------- */ function Placeholder({ label, caption, src }) { if (src) { return (
{caption {caption &&
{caption}
}
); } return (
{label || "image-placeholder"}
{caption &&
{caption}
}
); } /* ---------------- Embed (video / iframe) ---------------- */ function embedSrc(url) { if (!url) return null; let m = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{11})/); if (m) return "https://www.youtube.com/embed/" + m[1]; m = url.match(/vimeo\.com\/(?:video\/)?(\d+)/); if (m) return "https://player.vimeo.com/video/" + m[1]; return url; } function Embed({ url, caption }) { const src = embedSrc(url); if (!src) return ; return (
{caption &&
{caption}
}
); } /* ---------------- Block renderer ---------------- */ function slugify(s) { return (s || "").toLowerCase().replace(/[^\w\s-]/g, "").trim().replace(/\s+/g, "-"); } function Heading({ level, text }) { const id = slugify(text); const Tag = level === 3 ? "h3" : "h2"; return ( {text} { e.preventDefault(); history.replaceState(null, "", "#" + id); document.getElementById(id)?.scrollIntoView ? window.scrollTo({ top: document.getElementById(id).getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" }) : null; }}> ); } function Blocks({ blocks }) { return (<>{blocks.map((b, i) => )}); } function Block({ b }) { switch (b.type) { case "h2": return ; case "h3": return ; case "p": return

; case "lede": return

{b.text}

; case "ul": return
    {(b.items || []).filter((it) => it && it.trim() !== "").map((it, i) =>
    • )}
; case "ol": return
    {(b.items || []).filter((it) => it && it.trim() !== "").map((it, i) =>
    2. )}
; case "code": return ; case "callout": return {b.children ? : null}; case "tabs": return ; case "steps": return ; case "props": return ; case "placeholder": return ; case "embed": return ; case "hr": return
; default: return null; } } /* Resolve an icon key to a component. An explicit "none" (or empty) returns null = no icon. */ function resolveIcon(key, fallbackKey) { if (key === "none" || key === "") return null; return I[key] || (fallbackKey ? I[fallbackKey] : null) || null; } Object.assign(window, { I, CodeBlock, RichText, Callout, Tabs, Steps, PropTable, Placeholder, Embed, Blocks, Block, Heading, slugify, highlightCSharp, resolveIcon, });