// admin-markdown-to-figures.jsx — "Markdown → Figures" generator
//
// Paste a blog-post markdown file → the figures-plan edge function asks Claude for a
// compact JSON plan → the PORTED deterministic renderer below turns that plan into
// self-contained HTML for the cover package + in-article figures, each with a Copy
// button. The renderer is 100% client-side and pure (no LLM); only the markdown→plan
// step calls the server.
(function () {
const { useState, useRef } = React;
const Icon = window.Icon;
const SUPABASE_URL = 'https://iwvlmpgeodctctmaacja.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Iml3dmxtcGdlb2RjdGN0bWFhY2phIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjYwMzY3MTUsImV4cCI6MjA4MTYxMjcxNX0.hMs9OGPTdhPAs0lSKzDWE1Cc-K27NoW11--niolkoWY';
async function planFigures(markdown) {
const db = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
const { data, error } = await db.functions.invoke('figures-plan', { body: { markdown } });
// Edge function returns 422 with { ok:false, error, raw } on validation failure.
// supabase-js surfaces non-2xx as `error`, but the JSON body still rides along.
if (error && !data) {
let detail = error.message;
try { detail = (await error.context.json())?.error || detail; } catch (_e) {}
throw new Error(detail || 'Planner failed');
}
if (!data?.ok) throw new Error(data?.error || 'Planner returned no usable plan');
return data.plan;
}
// ── Sample markdown (the acceptance-test post) ───────────────────────────
const SAMPLE_MD = `# Exclusive vs Shared Leads: Which Model Makes More Money?
Exclusive leads go to one buyer. Shared leads go to several at once — usually 3 to 5. That single difference decides your close rate and your margin.
## At a glance
Exclusive leads close 2–3x higher than shared in the same niche. A typical shared lead is sold to 3–5 buyers. With exclusive delivery there are 0 duplicate-outreach disputes.
## The real cost math
Per 100 leads: exclusive costs $45/lead and closes at 25%; shared costs $18/lead and closes at 9%. Profit per lead lands at $255 exclusive vs $90 shared. The cheaper lead made the more expensive customer.
## How to decide
First, is the deal high-ticket or retainer-based? If one close is worth four figures, go exclusive. Second, can you respond in under 60 seconds every time? Shared only works with instant speed-to-lead. Third, is the client judging you on quality or volume?
## Common mistakes
Buying on cost-per-lead alone — the cheapest lead is rarely the cheapest customer. Running shared without speed-to-lead — slow follow-up turns shared leads into expensive noise.
> You don't lose money on shared leads at the point of sale. You lose it ten minutes later, on the call that never connects.`;
// =====================================================================
// PORTED RENDERER — pure string builders. Methods call each other via R.*
// Copied verbatim from the "Markdown to Figures" prototype; the only change
// is buildFigures(plan) takes the plan as an argument instead of this.state.
// =====================================================================
const R = {
esc(s) { return String(s == null ? '' : s).replace(/&/g, '&').replace(//g, '>'); },
emph(s, color) { return this.esc(s).replace(/\[\[(.+?)\]\]/g, '$1'); },
bodyEmph(s) { return this.esc(s).replace(/\[\[(.+?)\]\]/g, '$1'); },
varMap: {
'var(--paper3)': '#E9E2CE', 'var(--paper2)': '#F4EFE2', 'var(--paper)': '#FCFAF2',
'var(--ink)': '#1A2B3B', 'var(--body)': '#2c2a24', 'var(--muted)': '#7A715A',
'var(--border2)': '#D6CFB8', 'var(--border)': '#E5E0CC',
'var(--orange-deep)': '#C7501A', 'var(--orange-soft)': '#FFE4C2', 'var(--orange)': '#F97316',
'var(--emerald-deep)': '#0F8F66', 'var(--emerald-soft)': '#D5F1E5', 'var(--emerald)': '#10B981',
'var(--red-soft)': '#FBE2E0', 'var(--red-deep)': '#B0301F', 'var(--red)': '#EF4444',
'var(--sans)': "'Inter',system-ui,sans-serif", 'var(--serif)': "'Source Serif 4',Georgia,serif", 'var(--mono)': "'JetBrains Mono',ui-monospace,monospace",
},
resolveVars(html) { let out = String(html); for (const k in this.varMap) { out = out.split(k).join(this.varMap[k]); } return out; },
ckSm(c) { return ''; },
xSm(c) { return ''; },
arrowSm(c) { return ''; },
renderFigure(f) {
switch (f.element) {
case 'hero': return this.bHero(f);
case 'og': return this.bOg(f);
case 'key-takeaway': return this.bKey(f);
case 'note-callout': return this.bNote(f);
case 'comparison-split': return this.bSplit(f);
case 'stat-trio': return this.bStat(f);
case 'cost-table': return this.bCost(f);
case 'comparison-table': return this.bCmp(f);
case 'pull-quote': return this.bQuote(f);
case 'process-flow': return this.bFlow(f);
case 'before-after': return this.bBeforeAfter(f);
case 'decision-steps': return this.bSteps(f);
case 'pitfall-grid': return this.bPitfall(f);
case 'link-card': return this.bLink(f);
case 'cta': return this.bCta(f);
case 'concept-cover': return this.bConceptCoverFeatured(f);
case 'faq': case 'faq-accordion': return this.bFaq(f);
default: return this.bUnknown(f);
}
},
paddedFor(el) { return !(el === 'hero' || el === 'og' || el === 'pull-quote' || el === 'comparison-split' || el === 'process-flow'); },
bUnknown(f) { return '
Element “' + this.esc(f.element) + '” isn’t in the registry — skipped.
'; },
coverDiagramFull(cov) {
const t = cov.type || 'spread', e = this.esc.bind(this), s = cov.spread || {};
if (t === 'spread') {
const m = s.midpoint;
const mark = m ? '
' + e(m.value || '') + '
' : '';
return '
'
+ '
' + e(s.label || 'The spread') + '
' + e(s.subtitle || '') + '
' + e(s.multiplier || '') + '
'
+ mark
+ ''
+ '
' + e((s.lo || {}).value || '') + '
' + e((s.lo || {}).label || '') + '
'
+ '
' + e((s.hi || {}).value || '') + '
' + e((s.hi || {}).label || '') + '
';
}
const v = cov.versus || {}, L = v.left || {}, Rr = v.right || {};
if (t === 'versus') {
return '
Claude reads your markdown, picks the right element for each block from the locked house registry, and renders the cover, OG card and in-article figures. Copy any block's HTML straight into your post.