{/* hairline frames */}

{/* photo */} {alt}

{/* corner stamps */}

№ 01

D.B.G.

{caption}

{cornerStamp}

); // ----- Engraved portrait (line-etched silhouette of a man, suit, glasses) ----- // Stylized as a 19th-century engraving: parallel hatching, contour lines, // no photographic content. Reads as a placeholder portrait of a jurist. const EngravedPortrait = ({ accent = 'var(--gold)', bg = 'var(--navy)', ink = 'var(--paper)' }) => ( ); // ----- Compass rose / global reach mark ----- const CompassMark = ({ accent = 'var(--gold)', ink = 'var(--paper)', size = 220 }) => ( ); // ----- World jurisdiction map (abstract dotted continents) ----- const JurisdictionMap = ({ accent = 'var(--gold)', ink = 'var(--paper)' }) => ( ); // ----- Service-specific schematics ----- // 01 Mediation — two parties converging // ============================================================= // SCHEMATICS — bold, low-noise, single-gesture diagrams. // Each fits a 360x220 viewBox with generous whitespace. // ============================================================= const Mono = ({ x, y, children, accent, opacity = 0.55, anchor = 'start', size = 9, color }) => ( {children} ); // 01 Mediation — two arcs converging into a single gold node. const MediationSchematic = ({ accent = 'var(--gold-deep)', ink = 'var(--ink)' }) => ( ); // 02 Special Master — three columns of evidence stacks ordered by a single horizontal bar. const SpecialMasterSchematic = ({ accent = 'var(--gold-deep)', ink = 'var(--ink)' }) => ( ); // 03 Forensic — linear chain with a hash strip beneath. const ForensicSchematic = ({ accent = 'var(--gold-deep)', ink = 'var(--ink)' }) => ( ); // 04 AI Disputes — sparse layered network, signal-bright. const AISchematic = ({ accent = 'var(--gold-deep)', ink = 'var(--ink)' }) => ( ); // 05 Arbitration — three-arbitrator panel with parties below and award seal. const ArbitrationSchematic = ({ accent = 'var(--gold-deep)', ink = 'var(--ink)' }) => ( ); // ----- Generic article figure — supports many kinds ----- // kinds: 'line' · 'bars' · 'bars-h' · 'tiers' · 'flow' · 'compare' · 'world' · 'callout' const ArticleFigurePlot = ({ accent = 'var(--gold-deep)', ink = 'var(--ink)', title, caption, data, kind = 'line' }) => { const renderChart = () => { // VERTICAL BAR if (kind === 'bars' && data) { return ( ); } // LINE if (kind === 'line' && data) { return ( ); } // HORIZONTAL BARS if (kind === 'bars-h' && data) { const maxV = Math.max(...data.rows.map(r => r.v)); return ( ); } // TIERED ACCESS DIAGRAM if (kind === 'tiers' && data) { return ( ); } // SEQUENTIAL FLOW if (kind === 'flow' && data) { const n = data.steps.length; return ( ); } // SIDE-BY-SIDE COMPARISON if (kind === 'compare' && data) { return ( ); } // CALLOUT — single big number with caption if (kind === 'callout' && data) { return ( ); } return null; }; return (

{title}

{renderChart()}

{caption}

); }; // ============================================================= // BOOK COVER — stylized typographic SVG cover for a treatise/book. // Used on the About page to show featured publications visually. // ============================================================= const BookCover = ({ title, sub, year, publisher, accent = '#0F1B2D', tint = 'var(--gold)' }) => ( ); // ============================================================= // ARTICLE MARKS — 12 distinct black-and-white diagrams. // One per Insights article. Used on the index card and at the // top of each article page. Stroke-based, no fill, no gold. // ============================================================= const ArticleMark = ({ id, onDark = false, size = 'auto' }) => { const stroke = onDark ? 'rgba(244,240,230,0.85)' : 'rgba(15,27,45,0.85)'; const muted = onDark ? 'rgba(244,240,230,0.35)' : 'rgba(15,27,45,0.30)'; const fill = onDark ? 'rgba(244,240,230,0.85)' : 'rgba(15,27,45,0.85)'; const sw = (n) => n; const wrap = (children) => ( ); switch (id) { case 'evolution': // Three-wave timeline return wrap(<> {[0,1,2].map(i => ( {['WAVE I','WAVE II','WAVE III'][i]} ))} ); case 'forensic-data': // Magnifier over data points return wrap(<> {Array.from({ length: 24 }).map((_, i) => { const x = 30 + (i % 8) * 22; const y = 50 + Math.floor(i / 8) * 22; return ; })} ); case 'hallucinations': // Fragmented signal return wrap(<> {/* fragmented middle */} {[110,124,138,152,166,180].map((x, i) => ( ))} HALLUCINATION ); case 'deepfakes': // Split portrait — half real, half synthetic return wrap(<> {/* left: real (clean lines) */} {/* right: synthetic (with artifacts) */} {/* glitch lines on synthetic */} {[60, 90, 110].map((y, i) => ( ))} REAL SYNTH ); case 'smart-contracts': // Chain link + code brackets return wrap(<> {/* chain — two interlocked ovals */} {/* code brackets above */} {'{ }'} ON-CHAIN · OFF-CHAIN ); case 'cyber-insurance': // Cracked shield return wrap(<> {/* crack */} COVERAGE ); case 'protective-order': // Five stacked tiers return wrap(<> {[0,1,2,3,4].map(i => { const w = 80 + i * 24; const x = 120 - w / 2; const y = 30 + i * 20; return ; })} 5 TIERS ); case 'forensic-selection': // Question mark over a list return wrap(<> {[55, 75, 95, 115, 135].map((y, i) => ( ))} ? ); case 'jams-ai-rules': // Framework grid with one filled cell return wrap(<> {Array.from({ length: 4 }).map((_, r) => Array.from({ length: 4 }).map((__, c) => { const x = 50 + c * 35; const y = 30 + r * 30; const filled = (r === 1 && c === 2); return ( ); }) )} FRAMEWORK · GRID ); case 'special-master-tar': // Funnel return wrap(<> {/* incoming dots */} {[80, 105, 120, 135, 160].map((x, i) => ( ))} {/* output */} VALIDATE ); case 'cross-border': // Globe with arc paths return wrap(<> {/* meridians */} {/* path arcs */} CROSS-BORDER ); case 'special-master-economy': // Balance scale with clock return wrap(<> {/* scale */} {/* fulcrum */} {/* clock — simplified */} 90 / 60 ); default: return wrap(<> ); } }; // ----- Code + Case Law convergence diagram (thesis visual) ----- // Top: source code lines. Middle: gold horizontal axis labeled. // Bottom: a case-law citation excerpt. Reads as the thesis literally drawn. const CodeMeetsLawDiagram = ({ accent = 'var(--gold-deep)', ink = 'var(--ink)', muted = 'var(--slate-700)' }) => ( ); // ----- Wax-stamp seal ----- const Seal = ({ size = 130, accent = 'var(--gold)', ink = 'var(--paper)' }) => ( ); // ----- Filigree divider ----- const Filigree = ({ color = 'var(--gold-deep)' }) => ( ); // ----- Article figure: hallucination distribution (bar chart styled) ----- // (component inline above) Object.assign(window, { EngravedPortrait, PhotoPortrait, CompassMark, JurisdictionMap, MediationSchematic, SpecialMasterSchematic, ForensicSchematic, AISchematic, ArbitrationSchematic, ArticleFigurePlot, ArticleMark, BookCover, CodeMeetsLawDiagram, Seal, Filigree, });