/* project-detail.jsx — NodePrompt case study */ const { useState: useStatePD, useEffect: useEffectPD, useMemo: useMemoPD, useRef: useRefPD } = React; /* ------------------------------------------------------------------ NodepromptDecompose — preset-driven decomposition demo. Flow: select a preset → sentence appears in a textarea → press Decompose → 17+ typed nodes drift out one by one and edges fade in. Hover/click any node for a tooltip with type, weight, and description, mirroring NodePrompt's inspector. ------------------------------------------------------------------ */ const NP_TYPES = ["ens", "res", "unum", "aliquid", "verum", "bonum"]; const NP_TYPE_GLOSS = { ens: { latin: "ens", en: "Being", kr: "존재", q: "What does this prompt posit as existing?" }, res: { latin: "res", en: "Essence", kr: "본질", q: "What is it, as a formal structure?" }, unum: { latin: "unum", en: "Unity", kr: "통일성", q: "What holds it together as one?" }, aliquid: { latin: "aliquid", en: "Difference", kr: "차이", q: "What distinguishes it from what it is not?" }, verum: { latin: "verum", en: "Truth", kr: "참", q: "How is it true to a knower?" }, bonum: { latin: "bonum", en: "Value", kr: "선", q: "How is it desirable to a will?" }, }; /* Each preset: a sentence + ~17 typed nodes (1 root + 6 register parents + 10 leaves). Each node carries a parent for edge generation, plus a one-line description for the inspector. */ const NP_PRESETS = [ { id: "research", label: "Research proposal", sentence: "Write a research proposal on spintronics for a graduate fellowship, balancing rigor against the reader's limited attention.", nodes: [ { id: "root", type: "ens", parent: null, ring: 0, ang: 0, w: 1.00, label: "spintronics proposal", desc: "The whole. What the prompt posits as a thing — the proposal itself, taken as one object." }, { id: "res", type: "res", parent: "root", ring: 1, ang: -90, w: 0.85, label: "research framework", desc: "The formal structure: thesis, claims, the architecture that holds the argument." }, { id: "unum", type: "unum", parent: "root", ring: 1, ang: -30, w: 0.75, label: "fellowship reader", desc: "The frame that holds it together — who reads this, under what evaluation rubric." }, { id: "bonum", type: "bonum", parent: "root", ring: 1, ang: 30, w: 0.65, label: "career stake", desc: "The desirability axis: tone, urgency, what is at risk for the writer." }, { id: "verum", type: "verum", parent: "root", ring: 1, ang: 90, w: 0.80, label: "scientific rigor", desc: "What it owes the intellect — methodological commitments, reproducibility, falsifiability." }, { id: "aliquid", type: "aliquid", parent: "root", ring: 1, ang: 150, w: 0.70, label: "novelty vs prior art", desc: "Difference. What it is not — distinguishing this from the existing literature." }, { id: "res2", type: "res", parent: "root", ring: 1, ang: 210, w: 0.55, label: "methods section", desc: "Secondary structural register — the experimental procedure read as form, not content." }, { id: "l-res-aims", type: "res", parent: "res", ring: 2, ang: -110, w: 0.40, label: "aims", desc: "A child of the framework — the deliverable claims the proposal commits to." }, { id: "l-res-budget", type: "res", parent: "res", ring: 2, ang: -70, w: 0.35, label: "budget arc", desc: "How resources map onto the structural skeleton over the funding period." }, { id: "l-unum-rubric",type: "unum", parent: "unum", ring: 2, ang: -50, w: 0.45, label: "evaluation rubric", desc: "The frame the reader applies — explicit and implicit scoring axes." }, { id: "l-unum-tone", type: "unum", parent: "unum", ring: 2, ang: -10, w: 0.30, label: "register", desc: "The institutional voice the document must speak in to be heard at all." }, { id: "l-bonum-stake",type: "bonum", parent: "bonum", ring: 2, ang: 45, w: 0.40, label: "stake", desc: "What the writer loses if the proposal fails — the affective center of gravity." }, { id: "l-verum-rep", type: "verum", parent: "verum", ring: 2, ang: 75, w: 0.55, label: "reproducibility", desc: "A specific commitment to a knower — code, data, methods exposed for audit." }, { id: "l-verum-fals", type: "verum", parent: "verum", ring: 2, ang: 105, w: 0.45, label: "falsifiability", desc: "What would count as the proposal being wrong — required for it to count as knowledge." }, { id: "l-aliq-prior", type: "aliquid", parent: "aliquid", ring: 2, ang: 140, w: 0.45, label: "prior literature", desc: "The not-it. What this proposal explicitly defines itself against." }, { id: "l-aliq-gap", type: "aliquid", parent: "aliquid", ring: 2, ang: 170, w: 0.40, label: "open gap", desc: "The seam between what is known and what this work intends to add." }, { id: "l-res2-meas", type: "res", parent: "res2", ring: 2, ang: 205, w: 0.35, label: "measurement chain", desc: "The instrument-to-claim path. Where rigor lives or fails, structurally." }, ], crossEdges: [ ["l-verum-rep", "l-res-aims"], ["l-aliq-gap", "l-verum-fals"], ["l-bonum-stake","l-unum-rubric"], ], }, { id: "quantum", label: "Quantum, for a 14-year-old", sentence: "Explain quantum entanglement to a high-school student in a way that builds wonder before it builds formalism.", nodes: [ { id: "root", type: "ens", parent: null, ring: 0, ang: 0, w: 1.00, label: "entanglement, taught", desc: "The whole. The act of explanation as one object — not the topic alone, but the teaching of it." }, { id: "res", type: "res", parent: "root", ring: 1, ang: -90, w: 0.80, label: "quantum mechanics", desc: "The formal structure underneath the lesson. The thing whose surface is being shown." }, { id: "unum", type: "unum", parent: "root", ring: 1, ang: -30, w: 0.85, label: "high-school context", desc: "Pedagogical frame. What this listener already has — what the lesson can stand on." }, { id: "bonum", type: "bonum", parent: "root", ring: 1, ang: 30, w: 0.80, label: "wonder before rigor", desc: "The affective stance the lesson is asked to take. The desirable shape of the encounter." }, { id: "verum", type: "verum", parent: "root", ring: 1, ang: 90, w: 0.65, label: "what is physically true", desc: "The non-negotiable: claims that have to remain accurate even when simplified." }, { id: "aliquid", type: "aliquid", parent: "root", ring: 1, ang: 150, w: 0.75, label: "vs classical correlation", desc: "Difference. The crucial not-it — entanglement is most clearly seen against what it is not." }, { id: "res2", type: "res", parent: "root", ring: 1, ang: 210, w: 0.55, label: "explanatory ladder", desc: "Structural form of the explanation itself: where to start, where to stop, in what order." }, { id: "l-res-bell", type: "res", parent: "res", ring: 2, ang: -115, w: 0.45, label: "Bell pair", desc: "The minimal example. The simplest formal object that exhibits the phenomenon." }, { id: "l-res-state", type: "res", parent: "res", ring: 2, ang: -65, w: 0.35, label: "state vector", desc: "The mathematical handle. Optional for a 14-year-old; load-bearing if invoked." }, { id: "l-unum-prior", type: "unum", parent: "unum", ring: 2, ang: -45, w: 0.45, label: "prior knowledge", desc: "What the listener already trusts — coins, dice, polarizers — anchors for new claims." }, { id: "l-unum-met", type: "unum", parent: "unum", ring: 2, ang: -15, w: 0.50, label: "metaphor budget", desc: "How many analogies the lesson can spend before they start lying for it." }, { id: "l-bonum-aha", type: "bonum", parent: "bonum", ring: 2, ang: 45, w: 0.50, label: "aha-moment", desc: "The affective payoff the lesson is engineered around. The desirable peak." }, { id: "l-verum-nosig",type: "verum", parent: "verum", ring: 2, ang: 85, w: 0.45, label: "no-signaling", desc: "A constraint that must survive any simplification — entanglement carries no usable signal." }, { id: "l-verum-meas", type: "verum", parent: "verum", ring: 2, ang: 115, w: 0.40, label: "measurement role", desc: "What measurement means in this regime — different from the classical reading." }, { id: "l-aliq-coin", type: "aliquid", parent: "aliquid", ring: 2, ang: 140, w: 0.50, label: "shared-coin trap", desc: "The classical model that almost works. Best contrast for showing where it breaks." }, { id: "l-aliq-bell", type: "aliquid", parent: "aliquid", ring: 2, ang: 170, w: 0.45, label: "Bell inequality", desc: "The line that classical correlations cannot cross — the place difference becomes visible." }, { id: "l-res2-step", type: "res", parent: "res2", ring: 2, ang: 205, w: 0.35, label: "step ordering", desc: "The sequence of explanation. Wonder first, mechanism second, formalism only on demand." }, ], crossEdges: [ ["l-aliq-coin", "l-verum-nosig"], ["l-bonum-aha", "l-aliq-bell"], ["l-unum-met", "l-res-bell"], ], }, { id: "vinyl", label: "Vinyl-label logo", sentence: "Design a logo for an independent vinyl record label, refusing the shorthand of major-label marks while staying readable at 7-inch scale.", nodes: [ { id: "root", type: "ens", parent: null, ring: 0, ang: 0, w: 1.00, label: "label mark", desc: "The whole. The mark itself, taken as a single object — not the brand system, the mark." }, { id: "res", type: "res", parent: "root", ring: 1, ang: -90, w: 0.80, label: "brand system", desc: "The formal scaffolding the mark belongs to: typography, palette, lockups." }, { id: "unum", type: "unum", parent: "root", ring: 1, ang: -30, w: 0.75, label: "vinyl culture", desc: "What holds the mark in place culturally — the listener it speaks to." }, { id: "bonum", type: "bonum", parent: "root", ring: 1, ang: 30, w: 0.85, label: "tone, attitude", desc: "The affective register — independent, considered, slightly hostile to the obvious." }, { id: "verum", type: "verum", parent: "root", ring: 1, ang: 90, w: 0.70, label: "design principles", desc: "Commitments to a knower — what would make a designer call this work honest." }, { id: "aliquid", type: "aliquid", parent: "root", ring: 1, ang: 150, w: 0.75, label: "vs major-label marks", desc: "Difference. The not-it — the corporate marks the brief explicitly refuses." }, { id: "res2", type: "res", parent: "root", ring: 1, ang: 210, w: 0.55, label: "press constraints", desc: "The other formal register: physical print, ink coverage, 7-inch legibility." }, { id: "l-res-type", type: "res", parent: "res", ring: 2, ang: -115, w: 0.45, label: "type system", desc: "Custom or licensed; condensed or wide. Carries more of the label's voice than the mark itself." }, { id: "l-res-grid", type: "res", parent: "res", ring: 2, ang: -65, w: 0.35, label: "grid", desc: "The proportions the rest of the system has to obey." }, { id: "l-unum-shop", type: "unum", parent: "unum", ring: 2, ang: -50, w: 0.40, label: "record-shop bin", desc: "Where the mark will actually first be seen — sideways, half-occluded, fluorescent light." }, { id: "l-unum-dj", type: "unum", parent: "unum", ring: 2, ang: -10, w: 0.35, label: "DJ subculture", desc: "The community whose vocabulary the mark should already speak." }, { id: "l-bonum-ind", type: "bonum", parent: "bonum", ring: 2, ang: 45, w: 0.50, label: "indie posture", desc: "Refusal as aesthetic — a stance, not just a style." }, { id: "l-verum-leg", type: "verum", parent: "verum", ring: 2, ang: 75, w: 0.50, label: "legibility", desc: "Survives reduction. A non-negotiable for a print mark." }, { id: "l-verum-honest",type: "verum", parent: "verum", ring: 2, ang: 105, w: 0.40, label: "honest construction", desc: "No false depth, no AI-render texture standing in for craft." }, { id: "l-aliq-corp", type: "aliquid", parent: "aliquid", ring: 2, ang: 140, w: 0.50, label: "corporate gloss", desc: "The aesthetic to refuse — gradients, fake bevels, inevitability." }, { id: "l-aliq-trend", type: "aliquid", parent: "aliquid", ring: 2, ang: 170, w: 0.40, label: "trend cycles", desc: "Differentiation across time, not just across the shelf." }, { id: "l-res2-ink", type: "res", parent: "res2", ring: 2, ang: 205, w: 0.40, label: "ink coverage", desc: "The press's tolerance for thin lines and large solids — a real constraint, not a stylistic one." }, ], crossEdges: [ ["l-aliq-corp", "l-bonum-ind"], ["l-verum-leg", "l-res2-ink"], ["l-unum-shop", "l-verum-leg"], ], }, ]; /* Tree → polar coordinates. Root at center; ring 1 evenly spaced; ring 2 placed at given ang. Returns {x, y} in viewBox units. */ function npNodePos(node, W, H) { if (node.ring === 0) return { x: 0, y: 0 }; const R1 = Math.min(W, H) * 0.22; const R2 = Math.min(W, H) * 0.40; const r = node.ring === 1 ? R1 : R2; const a = (node.ang * Math.PI) / 180; return { x: Math.cos(a) * r, y: Math.sin(a) * r }; } /* Lombardi-style markers — pattern, never colour. */ function NpNodeMark({ type, r }) { const stroke = "var(--fg)"; const sw = 1.25; switch (type) { case "ens": return ; case "res": return ; case "unum": return ( ); case "aliquid": return ( ); case "verum": return ( ); case "bonum": return ; default: return null; } } function npBezier(p1, p2, sweep = 1) { const mx = (p1.x + p2.x) / 2; const my = (p1.y + p2.y) / 2; const dx = p2.x - p1.x; const dy = p2.y - p1.y; const len = Math.hypot(dx, dy) || 1; const off = len * 0.16 * sweep; const cx = mx + (-dy / len) * off; const cy = my + ( dx / len) * off; return `M ${p1.x} ${p1.y} Q ${cx} ${cy} ${p2.x} ${p2.y}`; } function NodepromptDecompose() { useLang(); const [activeId, setActiveId] = useStatePD(NP_PRESETS[0].id); const [draft, setDraft] = useStatePD(NP_PRESETS[0].sentence); const [stage, setStage] = useStatePD("idle"); // idle | mapping | mapped const [shown, setShown] = useStatePD(0); const [hover, setHover] = useStatePD(null); const [pinned, setPinned] = useStatePD(null); const containerRef = useRefPD(null); const preset = useMemoPD(() => NP_PRESETS.find(p => p.id === activeId), [activeId]); const totalNodes = preset.nodes.length; // changing preset resets draft + stage useEffectPD(() => { setDraft(preset.sentence); setStage("idle"); setShown(0); setHover(null); setPinned(null); }, [activeId]); // animate node arrival when stage flips to mapping useEffectPD(() => { if (stage !== "mapping") return; setShown(0); let n = 0; const id = setInterval(() => { n += 1; setShown(n); if (n >= totalNodes) { clearInterval(id); setStage("mapped"); } }, 90); return () => clearInterval(id); }, [stage, totalNodes]); const submit = () => { setPinned(null); setStage("mapping"); }; const reset = () => { setStage("idle"); setShown(0); setPinned(null); setHover(null); }; const W = 760, H = 520; const active = pinned || hover; const activeNode = active ? preset.nodes.find(n => n.id === active) : null; // gather edges: parent links + cross-edges const edges = useMemoPD(() => { const e = []; preset.nodes.forEach(n => { if (n.parent) e.push([n.parent, n.id]); }); (preset.crossEdges || []).forEach(p => e.push(p)); return e; }, [preset]); // map id → reveal index for staggered animation const orderIndex = useMemoPD(() => { const m = {}; preset.nodes.forEach((n, i) => { m[n.id] = i; }); return m; }, [preset]); return (
{t("Fig. 02 · Interactive demo")}
{t("Type a prompt. Watch it map.")}
{t("ens · res · unum · aliquid · verum · bonum")}
{/* Input panel — dropdown, textarea, submit. Simulates the NodePrompt entry surface. */}
{t("Three pre-mapped sentences. Pick one, edit if you like, then decompose.")}